body {
    background-color: #edf2f2;
    text-align: center;
    font: 14px/20px verdana, Tahoma, helvetica, sans-serif;
    line-height: 130%;
    
	
	}
	
#container {
    position: relative;
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
	
	}

#content {
    position: absolute;
    width: 600px;	
    top: 10px;
    left: 50px;
    background-color: #edf2f2;   
	
   	
    }
	
#content p  {
   padding-left: 15px;
   margin-top: 6px;


}	




a         { text-decoration: underline} 
a:link    { color: blue } 
a:visited { color: purple } 
a:hover   { 
            color: black;
            background-color: 	#d2f2e7;                 /*     #e6e6fa;    */
			text-decoration:none;
          } 

/* http://www.cssplay.co.uk/menu/tooltips.html  and  http://fijiwebdesign.com/content/view/82/77/ */	
/* eg -- leave the <b> and <em>
<a class="tooltip" href="http://www.ibiblio.org/wm/paint/auth/courbet/">Courbet<b><em></em>The painter Courbet started and dominated the French movement toward realism.</b></a>	*/
a.tooltip {color:#c00;}
a.tooltip b {display:none;}
a.tooltip:link {color:blue; text-decoration: underline; }
a.tooltip:visited {color:purple; text-decoration: underline; }
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none; color:black; background-color: 	#d2f2e7;}
a.tooltip:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#ffc; width:150px;}
a.tooltip:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px; background:transparent url(tooltip4.gif) 0 0; display:block; font-size:1px;}
		
/* Pop-up images on inline links -->  http://www.cssplay.co.uk/menu/pop_ups.html  */
a.screen, a.screen:visited {
color:#008080; border-bottom: 1px dashed #008080; text-decoration: none;
position:relative; 
z-index:1;
}
a.screen b {
position:absolute;
visibility:hidden; /* hide the image */
width:250px; /* give it a width */
height:0; /* no height to solve an Opera bug that 
             makes it selectable when hidden */
border:1px solid #000; /* add a border */
left:0; /* position:the image */
top:40px;
}
a.screen:hover {
text-decoration:none; 
border:0; /* needed for this to work in IE */ 
z-index:1000;
}
a.screen:hover b {
visibility:visible; /* make the image visible */
height:120px; /* now give it a height */
cursor:pointer; /* for IE */
z-index:500; 
}
a.screen:hover b img {
border:0; /* remove the link border */
}

a.right_align                /* right align a link -- home (text) */
{
position:absolute;
left:94%

}		  


#content h3 { 
    margin-top: 0px;
    font-weight: 400;
    font-size: 120%;
    line-height: 100%;
    font-variant: small-caps;
    color: #1E90FF;
    margin-bottom: 12px;
    padding-left: 15px;
    }		
	
/* eg "Photo 1"  right aligned */
#content h2 { 
   margin-top: 0em; 
   margin-bottom: 0em; 
   padding-top: 0em;
   line-height: 100%;
   font-weight: 100;
   font-size: 7pt;
   text-align: right;
   color: #708090;
   }			
   
/* source --> http://css.maxdesign.com.au/listamatic/vertical05.htm   */
#navlist
{
margin-left: 20px;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 12px;
background-image: url(dot4.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}