a:focus { outline: solid #4f4 2px;}

/*----------------------------------------------- Global Styles -------------------------------------------*/
.left
{
	float: left;
}

.right
{
	float: right;
}

.clearfloats
{
	clear: both;
}

.hide
{
	display: none;
}

.accessibility-content
{
	position: absolute;
	width:200px;
	height: 1px;
	top: 0;
	left: -1000px;
}

#skipnav { position: absolute; left: -1000px;}


audio
{
	display: none;
	height: 0px;
}

/* --------------------------------------------  Body, Preloader, & Wrapper -------------------------------- */
body
{
	margin: 0px;
	padding: 0px;
	min-width:960px;
}

div, h1, h2, h3, h4, h5, h6
{
	margin: 0px;
	padding: 0px;
}

div#preloader
{
	position: absolute;
}

div#wrapper
{
	width: 100%;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	outline: none;
}

/*--------------------------------------------------- Header -------------------------------------------------*/

div#header
{
	position: relative;
	width: 100%;
	height: 78px;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

div#header h1
{
	display: block;
	padding-top: 26px;
	font-family: 'Arial Black', Helvetica, sans-serif;
	font-size: 32px;
	font-weight: lighter;
	letter-spacing: 1px;
	color: #FFFFFF;
}


/*--------------------------------------------------- Navigation ---------------------------------------------------*/
div.navbar {
	margin-bottom: 0;
}
div#nav-links
{
	width:940px;
	height:53px;
	margin-top: 0px;
	text-align: center;
}
div#nav-links ul 
{
	/*width:960px;*/
}
div#nav-links li
{
	background-image:none;
	background-repeat:no-repeat;
	background-position:right bottom;
	list-style: none;
	display: block;
	float: left;
	margin-top:-1px;
	font-size: 16px;
	line-height: 50px;
	min-width: 110px;
}
div#nav-links li a:link
{
	height:54px;
	text-decoration: none;
	/*outline:0;*/
	padding: 0 15px;
	text-shadow: none;
}
div#nav-links li a:visited
{
	height:54px;	
	text-decoration: none;
	/*outline:0;*/
	padding: 0 15px;
}
div#nav-links ul.dropdown-menu li > a:link
{
	height:20px;
}
div#nav-links ul.dropdown-menu li > a:visited
{
	height: 20px;
	padding-left: 15px;
}

div#nav-links ul a:focus { outline: solid 1px yellow;}

.dropdown-menu li > a.selected {
  text-decoration: none;
  color: #ffffff;
  /*background-color: #0081c2;*/
  background-color: #dbe7e9;
}

.nav > li a:hover /*text on nav*/
{
	text-decoration: none;
	/*outline:0;*/
	padding-right: 15px;
	background-color: none;

	/*border: none; //removed to maintain focus for screen readers */

	/*background: #69a5e8; 
	background: -moz-linear-gradient(top,  #69a5e8 0%, #a6ccf4 41%, #a6ccf4 53%, #69a5e8 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#69a5e8), color-stop(41%,#a6ccf4), color-stop(53%,#a6ccf4), color-stop(100%,#69a5e8)); 
	background: -webkit-linear-gradient(top,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%);  
	background: -o-linear-gradient(top,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%); 
	background: -ms-linear-gradient(top,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%); 
	background: linear-gradient(to bottom,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69a5e8', endColorstr='#69a5e8',GradientType=0 ); */
}
.nav > li > a.selected
{
	
	/*background: #69a5e8; // Old browsers
	background: -moz-linear-gradient(top,  #69a5e8 0%, #a6ccf4 41%, #a6ccf4 53%, #69a5e8 100%); // FF3.6+ 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#69a5e8), color-stop(41%,#a6ccf4), color-stop(53%,#a6ccf4), color-stop(100%,#69a5e8)); // Chrome,Safari4+
	background: -webkit-linear-gradient(top,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%);  //Chrome10+,Safari5.1+ 
	background: -o-linear-gradient(top,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%); // Opera 11.10+
	background: -ms-linear-gradient(top,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%); // IE10+ 
	background: linear-gradient(to bottom,  #69a5e8 0%,#a6ccf4 41%,#a6ccf4 53%,#69a5e8 100%); // W3C 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69a5e8', endColorstr='#69a5e8',GradientType=0 ); // IE6-9
*/  	
  	background-repeat:no-repeat;
  	background-position:right bottom;
	color: #ffffff;
	padding-right: 15px;
	cursor: default;
}

div#nav-links li+li
{
	margin-left: 25px;
}

div#nav-links li+li > a
{
	height:40px;
}

img.nav-separator {
	float:left;
	margin-top: 8px;
}

div#nav-links .dropdown ul > li {
	margin-left:0px;
	margin-top: 0px;
	width:100%;
	text-align: left;
	padding: 5px 0;
	height:20px;
}

div#nav-links .dropdown ul > li.selected {
	background: #dbe7e9;
}
div#nav-links .dropdown ul > li > a:hover {
	margin-left:0px;
	background: #dbe7e9;
}
div#nav-links .dropdown ul p {
	margin-left: 15px;
	text-align: left;
}

