body {font-family:arial, helvetica, verdana, "sans-serif"; background:#d4ecfb;}

a:visited {color:blue} /*put this first so you still get red hover on visited links*/

a:hover {color:red;}

/* Make a horizontalmenu class that will space menu items (links) nicely. Also make a youarehere 
class that will be spaced nicely also but will be gray. The * refers to any element including a 
named span. Without an element class or type the size settings will apply to a box around the 
whole span or division and not to the individual elements. Also, the magin-top and margin-bottom 
don't work unless you set a height. */

.smallhzmenu {background:#a7d6d5; }
.smallhzmenu * {padding-left:5px; padding-right:5px; font-size:14px; text-decoration:none; 
font-variant: small-caps; }

/* when you move something using relative positioning, it moves but it doesn't push down whatever was below it, it
just takes up the same space as before you moved it*/

.horizontalmenu {position:relative; top:5px; left:2%; padding-top:2px; padding-bottom:2px; 
padding-right:1%; padding-left:1%; white-space:nowrap; z-index:1000; border: none 1px black; width:90%;}

.horizontalmenu * {padding-left:5px; padding-right:5px; text-decoration:none; 
font-variant:small-caps; }

.horizontalmenu .youarehere {color:rgb(100,100,100); position:relative; top:-10px; }

.verticalmenu * {padding:5px; display:block; margin-bottom:12px; text-decoration:none; 
text-align:left; font-variant:small-caps; }

.verticalmenu { }

.articlestart {position:absolute; top:50px; left:2%;}

.smallfont {font-size:8pt;}

#framelesscontrols {position:relative; top:-5pt; 
margin-left:22pt; margin-bottom:0pt; display:none; padding:0pt; 
border: 1px none black; color:rgb(0,0,250); font-size:9pt;}
   
#framelesscontrols a {font-size:10pt; color:rgb(0,0,250);}

#framelesscontrols a:hover {color:rgb(255,0,0);}

br.endpage {page-break-before:always;}

#homebutton {display:block;}

#outofcontext {display:none;}