/* Estuaries 101 Middle School Curriculum                   */
/* Styles specific to the web-ready curriculum presentation */
/* by Todd Viola, Viola Digital Media, LLC                  */


/* Some basics */
.left {float: left; margin-right: 18px;}
.right {float: right; margin-left: 18px;}
.clear {clear: both;}
.clearfix:before,.clearfix:after {content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}
div.clear {margin-top: 2.0em;}
img.thumb {float: left; margin: 0 5px 20px 0;}

/* HTML
*****************************************************/

/* Links; these colors taken from Estauries.gov Educators section */
a {color: #6d3d0c;text-decoration: underline;}
a:hover {text-decoration: none;}

/* Headings
*****************************************************/
h2,h3,h4,h5 {margin-bottom: 1.0em;}

/* Lists
*****************************************************/
#content p,#content ul,#content ol {margin-bottom: 1.0em;}
#content p {line-height: 125%;}
#content ul,#content ol {margin: 0 0 1.0em 0.4em;}
#content li {margin: 0 0 0.4em 0.8em;}
#content ul {list-style-type: disc;}
#content ol {list-style-type: decimal;}

/* Define column widths and spacing
*****************************************************/
.half, .third, .quarter, .two-thirds, .three-quarters {float: left; margin-bottom: 20px;}
.half {width: 417px; margin-right: 15px; }
.third {width: 272px; margin-right: 17px;}
.quarter {width: 196px; margin-right: 20px;}
.two-thirds {width: 563px; margin-right: 19px;}
.three-quarters {width: 634px; margin-right: 20px;}
.omega {margin-right: 0;} /* Borrowed this concept from 960.gs */

/* Page title
*****************************************************/
div.pageTitle {border-bottom: 1px solid #824d00; margin-top:-16px; margin-bottom: 1.0em; position:relative;}
img.titleIcon {float: left;}
h2.BrownHeader {padding-top: 28px;}

/* Box styles
*****************************************************/
.box {background: #f9ebde; padding: 10px 10px; margin: 0px 0px 20px; outline:0; -moz-border-radius:12px; -webkit-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px;}
.box.border {border:1px solid #f5c49d;}
.box h3 {margin-top: 0px; text-align: center; font-size: 125%;}
.quickbox {background: #f9ebde; padding: 6px 10px 10px; display: block; outline:0; -moz-border-radius:12px; -webkit-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px;}
	
.resources {min-height: 150px; border:1px solid #d07034; padding-left:14px;}

.extras {}

.links {}

img.headshot {float: left; margin: 0 6px 6px 0; padding: 2px; border: 1px solid #744e18; background: #fff;}

/* Navigation tabs
*****************************************************/
.navtabs {}
.navtabs h3 {font-size: 85%; font-weight: normal; text-transform: uppercase; margin: 0 0 10px 6px;}
#content ul.css-tabs li {margin: 0 0 0 0;}

/* Homepage 
*****************************************************/
#arrow_instructions img {margin: 30px 0 0 20px;}

/* Videos (defaults)
*****************************************************/
div.videoplayer {float: right; margin: 0 0 4px 10px; border: 1px solid #999;}
img.playbutton {margin: 142px auto; display: block; width: 83px; height: 83px;}
.credit {text-align: right; font-size: 85%; color: #777;}
#player1, #player2 {z-index: 9999;}

/* Presentations
*****************************************************/
div.ppt {display: block; width: 600px; height: 450px; border: 1px solid #999;}

/* Read more
*****************************************************/
#more {width: 100%;}
#readmore {}
#hide {}

/* Link icons
*****************************************************/
/* Links that open new windows 
a[target ^="_blank"] {background: url(../images/external.png) center right no-repeat;padding-right: 13px;}*/
.buttonheading a[target ^="_blank"] {background: none; padding-right: 0;}
.banner a[target ^="_blank"], #map_canvas a[target ^="_blank"] {background: none; padding-right: 0;}
/* E-mail mailto: links */
/*a[href ^="mailto:"] {background: url(../images/mail_icon.gif) center right no-repeat;padding-right: 18px;}*/
/* Links to PDF files */
a[href $=".pdf"] {background: url(../images/pdf_button.png) center right no-repeat;padding-right: 18px;}
a.download  {display: block; height: 28px; background: url(../images/download.png) center left no-repeat; padding-left: 28px;}

/* Interactive map
*****************************************************/
#map_canvas {width: 854px; height:500px; margin: 0 0 15px 0; padding: 0; background:#fff; }
#map_canvas2 {width: 250px; height:120px; margin: 0; padding: 0; background:#000; }
.geoxml3_infowindow {margin:0; padding-bottom: 10px; overflow:hidden;}
#popup-window { width: 620px; font-family:Arial; font-size: 9pt; }
#popup-window p,  #popup-window th,  #popup-window td {font-size: 9pt;}
#popup-window sup {font-size: 60%; vertical-align:top;}
#popup-window .col1, #popup-window .col2 {float: left;}
#popup-window .col1 {width: 360px;}
#popup-window .col2 {width: 230px; margin-left: 10px;}
#popup-window .coords {float:right;} 
#popup-window .reserve-image {margin-bottom: 10px; width:360px; height:82px;}
#popup-window .reserve {font-size: 130%; font-weight: bold; margin-bottom: 4px;}
#popup-window .size {margin-bottom: 6px;}
#popup-window .label {font-weight: normal; color: #666;}
#popup-window .station {margin-top: 16px; font-weight: bold; border-bottom: 2px solid #999;}
#popup-window table {border-collapse: collapse; width: 100%;}
.param {width:60%;}
#popup-window th {font-weight: normal; color: #666;}
#popup-window td {text-align: right; border-bottom: 1px solid #aaa; padding: 2px 4px;vertical-align:top;white-space:nowrap;}
img.mapkey {float: left; margin: 0 10px 4px 0;}

/* Standards table
*****************************************************/
table.standards {border-collapse: separate; margin: 20px 0px 60px;}
table.standards td {padding: 0.5em 10px 0 0; border-bottom: 1px dotted #666;}
table.standards th {padding: 0 10px 0 0; border-bottom: 2px solid #666;}

/* Main Menu
*****************************************************/
a#menu_trigger {position: absolute; top: 14px; right: 10px; display: block; width: 140px; height: 35px; padding: 8px 10px; text-align: center; background: url(../images/button-menu.jpg) no-repeat; color: #fff; text-decoration: none; font-weight: bold;}

.main_menu {
   z-index: 10000;
	display:none;
	width:850px;
	margin: 15px 0 0 10px;
	background: #f6efe5 url(../images/bkgd-main-menu.jpg) repeat-x;
	-moz-border-radius:6px;}

.shortcuts {font-size: 85%;}
#content .shortcuts ul, #content .shortcuts li {list-style-type: none; margin: 0 0 1.0em; 0;}
.shortcuts h4 {display: block; min-height: 3.0em; margin-bottom: 0; color:Black;}
.shortcuts .col {width: 108px; float: left;padding: 0px 4px 0px 6px; min-height: 250px; border-right: 1px solid #fff; margin-bottom: 20px;}
.shortcuts .last {width: 120px; border-right: none;}
.shortcuts li.homelink {padding-top: 30px;}
.shortcuts li.homelink img {padding-top: 6px;}

.foot
{
    margin-left:4px;
}
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;

	/* vertical scrollables have typically larger height than width but not now */
width: 630px;	
height: 755px;
	
}

/* root element for scrollable items */
.scrollable .items {
	position:absolute;

	/* this time we have very large space for the height 
	width:20000em;*/
	height:20000em;
}


/*.items div{
 float:left;
}*/

.climate_box
{
	/*border:1px solid #d07034;*/
	background-color:#e1dfd0;
	 padding-left:10px;
	 padding-right:2px;
	 padding-bottom:8px;
	 width:630px;
}

.climate_head
{
 line-height:2;
 color:Orange;
}

.climate_textbox
{
 height:410px;
}

.climate_SFont
{
	color:black;
	font-weight:bold;
}

.climate_IFont
{
	color:black;
	font-weight:bold;
}
.climate_HFont
{
	font-size:11px;
}

.climate_center
{
 text-align:center;
}
.climate_left
{
	text-align:left;
}
.climate_right
{
	text-align:right;
}

.ddimgtooltip{
/*shadow for CSS3 capable browsers.*/
/*box-shadow: 3px 3px 5px #818181; 
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;*/
display:none;
position:absolute;
border:1px solid white;
background:white;
color: black;
z-index:2000;
padding: 4px;
}


.map
{
	background-color:White;
	
}