body
{
	text-align: left;
	margin-top: 0px;
	margin-left: 10px;
	font-family: Verdana, 'Trebuchet MS', Arial, non-serif;
	font-size: 11px;
}

img { border: none; }
form { margin: 0; }
h3,p {
  line-height: 1.3em;
  margin: 1em 0;
}

.myblock {
/*  width: 970px;*/
  width: 85em;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  display: block;
  
}
.gray { color: #666; }

div.error {
  background: #FCC;
  padding: .3em 1em;
  border: 1px dotted #666;
  margin: 1em;
  text-align: left;
  max-width: 63em;
  margin-left: auto;
  margin-right: auto;
}
div.msg   {
  background: #CCF;
  padding: .3em 1em;
  border: 1px dotted #666;
  margin: 1em;
  text-align:left;
  max-width: 63em;
  margin-left: auto;
  margin-right: auto;
}

div.error ul { padding-left: 0; margin: .3em 1em; }
div.msg ul   { padding-left: 0; margin: .3em 1em; }


div.top_menu {
  text-align:left;
  width: 100%;
  background: #339;
  color: white;
/*  height: 1.6em;*/
}
table.top_menu {
  width: 100%;
  background: #339;
  color: white;
}
table.top_menu td {
  padding: .2em 1em;
}
table.top_menu a { color: white; }

ul.menu_clear {
 list-style: none;
 padding: 0;
 margin: 0;
}
ul.menu_clear li
{
  float: left;
  text-align: left;
  border-right: 1px dotted #FFF;
  padding: .2em 1em;
  vertical-align: bottom;
}
ul.menu_clear li.last
{
  border-right: none;
}

ul.menu_clear a
{
	color: white;
	text-decoration: none;
	margin: -.2em -1em;
	padding: .2em 1em;
	display: block;
}
ul.menu_clear a:hover {
  background: #99F;
}

div#footer {
  font-size: smaller;
  text-align: center;
  font-style: italic;
  clear: both;
}

p.alert { color: red; }

table.myform {
    border-left: 1px solid #CCC;
    border-top: 1px solid #CCC;
}
table.myform td {
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    padding: .2em;
}



/* ECAST */
table.mapinfo {
  margin-top: 1em;
  border-left: 1px solid #333;
  border-top: 1px solid #333;
}
table.mapinfo td
{
    text-align: left;
    padding: .1em .4em;
    font-size: small;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}
.maplabel {
    font-size: small;
    text-align: left;
    font-weight: bold;
    background: #009a9d;
    color: #FFF;
    padding: .2em .5em;
}
table.mapinfo tr.header td { background: #339; color: white; }

table.timebar {
  background: #CCC;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 4em;
  font-size: small;
  clear: both;
}
table.timebar td.date {
    padding: .2em;
    margin: 0;
    text-align: center;
    border-right: 1px solid #333;
}
table.timebar a {
  display: block;
  background: #009a9d;
  text-decoration: none;
  color: white;
  margin: 0;
  text-align: center;
  width: 2.9em;
  min-width: 2.9em;
  height: 3.6em;
}
table.timebar a.button {
  display: block;
  background: none;
  height: auto;
  color: black;
  font-weight:bold;
  text-decoration: none;
  /*color: white;*/
  padding: 0;
  width: 50px;
}
table.timebar2 {
  background: #CCC;
  width: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 4em;
  font-size: small;
  clear: both;
}
table.timebar2 td.date {
    padding: .2em;
    margin: 0;
    text-align: center;
    border-right: 1px solid #333;
}
table.timebar2 a {
  display: block;
  background: #009a9d;
  text-decoration: none;
  color: white;
  margin: 0;
  text-align: center;
  width: 3em;
  min-width: 3em;
}

/*
ul.timebar a:hover {
  background: #FFF;
  color: #69C;
}
*/
.timebar .white {
  background: #FFF;
  color: #69C;
}

#imagelabel {
  text-align: left;
  padding: .2em 1em;
  display: block;
  background: #009a9d;
  font-weight: bold;
  font-size: small;

}
#imagelabel2 {
  text-align: left;
  padding: .2em 1em;
  display: block;
  background: #009a9d;
  font-weight: bold;
  font-size: small;

}
img#mapimage  { border: 1px solid #69C; }
img#mapimage2 { border: 1px solid #69C; }

