body, html {
background-color: #334D66;; /*whole page background color*/
color: #000000; /*document font color*/
font-family: verdana, lucida, arial, helvetica, sans-serif;
padding: 0;
text-align: justify; /*text alignment*/

}

html {
		overflow-y:scroll;
}


.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



#wrapper{
width: 960px;
min-width: 960px;
max-width: 99.5%;
color: #000000;
background-color: #FFFFFF; /*page content background color*/
margin: 0px auto;
/*border: 1px solid #666666;*/
text-align: left; /*text alignment*/
min-height:450px;
height:auto !important;
height:450px;
}

#header {
		background-color: #91CCEF;
		background: url("/images/banner_background_right.gif") 50% 0% repeat-x;
		height:136px;
		padding:0px;
		margin:0px;
		text-align:left;
	}

#content {
		padding:1em 1em;
		font-size: 0.8em;
		line-height:1.4;
}		
/*
#content p, ul, ol {
font-size: 0.8em;
line-height:1.4;
}

	table td {
		font-size: 0.8em;	
		line-height:1.4;		
	}
*/
 a:link, a:visited {
	color: #1193CA;
	text-decoration: none;
	/*border-bottom: 1px dotted #007297;*/
}

 a:hover {
	color: #74C7F1;
	text-decoration: none;
	border: 0px none;
}

.permanent_link:link, .permanent_link:visited, .permanent_link:hover, .permanent_link:active{
	color: #000000;
	text-decoration: none;
}

h1{
font-family: verdana, lucida, arial, helvetica, sans-serif;
font-size: 1.3em;  
color: #000000; 
background-color: #FFFFFF;
font-style: normal;  
font-weight: normal;     
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
/*margin-left:10px;*/
padding-top: 15px;
}

 h2{
font-family: verdana, lucida, arial, helvetica, sans-serif; 
font-size: 1em;  
color: #000000; 
background-color: #FFFFFF;
font-style: normal;  
font-weight: bold;     
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 10px;
/*margin-left:10px;*/
padding-top: 0px;
}

 h3{
font-family: verdana, lucida, arial, helvetica, sans-serif; 
font-size: 1em;  
color: #000000; 
background-color: #FFFFFF;
font-style: normal;  
font-weight: normal;     
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
}

 h4{
font-family: verdana, lucida, arial, helvetica, sans-serif;
font-size: 1em;  
color: #000000; 
background-color: #FFFFFF;
font-style: normal;  
font-weight: bold;     
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
/*margin-left:10px;*/
padding-top: 0px;
}

 h5{
font-family: verdana, lucida, arial, helvetica, sans-serif;
font-size: 1em;  
color: #000000; 
background-color: #FFFFFF;
font-style: italic;  
font-weight: normal;     
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
/*margin-left:10px;*/
padding-top: 0px;
}

 h6{
font-family: verdana, lucida, arial, helvetica, sans-serif;
font-size: 1.2em;  
color: #000000; 
background-color: #FFFFFF;
font-style: italic;  
font-weight: normal;     
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
/*margin-left:10px;*/
padding-top: 0px;
}

img{
border: none;
vertical-align:bottom;
}

.transparentimg{
behavior: url(/iepngfix.htc);
} 

.imgRight {
float:right;
margin:5px 0px 5px 10px;
position:relative;
text-decoration: none;
}

.imgLeft {
float:left;
margin:5px 10px 5px 0px;
position:relative;
text-decoration: none;
}


#carouselframe{
width: 890px;
height: 260px;
padding: 0;
margin-left: auto ;
margin-right: auto ;
border: 2px solid #74C7F1;
    -moz-border-radius : 12px;
    -webkit-border-radius : 12px;
    -ms-border-radius : 12px;    
    border-radius: 12px;
}


#carouselcontents{
position: absolute; /*leave this value alone*/
width: 305px;
height: 250px;
padding: 10px 0 0 0;
float:left;

    -moz-border-radius : 9px 0 0 9px;
    -webkit-border-radius : 9px 0 0 9px;
    -ms-border-radius : 9px 0 0 9px;
    border-radius: 9px 0 0 9px;
}

a.contentsitems{
display:block;
padding: 5px 10px 15px 10px;  
border-bottom: 1px solid #cccccc;
text-decoration:none;
}

