/*
-----------------------------------------------
Ocean Carbon and Biogeochemistry style sheet
version:  16 June 2005
Copyright Lori Dolby, some rights reserved
If you re-use this stylesheet in full or in part please credit author.

Modification history:
070209.clc.  begin customizations for OCB site.  
070214.clc.  using this css with active OCB server.
----------------------------------------------- */


/* Basic Structure */
	body {
		min-width: 610px;
		margin: 20px;
		background: #fff url("../images/body_back.jpg") repeat-x;
		font: 12pt Verdana,Sans-serif;
		color: #000;
	}

	/* max-width in em units prevents column from being too wide too read on screen */
	#container {
		max-width: 70em; 
		margin: 0 auto;
		
	}
	
	#mBody {
		clear: both;
		padding: 0 0 1em 0;
	}

	#side {
		float: left;
		width: 23%;
		margin-bottom: 1em;
	}

	#mainContent {
		margin-left: 25%;
		position: relative;
		
	}
	.nomenu #mainContent {
		margin-left: 0;
	}
	.bodyleft {
		margin-left: 25% ! important
	}
	#mainContent.right {
		float: left;
		width: 62%;
		
		margin-bottom: 1em;
		margin-left: 0;
	}
	
	#side.right {
		float: none;
		width: auto;
		margin-left: 65%;

	}
	
	/* 070214. use this when content is long, and NO Related Info column - single column content */
	#mainContent.oneWide {
		margin-left: 15%;
		margin-right: 15%;
		position: relative;
		width: auto;
	}
	
	/* 070214. use this for full page width - single column content */
	#mainContent.fullWide {
		margin-left: 0%;
		margin-right: 0%;
		position: relative;
		width: auto;
	}
	
	/**  Related Info styles  **/
	
	.side h6{
		padding: 0px 0px 20px 0px;
	}
	
	/* max-width in em units prevents column from being too wide too read on screen */
	/* 23 em is about 1/3 of main column at 70 em; and about 225 px at em 1 */
	/* could not find a setting that worked even for my 3 instances of Firefox */
	/* setting to absolute value of 225px gave the best results on the browsers I checked */
	#relatedInfo {
		float: none;
		width: auto;
		margin: 0px;
		margin-left: 65%;
		max-width: 225px;
		padding: 0px 0px 10px 0px;
	}
	
	#relatedInfo h2 {
		font-weight: bold;
	}
	
	/*  border: #FF0000 solid thin;  */
	#relatedInfo ul {
		float: none;
		margin: 0;
		padding: 0;
	}
	
	#relatedInfo li {
		list-style-type: none;
		margin: 5px 0px 5px 0px;
		padding: 10px 10px 10px 5px;
		border-bottom: 1px solid #ccc;
	}
	
	/* using bottom padding to to make sure text doesn't wrap */
	/* messes up the next image for Firefox on linux - too bad */
	/* 	min-height: 30px; not a good idea either */
	#relatedInfo img {
	float : left;
	padding-top : 0px;
	padding-right : 10px;
	padding-bottom : 0px;
	padding-left : 0px;
 	}
	
	#relatedInfo img.imgBlock {
	float : left;
	padding-top : 0px;
	padding-right : 10px;
	padding-bottom : 20px;
	padding-left : 0px;
 	}
	
	#relatedInfo img.pad {
	float : none;
	display : inline; 
	padding-top : 5px;
	padding-right : 0px;
	padding-bottom : 4px;
	padding-left : 0px;
 	}
	
	#relatedInfo img.imgWide {
	float : none;
	clear : right;
	padding-top : 10px;
	padding-right : 10px;
	padding-bottom : 4px;
	padding-left : 0px;
 	}

/** many of these taken from dataSystem.css */	
#data img {
	float : none;
	display : inline; 
	padding-top : 0px;
	padding-right : 0px;
	padding-bottom : 5px;
	padding-left : 0px;
	}

#data h1 {
	text-align: left; 
    font-size: 1.3em;
    font-weight: bold;
	line-height: 1.1em;
    color:#296D94; 
	padding: 0.2em 0em 0.2em 0em;
	margin: 0em 0em .5em 0em;
	}

/* line in same color to match any H titles 
*/
.titleCatSep { border-top: 1px solid;
              padding: .5em 0em 0.1em 0em;
             }

