/*

COLORS:
Blue-Green: #046380
Turquoise: #002f2f
Lightest Tan: #efecca
Mid Tan: #e6e2af
Darkest Tan: #a7a37e
Link Colors: #06c;

*/

body {
	background-color:#046380;
	text-align:left;
	color:#333;
	font-family:'Liberation Sans','Helvetica Neue LT Std','Helvetica LT Std',Helvetica,Arial,Tahoma,'Lucida Grande','Lucida Sans',sans-serif;
	}

	a,.entry-content a em,.entry-content a strong,.entry-content em a,.entry-content strong a{color:#06c;outline:none !important;}
	ul li{list-style-type:square;}

h4
{font-family: 'ITC Avant Garde Gothic Std','URW Gothic L','Century Gothic', 'Avant Garde', 'Trebuchet MS', sans-serif;}

.hidden
{
	display:none;
}

img.bordered
{
	border:1px solid #000;
}

.floatLeft
{
	float:left;
	width:auto;
}

.floatRight
{
	float:right;
	width:auto;
}

.clearFloat
{
	clear:both;
}

#shell {
	margin:0 auto;
	text-align:left;
	width:960px;
	background-color:#FFF;
	
}

#contentShell {
	clear:both;
	width:auto;
	position:relative;
	padding-top:5px;
}

/* FOOTER
*/
.footer {
	background-color:#efecca;
	border-top:2px solid #a7a37e;
	clear:both;
	text-align:center;
	min-height:10px;
	font-size:.9em;
	font-weight:normal;
}
/* SIDE BAR
*/

#sideNav {
	float:left;
	width:198px;
	position:relative;
	margin-left:5px;
}

#sideNav ul {
	padding:2px;
	margin:0;
}

#sideNav ul li strong {
	padding-top:0.2em;
}

#sideNav ul li.header {
	border-bottom:2px solid #046380;
}

#sideNav ul li {
	padding:2px;
	list-style-type:none;
	border:2px solid #fff;
}

#sideNav ul li:hover {
	background-color: #046380;
	border:2px solid transparent;
}

#sideNav ul li:hover a {
	background-color: #046380 !important;
	color:#fff;
}

#sideNav ul li a {
	text-decoration:none;
}

#graphLatest {
	position:absolute;
	font-size:0.7em;
	color:#666;
	background-color:#ffffff;
	padding:2px;
	height:auto;
	min-height:481px;
	min-width:150px;
}

#contentChild {
	width:740px;
	float:right;
	position:relative;
	padding:5px;
	padding-top:0;
}

#contentChild p{
	text-align:justify;
}

#contentChild p img {
	margin:0.6em;
	margin-right:0;
}

#contentChild h3 {
	color:#046380;
}

/* PAGE HEADER
*/

#cmepheader {
	color: #333;
	background: #efecca;
	margin: -3px 0 0 0;
	padding:0;
	float: left; 
	width: 100%;
	font-family: Arial, sans-serif; 
	border-bottom:2px #a7a37e solid; 
	vertical-align:middle;
}

#cmepheader img {
	border:0px;
}

#cmepheader h1 {
	font-size: 0.7em;
	font-weight: normal;
	display: inline;
	float: left;
	width:auto;
	margin-left: 8px;
	margin-top: 4px;
}

#cmepheader ul {
	float: right;
	display: inline;
	list-style-type: none;
	margin: 4px 6px 0 0;
	padding: 0;
	width:auto;
	text-align: right;
	font-size: 0.6em;
}

#cmepheader ul li {
	display: inline;
}

#cmepheader a {
	text-decoration: none;
	font-size: inherit;
	color: #66c;
	border: 0;
}

#cmepheader ul li a {
	padding: 0 5px 0 5px;
	border-left: 1px solid #fff;
	border-bottom: 0;
}

#cmepheader ul li a.first {	
	border-left: none;
}

.graphForms {
	font-size:0.8em;
	border-top:1px #06c solid;
	min-height:500px;
}

div.graphForms div.formColumn {
	float:left;
}

#form hr { color:#06c;}

#y_2, #x_var
{
	border:1px #06c solid;
	width:210px;
	padding:4px;
	margin-top:10px;
}

#form_left {
	padding:4px;
	background-color:#fff;
	width:220px;
	height:auto;
	margin-bottom:10px;
}

#form_center {
	padding:4px;
	background-color:#fff;
	width:230px;
	height:400px;
}

#form_right {
	padding:4px;
	background-color:#fff;
	height:400px;
	width:230px;
} 

div.ct_depths, div.yct_depths, div.x_depths, div.y2_depths, div.y3_depths, div.y4_depths {
	background-color:#efecca;
	border:1px solid #a7a37e;
	margin-top:3px;
	padding:1px;
	font-size:0.8em;
}

div.x_axis
{
	border:1px solid #a7a37e;
	padding:2px;
	width:230px;
}

div.closeButton {
	border:1px #000 solid;
	text-align:center;
	background-color:#a99;
	padding:2px;
	bottom:0px;
	width:36px;
	left:0px;
}

div.closeButton:hover {
	background-color:#F33;
}