div.cityheaderA {
    background: #009a9d;
    color: #FFF;
    /*height: 2em;*/
    padding: .3em;
    /*padding: .2em .2em 0 1em;*/
    margin-bottom: -.2em;
    vertical-align: bottom;
    text-align: left;
}
div.cityheaderB
{
	background: #99C;
	color: #FFF;
    /*height: 2em;*/
    padding: .3em;
	text-align: left;
    clear:both;
}
div.cityheaderB a { color: #FFF; }

a.forecastselect { color: #333; }

div.cityheaderB select {
 font-size: x-small; padding: 0em .1em; margin: 0px;
}

.inactive { color: #999; }


.vcold
{
	color: #FFF;
	background-color: #0000aa;
}
.cold
{
	color: #000;
	background-color: #3377FF;
}
.vcool
{
	color: #000;
	background-color: #6CF;
}
.cool
{
	color: #000;
	background-color: #aaddff;
}
.normal {
    background:#FFF;
    color:#000;
}
.warm {
	color: #000;
	background-color: #ffbbbb;
}
.vwarm {
	color: #000;
	background-color: #ff5566;
}
.hot
{
	color: #000;
	background-color: #C00;
}
.vhot
{
	color: #FFF;
	background-color: #991100;
}
/*
.cold {
  background: #09F;
}
.cool {
  background: #9CF;
}
.normal {
  background: #FFF;
}
.warm {
  background: #F77;
}
.hot {
  background: #D03;
}
*/

table.plotheader {
  background: #99C;
  width: 100%;
}
table.plotheader td { text-align: left; }

div.optionpanel {
  width: auto;
  text-align: right;
  background: #CCC;
  padding: .1em .4em;
  margin-top: -.5em;
  height: 1.5em;
  clear: both;
}
div.optionpanel p { margin: 0em; padding:0; }


ul.floatright {
 list-style: none;
 padding: 0;
 margin: 0;
 font-size: small;
}
ul.floatright li
{
  float: right;
  text-align: left;
  padding: .2em 1em;
  vertical-align: middle;
}

ul.floatleft {
 list-style: none;
 padding: 0;
 margin: 0;
 font-size: small;
}
ul.floatleft li
{
  float: left;
  text-align: left;
  padding: .2em 1em .2em .2em;
  vertical-align: bottom;
}

#mapselector
{
    float: right;
    margin-left: auto;
    position: absolute;
    top: 2.7em;
    right: 0px;
    text-align: left;
    background: #EEE;
    padding: .2em;
    border: 1px solid #AAA;
    font-size: small;
}
#mapselector td { padding: .1em .2em; }
#mapselector td.units { text-align: center; }
.inlinemap { float: left; }


ul.plotmenu {
    padding: 0px;
    margin: 0px;
}

ul.plotmenu li {
    list-style-type: none;
    margin: 0px;
    position: relative;
}
ul.plotmenu li > ul {
    display:none;
    position: absolute;
    left: 10em;
    padding: 0;
    margin: -1.4em 0 0 0;
    background: #CCC;
    border: 1px solid #BBB;
    z-index: 4;
}

ul.plotmenu li > ul li {
  display: block;
  padding: .2em .4em;
  text-align:left;
  
}
ul.plotmenu li > ul li:hover {
    background: #EEE;
}
ul.plotmenu li > ul li a {
    text-decoration: none;
    color: #36F;
}

ul.plotmenu:hover {
    background: #EEE;
}
ul.plotmenu:hover li > ul{
  display: block;
}


/* pulldown menu for Parameters, Models, Options */
.menubar {
    width: auto;
    padding: .4em 1.5em .4em 1.5em;
    border-left: 1px solid #CCC;
    float: left; 
    font-size: small;
	vertical-align: top;
}

.pulldownmenu
{
	width: auto;
	/*padding: .4em 1.5em .4em 1.5em;*/
	padding-left: 1.5em;
	padding-right: 1.5em;
	line-height: 1.9em;
	border-left: 1px solid #CCC;
	float: left;
	font-size: 100%;
}

.pulldownmenu ul {
  display: none;
  position: absolute;
  background-color: #EEE;
  color: black;
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}

.pulldownmenu ul li {
  display: block;
  padding: 0.2em 0.5em;
}
.pulldownmenu ul li.disabled {
    color: #888;
}
.pulldownmenu ul li a {
    color: #36F;
}

/*
.pulldownmenu ul li.divider {
  display: block;
  background: #CCC;
  padding: 0;
  margin: .1em 0;
  height: 1px;
  
}

div.pulldownmenu:hover {
    background: #666;
}

div.pulldownmenu:hover ul {
  display: block;
  margin: 0 0 0 -1.5em;
  padding: 0;
}

div.pulldownmenu ul li:hover {
  background-color: #CCC;
}
*/


table .formtable {
    padding: 0px;
    margin: 0px;
    width: 100%;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
}
table .formtable td {
    margin: 0px;
    padding: .2em .5em;
}
table .formtable td.inputlabel {
    text-align: right;
    width: 150px;
}

ul#modeltimebar { 
 list-style: none;
 padding: 0;
 margin: 0;
 height: 2em;
 clear: both;
}

ul#modeltimebar li
{
  float: left;
  text-align: center;
  width: 2.5em;
  padding: .2em 0;
  background: #009a9d;
  color: #FFF;
  border-right: 1px solid #0AA;

}
ul#modeltimebar li.selected
{
  background: #FFF;
  color: #009a9d;
}
ul#modeltimebar a {
    display: block;
    color: inherit;
    text-decoration: none;
}

img.mapImage {
    width: 450px;
}

.mapelement { padding: 0.5em; float: left; }

table#forecastTable { width: 100%; clear: left; }
table#forecastTable td {
    padding: .2em;
    text-align: center;
}

