style.css

a > img {
	border:0
}

html {
}

body {
	font-family: Arial, Helvetica, sans-serif; 
	font-size:small;
	clear:both;
	margin:0px;
	height:100%;
	/*for a later time.*/
	background-color: #E5E5E5;
}

a:link {color:green;}    /* unvisited link */
a:visited {color:#003300;} /* visited link */
a:hover {color:#FF0000;}   /* mouse over link */
a:active {color:#00FF00;}  /* selected link */

/*The title text in the header*/
a.HOME {    
	font-size:x-large;
	font-weight:bold;
	text-decoration:none;
	color:#003300;
	padding-left: 8px;
	/*margin:8px;*/
}

.grey {
	color: grey;
}

.black {
	color: black;
}
/*main headings, eg Latin name*/
h1{ }

h2{
	font-size:1.5em;
}

/*being used as field headings, maybe i should change to h2?*/
h3{
	color:#98bf21;
	font-weight: bold; 
	font-size:large;	
}

h4{
	font-size:1em;
}

/*used for a div to surround h1 for latin name*/
.latin_name{
	display:inline-block;
	vertical-align: baseline;
	padding-right:75px;
}

/*used for a div to surround h4*/
.author, .family{
	display:inline-block;
	vertical-align: baseline;
	padding-right:75px;
}

.redir {
	font-size: larger;
	margin-bottom:0px;
}

/*header formatting below*/

.HEADERBLOCK {
    
	background-color: #336E1A;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#336E1A), to(#71D339)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #336E1A, #71D339); /* Chrome 10+, Saf5.1+ */
	background-image:    -moz-linear-gradient(top, #336E1A, #71D339); /* FF3.6 */
	background-image:     -ms-linear-gradient(top, #336E1A, #71D339); /* IE10 */
	background-image:      -o-linear-gradient(top, #336E1A, #71D339); /* Opera 11.10+ */
	background-image:         linear-gradient(top, #336E1A, #71D339);

	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#336E1A', EndColorStr='#71D339', GradientType=0); /* IE6–IE9 */
	/*needed by old IE versions so the filter shows, something to do with items size*/
	overflow: auto;
	margin:0px;
	padding:8px 10px 0px 10px;
	border:0px;

}
.HEADERINNER {
	margin:auto;
	max-width:1050px;
}

.CONTENT {
	padding:0px 10px;
}	

.PageBox {
	padding-left:25px;
	padding-right:25px;
	
	padding-bottom:25px;
	height:100%;
	margin:auto;
	max-width:998px;
	background-color: white;

	margin-bottom:10px;
	/*overflow: hidden;*/
	border-top: 1px solid #FFF;
	-moz-box-shadow: 1px 1px 4px gray;
	-webkit-box-shadow: 1px 1px 4px gray;
	box-shadow: 1px 1px 4px gray;
}
h3:nth-child(1) {
	margin:24px 0px 0px 0px;
}
.FOOTER {
	overflow: auto;
}

.NAVDIV {
	font-size:medium;
	background-color:#98aa21;
	
	/*-moz-box-shadow: 1px 1px 4px gray;
	-webkit-box-shadow: 1px 1px 4px gray;
	box-shadow: 1px 1px 4px gray;*/
}

ul.NAVBAR {
	list-style-type:none;
	margin: 8px 8px 0px 8px;
	padding:0px;
	/*TODO if you can be bother to fix the formatting on old IE versions, 
	 * the below could be reinstated with some fixes*/
	/*height:25px;/*helps keep the formatting ok on old IE, not needed otherwise*/
	overflow:hidden;
}

li.NAVBARLI {

	padding:0px;
	padding-top:0px;

	float:left;
	vertical-align: middle;
    display:inline-block;
}

a.NAVBARITEM:link, a.NAVBARITEM:visited {
    border-right-style:solid;
    border-color:#557711;
    border-width:1px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98aa21;
	
	text-align:center;
	padding:0px 4px 0px 4px;
	line-height:25px;

	text-decoration:none;

    display:inline-block;
}
a.NAVBARITEM:hover,a.NAVBARITEM:active {
	background-color:#7A991A;
}

li.SEARCHBUTTON {

	padding:0px;
	float:left;

	/*only show in mobile view*/
    display:none;
}
li.SEARCHBUTTON > a > img {

	padding:0px;
	margin-left:2px;
	display:block;
	float:right;
	cursor: pointer; 
}

.SEARCH {
	float:right;
    padding:1px; 
    margin:0px; 
	min-width:80px;
	width:194px;
}

.searchbox {
	min-width:80px;
	width:190px;
	border-style:solid;
	border-width:1px;
	border-color:gray;
	font-style: italic;
	color: grey;
	height:100%;
	font-size: 1em;
	display:block;
}

/*code for plant pictures*/

.big_pic {
	max-width:100%;
}

/*this should be a div surrounding the picture and caption*/
.PBOX {
	float:right;
	border:1px solid silver;
	width:360px;
	/*background-color: #D0D0D0;*/
	text-align:center;
	font-size:30px;
	margin:0px;
	margin-right:0px;
	margin-left:10px;
	padding:0px;

	background-image:
	  -moz-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
	  -moz-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
	/*this old webkit gradient code is actually now wrong, but it kinda 
	 * makes an interesting pattern on the few old devices where it will
	 *  show up*/
	background-image:
	  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #ccc), color-stop(.25, transparent)), 
	  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #ccc), color-stop(.25, transparent)),
	  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #ccc)),
	  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #ccc));
	background-image:
	  -webkit-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
	  -webkit-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
	background-image:
	  -o-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
	  -o-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
	
	background-image: 
		linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), 
		linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
	
	background-size:40px 40px;
	-moz-background-size:40px 40px;
	-webkit-background-size:40px 40px;
	-o-background-size:40px 40px;

	background-position:0 0, 20px 0, 20px -20px, 0px 20px;
	background-position:0 0, 20px 20px;

	-moz-box-shadow: 1px 1px 8px gray;
	-webkit-box-shadow: 1px 1px 8px gray;
	box-shadow: 1px 1px 8px gray;
}

/*a styled div shown when there is no image available*/
.NOIMAGE {
	font-style:italic;
	line-height:260px;
	min-height:260px;

	z-index:0;	
}

.PIC {
	margin:0px 0px 0px 0px;
	margin-left: auto;
    margin-right: auto;
	
	max-width:360px;
	max-height:300px;
	
	display:block;
	z-index:100;
	border: 0px;/*for stupid old IE*/

}

/*text displayed under pictures*/
.caption {
	background-color: white;
	font-size: small;
	padding	:0.2em;
}
.ThumbBar{
	background-color: #555;
	font-size: 0px;
	/*have to do this stupidity because firefox and IE ignore padding in the scrollable size of a container*/
	/*so i add a div with a width in the html to make up for the zero padding on the right*/
	padding: 4px 0px 4px 4px;
	overflow:auto;/*adds scrollbars if neccesarry*/
	white-space:nowrap;

}

a:hover > .Thumb	{
	border-color:red;
}
a:active > .Thumb	{
	border-color:#00FF00;
}
.ThumbLink{
	display:inline-block;
	margin:4px;
}
.Thumb{
	border-width:1px;
	border-color:green;
	border-style:solid;	
}
.hidden {
	display:none;
}

/*different tables*/
.tableBase1 {
	border-collapse:collapse;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: small;
	border: 1px solid black;
}

.tableBase1 > tbody > tr:nth-child(even) {background-color: #C4E2C4}

.tableBase1 th {
	color:white;
	background:green;
	padding: 0.3em 0.5em; 
}

tbody, tr, th, td {
	border: inherit;
}

.tableProperties {
	width:remainder;
	padding: 1px 3px;
	/*tableBase1*/
}

.tableProperties td {
	padding: 1px 3px;
}
/*second column*/
.tableProperties td + td {
	min-width:200px;
}

.tableRecords {
	/*tableBase1*/
}
.tableRecords td:nth-of-type(1) {font-weight:bold;	width: 25%; padding: 0.3em 0.5em; vertical-align:top;}
.tableRecords td:nth-of-type(2) {padding-left: 0.5em;}
/*.ANCHOR {font-weight:bold;	width: 25%; padding: 0.3em 0.5em; vertical-align:top;}
.NORMAL {padding-left: 0.5em;}
*/
.miniBorder {
	border: 1px solid #386C38;
	display: inline-block
}

.tableQuery {
	margin: -2px;
	border-collapse:separate;
	border:0;
}

.tableQuery tr:nth-child(even) {background-color: #FFF !important}
.tableQuery tr:nth-child(odd) {background-color: #559655}
.tableQuery td:nth-of-type(1) {background-color: #78A578}

.tableQuery td, table th  { border-collapse:separate; }

/*comment stuff*/
.comside {
	float:left;
	margin-right:8px;
}

.combody {
	margin-left:80px;
}

.comment {
	border-bottom: 1px solid grey;
	
	padding: 1em 25px;
	margin: 0px -25px;	
	overflow: hidden;
}

.indent {
	margin-left:2em;
}

.comment:last-of-type {
	border:0;
	padding-bottom:0px;
}

.refpage {
	padding-top:0px;
}

.avatar {
	width: 72px;
	height:72px;
	background-color: #C4E2C4;
	margin-left:auto;
}

.commenttitle {
	margin: 0px 0px 0.5em 0px;
}
.commenttitle > em {
	color: grey;
}

.comments {
	box-sizing:border-box;
}

.fgroup {
	display:table;
	clear:both;
	position:relative;
	width: 100%;
	margin:0.5em 0em 0em 0em;
	box-sizing:border-box;
}
.flabel {

	display:block;
	float:left;
	min-width:100px;
	height:100%;
	text-align:right;
	padding-top:5px;
	padding-right:8px;

	box-sizing:border-box;
}

.labeled {
	margin-left:100px;

}
.fcontrol {
	width: 200px;
    padding: 4px 6px;
    border: 1px solid grey;
    border-radius: 4px;

}

.short {
	width:40px;
}

.fsubmit {
	display: block;

	float:right;
	height:26px;
	width: 75px;
    border: 1px solid;
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    
}
.farea {
	box-sizing:border-box;

	width:100%;
	padding: 4px 6px;
    font-size: 12px;
    
    border: 1px solid grey;
    border-radius: 4px;
    
}

.INVISIBLE {
	border-collapse:collapse;
	border:0px;
	padding:0px;
	margin:0px;
}

.small {
	text-align:center;
	font-size:0.85em;
	margin-left:auto;
	margin-right:auto;
	width:600px;
}

.cclicense{
	border-width:0; 
	padding-left:10px; 
	padding-right:10px;
	vertical-align:text-top;
	float:left;
}


#ken-email, #admin-email {
	display:block;
	margin-top:1ex;
	margin-left:3em;
}

/* Formatting for main page elements */

.mainimage {
	float:right;
	margin-left:1em;
	margin-bottom:1em;	
	margin-top:1em;
	font-size: larger;
}
.mainimage > img{
	display:block;
}

/*formatting for image subtexts*/
.subtext {
 margin-top:.4em;
}

.mainpage {
	font-size: larger;
}
.mainpageletters {
	margin-left:3em;
	font-size: larger;
}

#mainsearchbox {
	font-size: larger;
	padding-left: 3em;
}

#mainsearchbox input[type="search"] {
	overflow: hidden; width: auto;
	font-size: 100%;
	width:40ex;

	border-style:solid;
	border-width:1px;
	border-color:grey;
	font-style: italic;
	color: grey;
	box-sizing:border-box;
	vertical-align:bottom;

}

.searchform {
	font-size: larger;
	padding-left: 3em;
	display:inline:block;
	width:200px;
}

.searchform input[type="search"] {
	overflow: hidden; width: auto;
	font-size: 100%;
	/*width:40ex;*/
	width: 200px;
	border-style:solid;
	border-width:1px;
	border-color:grey;
	font-style: italic;
	color: grey;
	box-sizing:border-box;
}

.autoCompleteList {
	display:block;
	position: absolute;
	border: 1px solid grey;
	border-top:0;
	background-color: #FFF ;
	box-shadow: 1px 1px 4px gray;
	width: 200px;
	box-sizing:border-box;
	max-height:300px;
	overflow-y: scroll;
	z-index:100;
}

.autoListItem {
	cursor:pointer;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.autoListItemHover {
	background-color: #357CFF;
	display:block;
}

#mainsearchbox input[type="submit"] {
	font-size: 100%;
	
}
.leftrightdiv {
	overflow: hidden;
}
#leftnav {
	position:absolute;
	margin-left:3px;
}
#rightnav {
	float:right;
	margin-right:3px;
}
#options {
    -moz-transition:height .3s ease;
    -o-transition:height .3s ease;
    -webkit-transition:height .3s ease;
    transition:height .3s ease;
  	/*overflow hidden causes childs margins to be added to this divs 
  	 * margins for some annoying reason*/
  	overflow: hidden;
	
}
#adv_text, #syn_text {
	font-weight: bold; 
	
	cursor: pointer; 
}
#synonyms {
    -moz-transition:height .3s ease;
    -o-transition:height .3s ease;
    -webkit-transition:height .3s ease;
    transition:height .3s ease;
  	/*overflow hidden causes childs margins to be added to this divs 
  	 * margins for some annoying reason*/
  	overflow: hidden;
	height:0px;	
}
#measure {
	/*overflow hidden causes childs margins to be added to this divs
	 *  margins for some annoying reason, need to have this one 
	 * overflow too so it's same size as parent*/
  	overflow: hidden;
}
#measurement {
	/*overflow hidden causes childs margins to be added to this divs
	 *  margins for some annoying reason, need to have this one 
	 * overflow too so it's same size as parent*/
  	overflow: hidden;
}
#measurement > p {
	margin-bottom:0px;
}

