@charset "utf-8";
/* CSS Document */

/* 

V.1 Stylesheet for thewatercorporation.co.uk
Matt Williams MA - matt@thinkstorm.co.uk
Copyright Storm Design 2008

Last Revision: 29 Sept 2008
--------------------------------------------

Margins - 20px
Coloumn - 172px
Dark Blue - #003f5e
Mid Blue - #0066a4
Light Blue - #0eaad1

Dark grey (text) - #414141
Ligh Grey/Blue - #ccd9df

-------------------------------------------- */




body {
     font-size:100%;
	 font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
	 font-color: #414141;
	 
}
/* typography DO NOT EDIT HERE
---------------------------------------------------*/

/* browser default text size = 16px */

p.size18px {
     	font-size: 1.125em; /* 18px (16 x 1.125 = 18) */
	margin: 1em 0; /* 18px (18 x 1 = 18) */ }

p.size15px {
     	font-size: 0.9375em; /* 15px (16 x 0.9375 = 15) */
	margin: 1.2em 0; /* 18px (15 x 1.2 = 18) */ }
	
p { color:#414141;
     	font-size: 0.875em; /* 14px (16 x 0.875 = 14) */
	margin: 1.286em 0; /* 18px (14 x 1.286 = 18) */ 
	line-height: 1.5em;}

p.size13px {
     	font-size: 0.8125em; /* 13px (16 x 0.8125 = 13) */
	margin: 1.3846em 0; /* 18px (13 x 1.3846 = 18) */ }

p.size12px {
line-height:1.5em;
     	font-size: 0.75em; /* 12px (16 x 0.75 = 12) */
	margin: 1.5em 0; /* 18px (12 x 1.5 = 18) */ }

p.size11px {
     	font-size: 0.6875em; /* 11px (16 x 0.6875 = 11) */
	margin: 1.6363em 0; /* 18px (11 x 1.6363 = 18) */ }
	
	p.size10px {
	color:#0b7e9a;
	line-height:1.5em;
     	font-size: 0.625em; /* 11px (16 x 0.6875 = 11) */
	margin: 1.8em 0; /* 18px (11 x 1.6363 = 18) */ }
	
	p.contactAddress{
	margin-top:40px;
	background:url(../images/address_logo.gif) no-repeat 10px 0;
	padding-left:84px;
}
	p.phone{

	line-height:1.5em;
     	font-size: 0.75em; /* 12px (16 x 0.75 = 12) */
	margin: 1.5em 0; /* 18px (12 x 1.5 = 18) */
	margin-left:84px;
	padding-top:15px;
	border-top:1px solid #bbbbbb;
	padding-bottom: 110px;
}

	
	h3{
	font-weight:normal;
	position:relative;
	line-height:1.2em;
	}
	
	h3#pagetitle{
	
	text-indent:-5000px;
	padding-bottom:10px;
	border-bottom: 1px solid #0eaad1;
	}
.about h3#pagetitle{
	background:url(../images/h3_about.gif) no-repeat;
}
.responsibilities h3#pagetitle{
	background:url(../images/h3_responsibility.gif) no-repeat;
}
.contact h3#pagetitle{
	background:url(../images/h3_contact.gif) no-repeat;
}




	h3#pagesub{
	margin-top:30px;
	color:#0066a4;
	}
	
	h4{
	font-weight:normal;
	position:relative;
	line-height:1.2em;
	color:#003f5e;
	font-size: 0.8125em;
	}
	h5.topSub{
color:#0066a4;
font-size:1.125em;
font-weight:normal;
margin-top:10px;
}
h5.standardSub{
color:#0066a4;
font-size:1.125em;
font-weight:normal;
margin-top:50px;
}
h6{
color:#0b7e9a;
font-size:1em;
font-weight:normal;
padding-bottom:5px;
border-bottom:1px solid #0b7e9a;
}
em{
font-style:normal;
font-weight: bold;
}
.sitemap a, .sitemap  a:visited{

color: #0eaad1;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}

.sitemap  a:hover{

color:#999999;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}

.sitemap h1{
font-size:1.2em;
color: #003f5e;
font-weight: normal;
margin: 15px 0;
border-bottom:#999999 2px solid;
padding-bottom:10px;
}

.sitemap table{
font-size: 0.825em;
margin: 10px 0;
}
.sitemap table td.lpage{
padding: 3px 0;
}
.sitemap #copyright {
font-size: 0.75em;
}

.structureRightColumn #leftThreeColumns a, .structureRightColumn #leftThreeColumns a:visited{

color: #0eaad1;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}

.structureRightColumn #leftThreeColumns a:hover{

color:#999999;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}



/* -------------- end typography ---------------------*/
/* --- Master Layout --- */

.pageWrapper{
width: 980px;
}

.headerContainer{
background:#FFF;
height:189px;
padding-bottom: 7px;
}
#headerTop{
background:url(../images/headerNumber.gif) no-repeat;
height:49px;
}
#headerTop h2{
text-indent:-5000px;
}
#headerMiddle{
height: 121px;
background-image: url("../images/ThamesWaterStamp.gif");
background-repeat: no-repeat;
background-position: 98% 5%;
}

