/* Branded styles 2009-12-06 */
/* CSS RESETS: based on Yahoo */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	background:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
legend {
	/*legend text placed in <span> for FF bug
	from: http://www.tyssendesign.com.au/articles/css/legends-of-style/*/
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
strong {
font-style:normal;
}
em {
font-weight:normal;
}
ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
a:link, a:visited, a:hover, a:active {
	border:0;
	}
/* END CSS RESETS */
html, body{ 
	margin:0; 
	padding:0; 
	margin:5px;
	text-align:center; 
	background-color:#0547E6;
	font-family:Arial, Helvetica, sans-serif;
	color:#12569F/*#0547E6*/;
	font-size:small;
	/*background:#0547E6 url(../images/body-background.jpg) bottom left no-repeat;*/
	height:100%;
} 
img {
	border:0;
	} 
img#homepageimg {
	margin-bottom:10px;
	}
/*layout based on: http://www.neuroticweb.com/recursos/2-columns-layout/*/
div#wrapper {
	width:800px; 
	text-align:left;  
	margin-left:auto; 
	margin-right:auto; 
	background: #FFFFFF url(../images/water-background.jpg) left bottom no-repeat;/**/
}

div#header {
	height:25px; 
	text-align:right;
	background:url(../images/top-menu-background.gif) left top no-repeat;
}

div#left-col {
	float: left;
	width: 300px;
	background:url(../images/cr-logo.gif) top center no-repeat;
	/*padding-top:140px;*/
	text-align:left;
	height:inherit;
	min-height:200px;

}

div#main-col { 
	margin: 0;
	float: left;
	width: 500px; /*800-left col width*/
	height: 1%; /* Holly hack for Peekaboo Bug */
	/*background-color:#FFFFFF;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	filter:alpha(opacity=50); /* IE's opacity*/
    /*opacity: 0.50;
	-moz-opacity:0.50;*/
}

div#footer {
	height:65px; 
	clear:both;
	text-align:left;
	color:#FFFFFF;
	background:url(../images/footer-background.gif) -300px top no-repeat;
	line-height:65px;
}


.innerpadding{
	padding:10px;
	display:block; /*for spans*/
	
	}
.innerpaddingbreadcrumb{
	padding:10px;
	padding-left:25px;
	}
	
/* visual styles */
/*
top menu based on: http://css.maxdesign.com.au/listamatic/horizontal36.htm
*/
#topmenulist, #footerlinks
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#topmenulist {
	float:right;
	margin-right:0px;
	padding-right:0px;
	}

#topmenulist li {
	float: left;
	line-height: 25px;
	padding-left: 25px;
	margin: -0.3em 0 0 -0.5em;
}
#footerlinks li {
	float: left;
	line-height:40px;
	margin: 0;
	padding: 0 2em 0 0em;
	/*padding-right: 15px;*/
}
#footerlinks li img {
	padding-left: 20px;
	margin-top:5px;
	border:0;
}
#footerlinks li a {
	font-weight:normal;
	}
a:link, a:visited{
	text-decoration:none;
	border-bottom:#0547E6 1px dashed;;
	color:#0547E6;
	}
a:hover, a:active {
	text-decoration:none;
	border-bottom:#12569F 1px solid;
	color:#12569F;
	}
a.whitemenu:link, a.whitemenu:visited {
	color:#FFFFFF;
	background-color:#0547E6;
	font-weight:bold;
	text-decoration:none;
	}
a.whitemenu:hover, a.whitemenu:active {
	color:#FFFFFF;
	text-decoration:underline;
	}
a.topiclink:link, a.topiclink:visited {
	color:#12569F;
	text-decoration:none;
	line-height:20px;
	}
a.topiclink:hover, a.topiclink:active {
	color:#12569F;
	text-decoration:none;
	}
a.activetopic {
	color:#12569F;
	font-weight:bold;
	text-decoration:none;
	border:none;
	}
 a.preview, a.preview:link, a.preview:visited, a.preview:hover, a.preview:active {
	border:none;
	}
.hidden { 
	position:absolute; 
	left:0px; 
	top:-700px; 
	width:1px; 
	height:1px; 
	overflow:hidden; 
}
h1 {
	color:#0547E6;
	}
h2 {
	color:#76C024;
	padding-top:10px;
	padding-bottom:5px;
	/*padding-bottom:5px;
	margin-bottom:-5px;*/
	}
p {
	font-size:100%;
	line-height:120%;
	padding-top:5px;
	padding-bottom:10px;
	}
p.didyouknow {
	font-size:90%;
	font-weight:normal;
	color:#0547E6;
	text-align:left;
	margin:0;
	padding:0;
	margin-top:40px;
	margin-left:0px;
	padding-left:5px;
	margin-right:15px;
	border-left:#76C024 2px solid;
	}
.error {
	color:#FF0000;
	font-weight:bold;
	}
img {
	border:0;
	}
.imgleft {
	float:left;
	margin:3px;
	margin-bottom: 50px;
	}
.imgright {
	float:right;
	margin:3px;
	margin-bottom: 50px;
	}
