/*Colours used in this stylesheet 
#726752 default link colour - dark buff
#DED7BD body/menu background - pale buff
#FFFBE7 container background - cream
#777757 image container border & h2 background ???
#320800 menu text
#726752 title text (e.g. family name
*/

a {
/*color: #726752;*/
color: maroon;
}



body { 
text-align: center; 
/*background: #DED7BD;*/
background: #CCD9DF;
font-family: Verdana; 
/*font-size: 8pt;*/
font-size: xx-small;
font-s\ize: x-small;
color: #211c08;
}


#container
{
width: 770px;
margin: 10px auto;
text-align: left;
background-color: #FFFBE7;
border: 1px solid #000;
font-size:115%;
}

#popupcontainer
{
width: 600px;
margin: 10px auto;
text-align: left;
background-color: #FFFBE7;
border: 1px solid black;

}

#top
{
height: 78px;
position: relative;
background: #777757 url(/images/bannerphoto.jpg) no-repeat scroll right top
}

#topsearch {
	color: #ded7bd;
	font-weight: bold;
	margin: 0;
	padding: 2px;
	position:absolute; 
	right: 160px;
	top: 48px;
}
#topsearch form {
	padding:0;
	margin: 0;
}
#topsearch input {
	background: #ded7bd;
}
#topsearch input.button {
	color: #000;
	font-weight: normal;
	padding: 1px;
	margin-bottom: 0;
}

#navbar
{
margin: 0;
background: #DED7BD;
padding: 0.5em 1em 0.5em 0.25em;
text-align: right;
}

#navbar div
{
/*
color: #726752;
font-weight: bold;
text-align: right;
margin: 0;
padding: 0 0 0 5px;
*/
}

#imgcontainer
{
float: right;
margin: 15px 5px 5px 5px;
padding-bottom: 5px;
background-color: #FFF;
border: 1px solid #777757;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-align: center;
clear: right;
min-width: 250px;
}
#imgcontainer.map {
    background-color: #FFFBE7;
}

#imgcontainerzoom {
	margin: 10px;
	background-color: #FFFBE7;
	border: 1px solid #777757;
	text-align: center;
}
#imgcontainerzoom p {
	margin:5px;
	padding:0;
}

#imgcontainer h2, #imgcontainerzoom h2
{margin: 0;
background-color: #777757;
padding: 0.5em;
color: #FFFBE7;
font-size: 100%;
text-align: left;
}

#imgcontainerhead
{margin: 0;
background-color: #777757;
padding: 0.5em;
color: #FFFBE7;
font-size: 100%;
font-weight: bold;
text-align: right;
}

#tab
{
float: left;
}

#imgcontainerhead a
{
color: #FFFBE7;
font-weight: normal;
}


#content #imgcontainer p
{
margin: 0.5em;
}
#container #imgcontainer p, 
.highslide-caption p {
    margin: 0.25em 0.5em;
}

#imgcontainer p.dataset {
	font-size:smaller;
	text-align:left;
        margin: 0.5em 1em;
}
#imgcontainer .mothscount {
	float:right;
	border:none;
	margin-bottom:5px;
}

div.gridmap {
	width:300px;
	margin: 10px auto;
	border: 1px solid #777757;
	padding-bottom: 30px;
	background: #FFF;
	position:relative;
}

.gridmap .nbnlogo {
	position:absolute;
	top: 5px;
	left: 5px;
}
.gridmap .bclogo {
	border:none;
	position:absolute;
	bottom:5px;
	left:5px;
}
.gridmap a.aboutmaps {
	position:absolute;
	bottom:5px;
	right: 5px;
	font-size:smaller;
}

#imgcontainer table {
	margin-top: 0.5em;
}

#thumbcontainer
{
float: right;
margin: 10px 5px 5px 5px;
background-color: #FFFBE7;
border: 1px solid #777757;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
clear: right;
font-size:90%;
text-align: center;
min-width: 250px;
}


.sponsorcontainer, #newscontainer
{
/*float: right;*/
margin: 5px 5px 0 5px;
padding: 0 12px 5px 12px;
/*background-color: #FFFBE7;*/
border:3px solid #DED7BD;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
clear: right;
font-size:90%;
overflow: hidden;
float: left;
width: 330px;
height: 98px;
}
#content .sponsorcontainer h3, #content #newscontainer h3 {
    border-bottom:none;
}


#thumbcontainer h2
{
margin: 0 0 5px 0;
background-color: #777757;
padding: 0.5em;
color: #FFFBE7;
font-size: 100%;
/*text-align: left;*/
}


.thumbnail
{
/*float: left;*/
margin: 1px;
overflow: hidden;
width: 65px;
line-height: 180%;
display:inline;
}
.thumbnail img {
	border: 1px solid #FFFBE7;
	border: 1px solid #DED7BD; /*timthumb version*/
	background: #FFF;
	padding: 3px;
}
#thumbcontainer .selected img,
#thumbcontainer .selected img:hover{
    	border: 1px solid #000;
}
#thumbcontainer img:hover,
td.thumb a img:hover, .top20 img:hover {
	border: 1px solid #000;
	border: 1px solid #777757; /*timthumb version */
}

