html {
width: 100%; 
height: 100%;

}

body {
margin:0px;
padding:0px;
font-family: 'lucida grande', georgia, arial, sans-serif;
/* #f8f8f8 is a very pale blue */
background-color: #fafafa;
color:black;
background-repeat: repeat;
font-size: 100%;
}

p, li {
	margin: 0px 0px 12px 0px;
	padding: 0.1em 0em 0em 0em;
	}
	
.highlight {
/* #ffd700 is gold */
background-color: #ffd700;
color:black;
}

.test {

}
.message_box {
width: 45%;
color: red;
background-color: transparent;
font-weight: bold;
border: 1px black solid;
padding: 5px;
text-align: center;
font-size: 90%;
}

.giant {
font-size: xx-large;
}

.grey-out {
color: #808080;
background-color: transparent;
font-weight: bold;
}

.majortax {
font-size: small;
color: #ff7f50;
background-color: transparent;
font-weight: bold;
}
.large {
font-size: x-large;
}

.minute {
font-size: 60%;
color: blue;
background-color: transparent;
}
.smalltext {
font-size: 72%;
color: black;
background-color: transparent;
}

.small85 {
font-size: 85%;
color: black;
background-color: transparent;
}


/* The following class and following define how the links on the species page work.

I tried this on 13 August but only some work.
Associated html is:
<span class="special"><a href="about.php">Synonyms:</a></span>
*/
.special {
font-weight: bold;
background-color: inherit;
color: red;
}
.special a:link {
/* #8b0000 is darkred */
color: #8b0000;
background-color: transparent;
text-decoration:none;
font-weight: bold;
}

.special a:hover {
color: blue;
background-color: transparent;
text-decoration:none;
font-weight: bold;
}

.special a:visited {
color: green;
background-color: transparent;
text-decoration:none;
font-weight: bold;
}
/* End of special species classes */

.literature {
font-style: normal;
font-size: 80%;
color: #2f4f4f;
background-color: transparent;
margin:0;
}
.cont {
color: #778899;
background-color: transparent;
}

.records {
font-size: 75%;
color: black;

background-color: #e6e6e6;
}

.synonyms {
/* #708090 is slategray */
color: #708090;
background-color: transparent;
margin: 0;
padding:0;
}

.enclose {
width:95%;
border: 1px black solid;
}
.vernac {
font-style: normal;
font-size: 75%;
color: #8b0000;
background-color: transparent;
}
.red {
background-color: inherit;
color: red;
}

.derivation {
font-size: 90%;
color: #2f4f4f;
background-color: transparent;
}
.wwdist {
font-size: 90%;
color: #2f4f4f;
background-color: transparent;
}

.agg {
margin: 0 0 0 1em;
font-weight: bold;
background-color: #e6e6e6;
color: #0000cd;
}

.reddata {
font-weight: bold;
color: red;
}

.endemic {
font-weight: bold;
color: green;
}

/* Extra styles added for the glossary file */
dt {
font-weight: bold;
font-size: 100%;
color: inherit;
background-color: #e6e6e6;
margin-bottom: 5px;
}
dd {
margin: 0 0 1em 2em;
}
/*End extra glossary styles

/* Extra styles added for the spot character files */
.spotlist {
font-size: 80%;
margin-left: 5%;
}
.spotlist dt {
color: blue;
background-color: inherit;
}
.spotlist dd a {
/* #00008b is dark blue */
color: #00008b;
background-color: transparent;
text-decoration:none;
font-weight: bold;
}
/* #0000ff is straight blue*/
.spotlist dd a:link {
color: #b8860b;
background-color: transparent;
text-decoration: underline;
}

/*  #daa520 is the former visited color */
.spotlist dd a:visited {
color: #a52a5a;
background-color: transparent;
text-decoration: underline;
}
.spotlist dd a:hover {
/* Orange is #ffa500 */
text-decoration: none;
background-color: white;
color: black;
}


div.float {
width: 170px;
display:inline-block;
vertical-align:top;
border: 0px solid black;
}