/*-----------------NAV CARET ----------------*/
.navbar .nav li.dropdown > .dropdown-toggle .caret 
{
	border-top-color: #ffffff;
	border-bottom-color: #ffffff;
	
	vertical-align: text-bottom;
}

/*--------------------------------------------------- Main Content -------------------------------------------------*/

div#content
{
	position: relative;
	width: 940px; margin: 0px auto;
}

/*Container*/
.stem-container {
	background-color: #fff;
	padding-top:20px;
}
/*--------------------------------------------- Left Navigation Column --------------------------------------------*/
div#left-column
{
	height:100%;
	margin: 20px 12px 0 28px;
	padding: 0px;
	background-color: #ffffff;
	float: left;
	overflow: visible;
}

ul#menu
{
	list-style-type: none;
	padding: 0px 8px 0px 0px;
	width: 100%;
	margin:0;
}

ul#menu > li
{
	width: 100%;
	margin-top: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
}

ul#menu > li a
{
	font-family: 'Arial', sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	display:block;

	padding-top: 3px;
	margin-left: 0px;
	padding-left: 10px;
}
ul#menu > li p
{
	font-family: 'Arial', sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	color: #000000;
	display:block;

	padding-top: 3px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 10px;
}

ul#menu > li ul
{
	list-style-type: none;
	padding: 0px 8px 0px 0px;
	overflow: hidden;
	display: block;
	margin-left:0;
}

ul#menu > li ul > li
{
	width: 104px;
	padding: 4px 16px;
}

ul#menu > li ul > li a
{
	font-weight: 600;
	font-size: 12px;
	text-decoration: none;
	color: #3E4C4F;
}

ul#menu li a:hover
{
	color: #8B9CA0;
}

ul#menu > li ul > li a:active
{
	color: #D23C3D;
}


ul#menu > li a.selected
{
	background: #dbe7e9;
}

ul#menu li.selected a
{
	color: #000000;
	font-weight: bold;
}

/*------------------------------------------------ Center Column Main Content -----------------------------------------------*/
div#center-column
{
	width: 507px;
	/*height: 100%;*/
	height: auto;
	min-height: 450px;
	margin: 20px 5px 0 0;
	padding: 0 0 0 18px;
	float: left;
	overflow: visible;
	background:#ffffff;
}

div#center-column:focus
{
	outline: 0;
}

.crossfade
{
	opacity: 1;
}
.no-crossfade
{
	opacity: 1;
}


/*--------------------------------------------- Right Column -------------------------------------------*/

div#right-column
{
	width: 270px;
	height:100%;
	margin: 20px 28px 0 0;
	padding: 0px 6px;
	float: right;
	overflow: visible;
}

