html {
  height: 100%;
  overflow:scroll; /* This forces a scrollbar on the side of the page even for short pages.
						  If this is not included then the page does a small horizontal shift when
						  you change between short and long pages. The shift happens because the
						  pages are centring themselves in the available space and if there is no
						  scroll bar they shift slightly to the right. */
	color: transparent;/* In pages with custom attributes in DOCTYPE, this hides the ]> that
	                      is shown - the color is reset to black in the body */
}

body {
	font-family: Arial, sans-serif;
	font-size: medium;
	background-color: #D1DCBB;  /*#E0EBCC;*/
	color: black;
}

body.news {
	margin-top: -1ex; /* gets rid of space at top of page created by the custom attributes */
}

h1 {
	font: normal 200% Arial, sans-serif;
	color: green;
}

h2 {
  font: normal 150%  Arial, sans-serif;
  margin: 0;
  padding: 20px 0 5px 0;
  color: green;
}

h3 {
	font: normal 150%  Arial, sans-serif;
}

h4 {
	font: bold 125%  Arial, sans-serif;
}

h5 {
	font: bold 100%  Arial, sans-serif;
	padding-top: 20px;
	text-decoration: underline;
	color: green;
}



p.right {
	float: right;
}


/* wrap is the main part of the page that contains the content   */
#wrap {
	width: 950px;
	margin: 0 auto;
	overflow: hidden; /* when the divs inside wrap are floated, this keeps the wrap div from collapsing */
	/*background-color:  	#F8F8EC; /*#FDFDE9; /*#F9F9E4;  /*#FFF5EE; /* #FFFAFA=Snow /* #FFF5EE=SeaShell; /*OldLace; /*MintCream; /*Ivory; /*#ffffff;*/
	background: linear-gradient(to right, #D1DCBB 0%,#F8F8EC 10px,#F8F8EC 940px,#D1DCBB 100%); /* W3C */
	/*border: 1px solid red; /* for testing*/
	color: black; /* color for html was set to transparent (see above), so this resets the default
	                 to black */
}



#header {
	width: 100%;
	height: 206px; /*186px;*/
	margin: 0 0;
	/*border: 1px solid red; /* for testing */
}



#logo p {
	display: inline;
	font: 225% Verdana, sans-serif;
}

#logo {
	width: 100%;
	height: 160px;
	margin: 0 0;
	padding-bottom: 10px;
	/*border: 1px solid blue; /* for testing */
}

#logo hr {
	 margin-top: 10px;
	 margin-bottom: 10px;
	 width: 540px;
}





/* menubar height is set by padding for #menubar ul and #menubar ul li a */
/* menubar width can be controlled with padding for #menubar ul and #menubar ul li a */
/* menubar width is also influenced by font size */

#menubar {
	margin: 0 0;
	text-align: center;
	font-family:  Arial, sans-serif;
	/*box-shadow: 0px 0px 5px 0px #808080;*/
	/*border: 1px solid blue; /* for testing */
}

#menubar ul ul {
	display: none;
}



#menubar ul {
	margin: 0 0;
	padding: 0 22px; /* see above  */
	/*width: 100%;*/
	list-style: none;
	position: absolute; /* This was changed from relative so that the menu items did not get cut off on the right */
	/*display: inline-table; /* when this is used, the menu is centered */
	/*background: #DFDCB8 /*#E0EBCC;  /*#efefef;*/ /* menu bar background */
	background: linear-gradient(to right, #D1DCBB 0%,#DFDCB8 10px,#DFDCB8 940px,#D1DCBB 100%); /* W3C */
}
	#menubar ul:after {
		content: ""; clear: both; display: block;
	}

	#menubar ul li {
		float: left;
		text-align: left;
	}

