body {margin:0; padding:0; font-family: Verdana,arial, sans-serif;}
#container {margin-left: auto; margin-right: auto;} 
#banner {height: auto; text-align:center;}

#navigation {float:left;  padding:0.5em; text-align:center;  margin-right:1em ; width: 220px;  \width: 230px; w\idth: 220px; }
 * html #navigation {position:relative;}
#navigation p.advert    {font-size: 0.8em;}
/* Testimonail in nav */
div #testimonial {font-size:.8em; border:.1em solid #cc0200; padding: 0.25em; width:80%; margin-left:auto; margin-right:auto;}
#testimonial p {font-style:italic; }
#testimonial h1 {font-size: 1em; margin: .5em 0em -1em 0em; }
/* END Testimonail in nav */

#main {padding-top:1em; font-size:0.9em; margin-left:223px; margin-right:1em; padding-left:2em;}

/* coloured blocks and floating colour blocks */
.colorblock {background-color:#D2E0D3; color:inherit; padding: 0.25em; width:75%; margin-left:auto; margin-right:auto; 
border-bottom: 0.2em solid #B3BEB3; line-height:2em; }
.colorblock p {color:#000000; background-color:#D2E0D3;}
.colorblock h2 {color:#000080; background-color:inherit;}
.colorblock h3 {color:#000080; background-color:inherit;}

div.imageblock {background-color:inherit; color:inherit; float: left; padding:0.5em; width:96%;}
div.imageblock p {text-align:left;}
div.wrapper {padding-left:3em;text-align:center; height:13em}
div.colorblockfloat {background-color:#D2E0D3; color:inherit; padding: 0.25em; width:25%; margin: 1em; border-bottom: 0.2em solid #B3BEB3;  float:left}
div.colorblockfloat h2 {color:#000080; background-color:inherit;}


/* End of coloured blocks and floating colour blocks */

/* Navigational styles*/
ul {list-style-type:none; margin:0;}
a.bar, a.bar:link, a.bar:visited
{display:block; width:8em; height:1.4em; background-color:#bdd7ea; color:#00006d; border:0.1em solid #000080;
 margin:0.5em; text-align:center; text-decoration:none; padding-top:0.5em; 
font-family: Verdana,arial, sans-serif; font-size:1em;  overflow:hidden;}

a.bar:hover  {color:#ffffff ; background-color: #000080; text-decoration:none;}
a.bar:focus  {color:#ffffff ; background-color: #000080; text-decoration:none;}
a.bar:active {color:#ffffff ; background-color: #000080; text-decoration:none;}

a:link    {color: #000080; text-decoration:underline; background-color: inherit;}
a:visited {color: #000080; text-decoration:underline; background-color: inherit;}
a:hover   {color: #0000ff; text-decoration:none; background-color: inherit;}
a:focus   {color: #0000ff; text-decoration:none; background-color: inherit;}
a:active  {color: #000080; text-decoration:none; background-color: inherit;}
/* end of Navigational styles */

#footer {clear:both; text-align:center; font-family: Verdana,arial, sans-serif; font-size:0.7em;}

/* Footer stripe */
div.hr {
  height: 1.3em;
  background: #fff url(assets/colouredstripe.jpg) no-repeat scroll center;
}
div.hr hr {
  display: none;
}
/* END Footer stripe */

/* MISC styles */

a img {border-style: none;}

.hideme {display:none;}
.clear {clear:both;}
.center {text-align:center;}
acronym, abbr { border-color: black black #000000; cursor: help; border-style: dashed; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}
.tryitimg {vertical-align:middle; padding-right: 1em;}
/* END MISC styles */

/* list for main div */
#main li.list {background: url(assets/bullet.jpg) no-repeat 0px 6px; font-family: Verdana, Arial, sans-serif; line-height:1.5em; margin-left:2em;padding-left:1.8em;}
#main li.list a {display:block; width: 50%;}
#main ol {line-height:1.5em; }
/* end of list for main div */

/* SKIP LINK */
.skip-link a, .skip-link span{
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
   top:-4em;
  left:-3em;
}

.skip-link a:active, .skip-link a:focus {
  position: absolute;
  overflow: visible;
  width: auto;
  height: auto;
 font-family: Verdana,  Arial, sans-serif;
  background-color: #ffcc00;
  color: blue;
  top: 4em;
  left: 1em;
  padding: 5px;
  border: 2px solid blue;
  font-weight: bold;
}
/* END SKIP LINK */

h1, h2, h3 {font-size:1em; color:#cc0200}
#adverts h4 {font-size: 1em; color:#000000;}

/* Image floaters and floats */
.imagefloatright {float:right; margin:0.5em; border:0.15em solid #ffffff; }
.exampleimages {float:right; margin:0.5em; border:0.15em solid #0C3B97; padding:0.2em;}
.floatleft {float:left; }
.floatright {float:right; padding-left:1em; }
.floatrightwrap {float:right; padding:0.2em; }
/* end of Image floaters and floats */

/* FORM STYTLES - SEE ADRIAN  */
form {font-size:0.8em;}

input, select, textarea{
	color: #00006d;
	background-color: #bdd7ea;
    border: 0.1em solid #000080;
	margin: 0.5em 0 0 0;
}

.smalltext {font-family: Verdana,arial, sans-serif; background-color: inherit; color: #cc0200;}
.bluetext {font-family: Verdana,arial, sans-serif; background-color: inherit; color: #0B348C; font-size:.8em; }
.redtext {font-family: Verdana,arial, sans-serif; background-color: inherit; color: #cc0200; font-size:1.6em; font-weight:700}

.radio {background-color:#fff; color:inherit; border: 0.1em solid #c0c0c0;}
.checkbox {background-color:#fff; color:inherit; border: 0.1em solid #c0c0c0;}

input:focus {background-color: #fff; color: #000;  }
input:hover {background-color: #fff; color: #000; }

textarea {font-family: verdana, helvetica, arial, sans-serif; font-size: 1.2em; width:98%; font-weight:bold; }
textarea:focus {background-color: #fff; color: #000;  }
textarea:hover {background-color: #fff; color: #000;  }

select:focus {background-color: #fff; color: #000;  }
select:hover {background-color: #fff; color: #000;  }

checkbox:focus {background-color: #fff; color: #000;  }
checkbox:hover {background-color: #fff; color: #000;  }

.button {background-color: #bdd7ea; color: #00006d;}

legend {color: #000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:600; font-size:1em; background-color:inherit;}
fieldset {border: .15em solid #000080; padding:1em; margin-top:1em; width:85%;}
.noborderfieldset {border: none;}
.submit { margin: 0 5em 0 5em;}
#about label
{
display: block;
width: 14em;
float: left;
text-align: right;
margin: 0.8em 1em 10px 0;
clear: both;
background-color: inherit;
}

/* For Calculator */
.about label 
{
display: block;
width: 20em;
float: left;
text-align: right;
margin: 0.8em 1em 1em 0;
clear: both;
background-color: inherit;
}

.calculate { margin: 0 5em 0 5em; font-size: 2em; }

.disclaimer {font-size:.7em; font-weight:bold; color:#999999; background-color:inherit; width:90%; margin-top: .5em}

.noscript {background-color:#ffcc00; color:blue; font-weight:bold; width: 87%; text-align:center; padding:0.5em;}

/* END For Calculator */

div.floatform{padding: 0.8em; float: left; width: 30%;}

/* ESTIMATE FIELDSET IMAGES */
.yourinfo {background-image:url(assets/ladder.jpg); background-position:right 2em; background-repeat:no-repeat; }
.yourprop {background-image:url(assets/drip.jpg); background-position:right 2em; background-repeat:no-repeat; }
.int {background-image:url(assets/babydrips.gif); background-position: right; background-repeat:no-repeat; }
.ext {background-image:url(assets/puddle.jpg); background-position:bottom right; background-repeat:no-repeat; }
.other {background-image:url(assets/splash.gif); background-position:right 2em; background-repeat:no-repeat; }
.referral {background-image:url(assets/splash2.gif); background-position:right 3em; background-repeat:no-repeat;}

/* ESTIMATE FIELDSET IMAGES */

/* CONTACT FIELDSET IMAGES */
.aboutyou {background-image:url(assets/rainbow.jpg); background-position:right 1.6em; background-repeat:no-repeat; }
/* CONTACT FIELDSET IMAGES */


/* END OF FORM STYTLES */

/* int and ext port page floats */
div.float {float: left; padding: 0 .4em .4em .4em; width:auto;}
div.float p {text-align: center; font-family:Verdana, Arial, sans-serif; font-size:.7em; }
/* int and ext port page floats */

/* icon floats */
div.iconfloat {float: left; padding: 0 .4em .4em .4em; width:auto;}
div.iconfloat p {text-align: center; font-family:Verdana, Arial, sans-serif; font-size:.9em; margin-top:-2.5em}
/* icon floats */

/* Sitemap list */
.dtlist dt
{background:  url('assets/bullet.jpg') no-repeat 0 6px; 
font-family: Verdana, Arial, sans-serif;
padding-left:1.8em;
line-height:1.5em; 
margin-left:0em;
color: inherit; background-color:inherit;
}


.dtlist dd
{background: url('assets/greenbullet.jpg') no-repeat 0 6px; 
font-family: Verdana, Arial, sans-serif;
padding-left:1.8em;
line-height:1.5em; 
margin-left:1.5em;
color: inherit; background-color:inherit;
}

dt a {display:block; width: 30%;}
dd a {display:block; width: 30%;}
/* END Sitemap list */

/* Sitemap background wallpaper */
.sitewp {background-image:url(assets/wallpapercurl.jpg); background-repeat:no-repeat; background-position:right;}
/* END Sitemap background wallpaper */

/* Wallpaper symbols background wallpaper */
.wallpaper {background-image:url(assets/wallpapersymbol.jpg); background-repeat:no-repeat; background-position: top right;}
.wallpaper p {width:50%;}
/* END Wallpaper symbols background wallpaper */

/* Wallpaper symbols text */
.symboltext {vertical-align:middle;}

/* END OF  Wallpaper symbols text */
/* Testimonial comments */
.testimonial {padding: 0em 0em 0em 2em;line-height:1.5em; background-image:url(assets/leftquote.jpg); background-repeat:no-repeat; 
background-position: 0em 0em;  margin-top:3em; font-style:italic;}

.rightquote {float:right; width:auto;}

.quoteby {background-color:inherit; color:#666666; font-size:.8em; margin-top:0em; margin-left:-4em; font-style:normal;}
/* END OF Testimonial comments */


/* RSS FEED */
#rss { width: 80%; height: auto; overflow:auto; border: 0.025em solid #CC0200; padding:1em; margin-left:auto; margin-right:auto; 
background-color: #ffffff; color: #000000; position:relative; font-size:.8em;}
#rss img {float:right; padding: .2em; position:relative;}
/* RSS FEED END */


/* Toggle boxes on wall paper results */
h2.trigger {
	
	background: url(plus_minus.jpg) no-repeat;
	
}

h2.trigger a {
color: #cc0200;
display: block;
margin: 1.2em 1em 1.2em 1em;
}

h2.trigger {
background-image:url(/assets/plus_minus.jpg);
background-repeat: no-repeat;
line-height: 2.3em;
padding: 0 0 0 2em;
margin: 0 0 0.5em 0;
}


h2.trigger a:hover {
color: #0000ff; 
text-decoration:none; 
background-color: inherit;
}
h2.active {background-position: left bottom;}

.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	background: #f0f0f0 ;
	overflow: hidden;
	width: 600px;
	
}
.toggle_container .block {
	padding: 20px;
	
}
.toggle_container .block p {
	padding: 5px 0;
	margin: 5px 0;
}
/* END OF Toggle boxes on wall paper results */

/*  help page*/
.cert{font-size: 0.8em; color: #000000; background-color: inherit; font-family: Verdana, Arial, sans-serif;}
.plus {font-size:2em; font-weight:bolder;}

/* END help page */

/* LIGHTBOX */
#gallery img {margin: 0 .5em .5em 0; padding:0}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; margin-top:-3.5em;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none;}

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url('data:image/gif;base64,AAAA'); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(assets/lightboximg/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(assets/lightboximg/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: .8em Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 80%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/* END OF LIGHTBOX */

/* BUBBLE TOOLTIP*/
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
	font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background: inherit;}
/* can take filter: alpha .... line out and put
 <!--[if IE]> 
<style> 
a.tt:hover span.tooltip{
filter: alpha(opacity: 90);
}
</style> 
<![endif]-->
 in head of page where needed */

a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #000000;
    text-align: center;
	filter: alpha(opacity=85);
	KHTMLOpacity: 0.85;
	MozOpacity: 0.85;
	opacity: 0.85;
}
a.tt:hover span.top{
	display: block;
	padding: 35px 8px 0;
    background: url(assets/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(assets/bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(assets/bubble.gif) no-repeat bottom;
}

.info {vertical-align:text-bottom;}
/* END OF BUBBLE TOOLTIP */

/* START OF ADVERTS ON CALCULATOR PAGES */
	/* BOTTOM BANNER advert on calc pages */
	.calcbanneradvert {text-align:center; margin-top:2em;}
	/* END OF ADVERT on calc results */
	
	/* OFFSET the word advertisment */
	.offset {margin-top: -.1em;}
	/* END OFFSET the word advertisment */
	
	/* Left side border advert on calc pages */	
	div.lsbadvert {padding: 0.25em; margin-left:auto; margin-right:auto;}
	div.lsbadvert p {font-size: .8em; margin-bottom: -0.1em}
	/* END OF Left side border advert on calc pages */	
	
/* Homebase advert */
#homebase {background-image:url(http://piclibrary.user-generated-content.co.uk/homebase/banner/HB-125x125.gif);
width:125px; height:125px; font-family:arial,sans-serif; font-size:16px; color:#ffffff;
position:relative; margin-left:auto; margin-right:auto;}
.homebase_linked_text {width:125px; position:absolute; font-family:arial,sans-serif; top:+25px; left:+0px;
line-height:140%; text-align:center;}
.homebase_advertisment_advert {font-size: .8em; margin-bottom: -0.1em}
/* END OF ADVERTS ON CALCULATOR PAGES */

#adverts {font-size: .8em;}