table#forecastTable tr.header td {
    background: #CCC;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}
table#forecastTable tr.data td {
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    padding: .2em 0;
    vertical-align: bottom;
}

table#forecastTable td.date
{
	font-style: italic;
	padding: .2em .2em;
}
table#forecastTable tr.data td.name
{
    border-right: none;
	text-align:left;
}
table#forecastTable tr.data2 td {
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    padding: .2em 0;
    white-space:nowrap;
}
table#forecastTable tr.data3 td {
    border-bottom: 1px solid #999;
}
table#forecastTable tr.divider td
{
    border-top: 1px solid #333;
    padding: 0px;
    margin: 0px;
}
table#forecastTable td h3 {
    padding: .2em;
    margin: 0;
    line-height: 1.1em;
    text-align: left;
}

table#forecastTable td.rowdesc {
    text-align:right;
    background:#DDD;
    padding-right: .3em;
    width: 10em;
}
table#forecastTable td.rowdesc2 {
    text-align:right;
    background: #ED9;
    padding-right: .3em;
    width: 10em;
}
table#forecastTable td.modellabel {
    text-align:left;
    background: #EDC;
}
table#forecastTable td.opt {
    vertical-align: top;
}
table#forecastTable tr.citydivider td {
    height: 4px;
    font-size:4px;
    background: #CCC;
}



ul.collapsible {
list-style: none;
padding: 0;
margin: 0;
/*border: 1px solid green;*/
}
ul.collapsible li
{
	display: block;
	white-space: nowrap;
}
tr.opened td.warm {
    background: none;
}
tr.opened td.hot {
    background: none;
}
tr.opened td.cool {
    background: none;
}
tr.opened td.cold {
    background: none;
}
tr.opened ul.collapsible li.station {
    padding-top: 2px;
    padding-bottom: 5px;
}
tr.opened ul.collapsible li {
    border-bottom: 1px solid #DDD;
}
ul.collapsible li.ftype { text-align:right; }
ul.collapsible li.hide {
    display: none;
}
tr.opened ul.collapsible li.hide { display: block; }

table#forecastTable td.missing {
    background: #EEE;
}
table#forecastTable tr.obsdata td {
    background: #BBB;
}

table#forecastTable tr.obsdata td.missing {
    background: #999;
}

table#forecastTable tr.precip td { padding: 0px; }

table#forecastTable tr.precip ul li { float: left; }
table#forecastTable ul li.day { background: yellow; height:4px; width: 50%; }
table#forecastTable ul li.night { background: #666; height:4px; width: 50%; }
table#forecastTable ul li.half {
    width: 49.5%;
    padding: .2em 0;
    margin-left: -1px;
    margin-top: -1px;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
}