/* hover color for main menu headings */
	#menubar ul li:hover {
		background: #474724; /* #4b545f; */
	}

	#menubar ul li:hover a {
		color: #fff;
	}

  #menubar ul li:hover > ul {
		display: block;
	}


		#menubar ul li a {
			display: block;
			padding: 10px 15px; /* see above */
			text-decoration: none;
			color: black; /* main menu text */
		}

	#menubar ul ul {
		border-radius: 0px;
		padding: 0;
		position: absolute;
		top: 90%;
		/*width: 100%;*/
		background:  #72724F; /*#949470; /* #5f6975; */  /* sub-menu background */
		z-index: 99; /* need to set z-index higher than that for the slideshow  */
	}

		#menubar ul ul li {
			float: none;
			border-top: 1px solid #474724;	 /*#6b727c;*/
			border-bottom: 1px solid #474724;	 /*#575f6a;*/
			position: relative;
			z-index: 99;  /* need to set z-index higher than that for the slideshow  */
      white-space: nowrap; /* without this, the menu itmes on the right side are fitted into the containing div, and longer items get wrapped into two lines  */
		}
			#menubar ul ul li a {
				/*float: left; would like to left-justify submenus, but doesn't work*/
				padding: 15px 20px;
				font-size: 85%;
				color: #fff;
			}

			#menubar ul ul li a:hover {
				background: #a9a956;/*#474724; /*#4b545f;*/
			}

	#menubar ul ul ul {
		position: absolute;
		left: 100%;
		top:0;
	}



/* When menu items do not have an active link and are given the "Coming Soon" tooltip, they are styled
   as <span> instead of <a href="">.  */
		#menubar ul li span {
			display: block;
			padding: 10px 15px; /* see above */
			text-decoration: none;
			color: black; /* main menu text */
		}

			#menubar ul ul li span {
				/*float: left; would like to left-justify submenus, but doesn't work*/
				padding: 15px 20px;
				font-size: 85%;
				color: #fff;
			}

			#menubar ul ul li span:hover {
				background: #a9a956; /*#474724; /*#4b545f;*/
			}

	#menubar ul li:hover span {
		color: #fff;
	}





/* To highlight the selected section of the menubar  */
body#home #menubar ul li a#menu_home,
body.about #menubar ul li a#menu_about,
body.conf #menubar ul li a#menu_conf,
body.species #menubar ul li a#menu_species,
body.conservation #menubar ul li a#menu_conservation,
/*body.resources #menubar ul li a#menu_resources,*/
body.news #menubar ul li a#menu_news,
body.blog #menubar ul li a#menu_news {
	background: #474724;
	color: #fff;
}





#main {
	/*border: 1px solid green; /* for testing */
	padding-top: 20px;
}






/* Styling for the sidebar menus */

.sidebartitle {
	color: #70451A; /*#996633;*/
	text-decoration: underline;
	font-weight: bold;
	font-size: 125%;
}

#sidebar {
	float: left;
	padding-top: 20px;
	width: 210px;
	/*border: 1px solid blue; /* for testing */
}

/* the species sidebar menu stays visible as you scroll down the page */
#sp_sidebar {
	float: left;
	padding-top: 20px;
	width: 210px;
	position: fixed;
	/*border: 1px solid blue; /* for testing */
}

#sidebar ul,
#sp_sidebar ul {
	padding-left: 30px;
	list-style: none;
	line-height: 3em;
}

#sidebar ul li a,
#sp_sidebar ul li a,
#sidebar ul li span,
#sp_sidebar ul li span {
	text-decoration: none;
	color: #70451A; /*#996633;*/
}


	#sidebar ul li:hover a,
	#sp_sidebar ul li:hover a,
	#sidebar ul li:hover span,
	#sp_sidebar ul li:hover span {
		padding: 10px 5px 10px 5px;
		background: #987757; /*#B89470;*/
		color: #fff;
		/*border-radius: 10px 10px 10px 10px;*/
	}



