/*### General Styles ###*/

bodyx {
	background: #ffffff;
	margin: 0;
	padding: 0;
	font: normal 10pt/16pt Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	text-decoration: none;
	}
	
a img {
	text-decoration: none;
	border: none;
}

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

img {
	margin: 2px;
}

ul {
	margin: 10px 25px 20px 25px;
	list-style-image: url(../imagefiles/bullet_blue.png);
	color: #686762;
	}

ol {
	margin: 10px 25px 20px 25px;
	color: #686762;
	}

ul.bluegreen {
	margin: 10px 25px 20px 25px;
	list-style-image: url(../imagefiles/bullet_redbox.png);
	color: #408682;
}

ul ul {
	margin: 5px 10px 10px 10px;
	list-style: url(none) circle outside;
	}

em {
	font-style: italic;
	font-weight: 200;
	color: #418488;

}

input {
	
	background: #f6e5cd;

}



/*### Topbar ###*/

#topbar {
	position: absolute;
	top: 0px;
	left: 0px;
	background: #3b4c52;
	width: 100%;
	height: 24px;
	min-width: 850px;
	z-index: 100;
	display: inline;
	overflow: hidden;
	}

/*### Topbar_orgs ###*/

#topbar_orgs {
	width: auto;
	_width: 250px;
	float: left;
	margin-right: 3px;

	}
	
#topbar_orgs ul {
	padding-left: 0;
	margin-left: 0;
	color: #fff;
	float: left;
	font-family: arial, helvetica, sans-serif;
	}

#topbar_orgs ul li { 
	display: inline; 
	}

#topbar_orgs ul li a {
	background: url(../images/topbar_buttonOFF.jpg) repeat-y;
	padding: 0.1em 1em;
	color: #fff;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
	}

#topbar_orgs ul li a:hover {
	background: url(../images/topbar_buttonON.jpg) repeat-y;
	color: #fff;
	}
	
#navlist {
	margin: 0px;
	padding: 0px;
}

/*### Topbar_groups ###*/
	

#topbar_groups {
	width: auto;
	height: 19px;
	float: left;
	padding: 3px 2px 0px 10px;
	font: normal normal normal 8pt/10pt verdana, arial, sans-serif;
	color: #fff;
	overflow: hidden;
	}
	
#topbar_groups a {
	font: normal normal normal 8pt/9pt verdana, arial, sans-serif;
	text-decoration: none;
	color: #fff;
	text-align: left;
	padding: 0.1em 0.5em;
	}
	
#topbar_groups a:hover {
	font: normal normal normal 8pt/9pt verdana, arial, sans-serif;
	text-decoration: underline;
	color: #fff;
	text-align: left;
		}
	
#topbar_search {
	width: auto;
	height: 21px;
	margin: 0px 5px 0px 0px;
	padding: 0px;
	font: normal normal normal 8pt/11pt verdana, arial, sans-serif;
	color: #fff;
	float: right;
	}
	
#topbar_search input {
	margin: 0px;
	display: inline;
		}
	
#topbar_search a {
	font: normal normal normal 8pt/9pt verdana, arial, sans-serif;
	text-decoration: none;
	color: #fff;
	margin: 0px;
	}

	
/*### Colorbar ###*/

#colorbar {
	position: absolute;
	top: 24px;
	left: 0px;
	background: url(../imagefiles/colorbar.jpg) repeat-x;
	width: 100%;
	height: 4px;
	margin: 0px;
	padding: 0px;
	}


/*### Header ###*/

#header {
	position: absolute;
	top: 28px;
	left: 0px;
	background: #44ccca url(../imagefiles/header.jpg) no-repeat left;
	width: 100%;
	height: 51px;
	margin: 0px;
	padding: 0px;
	z-index: 50;
	}


/*### Main Navigation ###*/

#mainnav {
	position: absolute;
	top: 79px;
	left: 0px;
	background: url(../images/navbar_gray.jpg) repeat-x;
	width: 100%;
	min-width: 850px;
	height: 22px;
	float: left;
	border-top: 5px solid #eeeeee;
	z-index: 50;
	}

#mainnav ul {
	color: white;
	font-family: arial, helvetica, sans-serif;
	height: 14px;
	list-style: none;
	margin: 0px 0px 0px 70px;
	}

#mainnav a {
	color: #000000;
	text-decoration: none;
	text-align: center;
	height: 14px;
	font-weight: normal;
	}

#mainnav a.current {
	background: #ffffff;
	color: #34abac;
	font-weight: bold;
	}

#mainnav ul li a:hover {
	background: #319fa6;
	color: #fff;
	}