.imgleftmain {
	float:left;
	margin:5px;
	}
.imgrightmain {
	float:right;
	margin:5px;
	}
ul, ol {
	margin-top:0px;
	}
ol li {
	list-style:decimal;
	margin-left:35px;
	padding-bottom:0.5em;
}
	
ul, ul li ul {
	list-style-type: none;
	}
ul li, ul li ul li {
	padding-bottom:0.5em;
	/*padding-left:0px;
	margin-left:35px;*/
	margin-left: 0.4em;
	background-repeat: no-repeat;
	background-position: top left;
	padding-left: 2em;
	padding-top:0.2em;
	}
ul.mainbullets li {
	/*list-style:disc;
	list-style-image:url(../images/small-bullet.gif);*/
	background-image: url(../images/small-bullet-blue.gif);
	background-position: 0em 0em;
	}
ul.tickbullets li {
	background-image: url(../images/green-tick-bullet.gif);
	/*background-position: -0.5em -0.3em;*/
	background-position: 0em 0em;
	}
ul.faqbullets li {
	background-image: url(../images/faq-bullet.gif);
	/*background-position: -0.5em -0.3em;*/
	background-position: 0em 0em;

	}
ul.errorbullets li, ul.feedbackerror li {
	background-image: url(../images/error-bullet.gif);
	/*background-position: -0.5em -0.5em;*/
	background-position: 0em 0em;
	}
ul.feedbackerror li {
	display:inline;
	white-space:nowrap;
	line-height:1.5em;
	}
ul.backbullets li {
	background-image: url(../images/back-bullet.gif);
	background-position: 0em 0em;
	}
ul.nextbullets li {
	background-image: url(../images/next-bullet.gif);
	background-position: 0em 0em;
	}
ul li.breadcrumb {
	/*list-style-image:url(../images/small-bullet.gif);*/
	margin-left:0.2em;
	padding-left:0em;
}

ul.innerpaddingbreadcrumb li {
	/*list-style-image:url(../images/small-bullet-blue.gif);*/
	margin-left:-1.5em;	
	background-image: url(../images/small-bullet-blue.gif);
	background-position: 0em 0em;
}
ul.topiclink li {
	/*list-style-image:url(../images/small-bullet.gif);*/
	background-image: url(../images/small-bullet.gif);
	background-position: 0em 0em;
}

.opac33png {
	background-image:url(../images/background-33.png);
	}
.opac50png {
	background-image:url(../images/background-50.png);
	}
.opac75png {
	background-image:url(../images/background-75.png);
	}
.clear { clear: both; }
/***************************
HOME PAGE MENU
Based on: http://css.maxdesign.com.au/listamatic/horizontal29.htm
****************************/
#navcontainer
{
	padding-top:0px;
	padding-bottom:0px;
	padding-left:40px;
	/*padding-right:auto;*/
	/*height:350px;*/
	position:relative;
	width:inherit;
	text-align:center;
	margin:0;
	/*border:#999999 thin solid;*/
}

#navcontainer ul
{
	padding: 0px;
	list-style-type: none;
	text-align: left;
	text-align:left;
}

#navcontainer ul li { 
	float: left;
	padding:0px 10px 10px 10px; /*trbl*/
	/*padding-left: 10px;
	padding-right:10px;*/
	 }

#navcontainer ul li a
{
	text-decoration: none;
	background: url(../images/home-menu-normal.gif) no-repeat top left;
	color:#12569F/*#0547E6*/;
	font-size: large;
	font-weight:bold;
	float: left;
	margin: 10px;
	height: 151px;
	width: 151px;
	padding:0px;
}


#navcontainer ul li a:link, #navcontainer ul li a:visited
{
	text-decoration: none;
	border:none;
	background: url(../images/home-menu-normal.gif) no-repeat top left;
}

#navcontainer ul li a:hover, #navcontainer ul li a:active
{
	background: url(../images/home-menu-hover.gif) no-repeat left top;
	border:none;
	color: #0547E6;
}
/*end of home page menu*/
ul li.breadcrumb img {
	margin-bottom:-5px;
	}
ul li.breadcrumb a, ul li.breadcrumb a:link, ul li.breadcrumb a:visited {
	border-bottom:none;
	}
ul li.breadcrumb a:hover, ul li.breadcrumb a:active {
	text-decoration:underline;
	}
/* home link */
span#homepagelinkspan{
	display: block;
	width:290px;
	height:140px;
}
span#homepagelinkspan a {
	display:block;
	width:290px;
	height:140px;
	line-height:140px;
	border:none;
	}

/*temporary connecting-a-new-appliance styles*/
.rollover {
	text-align:left;
	padding:0;
	margin:0;
	margin-left:70px;
	padding-bottom:10px;
	padding-top:10px;
	}
.rollover a {
	display:block;
	width: 337px;
	height:98px;
	text-decoration: none;
	border:none;
}
.rollover a:link, .rollover a:visited, .rollover a:hover, .rollover a:active {
	border:none;
	} 
.rollover a.wl:link, .rollover a.wl:visited {
	background: url(../images/washer-help-button.jpg) 0 0 no-repeat;
	}