/* following replaced: 7 Dec 2015
div.float {
width: 170px;
float: left;
border: 0px solid black;
}
*/
div.float p {
text-align: center;
}
.break {
clear: both;
margin-bottom: 0em;
}
.caption {
font-size: small;
font-weight: normal;
padding: 0.5em;
}
.smallmarg {
margin: 0 0 5px 0;
}
.author {
font-weight: normal;
}
.nomargin {
margin: 0;
}
.navigation {
font-size: small;
}
.navigation2 {
font-size: small;
margin-left: 5%;
margin-bottom: 10px;
}
td {
vertical-align: top;
border-top: 0px solid gray;
padding-right: 0em;
text-align: left;
background-color: inherit;
color: black;
}

.headerrow {
padding: 1em 1em 1em 0;
text-align: left;
}

.navigation2 td {
vertical-align: top;
border-top: 0px solid gray;
padding-right: 0em;
text-align: left;
}

.indent td {
vertical-align: top;
border-top: 0px solid gray;
padding-right: 0em;
}

.indent {
margin-left: 5%;
}
.narrow {
width: 90%;
margin-right: auto;
margin-left: auto;
}
.centered {
text-align: center;
margin-left: auto;
margin-right: auto;
}
img {
border: 1px solid black;
}

.smaller {
font-size: 70%;
border: 0px solid black;
font-family: verdana;
}
.yellowback {

color: inherit;
/* former yellow was #ffff30 */
background-color: #ffff90;
}
.firstletter {
font-weight: bold;
font-size: 120%;
color:red;
background-color: transparent;
}

h1 {
margin: 0px 0px 10px 0px;
padding:0px;
font-weight: bold;
font-size: 120%;
color: #006400;
/*color: #a52a2a; */
background-color: transparent;
}

h2 {
font-size: 100%;
font-weight: bold;
margin:10px 0px 10px 0px;
padding:0px;
background-color: transparent;
color: green;

}

h3 {
font-size: 100%;
background-color: transparent;
color: #b22222;
}
	
hr {
background-color: red;
	color: #ffcc66; 
	width: 95%;
	}
.right {
padding-right: 1em;
text-align: right;
}
.tiny {
background-color: transparent;
color: #666666;
font-size: 70%;
text-align: center;
 }
 
.tight {
margin:0;
padding:0;
}

		/* #ff8c00 is dark orange */
.centered {
text-align: center;
}
.keytable td {
border: 1px solid #deb887;
}
.keytable2 {
border: 1px solid #deb887;
}
.wid5 {
width: 5%;
}
.wid10 {
width: 10%;
}
.wid15 {
width: 15%;
}
.wid20 {
width: 20%;
}

.wid25 {
width: 25%;
}
.wid35 {
width: 35%;
}
.wid50 {
width: 50%;
}

.wid70 {
width: 70%;
}
.wid80 {
width: 80%;
}
.wid95 {
width: 95%;
}

/* Sortable tables */
table.sortable a.sortheader {
    /* background-color:#eee; */
    /* color:#666666; */
		background-color: inherit;
		color: black;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
table.sortable span.sortarrow {
    color: black;
    text-decoration: none;
}


/*
Specific styles for the cultivated pages are applied in the next section
*/
.cult {
font-family: tahoma, verdana, arial, sans-serif;

}
.cult h1 {
/* #b8860b is dark goldenrod */
color: #b8860b;
background-color: inherit;
}

.cult #Header {
/* #b8860b is dark goldenrod */
color: black;
/* #faf0e6 is linen */
background-color: #faf0e6;
}

.cult h2 {
/* #556b2f is dark olive green */
/* font-size: .9em; */
color: #556b2f;
background-color: inherit;
}

.cult p {
/* #006400 is dark olive green */
color: #191970;
background-color: inherit;
}

.cult .backcolor {
/* #eee8aa is pale golden rod */
color: black;
background-color: #eee8aa;
}

.cult .records {
/* font-size: 75%; */
color: black;
/* #eee8aa is pale golden rod */
background-color: #eee8aa;
}

.cult .majortax {
/* #fa8072 is salmon */
color: #fa8072;
background-color: transparent;
}

.cult a:link {
/* #228b22 is forest green */
color: #2f4f4f;
background-color: transparent;
text-decoration: none;
}

.cult a:visited {
/* #808000 is olive */
color: #808000;
background-color: transparent;
text-decoration: none;
}

.cult a:hover {
/* #32cd32 is lime green */
text-decoration: underline;
background-color: transparent;
color: #b8860b;
}

.cult .blueback {
font-weight: bold;
font-size: small;
color: black;
background-color: #d3d3d3;
}