#mainnav ul li ul li {
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}


#nav, #nav ul {
	padding: 0px;
	line-height: 1;
	font: normal normal normal 9pt/11pt verdana, arial, sans-serif;
	margin: 0px;
	}

/*NOTE: Mozilla-based browsers will follow this rule to provide equally distanced main nav buttons */

html>body #nav a {
	display: block;
	width: auto;
	padding: 4px 10px 4px 10px;
}


/*NOTE: IE 6 and earlier will follow this rule and ignore the one above, which is necessary because it requires fixed width buttons for the drop nav to work */

#nav a {
	display: block;
	width: 6.7em;
	padding: 4px 0px 4px 0px;
}


#nav li { 
	float: left;
}

#nav li a.subitem {
	/*background: #498bd0;*/
	background: #79725c;
	color: #fff;
	border-top: 0px;
	border-bottom: 1px solid white;
	height: auto;
	width: 11.4em;
	text-align: left;
	font-size: 9pt;
	font-weight: bold;
}

#nav li ul {
	position: absolute;
	left: -999em;
	background: #498bd0;
	width: 11.4em;

}


#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}



/*### Content Container ###*/

#contentx {
	position: absolute;
	top: 135px;
	left: 0px;
	width: 100%;
	height: auto;
	min-width: 850px;
	min-height: 350px;
	margin: 0px 0px 30px 0px;
	padding: 0px;
	z-index: 0;
	}

/*### Mouseover Popup Descriptions ###*/


#content a span {
	display: none;
	}

#content a:hover span {
	background: #c6e1f6;
	display: block;
  position: absolute;
  width: auto;
  max-width: 350px;
  padding: 10px;
  margin: -65px 10px 10px 55px;
  z-index: 100;
  color: #333333;
  border: 4px solid #498bd0;
  font: 9pt/12pt Verdana, sans-serif; 
  text-align: left;
  text-decoration: none;
  z-index: 150;
   }

#content img.icon {
	vertical-align: middle;
}


/*### Leftnav ###*/

#leftnav {
	float: left;
	width: 190px;
	height: auto;
	margin: 0px 10px 20px 0px;
	padding: 0px;
	text-align: left;

	}

#leftnav ul {
margin: 0;
padding: 0;
list-style-type: none;
font: normal normal normal 9pt/11pt Verdana, Arial, sans-serif;
}

#leftnav li { 
	margin: 0 0 3px 0; 
	}

#leftnav a {
display: block;
padding: 3px 2px 3px 24px;
border: 1px solid #7c7878;
width: 160px;
background-color: #999;
background-image: url(../imagefiles/leftnav_buttonOFF.png);
}

#leftnav a:link, #navleft a:visited {
color: #322f2f;
text-decoration: none;
}

#leftnav a:hover {
border: 1px solid #7c7878;
background-color: #F60;
background-image: url(../imagefiles/leftnav_buttonON.png);
color: #322f2f;
}

#leftnav a.current {
border: 1px solid #7c7878;
background-color: #FF6600;
background-image: url(../imagefiles/leftnav_buttonON.png);
color: #322f2f;
}


/*### Leftnavplain ###*/

#leftnavplain {
	float: left;
	width: 180px;
	height: auto;
	margin: 0px 10px 20px 0px;
	padding: 0px;
	text-align: left;
		}

#leftnavplain ul {
margin: 0;
padding: 0;
list-style-type: none;
font: normal normal normal 9pt/11pt Verdana, Arial, sans-serif;
}

#leftnavplain li { 
	margin: 0 0 3px 0; 
	}

#leftnavplain a {
display: block;
padding: 3px 2px 3px 24px;
border: 1px solid #7c7878;
width: 160px;
background-color: #e2e2e2;
}

#leftnavplain a:link, #navleft a:visited {
color: #322f2f;
text-decoration: none;
}

#leftnavplain a:hover {
border: 1px solid #7c7878;
background-color: #569fea;
color: #fff;
}

#leftnavplain a.current {
border: 1px solid #7c7878;
background-color: #569fea;
color: #fff;
font-weight: bold;
}

/*### Maincontent ###*/
	
#maincontent {
	float: left;
	width: 65%;
	min-width: 600px;
	height: auto;
	margin: 0px 30px 10px 0px;
	padding: 0px 25px 10px 15px;
	text-align: left;
	}


#maincontent h1 {
	font-family: Georgia;
	font-size: 1.3em;
	line-height: 1.4em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #413d3d;
	margin: 0px 10px 20px 15px;
	clear: both;
	}

	