td.thumb a img, .top20 img {
	border: 1px solid #DED7BD; /*timthumb version*/
	background: #FFF;
	padding: 3px;
}

.thumbleft
{
float: left;
margin: 0 5px 5px 0;
width: 120px;
}

#content
{

padding: 1em;
background-color: #FFFBE7;
margin-top: 0;
line-height: 1.3;
/*border-top: 5px solid #DED7BD;*/
/*height: 1%; fixes IE peekaboo bug in some situations (eg lhedit.php)*/
/*but breaks show.php!!*/
}

#content h1

{
font-size: 140%;
margin-bottom: 0;
padding-bottom: 0;
}

#content h2
{
margin-top: 0.5em;
margin-bottom: 0;
font-size: 110%;
}


#content h3
{
margin-top: 0.25em;
margin-bottom: 0;
font-size: 110%;
font-weight: normal;
}	

#content h4
{
	font-size: 100%;
	font-weight: bold;
	color: #777757;
	margin-bottom: 0;
}

#content p {
	/*margin: 8px 0;*/
	margin: 8px 0 20px 0;
}

#content .links p {
	margin-bottom:8px;
}

#content p.indent {
	margin-left: 8px;
}

#content hr
{
color: #777757;
height: 2px;	
}

#content td, #imgcontainer td
{
font-size: 11px; /*Force td inheritance for IE5*/
font-s\ize: 100%; 
max-width:180px;
}

#content td.thumb {font-size: 95%;}


input.button
{
background-color: #777757;
color: #FFFBE7;
font-size: 100%;
font-weight: bold;
margin-bottom: 2px;
border-width: 1px;
}

#footer
{
background: #DED7BD;
clear: both;
text-align: center;
font-size: xx-small;
font-s\ize: x-small;
/*border-top: 10px solid #fffbe7*/
}

/*Need to do this to get a consistent cross-browser "margin" between
the floated elements and the top of the footer.

Have to set the font size to a smallish value otherwise IE/Win renders it
at a minimum height too big, even though there's no content. */

#footertopborder {
	font-size: 50%; 
	height: 10px;
	background: #fffbe7;
}

#footer p
{
margin: 0;
padding: 5px 0 5px 0;
}

#footer td {
	/*Fix for IE5 not inheriting body style */
	/*font-size:8pt; */
	/*font-size: x-small;
	font-s\ize: 112%;*/
         font-size: 12px;
}

.fam
{
margin: 10px 0 5px 0;
background-color: #777757;
padding: 0.5em;
color: #FFFBE7;
font-weight: bold;
text-align: left;
}

.subf
{
margin: 5px 0 5px 0;
font-weight: bold;
background: #DED7BD;
padding: 0.25em 1em 0.25em 0.25em;
}

#menucontainer {
width: 150px; 
float: left;
clear: left;
margin: 10px 6px 9px 0;
padding-right: 0;
font-size: 95%;
 }

#menucontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana,Arial, Helvetica, sans-serif;
}

#menucontainer li {
	margin:0;
	padding:0;
}

#menucontainer a
{
margin:0;
display: block;
padding: 3px;
width: 140px;
color: #320800;
background: #DED7BD;
border-bottom: 1px solid #777757;
}

#menulist
{
margin: 0;
padding: 0;
}

#menucontainer a:link, #menulist a:visited
{
color: #320800;
text-decoration: none;
}

#menucontainer a:hover
{
background-color: #777757;
color: #DED7BD;
}

#menucontainer #header
{
display: block;
padding: 5px 3px 5px 3px;
width: 140px;
color: #DED7BD;
background: #777757;
border-bottom: 1px solid #DED7BD;
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-radius-top-right: 4px;
-webkit-border-radius-top-left: 4px;
font-weight: bold;
}
#copyright
{
float:left;
width: 15%;
font-size: 90%;
margin: 5px 0 0 0;
padding: 0;
}

.bordertable
{
border: 1px solid #777757;
}

.gbookhead
{
margin: 10px 0 5px 0;
background-color: #777757;
padding: 0.5em;
color: #FFFBE7;
}

.gbooktext
{
margin: 5px 0 5px 0;
background: #DED7BD;
padding: 0.25em 1em 0.25em 0.25em;
}

#zoomback, #prevnext {
	float: right;
	font-weight:normal;
}
#title {
	float: left;
	color: #726752;
	font-weight: bold;
	margin: 0;
	padding: 0 0 0 5px;
}
.clear {
	clear: both;
}

#content h3 {
	margin-bottom: 5px;
	padding-bottom: 3px;
	border-bottom: 2px solid #777757;
	
}
/*overLib Classes */

.ol_fgclass {
	background-color: #DED7BD;
}

.ol_bgclass {
	background-color: #777757;
}
.ol_textfontclass {
	font-size: 10px;
}

