/* position.css is first; style files combined 2/17/2012 
first position.css, then leftNav.css, then main.css */

html {
		margin: 0px;
		padding: 0px;
		color: #000;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 76%;
	/* background-color: #F2EECA; */
	background-color: #E9F3FC;
	color: #000;
	min-width: 97%;
	/* zoom is for stupid IE bugs */
	zoom: 1;
}

#wrap {
	background: #fff;
	margin: 1.5em auto 4em auto !important;
	width: 93%;
	min-width: 880px;
	max-width: 2400px;
}

#wrap div.outline {
	border-radius: 6px;
	border: 1px solid #666;
	box-shadow: 0 0 9px 9px #bbb;
}

#header {
	background: #fff;
	border-bottom: 1px solid #cbcbcb;
	padding: 0px;
	margin: 0px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	zoom: 1;
}

div#header div {
	width: 885px !important; 
	display: table;
}

div#header div img#STARlogo {
	float: left;
	border-top-left-radius: 5px;
}

div#header div img#NESDISlogo {
	float: left;
	padding-right: 5px;
	padding-top: 6px;
}

/* #headerNew added 7-3-2013 LKB */

#headerNew {
	padding: 0px !important;
	margin: 0px !important;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	width: 948px;
	height: 109px; 
	/* height: 191px; restore after shutdown */
	background: #fff;
	overflow: hidden; 
}

#headerNewStretchy {
	padding: 0px !important;
	margin: 0px !important;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	min-width: 948px;
	height: 109px; 
	background: #000 url(../images/banner/stretchy/STARBannerStretchyRight.jpg) top right no-repeat;
	overflow: hidden; 
}

div#topLinks, div#topLinks2 {
	float: right;
	padding-right: 10px;
	color: #fff;
	/* margin-top: -20px; */
	font-weight: bold;
	font-size: 1em;
	text-shadow: 4px 4px 5px #2D2D2D;
 /* added 3-26-2014 next 3 lines */
 	margin-top: -23px;
	text-align: right;
	height: 30px;
}

div#topLinks2 {
 	margin-top: -25px;
 	width: 400px;
}

div#topLinks2 div {
	float: right; 
	margin-bottom: 2px;
	display: inline-block;
	margin-left: 3px;
}

#topLinks a:link, #topLinks a:visited {
	color: #fff;
	text-decoration: none;
}

#topLinks a:hover, #topLinks a:active {
	color: #ff0000;
}

#topLinks2 a:link, #topLinks2 a:visited {
	color: #fff;
	text-decoration: none;
}

#topLinks2 a:hover, #topLinks2 a:active {
	color: #ff0000;
}

/* styles for the version of search that is displayed on full width pages */

#main {
	margin-left: 200px !important;
	padding: 0px;
}

#mainNoNav {
	margin: 0px !important;
	padding: 0px;
}

/* the class below exists to separate #main from the div carrying the padding. */
/* mainNoNav is the version for a page that has no navigation panel which is therefore full width */

#main div.mainInner, #mainNoNav div.mainInner {
	padding: 12px !important;
	zoom: 1;
}

/* these next three styles are to prevent overly wide page elements
 from breaking the layout.  
Other elements may be added, but the worst offenders are typically these three */

html>body div.mainInner img {
	max-width: 100%;
	height: auto;
}

html>body div.mainInner div {
	max-width: 100%;
	height: auto;
}

html>body div.mainInner iframe {
	max-width: 100%;
	height: auto;
}

/* leftNav is where NavDiv is rendered */

#leftNav {
	width: 200px !important;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
}

#navContainer {
	float: left;
	width: 200px !important;
}

#footer {
	clear: both;
}

#skipNav {
	position: absolute !important;
	top: 5.0em !important;
	left: 55em !important;
	margin: 0px;
	padding: 0px;
	width: 13em;
	height: 2em;
	font-weight: bold;
	display: block !important;
}

/* trying to fix bad IE6 behavior */
* html .leftCol pre, * html .rightCol pre {
	position: relative;
}

* html #navContainer, * html .leftCol, * html .rightCol {
margin-right: -3px;
}

* html .leftCol, * html .rightCol {
overflow-x: hidden;
}

div#searchBox {
	border-top: 1px solid #CECBA8;
	border-right: 1px solid #CECBA8;
	border-bottom: 1px solid #CECBA8;
	background-color: #FBF7D3;
	margin-top: 2px;
	width: 199px;
	display: block !important;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

div#searchBox div {
	padding: 4px 5px 4px 5px;
}