#maincontent h2 {
	font-family: Arial, sans-serif;
	font-size: 1.2em;
	line-height: 1.3em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #1c71bf;
	margin: 0px 30px 20px 15px;
	clear: both;
	}
	
#maincontent h3 {
	/*background: #bdefee;*/
	font-family: Georgia;
	font-size: 1.0em;
	line-height: 1.2em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #54807f;
	margin: 5px 30px 20px 20px;
	padding: 2px 5px 2px 0px;
	border-bottom: 1px solid #54807f;
	clear: both;
	}

#maincontent p {
	font-family: Arial;
	font-size: 1.0em;
	line-height: 1.4em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: -0.05em;
	text-decoration: none;
	color: #686762;
	margin: 5px 30px 20px 25px;
	}
	
#maincontent a {
	text-decoration: none;
	color: #cc3900;
	}
	
#maincontent a:hover {
	background-color: #c2edeb;
	}

#maincontent p.caption  {
	margin: 3px 0px 5px 0px;
	padding: 0px;
	font: normal normal normal 8pt/10pt arial, verdana, sans-serif;
	color: #717171;
}

#maincontent p.caption a  {
	margin: 3px 0px 5px 0px;
	padding: 0px;
	font: normal normal normal 8pt/10pt arial, verdana, sans-serif;
	color: #333333;
	text-decoration: underline;
}

#maincontent li {
	font-size: 0.90em;
	margin: 0px 0px 5px 0px;
	
}

/*### Left and Right Content areas within a maincontent area ###*/

#leftsubcontent {
	width: 70%;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	border-right: 1px dotted #cccccc;
}

#rightsubcontent {
	width: 25%;
	float: right;
	margin: 0px 0px 0px 15px;
	padding: 0px;
}

#rightsubcontent img {
	padding: 2px;
}

#rightsubcontent p {
	margin: 0px 0px 15px 0px;
	font-size: 8pt;
	line-height: 10pt;
}

#rightsubcontent a {
	margin: 0px;
	font-size: 8pt;
	line-height: 10pt;
}




/*### Homepage Feature ###*/

#featureback {
	float: left;
	background: #c7bfa5;
	width: 100%;
	min-width: 850px;
	height: 218px;
	overflow: hidden;
	text-align: center;
}

#featurewrap {
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 850px;
	padding: 0px;
	text-align: center;
		}
	

#featurewrap img {
	border: 4px solid #aaa490;
	margin: 0px 7px 0px 0px;
	float: left;
	}


/*### WRF Forecast Viewer ###*/

#feature_wrf {
	background: #aaa490;
	width: 271px;
	height: 218px;
	margin: 0px 10px 0px 10px;
	padding: 0px;
	float: left;
}

#feature_wrf p {
	font-family: arial, helvetica, san-serif;
	font-size: 10px;
	font-weight: bold;
	margin: -2px 0px -4px 0px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	}

#previewimg { 
	width: 251px;
	height: 152px;
	overflow: hidden;
	margin: 3px 0px 4px 7px;
	padding: 0px;
	border: 3px solid #eedea7;
	float: left;
	}

 #previewimg img {
	width: 344px;
	height: 344px;
	marginx: -111px 0px -30px -49px;

	position: relative;
	top: -111px; right: 0px; bottom: -30px; left: -49px;
	
	border: none;
	}
	
#previewimg a {
	border: none;
	}

#wrfbuttons {
	margin: -4px 0px 0px 7px;
	text-align: center;
	width: 275px;
	padding: 0px;
	float: left;
	clear: left;
}

#wrfbuttons img {
	padding: 0px;
	margin: -1px;
	border: 1px solid #999999;
}

#wrfbuttons img:hover {
	border: 1px solid #000000;
}



/*### Lower homepage content ###*/

#lowercontentwrap {
	float: left;
	clear: left;
	width: 100%;
	min-width: 850px;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	text-align: center;
	overflow: hidden;

	}
	

#lowercontentwrap h1 {
	font-family: Verdana, Arial, sans-serif;
	font-size: 0.95em;
	line-height: 1.5em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #827b63;
	border-bottom: 1px solid #c7bfa5;
	}

	
#lowercontentwrap h2 {
	font-family: Arial;
	font-size: 0.9em;
	line-height: 1.1em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #72a4a2;
	margin: 15px 15px 20px 30px;
	}
	
#lowercontentwrap h3 {
	font-family: Georgia;
	font-size: 1.0em;
	line-height: 1.2em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #413d3d;
	margin: 15px 15px 20px 30px;
	}

