/* Sussex-Air.net - Screen stylesheet*/

body, html { font-size: 100%; line-height:1.2em; font-family: arial, verdana, helvetica, sans-serif; margin: 0; padding: 0; 
border: 0; background-color: #ffffff; }
p {	margin: 5px 0;}
p.no-padding-no-margin {padding:0; margin:0;}
p.logo { color:#1B4A7E; clear: both; font-size: 0.75em; padding:0; font-weight: bold;}
	
hr { color: #C9E6F8; background-color: #C9E6F8; height: 1px; border:0; margin: 10px 0; }	
hr.bar-graphs { width: 500px !important; color: #C9E6F8; background-color: #C9E6F8; height: 3px; border:0; margin: 10px 0 20px 0;}	

blockquote { padding:0 0 0 12px; margin:12px 0 0 0;	background:url(../../images/bg-quote.png) no-repeat;	}
blockquote p { margin:2px 0;}
cite { font-size:.85em; margin:0; padding:0 0 0 6px;}
fieldset { padding:15px; border: 1px solid #C9E6F8;  }
legend { color:#1B4A7E;	padding:5px 3px 10px 3px; font-weight: bold;}
/* keep superscript and subscript text from breaking the line-spacing */
sub { position: relative; font-size: 0.8em; vertical-align: baseline; bottom: 0.00em; }
sup { position: relative; font-size: 0.8em; vertical-align: baseline; bottom: 0.25em; }

/* all text boxes to have yellow bg when selected */
input:focus { background-color: Yellow;}
textarea:focus { background-color: Yellow;}

/* this is the iframe for the google search results - CHECK MAX-HEIGHT TO STOP HUGE GAP when searched from SSL pages 
REMOVE HEIGHT TO STOP RESULTS BEING CHOPPED OFF AT BOTTOM */
iframe { width: 450px; border: 0; min-height: 100% !important; 
/* height: 100% !important;  */ max-height: 100% !important; }
div.google {  height: 100% !important; border: 0;  }

/* alerts */
span.Low, span.Low a { color: #A3D06D !important; font-weight: bold;}
span.Low a:hover, span.Low a:focus { color: #A3D06D !important; font-weight: bold;}
span.Moderate, span.Moderate a { color: #FF6600 !important; font-weight: bold;}
span.Moderate a:hover, span.Moderate a:focus { color: #FF6600 !important; font-weight: bold;}
span.High, span.High a { color: #E33539 !important; font-weight: bold; }
span.High a:hover, span.High a:focus { color: #E33539 !important; font-weight: bold; }
span.VeryHigh, span.VeryHigh a { color: #B84B9A !important; font-weight: bold; }
span.VeryHigh a:hover, span.VeryHigh a:focus { color: #B84B9A !important; font-weight: bold; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	IMAGES & PHOTOS

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img { border: 0; }
img.border { border: 1px solid #E3F2FB !important; }
img.float-left-margin { border: 1px solid #C9E6F8 !important; float: left; margin-right: 5px }
img.float-left-margin-noborder { border: 0; float: left; margin-right: 5px }
img.float-right-margin { border: 1px solid #C9E6F8 !important; float: right; margin-left: 5px }
img.float-right-margin-noborder { border: 0; float: right; margin-left: 5px }

img.darker-border {  border: 1px solid #a8d8f4; }
img.logo { border: 0; margin: 0; float: right; }
img.air-alert-icon {  border: 0; margin: 0 5px 0 0; float: left; }
img.map { border: 0; margin: 10px; z-index: 0 !important;}
img.competition { margin: 10px 10px 2px 10px!important; }


/* ######## FLASH ##### */

object#flash-fade { margin: 0; padding: 0; border: 0; float: left; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	HEADINGS  - CHECK FONT SIZE FOR RESIZING TEXT

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	
h1, h2, h3, h4, h5, h6 {/* font-size:1.8em;*/ font-family: arial, verdana, helvetica, sans-serif; line-height:1.1em;
 margin:5px 0; color: #1B4A7E;}
h1 { margin-bottom: 0;}
h1.page-title { font-size: 1.6em; display: inline;}
h1, h2 {margin-top: 0;}
h2 {font-size:1.2em;}
h3 {font-size:1.1em !important;}
h3.small {font-size:1.2em;}
h4 {font-size: 0.9em !important; margin: 5px 0 !important;}
h5 {font-size:0.85em !important;}
h6 {font-size:1em;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	DEFAULT LINKS STYLE

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

a, a:link {color:#FF6600; text-decoration:none; font-weight: bold !important;}
a:visited {color:#FF6600; text-decoration: none;}
a:hover {color:#FF6600 !important; text-decoration: underline !important; background-color:#E3F2FB;}
a:active {color:#FF6600; text-decoration: underline !important;}
a:focus {color:#FF6600; text-decoration: underline !important; background-color:#E3F2FB;}
a.no-bg:hover { background-color: Transparent !important;}
a.no-bg:focus { background-color: Transparent !important;}

a.Low, a.Low:hover, a.Low:focus { color: #A3D06D !important; font-weight: bold;}
a.Moderate, a.Moderate:hover, a.Moderate:focus { color: #FF6600 !important; font-weight: bold;}
a.High, a.High:hover, a.High:focus { color: #E33539 !important; font-weight: bold; }
a.VeryHigh, a.VeryHigh:hover, a.VeryHigh:focus { color: #B84B9A !important; font-weight: bold; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	TOP NAVIGATION  - AUTO MARGIN LEFT AND RIGHT KEEPS LAYOUT CENTRE

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#top-navigation { z-index: 1; background-color: #1B4A7E; background-image: url(../../images/bg-nav-blue.png); background-repeat: no-repeat; 
margin-top: 5px; margin-right: auto; margin-bottom: 0; margin-left: auto; width: 750px; padding: 0; position: relative; 
font-weight: bold; /* MAKES TEXT RESIZE TOO BIG font-size: 1em;*/ font-family: arial, verdana, helvetica, sans-serif;  }

/* div for curved corner */
div#top-navigation div#corner { position:absolute; top:0; right:0;  z-index: 0; background-color: #1B4A7E; 
background-image: url(../../images/bg-nav-side-blue.png); background-position: top right; background-repeat: no-repeat; 
width:2%; /*_width:2.5%;*/ height: 5px; padding: 0; }

div#top-navigation ul { margin: 0; padding: 10px; text-align: center; }
div#top-navigation ul li { color:#ffffff; margin: 0; padding: 3px; list-style-image: none; list-style-type: none; display: inline;}
div#top-navigation a, a:link { color:#ffffff; text-decoration:none;}
div#top-navigation a:hover, a:focus { color:#FF6600 !important; text-decoration: underline !important; background-color:#1B4A7E; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	WEB BANNER - FLASH AND RANDOM PHOTOS
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#web-banner { border: 0; margin-top: 3px; margin-left:auto; margin-right:auto; width:750px; height: 141px; background-color:#ffffff; 
position:relative;}
/* need to use DIV to add border around object tag in Firefox */
div#web-banner div#flash-border { border: 1px solid #1B4A7E; width: 561px; height: 141px; margin: 0; }
div#web-banner div#flash-border object.flash-banner { margin: 0 3px 0 0;  border: 0;}
div#web-banner div#flash-border img.alternate-banner { margin: 0 3px 0 0;  border: 0;}

/* random photos */
div#feature-area-home {	background-color: #1B4A7E; position:absolute; top:0; right:0; width:186px; height: 141px; padding: 0; margin: 0;}
div#feature-area-home img.features-image { width:184px; height: 141px; margin: 0 !important; border: 1px solid #1B4A7E !important; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	BREADCRUMBS
	
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#bread-crumbs { position: relative; width: 75%; height: 100%; margin: 0 0 10px 0; padding: 0; border: 0; 
font-family: arial, verdana, helvetica, sans-serif; color:#1B4A7E; font-size: 0.8em; font-weight: bold;}
div#bread-crumbs a, a:link { color:#FF6600; text-decoration:none;}
div#bread-crumbs a:visited {color:#FF6600; text-decoration: none;}
div#bread-crumbs a:hover {color:#FF6600 !important; text-decoration: underline !important;}
div#bread-crumbs a:active {color:#FF6600; text-decoration: underline !important;}
div#bread-crumbs a:focus {color:#FF6600; text-decoration: underline !important;}
div#bread-crumbs img.icon { margin: 0 10px 0 0; }



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	CONTENT CONTAINER - TWO COLUMN

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* main container start with breadcrumbs  */
div#content-container-two-column {font-size: 0.8em; margin-top: 5px; margin-left:auto; margin-right:auto; padding: 5px 15px 10px 15px;
	width:718px; border:1px solid #1B4A7E;	background:url(../../images/bg-content-side.png) repeat-y 100% 0; position:relative;	}
	
div#content-main-two-column { width:540px; float:left; }
div#content-main-two-column img { border: 0; margin: 0; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	GOOGLE MAP CONTAINER 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#map-container { position: relative; border: 0; margin: 0; padding: 0; width: 535px; height: 255px; z-index: 1;}
div#map-container div.google-map { width: 500px; height: 250px; border: 1px solid #1B4A7E; }
div#map-container div#selection select { margin: 5px 0 5px 0 !important; border: 1px solid #C9E6F8;}
div#map-container a:hover { background-color: Transparent !important; }
div#map-container a.map-link:hover { background-color:#E3F2FB !important; }

/* remove copyright text */
div#map-container div.google-map span { display: none !important; }
div#map-container div.google-map a.gmnoprint terms-of-use-link { display: none !important; }
div#map-container div.google-map div#logocontrol { display: none !important; }


span.timestamp { font-size: 0.85em !important; float: left; display: block !important;} 

div#map-key { position: absolute; top: 255px; left: 265px; border: 0; z-index: 10; }
div#map-key img { border: 0; margin: 0; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	CONTENT CONTAINER - SIDE TWO COLUMN - SEARCH, ALERT, NEWS AND LOGIN AREAS

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* right hand container - make relative and place before breadcrumbs div - floating right */
div#content-side-two-column { overflow: inherit; height: auto; position: relative; top: 0; left: 8px; 
float:right; width: 170px; border: 0; padding: 0 0 10px 0; margin: 0;}

/* make sure width is 100% of parent to use all space */
div.SearchArea { width: 100%; margin: 10px 0 0 0; padding: 0; border: 0; }
div.SearchArea input.search-input { float: left; display: inline; width: 110px; border: 1px solid #C9E6F8; margin: 0; } 
div.SearchArea input.search-button { float: right; display: inline; width: 50px; border: 0; background-color: #1B4A7E;
padding: 3px; font-size: 0.8em; margin: 0; font-weight: bold; color: #fff; cursor: pointer;} 
div.SearchArea input.search-button:hover, div.SearchArea input.search-button:focus { color: #FF6600;} 

/* ALERT WIDGET CHANGES COLOUR ON ALERT - curved borders - no fill*/
div.Low-Alert-Top {background: url(../../images/alerts/dot-low.gif) 0 0 repeat-x; width: 100%; margin: 15px 0 10px 0;}
div.Low-Alert-Bottom {background: url(../../images/alerts/dot-low.gif) 0 100% repeat-x;}
div.Low-Alert-Left {background: url(../../images/alerts/dot-low.gif) 0 0 repeat-y;}
div.Low-Alert-Right {background: url(../../images/alerts/dot-low.gif) 100% 0 repeat-y;}
div.Low-Alert-BottomLeft {background: url(../../images/alerts/bl-low.gif) 0 100% no-repeat;}
div.Low-Alert-BottomRight {background: url(../../images/alerts/br-low.gif) 100% 100% no-repeat;}
div.Low-Alert-TopLeft {background: url(../../images/alerts/tl-low.gif) 0 0 no-repeat; }
div.Low-Alert-TopRight {background: url(../../images/alerts/tr-low.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em;}

div.Moderate-Alert-Top {background: url(../../images/alerts/dot-mod.gif) 0 0 repeat-x; width: 100%; margin: 15px 0 10px 0;}
div.Moderate-Alert-Bottom {background: url(../../images/alerts/dot-mod.gif) 0 100% repeat-x;}
div.Moderate-Alert-Left {background: url(../../images/alerts/dot-mod.gif) 0 0 repeat-y;}
div.Moderate-Alert-Right {background: url(../../images/alerts/dot-mod.gif) 100% 0 repeat-y;}
div.Moderate-Alert-BottomLeft {background: url(../../images/alerts/bl-mod.gif) 0 100% no-repeat;}
div.Moderate-Alert-BottomRight {background: url(../../images/alerts/br-mod.gif) 100% 100% no-repeat;}
div.Moderate-Alert-TopLeft {background: url(../../images/alerts/tl-mod.gif) 0 0 no-repeat; }
div.Moderate-Alert-TopRight {background: url(../../images/alerts/tr-mod.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em;}

div.High-Alert-Top {background: url(../../images/alerts/dot-high.gif) 0 0 repeat-x; width: 100%; margin: 15px 0 10px 0;}
div.High-Alert-Bottom {background: url(../../images/alerts/dot-high.gif) 0 100% repeat-x;}
div.High-Alert-Left {background: url(../../images/alerts/dot-high.gif) 0 0 repeat-y;}
div.High-Alert-Right {background: url(../../images/alerts/dot-high.gif) 100% 0 repeat-y;}
div.High-Alert-BottomLeft {background: url(../../images/alerts/bl-high.gif) 0 100% no-repeat;}
div.High-Alert-BottomRight {background: url(../../images/alerts/br-high.gif) 100% 100% no-repeat;}
div.High-Alert-TopLeft {background: url(../../images/alerts/tl-high.gif) 0 0 no-repeat; }
div.High-Alert-TopRight {background: url(../../images/alerts/tr-high.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em; }

div.VeryHigh-Alert-Top {background: url(../../images/alerts/dot-veryhigh.gif) 0 0 repeat-x; width: 100%; margin: 15px 0 10px 0;}
div.VeryHigh-Alert-Bottom {background: url(../../images/alerts/dot-veryhigh.gif) 0 100% repeat-x;}
div.VeryHigh-Alert-Left {background: url(../../images/alerts/dot-veryhigh.gif) 0 0 repeat-y;}
div.VeryHigh-Alert-Right {background: url(../../images/alerts/dot-veryhigh.gif) 100% 0 repeat-y;}
div.VeryHigh-Alert-BottomLeft {background: url(../../images/alerts/bl-veryhigh.gif) 0 100% no-repeat;}
div.VeryHigh-Alert-BottomRight {background: url(../../images/alerts/br-veryhigh.gif) 100% 100% no-repeat;}
div.VeryHigh-Alert-TopLeft {background: url(../../images/alerts/tl-veryhigh.gif) 0 0 no-repeat; }
div.VeryHigh-Alert-TopRight{background: url(../../images/alerts/tr-veryhigh.gif) 100% 0 no-repeat; padding:10px; font-size: 0.8em; }


/* BLUE WIDGETS */
/* The background colour must always be assigned to the very first CSS rule to stop overlapping bg images */
/* Whichever element we assign padding to, each of the elements inside it will inherit that padding. So apply to very last DIV*/

div.login-account-bl { background: url(../../images/bl-blue.gif) 0 100% no-repeat #E3F2FB ; width: 100%; margin: 10px 0 10px 0;  }
div.login-account-br {background: url(../../images/br-blue.gif) 100% 100% no-repeat}
div.login-account-tl {background: url(../../images/tl-blue.gif) 0 0 no-repeat ;}
div.login-account-tr {background: url(../../images/tr-blue.gif) 100% 0 no-repeat; padding: 10px;  font-size: 0.8em; }
div.login-account-tr input.input-username { margin: 0; padding: 0; float: none; display: inline; width: 80px; border: 1px solid #C9E6F8;  } 
div.login-account-tr input.input-password { margin: 0; padding: 0; float: none; display: inline; width: 80px; border: 1px solid #C9E6F8;  } 
div.login-account-tr input.login-button { margin: 3px 0 0 0; float: none; display: inline; width: 50px; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em; cursor: pointer;}
div.login-account-tr input.login-button:hover, div.login-account-tr input.login-button:focus { color: #FF6600; }

div.login-account-tr a {color:#FF6600; }
div.login-account-tr a:hover, a:focus { text-decoration: underline; }
/* table in login box */
div.login-account-tr table.login { margin: 0 !important; padding: 0; border: 0; width: 95%;  }
div.login-account-tr table td { padding: 0; }

div.kids-bl {background: url(../../images/bl-blue.gif) 0 100% no-repeat #E3F2FB ; width: 100%; margin: 10px 0 10px 0; }
div.kids-br {background: url(../../images/br-blue.gif) 100% 100% no-repeat;}
div.kids-tl {background: url(../../images/tl-blue.gif) 0 0 no-repeat ;}
div.kids-tr {background: url(../../images/tr-blue.gif) 100% 0 no-repeat; padding: 10px 8px 10px 8px; color: #1B4A7E; 
font-weight: normal; font-size: 0.75em; font-style: normal; }

/* news items */
div.news-bl {background: url(../../images/bl-blue.gif) 0 100% no-repeat #E3F2FB ; width: 100%; margin: 10px 0 10px 0; }
div.news-br {background: url(../../images/br-blue.gif) 100% 100% no-repeat;}
div.news-tl {background: url(../../images/tl-blue.gif) 0 0 no-repeat ;}
div.news-tr {background: url(../../images/tr-blue.gif) 100% 0 no-repeat; padding: 10px 8px 10px 8px; color: #1B4A7E; 
font-weight: normal; font-size: 0.75em; font-style: normal; }

/* news list */
div.news-tr ul#news-list { margin: 0; padding: 0; border: 0;}
div.news-tr ul#news-list li { clear: both; display: block !important; margin: 10px 0 10px 0 !important; padding: 0 0 0 15px; border: 0; 
                              background: url(../../Images/Icons/bullet.gif) 0 12px no-repeat; height: 45px;  list-style-type: none;}
div.news-tr ul#news-list li img.thumb { float: left; clear: both; height: 40px; width: 40px; border: 2px solid #C9E6F8 !important; margin: 3px;}
div.news-tr ul#news-list li a { margin: 0; padding: 0;}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	CONTENT CONTAINER - THREE COLUMN - USED FOR ALL CONTENT PAGES EXCEPT HOME

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#content-container-three-column { margin-top:3px; /*margin-left:auto; margin-right:auto;*/ padding:0; width: 540px; border: 0; 
                                     position:relative;}
	
div#content-main-three-column { width: 100%; float:left; margin: 0; }

div#content-main-three-column  p { font-size: 0.85em; }
div#content-main-three-column  p.clear-map { clear: both; }

/* lists */
div#content-main-three-column ul { margin: 0; padding: 0; border: 0; font-size: 0.85em;}
div#content-main-three-column ul li { margin: 0; padding: 0 0 0 15px; border: 0; background: url(../../images/arrow.gif) 0 8px no-repeat; 
 list-style-type: none; }
div#content-main-three-column ul li a {color:#FF6600; }
div#content-main-three-column ul li a:hover, a:focus { text-decoration: underline; }

div#content-main-three-column ol { margin: 0; padding: 0; border: 0; font-size: 0.85em; }
div#content-main-three-column ol li { margin: 0 0 0 25px; padding: 0 0 0 5px; border: 0; }
div#content-main-three-column ol li a { color:#FF6600; }
div#content-main-three-column ol li a:hover, a:focus { text-decoration: underline; }

/* verisign flash logo  - for CSS border put flash inside a DIV*/
div#content-main-three-column object { float: left; margin: 0 10px 0 0;}

/* select/input buttons for form */

div#content-main-three-column select { margin: 0; border: 1px solid #C9E6F8; }
div#content-main-three-column select:focus { background-color: Yellow;}

div#content-main-three-column input.TextBox { color: #000; width: 325px; margin: 0 2px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }
div#content-main-three-column input:focus { background-color: Yellow;}

div#content-main-three-column input.Submit { margin: 5px 5px 0 0; float: none; width: 200px; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.Submit:hover, div#content-main-three-column input.Submit:focus { color: #FF6600 !important; cursor: pointer;}

div#content-main-three-column input.SiteButton { margin: 0; float: none; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.SiteButton:hover, div#content-main-three-column input.SiteButton:focus { color: #FF6600 !important; cursor: pointer;}

/* data download disabled button */
div#content-main-three-column input.SiteButtonDisabled { margin: 0; float: none; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #657383; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.SiteButtonDisabled:hover, div#content-main-three-column input.SiteButtonDisabled:focus { color: #657383; cursor: pointer;}


/* RSS page */
div#content-main-three-column input.RSS { margin: 5px 5px 5px 0; float: none; display: inline; width: 200px; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.RSS:focus { color: #FF6600;}

/* news page */
div#content-main-three-column img.news-image { float: left; margin: 0 5px 5px 0; /*width: 200px; height: 400px;*/ 
                                               border: 2px solid #C9E6F8 !important; }



/* ##################  AQ NEAR ME ################### */

/* tabs */
div#tab-container { width: auto; clear: both; float: none; margin: 5px 0 10px 0 !important; padding: 0; }
div#tab-container ul#tabs { margin: 0; padding: 0 0 3px 0; width: 100%;}
/* float left */
div#tab-container ul#tabs li { display: inline; float: left; background-image: none !important; padding: 0; margin: 0; }
/* keep block for IE and dont float or they jump out of li */
div#tab-container ul#tabs li a	{ display: block; float: none; background: #E3F2FB;  border-color: #a8d8f4; border-style: dashed; border-width: 1px; border-right: 0;
					            padding: 5px; margin: 0;  font-size: 0.8em; }	
div#tab-container ul#tabs li a.border-right { border-right: 1px dashed #a8d8f4; }
div#tab-container ul#tabs li a:hover, div#tab-container ul#tabs li a:focus	{ background: #a8d8f4; color: #ffffff !important; border-color: #ffffff !important;}
div#tab-container ul#tabs li a.selected	{ background: #a8d8f4 !important; color: #ffffff !important;  border-color: #ffffff !important; }



/* Monitoring Data user control */

div#content-main-three-column table.Bulletins { clear: both; position: static; margin: 10px 5px 5px 0; padding: 0; width: 85%; border: 1px solid #C9E6F8; 
                                border-collapse: collapse; border-spacing: 0; font-size: 0.85em; }
div#content-main-three-column table.Bulletins th { background-color: #C9E6F8; font-weight: bold; color: #1B4A7E; padding: 3px; 
                                                   border: 1px solid #C9E6F8; }
div#content-main-three-column table.Bulletins th.text-left { text-align: left !important; }
div#content-main-three-column table.Bulletins tr.header td { background-color: #C9E6F8 !important; font-weight: bold !important; 
                                                             color: #1B4A7E !important; }

div#content-main-three-column table.Bulletins td { width: 50%; text-align: center; vertical-align: top; font-weight: normal; 
                                                   color: #000; padding: 5px; border: 1px solid #C9E6F8; }

/* images */
div#content-main-three-column table.Bulletins td img.index-icon { width: 22px; height: 22px; border: 0 !important;  }
div#content-main-three-column table.Bulletins td img.graph-image { border: 0; margin: 0; }


/* Monitoring Graph tools user control */

div#content-main-three-column table.Graphs { clear: both; position: static; margin: 10px 5px 5px 0; padding: 0; width: 95%; border: 1px solid #C9E6F8; 
                                border-collapse: collapse; border-spacing: 0; font-size: 0.85em; }
div#content-main-three-column table.Graphs th { text-align: left; background-color: #C9E6F8; font-weight: bold; color: #1B4A7E; padding: 3px; 
                                                   border: 1px solid #C9E6F8; }
div#content-main-three-column table.Graphs tr.header td { background-color: #C9E6F8 !important; font-weight: bold !important; 
                                                             color: #1B4A7E !important; }
div#content-main-three-column table.Graphs tr.steps td { background-color: #E3F2FB !important; font-weight: bold !important; }
div#content-main-three-column table.Graphs tr.steps-no-bold td { background-color: #E3F2FB !important; font-weight: normal !important; }

div#content-main-three-column table.Graphs td { width: 50%; text-align: left; vertical-align: top; font-weight: normal; 
                                                   color: #000; padding: 5px; border: 1px solid #C9E6F8; }
div#content-main-three-column table.Graphs td.title { width: 25% !important; font-weight: bold; }
div#content-main-three-column table.Graphs td.text { width: 75% !important; }

/* images */
/*site photos*/
div#content-main-three-column table.Graphs td img.site-photo { width: 375px !important; height: 225px !important;
                                                                border: 1px solid #C9E6F8 !important; margin: 0; }

div#content-main-three-column table.Graphs td img.index-icon { width: 22px; height: 22px; border: 0 !important;  }
div#content-main-three-column table.Graphs td img.graph-image { border: 0; margin: 0; }

/* plot graph form */

div#content-main-three-column table.Graphs td span.CheckBoxList { font-size: 0.8em; }
div#content-main-three-column table.Graphs td span.CheckBoxList input { margin: 0 3px 0 4px; vertical-align: middle;  }
div#content-main-three-column table.Graphs td input.TextBox { color: #000; width: 120px; margin: 0 2px 0 0; padding: 1px;
                                                              border: 1px solid #C9E6F8;  }
div#content-main-three-column table.Graphs td span.view-period { font-style: normal !important; font-weight: normal !important;}
                                                              
/* stats page */
div#content-main-three-column table.Graphs td input.radio { margin: 0 5px 5px 0; padding: 1px; border: 0 !important; vertical-align: bottom !important; }

/* results table */
div#content-main-three-column table.Results { clear: both; position: static; margin: 10px 5px 5px 0; padding: 0; width: 100%; border: 1px solid #C9E6F8; 
                                border-collapse: collapse; border-spacing: 0; }
div#content-main-three-column table.Results th { text-align: left; background-color: #C9E6F8; font-weight: bold; color: #1B4A7E; padding: 3px; 
                                                   border: 1px solid #C9E6F8; }
div#content-main-three-column table.Results tr.header td { background-color: #C9E6F8 !important; font-weight: bold !important; 
                                                             color: #1B4A7E !important; }
div#content-main-three-column table.Results tr.steps td { background-color: #E3F2FB !important; font-weight: bold !important; }

div#content-main-three-column table.Results td {text-align: left; vertical-align: top; font-weight: normal; color: #000; 
                                                padding: 5px; border: 1px solid #C9E6F8; }
div#content-main-three-column table.Results td.pollutant { width: 25% !important; }
div#content-main-three-column table.Results td.objective { width: 50% !important; }
div#content-main-three-column table.Results td.achieved { width: 75% !important; }


/* calender styles */
div#content-main-three-column div.calenderPanel { font-size: 0.8em !important; z-index: 100 !important; position: relative; 
                                                  background-color: White;}

div#content-main-three-column table.calender { width: 120px; margin: 0; border: 0; padding: 0; border-collapse: collapse; border-spacing: 0; 
                                               z-index: 999 !important; position: relative; }
div#content-main-three-column table.calender th { border: 1px solid #C9E6F8; }
div#content-main-three-column table.calender td { border: 1px solid #C9E6F8; }
div#content-main-three-column table.calender select { z-index: 0 !important;/*margin: 0;*/ border: 1px solid #C9E6F8 !important; 
                                                      padding: 2px; color: #000;}


/* EMISIONS */

div#content-main-three-column table.Emissions { clear: both; position: static; margin: 10px 5px 5px 0; padding: 0; width: 90%; border: 1px solid #C9E6F8; 
                                border-collapse: collapse; border-spacing: 0; font-size: 0.80em; }
div#content-main-three-column table.Emissions th { text-align: left; background-color: #C9E6F8; font-weight: bold; color: #1B4A7E; 
padding: 2px; border: 1px solid #C9E6F8; }
div#content-main-three-column table.Emissions tr.header td { background-color: #C9E6F8 !important; font-weight: bold !important; }
div#content-main-three-column table.Emissions td { text-align: left; vertical-align: top; font-weight: normal; 
                                                   color: #000; padding: 2px; border: 1px solid #C9E6F8; }
/* Javascript effects for alternate rows and rollovers */
div#content-main-three-column table.Emissions tr.alt td { background: #E3F2FB; } 
div#content-main-three-column table.Emissions tr.over td, div#main-text table.Access tbody tr:hover td { background: #a8d8f4; }
div#content-main-three-column table.Emissions tr.over+tr td { background-image: url(../../images/shadow.png); background-repeat: repeat-x;}
                                                   
/* CONTACT WEBFORM */
div#content-main-three-column table.Contact { clear: both; margin: 5px 5px 5px 0; padding: 0; width: 95%; border: 0; 
                                border-collapse: collapse; border-spacing: 0; font-size: 0.85em; }
div#content-main-three-column table.Contact th { text-align: left; background-color: #C9E6F8; font-weight: bold; color: #1B4A7E; padding: 3px; 
                                                   border: 1px solid #C9E6F8; }
div#content-main-three-column table.Contact tr.header td { background-color: #C9E6F8; font-weight: bold !important; 
                                                             color: #1B4A7E !important; }
div#content-main-three-column table.Contact td { text-align: left; vertical-align: top; font-weight: normal; 
                                                   color: #000; padding: 5px; border: 0; }
div#content-main-three-column table.Contact td.title { width: 25% !important; font-weight: bold !important;}
div#content-main-three-column table.Contact td.text { width: 75% !important; }
div#content-main-three-column table.Contact td input { color: #000; width: 200px; margin: 0; padding: 1px;
                                                              border: 1px solid #C9E6F8;  }
div#content-main-three-column table.Contact td TextArea { color: #000; width: 200px; margin: 0; padding: 1px;
                                                              border: 1px solid #C9E6F8;  }
div#content-main-three-column table.Contact td select { color: #000; width: 120px !important; margin: 0; padding: 0 !important;
                                                              border: 1px solid #C9E6F8 !important;  }
div#content-main-three-column table.Contact input.Button { margin: 0; float: none; border: 0; width: 50px !important; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column table.Contact input.Button:hover, div#content-main-three-column table.Contact input.Button:focus { color: #FF6600 !important; cursor: pointer;}


/* accessibility table */
div#content-main-three-column table.Access { margin: 5px; padding: 0; width: 65%; border: 1px solid #C9E6F8; text-align: left; 
                                border-collapse: collapse; border-spacing: 0; font-size: 0.85em; }
div#content-main-three-column table.Access th { background-color: #E3F2FB; font-weight: bold; color: #000; padding: 3px; border: 1px solid #C9E6F8; }
div#content-main-three-column table.Access td { vertical-align: top;  background-color: #fff; font-weight: normal; color: #000; padding: 3px; border: 1px solid #C9E6F8; }
/* Javascript effects for alternate rows and rollovers */
div#content-main-three-column table.Access tr.alt td { background: #E3F2FB; } 
div#content-main-three-column table.Access tr.over td, div#main-text table.Access tbody tr:hover td { background: #a8d8f4; }
div#content-main-three-column table.Access tr.over+tr td { background-image: url(../../images/shadow.png); background-repeat: repeat-x;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	CMS STAFF AREA

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* GridView and DetailsView CSS class for tables */
div#content-main-three-column table.User-Table { width: 95% !important; position: relative; }
div#content-main-three-column table.User-Table th { padding: 3px; border-top: 0; border: 1px solid #C9E6F8; background-color: #C9E6F8; color: #1B4A7E; text-align: left;}
div#content-main-three-column table.User-Table td { padding: 3px; border:1px solid #C9E6F8; text-align: left;}
div#content-main-three-column table.User-Table tr.bold td { font-weight: bold; }

/* standard style for all fieldsets */
div#content-main-three-column fieldset { width: 89%; padding:15px; border: 1px solid #C9E6F8;  }
div#content-main-three-column legend { color:#1B4A7E; padding:5px 3px 10px 3px; font-weight: bold;}

/* input buttons */
div#content-main-three-column input.Admin { margin: 5px 5px 0 0; float: none; display: inline; width: 200px; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.Admin:hover, div#content-main-three-column input.Admin:focus { color: #FF6600 !important; cursor: pointer;}


/* NEWS ITEMS */

/* add news */
div#content-main-three-column fieldset#add-news table.add-news { width: 100%; border: 0; margin: 0; border-collapse: collapse; border-spacing: 0; }
div#content-main-three-column fieldset#add-news table.add-news td { padding: 3px; border: 0; vertical-align: top !important; }
div#content-main-three-column fieldset#add-news table.add-news td.text-cell { width: 35%; }
div#content-main-three-column fieldset#add-news table.add-news td.control-cell { width: 65%;  }

div#content-main-three-column fieldset#add-news table.add-news input { color: #000; width: 250px; margin: 0 2px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }
div#content-main-three-column fieldset#add-news table.add-news input.TextBox { color: #000; width: 250px; margin: 0 2px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }
div#content-main-three-column fieldset#add-news table.add-news textarea.TextArea { font-family: MS Shell Dlg; font-size: 1.2em; color: #000; width: 250px; height: 150px; 
                                                                                   margin: 0 2px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }
div#content-main-three-column fieldset#add-news table.add-news input.FileUpload { color: #000; width: 225px; margin: 0 5px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }

div#content-main-three-column fieldset#add-news input.Button { width: 20% !important; border: 0 !important; background-color: #1B4A7E;
padding: 3px; font-size: 0.8em; margin: 0; font-weight: bold; color: #fff !important; }
div#content-main-three-column fieldset#add-news input.Button:hover, 
div#content-main-three-column fieldset#add-news input.Button:focus { color: #FF6600 !important; cursor: pointer; }


/* edit news grid and detailsview */
div#content-main-three-column table.NewsSkin { margin: 5px; padding: 0; width: 85%; border: 1px solid #C9E6F8; 
                                border-collapse: collapse; border-spacing: 0; font-size: 0.85em; }
div#content-main-three-column table.NewsSkin th { background-color: #C9E6F8; font-weight: bold; color: #1B4A7E; padding: 3px; border: 1px solid #C9E6F8; }
div#content-main-three-column table.NewsSkin th.text-left { text-align: left !important; }
div#content-main-three-column table.NewsSkin td { vertical-align: top; font-weight: normal; color: #000; padding: 3px; border: 1px solid #C9E6F8; }
div#content-main-three-column table.NewsSkin td.centre-all { width: 50%; text-align: center;}

div#content-main-three-column table.NewsSkin tr.header td { background-color: #C9E6F8 !important; font-weight: bold !important; color: #1B4A7E !important; }
div#content-main-three-column table.NewsSkin td.text-cell { width: 25% !important; }
div#content-main-three-column table.NewsSkin td.control-cell { width: 75% !important;  }
/* images */
div#content-main-three-column table.NewsSkin td img.thumbnail { width: 75px; height: 75px; border: 2px solid #C9E6F8 !important;  }

/* forms */
div#content-main-three-column table.NewsSkin input.TextBox { font-size: 1.0em !important;  color: #000; width: 325px; margin: 0 2px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }
div#content-main-three-column table.NewsSkin textarea.TextArea { font-family: MS Shell Dlg; font-size: 1.0em !important; color: #000; width: 325px; height: 150px; 
                                                                                     margin: 0 2px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }
div#content-main-three-column table.NewsSkin input.FileUpload { color: #000; width: 225px; margin: 0 5px 0 0; padding: 1px; border: 1px solid #C9E6F8;  }




/* submit buttons for no javascript page */

div#content-main-three-column input.select { margin: 0; width: 50px; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.select:focus { color: #FF6600;}

div#content-main-three-column input.edit { margin: 0; width: 200px; border: 0; 
background-color: #1B4A7E; font-weight: bold; color: #fff; padding: 3px; font-size: 0.8em;}
div#content-main-three-column input.edit:focus { color: #FF6600;}



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	HOME PAGE LAYOUT - THREE COLUMN SECTION

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

div#three-column-container { clear: both; background: #ffffff url(../../images/bg-three-column-home.png) repeat-y; padding :0; 
                             margin: 10px 0 10px 0; }
div#three-column-container p { font-size: 0.85em; }

div#three-column-side1 { float:left; width:30%;	}

div#three-column-side2 { float:right; width:30%;}
div#three-column-side2 ul { margin: 0; padding: 0; border: 0; }
div#three-column-side2 ul li { margin: 0; padding: 0 0 0 15px; border: 0; background: url(../../images/arrow.gif) 0 8px no-repeat; 
 list-style-type: none; }
div#three-column-side2 ul li a {color:#FF6600; }
div#three-column-side2 ul li a:hover, a:focus { text-decoration: underline; }

div#three-column-middle {width:30%; margin:0px 32% 0px 35%;}
	
	
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	FOOTER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
div#footer { border: 0; color: #ffffff !important; clear: both; background: #1B4A7E url(../../images/bg-nav-blue.png) bottom left no-repeat; 
             margin-top: 3px; margin-left: auto; margin-right:auto; width:730px; padding: 0.8em 0 1em 20px; 
             position:relative; font-size:0.7em; font-weight: bold; z-index: 0 !important;}
	
div#footer div#blue-corner { z-index:0 !important; background: url(../../images/bg-nav-side-blue.png) 100% 100% no-repeat #1B4A7E;
width: 2%;  position:absolute; top: 20px; right: 0; padding: 0;}

div#footer span {position: absolute; top: 0.8em; right: 20px; bottom: 0; /*left: 0;*/ z-index: 5; margin: 0; padding: 0; 
display: inline; border: 0; }

div#footer a:link, #footer a:visited {color:#ffffff; text-decoration:none;}
div#footer a:hover { color:#ffffff; text-decoration: underline;}
div#footer a:active { color:#FF6600;}
div#footer a:focus { color:#FF6600;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	MISC CLASSES

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Sussex colour scheme */
dark-blue { color: #1B4A7E; }
med-blue { color: #a8d8f4; }
blue { color: #C9E6F8; }
light-blue { color: #E3F2FB; }

.green-bold { color: Green; font-weight: bold;}

.none { display: none !important; }
.block { display: block !important;}
.clear { clear: both !important;}


.arrow { vertical-align: middle;	}
.inline { display: inline;}
.orange {color: #FF6600; }
.bold { font-weight: bold; }
.bold-larger { font-weight: bold; font-size: larger; }
.italic { font-style: italic;}

.left-quote { font-size: x-large; vertical-align: middle; line-height: inherit;}
.right-quote { font-size: x-large; vertical-align: bottom; line-height: inherit;}

.float-left { float: left;}
.float-right { float: right;}
.float-left-table { float: left; display: inline-table;}
.float-right-table { float: right; display: inline-table;}

.backgroundRed { background-color : Red !important;}

.small-italic { font-style: italic; font-size: smaller;}
.small-bold { font-weight: bold; font-size: smaller;}

.pager-text { font-size: 0.9em;}
.smaller-text { font-size: smaller;}
.xx-smaller-text { font-size: xx-small;}
.footer-text { font-size: 0.9em !important;}

.larger-text { font-size: large;}

.red-bold { color: Red; font-weight: bold;}
.red-bold-small { color: Red; font-weight: bold; font-size: xx-small;}

.no-bg { background-color: Transparent;}
.white-space { white-space: normal;}
.forecast-text { font-size: 0.85em !important;} 
.centre { text-align: center;}
.red-bold-centre { color: Red; font-weight: bold; text-align: center;}
.vertical-top { vertical-align: top;}
.text-centre { text-align: center !important;}