.ol_captionfontclass {
	font-size: 10px;
	font-weight: bold;
}

/*Form (table) classes, e.g. on Search.php */
.formleft {text-align: left}
.formright {text-align: right}
form {
	text-align: left;
	padding: 1em;		
}
fieldset {
	margin: 8px 0;
	padding: 6px;
	border: 1px solid #777757;
	width: 20em;
	display:block;
}
label {
	padding-bottom: 3px;
}

legend {
	margin-bottom: 3px;
	padding: 0 2px;
	font-weight: bold;
	color: #777757;
}

/*class to simulate hr in a div */
.hr {
	background: #777757;
	height: 2px;
	padding: 0;
	font-size: 10%;
	margin-r\ight: 270px;
}

.newtext {
	font-weight: bold;
	color: #F00;
}

#references ul, #similarspecies ul {
	padding-left: 10px;
	margin-left:0;
	list-style:none;
	margin-top:5px;
}
/*class to hide del tag*/

.remove {display:none;}

/* paypal donate */
.donate {float:right;clear:right;-moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px;border:3px solid #DED7BD;
font-size:90%;margin:0 5px 5px 10px;overflow:hidden;padding:10px 5px 0 5px;
width:180px;text-align:center;}
.donate form {text-align:center;}
.sponsorcontainer, #newscontainer {width:333px;}
.latestnews {-moz-border-radius:6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px;border:3px solid #DED7BD;
	padding:0 10px 10px 10px; background: #FFF;}
.latestnews img {padding-top:5px; border:none;}

.mobiletitle {display:none;}

/* Book display pages */
.book, .booktitle, .bookimage, .booktext {float:left; margin-right:10px;}
.booktitle {width:180px;}
.bookimage {width:70px;}
.booktext {width: 450px;}
.imgbookleft {float:left; margin: 0 10px 10px 0;}
.imgbookright {float:right; margin: 0 0 10px 10px;}

/* Top 20 page */
div.top20 div {padding: 10px 10px 0 5px; float:left; width:98%;}
div.top20 div img {float:left; margin: 0 10px 10px 0;}

/* Thumbnail pages */
td.thumb a, td.thumb span, td.thumb small {display:block;}

/* --- small devices ---
===============================*/

@media all and (max-device-width: 480px), all and (max-width: 480px){

/*----- general -----*/
.guestbook input[type=text], .guestbook textarea {width: 98% !important;}
body {-webkit-text-size-adjust: none;}
.dev {display:none;}
#container {width:auto;}
#top {height:auto;}
#top img {width: 120px;height:43px;margin-left:5px;}
#topsearch {position:static;margin-left:5px;} 
#content {padding:0.5em;}
#footer td[align=center] {display:none;}

/*---- home page ----*/
#home #prevnext {display:none;}
#menucontainer, .sponsorcontainer, #newscontainer, .donate {float:none; width: auto;}
#menucontainer #header, #menucontainer a {width:auto !important; height:2.5em;line-height:2.5em;font-size:130%; padding-left:1em;}
#imgcontainer, #imgcontainer img {float:none; max-width:95%; height:auto;margin:15px auto;}
.sponsorcontainer {margin:10px 0; padding:5px;}
.sponsorcontainer img {max-width: 95%; display:block; margin:0 auto;}

/*---latest additions, thumbnail pages ----*/
td.thumb br {display:none;}
td.thumb {max-width:100px;}
td.thumb a, td.thumb span, td.thumb small {font-size:9px; display:block; width:80px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
td.thumb a img {width:92%; height:auto; padding:2px;}
span.photolink, div.species {display:block; min-height:2em; line-height:2em; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
div.contribs {font-size:70%;}


/*--- show species page -----*/
#thumbcontainer {float:none; width:auto !important;}
#content h3 {margin-right:auto !important;}
.gridmap, .gridmap img {max-width:95%; height:auto;}
.mobiletitle {display:block !important; margin:auto 5px; font-weight:normal;}
.dataset {display:none;}

/*---- Top 20 page---- */
div.top20 div {float:none; padding-right:0;padding-bottom:2px;}
div.top20 div img {float:left; margin: 0 10px 10px 0; max-width:30%; height:auto; }

/*----- books pages -----*/
p.amazon {display:none !important;}
.book, .booktitle, .booktext {float:none; width:auto;}
.bookimage {float:right;margin:10px;width:auto;}
img.imgbookleft, img.imgbookright {display:block !important; float:none !important;}

/*--- wordpress mods -----*/
#content {width:auto !important; float:none !important;}
.sidebar {width:90% !important; float:none !important; margin: 1em auto !important;}
.post img {max-width: 95%; height:auto !important; float:none !important; display:block !important; margin:10px auto !important;}
.navigation, .sidebar li {display:block; min-height:2em; line-height:2em; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

}

/* Smartphones (portrait) ----------- */
@media all and (max-width: 320px) {

td.thumb, td.thumb a, td.thumb span, td.thumb small {width:65px !important;}*/
#imgcontainer, #imgcontainer img {max-width:270px;}
}