#logo {
margin:0;
	background: url("../images/mainLogo.gif") no-repeat;
	width:172px;
	margin-left:20px;
	float:left;
	height:121px;
}

#logo a {
	text-indent: -999em;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}
#flashtime{
float :right;
width: 140px;
margin-right : 10px;
margin-top: 80px;
height: 35px;
}
#headerBottom{

height: 19px;
}
#breadcrumbBar{
font-size: 0.625em;
line-height: 1em;
height :19px;
width:768px;
float: right;
background:#dedede url(../images/breadcrumbBarEnd.gif) no-repeat right bottom;
}
.structureLeftColumn{
float:left;
width:192px;

background:#fff;
}
.structureDividingMargin{
float:left;
width:20px;
height:575px;
background:url(../images/blueLine.gif) repeat-y left top;
}
.structureRightColumn{

width: 748px;
margin-right: 20px;
float: left;

}
.clear{
clear:both;
}

ul{
font-size: 0.875em;
padding-bottom:1px;
background:url(../images/dotting.gif) no-repeat left bottom;
}
#mainNavigation li{
margin:0;
padding:0;


}

#mainNavigation li a{
background:url(../images/menuItemBgStandard.gif) no-repeat left top;
display:block;
text-decoration:none;
padding:12px 0px 10px 28px;
color: #484848;
}

#mainNavigation li a:hover{
background:url(../images/menuItemBgStandard.gif) no-repeat -192px top;
display:block;
text-decoration:none;
color: #0eaad1;
}
#mainNavigation li.greenmenu a{
background:url(../images/menuItemBgGreen.gif) no-repeat left top;
display:block;
text-decoration:none;
padding:12px 0px 10px 28px;
color: #484848;
}
#mainNavigation li.greenmenu a:hover{
background:url(../images/menuItemBgGreen.gif) no-repeat -192px top;
display:block;
text-decoration:none;
color: #0eaad1;
}

#mainNavigation li.emergenciesmenu a{
background:url(../images/menuItemBgEmergencies.gif) no-repeat left top;
display:block;
text-decoration:none;
padding:12px 0px 10px 28px;
color: #484848;
}
#mainNavigation li.emergenciesmenu a:hover{
background:url(../images/menuItemBgEmergencies.gif) no-repeat -192px top;
display:block;
text-decoration:none;
color: #0eaad1;
}


body.home #home a, body.about #about a, body.responsibilities #responsibilities a, body.services #services a, body.facts #facts a, body.saving #saving a, body.environment #environment a, body.emergencies #emergencies a, body.contact #contact a {
background:url(../images/menuItemBgStandard.gif) no-repeat -192px top;
display:block;
text-decoration:none;
color: #0eaad1;
}


#flashholder{
padding-bottom:15px;
margin-bottom: 20px;
background:#FFFFFF url(../images/horizontalDotted.gif) repeat-x bottom left;
}
#fourColumnWrapper{
background:url(../images/horizontalDotted.gif) repeat-x bottom left;
}
#column1{
float: left;
width: 172px;
margin-right: 20px;
}
#column2{
float: left;
width: 172px;
margin-right: 20px;
}
#column3{
float: left;
width: 172px;
margin-right: 20px;
}
#column4{
float: left;
width: 172px;
}
.offer{
height:85px;
padding-top:160px;
color: #003f5e;
border-bottom: 2px solid #d6d6d6;
}

#column1 .offer{
background:url(../images/button_lge_waterleak.jpg) no-repeat;
}
#column2 .offer{
background:url(../images/button_lge_lead.jpg) no-repeat;
}
#column3 .offer{
background:url(../images/button_lge_newpipes.jpg) no-repeat;
}
#column4 .offer{
background:url(../images/button_lge_meter.jpg) no-repeat;
}