.ref {
	display:inline;
	position:relative;
}

.ref > div {
	display:inline;
	
	z-index: 99;

	position:absolute; left:-1px; top:1.25em; width:250px;
	overflow:auto;
	visibility:hidden;
	background:#FFD992;
	border:1px solid;
	opacity:0;

	max-width:250px;
	padding:.5em;
	box-shadow: 3px 3px 5px #888888;
	transition:visibility 0s linear 0.2s,opacity 0.2s linear;
	-moz-transition:visibility 0s linear 0.2s,opacity 0.2s linear;
	-webkit-transition:visibility 0s linear 0.2s,opacity 0.2s linear;
	-o-transition:visibility 0s linear 0.2s,opacity 0.2s linear;
}

.ref:hover > div {  
	visibility:visible;
	opacity:1;
	transition-delay:0s;
	-moz-transition-delay:0s;
	-webkit-transition-delay:0s;
	-o-transition-delay:0s;
}

dl.refview {
	margin-top:0px;
}
dl.refview > dt:nth-child(1) {
	color:red;
	display:none;
}

dl.refview > dd:nth-child(2) {
	font-weight:bold;
	font-size: larger;
	margin:0px;
}

dl.refview > dd {
	margin-left:1.5em;
	word-wrap: break-word;
}

/*make horizontal rules green*/
hr {
	color:#557711;
}

