body {
  scrollbar-arrow-color:white;
  scrollbar-track-color:white;
  scrollbar-shadow-color:red;
  scrollbar-face-color:white;
  scrollbar-highlight-color:lightpink;
  scrollbar-darkshadow-color:pink;
  scrollbar-3dlight-color:pink;
  font-size: 9pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; 
  font-weight: normal; text-decoration: none; color: maroon;
  background-color: white; 
  }


a {font-size: 9pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; font-weight: normal;
         text-decoration: underline; color: red; }  
a:hover {font-size: 9pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; font-weight: normal; 
               text-decoration: underline; color: blue; }
a.no {color:maroon; text-decoration:none;cursor:text;}
a.no:hover {color:maroon; text-decoration:none;cursor:text;}
a.hover {color:maroon; text-decoration:none;}
a.hover:hover {color:blue; text-decoration:underline;}
a.hoverbold {color:maroon; text-decoration:none; font-weight:bold;}
a.hoverbold:hover {color:blue; text-decoration:underline; font-weight:bold;}
a.bold {font-weight:bold;}
a.bold:hover {font-weight:bold;}

a.navlinks{font-size: 9pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; font-weight: normal;
         text-decoration: none; color: purple; }  
a.navlinks:hover{font-size: 9pt; font-family: "Arial", "Verdana",  "Helvetica",sans-serif; font-weight: normal; 
               text-decoration: underline; color: blue; }

a.navsitelink{font-size: 8pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; font-weight: normal;
         text-decoration: none; color: red; }  
a.navsitelink:hover{font-size: 8pt; font-family: "Arial", "Verdana",  "Helvetica",sans-serif; font-weight: normal; 
               text-decoration: underline; color: blue; }

a.navtoplink{font-size: 9pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; font-weight: normal;
         text-decoration: none; color: red; padding-right:17px;}  
a.navtoplink:hover{font-size: 9pt; font-family: "Arial", "Verdana",  "Helvetica",sans-serif; font-weight: normal; 
               text-decoration: underline; color: blue; padding-right:17px;}

a.closewindow{font-size: 7pt; font-family: "Verdana", "Arial", "Helvetica",sans-serif; font-weight: normal;
         text-decoration: none; color: red; }  
a.closewindow:hover{font-size: 7pt; font-family: "Verdana", "Arial", "Helvetica",sans-serif; font-weight: normal; 
               text-decoration: underline; color: blue; }

a.heartsbutton {background-color: red; color:white; text-align:center; font-family: "Arial","Verdana","Helvetica",sans-serif;  
	border:2px; padding:3px 3px 3px 5px; text-decoration:none; 
	border-color:silver; width:20px; border-style:outset; cursor:normal; vertical-align:middle;}
a.heartsbutton:hover {background-color: red; color:white; text-align:center; font-family: "Arial","Verdana","Helvetica",sans-serif;  
	border:2px; padding:3px 3px 3px 5px; text-decoration:none; 
	border-color:silver; width:20px; border-style:inset; cursor:hand; vertical-align:middle;}

.help {border-bottom: 1px dotted blue; cursor: help; }
acronym {border-bottom: 1px solid blue; cursor: help; }
abbr.explain {border-bottom: 1px dotted blue; cursor: help; }

/* div.button is for the random hearts on/off button*/
div.button {background-color: red; color:white; text-align:center; 
	border:3px; padding:3px 3px 3px 3px; text-decoration:none; 
	border-color:pink; width:15px; border-style:outset; cursor:hand;}
div.button:hover {background-color: red; color:white; text-align:center; 
	border:3px; padding:3px 3px 3px 3px; text-decoration:none; 
	border-color:pink; width:15px; border-style:inset; cursor:hand;}

/* div.mainbody is for the main body of every page */
div.mainbody {position:absolute; left:165px; width: 620px; z-index:5;
	font-size: 9pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; 
  	font-weight: normal; font-style:normal; text-decoration: none; color: maroon;}