.titleLnTop { border-top: 1px solid;
              padding: 1em 0em 0.2em 0em;
             }

.titleLnBot { border-bottom:  1px solid;
             } 

.line_section_1 { font-family: Verdana, Arial, Helvetica, sans-serif; 
	  font-size: 1.0em; 
	  border-bottom:  1px solid;
	  color: #296D94; 
      }

.subsection-head {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	line-height: 1.2em;
	color: #913E02;
	text-decoration: none;
	font-weight: bold;
}




/* Header */

	#header { margin-bottom: 1em; }
	#header ul {
		margin: 0 0 1em 0;
		padding: 0;
	}
	
	#header li {
		display: inline;
		padding: 0 20px 0 0;
		margin: 0;
		white-space: nowrap;
	}

/* bg originally:  #235981  bottom left repeat-x  */
	#header {
		background: #294460 url("../images/banner_OCB_DMO.png") bottom left no-repeat;
		position: relative;
		min-height: 59px;
		height: 70px;
		padding: 10px 0;
	} 
	
	#ignored {}
	
	#header h1 {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		font-size: 2px;
		background: url("../images/header_tl.gif") no-repeat;
		height: 8px;
		z-index: 140; /* above the UL */
	}
	#header h1 a {
		display: block;
		width: 347px;
		height: 67px;
		background: transparent url("../images/header_logo.gif") no-repeat;
		text-indent: -700em;
		text-decoration: none;
	}
	
	/* orig:  background: url("../images/header_br.gif") no-repeat bottom right;  
	and change to move relative to Search container
	#header #access {
	width: 190px;
	position: absolute;
	bottom: 18px;
	right: 41px;
	height: 40px;
	}
	*/
	/* 	background: url("../images/header_br.gif") no-repeat bottom right; */
	#header #access {
	position: absolute;
	top: 20px;
	right: 32px;
	padding: 5px 10px 0 0;
	margin: 0; /* need for IE Mac */
	text-align: right; /* need for IE Mac */
	white-space: nowrap; /* for Opera */
	width: 204px;
	}
	
	#header #access p {
	margin: 2px 2px 2px 2px;
	color: #fff; font-size: 85%;
	}
	#header #access  a {
	color: #fff; font-size: 85%;
	}
	#access a:hover {
	color: #fff; font-size: 85%;
	text-decoration: underline;
	}
	
	#header ul {
		width: 628px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		margin: 0 0 0 8px;
		padding: 0 15px 0 0;
		list-style: none;
		
		z-index: 90; /* below the H1 */
	}
	#header li {
		float: left;
		background: transparent url("../images/header_tab.gif") 100% -600px no-repeat;
		padding: 0 6px 0 0;
		margin: 0 3px 0 0;
		border-bottom: 1px solid #435C6F;
	}
	#header ul a {
		float: left;
		display: block;
		padding: 4px 4px 4px 10px;
		background: transparent url("../images/header_tab.gif") 0% -600px no-repeat;
		font-weight: bold;
		color: #fff;
		text-decoration: none;
		
	}
	#header ul li:hover a { background-position: 0% -400px; }
	#header ul li:hover { background-position: 100% -400px; }
	
	/* a defn in each section for each top nav tab 
	and body tag gets different body class depeding on project/area of site
	
	menu_home
	menu_data
	menu_cariaco
	menu_eddies
	menu_medflux
	menu_sofex
	menu_vertigo
	menu_workshops
	*/
	
	body.sectionHome li#menu_home a,
	body.sectionData li#menu_data a,
	body.sectionCariaco li#menu_cariaco a,
	body.sectionEddies li#menu_eddies a,
	body.sectionMedFlux li#menu_medflux a,
	body.sectionSofex li#menu_sofex a, 
	body.sectionVertigo li#menu_vertigo a,
	body.sectionWorkshops li#menu_workshops a 
	{
		background-position: 0% -200px;
		color: #036;
	}
	
	body.sectionHome li#menu_home, 
	body.sectionData li#menu_data, 
	body.sectionCariaco li#menu_cariaco, 
	body.sectionEddies li#menu_eddies, 
	body.sectionMedFlux li#menu_medflux, 
	body.sectionSofex li#menu_sofex,  
	body.sectionVertigo li#menu_vertigo, 
	body.sectionWorkshops li#menu_workshops 
	{
		background-position: 100% -200px;
		border-bottom: 1px solid #fff;
	}
	
	body.sectionHome li#menu_home:hover,
	body.sectionData li#menu_data:hover,  
	body.sectionCariaco li#menu_cariaco:hover,  
	body.sectionEddies li#menu_eddies:hover,  
	body.sectionMedFlux li#menu_medflux:hover,  
	body.sectionSofex li#menu_sofex:hover,   
	body.sectionVertigo li#menu_vertigo:hover,  
	body.sectionWorkshops li#menu_workshops:hover 
	{
		background-position: 100% 0%;
	}
	
	body.sectionHome li#menu_home:hover a,
	body.sectionData li#menu_data:hover a,  
	body.sectionCariaco li#menu_cariaco:hover a,  
	body.sectionEddies li#menu_eddies:hover a,  
	body.sectionMedFlux li#menu_medflux:hover a,  
	body.sectionSofex li#menu_sofex:hover a,   
	body.sectionVertigo li#menu_vertigo:hover a,  
	body.sectionWorkshops li#menu_workshops:hover a 
	{
		background-position: 0% 0%;
		color: #333;
	}
	