a.contentsitems:hover{
background-color:#eeeeee;
padding: 5px 10px 15px 10px;  
text-decoration:none;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 585px;
height: 260px;
padding: 0;
float:right;
border-left: 2px solid #74C7F1;
font-size: 0.85em;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel a.panel{
display:block;
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
cursor:pointer;
height:250px;
padding: 5px 10px; /*margin around each panel*/
width: 565px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
color:#000000;
}

.stepcarousel:active, a.stepcarousel:visited{
display:block;
/*height:100%;*/
/*width:100%; */
/*background-color:#ffffff;*/
text-decoration:none;
}
/*
.stepcarousel:hover{
background-color:#E1EBF4;
text-decoration:none;
color:#000000;
}
*/
.stepcarousel a.panel:hover{
background-color:#E1EBF4;
text-decoration:none;
color:#000000;
    -moz-border-radius : 0 9px 9px 0;
    -webkit-border-radius : 0 9px 9px 0;
    -ms-border-radius : 0 9px 9px 0; 
    border-radius: 0 9px 9px 0;
}

.panel_title{
display:block;
color:#007297;
padding:0 0 10px 0;
margin:0;
font-weight:bold;
text-transform: uppercase;
}

.panel_intro_text{
display:block; 
color:#000000;
margin:0 0 10px 0; 
padding:0;
}



.thumbnails{
float: left;
width: 140px;
padding-left: 0px;
padding-right: 10px;
text-align: right; /*text alignment*/
}

.slider_thumbnails{
float: left;
width: 140px;
height: 212px;
padding-left: 0px;
padding-right: 10px;
text-align: right; /*text alignment*/
}

.large_slider_thumbnails{
float: left;
width: 180px;
height: 212px;
padding-left: 0px;
padding-right: 10px;
text-align: right; /*text alignment*/
}

.descriptions{
float: right;
/*width: 470px;*/
width: 760px;
min-width: 760px;
padding-right: 10px;
text-align: left; /*text alignment*/
}

.slider_descriptions{
/*width: 470px;*/
width: 550px;
min-width: 550px;
padding-right: 10px;
text-align: left; /*text alignment*/
}

.tableindent {
margin-left:15px;
margin-right:15px;
}

table.ecocheck td {
font-size: 0.8em;
/*border-width: 0px;*/
padding: 5px;
/*border-style:none;*/
vertical-align:top;	
}	

th {
font-size: 1em;
font-family: arial, helvetica, sans-serif;
color: #134c60;
background-color: #FFFFFF;
}


.leftimage{
clear: left;
float: left;
margin-left:5px;
margin-right: 15px;
}

.fixedimage{
margin-left:5px;
margin-right: 15px;
}


 .rowofimages
{
float: left;
margin: 0 15px 15px 0;
}

.clearboth { clear: both; }

.rightimage{
float: right;
margin-left: 15px;
padding-right: 15px;
}

hr {
clear: both;
visibility: hidden;
size: 0;
margin-top: -7px;
}

#footer{
clear:both;
/*border-top: 1px solid #dddddd;*/
background-color: #ffffff; /*footer background color*/
color: #134c60;
padding: 5px;
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 0.55em;
text-align:center
}

.specialheading {
	color: #DD6600;
}


table.filebrowser {
 	font-size:0.9em;
	background-color: #FFFFFF;
 	border-width: 1px 1px 1px 1px;
	border-spacing: 0px;
	border-style: solid;
	border-color: #cccccc;
	border-collapse: collapse;
	vertical-align:top;	
 }
 
table.filebrowser td {
	border-width: 0px 0px 0px 0px;
	padding: 4px 4px 4px 4px;
	border-style: none;
	border-color: #cccccc;
	vertical-align:top;	
}

table.filebrowser tr {
	behavior: url('IEFixes.htc');
}

table.filebrowser tr:hover, tr.hover {
   background-color: #F1F3F5;
}
	
.hoverbox p {
    margin : 10px 0px;
    padding : 5px 10px;
    clear : both;
	text-align:center;
	border: #E6EDF5 1px solid;
	background-color : #f1f3f5;
    -moz-border-radius : 8px;
    border-radius : 8px;

}

.hoverbox td {
	font-size:1em;
}

.hoverbox p:hover, .hoverbox p.sfhover {
    margin : 10px 0px;
    padding : 5px 10px;
    clear : both;
    background-color : #E1EBF4;
    -moz-border-radius : 8px;
    border-radius : 8px;

}


.hoverbox p a {
    color: #007297;
}

.hoverbox p a:hover {
    color: #664A2C;
}


/*Three equal columns*/
#left_column{
float:left;
width:27%;
text-align:center;
}

#middle_column{
float:left;
width:28%;
text-align:center;
}

#right_column{
float:left;
width:45%;
text-align:center;
}

#forecast_left_column{
float:left;
width:30%;
text-align:center;
}

#forecast_middle_column{
float:left;
width:30%;       
text-align:center;
}


#forecast_right_column{
float:left;      
width:30%;
text-align:center;                  
} 

#summary_box{
background-color:#FFFFDB;
border: solid 1px #F3E533;
width:99%;
}

#summary_text{
float:left;
/*width:45%;*/
margin: 5px;
}

#new_summary_text{
float:left;
/*width:75%;*/
margin: 5px;
}

#new_summary_text li{
 margin: 1em 0;
}

#forecast_summary{
/*float:left;*/
/*width:60%;*/
margin: 5px;
}

#forecast_map{
float:right;
}

#google_map{
float:right;
}

#locator_map{
float:right;
margin: 20px 5px 5px 0px;
}

#indicator_maps{
float: left;
margin-left:5px;
margin-right: 15px;
}

#indicator_text{
float:right;
width:62%;
margin: 5px;
}

#forecast_indicator_text{
float:right;
width:70%;
margin: 5px;
}

#new_indicator_text{
float:right;
width:47%;
margin: 5px;
}