/* intended for touchscreen devices, tablets and smaller
 * 1024px is largest common tablet size, idealy there should be
 * a selector that reports touchscreen devices, not totally happy with this
 * @media only handheld doesnt work
 * */
@media only screen and (max-device-width: 1024px),only screen and (max-width: 640px)  {
.ref > div {
	position:fixed;
	left:0px!important;
	top:auto;
	bottom:0px; 
	right:0px; 
	height:auto;
	width: auto;
	max-height:100%;
	max-width:100%;
}

.ref:hover > div {  
}

dl.refview {
}
dl.refview > dd:nth-child(2) {
	text-align:center;

}
dl.refview > dt {
	float:left;
	clear:left;
	width:6em;
	text-align:right;
	margin-right:0.6em;
} 
dl.refview > dt:after { 
	content: ":"; 
}
dl.refview > dd {
	margin-left:6.6em;
}
}/*//end tablety*/
@media only screen and (max-width: 640px) {

.tableRecords {
	width: 100%;
}
.tableRecords td:nth-of-type(1) {width: auto;}
.small {
	width:100%;
    margin-left: 0px;
    margin-right: 0px;
}
.cclicense{
	display:block;
	float:none;
    margin-left: auto;
    margin-right: auto;
}

}/*//end 640*/

@media only screen and (max-width: 480px) {
.mainpageletters {
	margin-left:0;
	font-size: larger;
}
.PageBox {
	padding-left:15px;
	padding-right:15px;	
	padding-bottom:15px;
}

h3:nth-child(1) {
	margin:14px 0px 0px 0px;
}
.fcontrol {
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;	
}
.comment {

	padding: 1em 15px;
	margin: 0px -15px;	
}

body {
	/*not sure if this is needed*/
	-moz-text-size-adjust:none;	
}	

.HEADERBLOCK {
}
.CONTENT {
}

#mainsearchbox input[type="search"] {
	width: 100%;
}