div#searchBox fieldset, div#searchBoxPlain fieldset {
	padding: 0px;
	border: 0px;
	margin: 0px;
}

div#searchBox h3 {
	font-size: 1.1em;
	font-weight: bold;
	margin: 1px 2px 2px 1px;
}

label#searchlbl {
	font-weight: bold;
	color: #444;
}

div#searchBox input#query-field {
	width: 140px !important;
	color: #444;
}

div#searchBox input#Go {
	width: 3em; 
	padding: 0px;
	margin: 0px;
	font-size: 10px; 
	font-weight: bold;
}

div#searchBox p {
	text-align: center;
	font-weight: bold;
	margin: 2px;
}
/* ********** */

div#searchBoxPlain {
	border: 0px solid #fff;
	background-color: transparent;
	margin-top: 2px;
	width: 185px;
	display: block !important;
}

div#searchBoxPlain div {
	padding: 0px;
}

div#searchBoxPlain h3 {
	font-size: 1em;
	font-weight: bold;
	margin: 1px 2px 2px 1px;
}

div#searchBoxPlain label#searchlbl {
	font-weight: bold;
	color: #444;
	font-size: 11px;
}

div#searchBoxPlain input#query-field {
	width: 140px !important;
	color: #444;
	font-size: 11px;
}

div#searchBoxPlain input#Go {
	width: 3em; 
	padding: 0px;
	margin: 0px;
	font-size: 10px; 
	font-weight: bold;
}

div#searchBoxPlain p {
	text-align: center;
	font-weight: bold;
	margin: 2px;
}

/*  searchBoxPlainStretchy is for use in headerNewStretchySearch.inc 3-26-2014 */

div#searchBoxPlainStretchy {
	border: 0px solid #fff;
	background-color: transparent;
	margin-top: 0px;
	width: 14em;
	display: block !important;
	white-space: nowrap;
}

div#searchBoxPlainStretchy div {
	padding: 0px;
}

div#searchBoxPlainStretchy label#searchlbl {
	font-weight: bold;
	color: #444;
	font-size: 1em;
}

div#searchBoxPlainStretchy input#query-field {
	width: 11em !important;
	color: #444;
	font-size: 0.8em;
}

div#searchBoxPlainStretchy input#Go {
	width: 2.5em; 
	padding: 0px;
	margin: 0px;
	font-size: 0.9em; 
	font-weight: bold;
}

/* end of searchBoxPlainStretchy */

/* End of position.css ---- START of leftNav.css */

div#leftNav ul {
	margin: 2px 0px 0px 0px;
	padding: 4px 2px 4px 3px;
	border-top: 1px solid #a5b2d5;
	border-right: 1px solid #a5b2d5;
	border-bottom: 1px solid #a5b2d5;
	/* LKB edits next line */
	/* background: url(../images/styleImages/navBkgdBevel5.gif) no-repeat top left !important; */

	background-color: #rgba(204,223,253,1);
background: -moz-linear-gradient(left, rgba(204,223,253,1) 0%, rgba(209,226,252,1) 56%, rgba(234,242,255,1) 86%, rgba(243,248,254,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(204,223,253,1)), color-stop(56%, rgba(209,226,252,1)), color-stop(86%, rgba(234,242,255,1)), color-stop(100%, rgba(243,248,254,1)));
background: -webkit-linear-gradient(left, rgba(204,223,253,1) 0%, rgba(209,226,252,1) 56%, rgba(234,242,255,1) 86%, rgba(243,248,254,1) 100%);
background: -o-linear-gradient(left, rgba(204,223,253,1) 0%, rgba(209,226,252,1) 56%, rgba(234,242,255,1) 86%, rgba(243,248,254,1) 100%);
background: -ms-linear-gradient(left, rgba(204,223,253,1) 0%, rgba(209,226,252,1) 56%, rgba(234,242,255,1) 86%, rgba(243,248,254,1) 100%);
background: linear-gradient(to right, rgba(204,223,253,1) 0%, rgba(209,226,252,1) 56%, rgba(234,242,255,1) 86%, rgba(243,248,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccdffd', endColorstr='#f3f8fe', GradientType=1 );

	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

div#leftNav ul li {
	list-style-type: none;
	background: none !important;
/*	padding: 1px 4px 0px 12px; */
	padding: 1px 4px 0px 6px;
	margin: 0px;
	line-height: 125%;
}

div#leftNav ul li ul {
	margin: 1px 0px 0px 0px;
	padding: 0px;
	border-top: 0px solid #A5B09C;
	border-bottom: 0px solid #A5B09C;
	border-right: 0px solid #A5B09C;
	background: none !important;
}

