/* imperialvalley.css */

body, th, td, div { 
	font-size: 14px; 
	font-family: Arial, Helvetica, sans-serif; 
	color: rgb(0,0,100);	
}
body { background-color: white; width: 760px;}
a { color: blue; }

h2, h3 { 
	padding: 0px;
	padding-top: 5px;
	margin: 0px; 
	font: bold 18px Verdana, Arial;
}

h3 { font: bold 16px Verdana, Arial; }

.invis { display: none; }
.discussion { font-size: 12px; }

table.daycounttable td { font-size: 12px;}

table.mainTable caption { padding-bottom: 20px; }
table.mainTable th { 
	font-weight: bold; 
	background-color: #5068b0; /* rgb(220,220,220);*/
	text-align: center;
	padding: 4px;
	color: #ffffff;
}
table.mainTable td.title { 
	font-weight: bold; 
	background-color: #5068b0; /* rgb(220,220,220);*/
	text-align: center;
	/*padding: 4px;*/
	color: #ffffff;
}
/*table.mainTable td a{ 
	color: #ffffff;
}*/
table.mainTable th.left {
	text-align: left;
}
table.mainTable td.gray {
	background-color: #EEEEEE;
	text-align: center;
}

.disclaimer {
	color: red;
	font: bold 14px Arial, sans-serif;
	text-transform: uppercase;
}

/* Rules for the header tab bar derived from the Sliding Doors example on alistapart.com */
#header {
	position: relative;
	/* float:left; */
	width: 760px;
	height: 80px;
	background: url("clouds2.jpg") repeat-x bottom;
	line-height:normal;
}

#header h1 {
	position: absolute; 
	margin: 0px;
	top: 10px; 
	left: 10px;
	font: bold 24px Verdana, Arial;
}

#header ul {
	position: absolute;
	bottom: 0px;
	right: 0px;
	margin:0;
	padding:10px 10px 0;
	list-style:none;
}

#header li {
	/* float: left; */
	display: inline;
	margin: 0;
	padding: 0;
}
#header a {
	float:left;
	background: url("tableft2.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 8px;
	border-bottom:1px solid #765;
	text-decoration:none;
	text-align: center;
	cursor: hand;
}
/* 
	using <b> for purposes utterly unlike what it was intended for!
	of course, if you need another piece of structural markup to go 
	inside <a>, what's the next thing you think of? <b>, of course!
*/
#header a b {
	float:left;
	background: url("tabright3.gif") no-repeat right top;
	padding:5px 14px 4px 6px;
	font: 11px Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	line-height: 1.6em;
	white-space: nowrap;
	height: 1.6em;
	color: black;
}

#header a b span {
	/* this is a hack, but it's easier than the other vertical-centering hacks 	*/
	line-height: 0.8em;
	display: block;
}

/* "current" state */
#index_cfm #nav-index a,
	#aqi_cfm #nav-aqi a,
	#health_cfm #nav-health a,
	#aqmaps_cfm #nav-aqmaps a,
	#airalert_cfm #nav-airalert a,
	#faq_cfm #nav-faq a,
	#links_cfm #nav-links a,
	#contact_cfm #nav-contact a 
	{
	background-position:0px -150px;
	border-width:0;
}
#index_cfm #nav-index a b,
	#aqi_cfm #nav-aqi a b,
	#health_cfm #nav-health a b,
	#aqmaps_cfm #nav-aqmaps a b,
	#airalert_cfm #nav-airalert a b,
	#faq_cfm #nav-faq a b,
	#links_cfm #nav-links a b,
	#contact_cfm #nav-contact a b 
	{
	background-position:100% -150px;
	padding-bottom:5px;
	color: black;
}

/* hover state */
#header a:hover {
	background-position:0% -150px;
}
#header a:hover b {
	background-position:100% -150px;
}
#header a:hover b {
	color: #600;
}

table.aqigraph {
	border: 1px solid black;
}

table.aqigraph th {
	font: 10px Arial, sans-serif;
	background-color: rgb(200,200,200);
	vertical-align: top;
	width: 16px;
}

table.aqigraph td {
	font: 10px Arial, sans-serif;
	padding: 1px;
	text-align: center;
}

div.hournav {
	margin: 10px 0px;
	align: center;
}
.hournav a { 
	color: blue; 
	text-decoration: none; 
	text-align: center;
	width: 20px; 
	height: 20px; 
	border: 1px solid white; 
	vertical-align: bottom;
}
.hournav a:hover { 
	border: 1px solid #999; 
	background-color: #ccc; 
}
.hournav a.disabled {
	color: #999;
}
.hournav a.disabled:hover { border-color: white; background-color: white; }

