html {
width: 100%;  /* these prevent some bugs in some browsers */
height: 100%;
}

/* from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_breadcrumbs */
ul.breadcrumb {
  font-size: 80%;

}
ul.breadcrumb li {
  display: inline;
  margin-bottom: 0;
  
}
ul.breadcrumb li+li:before {
  padding: 5px;
  color: black;
  content: ">\00a0";
}

.breadcrumb {
margin:5px;
}


input[type="text"]{
height:25px;}

input[type="submit"] {
height: 25px;
} 

/* 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;
}

.leftmargin {
margin-left: 2%;
}

body {
margin:0px;
padding:0px;
font-family: "Times New Roman", Times, serif;
/* font-family: helvetia, arial, sans-serif;
 #f8f8f8 is a very pale blue */
background-color: #f8f8f8;
color:black;
background-repeat: repeat;
 font-size: larger; 
}
	
.highlight {
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 {
color: #7b68ee;
background-color: transparent;
font-size: small;
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;
}
/* 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 {
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 {
background-color: #f0f8ff;
font-size: 75%;
color: black;
}
.synonyms {
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;
}

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

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

.agg {
margin: 0 0 0 1em;
font-weight: bold;
background-color: #faebd7;
color: #0000cd;
}
/* Extra styles added for the glossary file */
dt {
font-weight: bold;
font-size: 100%;
color: inherit;
background-color: #faebd7;
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;
}

--bs-breadcrumb-divider {
	margin: 0px;
}
.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: 1em;
}

.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 {
font-style: italic;
color: inherit;
/* former yellow was #ffff30 */
background-color: #ffffe0;
}
.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%;
/* #00008b is dark blue */
color: olive;
background-color: inherit;

}

h2 {

font-weight: bold;
margin:10px 0px 10px 0px;
padding:0px;

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

}

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;
}

p {
/* 191970 is Midnight blue */
color: green;
background-color: inherit;
}

p, li {
	margin: 0px 0px 12px 0px;
	padding: 0.2em 0em 0em 0em;
	color: darkolivegreen;
	background-color: inherit;
	}
		/* #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%;
}

/*
Specific styles for the cultivated pages are applied in the next section
*/
/*To start with, use same cult styles for Moz as for Zim */
.cult {
font-family: tahoma, verdana, arial, sans-serif;
font-size: 100%;

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

.cult #Header {
/* #b8860b is dark goldenrod */
color: black;
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
- cultcolor for purely cultivated plants
 */
.backcolor {

color: black;
background-color: #f0f8ff;

}
/*.cultcolor {
color: black; */
/* #e6e6fa is lavender */
/* Formerly: #d8bfd8 
background-color: #ccffff;
} */
.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;
}

a:link {
/* #00008b is darkblue */
color: olivedrab; 
background-color: transparent;
text-decoration: underline;
}
/* #cd853f is ??? */
a:visited {
color: darkgreen;
background-color: transparent;
text-decoration: none;
}
a:hover {
text-decoration: underline;
background-color: transparent;
color: #b0e0e6;
}
/* 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 25px 0px;
	font-size: 100%;
	font-weight:bold; 
	text-align: center;
	padding:8px 0px 0px 10px;
	height:100%;
	border-style:solid;
	border-color:black;
	border-width:1px 0px; 
	background-color: yellowgreen;
	letter-spacing: 0.4em;
		}

#Content {
	margin:0px 0px 10px 0px;
	padding: 0px 25px 10px 0px;
	width: 100%;
	line-height: 125%;
	}

#Menu {
font-size: 75%;
	margin: auto;
	color: black;
	padding:10px;
	background-color: #f0fff0;
	border: 1px solid #a52a2a;
	width: 75%;
	word-wrap: break-word;
	line-height: 125%;
	}

/* 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 {
	margin: auto;
	right:20px;
	color: black;
	border: 1px solid #a52a2a;
	text-align: center;
	background-color: #f0fff0;
	padding:10px;
	z-index:1;
	font-size: 100%;
	width: 75%;
	}

/* 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 {
margin:0px 0px 10px 0px;
border-left: 0px solid black;
background-color: transparent;
padding: 0px 25px 10px 0px;
line-height: 125%;
	}