/* to highlight the current page on the sidebar of the "About" pages */
body#awards a#menu_awards,
body#board a#menu_board,
body#member a#menu_member,
body#committees a#menu_committees,
body#about a#menu_about2,
body#docs a#menu_docs,
body#contact a#menu_contact {
	padding: 10px 5px 10px 5px; /*10px;*/
	color: #fff;
	background: #70451A; /*#996633;*/
	/*border-radius: 10px 10px 10px 10px;*/
}

/* to highlight the current page on the sidebar of the "Conference" pages */
body#current a#menu_conf,
body#past a#menu_past,
body#hangouts a#menu_hangouts,
body#toadtalks a#menu_toadtalks,
body#youtube a#menu_youtube {
	padding: 10px 5px 10px 5px; /*10px;*/
	color: #fff;
	background: #70451A; /*#996633;*/
	/*border-radius: 10px 10px 10px 10px;*/
}





/* to highlight the current page on the sidebar of the "Conservation" pages */
body#conservation2 a#menu_conservation2,
body#herp a#menu_herp,
body#impara a#menu_impara,
body#atlas a#menu_atlas,
body#resources a#menu_resources,
body#organizations a#menu_organizations {
	padding: 10px 5px 10px 5px; /*10px;*/
	color: #fff;
	background: #70451A; /*#996633;*/
	/*border-radius: 10px 10px 10px 10px;*/
}


/* to highlight the current page on the sidebar of the "News" pages */
body#tch a#menu_tch,
body#turtles a#menu_turtles,
body#discuss a#menu_discuss,
body#announce a#menu_announce,
body#jobs a#menu_jobs {
	padding: 10px 5px 10px 5px;
	color: #fff;
	background: #70451A; /*#996633;*/
	/*border-radius: 10px 10px 10px 10px;*/
}

/* to highlight the current group link in the Species sidebar menu */
#sp_sidebar a:hover, #sp_sidebar li a.active {
	padding: 10px 5px 10px 5px; /*10px;*/
	color: #fff;
	background: #70451A;
}

/* to highlight the current page on the sidebar of the "Decline" page */
body#decline a#menu_decline {
	padding: 10px 5px 10px 5px;
	color: #fff;
	background: #70451A; /*#996633;*/
	/*border-radius: 10px 10px 10px 10px;*/
}

/* to highlight the current page on the sidebar of the "Threats" pages */
body#threats a#menu_threats,
body#habitat a#menu_habitat,
body#roads  a#menu_roads,
body#pollution  a#menu_pollution,
body#disease  a#menu_disease,
body#invasive  a#menu_invasive,
body#climate  a#menu_climate,
body#collection  a#menu_collection,
body#persecution  a#menu_persecution,
body#fishhooks  a#menu_fishhooks {
	padding: 10px 5px 10px 5px;
	color: #fff;
	background: #70451A; /*#996633;*/
	/*border-radius: 10px 10px 10px 10px;*/
}

/* to highlight the current page on the sidebar of the Species - Biology pages */
body#amphibians a#menu_amphibians,
body#reptiles a#menu_reptiles {
	padding: 10px 5px 10px 5px; /*10px;*/
	color: #fff;
	background: #70451A; /*#996633;*/
	/*border-radius: 10px 10px 10px 10px;*/
}


#textright {
	float: right;
	width: 690px;
	padding-right: 30px;
	line-height: 1.5em;
	/*border: 1px solid orange; /* for testing */
}

#textright img,
#text img {
	margin-top: 16pt;
	border-style: solid;
	border-width: 2pt;
	border-color: black;
}



/* for images that are combinedas a montage, us div with class montage */

#montage {
  margin: 16pt 0 0 0;
  border-style: solid;
  border-width: 2pt;
  border-color: black;

  width: 100%;
}

#montage img {
  border-style: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  vertical-align: middle;
}



#text {
	padding: 10px 50px;
	line-height: 1.5em;
	font-family: Arial, sans-serif;
	/*font-size: 125%;*/
	/*border: 1px solid orange; /* for testing */
}


/* for hanging paragraphs, use a div with class="hang" */
.hang p {
    padding-left: 2em;
    text-indent: -2em;
}