/* Search Field */

	#header form {
		position: absolute;
		top: 0;
		right: 0;
		padding: 6px 10px 0 0;
		background: url("../images/header_tr.gif") no-repeat top right;
		margin: 0; /* need for IE Mac */
		text-align: right; /* need for IE Mac */
		white-space: nowrap; /* for Opera */
	}
	#header form label { color: #fff; font-size: 85%; }
	#header form input { font-size: 85%; }
	
	#header form #submit {
		font-size: 85%;
		background: #6A7389;
		color: #fff;
		padding: 1px 4px;
		border-right: 1px solid #283043;
		border-bottom: 1px solid #283043;
		border-top: 1px solid #9097A2;
		border-left: 1px solid #9097A2;
	}
	
	#header form #q {
		width: 170px;
		font-size: 85%;
		border:	1px solid #9097A2;
		background: #D9DBE1;
		padding: 2px;
	}
	#header form #q:hover, #header form #q:focus {
		background: #fff;
	}

/* S U B  N A V */

#nav-section {
	font-size: 95%;
	clear:both;
	margin: 0;
	padding: 0 0 8px 0;
	min-height: 20px;
	
}

#nav-section ul {
	height: 100%;
	margin: 5px 0 8px 0;
	padding: 10px;
	
}

#nav-section li {
	list-style-type: none;
	float: left;
	display: inline;
	margin: 0 5px 1px 0px;
	background: transparent url("../images/bullet_red.gif") no-repeat 4px 50%;
	padding-left: 12px;
}

#nav-section a:link, #nav-section a:visited {
	text-decoration: underline;
	color: #003366;
}
#nav-section a:hover {
	text-decoration: underline;
	color:#990000;
}
#nav-section .youarehere {
color: #930;
text-decoration: none;
font-weight: bold;
}


/*accessibility tweaks*/
	.skipLink {
		position: absolute;
		left: -999px;
		width: 990px;
	}
	hr.hide {
		display: none;
	}	


/* Footer */

	#footer {
	clear: both;
		border-top: 1px solid #999;
		margin: 0.5em 0 0 0;
		padding:  0.5em 0 0 0;
		text-align: center;
	}
	
	#footer ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#footer li {
		display: inline;
	}
	
	#footer span,#footer a {
		white-space: nowrap;
		padding: 0 1em;
	}
	
	#footer p span,#footer p a {
		white-space: nowrap;
		padding: 0 0.3em;
	}
	
	#footer span a {
		padding: 0;
	}
	
	#footer p,#footer p a {
		color: #666;
	}
	
	#footer p a:hover {
		color: #000;
	}

/* Funding */

	#funding {
		clear: both;
		border-top: 1px solid #999;
		margin: 0.5em 0 0 0;
		padding:  0.5em 0 0 0;
		text-align: center;
	}
	
	#funding ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#funding li {
		display: inline; 
	}
	
	#funding img { 
	padding-top : 0px;
	padding-right : 6px;
	padding-bottom : 0px;
	padding-left : 6px;
	display: inline;
 	}
	
	#funding span,#funding a {
		white-space: nowrap;
		padding: 0 1em;
	}
	
	#funding p span,#funding p a {
		white-space: nowrap;
		padding: 0 0.3em;
	}
	
	#funding span a {
		padding: 0;
	}
	
	#funding p,#funding p a {
		color: #000066;
	}
	
	#funding p a:hover {
		color: #000000;
	}
	
