/* 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; 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:1200px; margin:0 auto; background-color:#ffffff; height:auto; position:relative;}


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

.header				{min-width:100%, min-height:25%; }


.logo400 img  		{ margin: -50px 0 0 0px; float: left; position:relative;z-index:1 }
.logo-banner-container		{width:1200px; margin:0 auto; height:auto; position:relative;}

.top-nav			{width:;height:50px;}
.topnav 			{background-color:#ffffff; clear:both;overflow:hidden;width:800px;  }
.topnav a      		{display:inline; }
.topnav		        {float:left; margin:-70px 0 0 385px; background-color:#ffffff; }
.topnav a    		{float:left; padding:2px 13px; font-size:18px; }

.dropdown .dropbtn	{float:left; padding:10px 12px; font-size:18px;margin-top:-10px; 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:50px;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 16px;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 16px;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 16px;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 16px;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 16px;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 16px;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 16px;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 16px;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:1200px}
.social-media img      { float:right; margin: -40px 0 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:-325px 0px 0 450px;float:left;border:2px #000 solid}

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

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




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


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

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

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

.footer-menu		{width:; margin:10px 190px 10px 310px;height:170px;border:}
.footer-menu a		{float:none;color:#000;padding:8px 16px;text-decoration:none;display:block;text-align:left;font-size:14px; }
.footer-column		{float:left;width:32.7%;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:1200px; margin:0 auto; height:auto; position:relative;}
.copyright p   		{color:#fff; font-size:16px; margin:0px 0 0 41%; padding:11px 0 0 0 }

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

.mission-statement		{min-width:100%; height:40px;	}	
.mission-statement h2	{text-align:center; color:#fff; padding:90px 0 0 40px}




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


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


.slider			{ min-width:700px; max-width:900px; width:98% }
.slider img		{height:200px; width:240px; 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.8%;margin:0 auto; text-align: center }
.index-container img	{margin:25px 0 0 20px}
.index-row1:after		{content: " ";display:table;clear:both }
.index-row2-size		{width:900px;margin:0 auto; height:auto; position:relative;}
.index-column2 			{float:left; width:33%;margin:0 auto }
.index-row2:after		{content: " ";display:table;clear:both }
.index-column h2		{padding: 10px 0 0 0; font-size:16px; text-align: center}
.index-column2 h2		{padding: 10px 0 0 0; font-size:16px; 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:250px;}
.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: 16px 32px}
.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;  }


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

.involved-text         {margin:150px 0 0 0;background-color:#ffffff; width:;  }
.involved-text 	     
.involved-text  h1    {color:#9bb369; font-size:30px; font-weight:800; padding:30px 0 20px 0;margin:;text-align:center }
.involved-text  h5    {font-size:12px; font-style:italic;padding:20px 0 2px 0;font-weight:bold;   }
.involved-text  h4    {font-size:14px; font-weight:bold;padding:20px 0 2px 0; }
.involved-text  h6    {font-size:16px;padding:20px 0 10px 0; color:#ff0000;  }						
.involved-text  p     {font-size:14px; margin-top:1em; }
.involved-text h3	  {margin:20px 0 0 0; }
.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 0; border:3px solid #ff9e00}
.involved-imgrt img  		{float: right; margin: 10px 0px 15px 14px; border:3px solid #ff9e00}
.involved-join				{text-align:center; margin: 30px 0 20px 0}
.involved-join a			{font-size:20px;padding: 15px 15px}

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






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

.body-events			{width:1200px;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:16px; margin: 4px 20px 40px 0 }
.events-row h2			{font-size:18px; 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:16px; margin: 5px 0px 40px 40px }
.events-row2 h2			{font-size:18px; margin: 70px 20px 10px 40px }

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

.events-imgrt			{margin: 40px 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 }

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

.calendar			{width:1180px; height:885px; margin: 10px auto}

.events-row3			{max-width:1180px}
.events-row3:after		{content: " ";display:table;clear:both;border: }
.events-row3 p			{font-size:16px; margin: 5px 0px 5px 0px }
.events-row3 h3			{font-size:18px; margin: 0px 0px 20px 0px }
.events-row3 h4			{font-size:16px; margin: 10px 0px 10px 0px; line-height:125% }
.events3-column			{float:left;width:35%;margin:30px 0 10px 0 }
.events3-column img		{margin:0 0 0 40px}
.events4-column			{float:right; width:65%; margin:40px 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: 100%; 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:30px; font-weight:bold; font-decoration:none; color:#333}
.broadwing-popup .broadwing-popup-content	{max-height:90%; 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:16px}
.broadwing-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.broadwing-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}

.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:30px; font-weight:bold; font-decoration:none; color:#333}
.spreadwing-popup .spreadwing-popup-content	{max-height:90%; 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:16px}
.spreadwing-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.spreadwing-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}

.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:30px; 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:16px}
.pond-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.pond-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}
.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:30px; 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:16px }
.darner-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.darner-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}
.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:30px; 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:16px}
.clubtail-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.clubtail-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}
.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:30px; 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:16px }
.spiketail-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.spiketail-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}

.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:30px; 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:16px }
.cruiser-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.cruiser-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}

.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:30px; 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:16px}
.emerald-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.emerald-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}
.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:30px; 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:16px }
.skimmer-popup-content a:hover {color:#000000; text-decoration: underline; outline:none }
.skimmer-popup h3		{font-size:18px; font-weight:bold;text-align:center;width:70%; margin:}
.skimmer-column 			{float:left; width:50%}
.skimmer-list:after			{content: " ";display:table;clear:both }


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


.species-column 			{float:left; width:33%; }
.species-row1:after			{content: " ";display:table;clear:both }
.body-species h1			{font-size:34px; margin: 120px 0 10px 0;width:100%; text-align: center}
.body-species h2			{font-size:34px; margin: 100px 0 10px 0;width:100%; text-align: center}
.species-instructions p	 	{ font-size:12px;  margin: 10px 0px 75px 0; width:100%; text-align: center}

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


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

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

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




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

			

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

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

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

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

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


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

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


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

.links-body			{width:1200px;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: 100px 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 20px}

.links2-column 			{float:left; width:100%; min-height:100px; margin: 50px 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:60px; text-align:center; margin-top:60px}
.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:60px; text-align:center}
.links-row4:after		{content: " ";display:table;clear:both }

.links5-column 			{float:left; width:49.8%; min-height:60px; 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 10px}
.ohio img				{margin: -10px 0px 5px 60px; clear:}
.bioquip				{margin: 10px 0 10px 0px }

.links a				{font-size:20px; text-align:center;   }
.links h3				{margin: 10px 0 0 20px; 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  }





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



.about-body		{width:1200px;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: 150px 20px 20px 20px; padding:40px 0 0 0;}
.about-text p   {font-size: 16px;margin:10px 0 10px 0 }
.about-imgrt	{float: right; margin: 20px 0px 15px 14px; border:3px solid #ff9e00}
.about-img		{float: left; margin: 20px 14px 5px 0; border:3px solid #ff9e00}

.newsletter					{margin:10px 10px;}
.newsletter img:hover	    {outline:6px solid #ff9e00; }
.newsletter-issues			{text-align:center;margin: 40px 0px 40px 40%;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:14px;margin:-20px 0 0 -130px;border:3px 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:1200px;margin:0px auto; min-height:300px; position:relative;border:thin white solid}

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

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

.newsletter3 ul li			{float:left; margin:40px 0px 10px 20px; width:50%}

.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:4px 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:4px solid #ff9e00 }
.newsletter3 a:focus     { color:#000000; outline:none  }


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

.board-body			{width:1200px;margin:0px auto; min-height:300px; position:relative;border:thin white solid}
.board				{margin: 180px 0 0 150px}
.board h4			{font-size:16px; margin: 30px 0 10px 0 }
.board p			{font-size:14px; margin: 10px 10px 30PX 0 }


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

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

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

.contact-list p			{font-size:16px; margin:2px 0;text-align: center}
.facebookpage			{text-align: center}
.facebookpage p			{font-size:22px; 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:22px; 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: -40px 370px 50px 0}
.contact-form h3	 	{margin:0 0 50px 370px; float:left; font-size:18px}
.dot 				  	{height: 5px; width: 5px; background-color: #ff9e00; border-radius: 50%; display: inline-block;margin: 0 19px}

.envimg img:hover 		{outline:4px solid #ff9e00; }



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

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

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

.join a			  {padding:30px 0 20px 0}
.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:20px;padding: 15px 15px}




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


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

.body-template {height:200px}