div#leftNav ul li ul li {
	background: url(../images/styleImages/navBlueBullet7.gif) no-repeat top left !important;
	padding: 1px 3px 1px 9px;
	margin: 0px;
	line-height: 115%;
	list-style-type: none;
}

div#leftNav ul li a {
	/* smaller - 2/17/2012  1 em not 1.1 */
	font-size: 1em;
}

div#leftNav ul li ul li a {
	font-size: 0.9em;
}

div#leftNav ul li a:link, div#leftNav ul li a:visited {
	color: #02247D;
	font-weight: bold;
	text-decoration: none;
}

div#leftNav ul li a:focus, div#leftNav ul li a:hover, div#leftNav ul li a:active {
	color: #93052A;
	font-weight: bold;
	text-decoration: underline;
}

.detailContainer {

}

.showDetailContainer {
	display: block !important;
	list-style-type: none;
	background-color: #6886d3 !important;
}

ul.showDetailContainer li ul li {
	display: block !important;
	list-style-type: none;
}

.showDetailContainer ul, .showDetailContainer ul li ul {
	/* background-color: #6886d3; !important */
}

.showDetailContainer ul li, .showDetailContainer ul li ul li {
	list-style-type: none;
}

a#activeLink:link, a#activeLink:visited, a#activeLink:focus, a#activeLink:hover, a#activeLink:active  {
	color: #93052A !important;
	font-weight: bold;
	text-decoration: underline !important;
}

/*AQ stuff for 'fully expanded' nav display */

div.expanded ul li ul.detailContainer {
	display: block !important;
}

div.expanded ul li ul.detailContainer li ul.detailContainer {
	display: block !important;
}

div#leftNav strong, div.expanded strong {
	font-weight: bold;
	font-size: 1.1em;
	color: #02247D;
}
 
/* end of leftNav.css --- start of main.css */

/* CSS Document Plain */
/*  styles for unspecified tags *************************/

form {
	margin: 0px;
	padding: 0px;
}

a:link {
	color: #536BA8;
}

a:visited {
	color: #616161;
}

a:focus, a:hover, a:active {
	text-decoration: underline;
	color: #93052A;
	text-decoration: none;
}

a img {
	border: 0px;
}	

td {
	vertical-align: top;
}

acronym {
	border-bottom: dashed 1px #666 !important;
	padding-bottom: 0px;
}

/* am adding this 'unclassed' version of the */
/* bullet style to ease implementation. */

ul {
	margin: 5px 0px 0px 12px;
	padding: 0px;
} 

ul li {
	list-style-type: none;
	background-image: url(../images/styleImages/styleBkgdSprite.png);
	background-position: 0px -207px;
	background-repeat: no-repeat;
	margin: 0px 0px 12px 0px;
	padding: 1px 0px 0px 10px;
	line-height: 135%;
}

ul li ul {
	margin: 0px 0px 4px 6px;
	padding: 0px;
}

ul li ul li {
	list-style-type: none;
	background-image: url(../images/styleImages/styleBkgdSprite.png);
	background-position: 0px -207px;
	background-repeat: no-repeat;
	margin: 8px 20px 0px 0px;
	padding: 0px 0px 0px 10px;
	line-height: 135%;
}

ul li h3 {
	padding-top: 0px;
	margin-top: 0px !important;
}

ul li h4 {
	font-size: 100%;
	font-weight: bold;
	color: #2F4C3A !important;
	margin: 8px 0px 0px 0px;
	text-align: left !important;
	padding-bottom: 0px;
}

ul li p {
	padding: 0px;
	margin: 3px 0px 3px 0px;
}

ol li {
	margin-top: 8px;
	line-height: 140%;
}

hr {
	padding: 0px;
	border: 0px;
	color: #666;
	background-color: #666;
	height: 1px;
	text-align: left;
}

ul.tighter li {
	margin: 0px 0px 5px 0px;
}

ul.noMarker {
	margin: 5px 0px 0px 6px;
	padding: 0px;
} 

ul.noMarker li {
	margin-top: 6px;
	margin-right: 10px;
	list-style-type: none;
	padding-left: 6px;
	background-image: none;
}

/* tt is for code blocks! */

tt, pre {
		padding: 0px;
		font-family: courier new, courier, monospace;
		margin: 10px 5px 10px 25px;
		font-size: 1.2em;
		display: block;
		color: #514A37;
		line-height: 1.3em;
}

/* tt.IL is for 'inline' code blocks */