/* just trying this out:  div.mainbody p:first-line {font-size: 13pt;} */
div.mainbody a{text-decoration: underline; font-weight:normal; color: red; }  
div.mainbody a:hover{text-decoration: underline; font-weight:normal; color: blue; }
div.mainbody a.botlinks{font-size:8pt; text-decoration: none; font-weight:normal; color: red; padding-right:26px;}  
div.mainbody a.botlinks:hover{font-size:8pt; text-decoration: underline; font-weight:normal; color: blue; padding-right:26px;}
div.mainbody a.no {color:maroon;text-decoration:none;font-weight:normal;cursor:text;}
div.mainbody a.no:hover {color:maroon; text-decoration:none;font-weight:normal;cursor:text;}
div.mainbody a.nob {color:maroon;text-decoration:none;font-weight:bold;cursor:text;}
div.mainbody a.nob:hover {color:maroon; text-decoration:none;font-weight:bold;cursor:text;}
div.mainbody a.hovernonbold {font-weight:normal;color:maroon; text-decoration:none;}
div.mainbody a.hovernonbold:hover {font-weight:normal;color:blue; text-decoration:underline;}
div.mainbody a.hover {font-weight:normal;color:maroon; text-decoration:none;}
div.mainbody a.hover:hover {font-weight:normal;color:blue; text-decoration:underline;}
div.mainbody a.hoverbold {color:maroon; text-decoration:none; font-weight:bold;}
div.mainbody a.hoverbold:hover {color:blue; text-decoration:underline; font-weight:bold;}
div.mainbody a.redhoverbold {color:red; text-decoration:none; font-weight:bold;}
div.mainbody a.redhoverbold:hover {color:blue; text-decoration:underline; font-weight:bold;}
div.mainbody a.bold {font-weight:bold;}
div.mainbody a.bold:hover {font-weight:bold;}
div.mainbody area {border:1px solid white;}
div.mainbody area:hover {border:1px solid skyblue;}
div.mainbody a img {border:1px solid white;}
div.mainbody a:hover img {border: solid skyblue 1px;}
div.mainbody table.item {z-index:5;font-size: 8pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; 
  	font-weight: normal; font-style:normal; text-decoration: none; color: maroon; }