.clearfloat {
	clear: both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.boxes {
	padding:30px 0;
	font-family: Arial, sans-serif;
}

.boxes li {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 5px 4px 0px #808080;
	width:270px; /* original is width:205px; */
	height: 420px; /*375px; /* orginally, no height was specified */
	float:left;
	margin:30px 16px;
	list-style:none;
}

/* the following hilights boxes and makes them jump when hovering */
/*
.boxes li:hover {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0px 5px 4px 0px #464646;
	margin:0 16px;
	list-style:none;
}
*/

.boxes img {
	/*text-align: center;*/
	/*margin:10px 20px 0 20px; /* original was 20px 20px 10px 20px; */
	border:1px solid #e3e3e3;
}

.boxes li h2 {
	padding: 10px 20px 0 30px;
}

.boxes li p {
	height: 310px; /*265px;*/
	padding: 0 20px;
	margin-top: 5px;
	margin-bottom: 10px;
	font-size: 125%;
	line-height: 1.5em;
}
.boxes li button {
	margin-left: 30px;
	margin-top: 0;
	background:#749b29;
	padding:3px 10px;
	cursor:pointer;
	font-size:24px;
	font-family: Verdana, sans-serif;
	border:0;
	color:#ffffff;
}

.boxes li button:hover {
	background-color: #474724;
	cursor:pointer;
	color:#ffffff;
}





#Buttons {
	padding-top: 50px;
	padding-bottom: 20px;
	text-align: center;
	font: bold 100% Verdana, sans-serif;
	text-decoration: none;
}



#DonateButton {
	display: inline-block;
	padding: 1em 0;
	width: 150px;
	margin: 0 30px;
	border: 3px outset #cccccc;
	color: white;
	background-color: #354E00;
	text-decoration: none;
}

#JoinButton {
	display: inline-block;
	padding: 1em 0;
	width: 150px;
	margin: 0 30px;
	border: 3px outset #cccccc;
	color: white;
	background-color: #6B2424;
	text-decoration: none;
}

#InvolveButton {
	display: inline-block;
	padding: 1em 0;
	width: 150px;
	margin: 0 30px;
	border: 3px outset #cccccc;
	color: white;
	background-color: #A37A00;
	text-decoration: none;
}



#footer {
	width: 950px;
	float: left;
	/*border: 1px solid red; /* for testing */
}



#footerbar {
  height: auto;
  /*width: 950px;*/
  /*float: right;*/
  /*margin: 20px auto 20px auto;*/
  /*padding: 20px 20px;*/
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  font-family: Arial, sans-serif;
  /*text-align: right;*/
  /*border: 1px solid black; /* for testing */
  background: linear-gradient(to right, #D1DCBB 0%,#DFDCB8 10px,#DFDCB8 940px,#D1DCBB 100%); /* W3C */
  }

#footerbar, #footerbar a:hover {
  background-color: #E0EBCC;
}

#footerbar a, #footerbar a:hover {
  text-decoration: none;}

.footerbarLeft {
	float: left;
	padding: 0 0 0 20px;
}


.footerbarRight {
  float: right;
  padding: 0 20px 0 0;
}




/* Schedule/agenda tables */
table.sched {
  width: 100%;
  border-collapse: collapse;
  /*margin-top: -2ex;*/
}

table.sched th {
  text-align: left;
  border: 1px solid black;
  padding: 3pt 3pt;
}

table.sched td {
  border: 1px solid black;
  padding: 3pt 3pt;
}





/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):after {
    content: " \25B4\25BE"
}