div#right-column h3
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 22px;
	font-weight:lighter;
	letter-spacing: 1px;
	margin-top: 16px;
	margin-bottom: 8px;
}

div#right-column p, div#right-column ul
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	margin-top: 12px;
	margin-bottom: 12px;
}

div#right-column a, div#right-column-content a
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 15px;
	text-decoration: underline;
}

div#right-column .caption
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 15px;
	margin-top: 0px;
	background: #B7D6DC;
	padding: 4px;
	margin: -5px -2px -1px 0px;
}

/*--------------------------------------------------- Footer -------------------------------------------------*/
div#footer-wrapper {
	background: url("../images/css-images/footer.png") no-repeat top center;
	width:100%;
	height:310px;
}
div#footer
{
	height: 310px;
	margin: 0px;
	padding: 0 110px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
	text-align: center;
	line-height: 110%;
	overflow: hidden;
	position: relative;	
}

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

div#footer .site-links
{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #edc200; 
	margin-top:7px;
}

div#footer .site-links a
{
	color: #ffffff;
	text-decoration: none;
	display: inline-block;
	height: 16px;
	padding:2px;
}

div#footer .site-links a:hover
{
	text-decoration: underline;
}

div#footer .site-links a:focus { outline: yellow solid 2px;}

div.site-links {width: 300px; margin: 10px auto; padding-left: 70px;}
div.site-links a {float: left;}
div.site-links span.footer-separator {display: inline-block; height:16px; padding: 2px 4px; float: left;}
div#footer p {clear: both;}

.ie8 div#footer .site-links a {display: inline;}