/* Close cult styles */

/*
Specific styles for the 'unknowns' pages are applied in the next section
*/

.unknowns {
font-family: "courier new", verdana, arial, sans-serif;

}


/* Close 'unknowns' styles */

/* The next 2 classes specify the background color of the genera and species:
- backcolor for all native, naturalised plants

 */
.backcolor {
color: black;
background-color: #eeeded;
}

.blueback {
font-weight: bold;
font-size: small;
color: black;
background-color: #ccffff;
}

/* The following 2 classes handle the appearance of the spot-character tables */
.famspot {
color: black;
background-color: #dcdcdc;
width: 25%;
}
.genspot {
color: black;
background-color: inherit;
}


.notopborder {
border-top: 0px solid gray;
}

.leftline {
border-left: 1px dashed gray;
padding: 5px;
background-color: #fffff0;
color: inherit;
}
.menutitle {
margin:0px 0px 16px 0px;
padding:0px;
font-style: italic;
font-weight: bold;
/*  #ff8c00 is darkorange */
color: #556b2f;
background-color: transparent;
}
.spot {
background-color: #fff8dc;
border: 1px solid red;
color: inherit; 
}

.flist {
width: 95%;
color: green;
background-color: inherit;
border: 0px solid red;
margin-right: auto;
margin-left: auto;
}

acronym, abbr {
cursor: help;
border-bottom: 1px dotted #808080;
}
a {
/* #00008b is dark blue */
color: #00008b;
background-color: transparent;
text-decoration:none;
font-weight:600;
}
/* #a52a2a is dark red */
a:link {
color: black;
background-color: transparent;
font-weight: bold;

}
/* #cd853f is ??? */
a:visited {
color: #800000;
background-color: transparent;


}
a:hover {
/* formerly: darkorange */
/*/ #191970 works quite well */
text-decoration: none;
background-color: inherit;
color: #bdb76b;
}
/* Red data anchor styles follow here */
.reddata a:link {
color: red;
background-color: transparent;
text-decoration: underline;
}

.reddata a:visited {
color: red;
background-color: transparent;
text-decoration: underline;
}

.reddata a:hover {
text-decoration: none;
background-color: white;
color: black
}

/* Endemic species anchor styles follow here */
.endemic a:link {
color: green;
background-color: transparent;
text-decoration: underline;
}

.endemic a:visited {
color: green;
background-color: transparent;
text-decoration: underline;
}

.endemic a:hover {
text-decoration: none;
background-color: white;
color: black
}

/* Aggregate species anchor styles follow here */
.agg a:link {
color: #0000cd;
background-color: transparent;
text-decoration: underline;
}

.agg a:visited {
color: #0000cd;
background-color: transparent;
text-decoration: underline;
}

.agg a:hover {
text-decoration: none;
background-color: white;
color: black
}



#Header {
	color: black;
	margin:10px 0px 10px 0px;
	font-weight:bold; 
	text-align: center;
	padding:10px 0px 10px 20px;
	height:14px; 
	border-style:solid;
	border-color:black;
	border-width:1px 0px;  /* top and bottom borders: 1px; left and right borders: 0px */
	background-color: #eeeded; 
	letter-spacing: 0.4em;
	}

#Content {
	margin:0px 50px 0px 250px;
	padding:10px;
	}

#Menu {
	font-size: 80%;
	color: black;
	position:absolute;
	top:75px;
	left:20px;
	width: 170px;
	padding:10px;
	/*background-color: #f0fff0; */
	background-color: #f2eded;
	border: 1px solid #a52a2a;
	}

/* the following Div is the right box in a 3 menu layout. The central content div must be based on class=Content3 That class follows immediately afterwards. */
#rightbox {
	position:absolute;
	width: 170px;
	top:75px;
	right:20px;
	color: black;
	/* #a52a2a is brown */
	border: 1px solid #a52a2a;
	text-align: center;
	/* background-color: #f0fff0;*/
	background-color: #f2eded;
	padding:10px;
	z-index:1;
	font-size: 100%;
	}

/* this switches off the black border for any images in rightbox */
#rightbox img {
border: 0px;
}

/* All the content boxes belong to the content class. */
.Content3 {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:10px 210px 20px 248px;
border-left: 0px solid black;
background-color: transparent;
padding: 10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
	}