img.centeredImg {
	
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/* CSS for the Boxes on the Latest Readings Page */

div.readingBox
{
	background-color:#fff;
	width:473px;
	margin-bottom:5px;
	height:240px; 
	padding:1px;
	text-align:center;	
}

div.readingBox img.center
{
	display:block;
	margin-left:auto;
	margin-right:auto;
}
div.readingBox p.latestReading
{
	background-color:#fff;
}

/* CSS for the buoy diagram */

div.bdinst
{
	z-index:1;
	display:none;
	position:absolute;
}

div.bdinfo
{
	z-index:1;
	display:none;
	padding-left:4px;
}

div.bdinfowrapper
{
	float:right;
	width:350px;
}


div.instcontainer
{
	position:relative;
	float:left;
	width:auto;
	border-top:1px solid #002f2f;
}

div.instcontainer img
{
	border:0;
}

div.menu
{
	float:left;
	position:relative;
}

div.menu ul li
{
	list-style:none;
	margin:0.5em;
}

div.instcontainer div.menu
{
	border-bottom:1px solid #000;
	max-height:20px;
	background-color:#000;
	color:#fff;
	z-index:3;
}

div.instcontainer img.mapper
{
	z-index:2;
	clear:left;
	float:left; 
	display:block; 
	position:relative;
}

div.instcontainer div.bdmenus
{
		position:relative;
		float:left;
		border-bottom:1px solid #000;
		max-height:20px;
		background-color:#000;
		color:#fff;
		z-index:3;
		display:none;
}


div.instcontainer div.menu ul li
{
	list-style:none;
	font-size:0.8em;
	margin:2px;
	padding:1px;
	float:left;
	width:auto;
	border:1px solid #046380;
}

div.instcontainer div.bdmenus ul li
{
	list-style:none;
	font-size:0.8em;
	margin:2px;
	padding:1px;
	float:left;
	width:auto;
	border:1px solid #046380;
}

div.instcontainer div.menu ul li a
{
	color:#FFF;
	background-color:#000;
	text-decoration:none;
}
div.instcontainer div.menu ul li:hover
{	
	background-color:#046380;
}

div.instcontainer div.bdmenus ul li:hover
{	
	background-color:#046380;
}

div.instcontainer div.menu ul li:hover a
{
	color:#FFF;
	background-color:#046380;
}

div.instcontainer div.bdmenus ul li:hover a
{
	color:#FFF;
	background-color:#046380;
}


div.instcontainer div.menu ul
{
	margin:0;
	padding:0;
}

div.instcontainer div.bdmenus ul
{
	margin:0;
	padding:0;
}

p.latestReading
{
	font-size:0.9em;
	color:black;
	background-color:#ccc;
	padding:0.2em;
}

p.publication
{
	font-size:0.7em;
}

/* Conditions box on the main page */

.conditions {width:360px; border:1px solid #002f2f; padding:0.7em;}
.conditions th { background-color:#ddd; border:1px solid #002f2f; margin-bottom:0.2em;}
.conditions td { padding:0.1em;}
.conditions td.header {color:#888;}
/* Diagrams on Vessel and Buoy Site and MODIS */

div.diagramContainer
{
	width:auto;
	height:auto;
	border:1px solid #002f2f;
	margin:auto;
	padding:2px;
	margin-top:5px;
	margin-left:0;
	padding-left:0;
	color:#000;
}

div.diagramContainer div.menu
{ 
	width:140px;
	height:100% auto;
	font-size:1.1em;
	margin-top:0.7em;
}

div.diagramContainer div.menu ul
{
	padding-left:0;
}
div.diagramContainer div.menu ul li
{ 
	list-style-type: none !important; 
	float:left;
	display:inline;
	margin:0.3em;
	padding:0.2em;
	border:1px solid #555;
	width:100%;
}

div.diagramContainer div.menu ul li:hover
{ 
	background-color:#99cccc;
}

div.diagramContainer div.menu ul li a
{
	color:#000;
	padding:0.2em;
}

div.diagramContainer div.menu ul li a:hover
{
	padding:0.2em;
}

div.diagramBody
{
	display:block;
	width:auto;
	height: 100% auto;
}

div.diagramBody div.figure
{
	display:none;
}

div.figImage img
{
	width:520px;
	height:auto;
	float:right;
}

div.figText
{
	clear:both;
	color:#333;
	background-color:#fff;
	padding:0.4em;
	border-top:2px solid #000;
	text-align:justify;
}

div.buoyBackground
{
	background-image:url(images/buoy-background.jpg);
	background-position:right;
	background-repeat:no-repeat;
}

div.researcher
{
	padding:5px;	
	clear:right;
	height:auto;
	width:100% auto;
}

.selected
{
 	background-color:#fff !important;
}

.selected a
{
	color:red;
}

div.diagramContainer div.menu ul li.selected a
{
	color:red !important;
	
}

div.diagramContainer div.menu ul li.selected:hover
{
	background-color:#ffccaa !important;
}

div.button
{
	float:left;
	border:1px solid #002f2f;
	border-bottom:none;
	margin:3px;
	padding:3px;
	margin-bottom:0;
	background-color:#efefef;
}

div.button:hover
{
	float:left;
	border:1px solid #002f2f;
	border-bottom:none;
	margin:3px;
	padding:3px;
	margin-bottom:0;
	background-color:#ccc;
}

div.button a
{
	text-decoration:none;
}