/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
	font-family: 'flexslider-icon';
	src:url('../fonts/flexslider-icon.eot');
	src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/flexslider-icon.woff') format('woff'),
		url('../fonts/flexslider-icon.ttf') format('truetype'),
		url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {
	margin: 0;
	padding: 0;
}
.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {width: 45%; /* this was initially set to 100% */
	display: block;
	float: left; /* not in original - used to put image on right and caption on left  */
	/* rounded top left corner */
    -moz-border-radius-topleft: 15px;
    -webkit-border-top-left-radius: 15px;
    border-top-left-radius: 15px;
    /* rounded bottom left corner */
    -moz-border-radius-bottomleft: 15px;
    -webkit-border-bottom-left-radius: 15px;
    border-bottom-left-radius: 15px;

}


.roundedBottomCorners {
    border: 1px solid #000;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
}




.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {
	width: 80%; /* this was not in the original but can be used to control the size */
	/*margin: 0 0 60px; /* this is the original margin */
	margin: 0 auto 20px 10%; /* use to control horizontal position*/
	/*background: #fff;*/
   background: #474724; /*rgba(71,71,36, 0.5); /* rgba(0, 0, 0, 0.6);*/
	border: 4px solid #fff;
	position: relative;
	-webkit-border-radius: 20px; /* original was 4px */
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 0 1px 20px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 20px rgba(0,0,0,.2);
	-o-box-shadow: 0 1px 20px rgba(0,0,0,.2);
	box-shadow: 0 1px 20px rgba(0,0,0,.2);
	/*zoom: 1; /* not valid*/
	/*overflow: hidden; /* this causes the image to have its corners rounded the same as the box, but it also hides the navigation buttons */
	/*border: 1px solid blue; /* for testing */
}

.flex-viewport {
	max-height: 2000px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.loading .flex-viewport { max-height: 300px; }
/*.flexslider .slides { zoom: 1; } /* not valid */
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {/*height: 0;*/}
.flex-direction-nav a  {
	text-decoration:none;
	display: block;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	position: absolute;
	top: 50%;
	z-index: 10;
	overflow: hidden;
	opacity: 0;
	cursor: pointer;
	color: whitesmoke; /*rgba(0,0,0,0.8);*/
	text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
}
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
/* Note: the filter declaration is apparently for IE only. Need to check if it is needed at all */
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {
	width: 100%;
	position: absolute;
	bottom: -40px;
	text-align: center;
	/*border: 1px solid blue; /* for testing */
}
.flex-control-nav li {
	margin: 0 6px;
	display: inline-block;
	/*zoom: 1; /* not valid*/
	/*display: inline;*/
	}
.flex-control-paging li a { /* navigation dots */
	width: 15px;
	height: 15px;
	display: block;
	background: #666; /* not sure what this does */
	background: rgba(81,0,0,0.5); /* colour of inactive bullets */
	cursor: pointer;
	text-indent: -9999px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
	-o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover {
	background: #333;
	background: rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active {
	background: #000;
	background: rgba(81,0,0,0.9);
	cursor: default;
	}

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

/* caption formatting was not in the original  */
.slides {position: relative;}



.flex-caption {
	left: 0;
	top: 0;
	width: 375px;
	height: 303px;
	display: table;
	vertical-align: middle;
	padding-left: 15px;
	/*border: 1px solid red; /* for testing */
}

.flex-caption a {
	text-decoration: none;
	color: #fff;
	display: table-cell;
   height: 100%;
   width: 100%;
   text-decoration: none;
	/*border: 1px solid red; /* for testing */
}

.flex-caption p {
	font: normal medium Arial, sans-serif;
    color: white;
    z-index:1;
    padding: 0 10px;
    line-height: 1.5em;
    display: table-cell;
    vertical-align: middle;
    /*border: 1px solid blue; /* for testing */
}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}



/* Awards */
/*
table.awards {
	border: 1pt solid;
	font-size: 80%;
	border-collapse: collapse;
	width: 100%;
}
*/

tr.awards {
	font-size: 80%;
	vertical-align: top;
	line-height: 110%;
}
/*
td.awards { border: 1pt solid;
		 padding: 2px;

tr.awards-header {
	background-color: #DFDCB8;
	border: 1pt solid;
}
*/


.hideMe {
	display: none;
}





/* The following are used for showing/hiding text in announcements  */
.texthidden {display:none;}
.textshown {display:inline;}

/* To get some space between items in the announcements */
.list li {
	margin-bottom: 3ex;
}


.species blockquote {
	font-size: 90%;
	margin-bottom: -2ex;
}


address {
	font-style: normal;
}


/* sometimes, we don't want image borders (e.g., in news and announcements) */
.noborder {
	border-style: none;
}

/* social media buttons*/

.social{
}

.social img {
  border-style: none  !important;
  height: 48px;
  margin: 20px;
}


/* styling for species pages  */


.species td a {
	text-decoration: none;
}

.species > tr:hover {
	background-color: red;
}

#spbox { /* The species name and picture  */
	/*border: 10px solid #D1DCBB;*/
	padding:0px 10px 0px 10px;
	overflow:auto;
}




#spbox img {
	margin-left: 10px;
	border-style: solid;
	border-width: 1pt;
	border-color: black;
}

