/* WIDragonflySociety.org CSS Stylesheet */

/* Color Legend */

/* =============================================================================================================
Reset 
============================================================================================================= */
html, body { margin: 0; padding: 0; border: 0;  
				background: transparent; font-size:10px; }
html		{ min-width:100%; min-height:100%}

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}

img 	{ margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
table { border-collapse: collapse; border-spacing: 0; }
	
input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
	}

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%; 
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}

ol, ul { list-style: none; }


/* =============================================================================================================
global
============================================================================================================= */

html 	{height:100%; width:100%;margin:0 auto ;	}
body	{background-color:#fff; min-width:100%;margin:0 auto;height:auto; margin:0 auto;	}



/* =============================================================================================================
headings
============================================================================================================*/

h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }

h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }



/* ============================================================================================================= 
Text Elements 
=============================================================================================================== */

p           	{ color:#000; font-size:12px; line-height:150%;  }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a           	{   }
a:link			{ color: #00f;  }
a:visited		{ color: #0f0;  }
a:active		{ color: #000;  }
a:focus			{ color: #666;  }
a:hover     	{ color: #f00;  }

blockquote  	{ color:#000; font-size:12px; }

strong      	{ font-weight: bold; }
em		      	{ font-style: italic; }

/* ============================================================================================================== 
Images 
================================================================================================================ */



/* =============================================================================================================== 
Lists 
================================================================================================================ */

ul          	{  }
ol          	{ list-style-type:decimal; }

ul li		    { color:#000; font-size:12px; }
ol li	     	{ color:#000; font-size:12px; }

dl          	{  	}
dt       		{  	}
dd          	{ 	}



/* =============================================================================================================== 
Tables 
================================================================================================================ */

table       	{ width:100%; }

tr				{	}
.odd			{ background-color:#eee; }
.even			{ background-color:#fff; }

th          	{ font-weight: bold; }
thead, th    	{ background: #ccc; }

tbody			{   }

th,td,caption 	{ 	}
caption 		{ 	}

tfoot       	{	}
.tfooter		{ background-color:#ccc; text-align:center; font-style:italic; }

caption     	{ background: #efefef; }


/* =============================================================================================================
================================================================================================================
================================================================================================================
common content
================================================================================================================
================================================================================================================
==============================================================================================================*/


/* ==============================================================================================================
header
==============================================================================================================*/

.wrapper			{margin:0 auto; min-height:100%; min-width: 100%}

.header-container	{ width:800px; margin:0 auto; background-color:#ffffff; height:auto; position:relative;}


	
.header-bar  	   {background-color:#0084ff; min-width:100%; height:150px;position:relative;margin-top:4%;overflow:visible;border-top:10px solid #ff9e00;
					border-bottom:10px solid #ff9e00; }

.header				{min-width:100%; min-height:25%; margin:0 auto}


.logo400 img  		{ margin: -40px 0 0 20px; float: left; position:relative;z-index:1; width:250px }
.logo-banner-container		{width:800px; margin:0 auto; position:relative;}
.banner	img					{height:150px}					

.top-nav			{width:800px;height:50px;}
.topnav 			{background-color:#ffffff; clear:both;overflow:hidden;width:550px   }
.topnav a      		{display:inline; }
.topnav		        {float:left; margin:-37px 0 0 285px; background-color:#ffffff; }
.topnav a    		{float:left; padding:2px 9px; font-size:10px; }

.dropdown .dropbtn	{float:left; padding:10px 8px; font-size:10px;margin-top:-9px; background-color:#fff; outline:none; border:none }
.dropdown			{float:left; overflow:hidden }
.dropdown:hover .dropbtn	 { color:#000000; text-decoration: underline; outline:none  }

.home-content 		{display:none;position:absolute;background-color:#fff;min-width:40px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1;margin-top:-10px }
.home-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.home-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .home-content	{display:block}

.involved-content 		{display:none;position:absolute;background-color:#fff;min-width:50px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1;margin-top:-10px }
.involved-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.involved-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .involved-content	{display:block}

.events-content 		{display:none;position:absolute;background-color:#fff;min-width:50px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1;margin-top:-10px }
.events-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.events-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .events-content	{display:block}

.about-content 		{display:none;position:absolute;background-color:#fff;min-width:100px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1;margin-top:20px }
.about-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.about-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .about-content	{display:block}

.learn-content		{margin-top:40px }
.learn-content 		{display:none;position:absolute;background-color:#fff;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; margin-top:20px }
.learn-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.learn-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .learn-content	{display:block}

.resources-content		{margin-top:40px }
.resources-content 		{display:none;position:absolute;background-color:#fff;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; margin-top:20px }
.resources-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.resources-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .resources-content	{display:block}

.whatsup-content 		{display:none;position:absolute;background-color:#fff;min-width:50px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1;margin-top:-10px }
.whatsup-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.whatsup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .whatsup-content	{display:block}

.contacts-content 		{display:none;position:absolute;background-color:#fff;min-width:50px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1;margin-top:-10px }
.contacts-content a {float:none;color:#000;padding:12px 8px;text-decoration:none;display:block;text-align:left }
.contacts-content a:hover {color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .contacts-content	{display:block}

.topnav a:link      { color:#000000; outline:none   }
.topnav a:visited   { color:#000000; outline:none  }
.topnav a:active    { color:#000000; outline:none  }
.topnav a:hover     { color:#000000; text-decoration: underline; outline:none  }
.topnav a:focus     { color:#000000; outline:none  }

.social-media       {width:700px;}
.social-media img      { float:right; margin: -30px -80px 0 0; z-index:1; }

.social-media a:link      { color:#3a5a98; outline:none   }
.social-media a:visited   { color:#3a5a98; outline:none    }
.social-media a:active    { color:#3a5a98; outline:none   }
.social-media a:hover     { color:#3a5a98; outline:none   }
.social-media a:focus     { color:#3a5a98; outline:none   }

.banner-graphic img		{ margin:-190px 0px 0 325px;float:left;border:2px #000 solid}
.imgbg					{width:400px; height: auto}
.imgbg img				{width:100%}


.page-title				{ margin:0px 0 0 0;float:right; width:800px;height:}
.page-title h1			{ text-align:center; font-size:42px;}

.page-title2				{ margin:0 auto;float:right; width:800px;height:}
.page-title2 h1			{ text-align:center; font-size:42px;}




.body-container			{ width:800px; margin:40px auto; height:auto; position:relative;}


/* ==============================================================================================================
footer
==============================================================================================================*/

.footer 			{ background-color:#ff9200;min-width:100%;height:150px;position:relative;overflow:visible;border-top:4px solid #000;border-bottom:30px solid #000;margin:0 auto; }
.subfooter			{min-width:100%; height:40px;background-color:#0084ff;border-top:4px solid #000}


.footerlogor img  	{ margin: 20px 25px 20px 0px; float: right; position:relative;border: }
.footerlogol img  	{ margin: 20px 0px 20px 25px; float: left; position:relative;border: }

.footer-menu		{width:; margin:10px 60px 10px 150px;height:100px;border:}
.footer-menu a		{float:none;color:#000;padding:5px 16px;text-decoration:none;display:block;text-align:left;font-size:10px; }
.footer-column		{float:left;width:31%;border:}
.footer-list:after	{content: " ";display:table;clear:both;border: }

.footer-menu a:link      { color:#000000; outline:none   }
.footer-menu a:visited   { color:#000000; outline:none  }
.footer-menu a:active    { color:#000000; outline:none  }
.footer-menu a:hover     { color:#000000; text-decoration: underline; outline:none  }
.footer-menu a:focus     { color:#000000; outline:none  }




.copyright			{width:800px; margin:0 auto; height:auto; position:relative;}
.copyright p   		{color:#fff; font-size:12px; text-align:center; padding:11px 0 0 0; min-width:100%; margin:35px 0 0 0 }

.footer-container	{ width:800px; margin:0 auto; height:auto; position:relative;}

.mission-statement		{width:800px; height:30px;margin:0 auto	}	
.mission-statement h2	{text-align:center; color:#fff; padding:85px 0 0 0px;font-size:12px }

.img150	img			{max-width:75px}


/* =============================================================================================================
================================================================================================================
================================================================================================================
page specific
================================================================================================================
================================================================================================================
==============================================================================================================*/


/* ==============================================================================================================
Index Page
==============================================================================================================*/


.slider			{ min-width:400px; max-width:500px; width:98%;  }
.slider img		{height:100px; width:140px; float:right; clear:right; position:relative; margin:25px 0px 25px 0px; }
.banner			{margin:0 0 0 30%; }

.index-row1				{margin:50px 0 0 0; }
.index-column 			{float:left; width:24.85%;margin:0 auto;}
.index-container img	{margin:-20px 0 0 8%}
.index-row1:after		{content: " ";display:table;clear:both }
.index-row2-size		{width:800px;margin:20px 0 0 12%; height:auto; position:relative;}
.index-column2 			{float:left; width:25%; margin:0px 0 0 0px}
.index-row2:after		{content: " ";display:table;clear:both }
.index-column h2		{padding: 10px 0 0 0; font-size:11px; text-align: center}
.index-column2 h2		{padding: 10px 0 0 0; font-size:11px; text-align: center}


#involve-transition  	{float: left; margin:30px 50px 10px 0px }
#wos-transition      	{float: left; margin:30px 50px 10px 0px; }
#events-transition	 	{float: left; margin:30px 50px 10px 0px }
#species-transition		{float: left; margin:30px 50px 10px 0px }
#resources-transition	{float: left; margin:30px 50px 10px 0px }
#whatsup-transition		{float: left; margin:30px 50px 10px 0px }
#aboutwds-transition	{float: left; margin:30px 50px 10px 0px; }


.index-container	{position:relative; width:175px;}
.image   	 		{opacity:1; display:block;width:100%;transition:1s ease-in-out; backface-visibility:hidden}
.transition   		{transition: 1s ease-in-out;position:absolute;opacity:0; top:50%;left:60%; transform:translate(-50%, -50%);text-align:center;transition-delay:.5 width:100%}
.transition   		{-webkit-transition: 1s ease-in-out;position:absolute;opacity:0; top:50%;left:60%; -webkit-transform:translate(-50%, -50%);text-align:center;-webkit-transition-delay:.5 width:100%;}
.index-container:hover .image 		{opacity: 0.5; }
.index-container:hover .transition 	{opacity: 1;}
.name 				{background-color:#222; color:#fff;font-size:14px;padding: 10px 32px; margin: -30px 0 0 0px}
.name a   			{color:#fff;font-size:14px}
.name a :link		{ color: #fff;  }
.name a :visited	{ color: #73bbff;  }
.name a :active		{ color: #000;  }
.name a	:hover		{ color: #ff9e00;  }
.name a :focus    	{ color: #ff9e00;  }

.img250				{max-width:175px}


/* ==============================================================================================================
Involved
==============================================================================================================*/
.involved-body			{width:800px;margin:0px auto; min-height:300px; position:relative;border:.1px #fff solid}

.involved-text         {margin:80px 0 0 0;background-color:#ffffff; width:;  }
.involved-text 	     
.involved-text  h5    {font-size:10px; font-style:italic;padding:20px 0 2px 0;font-weight:bold;  }
.involved-text  h4    {font-size:12px; font-weight:bold;padding:20px 0 2px 0; }
.involved-text  h6    {font-size:14px;padding:20px 0 10px 0; color:#ff0000;  }						
.involved-text  p     {font-size:12px; margin:1em 10px 0 10px  }
.involved-text h3	  {margin:20px 0 0 10px;}
.involved-text h4	  {text-align:center}

.involved-text  a:link      { color:#0000ff;outline:none    }
.involved-text  a:visited   { color:#0000ff;outline:none    }
.involved-text  a:active    { color:#0000ff;outline:none   }
.involved-text  a:hover     { color:#0000ff;outline:none   }
.involved-text  a:focus     { color:#0000ff;outline:none   }
.involved-text  a           {padding:0 5px 0 5px; }

.involved-img img  {float: left; margin: 10px 14px 5px 10px; border:3px solid #ff9e00; max-width:250px;height: auto}
.involved-imgrt img  {float: right; margin: 10px 10px 15px 14px; border:3px solid #ff9e00; max-width:250px;height: auto}
.involved-join				{text-align:center; margin: 30px 0 10px 0}
.involved-join a			{font-size:18px; padding: 10px 10px}

.involved-join a:link      { color:#000; outline:3px solid #ff9e00;border-radius:9px   }
.involved-join a:visited   { color:#000; outline:3px solid #ff9e00;border-radius:9px  }
.involved-join a:active    { color:#000; outline:3px solid #ff9e00;border-radius:9px  }
.involved-join a:hover     { color:#000;  background-color: #ff9e00; outline:3px solid #ff9e00;border-radius:9px  }
.involved-join a:focus     { color:#000; outline:3px solid #ff9e00;border-radius:9px  }
#smart-button-container	   {margin-top:30px}




/* ==============================================================================================================
Events
==============================================================================================================*/

.body-events			{width:100%;margin:0 auto; min-height:700px; position:relative; }


.events-column		{float:left;width:49.8%; min-height:100px}
.events-row:after	{content: " ";display:table;clear:both;border: }
.events-row p		{font-size:10px; margin: 4px 20px 20px 0 }
.events-row h2		{font-size:12px; margin: 40px 20px 10px 0 }
.events2-column		{float:left;width:49.8%; min-height:100px}
.events-row2:after	{content: " ";display:table;clear:both;border: }
.events-row2 p		{font-size:10px; margin: 5px 0px 40px 40px }
.events-row2 h2		{font-size:12px; margin: 30px 20px 10px 40px }

.events-img			{margin: 40px 16.66% 20px 16.66%}
.events-img img		{border:3px solid #ff9e00; max-width: 100%}

.events-imgrt			{margin: 20px 16.66% 40px 16.66%}
.events-imgrt img		{border:3px solid #ff9e00; max-width: 100%}


.events-email		{margin:20px 0 30px 0 ; min-height:100%;min-width:100%; }
.events-email h2	{text-align:center; font-size:14px }

.events-email-bottom	{margin:30px 0 0px 0 ; min-height:100%;min-width:100%; }
.events-email-bottom h2	{text-align:center; font-size:24px }

.calendar 				{width:767px;height:575px;margin:10px auto}


.events-row3			{max-width:767px}
.events-row3:after		{content: " ";display:table;clear:both;border: }
.events-row3 p			{font-size:11px; margin: 3px 0px 3px 0px }
.events-row3 h3			{font-size:14px; margin: 0px 0px 10px 0px }
.events-row3 h4			{font-size:12px; margin: 10px 0px 10px 0px; line-height:125% }
.events3-column			{float:left;width:35%;margin:25px 0 10px 0 }
.events3-column img		{margin:0 0 0 40px}
.events4-column			{float:right; width:65%; margin:30px 0 10px 0}
.events4-column h3		{text-align: }





/* ==============================================================================================================
Species
==============================================================================================================*/

.overlay		{position:absolute; top:0;bottom:0;left:0;right:0; background: RGBA(0,0,0,0.7);transition:opacity 500ms; visibility:hidden; opacity:0; width: 100%; height: 240%; border-radius:15px}
.overlay:target {visibility:visible; opacity:1}

.broadwing-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in;}
.broadwing-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.broadwing-popup .broadwing-popup-content	{max-height:0%; overflow: auto}
.broadwing-popup-content	{margin-top:30px}
.broadwing-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left; font-size:14px}
.broadwing-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.broadwing-popup h3		{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.broadwing-popup a		{font-size:11px}

.spreadwing-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in}
.spreadwing-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.spreadwing-popup .spreadwing-popup-content	{max-height:0%; overflow: auto}
.spreadwing-popup-content	{margin-top:30px}
.spreadwing-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left;  font-size:14px}
.spreadwing-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.spreadwing-popup h3		{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.spreadwing-popup a			{font-size:11px}

.pond-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in}
.pond-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.pond-popup .pond-popup-content	{max-height:0%; overflow: auto}
.pond-popup-content	{margin-top:30px}
.pond-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left; font-size:14px}
.pond-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.pond-popup h3		{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.pond-popup a			{font-size:11px}
.pond-column 			{float:left; width:50%}
.pond-list:after			{content: " ";display:table;clear:both }


.darner-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in}
.darner-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.darner-popup .darner-popup-content	{max-height:0%; overflow: auto}
.darner-popup-content	{margin-top:30px}
.darner-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left; font-size:14px }
.darner-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.darner-popup h3		{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.darner-popup a			{font-size:11px}
.darner-left		{float:left; width:49%}
.darner-right		{float:right; width:49%}

.clubtail-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in}
.clubtail-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.clubtail-popup .clubtail-popup-content	{max-height:0%; overflow: auto}
.clubtail-popup-content	{margin-top:30px}
.clubtail-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left;  font-size:14px}
.clubtail-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.clubtail-popup h3			{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.clubtail-popup a			{font-size:11px}
.clubtail-column 		{float:left; width:50%}
.clubtail-list:after			{content: " ";display:table;clear:both }

.spiketail-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in}
.spiketail-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.spiketail-popup .spiketail-popup-content	{max-height:0%; overflow: auto}
.spiketail-popup-content	{margin-top:30px}
.spiketail-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left; font-size:14px }
.spiketail-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.spiketail-popup h3			{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.spiketail-popup a			{font-size:11px}

.cruiser-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in}
.cruiser-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.cruiser-popup .cruiser-popup-content	{max-height:0%; overflow: auto}
.cruiser-popup-content	{margin-top:30px}
.cruiser-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left; font-size:14px }
.cruiser-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.cruiser-popup h3			{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.cruiser-popup a			{font-size:11px}

.emerald-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in;}
.emerald-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.emerald-popup .emerald-popup-content	{max-height:0%; overflow: auto}
.emerald-popup-content	{margin-top:30px}
.emerald-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left;  font-size:14px}
.emerald-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.emerald-popup h3		{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.emerald-popup a			{font-size:11px}
.emerald-left		{float:left; width:49%}
.emerald-right		{float:right; width:49%}

.skimmer-popup {margin:50px auto;padding:20px; background:#fff; border-radius:15px; max-width:80%; position:relative; transition: all .5s ease-in}
.skimmer-popup .close	{position:absolute; top:20px; right:30px; transition:all 200ms; font-size:20px; font-weight:bold; font-decoration:none; color:#333}
.skimmer-popup .skimmer-popup-content	{max-height:0%; overflow: auto}
.skimmer-popup-content	{margin-top:30px}
.skimmer-popup-content a {float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left; font-size:14px }
.skimmer-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.skimmer-popup h3		{font-size:16px; font-weight:bold;text-align:center;width:70%; margin:}
.skimmer-popup a			{font-size:11px}
.skimmer-column 			{float:left; width:50%}
.skimmer-list:after			{content: " ";display:table;clear:both }


.body-species			{width:800px;margin:0 auto; min-height:100%; position:relative;}
.species-body			{ margin: 0px 0px 0px 0px }
.species-body img		{ margin: 5px 45px 0px 45px;  }
#row3					{padding:40px 0 20px 0;margin-bottom:40px }
mark.blue				{ color:#0084ff;background:none}
mark.orange				{ color:#ff9e00;background:none}


.species-column 			{float:left; width:32%; }
.species-row1:after			{content: " ";display:table;clear:both }
.body-species h1			{font-size:30px; margin: 100px 0 10px 0;width:100%; text-align: center}
.body-species h2			{font-size:30px; margin: 50px 0 10px 0;width:100%; text-align: center}
.species-instructions p	 	{ font-size:10px;  margin: 10px 0px 40px 0; width:100%; text-align: center}

.broadwing-damselfly     	{  margin:0 0 0 0px;width:  }
.spreadwing-damselfly		{  margin:0 0 0 0px;width: }
.pond-damselfly				{  margin:0 0 0 0px;width: }
.broadwing-damselfly  h3	{text-align:center; margin:0 0 10px 0;font-size:12px}     			
.spreadwing-damselfly h3	{text-align:center; margin:0 0 10px 10px;font-size:12px}				
.pond-damselfly h3			{text-align:center; margin:0 0 10px 10px;font-size:12px}


.darner     			{  margin:0 0 0 0px;width:  }
.clubtail				{  margin:0 0 0 0px;width: }
.spiketail				{  margin:0 0 0 0px;width: }
.darner h3				{text-align:center; margin:0 0 10px 0;font-size:12px}     			
.clubtail h3			{text-align:center; margin:0 0 10px 0;font-size:12px}				
.spiketail h3			{text-align:center; margin:0 0 10px 0;font-size:12px}
	

.cruiser     			{margin:80px 0 80px 0px;width:  }
.emerald				{margin:80px 0 80px 0px;width:  }
.skimmer				{margin:80px 0 80px 0px;width:  }
.cruiser h3				{text-align:center; margin:0 0 10px 0;font-size:12px}    			
.emerald h3				{text-align:center; margin:0 0 10px 0;font-size:12px}				
.skimmer h3				{text-align:center; margin:0 0 10px 0;font-size:12px}	

.popup-color-key	 	{ margin: 50px 0 40px 0 }
.popup-color-key p 		{ font-size:10px; padding:0 0 0px 0 }

.species-row1 h3 {}


.species-color-key	 { margin: 0px 10px 0px 10px }
.species-color-key p { font-size:10px; padding:0;margin-top:10px }

			
.img300	img			{max-width:200px}


/* ==============================================================================================================
Publications
==============================================================================================================*/

.body-books			{width:800px;margin:0 auto; min-height:auto; position:relative; }

.books-row1				{margin:0px 0 0 60px;}
.books1-column 			{float:left; width:28%;min-height:150px;height:100%;margin:10px 10px 10px 20px}
.books1-column a		{float:left; margin:0 5px 0 0px}
.books1-column img		{margin-top:40px}
.books1-column img:hover {outline:4px solid #ff9e00; }
.books-row1:after		{content: " ";display:table;clear:both }
.book-text				{float:right; width:140px;margin:-100px 0px 0 0}
.book-text h5           {float: left;font-size:11px;color:#ff0000; padding:5px 0 3px 5px;font-style:normal;  }
.book-text h6			{float:left;font-size:10px; padding: 3px 0 0 5px;color:#111111;font-style:italic;   } 
.book-text p			{float:left;font-size:7px;padding: 0 0 0 5px;  }
.dragofwi a				{margin: 10px 0px 0 -10px}

.books-row2				{margin:0 0 0 20px;}
.books2-column 			{float:left; width:28%;min-height:150px;height:100%;margin:40px 0 20px 30px}
.books2-column a		{float:left; margin:0 5px 0 20px}
.books2-column img:hover     {outline:4px solid #ff9e00; }
.books-row2:after		{content: " ";display:table;clear:both }

.books-row3				{margin:0 0 0 40px;}
.books3-column 			{float:left; width:29%; min-height:150px;height:100%;margin:20px 0 0px 20px}
.books3-column a		{float:left; margin:0 5px 0 30px}
.books3-column img:hover     {outline:4px solid #ff9e00; }
.books-row3:after		{content: " ";display:table;clear:both }
.stokesbg a				{margin:20px 0 20px 0px}


.stokesbg				{margin-top:-20px}
.stokesbg img			{max-width:50%;height:auto}
.imgbook				{width:50%}
.imgbook img			{max-width:100%;height:auto}

.book-other				{margin-top:-40px}
.book-other h5           {float: left;font-size:14px;color:#ff0000; padding:10px 0px 10px 0px;font-style:normal;text-align:center;width:75%  }
.book-other h6			{float:left;font-size:10px; padding: 3px 0 10px 10px;color:#111111;font-style:italic;   } 


/* ==============================================================================================================
Links
==============================================================================================================*/

.links-body			{width:800px;margin:0px auto; min-height:300px; position:relative;}


.links-row1				{margin:0 0 0 0px;text-align:center}
.links1-column 			{float:left; width:33%;  min-height:100px; margin: 80px 0  0 0;  }
.links1-column img:hover {outline:4px solid #ff9e00; }
.links-row1:after		{content: " ";display:table;clear:both }
.links1-column img		{margin:0 0 0 0px}


.links2-column 			{float:left; width:100%; min-height:70px; margin: 30px 0  0 0; text-align:center}
.links2-column img:hover {outline:4px solid #ff9e00; }
.links-row2:after		{content: " ";display:table;clear:both }

.links3-column 			{float:left; width:49.8%;  min-height:40px; text-align:center; margin-top:50px}
.links-row3:after		{content: " ";display:table;clear:both }
.links3-column a		{margin:40px 0 20px 0 }

.links4-column 			{float:left; width:49.8%; min-height:40px; text-align:center}
.links-row4:after		{content: " ";display:table;clear:both }

.links5-column 			{float:left; width:49.8%; min-height:40px; text-align:center}
.links-row5:after		{content: " ";display:table;clear:both }

.links6-column 			{float:left; width:49.8%; min-height:60px; text-align:center}
.links-row6:after		{content: " ";display:table;clear:both }

.links7-column 			{float:left; width:49.8%; min-height:60px; text-align:center}
.links7-column img:hover {outline:4px solid #ff9e00; }
.links-row7:after		{content: " ";display:table;clear:both }


.mds					{margin: 0 0 0 0px}
.ohio img				{margin: -10px 0px 5px 45px; clear:}
.bioquip				{margin: 10px 0 0px 0px }

.links a				{font-size:16px; text-align:center;   }
.links h3				{margin: 10px 0 0 10px; font-style: normal}

.links a:link      { color:#000000; outline:none   }
.links a:visited   { color:#000000; outline:none  }
.links a:active    { color:#000000; outline:none  }
.links a:hover     { color:#000000; text-decoration:; outline:3px solid #ff9e00  }
.links a:focus     { color:#000000; outline:none  }

.linkimg img			{max-width:60%; height:auto}
.linkimgbq img			{max-width:40%; height: auto}


/* ==============================================================================================================
About WDS
==============================================================================================================*/

.about-body					{width:800px;margin:0px auto; min-height:100%; position:relative; border:.1px solid #ffffff}
.about-imgrt				{float:right; margin:100px 40px 10px 0; border:2px solid #ff9e00; clear:both}
.about-text					{margin: 60px 5px 20px 5px; padding:40px 0 0 0;}
.about-text p   			{font-size: 12px; margin:7px 0 7px 0  }
.about-imgrt				{float: right; margin: 10px 0px 15px 14px; border:3px solid #ff9e00;}
.about-imgrt img		 	{max-width:250px;height: auto;}
.about-img					{float: left; margin: 10px 14px 5px 0; border:3px solid #ff9e00}
.about-img  img 			{max-width:250px;height: auto;}


.newsletter					{margin:10px 10px;}
.newsletter img:hover	    {outline:6px solid #ff9e00; }
.newsletter img 			{max-width:150px; height:auto}
.newsletter-issues			{text-align:center;margin: 40px 0px 40px 36%;clear:both;}
.newsletter-issues a		{}


.newsletter-archive-column 			{float:left; width:50%; margin-top:20px}
.newsletter-archive-list:after		{content: " ";display:table;clear:both }

.newsletter-content					{margin-top:0px }
.newsletter-content 				{display:none;position:absolute;background-color:#fff;min-width:200px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; font-size:12px;margin:-20px 0 0 -110px;border:2px solid #ff9e00; }
.newsletter-content a 				{float:none;color:#000;padding:12px 16px;text-decoration:none;display:block;text-align:left; }
.newsletter-content a:hover 		{color:#000000; text-decoration: underline; outline:none }
.dropdown:hover .newsletter-content	{display:block}


/* ==============================================================================================================
Newsletter
==============================================================================================================*/

.newsletter-body			{width:800px;margin:0px auto; min-height:300px; position:relative;}

.newsletter-column 			{float:left; width:33%;margin:0 auto }
.newsletter-list:after		{content: " ";display:table;clear:both }

.newsletter1 ul li			{float:right; margin:20px 20px 10px 0; width:50%; font-size:10px}
.newsletter1				{margin-top:20px}
.newsletter2				{float:; margin:20px 0;text-align: center }
.newsletter2 img:hover     	{outline:3px solid #ff9e00; }

.newsletter2 p				{font-size:8px;margin-top:10px}
.newsletter3 ul li			{float:left; margin:20px 0px 10px 20px; width:50%; font-size:10px}
.newsletter3				{margin-top:20px}


.newsletter1 a:link      { color:#000000; outline:none   }
.newsletter1 a:visited   { color:#000000; outline:none  }
.newsletter1 a:active    { color:#000000; outline:none  }
.newsletter1 a:hover     { color:#000000;  border-bottom:3px solid #ff9e00}
.newsletter1 a:focus     { color:#000000; outline:none  }

.newsletter3 a:link      { color:#000000; outline:none   }
.newsletter3 a:visited   { color:#000000; outline:none  }
.newsletter3 a:active    { color:#000000; outline:none  }
.newsletter3 a:hover     { color:#000000;  border-bottom:3px solid #ff9e00  }
.newsletter3 a:focus     { color:#000000; outline:none  }

.imgnl img 				 {width:75%; height:auto}

/* ==============================================================================================================
Board
==============================================================================================================*/

.board-body			{width:800px;margin:0px auto; min-height:300px; position:relative;border:thin white solid}
.board				{margin: 140px 0 0 40px}
.board h4			{font-size:14px; margin: 30px 0 10PX 0 }
.board p			{font-size:12px; margin: 10px 40px 30PX 0 }


/* ==============================================================================================================
contact
==============================================================================================================*/

.contact-body			{width:800px;margin:0px auto; min-height:300px; position:relative;border:thin white solid}

.contact-list			{margin:150px 0 0 0; width: 100%;}
.contact-list h3		{font-size:20px; margin: 40px 0;text-align: center}
.contact-list h4		{font-size:18px; margin: 60px 0 20px 0;text-align: center}

.contact-list p			{font-size:14px; margin:2px 0;text-align: center}
.facebookpage			{text-align: center}
.facebookpage p			{font-size:20px; margin-top:0px; display:inline}
.facebookpage p:hover 	{color:#000000; border-bottom: 3px solid #ff9e00 ; outline:none; }
.facebookpage img		{ margin:0px 0px 0 30px;  }
.facebookgroup			{text-align: center; margin: 40px 0}
.facebookgroup p		{font-size:20px; margin-top:0px; display:inline}
.facebookgroup p:hover 	{color:#000000; border-bottom: 3px solid #ff9e00 ; outline:none; }
.facebookgroup img		{ margin:0px 0px 0px 30px;  }

.contact-form		 	{margin:60px auto;}
.contact-form img	  {float:right; margin: -35px 200px 50px 0}
.contact-form h3	  {margin:0 0 50px 200px; float:left}
.dot {height: 5px; width: 5px; background-color: #ff9e00; border-radius: 50%; display: inline-block;margin: 0 14px}
.envimg img 		{max-width: 50px; height:auto}
.envimg img:hover 		{outline:3px solid #ff9e00; }


/* ==============================================================================================================
Join
==============================================================================================================*/
.join-body			{width:800px;margin:0px auto; min-height:300px; position:relative;border:.1px #fff solid}

.join-text         {margin:80px 0 0 0;background-color:#ffffff; width:;  }
.join-text 	     
.join-text  h1    {color:#9bb369; font-size:20px; font-weight:800; padding:20px 0 20px 0;margin:;text-align:center }
.join-text  h5    {font-size:10px; font-style:italic;padding:20px 0 2px 0;font-weight:bold;   }
.join-text  h4    {font-size:14px; font-weight:bold;padding:20px 0 25px 0; }
.join-text  h6    {font-size:14px;padding:25px 0 10px 0;text-align:center;font-weight:bold  }						
.join-text  p     {font-size:12px; margin-top:1em; }
.join-text h3	  {margin:20px 0 0 0; }
.join-text h4	  {text-align:center}

.join-title h1    {color:#000000; font-size:35px; font-weight:800; padding:25px 0 20px 0;margin:;text-align:center }

.join a:link      { color:#000; outline:3px solid #ff9e00;border-radius:10px }
.join a:visited   { color:#000; outline:3px solid #ff9e00;border-radius:10px  }
.join a:active    { color:#000; outline:3px solid #ff9e00;border-radius:10px  }
.join a:hover     { color:#000; background-color: #ff9e00  }
.join a:focus     { color:#000; outline:3px solid #ff9e00;border-radius:10px  }
#smart-button-container	   {margin-top:30px}
.join				{text-align:center; margin: 30px 0 20px 0}
.join a			{font-size:18px;padding: 10px 10px}


.paypal			{ text-align:center; margin-top: 40px}





/* ==============================================================================================================
Template
==============================================================================================================*/

.body-template {height:200px}