/****************************************************
 * This element has defaults which should be inherited
 * by many other elements
 ****************************************************/
body
{
  font-family: Arial, Helvetica, sans-serif;
  font-size:14px;
  color: #006600;
  background-color: white;

  /* Note: This only should work for non-strict HTML.
     Width applies to block-level elements, and BODY 
     is not one. 
  */
  width: 750px;
}


/****************************************************
 * This should be the first element inside the body
 * if the width of the page is to be constrained. 
 * Technically (strictly), the body width should not
 * be set becaues the body element is not a 
 * block-level element.
 ****************************************************/
div.body
{
  width: 750px;
}



/****************************************************
 * ELEMENT DEFAUT STYLES - default styles for basic
 * HTML elements
 ****************************************************/

h1, h2, h3, h4 
{
  border: 0px;
  padding: 0px;
  margin: 0px;

  font-weight: bold;
}

h1
{
  font-size:1.6em;
}

h2
{
  font-size:1.2em;
}

h3
{
  font-size:1.1em;
}

h4
{
  font-size:1em;
}

td, th
{
  /* all content starts at the top of its table cell */
  vertical-align: top;
}

th
{
  text-align: left;
  background-color: #CCCCCC; /* silvery */

  font-weight: bold;
}

strong
{
  font-weight: bold;
}

em
{
  font-style: italic;
}

a:link    
{ 
   color: #666666;  /* dark gray */
}
a:active  
{ 
   color: #663300; /* deep red */
}
a:visited 
{ 
   color: #666666; /* dark gray */
}

img
{
   border: 0;

   /* This looks good for inline images.  For images which are along inside
      of block elements, it vertically centers the image in the block. */
   vertical-align: top; 
}




/****************************************************
 * Attributes of LISTS and LIST ELEMENTS
 ****************************************************/

ul, ol
{
  /* By default, most browsers seem to set them larger */
  margin-top: 2px;
  margin-bottom: 2px;

  /* If you set them at all, you have to set both of these properties 
     to a moderate level, If you set one  and not the other, then it 
     will look funny in either IE or Moz.
  */
  margin-left: 12px;
  padding-left: 12px;

  list-style-position: outside;
  marker-offset: 10px;
  
}

ul.lesser, ol.lesser {

  font-size: smaller;
}

li 
{
  padding-left: 0px;
}

li.sep 
{
  margin-bottom: 6px;
}



/****************************************************
 * GENERIC BLOCK-LEVEL ATTRIBUTES
 ****************************************************/

*.sectionBlock
{
  padding: 9px;
}

*.embedded
{
  width: 100%;
}

*.bordered
{
  border: 3px solid black;

  border-radius: 3px;
}

*.outlined
{
  border: 1px solid #CCCCCC; /* silvery */
}

*.shaded
{
  background-color: #CCCCCC; /* silvery */
}

*.unshaded
{
  background-color: white;
}

*.padded
{
  padding: 5px;
}

*.centered, *.center
{
   text-align: center;
}

*.clickable
{
   cursor: pointer;
}


/****************************************************
 * GENERIC INLINE  ATTRIBUTES
 ****************************************************/

*.inverseBW
{
  background-color: black;
  color: white;
}

*.nowrap
{
  white-space: nowrap;
}
	
*.bold
{
  font-weight: bold;
}

*.note
{
  font-size: 0.8em;
}   

*.top
{
  vertical-align: top;
}
*.middle
{
  vertical-align: middle;
}
*.bottom
{
  vertical-align: bottom;
}


/****************************************************
 * Some specifics
 ****************************************************/

div.space
{
  height: 15px;
}

div.hr
{
  height: 3px;
  background-color: #CCCCCC; /* silvery */
}

th.sectionTop
{
  border-top: 3px solid #CC3300;  /* deep red */
}

span.intro
{
  font-size: larger;
  font-weight: bolder;
}

span.caption
{
  font-size: 0.9em;
}

/* For some photos we want a frame */
img.framed
{
   border: 7px groove white;
}