.offerSummary{

}
.offerSummary p{
height: 80px;
color: #414141;
line-height:1.4em;
}
/* SMALLER BUTTONS */
.offerButton{
width: 172px;
height:132px;
}


#column1 .offerButton a, .offerButton a:visited{
text-indent: -5000px;
color: #003f5e;
text-decoration: none;
width: 172px;
height:132px;
display:block;
background:url(../images/button_waterleak.jpg) no-repeat 0 0;
}

#column1 .offerButton a:hover{
background:url(../images/button_waterleak.jpg) no-repeat -172px 0;
}
#column1 .offerButton a#offer1{
background:url(../images/button_waterleak.jpg) no-repeat -172px 0;
}

#column2 .offerButton a, .offerButton a:visited{
text-indent: -5000px;
color: #003f5e;
text-decoration: none;
width: 172px;
height:132px;
display:block;
background:url(../images/button_lead.jpg) no-repeat 0 0;
}

#column2 .offerButton a:hover{
background:url(../images/button_lead.jpg) no-repeat -172px 0;
}
#column2 .offerButton a#offer2{
background:url(../images/button_lead.jpg) no-repeat -172px 0;
}
#column3 .offerButton a, .offerButton a:visited{
text-indent: -5000px;
color: #003f5e;
text-decoration: none;
width: 172px;
height:132px;
display:block;
background:url(../images/button_newpipes.jpg) no-repeat 0 0;
}

#column3 .offerButton a:hover{
background:url(../images/button_newpipes.jpg) no-repeat -172px 0;
}
#column3 .offerButton a#offer3{
background:url(../images/button_newpipes.jpg) no-repeat -172px 0;
}
#column4 .offerButton a, .offerButton a:visited{
text-indent: -5000px;
color: #003f5e;
text-decoration: none;
width: 172px;
height:132px;
display:block;
background:url(../images/button_meter.jpg) no-repeat 0 0;
}

#column4 .offerButton a:hover{
background:url(../images/button_meter.jpg) no-repeat -172px 0;
}
#column4 .offerButton a#offer4{
background:url(../images/button_meter.jpg) no-repeat -172px 0;
}
/* EEEEEEEENNNNNNNNNNNNNNDDDDDDDDDDDDDDD  SMALLER BUTTONS */




.furtherInfo{
height:70px;
padding-right: 50px;
border-bottom:#ccd9df 10px solid;
background: url(../images/blueArrow.gif) no-repeat top right;
}
.furtherInfo p{
padding:0;
margin:0;
}
.furtherInfo a, .furtherInfo a:visited{

position: relative; /* for ie bug */
color: #003f5e;
text-decoration: none;
border-bottom:solid 1px #CCC;
}

.furtherInfo a:hover{
position: relative; /* for ie bug */
color:#999999;
text-decoration: none;
border-bottom:solid 1px #CCCCCC;

}

.home .fullWidthRightColumn{
margin-top:25px;
min-height:200px;
background: url(../images/horizontalDotted.gif) repeat-x 25px 0px;
}



#leftThreeColumns{
float:left;
width:556px;
margin-right:20px;
}
.about #leftThreeColumns, .responsibilities #leftThreeColumns, .contact #leftThreeColumns{
padding-top:44px;
}

#leftThreeColumns #top{
height:85px;
padding-top:40px;
}
#leftThreeColumns #top h3{
height: 53px;
text-indent:-5000px;
background: url(../images/callUsNow.gif) no-repeat left top;
}
#leftThreeColumns #left{
background:url(../images/testText2.gif) no-repeat;
float:left;
min-height:100px;
width:170px;
}

#leftThreeColumns h2{
text-indent:-5000em;
height: 183px;
}
#leftThreeColumns h2#waterleak{
background:url(../images/header_waterleak.jpg) no-repeat;
}
#leftThreeColumns h2#lead{
background:url(../images/header_lead.jpg) no-repeat;
}
#leftThreeColumns h2#newpipes{
background:url(../images/header_newpipes.jpg) no-repeat;
}
#leftThreeColumns h2#meter{
background:url(../images/header_meter.jpg) no-repeat;
}

#leftThreeColumns p{
padding-right: 90px;
}

.responsibilities #leftThreeColumns p{
padding-top: 20px;
}


#leftThreeColumns #right{
float: left;
width: 384px;
border-left: #0eaad1 2px solid;
padding-bottom: 105px;
}
#leftThreeColumns #right p{
padding-left: 20px;
color: #414141;
padding-right: 10px;
margin-top:0;
line-height:1.3em;
padding-bottom: 20px;

}

