/* Layout Stylesheet */ 
/* Todo:
      add puppies, young-adults
      add titles for sections
      maybe use HTTP compression, otherwise called content encoding -- use mod_gzip See Tools->View Speed Report
      Rebuild thumbnails that are over 6k, especially img096, 488
      add title= attributes to all images
*/

 body { 
    margin-left: .5%; 
    margin-right: .5%;
    margin-top: .5%; 
    background: #303030;
    color: white;
    font-family: Georgia, Garamond, "Times New Roman", serif;
    font-size: 90%;
    /*behavior:url(css/csshover.htc); */
  }

* {  margin:0; padding:0; }
	 
#hdr{
 width: 100%;
 height: 77px;
 background: url(../thumbnails/webheader.gif);
 background-repeat: no-repeat;
 border: solid white;
 border-width: 0 0 4px 0;

 color: #333333;
 }

/*  These are the link colors, except in a text page */
a:link { color: white; }
a:visited { color : #f33333; }
a:hover { color: white; }

/*  link colors on a text page*/
.textInverse a:link { color: black; }
.textInverse a:visited { color : #f33333; }
.textInverse a:hover { color: white; }

/*  link colors inside navigation buttons */
div.navigation li a:link { color: black; }
div.navigation li a:visited { color : #202020; }
div.navigation li a:hover { color: white; }


#left-col {
   float: left;
   background: #303030;
    border-right: 12px solid #303030;
}
#left-coltext {
   float: left;
   background: #303030;
    border-right: 12px solid #f0e0e0;
}
#BackButton {
   clear: both;
   color: yellow;
}

#rh-col{
 /* background: same as body */
 color: black;
 margin: 0 0 0 0;
 padding: 0 0 0 .5em;
 border-width: 0 0 0 0;
 }

/*   This section gives a grey background to provide a slight edge around the textinverse class below*/
 #rh-textid{
 background: #e8d8d8;
 color: black;
 margin: 0 0 0 0;
 padding: 1em 1em 1em 1em;
 border-width: 0 0 0 0;
 }
/*  This section uses black text on near white background */
 .textInverse{
 background: #f0e0e0;
 color: black;
 font-size: 1.1em;
 margin: 0 0 0 0;
 padding: 1em 1em 1em 1em;
 border-width: 0 0 0 0;
 }
 
 #thumbnails {
  background: #303030;
  color: white;
  padding: 0 0 0 1em;
 }

  h1 { font-size: 2.0em; margin-bottom: 1em;}
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.2em; margin-bottom: 1em; }
  h1,h2 { font-family: Georgia, Garamond, "Times New Roman", serif; }

  pre {
     background: white;
     color: green; font-weight: bold;
     white-space: pre; font-family: "Courier New", monospace;
  }
  em { font-style: italic; font-weight: bold }
  strong { text-transform: uppercase; font-weight: bold }

   /*  This is the list of navigation buttons as a whole */
   .navbuttons { margin:1em 2em 1em 1.25em; padding: 0px; list-style-type: none;
       border-top: 2px solid black;
       border-right: 0px;
       border-bottom: 0px;
       border-left: 0px; }
  /* This is an individual button */
  .navbuttons li { border-bottom: 2px solid black;
       margin:0; padding: .3em 0; text-indent: .5em;
       color: black; background-color: #41bbf0; }
    
  /* mailto link gets its color from the 'a' tag */
  .mailto { font-size: 1.2em;  background: transparent}

  /* images embedded within paragraph are floated on left */
  p img { float: left; margin: 0 1em 0 1em; border: 2px solid black; }
  
  


  /* images that are displayed fullsize */
  p#fullsize img {
       border-top: 6px solid white;
       border-right: 12px solid white;
       border-bottom: 6px solid white;
       border-left: 12px solid white;
    }
  /* Images default */
  img {
       border-top: 1px solid black;
       border-right: 5px solid black;
       border-bottom: 5px solid black;
       border-left: 1px solid black;
 }
 
  /* fullsize images that have their own borders, so they don't want a white one */
   .noborder { border: none }
  


  /* go below any floating objects before drawing the horizontal rule */
  hr { clear: both; }

  /* footer needs a clear before it */
  .footer { clear: both; }

  p { margin-bottom: .8em; }

  p.dropcap:first-line { font-size: 130%; }
  

  /* first letter of paragraph is bigger. */
  p.dropcap:first-letter { font-size: 225%;
        font-weight: bold;
        width: 1em;  float: left;
	margin-right: .2em; margin-bottom: -10px;
       }
  
  /*  this controls the appearance of a letter when it's <span class=dropcapletter */
  .dropcapletter { font-size: 225%;
	font-weight: bold;
        width: 1em;  float: left; 
	margin-right: 0em; margin-bottom: -10px;
       }

  .copyright { font: 1.1em "Comic Sans MS", sans-serif; }


/* consider embedded fonts, see chap 26 of "Web Design in a Nutshell" maybe TrueDoc */