#lowercontentwrap p {
	font-family: Arial;
	font-size: 0.95em;
	line-height: 1.3em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: -0.01em;
	text-decoration: none;
	color: #686762;
	margin: 10px 12px 25px 12px;
	}
	
#lowercontentwrap a {
	text-decoration: none;
	color: #cc3900;
	}

#lowercontentwrap a:hover {
	background-color: #c2edeb;
	}


#lowercontentwrap ul {
	margin: 10px 5px 10px 5px;
	list-style-image: url(../imagefiles/bullet_redbox.png);
}


	
/*### left homepage content ###*/

#leftcontent {
	float: left;
	width: 30%;
	height: auto;
	margin: 0px 10px 0px 10px;
	padding: 0px 8px 0px 8px;
	text-align: left;
	}

#leftcontent h1 {
	color: #82a2a1;
	border-bottom: 1px solid #a5cfcd;
	}

	
#leftcontent p {
	font-family: Arial;
	font-size: 0.85em;
	line-height: 1.1em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: -0.01em;
	text-decoration: none;
	color: #686762;
	margin: 10px 12px 0px 12px;
	}
	
#leftcontent a {
	text-decoration: none;
	color: #cc3900;
	}




/*### leftmiddle homepage content ###*/

#middlecontent {
	background: #dff8f7;
	float: left;
	width: 28%;
	height: 100%;
	min-height: 200px;
	margin: 0px 10px 0px 10px;
	padding: 0px 8px 0px 8px;
	border-left: 2px solid #a5cfcd;
	border-right: 2px solid #a5cfcd;
	text-align: left;
	}

#middlecontent h1 {
	color: #82a2a1;
	border-bottom: 1px solid #a5cfcd;
	}

	
#middlecontent p {
	font-family: Arial;
	font-size: 0.85em;
	line-height: 1.1em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: -0.01em;
	text-decoration: none;
	color: #686762;
	margin: 10px 12px 0px 12px;
	}
	
#middlecontent a {
	text-decoration: none;
	color: #cc3900;
	}



/*### Right homepage content ###*/

#rightcontent {
	float: left;
	width: 22%;
	height: auto;
	min-height: 200px;
	margin: 0px 10px 0px 10px;
	padding: 0px 8px 0px 8px;
	text-align: left;
	}
	
#rightcontent p {
	font-family: Arial;
	font-size: 0.85em;
	line-height: 1.1em;
	letter-spacing: 0;
	text-align: left;
	word-spacing: -0.01em;
	text-decoration: none;
	color: #686762;
	margin: 10px 0px 10px 0px;
	}
	
#rightcontent a {
	text-decoration: none;
	color: #cc3900;
	}



/*### Footer ###*/

#footer {
	float: left;
	clear: left;
	margin: 0px;
	padding: 0px 10px 10px 10px;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	width: 100%;
	height: auto;
	background: #eeeeee;
	text-align: left;
	}
	
#footer p {
	text-align: left;
	margin: 5px 25px 5px 5px;
	font: normal normal normal 8pt/11pt arial, verdana, sans-serif;
	}
	
	

/*### Forms Styles ###*/

#forms {
	background: #eeeeee;
	width: 570px;
	border: 1px solid #cccccc;;
	padding: 0px;
	margin: -10px 0px 20px 25px;
	}
	
#forms td.heading {
	width: 140px;
	background: #ffffff;
	font: normal normal bold 1.0em/1.1em Arial, sans-serif;
	text-align: left;
	text-decoration: none;
	color: #c1973f;
	margin: 0px;
	padding: 1px;
	border: 1px solid #cccccc;
	}
	

#forms td.choices {
	width: 480px;
	background: #eeeeee;
	font: normal normal bold 0.85em/1.0em Arial, sans-serif;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #52514D;
	margin: 0px;
	padding: 1px;
	}

#forms td.submit {
	width: auto;
	background: #cccccc;
	font: normal normal bold 0.85em/1.0em Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	color: #c1973f;
	margin: 0px;
	padding: 1px;
	border: 1px solid #cccccc;
	}


/*### Content Table Styles ###*/

#content_table {
	background: #eeeeee;
	width: 98%;
	min-width: 550px;
	border: 1px solid #cccccc;;
	padding: 2px;
	margin: -10px 10px 20px 40px;
	}
	
#content_table th {
	background: #ffffff;
	width: auto;
	font: normal normal bold 1.0em/1.1em Arial, sans-serif;
	font-variant: small-caps;
	text-align: left;
	text-decoration: none;
	color: #c1973f;
	margin: 0px;
	padding: 1px;
	border: 1px solid #cccccc;
	}
	