#indicator_graphs{
float: left;
margin-left:5px;
margin-right: 15px;
}

#indicator_graph_text{
margin: 5px;
}

.summary_row{
border-top: solid 2px #1193CA;
height:0px;
line-height:0px;
}

.index_verypoor{
background-color:#ED1C24; 
/*border: solid 1px #000; */
text-align:center;
}

.index_poor{
background-color:#F47720; 
/*border: solid 1px #000; */
text-align:center;
}

.index_mod{
background-color:#FBCC0B; 
/*border: solid 1px #000;*/
text-align:center;
}

.index_good{
background-color:#B0D135; 
/*border: solid 1px #000; */
text-align:center;
}

.index_verygood{
background-color:#70A842; 
/*border: solid 1px #000; */
text-align:center;
}

.index_excellent{
background-color:#00744D; 
/*border: solid 1px #000; */
text-align:center;
}

.index_nodata{
background-color:#FFFFFF; 
/*border: solid 1px #000; */
text-align:center;
}

.overview_score{
text-align:center;
width:80px;
}


#acknowledgements{
border-top: solid 2px #1193CA;
font-size:0.8em;
}

#topnav{
font-size:0.9em;
}

#news_box{
background-color:#FFFFDB;
border: solid 1px #F3E533;
padding:10px 10px 0px 10px;
font-size:0.85em;
width: 800px;
margin:0 auto;
}

.news_box_image{
float: left;
width: 60px;
}

.news_box_text{
float: right;
width: 730px;
}

#explanation_box{
background-color:#FFFFDB;
border: solid 1px #F3E533;
padding:5px;
font-size:0.8em;
}

#indicator_box{
float:right;
width:420px;
background-color:#FFFFDB;
border: solid 1px #F3E533;
padding:5px;
font-size:0.8em;
}

#summaries_box{
float:right;
width:250px;
background-color:#FFFFDB;
border: solid 1px #F3E533;
padding:5px;
font-size:0.8em;
}

#threshold_table_box{
background-color:#FFFFFF;
font-size:1em;
}

#regionsummary_table_box{
background-color:#FFFFFF;
font-size:1em;
}


table.tabledottedbackground {
 background-color: #FFFFFF;
 vertical-align:top;
 font-size: 0.9em;
 line-height:1.4;
}

table.tabledottedbackground td {
	border-bottom: #666666 dotted 1px;
	vertical-align:top;
}

table.tabledottedbackground tr {
	behavior: url('/IEFixes.htc');
}

table.tabledottedbackground tr:hover, tr.hover {
   background-color: #DCEDF4;
}


table.threshold_table {
 vertical-align:top;
 font-size: 1em;
 border-spacing:0px;
 width:100%
}

table.threshold_table td {
	vertical-align:top;
	border-spacing:0px;
	padding:3px;
}

table.threshold_table tr {
	behavior: url('/IEFixes.htc');
	border-spacing:0px;
}

table.threshold_table tr:hover, tr.hover {
   background-color: #DCEDF4;
}


table.regionsummary_table {
 vertical-align:top;
 font-size: 1em;
 border-spacing:0px;
 width:100%
}

table.regionsummary_table td {
	vertical-align:top;
	border-spacing:0px;
	border-bottom:1px dotted #999999;
	padding:7px;
}

table.regionsummary_table ul li {
font-size:1em;
}

table.regionsummary_table tr {
	behavior: url('/IEFixes.htc');
	border-spacing:0px;
}

table.regionsummary_table tr:hover, tr.hover {
   background-color: #DCEDF4;
}

.GMapLabel{
background-color:#ffffff;
padding:3px;
font-size:0.8em;
}

table.summaries_table {
 vertical-align:top;
 font-size: 1em;
 border-spacing:0px;
 width:100%
}

table.summaries_table td {
	vertical-align:top;
	border-spacing:0px;
	padding:5px;
}

table.summaries_table ul li {
font-size:1em;
}



table.rankinggraph {
 background-color: #FFFFFF;
 vertical-align:top;
 font-size: 0.9em;
 line-height:1.4;
}

table.rankinggraph td {
	vertical-align:top;
}

table.rankinggraph tr {
	behavior: url('/IEFixes.htc');
}

table.rankinggraph tr:hover, tr.hover {
   background-color: #DCEDF4;
}

.heading_banner {
	 background-color: #F1F3F5;
	 padding: 3px;
	 border-bottom: 1px solid #E1EBF4;
	 vertical-align:top;
	 font-size: 1em;
	 line-height:1.4;
}

.peoplebox {
	float:left;
	width:12.75em;
	padding:5px;
	/*min-width:130px;*/
}


#contact_details {
		background:#ffffff;
		padding:2em;
		margin: 0px;
		font-size: 0.8em;
		line-height:1.4;		
	}
	
.hide {
	display: none;
}




select.bold {background-color: #74C7F1; font-weight: bold;}
option.bold {background-color: #74C7F1; font-weight: bold;}

select.normal {font-weight: normal;}
option.normal {font-weight: normal;}



.footnote {
    font-size: 0.75em;
}