.rollover a.wl:hover, .rollover a.wl:active { 
	background: url(../images/washer-help-button-hover.jpg) 0 0 no-repeat;
}
.rollover a.df:link, .rollover a.df:visited {
	background: url(../images/diy-fixit-button.jpg) 0 0 no-repeat;
	}
.rollover a.df:hover, .rollover a.df:active { 
	background: url(../images/diy-fixit-button-hover.jpg) 0 0 no-repeat;
}
.rollover a.wk:link, .rollover a.wk:visited {
	background: url(../images/wickes-button.jpg) 0 0 no-repeat;
	}
.rollover a.wk:hover, .rollover a.wk:active { 
	background: url(../images/wickes-button-hover.jpg) 0 0 no-repeat;
}
/*preload images: http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/*/
#preload-home01 { background: url(../images/home-menu-hover.gif) no-repeat -9999px -9999px; }
#preload-home02 { background:url(../images/vtip_arrow.png) no-repeat -9999px -9999px; }
#preload-new01 { background: url(../images/washer-help-button-hover.jpg) no-repeat -9999px -9999px; }
#preload-new02 { background: url(../images/diy-fixit-button-hover.jpg) no-repeat -9999px -9999px; }
#preload-new03 { background: url(../images/wickes-button-hover.jpg) no-repeat -9999px -9999px; }
#preload-about01 { background:url(../images/photos/misconnection06L.jpg) no-repeat -9999px -9999px; }
#preload-faq01 { background:url(../images/photos/riverpollution04L.jpg) no-repeat -9999px -9999px; }
#preload-water01 { background:url(../images/photos/riverpollution01L.jpg) no-repeat -9999px -9999px; }
#preload-water02 { background:url(../images/photos/riverpollution02L.jpg) no-repeat -9999px -9999px; }
#preload-check01 { background:url(../images/photos/misconnection01L.jpg) no-repeat -9999px -9999px; }
#preload-check02 { background:url(../images/photos/misconnection02L.jpg) no-repeat -9999px -9999px; }
#preload-check03 { background:url(../images/photos/misconnection03L.jpg) no-repeat -9999px -9999px; }
#preload-check04 { background:url(../images/photos/misconnection04L.jpg) no-repeat -9999px -9999px; }
#preload-check05 { background:url(../images/photos/misconnection05L.jpg) no-repeat -9999px -9999px; }
#preload-check06 { background:url(../images/separatesewer.gif) no-repeat -9999px -9999px; }
#preload-check07 { background:url(../images/combinedsewer.gif) no-repeat -9999px -9999px; }


/*jquery map popup styles*/
#backgroundPopup{  
	display:none;  
	position:fixed;
	height:100%;  
	width:100%;  
	top:0;  
	left:0;  
	background:#0547E6;  
	/*border:1px solid #cecece;  */
	z-index:10;  
}  
#mainPopup{  
	display:none;  
	position:fixed;  
	height:auto;  
	width:auto;  
	background:#FFFFFF;
	border:2px solid #000066;  
	z-index:20;  

}  
#popupClose{  
	font-size:14px;  
	line-height:14px;  
	right:6px;  
	top:4px;  
	position:absolute;  
	color:#0547E6;  
	font-weight:bold;  
	display:block;  
} 
a#fullmap {
	border:none;
	display:block;
	color:#FFFFFF;
	}
a#fullmap img {
	margin: 10px;
	/*position:absolute;
	margin-left:200px;
	margin-top:-10px;*/
	}

/* partner logo scroller*/
#slideshow { margin: 20px auto; width: 200px; height: 120px }

#slideshow img { display: none; }
#slideshow img.first { display: block }

/* tool tip styles */
p#vtip { display: none; position: absolute; padding: 10px; left: 5px; font-size: 0.9em; color:#FFFFFF; background-color: #0547E6; border: 2px solid #CCC; /*-moz-border-radius: 5px; -webkit-border-radius: 5px;*/ z-index: 9999; max-width:250px; text-align:left; }
p#vtip #vtipArrow { position: absolute; top: -11px; left: 25px }

/* imgZoom styles from: http://andreaslagerkvist.com/jquery/image-zoom/ */
div.jquery-image-zoom {
	line-height: 0;
	font-size: 0;
	z-index: 10;
	border: 5px solid #0547E6;
	margin: -5px;
	cursor:pointer;
	/*-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/
}

	div.jquery-image-zoom a {
		background: url(../images/jquery.imageZoom.png) no-repeat;
		display: block;
		width: 25px;
		height: 25px;
		position: absolute;
		/*left: -17px;
		top: -17px;
		 IE-users are prolly used to close-link in right-hand corner */
		left: auto;
		right: -17px;
		text-decoration: none;
		text-indent: -100000px;
		outline: 0;
		z-index: 11;
	}

	div.jquery-image-zoom a:hover {
		background-position: left -25px;
	}

	div.jquery-image-zoom img, 
	div.jquery-image-zoom embed, 
	div.jquery-image-zoom object, 
	div.jquery-image-zoom div {
		width: 100%;
		height: 100%;
	}