@font-face {
  font-family: 'optimaregular';
  src: url("fonts/optima-webfont.eot");
  src: url("fonts/optima-webfont.eot?#iefix") format("embedded-opentype"), 
  url("fonts/optima-webfont.woff") format("woff"), 
  url("fonts/optima-webfont.ttf") format("truetype"), 
  url("fonts/optima-webfont.svg#optimaregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'optimabold';
  src: url("fonts/optima-bold-webfont.eot");
  src: url("fonts/optima-bold-webfont.eot?#iefix") format("embedded-opentype"), 
  url("fonts/optima-bold-webfont.woff2") format("woff2"), 
  url("fonts/optima-bold-webfont.woff") format("woff"), 
  url("fonts/optima-bold-webfont.ttf") format("truetype"), 
  url("fonts/optima-bold-webfont.svg#optimabold") format("svg");
  font-weight: normal;
  font-style: normal;
}

body { 
	margin: 0; 
	padding: 0; 
	background: #44571A; 
	color: #333; 
	font-family: "optimaregular", Helvetica Neue, Helvetica, Arial, sans-serif; 
	/*font-size: 62.5%; /* Resets 1em to 10px */ 
	font-size: 100%; 
	}

b, strong { font-family: "optimabold", Helvetica Neue, Helvetica, Arial, sans-serif; }

#headercontainer {
	width: 100%; 
	margin: 0;
	padding: 0;
	text-align: center; 
	background-color: #64773A;
	background-image: -moz-linear-gradient(#64773A, #44571A);
	background-image: -o-linear-gradient(#64773A, #44571A);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #64773A), color-stop(1, #44571A));
	background-image: -webkit-linear-gradient(#64773A, #44571A);
	background-image: -ms-linear-gradient(#64773A, #44571A);
	background-image: linear-gradient(#64773A, #44571A);
	}

/* CONTAINED ELEMENTS SHOULD ADD UP TO BE 1024 PX WIDE: 984 + 20 + 20 = 1024 FOR FULL WIDTH ON IPAD LANDSCAPE */

#header { margin: 0 auto; padding: 0; max-width: 1024px; text-align: left; background: /*#64773A*/ url(images/sengi-engraving-132x70.png); background-position: 99% 60%; background-repeat: no-repeat; }
#header h1 { font-size: 2.6em; margin: 0; font-weight: normal; text-transform: uppercase; letter-spacing: 7px; text-shadow: 0 1px 2px #111; }
#header h1 .smalltitle { font-size: 50%;  letter-spacing: 5px;}
#header h1 a { color: #FFF; text-decoration: none; padding: 20px 20px 15px 20px; margin: 0; display: block; }
/*#header h1 a:hover { background: #44571A; }*/


/* HOME PAGE SLIDESHOW */
#slideshow { margin: 0 -20px -20px -20px; padding: 0;  }

#topnavcontainer { 
	width: 100%; 
	margin: 0; 
	padding: 0; 
	background-color: #333333;
	background-image: -moz-linear-gradient(#444444, #333333);
	background-image: -o-linear-gradient(#444444, #333333);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #333333));
	background-image: -webkit-linear-gradient(#444444, #333333);
	background-image: -ms-linear-gradient(#444444, #333333);
	background-image: linear-gradient(#444444, #333333);
	}

#topnav { max-width: 1024px; padding: 0; margin: 0 auto; font-size: 0.75em; text-align: left; font-weight: normal; text-transform: uppercase; /*background: #999;*/ font-size: 15px; }
#topnav ul { margin: 0 0 0 5px; padding: 0; list-style: none; /*background: #CCC;*/ }
#topnav li { margin: 0; pading: 0; display: inline; }
#topnav li a { margin: 0; padding: 13px 15px 12px 15px; display: inline-block; color: #FFF; text-decoration: none; transition: background 0.2s ease; }
#topnav li a:hover { background: #000; }

#maincontainer { width: 100%; margin: 0; padding: 0; text-align: center; background: #FFF; }

#main { max-width: 984px; margin: 0 auto; padding: 30px 20px 30px 20px; color: #333; font-size: 95%; line-height: 1.4; text-align: left; min-height: 500px; /*background: #EEE;*/ }

#main h2 { color: #555; line-height: 1.3; margin-top: 0; font-size: 32px; }

#main h3 { color: #444; border-top: 1px solid #999; padding-top: 15px; line-height: 1.3; font-size: 26px; clear: both; /* CLEARS FLOATED IMAGES FROM SECTION ABOVE */ }

#main a { color: #44571A; }

#main p { /*text-align: justify;*/ font-size: 18px; }

#main ul { font-size: 18px; }

#main b, #main strong { color: #555; }


#slideshow { 
	position: relative;
	max-width: 984px;
	margin: 0;
	padding: 0;
	padding-bottom: 56.3008130081301%;
	height: 0;
	border-radius: 5px;
	overflow: hidden;
	background: #999;
	font-family: 'optimaregular','Helvetica Neue', Helvetica, Arial, sans-serif;
	}


#pagenav { padding: 10px; margin: 0 auto; text-align: center; font-weight: normal; background: #E6E6E6; border-radius: 5px; line-height: 1.8; font-size: 17px; }

#pagenav ul { margin: 0 0 0 8px; padding: 0; list-style: none; }

#pagenav li { margin: 0; pading: 0; display: inline; }

#pagenav li a { margin: 0; padding: 0 7px; display: inline-block; color: #44571A; border-right: 1px solid #84975A; text-decoration: none; }

#pagenav li a.last { border: none; }

#pagenav li a:hover { text-decoration: underline; }

/* CLEAR FLOATS ACTUALLY WORKS - USED TO CLEAR PHOTO AND VIDEO SECTIONS */
.clearafter:after {
    content: '';
    display: block;
    clear: both;
}

/* PHOTOGRAPHIC GALLERY PAGE */
#photosection { margin: 0 0 20px 0; padding: 0; /*background: #DDD;*/ }
#photosection p strong { font-size: 110%; }
#photosection img { float: left; margin: 0 20px 0 0; padding: 0; border-radius: 5px; }


/* VIDEOGRAPHIC GALLERY PAGE */
#videosection { margin: 0 0 20px 0; padding: 0; /*background: #DDD;*/ }

#videosection p strong { font-size: 110%; }
#videosection #videoholder { float: left; margin: 0 20px 0 0; padding: 0; }
#videosection video { border-radius: 5px; margin: 0; padding: 0; }



#videosection720 { float: none; margin: 0 0 20px 0; padding: 0; max-width: 720px; }

.video-container720 {
    position: relative;
    padding-bottom: 66.66666666666667%;
    padding-top: 0px; 
	height: 0; 
	overflow: hidden;
	margin: 0px auto 0px auto; 
}
 
.video-container720 iframe,
.video-container720 object,
.video-container720 embed, 
.video-container720 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#videosection720 p { float: none; max-width: 720px; } 
#videosection720 p strong { font-size: 110%; }
#videosection720 video { border-radius: 5px; margin: 0; padding: 0; }

table.photographic img { border: 0; }

#box { border: 2px solid #105a9d; padding: 10px; }
#box h3 { font-size: 1.3em; margin: -10px -10px 10px -10px; padding: 10px; color: #FFF; background: #105a9d; }
#box a { color: #002A51; }

#imageright { float: right; width: 28%; margin: 0 0 0 2%; font-size: 0.9em; border-radius: 5px; overflow: hidden; }
#imageright img { width: 100%; } 

#imageright40 { float: right; width: 38%; margin: 0 0 0 2%; font-size: 0.9em; border-radius: 5px; overflow: hidden; }
#imageright40 img { width: 100%; }

#photocredit { height: 20px; margin: -23px 0 0 0; padding: 1px 5px 0 0; background: #63773A; color: #FFF; font-size: 0.9em; text-align: right; }
#imagecaption { padding: 7px 9px 7px 9px; margin: 0 0 20px 0; background: #64773A; color: #FFF; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
#imagecaption strong, #imagecaption b { color: #FFF; }

#imagecenter { margin: 0 auto; text-align: center; }
#imagecenter img { margin: 0 auto; border-radius: 5px; max-width: 100%; }

.distributionmap { background: #999; margin: 10px 0 ; font-size: 90%; }
.distributionmap td { padding: 4px 6px 3px 6px; /*text-align: center;*/ }
.distributionmap td blockquote { margin-top: 0; margin-bottom: 0; }

td.species:hover { background: #FFF; }
.distributionmap tr { background: #FFF; }
.distributionmap tr:hover { background: #E4F7BA; }


td.country { text-align: right; }
td.species { /*font-size: 12px;*/ font-style: italic; }
td.speciespresent { font-size: 20px; font-weight: bold;  text-align: center; color: #64773A; }
td.tablehint { font: normal 11px verdana, arial, sans-serif; text-align: center; }

.hidden { display: none; }
.popup { display: block; }

.subfamilyindent { padding-left: 20px; }
.genusindent { padding-left: 20px; }
.speciesindent { padding-left: 60px; }

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

#clearboth { clear: both; }

#footercontainer { 
	margin: 0; 
	padding: 0; 
	width: 100%; 
	text-align: center; 
	/*background-color: #64773A;*/ /* WILL USE BODY BG COLOR FOR OVERFLOW */
	/*background-image: -moz-linear-gradient(#64773A, #44571A);
	background-image: -o-linear-gradient(#64773A, #44571A);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #64773A), color-stop(1, #44571A));
	background-image: -webkit-linear-gradient(#64773A, #44571A);
	background-image: -ms-linear-gradient(#64773A, #44571A);
	background-image: linear-gradient(#64773A, #44571A);*/
	}

#footer { max-width: 984px; margin: 0 auto; padding: 20px 20px 20px 20px; color: #FFF; /*background: #64773A;*/ }
#footer #topnav { padding: 0; margin: 0; background: none; font-size: 1.0em; text-align: center; font-weight: normal; text-transform: uppercase; text-shadow: 0 1px 2px #111; }
#footer #topnav ul { margin: 0; padding: 0; list-style: none; }
#footer #topnav li { display: inline; margin: 0; padding: 0; }
#footer #topnav li a { margin: 0; padding: 13px 12px 11px 12px; display: inline-block; color: #FFF; text-decoration: none; }
#footer #topnav li a:hover { text-decoration: underline; background: none; }

#footer p { margin: 10px 0 0 0; padding: 0; text-transform: uppercase; letter-spacing: 1px; }
#footer p.siteinfo a { font-size: 0.6em; color: #FFF; margin: 40px 0 0 0; padding: 5px 7px 4px 7px; text-decoration: none; }
#footer p.siteinfo a:hover { text-decoration: underline; }


/* DISTRIBUTION PAGE */
#discimageholder { /*background: #EEE;*/ width: 100%; margin: 20px 0 0 0; padding: 0; text-align: center; text-shadow: 1px 1px 0px #000; }
#discimage150 { display: inline-block; width: 150px; height: 150px; background: #44571A; margin: 20px; padding: 1px; border: 1px solid #999; border-radius: 75px; line-height: 100%; }
#discimage150 a { display: block; width: 110px; height: 40px; border-radius: 75px; background: url(images/semi-30-150.png) center center no-repeat; color: #FFF; font-weight: bold; text-decoration: none; text-align: center; padding: 110px 20px 0px 20px; margin: 0; vertical-align: middle; font-style: italic; }
#discimage150 a:hover { background: none; }



/* DISTRIBUTION PAGE WITH KMZ VIEWER IFRAME */

#discimageholder2 { /*background: #EEE;*/ width: 100%; margin: 20px 0 0 0; padding: 0; text-align: center; /*text-shadow: 1px 1px 0px #000;*/ }

#discimageholder2 #imagekmzlink { text-align: center; display: inline-block; /*width: 150px; height: 150px;*/ margin: 20px; padding: 0px; line-height: 140%; }

#discimageholder2 #imagekmzlink img { border: 1px solid #666; border-radius: 75px; padding: 1px; }

#discimageholder2 #imagekmzlink img:hover { border: 2px solid #666; padding: 0px; }

#discimageholder2 #imagekmzlink .small { font-size: 90%; }
	
	
	
	

table.taxatable td a { font-weight: bold; text-decoration: none; }
table.taxatable td a:hover { text-decoratin: underline; }
.normal { font-weight: normal; }


/* RESPONSIVE BREAKPOINTS */

@media screen and (max-width: 600px) {
	
	#header { text-align: center; background: none; }
	#header h1 a { padding: 15px 40px 15px 40px; }
	#topnav { text-align: center; padding: 5px 0; }
	#topnav li a { margin: 0; padding: 9px 8px 7px 8px; display: inline-block; color: #FFF; text-decoration: none; transition: background 0.2s ease; }
	
	#imageright { float: none; width: 100%; margin: 0 auto; }
	#imageright40 { float: none; width: 100%; margin: 0 auto; }
	
	#photosection { margin: 0 0 40px 0; text-align: center; }
	#photosection img { float: none; margin: 0 auto; max-width: 100% /* WORKS WELL FOR 480 & 320 WIDE */; }
	
	#videosection { margin: 0 0 40px 0; }
	#videosection #videoholder video { max-width: 100%; /* WORKS WELL FOR 480 & 320 WIDE */ }
	#videosection720 { margin: 0 0 40px 0; }
	#videosection720 #videoholder video { max-width: 100%; /* WORKS WELL FOR 480 & 320 WIDE */ }
	#videosection #videoholder { float: none; margin: 0 auto; text-align: center; /*background: #EEE;*/ }
	#videosection #videoholder video { margin: 0 auto; }
}

@media screen and (max-width: 480px) {
	
	#header h1 { font-size: 2.0em; text-align: center; }
	#header h1 a { padding: 10px 40px 10px 40px; }
	#topnav li a { padding: 5px 7px 5px 7px; }
	#footer #topnav li a { padding: 5px 7px 5px 7px;  }
	
}