/* 
 * The website CSS for positioning and styling (+ a few hacks). 
 * Positioning is done by floating boxes.
 * The design was inspired by a draft found in webideasfesl2.ppt
 *
 * The colors used for this site are:
 *   Menu background: brown/green (#dbd9c5;)
 *   Menu item, background colour: light brown (#edece2;)
 *   Menu item, text colour and hover background image: green (#848348;)
 *   Content background: light brown (#edece2;)
 * 
 * Styles below are organized as:
 *   Containing Boxes
 *   Side Menu
 *   General styles
 *   Less common styles
 *   
 * Rueben Schulz - October 2006
 */


/* Containing boxes */

body { 
  font-family: Verdana, sans-serif; /*inherited by children*/
  background-color: gray; 
  text-align: center;               /*make IE centre the content*/
  position: static;

}

div#container {
  width: 800px;      
  margin-left: auto; margin-right: auto;  /*centre content*/
  background-color: #dbd9c5; 
  text-align: left;                /*override inherited text-align from body*/
  border: 2px solid black;
  
}

div#leftHeader { 
  height: 80px; 
} 

div#left { 
  float: left; 
  width: 230px; height: 100%;
}

#left img {
  margin: 0;
}

div#leftFooter { 
  font-size: 8pt; 
  color: white; text-align: center; 
  margin-top: 50px; margin-bottom: 10px;
} 

div#contentHeader { 
  height: 190px;
  background-image: url(img/topForest.jpg); 
  border-top: 0.1px solid black;            /* firefox needs this to behave correctly */
}

div#contentHeader h1 { 
  font-size: 16pt; 
  font-style: normal;
  margin: 100px 0 0 0px;
  padding: 10px 0 10px 20px;
  opacity:.60;                             /* CSS 3, ignored in IE */
  background-color: white;
  /*background: url(img/headerBackground.png); */
}

div#content { 
  float: left;  
  background-color: #edece2; width: 520px;
  min-height: 700px;                     /* make sure box goes to page bottom on pages with short text*/
  padding-bottom: 50px;
}

/* for Internet Explorer 6, which doesn't understand min-height (see http://www.cssplay.co.uk/boxes/minheight.html)*/
/*\*/
* html #content {
height: 700px;
}
/**/


/* Side Menu */

ul#menu, ul#secondary, ul#tercery { 
  list-style: none; 
}

#menu li {  
  margin: 1em 0em 1em -20px; font-size: 16px;
          
}

#menu a {
  font-size: 11pt; 
  font-weight: bold;
  text-decoration: none;
  color: #848348;
  background-image: url(img/menuLight.png); background-repeat: no-repeat;
  margin: 10pt 0pt 10pt 0pt;
  display: block; height: 20px;    /*make sure the background image shows*/
  padding-left: 10px;
}

#menu a:hover, a#selected {
  background-image: url(img/menuHover.png); background-repeat: no-repeat;
  color: black;
}


/* General styles */
/* Font is inherited from the body */

p {
  font-size: 11pt; 
  margin: 10pt 20px 10pt 20px; 
}

img {
  margin: 10pt 0 10pt 20px; 
}

h2 {
  font-size: 12pt; 
  font-weight: bold;
  margin: 10pt 20px 10pt 20px; 
}

h3 {
  font-size: 12pt; 
  color: black; font-style: italic;
  margin: 10pt 20px 10pt 20px; 
}

li {
  font-size: 11pt; 
  margin: 10pt 20px 10pt 20px;
}


/* Less common styles */

.jsNote {font-size: 9pt;}

/* widths here are set to make IE 6 happy */
.staff { border-bottom: 2px solid #dbd9c5; clear: both; }
.staff .name { width: 40%; float: left; font-size: 10pt; font-weight: bold; margin-left: 40px; }
.staff .position { width: 35%; float: left; font-size: 10pt; }

.mapGallery {
  float:left; 
  margin-left: 20px; 
  width: 150px;
  height: 200px;
}

.mapGallery img {
  border-width: 0;
  margin: 0;
}

.mapGallery p {
  text-size: 10pt;
  margin: 0;
}

.note { background-color: yellow }