#StatewideMap {
	position: relative;
	margin-top: 0px;
	margin-left: 20px;
	width: 311px; 
	height: 398px; 
	background: #fff url(map_edit2.jpg) no-repeat;   
	border: #000000;
	border: 0px;
	border-style: solid;
	top: 0px; 
	left: 0px;
}

.maincontent-forecast {
	text-align: center;
	color: #333333;
	background-color: #FFFFFF; /*#F4F4F4;*/
	font-size: 11px;
	padding: 4px 0px 4px 0px;
	border-top: 1px solid #B4C6D7;
	border-bottom: 1px solid #B4C6D7;
}
.maincontent-forecast-title {
	text-align: center;
	color: #333333;
	font-size: 16px;
	font-weight: bold;
}


.main-aqi-date {
	font-size: 11px;
	font-weight: bold;
	text-align: right;
	color: white;
	text-align: center;
	height: 42px;
	width: 62px;
	background-image: url(assets/main-aqi-date-bg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	white-space: nowrap;
}

.main-aqi-cat0, .main-aqi-cat1, .main-aqi-cat2, .main-aqi-cat3, .main-aqi-cat4, .main-aqi-cat5, .main-aqi-cat6 {
	width: 109px;
	height: 42px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	background-repeat: no-repeat;
	background-position: left top;
}

.main-aqi-cat0 {
	color: black;
	background-image: url(assets/main-aqi-bg-na.gif);
}
.main-aqi-cat1 {
	color: black;
	background-image: url(assets/main-aqi-bg-g.gif);
}
.main-aqi-cat2 {
	color: black;
	background-image: url(assets/main-aqi-bg-m.gif);
}
.main-aqi-cat3 {
	color: black;
	background-image: url(assets/main-aqi-bg-usg.gif);
}
.main-aqi-cat4 {
	color: white;
	background-image: url(assets/main-aqi-bg-u.gif);
}
.main-aqi-cat5 {
	color: white;
	background-image: url(assets/main-aqi-bg-vu.gif);
}
.main-aqi-cat6 {
	color: white;
	background-image: url(assets/main-aqi-bg-h.gif);
}
.sti_airupdate_USGSub {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 9px !important;
	color: #000000;
	text-align: center;
	font-weight: normal;
}
.plus-icon {
	display: block;
    background: transparent url(assets/plus.gif) scroll no-repeat left center;
    float: left;
    width: 16px;
    height: 16px;
}
.help-icon {
	display: block;
    background: transparent url(assets/InfoIcon.png) scroll no-repeat left center;
    width: 20px;
    height: 20px;
}
a.helper {
	text-decoration: none;
}
a.helper .helper-content-wpr {
	background-color: #F5F5F5;
    visibility: hidden;
    max-width: 300px;
    position: absolute;
    padding: 5px 5px 5px 5px;
	margin-left: 15px;
    text-align: center;
}
a.helper  p {
    padding: 5px;
    position: relative;
    border: 1px solid black;
}
a.helper:hover {
    cursor: help;
}
.helper-content-wpr {
    border: 1px solid black;
}
a.helper:hover .helper-content-wpr {
    visibility: visible;    
    z-index: 9999;
}
#nav{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style:none;
	max-width: 350px;
	/*-weight:bold;*/
	/*margin-bottom:10px;*/
	/* Clear floats */
	/*float:left;*/
	/*width:100%;*/
	/* Bring the nav above everything else--uncomment if needed.*/
	position:relative;
	z-index:0;
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
/*#nav li .info {
	background: #F5F5F5;
}*/
#nav a{
	display:block;
	/*padding:5px;*/
	/*color:#fff;*/
	/*text-decoration:none;*/
}
#nav a:hover{
	/*color:#fff;*/
	/*background:#6b0c36;*/
	/*text-decoration:underline;*/
}

/*--- DROPDOWN ---*/
#nav ul{
	/*background: #F5F5F5;*/ /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	/*background:rgba(255,255,255,0);*/ /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#info {
	background: #F5F5F5;
	padding: 5px 0px 5px 7px;
	margin: 0px 0px 0px 0px;
	border: 1px solid black;
}
#nav ul li{
	/*padding-top:1px;*/ /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li #title {
	font-weight: bold; 
	background-color: #5068b0; /* rgb(220,220,220);*/
	text-align: center;
	/*padding: 4px;*/
	color: #ffffff;
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left: 15px; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	/*background:#6b0c36;*/
	/*background: #F5F5F5;*/
	background: ;
	/*text-decoration:underline;*/
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	/*text-decoration:none;*/
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	/*background: #F5F5F5;*/
}
.content-title {
	font-weight: bold; 
	background-color: #5068b0; /* rgb(220,220,220);*/
	text-align: center;
	/*padding: 4px;*/
	color: #ffffff;
	padding: 0px 4px 0px px;
}