#content_table td {
	width: auto;
	background: #eeeeee;
	font: normal normal bold 0.85em/1.0em Arial, sans-serif;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #52514D;
	margin: 0px;
	padding: 4px;
	border-bottom: 1px dotted #989898;
	}

#content_table td.divider {
	background: #bdefee;
	font: oblique normal bold 1.0em/1.1em Arial, sans-serif;
	text-align: left;
	word-spacing: normal;
	text-decoration: none;
	color: #0f83a4;
	margin: 0px;
	padding: 4px;
	border: none;
	}

/*##### MMM Science Plan #####*/

#pic_caption {
	width: 300px;
	margin: 4px 10px 4px 5px;
	float: left;
	}
	
#pic_caption a {
	border: none;
	}
	
#pic_caption img {
	width: 220px;
	height: auto;
	margin: 0px 2px 0px 10px;
	padding: 3px;
	border: none;
	}
	
#pic_caption p {
	width: 280px;
	margin: 0px 20px 0px 10px;
	padding: 5px;
	font-family: Georgia, serif;
	font-size: 8pt;
	line-height: 10pt;
	color: #6666cc;
}

/*##### Download Controls #####*/

#download_controls {
	width: 95%;
	margin: 4px 10px 4px 5px;
	background: #e2e2e2;
	border: 1px solid #cccccc;
	padding: 4px;
	}

#download_controls form {

	display: inline;

	}
	




/*### Class Styles ###*/


.floatright {
	float: right;
	margin: 0px 0px 5px 15px;
}

.floatleft {
	float: left;
	margin: 0px 15px 5px 0px;
	}

.floatright_img {
	float: right;
	margin: 0px 0px 20px 15px;
	border: 1px solid black;
	vertical-align: top;
}

.floatleft_img {
	float: left;
	margin: 0px 15px 20px 0px;
	border: 1px solid black;
	vertical-align: top;
	}
	
.clearboth {
	clear: both;
	}
	
.center {
	text-align: center;
	}

.arrow_buttons {
	vertical-align: middle;
	padding: 0px  0px 0px 2px;
	margin-bottom: 4px;
	}
	
.dropcap {
	float: left;
	color: #8D6A70;
	font-size: 40px;
	line-height: 32px;
	padding: 2px 1px 0px 0px;
	font-family: Times, Georgia, serif;
	}
	
.event_emphasis {
	color: #238AC5;
	font-weight: bold;
	}

.graybar_h1_rule {
	width: 100%;
	background: url(../images/dkgraybar.jpg) repeat-x;
	height: 9px;
	margin: -20px 0px 30px 15px;
	_margin: -25px 0px 32px 15px;
	}

.pullquote {
	width: 160px;
	background: #eeeeee;
	color: #333333;
	float: right;
	border-left: 2px dotted #f7bb2a;
	border-right: 2px dotted #f7bb2a;
	font-weight: bold;
	line-height:140%;
	padding:10px;
	margin-top:10px;
	margin-left:12px;
	margin-right: 10px;
}

.pullquote_left {
	width: 85%;
	background: #eeeeee;
	border-left: 1px dotted #cccccc;
	border-right: 1px dotted #cccccc;
	font-weight: bold;
	line-height: 140%;
	padding: 10px;
	margin: 10px 0px 0px 0px;
	}

.photoframe {
	border: 6px solid #cdc59e;

}

.image_thumbnails {
	border: 4px solid #498bd0;
	padding: 2px;
	margin: 0px 8px 0px 0px;
	float: left;

}

.image_thumbnails_homepage {
	border-top: 4px solid #e0d9c1;
	border-right: 4px solid #e0d9c1;
	border-bottom: 4px solid #e0d9c1;
	border-left: 4px solid #e0d9c1;
	padding: 2px;
	marginx: -1px 11px 6px 32px;
	margin: -1px 11px 6px 11px;
	_margin: -17px 11px 0px -12px;
	float: left;

}

	
.subtitle {
	font: normal normal bold 9pt/11pt Arial, sans-serif;
	text-align: left;
	text-decoration: none;
	color: #333333;
	margin: 0px 5px 10px 5px;
}

.topic_highlight {
	border-bottom: 6px solid #79bfd3;
	background: #b0e4f3;
	padding: 2px 2px 2px 12px;
	font: normal normal bold 11pt/14pt Verdana, Arial, sans-serif;
	color: #4697dc;

}

.announce {
	background: #faf8b7 url(../imagefiles/postit_corner2.jpg) right bottom no-repeat;
	padding: 3px;
	margin-bottom: 5px;
	border: 1px solid #f0e087;
}