#mainsearchbox input[type="submit"] {	
	display:block;
	margin-left:auto;
}

.latin_name{

}
.PBOX {
	width: auto;
	float:none;
    margin-left: auto;
    margin-right: auto;
}
.NOIMAGE {
	font-style:italic;
	line-height:200px;
	min-height:200px;
	z-index:0;	
}
.PIC {
	max-width:100%;

}

li.SEARCHBUTTON {
    display:inline-block;
    width:25%;/*100 divided by no of header items */
    display: inline-block;
}

.SEARCH {
	display:none;
	float:right;
    padding: 1px 0px;
    margin:0px; 
	width:100%;
}
.searchbox {
	width:100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.NAVBARLI {
    width:25%;/*100 divided by no of header items */
	display: inline-block;
}
a.NAVBARITEM:link, a.NAVBARITEM:visited {
	display:block;
}

}/*//end 480*/
@media only screen and (max-width: 360px) {

.flabel {

	display:inline;
	float:none;
}
.labeled {
	margin:0px;
}

}
@media print {
.HEADERBLOCK {
	display:none;
}
.NAVDIV{
	display:none;
}
a.HOME {    
	padding-left: 0;
}
.CONTENT {
	margin:0px;
	padding-left:0;
	padding-right:0;

}.PageBox {
	padding-left:0px;
	padding-right:0px;	
	border:0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.leftrightdiv {
	display:none;
}
.latin_name > h1{
	margin:0px;
}
.author > h4{
	margin:0px;
}

.family > h4{
	margin:0px;
}
.PBOX {
	box-shadow: none;
}

.refview {
	page-break-inside:avoid;
}
h3 {
	page-break-after:avoid;/*doesnt really work*/
	break-after:avoid;/*doesnt really work*/
}

@page {
	margin: 1.5cm;
}

}