/* end funding agency section */


a img {
	border: 0;
}
form {
	margin: 0;
	display: inline;
}
label, input {
	font-weight: bold;
}


/* Body */


	#mainContent, #side {
		background: transparent;
		line-height: 1.3; /* value other than 'normal' needed for WinIE */
		color: #000;
	}
	

/* Random HTML Styles */

	hr {
		height: 1px;
		background-color: #000;
		color: #000;
		margin: 2em 0;
	}

	

/* General Structure */
    body, td, th, input { /* redundant rules for bad browsers  */
            font-family: verdana, sans-serif;
            font-size: x-small;         
            font-size: small;
    }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}
h1 {
	font-size: 120%;
	color: #955322;
}
h2 {
	font-size: 110%;
	color: #B26C38;
}
h2 a:visited {
	text-decoration: none;
}
h3 {
	border-bottom: 1px solid #000;
	font: bold 14px/14px Verdana, Arial, Times, Helvetica, sans-serif;
	color: #B26C38;
	
	margin: 4px 0 0 0;
	padding: 5px 0 5px 0;
	display: block;
	line-height: 16px;
	}
h4 {
	font-size: 110%;
	color: #666;
}
h5 {
	font-size: 100%;
	color: #955322;
}
h6 {
	color: #EC361D;
	font-size: 100%;
}

p, li, dt, dd {
	font-size: 92%;
}

/* CLC remove 
p {
	line-height: 150%;
}
*/

a:link, a:visited {
	color: #554FA0;
	font-weight: bold;
	
}

	
	
	h1, h2, h3, h4, h5, h6 {
		
		border-bottom: 1px solid #ccc;
		font-family: arial, verdana, sans-serif;
	}
	li h1, li h2, li h3, li h4, li h5, li h6 {
		border: none;
	}

.more {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	font-variant: normal;
	color: #554FA0;
	padding-top: 0px;
	margin-bottom: 1px;
	margin-top: 0px;
}



/* from CLC OCB_styles */

.texthead {
	font-size: 1.1em;  
	font-weight: bold;
    padding: 0.25em 0em 1em 0em;
}

.textb { 
	font-weight: bold; 
}

.text { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1.0em; 
	color: black
}

/*Turns off Borders around Hyperlinked Images*/
img { border : 0px; display : block }

/*Styles Applied to Float Images left or right */
.imgfloatright { float : right; }

.imgfloatleft {
	float : left;
	padding-top : 0px;
	padding-right : 10px;
	padding-bottom : 0px;
	padding-left : 0px;
 }

.byline {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style:italic;
	font-size: 1em;
	font-weight: normal;
	color: #666666;
	margin-top: .3em;
	margin-bottom: 1em;
	line-height: 1em;
}

.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	font-style: normal;
	line-height: 14px;
	text-align: left;
	padding: 0px;
	margin: 0px;
}
p.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	font-style: normal;
	line-height: 14px;
	text-align: left;
	padding: 0px;
	margin: 0px 0px 6px;
}
.caption a:hover {
	color : #006699;
}
p.caption a:hover {
	color : #006699;
	
}
.border {
	border: 1px solid #91B2C8;
	padding: 8px;
		margin: 2px;
}
.noborder {
	margin: 2px 0px;
	padding: 4px 0px;
}
.links {
	background-image:  url(../images/links-bar.gif);
	background-repeat: no-repeat;
}

.files {
	background-image:  url(../images/files-bar.gif);
	background-repeat: no-repeat;
}

.bar {
	background-image:  url(../images/bar.gif);
	background-repeat: no-repeat;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	background-position: left bottom;
	text-align: left;
	text-indent: 5px;
	padding: 2px 2px 0px;
	font-style: normal;
	letter-spacing: .5px;
}

.ocb_subtitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	font-variant: normal;
	color: #336699;
	padding-top: 4px;
	margin-bottom: 6px;
	margin-top: 0px;
}

.subtitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	color: #666666;
	text-decoration: none;
	margin-top: 0px;
	text-transform: uppercase;
	font-variant: normal;
	margin-left: 3px;
}
.subtitle a {
	color: #666666;
	text-decoration: none; }

.subtitle a:hover {
	color: #913E02;
	text-decoration: underline;
	}
	
.subhead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #003366;
	background-color: #E3EAF4;
	display: block;
	padding: 4px 0px 2px 5px;
	border-bottom-style: none;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ccc;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666666;
	margin-top: 20px;
	margin-right: 0px;
}

/* 070216. test different background colors for header bar */
.subhead2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #003366;
	background-color: #DFE4EE;
	display: block;
	padding: 4px 0px 2px 5px;
	border-bottom-style: none;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #ccc;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666666;
	margin-top: 20px;
	margin-right: 0px;
}

.subhead-nomargin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #003366;
	background-color: #E3EAF4;
	display: block;
	padding: 4px 0px 2px 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
	margin-top: 0px;
	margin-right: 0px;
}

.article-head {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 20px;
	color: #B26C38;
	text-decoration: none;
	
}

.article-head a:hover {
	color: #336699;
	text-decoration: underline;
	}


/* end additions from CLC OCB_styles */

	#header h1 { border: 0; }

	h1 { font-size: 160%; font-weight: normal; }
	h2 { font-size: 150%; font-weight: normal; }
	h3 { font-size: 120%; }
	h4 { font-size: 100%; }
	h5 { font-size: 90%; }
	h6 { font-size: 90%; border: 0; }

 .key-point:before {
		line-height: 0.1;
		font-size: 1px;
		background: transparent url("../images/key-point_tr.gif") no-repeat top right;
		margin: -15px -15px 0 -15px;
		height: 15px;
		display: block;
		border: none;
		content: url("../images/key-point_tl.gif");
	}
	.key-point {
		background: #e4ecec url("../images/key-point_back.gif") right repeat-y;
		padding: 15px;
		margin-bottom: 1em;
	}
	.key-point:after {
		display: block;
		clear: both;
		padding-top: 15px;
		line-height: 0.1;
		font-size: 1px;
		content:  url("../images/key-point_bl.gif");
		margin: -15px;
		height: 8px;
		background: transparent url("../images/key-point_br.gif") scroll no-repeat bottom right ;
	}
	
	.key-point h2,  .key-point h4, .key-point h5 {
		border: none;
		margin-top: 0;
	}
	
	.key-point h2 {
		font-weight: bold;
	}
	
	.key-point ul {
		float: none;
		margin: 0;
		padding: 0;
	}
	
	.key-point li { /* border-left: 2px groove #006699; */
		list-style-type: none;
		margin: 5px 0px 0px 0px;
		padding-left: 5px;
		font-family: verdana,helvetica,arial,sans-serif;
		font-size: 0.9em; 
		color: #006699;
	}
	

/* email form elements */

#email_form li {
	list-style-type: none;
	margin: 10px 0px 5px 0px;
	padding: 10px 10px 10px 10px;
	}

#email_form h4 {
	padding: 0px 0px 5px 0px;
	color: #006699;
	}

.OCB_button {
	background-color: #DDD; 
	font-size: 1.2em; 
	color: #006666; 
	font-family: verdana,helvetica,arial,sans-serif;
	border: #006699 thin solid;
	}
			

#info-standards a{
font-size: 10px;
padding: 0;
margin: 2px !important;
font-weight:normal;
text-decoration:underline;
}

/* T A B L E S

-------------------- */ 

table {
	border: 1px solid #CB9974;
	margin: 0;
	padding: 0;
	background-color: #FFF;
}

th {
	color:  #4d5e77;
	background-color: #F6E9DF;
	text-align: left;
	padding: 0.25em;
	font-weight: bold;
}

td {
	border: 1px solid #ECE2DE;
	text-align: left;
	padding: 0.25em;
}
.width10 {
	width: 10%;
}
.width20 {
	width: 20%;
}
.width25 {
	width: 25%;
}
.width30 {
	width: 30%;
}
.width33 {
	width: 33%;
}
.width40 {
	width: 40%;
}
.width50 {

	width: 50%;
}
.width60 {
	width: 60%;
}