/* set margins, padding and inline-level alignment */
/*background-image: url(file:///home/dnabeddows/Website/DSCF0011.JPG)*/
html { overflow:auto; }
body {margin:0; padding:0; overflow:auto;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%; }
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:0% 0% 0% 0%;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify; }
#fixed {position:absolute}

div {
 padding: 0px 0px 0px 0px;
 /* font-family: Georgia, Sans-serif, Serif, Verdana; */
 margin: 0px 0px 0px 0px; /* top right bottom left*/
 /* text-align: justify; */
 /* letter-spacing: normal; */
}

/* set widths and float nav & ads div content boxes */
#nav { float: left ; width: 180px; height: 100%;  }
#ads { float: right; width: 260px; height: 100%;  }

/* set side txt margins 5px > nav & ads widths */
#txtsup {margin-left: 205px; margin-right:285px; }
#txt    {margin-left: 205px; margin-right:20px; 	 }

/* ensure footer stays at the bottom */
#ftr { font-size: small;
       font-weight: bold; 
       text-align: center; 
       clear: both;}

/* shows boundaries and set image sizes - for clarity */
#hdr       { text-align: left; }
#nav, #ads { text-align: left; }
#txt       { text-align: left; }

#hdr img { width: 250px; height: 25px  }
#ads img { width: 75px;  height: 100px }
#txt img { width: 200px; height: 150px }

.float-left { float: left;  margin: 0px 10px 0px 10px; /* top right bottom left*/ }
.float-right { float: right; margin: 0px 10px 0px 10px; /* top right bottom left*/ }
.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }

h1, h2, h3, h4, h5, h6 {
 font-family: Georgia, Sans-serif, Serif, Verdana;
 color: #343474; 
}

h1 {margin:15px;}

h2, h3, h4, h5, h6 {
 font-family: Georgia, Sans-serif, Serif, Verdana;
 color: #009900; 
}

/* This is a CSS Class used by the <span> command       */
/* to overide general settings                          */
/* For example: <span class="greenboldtext">2008</span> */
.greenboldtext{
  font-size: small;
  color: #008080;
  font-weight: bold;
  text-decoration: blink; /*none, underline overline line through blink*/
  /*text-indent: value*/
  /*text-transform: none/capitalize/lowercase*/
  /*white-space: value*/
  /*word-spacing: value*/
}

.attention{
  font-family: Georgia, Sans-serif, Serif, Verdana;
  color: #F52727;
  font-size: xx-large;
  font-weight: bolder;
  text-decoration: blink; /*none, underline overline line through blink*/
  text-align: left;
  /*text-indent: value*/
  /*text-transform: none/capitalize/lowercase*/
  /*white-space: value*/
  /*word-spacing: value*/
}

.attentionNOT{
  font-family: Georgia, Sans-serif, Serif, Verdana;
  color: #F52727;
  font-size: xx-large;
  font-weight: bolder;
  text-decoration: none; /*none, underline overline line through blink*/
  text-align: left;
  /*text-indent: value*/
  /*text-transform: none/capitalize/lowercase*/
  /*white-space: value*/
  /*word-spacing: value*/
}

.italic{
  font-style: italic;
}

/* This is a CSS ID used by the <div> command           */
/* to overide general settings                          */
/* For example: <div id="container">2008</div >         */

#container{
  width: 80%;
  margin: auto;
  padding: 10px 10px 10px 10px; /* top right bottom left*/
  border: 1px solid #666;
  background:#FFFFFF;
}

#sitelinks{
  width: 90%;
  margin: auto;
  padding: 5px 5px 5px 5px; /* top right bottom left*/
  border: 1px solid #666;
  background: #FFFFFF;
  text-align: left;
}
/*divs create boxes of style and span create inline style */

a:link {color: #0c2577; text-decoration: none;}/*new links*/
a:visited {color: #660000; text-decoration: none;}/*visited links*/
a:hover {color: black; text-decoration: underline;}/*mouse-over*/
a:active {color: black; text-decoration: underline;}/*active links*/

/* Collapsible menu CSS code. */
.mC {width:150px; margin:15px; float:left;}  /* The mC class is a wrapper for the whole collapsible menu. */
.mH {color:#60c; cursor:pointer;  font-weight:bold; border-top:1px solid #300;} /* The mH class defines the menu headings that always appear on the screen. */
.mL {display:none; margin-bottom:10px;} /* The mL class is a wrapper for each of the menus that we are making collapsible */
.mO {margin-left:10px; display:block;}  /* The mO class defines each of the options within each menu. */

/* set general thumbnail styles */
#pix0 { position: absolute; top:60px; left:205px; }
#pix1 { position: absolute; top:60px; left:250px; }
#pix2 { position: absolute; top:60px; left:275px; }
#pix3 { position: absolute; top:60px; left:300px; }
#pix4 { position: absolute; top:60px; left:325px; }
dt   { margin: 10px; }
img  { border: none; }

/* MouseOut state (default) - hide larger pictures */
#pix0 a img.hid {
  width: 500px; height:300px;
  position: absolute; top:10px; left:170px; 
  visibility: hidden;
}
#pix1 a img.hid {
  width: 500px; height:300px;
  position: absolute; top:10px; left:170px; 
  visibility: hidden;
}
#pix2 a img.hid {
  width: 500px; height:300px;
  position: absolute; top:10px; left:170px; 
  visibility: hidden;
}
#pix3 a img.hid {
  width: 500px; height:300px;
  position: absolute; top:10px; left:170px; 
  visibility: hidden;
}
#pix4 a img.hid {
  width: 500px; height:300px;
  position: absolute; top:10px; left:170px; 
  visibility: hidden;
}

/* MouseOver state (hover) - reveal larger picture */
#pix0 a:hover         { background: white }
#pix1 a:hover         { background: white }
#pix2 a:hover         { background: white }
#pix3 a:hover         { background: white }
#pix4 a:hover         { background: white }

#pix0 a:hover img.hid { visibility: visible }
#pix1 a:hover img.hid { visibility: visible }
#pix2 a:hover img.hid { visibility: visible }
#pix3 a:hover img.hid { visibility: visible }
#pix4 a:hover img.hid { visibility: visible }