div#footer div.footer-logos
{
	overflow: auto;
	text-align: center;
	width: 680px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

div#footer div.footer-logos a
{
	display: block;
	float: left;
	text-indent: -9999px;
	background: no-repeat center;
	min-height: 92px;
	min-width: 220px;
	overflow: visible;
	border: transparent solid 1px;
}

div#footer div.footer-logos a:focus {border: yellow solid 1px; outline: none;}

/*--------------------------------------------------- Overlay -------------------------------------------------*/
div.reveal
{
	
}
div.revealable
{
	width: 100%;
	min-width: 971px;
	height: 100%;
	position: absolute;
	overflow: visible;
	top: 0px;
	left: 0px;
	right: 0px;
	margin: 0px -31px;
	/* background-color: rgba(0,0,0,0.25);*/
	background-image: url('../images/interactives/1px_25percent.png');
	background-repeat: repeat;
	z-index: 100;

	display:none;
}

div.revealable-content
{
	position: relative;
	width: 620px;
	height: 500px;
	margin-left: 155px;
	top: 75px;
	border: 3px solid;
	/*top: 25%;*/
	padding: 18px 15px 10px 15px;
	background: #ffffff; 
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	text-align: left;
}

div.revealable-content .overlay-image
{
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
}

div.revealable-content  a.close-button
{
	position: absolute;
	top: 9px;
	right: 9px;
	display:block;
	width: 20px;
	height: 24px;
	background: url('../images/css-images/popup-close.png') no-repeat top;
	text-indent: -9999px;
}

div.revealable-content  a.close-button:hover
{
	background-position: bottom;
}
div.revealable-content p
{
	margin: 5px 10px;
}
div.revealable-content h2, div.revealable-content h3
{
	margin-left: 10px;
	font-size:28px;
}
div.revealable-content h4, div.revealable-content h5
{
	margin-left: 10px;
	font-size:18px;
}

/*--------------------------------------------------- Vocab popup -------------------------------------------------*/

div#definition-wrapper
{
	position: absolute;
	width:288px;
	color: #0d2b75;
	top:0px;
	left: 0px;
	font-family:Arial, Helvetica, sans-serif;
	color: #0d2b75;
	z-index: 10;
	
}
div#definition-top
{
	width: 288px;
	height: 10px;
	background:url(../images/definition-images/definition-top.png);
	background-repeat: no-repeat;
}
div#definition-content
{
	width: 288px;
	min-height:50px;
	background: url(../images/definition-images/definition-tile.png);
	background-repeat: repeat-y;
	overflow: auto;
	padding-left: 14px;
}

div#definition-content > p
{
	width: 260px;
}

div#definition-bottom
{
	width: 288px;
	height: 49px;
	background: url(../images/definition-images/definition-bottom.png);
	background-repeat: no-repeat;
}

div#definition-wrapper img
{
	float: left;
	border: 1px solid;
	border-color: #f0c753;
	margin-right: 5px;
}

div#definition-text
{
	float: left;
	width:190px;
	margin-top: 4px;
}

div#definition-wrapper h4
{
	font-size: 15px;
	
	padding-bottom: 0px;
	margin-bottom: 0px;
}
div#definition-wrapper p
{
	margin-top:2px;
	padding-top:0px;
	font-size: 15px;
	font-weight: regular;
	font-size: 12px;
}
div#definition-play
{
	width: 14px;
	height: 17px;
	float: right;
	margin-bottom: -27px;
	background-image: url('../images/definition-images/play.png');
	margin-right: 45px;
	margin-top:10px;
}
div#definition-pause
{
	width: 14px;
	height: 17px;
	float: right;
	margin-bottom: -27px;
	background-image: url('../images/definition-images/pause.png');
	margin-right: 20px;
	margin-top:10px;
}

.definition
{
	font-weight: bold;
	color: #1a4dcc;
	cursor: pointer;
	text-decoration: underline;
}

/*-----------ICONS----------------*/
.stem-media-icon
{
	margin:0 5px 0 0;
	vertical-align: text-top;
}
.stem-circle
{
	width:95px;
	height:95px;
	float: left;
	margin: -60px 20px 0 -50px;
}

/*
 * BOTTOM-PAGE-NAV STYLES
 */

div#bottom-page-nav
{
	display:block;
	width: 940px;
	height: 40px;
	float:left;
	padding: 20px 15px;
}
div#bottom-page-nav .bButtons 
{
	display:block;
	float:left;
	margin-top:5px;
	margin-left: 5px;
	margin-right: 5px;
}

div#bottom-page-nav #first-arrow
{
	margin-left:30px;
}

ul#bottom-nav-menu
{
	/*margin-top:3px;
	margin-left:27px;
	margin-bottom:0px;*/
	margin:3px 15px 0 0;
	padding-left:0px;
	list-style: none;
	display: block;
	float: left;
}
ul#bottom-nav-menu li
{
	float: left;
	font-size: 20px;
	font-weight:lighter;
	width: 32px;
	height: 28px;
	text-align: center;
	padding-top: 4px;
}
ul#bottom-nav-menu li+li
{
	margin-left: 10px;
}

ul#bottom-nav-menu li a:link, ul#bottom-nav-menu li a:active, ul#bottom-nav-menu li a:visited, ul#bottom-nav-menu li a:hover
{
	text-decoration: none;
	/*outline:0;*/
	width: 32px;
	height: 32px;

}
ul#bottom-nav-menu li.selected
{
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
}

/***STYLES ADDED BY PHIL AND TRACY***/


.image-box {
/*	background-color:#dbe7e9; */
	padding:4px;
	font-size: 11px;
	line-height:14px;
	color:#333;	
	margin-bottom: 10px;
}

.image-box img {
	border:1px solid #ccc;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;  
}

.centered {
	display: block;
	margin: 0 auto;
}

.content-insert-box {
	margin: 10px auto;
	border: 2px solid #fff; 
	background-color: #faffff; 
	width: 300px; 
	padding: 10px; 
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

.floatright {
	float: right;
}
.floatleft {
	float: left;
}

.stem-photo-sidebar {
	margin-left: 10px; 
	border: 2px solid #d9c888; 
	border-radius: 5px;	
}
.stem-photo-page {
	margin-right: 10px; 
	border: 2px solid #f0f5f5; 
	border-radius: 10px;	
}