div.mainbody table.item tr td {padding:5px;border:1pt solid #FFCCCC;font-size: 8pt;}
div.mainbody table.item tr td a.description {color:maroon;font-weight:normal;text-decoration:none;font-size: 8pt;}
div.mainbody table.item tr td a.description:hover {font-weight:normal; color:blue;text-decoration:underline;}
div.mainbody table.item tr td a.switch {color:red;font-weight:normal;text-decoration:none;font-size: 7pt;}
div.mainbody table.item tr td a.switch:hover {font-weight:normal; color:blue;text-decoration:underline;}
div.mainbody table.item tr td a.switchcostume {color:red;font-weight:normal;text-decoration:underline;font-size: 8pt;}
div.mainbody table.item tr td a.switchcostume:hover {font-weight:normal; color:blue;}
div.mainbody table.item tr td h2 {font-size:9pt;}
div.mainbody table.item tr td h2 a{font-size:9pt;font-weight:normal;text-decoration:none;}
div.mainbody table.item tr td h2 a:hover{font-size:9pt;font-weight:normal;}
div.mainbody table.item tr td h2.subhdg {font-size:8pt;font-weight:bold;}
div.mainbody table.item tr td h2.subhdg a{font-size:8pt;font-weight:bold;text-decoration:underline;}
div.mainbody table.item tr td h2.subhdg a:hover{font-size:8pt;font-weight:bold;}
div.mainbody table.item tr td span.more {color:red;font-size: 8pt;font-weight:bold;position:relative;float:right;} 
div.mainbody table.item tr td span.more a {color:red;font-weight:normal;text-decoration:underline;font-size: 8pt;}
div.mainbody table.item tr td span.more a:hover {color:blue;font-weight:normal;text-decoration:underline;font-size: 8pt;}
div.mainbody div.artintro {width:700px;border:1pt solid #FFCCCC;padding:15px 10px 10px 20px;font-size: 8pt;}
div.mainbody div.artintro a.description {color:maroon;font-weight:normal;text-decoration:none;font-size: 8pt;}
div.mainbody div.artintro a.description:hover {font-weight:normal; color:blue;text-decoration:underline;}
div.mainbody div.artintro h2 {font-size:11pt;}
div.mainbody div.artintro h2 a{font-size:11pt;font-weight:normal;text-decoration:none;}
div.mainbody div.artintro h2 a:hover{font-weight:normal;}
div.mainbody div.artintro span.more {color:red;font-size: 8pt;font-weight:bold;position:relative;float:right;} 
div.mainbody div.artintro span.more a {color:red;font-weight:normal;text-decoration:underline;font-size: 8pt;}
div.mainbody div.artintro span.more a:hover {color:blue;font-weight:normal;text-decoration:underline;font-size: 8pt;}
div.mainbody p {margin:10px 0;}

/* div.infopage is for the main body of (javascript opened) info pages */
div.infopage {font-style:normal; text-decoration: none; color: maroon;}
div.infopage a{text-decoration: none; font-weight:bold; color: red; }  
div.infopage a:hover{text-decoration: underline; font-weight:bold; color: blue; }
div.infopage a.botlinks{font-size:8pt; text-decoration: none; font-weight:normal; color: red; padding-right:26px;}  
div.infopage a.botlinks:hover{font-size:8pt; text-decoration: underline; font-weight:normal; color: blue; padding-right:26px;}
div.infopage a.no {color:maroon;text-decoration:none;font-weight:normal;cursor:text;}
div.infopage a.no:hover {color:maroon; text-decoration:none;font-weight:normal;cursor:text;}
div.infopage a.hovernonbold {font-weight:normal;color:maroon; text-decoration:none;}
div.infopage a.hovernonbold:hover {font-weight:normal;color:blue; text-decoration:none;}

div.artpagemcb {width:232px;float:left;text-align:center;margin:0px 30px 30px 0px;padding-bottom:1px;}
div.artpagemcb a.add {margin:0px 0px 0px 10px;padding:0px 5px 0px 5px;border:1px solid #FFCCCC;background-color:white;text-decoration:none;color:black;}
div.artpagemcb a.add:hover {margin:0px 0px 0px 10px;padding:0px 5px 0px 5px;border:1px solid blue;background-color:white;text-decoration:none;color:blue;}

div.infoprompt {border: solid #FFCCCC 1pt;background-color:#FFF2F2;width:500px;padding:5px;text-align:center;margin-left:auto;margin-right:auto;}
div.snippet {border: solid #FFCCCC 1pt;background-color:#FFF2F2;padding:7px;}

div.artenlargement h2 {font-size:11pt;}
div.artenlargement h2 a{font-size:11pt;font-weight:normal;text-decoration:underline;}
div.artenlargement h2 a:hover{font-size:11pt;color:blue;font-weight:normal;}
div.artenlargement h2.caption {font-size: 7pt; font-weight: normal; color: red;}
div.artenlargement a.add {margin:0px 0px 0px 10px;padding:0px 5px 0px 5px;border:1px solid #FFCCCC;background-color:white;text-decoration:none;color:black;}
div.artenlargement a.add:hover {margin:0px 0px 0px 10px;padding:0px 5px 0px 5px;border:1px solid blue;background-color:white;text-decoration:none;color:blue;}

/* I never use the em tag, so I decided to use it for red, non-italic text */   
em {color: red; font-style: normal;}

/* I don't like the way that line feeds are inserted  automatically after headings,
   so I've made them inline, so that I can have my own control over line breaks */   
h1 {display:inline;}
h1.smallest {font-size:9pt;color:maroon;font-weight:normal;}
h1.replace {font-size: 12pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: bold; text-decoration: none; color: red; display:inline;}
h1.no a {font-size: 12pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: bold; text-decoration: none; color: red; display:inline;}
h1.no a:hover {font-size: 12pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: bold; text-decoration: underline; color: blue; display:inline;}
h1.smaller a {font-size: 11pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: bold; text-decoration: none; color: red; display:inline;}
h1.smaller a:hover {font-size: 11pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: bold; text-decoration: underline; color: blue; display:inline;}
h2 {font-size: 11pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: normal; text-decoration: none; color: red; display:inline;}
h2.larger {font-size: 12pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: normal; text-decoration: none; color: red; display:inline;}
h2 a.h2hover {font-size:11pt;color:red;text-decoration:underline;font-weight:normal;}
h2 a.h2hover:hover {font-size:11pt;color:blue;text-decoration:underline;font-weight:normal;}
h2.sitemapsubhdg {font-size: 10pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: normal; text-decoration: none; color: red; display:inline;}
h2.sitemapsubhdg a {font-size:10pt;color:red;text-decoration:none;}
h2.sitemapsubhdg a:hover {font-size:10pt;color:blue;text-decoration:underline;}
h2.small {font-size: 9pt; font-weight: bold; text-decoration: none; color: maroon; display:inline;}

h2.smallest {font-size:9pt;color:maroon;}
h3 {font-size: 10pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: normal; text-decoration: none; color: red; display:inline;}
h3.block {display:block;font-weight:bold;margin:0;margin-top:5px;}
h4 {font-size: 9pt; font-family: "Arial", "Verdana", "Helvetica", sans-serif; 
    font-weight: normal; text-decoration: none; color: red; display:inline;}

hr {color: red; height: 1pt; }

p.noscript_message {font-size:12pt;}
p.noscript_message b {font-size:12pt;}

span.copyright {font-size: 8pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; 
  font-weight: normal; text-decoration: none; color: black;}
span.copyright a {font-size: 8pt; font-family: "Arial", "Verdana", "Helvetica",sans-serif; font-weight: normal;
         text-decoration: none; color: red; }  
span.copyright a:hover{font-size: 8pt; font-family: "Arial", "Verdana",  "Helvetica",sans-serif; font-weight: normal; 
               text-decoration: underline; color: blue; }
span.copyright a.no {text-decoration: none; color: black; cursor:text;}
span.copyright a.no:hover {text-decoration: none; color: black; cursor:text;}
span.small {font-size:5pt;}
span.tiny {font-size:2pt;}
span.small7 {font-size:7pt;}
span.difference {color:red;font-weight:bold;}
span.red{color:red;}

strong {font-weight:normal;}

table.shadow {display:inline;filter:shadow(color=#DCDCDC,direction=140,strength=3)}
td.navlinks {padding:0px 0px 6px 0px;}
td.topheart {padding:0px 0px 0px 0px;}

/* ul.red has red round bullets,
   the <em> tag is used (rather confusingly!) to turn the text (within the <li> tags) back to maroon, 
   with font-style: normal to make it non-italic
   in general, list items are moved 25px to the left (making them non-indented)*/
ul.red {text-align:left; color:red; list-style-type:disc;}
ul.red li em {font-style:normal; color:maroon;}
ul.red li {left:-25px; position:relative;}

/* ul.redmaroon has red round bullets,
   the <em> tag is used (rather confusingly!) to turn the text (within the <li> tags) back to maroon, 
   with font-style: normal to make it non-italic
   in general, list items are moved to the left (making them slightly inden
   60px for Mozilla/Opera or 20px for IE */
ul.redmaroon {text-align:left; color:red; list-style-type:disc;}
ul.redmaroon li em {font-style:normal; color:maroon;}
ul.redmaroon li {left:-20px; position:relative;}
ul.redmaroon>li {left:-60px; position:relative;}

/* ul.newredmaroon has red round bullets, items are slightly offset to the right; small gap at top & bottom of list
   the <em> tag is used (rather confusingly!) to turn the text (within the <li> tags) back to maroon, 
   with font-style: normal to make it non-italic*/
ul.newredmaroon {text-align:left; color:red; list-style-type:disc;padding:0px;margin: 10px 0px 15px 25px;}
ul.newredmaroon li em {font-style:normal; color:maroon;}

/* ul.heart has hearts as bullets (if image becomes unavailable, for whatever reason, they are red discs)
   the <em> tag is used (rather confusingly!) to turn the first line of text 
   (within the <li> tags) - which is, essentially, a sub-section heading - 
   to red, 11pt, 10px over to right with font-style: normal to make it non-italic 
   the <p> tag is used to move the rest of the text for that <li> 10px over to right,
   and slightly down (by 3px)   
   with display:inline to stop it throwing a line*/
ul.heart {text-align:left; position:relative; left:8px; vertical-align:absmiddle; list-style: url("heart_images/pink.gif") disc;}
ul.heart li em { font-style:normal; color:red; font-size:11pt; position:relative; left:10px;}
ul.heart li p {display:inline; position:relative; left:10px; top: 3px;}

/* ul.heartindex has hearts as bullets (if image becomes unavailable, for whatever reason, they are red discs)
   in general, list items are moved 23px to the left (making them non-indented)
   the <p> tag is used to move the rest of the text for that <li> 12px over to the right,
   with display:inline to stop it throwing a line*/
ul.heartindex {text-align:left; position:relative; top:-10px; vertical-align:absmiddle; list-style: url("heart_images/pink.gif") disc;}
ul.heartindex li {left:-13px; position:relative;}
ul.heartindex li p {display:inline; position:relative;left:12px; }
ul.heartindex li p a.hover {color:maroon; text-decoration:none;}
ul.heartindex li p a.hover:hover {color:blue; text-decoration:underline;}

.rightjust {position:relative; float:right;}
.stylerj {position:relative; float:right;}
#stylerj {position:relative; float:right;}