#spbox h1 {
	font: bold 200% Arial, sans-serif;
	color: darkgreen;
	padding-bottom: 0ex;
	margin-bottom: 0px
}

#spbox h2 {
  font:  150%  Arial, sans-serif;
  padding-top: 0ex;
  color: darkgreen;
}

#spbox h3 {
	font-size: 100%;
	padding-bottom: 0.5ex;
}

#sptext h1 {
	font: bold 125%  Arial, sans-serif;
	color: black;
	padding-top: 2ex;
	padding-bottom: 1ex;
	border-bottom: 1px solid darkgreen;
}

#sptext p {
	padding-top: 0ex;
	overflow:auto;
}


/* add vertical space for list of meetings */

#past #textright ul li {
	padding-bottom: 4ex;
}

#past #textright ul ul li {
	padding-bottom: 0ex;
}




/* The following section is used to create pop-up info windows on the projects page  */
.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;
  z-index: 99;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}



/* Blog Stuff */

/* WordPress Stuff */

#main .post {
	padding-left: 15px;
}



/*
The blog page does not have a textright div (there is no sidebar menu).
It uses the textfull div instead
 */

#blogheader img{
	border-style: solid;
	border-width: 2pt;
	border-color: black;
	display: block;
	margin-top: 10pt;
	margin-bottom: 2ex;
	margin-left: auto;
	margin-right: auto;
}


#textfull {
	/*width: 905px;*/
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5em;
	/*border: 1px solid orange; /* for testing */
}

#textfull h1 {
	font: normal 250% Arial, sans-serif;
	color: green;
	padding-bottom: 3ex;
}

#bloglist img {
	margin-top: 3pt;
	border-style: solid;
	border-width: 2pt;
	border-color: black;
}

#textfull hr {
	color: maroon;
}
#textfull a:link, #textfull a:visited {
  color: maroon;
  text-decoration: none;
}

#textfull a:hover, #textfull a:active {
color: green;
}

#textfull figure {
	display: block;
	text-align: center;
	padding-bottom: 3em;
	padding-top: 2em;
}



.posttitle {
	margin-top: 15ex;
	text-align: center;
}

.posttitle h1 {
	font: normal 250% Arial, sans-serif;
	color: green;
	margin-bottom: -2ex;
}

.blogitem {
	clear: left;
}


.blogitem img {
	max-height: 150px;
	width: auto;
	float: left;
	margin-right: 10px;
}

#curr_page {
	background-color: rgba(0,100,0,0.8); /* darkgreen with 80% opacity*/
	color: white;
	padding: 5px 10px;
	/*border-radius: 50%;*/
	border-radius: 5px;
}
#other_page {
	color: black;
	text-decoration: none;
	border-radius: 5px;
	padding: 6px 12px;
}

#other_page:hover{
background-color: #ddd;
border-radius: 5px;
}





.poem {
	text-align: center;
	font-style: italic;
	margin-bottom: 4ex;
}