li.p90  { color: #FFF; background: #090; }
li.p80  { color: #FFF; background: #0B0; }
li.p70  { color: #FFF; background: #1D0; }
li.p60  { background: #1F0; }
li.p50  { background: #5F0; }
li.p40  { background: #7F1; }
li.p30  { background: #9F1; }
li.p20  { background: #AF3; }
li.p10  { background: #CF7; }
li.p01  { background: #EFC; }
li.p00  { background: #FFF; }
li.null { background: #CC9; }

.plotselector {
/*
    float: right;
*/
    position: absolute;
    margin-left: 15px;
    border: 1px solid #999;
    background: #CCC;
    width: 15em;
    text-align: left;
}

.plotselector p {
    margin: 0 0 0 0;
    border-bottom: 1px solid #DDD;
    padding: .1em .3em;
}
.plotselector a {
    text-decoration: none;
    color: #36F;
    display: block;
}

.plotselector a:hover {
    background: #999;
}

a.pseudoB {
    display: block;
    color: #036;
}
a.pseudoB:hover {
    background: #369;
    color: white;
}
a.pseudoBselected {
    display: block; 
    background: #69C;
    color: #036;
}
a.pseudoBselected:hover {
    background: #369;
    color: white;
}

a.pseudolink {
    cursor: pointer;
    text-decoration: underline;
    color: blue;
}

/* PULLDOWNMENU ------------------------------ */
ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav li { /* all list items */
	float: left;
	position: relative;
	padding: .2em .3em;
}
li ul { /* second-level lists */
	display: none;
	position: absolute;
	top: 1em;
	background: #DDD;
	left: 0;
}

#nav a {
    text-decoration: none;
    display: block;
	color: #36F;
	width: 15em;
	padding: .2em .3em;
	margin: -.2em -.3em;
}
#nav a:hover {
    background: #BBB;
}

#nav li .label {
padding: 0.2em .5em;
width: 7em;
clear: both;
text-align:center;
border-left: 1px solid #77A;
}
#nav li .label:hover {
    background: #339;
}


li>ul {
/* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: auto;
	left: auto;
}
li:hover ul, li.over ul {
/* lists nested under hovered list items */
	display: block;
}

ul.pulldown {
    width: 16em;
    border: 1px solid #999;
}
ul.pulldown li
{
	float: none;
	width: 16em;
	display: block;
	color: #36F;
	clear: both;
}

li.divider {
  display: block;
  background: #CCC;
  padding: 0;
  margin: .1em 0;
  height: 1px;
  
}
/* END PULLDOWNMENU ------------------------------ */

table.formtable td {
    padding: .3em;
}
table.formtable tr.section td {
    border-top: 1px solid #BBB;
    background: #DDD;
}
table.formtable tr.submit td {
    text-align:right;
}
table.formtable tr.submit ul li
{
	padding: .1em .3em;
}
table.formtable td.attribute {
    text-align: right;
}
table.formtable p { margin: 0; }

table.formtable .in {
    float:left; padding: 0 1em .5em .2em;
}

table.formtable ul.prefs {
    margin-left: -.3em;
    margin-right: -.3em;
    width: 40em;
}
table.formtable ul.prefs li {
    background: #339;
    color: white; 
    float: left;
    border-right: 1px solid #99C;
}
table.formtable ul.prefs li.current {
    background: #99C;
}
table.formtable ul.prefs li.current a {
    color: black;
}
table.formtable ul.prefs li a {
    color: white;
    display: block;
    padding: .4em 1.2em;
}
table.formtable ul.prefs li a:hover {
    background: #66C;
}

table.formtable .error { border: 1px solid red; color: red; }

.commentary { 
    width: 40em;
    margin: 1em auto;
    border: 1px solid #DDD;
    padding: 1em;
}
ul.toolbar {
    background: #369;
    color: white;
    height:15px;
    padding: 1px 0px;
    margin-right: -2px;
    border: 1px solid #666;
}
ul.toolbar li {
    float:right;
    list-style:none;
    border-left: 1px solid #39F;
}
ul.toolbar li a {
    text-decoration: none;
    display:block;
    color:inherit;
    margin: -1px 0 -3px 0;
    padding: 1px 10px 3px 10px;
    cursor: pointer;
}
ul.toolbar li a:visited { color:white; }

ul.toolbar li a:hover {
    text-decoration: underline;
    background:#69C;
    color: #333;
}