tt.IL {
		margin: 0px;
		display: inline !important;
		font-weight: bold;
}

/* presentation styles for the footer content - footer styles edited 2/17/2012 */

div#footer {
	font-size: 0.9em;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	border-top: 1px solid #666;
background: rgba(215,215,215,1);
background: -moz-linear-gradient(top, rgba(215,215,215,1) 0%, rgba(150,150,150,1) 53%, rgba(90,90,90,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(215,215,215,1)), color-stop(53%, rgba(150,150,150,1)), color-stop(100%, rgba(90,90,90,1)));
background: -webkit-linear-gradient(top, rgba(215,215,215,1) 0%, rgba(150,150,150,1) 53%, rgba(90,90,90,1) 100%);
background: -o-linear-gradient(top, rgba(215,215,215,1) 0%, rgba(150,150,150,1) 53%, rgba(90,90,90,1) 100%);
background: -ms-linear-gradient(top, rgba(215,215,215,1) 0%, rgba(150,150,150,1) 53%, rgba(90,90,90,1) 100%);
background: linear-gradient(to bottom, rgba(215,215,215,1) 0%, rgba(150,150,150,1) 53%, rgba(90,90,90,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#5a5a5a', GradientType=0 );
/*	background: url(http://www.star.nesdis.noaa.gov/star/global/images/styleImages/styleBkgdSprite.png) top left repeat-x #727272 !important; */
	color: #fff;
	font-weight: bold;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	height: 58px; /* new 2/17 */
}

div#footer div.left {
	float: left;
	width: 80%;
	padding: 6px 12px;
	color: #fff !important;
	line-height: 200%;
}

div#footer div.right {
	text-align: right;
	padding: 12px 12px 0px 0px;
	width: 15%;
	float: right;
}

div#footer div.right a img {
	padding: 5px 0px 6px 8px;
  line-height: 100%;
  font-size: 0.9em;
  height: 32px;
  width: 88px;
  float: right;
}

div#bottomBanner div.right img#valid {
	padding: 5px 0px 8px 8px;
	line-height: 100%; 
	font-size: 0.9em;
	float: right;
	border: 0px solid #fff;
}

div#footer div.left a:link, div#footer div.left a:visited {
	color: #fff !important;
}

/* end of presentation styles for the footer content */

.stylered {
	font-size: 0.8em;
	color: #FF0000;
}

.redBold {
	color: #FF0000;
	font-weight: bold;
}

/* leftNav styles used to sit here */

p {
	font-size: 1em;
	line-height: 150%;
	margin: 6px 0px 6px 0px;
}

h1 {
	color: #536BA8;
	margin-top: 2px;
	padding: 0px;
	font-size: 1.45em;
	letter-spacing: -0.03em;
	font-weight: bold;
	text-align: left;
	}

h2 {
	font-size: 120%;
	font-weight: bold;
	color: #282888;
	margin: 12px 0px 0px 0px;
}

h3 {
	font-size: 110%;
	font-weight: bold;
	color: #000;
	margin: 16px 0px 0px 0px;
}

h4 {
	font-size: 100%;
	font-weight: bold;
	color: #666;
	margin: 6px 0px 0px 0px;
	text-align: left;
}

h5 {
	font-size: 100%;
	font-weight: bold;
	color: #000;
	margin: 8px 0px 0px 0px;
	text-align: center;
	/* this is used as a figure caption! */
}

div.clearing {
	clear: both;
	font-size: 0px;
	padding: 0px;
	margin: 0px;
	height: 0px !important;
}

dl.acrolist {
	margin-top: 5px;
	padding: 3px 3px 3px 4px;
}

dl.acrolist dt {
	font-weight: bold;
	color: #333;
}

dl.acrolist dd {
	margin-left: 5px;
	margin-bottom: 6px;
}

table.jobGrid td h3, table.jobGrid th h3 {
	font-size: 110%;
	font-weight: bold;
	color: #536BA8;
	margin: 2px;
}

table.tableGrid, table.jobGrid, table#fred {
	border-top: 1px solid #666;
	border-left: 1px solid #666;
	width: 100%;
}

table.jobGrid caption {
	font-size: 120%;
	font-weight: bold;
	color: #282888;
	margin: 20px 0px 0px 0px;
	text-align: center;
}

table.tableGrid td, table.jobGrid td, table.tableGrid th, table#fred td, table#fred th {
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	padding: 6px;
	border-spacing: 0px;
	/* border-collapse: collapse; */
}

table.tableGrid th {
	background-color: #efefef;
}