#rightSingle{
float: left;
width:172px;

}

#rightSingle p{
padding-top:1em;
}
.about #rightSingle p{
padding-top:0;
text-align:center;
}

#rightSingle p em{
color:#000000;
}

#rightSingle a, #rightSingle a:visited{
position: relative; /* for ie bug */
color: #0066a4;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}

#rightSingle a:hover{
position: relative; /* for ie bug */
color:#999999;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}


#arrows{
background:url(../images/arrows.gif) no-repeat top right;
height:20px;
}

/* -------------- LOWER HALF VERSION -------------------*/

#leftThreeColumnsLower{
float:left;
width:556px;
margin-right:20px;
}
#leftThreeColumnsLower #top{
height:85px;
padding-top:40px;
}
#leftThreeColumnsLower #top h3{
height: 53px;
text-indent:-5000px;
background: url(../images/callUsNow.gif) no-repeat left top;
}
#leftThreeColumnsLower #left{
background:url(../images/testText2.gif) no-repeat;
float:left;
min-height:150px;
width:170px;
}

#leftThreeColumnsLower h2{
text-indent:-5000em;
height: 183px;
}


#leftThreeColumnsLower p{
padding-right: 90px;
}

#diagram{
padding-top:15px;
padding-bottom:10px;
}


#leftThreeColumnsLower #right{
float: left;
width: 384px;
border-left: #0eaad1 2px solid;
padding-bottom: 105px;
}
#leftThreeColumnsLower #right p{
padding-left: 20px;
color: #414141;
padding-right: 40px;
margin-top:0;
line-height:1.3em;
padding-bottom: 20px;
}


#rightSingleLower{
float: left;
width:172px;

}


/*------------------------------------------------------*/


body.home #footer{
margin-top:0;
}
#footer{

margin-top:0px;
padding-top: 40px;
padding-left: 172px;
border-top:1px solid #003f5e;
margin-left: 212px;
width: 576px;
min-height: 100px;
padding-bottom: 30px;
}

#footer h4{
background:url(../images/waterHelpline.gif) no-repeat top left;
height:22px;
text-indent:-5000px;
}

#footer p{
margin:0;

}
#footer p.size13px{
margin-top: 30px;
}
#footer p.size11px{
margin-top: 4px;
}
#footer a, #footer a:visited{
position: relative; /* for ie bug */
color: #0066a4;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}

#footer a:hover{
position: relative; /* for ie bug */
color:#999999;
text-decoration: none;
background:url(../images/dotting.gif) repeat-x left bottom;
}

#legals{
color:#888888;
position: relative;
font-size: 0.6875em;
margin-top: 35px;

}

#registered{

height:30px;
padding-top: 5px;
position: relative;
float:left;
}
#sitemap{

height:30px;
padding-top: 5px;
position: relative;
float:left;
margin-left:23px;
}
#designbystorm{
width: 200px;
height:30px;
padding-top: 5px;
position: relative;
float:left;
margin-left:23px;
padding-right:16px;
background:url(../images/stormlogo.gif) no-repeat 110px 0;
}
#designbystorm a, #designbystorm a:visited{
color:#888888;
}
#designbystorm a:hover{
color:#000;
}

#rightSingle{
position: relative;
}

#bluebox{
/*margin-top: 320px;*/
background:#0eaad1 url(../images/boxtop.gif) no-repeat top left;
}
#boxbottom{
font-size: 0.625em;
line-height: 1em;
width: 172px;
height:10px;
background:url(../images/boxbottom.gif) no-repeat bottom left;
}
#bluebox p{
margin:0;
padding: 10px 10px 0px 10px;
color:#FFFFFF;
font-weight:bold;
}
.offer1 img#freeInspection{
position:absolute;
top: 195px;
}

.offer1 #blueboxholder{
position:absolute;
top: 680px;
}
.offer2 #options{

position: absolute;
top: 195px;
}
.offer3 #message{

position: absolute;
top: 195px;
}
.offer3 img#freeInspection{
position: absolute;
top: 610px;
}
.offer4 img#freeInspection{
position: absolute;
top: 195px;
}
.offer4 #blueboxholder{
position:absolute;
top: 830px;
}
.responsibilities #blueboxholder{
position:absolute;
top: 278px;
}


.about #rightSingle, .contact #rightSingle{
padding-top:72px;
}





img#emergencyLeak{
margin-top: 210px;
}