#content {
  position: relative;
  float: left;
  width: 100%;
  min-height: 100%;
}



/**************************************************************
   .width: Sets the width of the content. Needed because much
   of the interface uses tiling bg images that need to be 100%
   of screen width.
 **************************************************************/

 /* Used for containers that are always 980px in width */
.width {
  position: relative;
  z-index: 2;
  margin: 0 auto;

  /* (960px width) + (10px left padding) + (10px right padding) = 980px */
  width: 960px;
  padding: 0 10px;

  text-align: left;
}


/* Used to set minimum width so tiling backgrounds always fill entire screen width */
#topBar, #logoBar, #loginBar, #footer {
  min-width: 980px;
}



/**************************************************************
   #topBar: Holds site message or copyright (brown header bar)
 **************************************************************/

#topBar {
  position: relative;
  z-index: 2;

  min-height: 2em;
  width: 100%;
  background: #755323 url(./img/topBar.gif) repeat-x top left;
}


/**************************************************************
   #logoBar: holds search form and site logo (light green
   header bar)
 **************************************************************/

#logoBar {
  position: relative;
  z-index: 2;
  min-height: 8em;
  background: #D1EC80 url(./img/logoBar.gif) repeat-x top left;
}

#logoBar img {
  position: absolute;
  top: 3px;
  right: 500px;
  border-color: #FFF;
  border: 2px solid;
}

/* Plain text headers */
#logoBar h1,
#logoBar h2 {
  position: relative;
  margin: 0;
  padding: 0 10px 0 0;
  text-align: right;
}

#logoBar h1 {
  top: 20px;
  font-size: 3.5em;
}

#logoBar h2 {
  top: 20px;
  font-size: 1.5em;
}


/**************************************************************
   #loginBar: holds account admin info (dark green header bar)
 **************************************************************/

#loginBar {
  position: relative;
  z-index: 2;

  min-height: 2em;
  color: #FFF;
  background: #9EC91C url(./img/loginBar.gif) repeat-x bottom left;
}

/* The menu top goes here because in absolute positionning, top is
   consistent across all browsers, so it'll always be in the right
   spot, even with font increase/decrease */
#loginBar #menuTop {
  position: absolute;
  z-index: 3;
  top: -38px;
  left: 15px;

  /* Give it height to grow if the green #loginBar increases in height */
  height: 6em;
  width: 267px;

  background: url(./img/menu_top.gif) no-repeat top left;
}

#loginBar ul {
  position: absolute;
  top: 0.2em !important;
  top: 0.3em;
  right: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#loginBar ul li {
  display: inline;
  margin: 0;
  padding: 0 0 0 10px;
}


/**************************************************************
   #page: holds all page content
 **************************************************************/

#page {
  position: relative;
  z-index: 2;

  float: left;
  clear: both;

  width: 100%;

  padding-bottom: 6em;

  /* Define here for IE and Netscape so that the vertical menu
     bar always extends full height of content */
  background: url(./img/menuBar.gif) repeat-y 22px 0px;
}


/**************************************************************
   #menuBar: main menu and news column
 **************************************************************/

#menuBar {
  position: relative;
  z-index: 2;
  top: -40px;
  float: left;
  width: 290px;
}

#menuBar #menuCorners {
  position: absolute;
  z-index: 4;

  /* Buggy top/left for Netscape only */
  top: -9px;
  left: 17px;

  height: 9px;
  width: 266px;

  background: url(./img/bg/menu_corners.gif) no-repeat top left;
}


/* Hide from Netscape to feed correct top/left for all browsers */
#menuBar div/*COMMENT HACK*/#menuCorners {
  top: 31px;
  left: 7px;
}

#menuBar ul#menu {
  position: relative;
  z-index: 4;
  margin: 0 52px 0 40px;
  padding: 0;
  list-style: none;
}

#menuBar ul#menu li {
  margin: 0;
  padding: 0;
  display: inline;
}

#menuBar ul#menu li a {
  display: block;
  padding: 5px 0;

  font: small-caps 1.9em georgia, serif;
  letter-spacing: -0.02em;
  text-decoration: none;

  color: #B9A68B;
  border-bottom: 1px solid #D8CBBA;
}

#menuBar ul#menu li a:hover,
#menuBar ul#menu li.here a {
  color: #795625;
  border-bottom: 1px solid #CBBEAC;
}


/* Make sure that even if not enough content, the vertical menu
   bar will always extend the full height of the screen */
#menuBarBg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;

  height: 100%;
  width: 100%;
}

/* Fix Opera's nested box bug */
@media all and (min-width: 0px){
   #menuBarBg {
     height: inherit;
   }
}

#menuBarBg span {
  display: block;
  position: relative;
  z-index: 1;
  height: 100%;
  width: 980px;

  margin: 0 auto;

  background: url(./img/menuBar.gif) repeat-y 32px 0px;
}



/**************************************************************
   News Posts
 **************************************************************/

#news {
  position: relative;
  z-index: 2;
  margin: 2.5em 41px 2.5em 32px;
  background: #F3EDE4 url(./img/rounded_brown_top.gif) no-repeat top left;
}

#news .bottom {
  display: block;
  height: 10px;
  width: 217px;
  background: url(./img/rounded_brown_bottom.gif) no-repeat bottom left;
}

#news h1 {
  margin: 0;
  padding: 10px 10px 0 10px;
  border: 0;
}

#news ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#news ul li {
  display: inline;
  margin: 0;
  padding: 0;
}

#news ul li a {
  display: block;
  padding: 15px 10px;

  text-decoration: none;
  color: #A1988B;
}


#news ul li a span.title {
  text-decoration: underline;
  color: #93BB17;
}

#news ul li a:hover {
  color: #837B6E;
  background-color: #FFF;
}

#news ul li a:hover span.title {
  color: #627F07;
}



/**************************************************************
   Footer
 **************************************************************/

#footer {
  position: relative;
  z-index: 3;

  float: left;
  clear: both;

  height: 3em;
  margin-top: -3em;
  width: 100%;
  background: #E7DDCF;
  text-align: right;
}


#footer #copyright {
  top: 7em;
  right: 24px;
  font-size: 0.8em;
  color: #AB9A81;
  text-align: right;
}


/**************************************************************
   Alignment classes
 **************************************************************/

.floatLeft {
  float: left;
}

.floatRight {
  float: right;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}