table.jobGrid caption {
	font-weight: bold;
	font-size: 1.2em;
	color: #93052A;
	margin-top: 20px;
	padding-bottom: 4px;
}

table.jobGrid th {
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	padding: 6px;
	text-align: left;
	vertical-align: bottom;
	background-color: #FCFCE5;
}

ul.breadcrumbs {
	padding: 0px 2px 6px 2px;
	margin: 0px 0px 10px 0px;
	border-bottom: 1px solid #666;
	}
	
ul.breadcrumbs li {
	list-style-type: disc;
	color: #536BA8;
	margin: 0px;
	font-weight: bold;
	font-size: 0.9em;
	display: inline;
	padding: 1px;
	background-image: none;
}	

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

h3.noscriptWarning {
	padding: 6px;
	margin: 6px 2px 6px 2px;
	border: 1px solid red;
	color: red;
	background-color: #fff;
	font-size: 1em;
	line-height: 130%;
	text-align: center;
}

.smaller_text, p.smaller_text {
	font-size: 0.8em !important;
	line-height: 1.1em !important;
}

div.AQthumbnail {
	border: 1px solid #666;
	margin-right: 12px;
	margin-bottom: 20px;
	float: left;
	width: 250px;
	text-align: center;
}

div.AQthumbnail img {
	border: 1px solid #666;
	margin-bottom: 10px;
}

table.calendarGrid {
	border-top: 1px solid #666;
	border-left: 1px solid #666;
}

table.calendarGrid td {
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	background-color: #fff;
	padding: 3px 1px 3px 1px;
	text-align: center;
	width: 2em;
}

table.calendarGrid th {
	border-bottom: 2px solid navy;
	border-right: 1px solid #666;
	background-color: #fdffed;
	padding: 3px 1px 3px 1px;
	text-align: center;
}

table.calendarGrid td a:link, table.calendarGrid td a:visited, table.calendarGrid td a:active {
	font-weight: bold;
}

h4#disclaimer {
	font-size: 0.9em;
	line-height: 135%;
	padding-bottom: 3px;
}

table#directories tr td:first-child {
	font-size: 1.3em;
	font-weight: bold;
	color: #666;
}

/* when we want a 2 column layout in the body of
 the page, use leftCol and rightCol: */

div.leftCol {
	float: left;
	width: 49%;
	word-wrap: break-word;
}
	
div.rightCol {
	float: left;
	width: 49%;
	margin-left: 2%;
	word-wrap: break-word;
}

.noticeBox {
	border: 1px solid #CECBA8;
	background-color: #FBF7D3;
	margin: 2px 0px;
	padding: 6px 10px 12px 12px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

/* styles for making pretty striped orange tables */

	div.talk2 {
	padding: 6px;
	border: 1px solid #F1C52B;
	border-radius: 5px;
	box-shadow: 5px 5px 5px #989898;
}

table.talk2 {
	border-width: 1px 0px 0px 1px;
	border-color: #F1C52B !important; /* #FBD64E; */
	border-style: solid;
	background-color: #fff;
	padding: 3px;
	border-collapse: collapse; 
	width: 100%;
}

table.talk2 th {
	border-width: 0px 1px 0px 0px;
	border-color: #FBD64E  !important;
	border-style: solid;	
	color: #444;
	text-align: center;
	background-color: #FFFADF;
}

table.talk2 caption {
	font-weight: bold;
	text-align: left;
	color: #282888;
	font-size: 1.2em;
	margin-top: 0px;
	padding: 5px;
	text-align: center;
}

table.talk2 td, table.talk2 th {
	padding: 8px;
	border-bottom: 1px solid #F1C52B !important;
	border-right: 1px solid #F1C52B !important; 
}

table.talk2 th h3, table.talk2 td h3 {
	padding: 0px !important;
	margin: 0px !important;
	color: #282888;
	text-align: left !important;
}

table.talk2 td span {
	color: #AD1117;
	font-size: 1.15em;
	font-weight: bold;
	background-color: inherit;
}	

.noticeBox {
	border: 1px solid #CECBA8;
	background-color: #FBF7D3;
	margin: 2px 0px;
	padding: 6px 10px 12px 12px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.noticeBox#News {
	background: #FBF7D3 url('../images/styleImages/foldedCorner.gif') top right no-repeat;
	border-left: 1px solid #CECBA8;
	border-bottom: 1px solid #CECBA8;
	border-top: 0px solid #CECBA8;
	border-right: 0px solid #CECBA8;
}	

.noticeBox#News h1, .noticeBox#News h2 {
	margin-right: 30px;
}

/* end of main.css */