/* 
	Theme Name: My Water Cooler
	Theme URL: 
	Description: My Water Cooler
	Author: Hugeobject
	Author URI: http://www.hugeobject.com.au
	Version: 1.0
		
*/

/* --======= BASE =======-- */

body {
	margin: 0;
	padding: 0;
	background: #1570b7 url(images/bg_body.gif) top left repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}

img { border: 0; }

.clearspace {
	clear: both;
	height: 15px;
}

/* --======= WAPPERS =======-- */

div#superwrapper {
	margin: 20px auto 0 auto;
	width: 960px;
}

	div.sitewrapper {
		width: 940px;
		margin: 0 auto;
		background: #ffffff;
	}
	


/* --======= HEADER =======-- */

#header {
	width: 940px;
	height: 160px;
	background: #ffffff url(images/bg_header.png) bottom left no-repeat;
	padding-top: 15px;
}

	#header #logo {
		float: left;
		width: 320px;
	}
	
	#header #logo h1 {
		margin-left: 15px;
		width: 301px;
		height: 145px;
		background: transparent url(images/logo_mct.png) top left no-repeat;
	}
	
		#header #logo h1 a { 
			display: block;
			width: 301px;
			height: 145px;
			text-indent: -9999px;
		}
	
	
	#header #search {
		width: 300px;
		margin-right: 15px;
		float: right; 
		text-align: right;
		
	}
	
/* --======= NAV =======-- */

#nav {
	width: 910px;
	margin: 0 auto;
	height: 35px;
	background: #004a81 url(images/bg_nav.png) top left repeat-x;
}

	#nav ul {
		list-style-type: none;
		margin: 0;
		padding-left: 0;
	}
	
		#nav ul li {
			float: left;
			border-right: 1px solid #608ac9;
		}
		
		#nav ul li a {
			display: block;
			height: 25px;
			padding: 10px 25px 0px 24px;	
			text-decoration: none;
			color: #ffffff;
			font-weight: bold;
			font-size: 14px;
		}
		
		#nav ul li a:hover,
		#nav ul li.current_page_item {
			background-image: url(images/bg_nav_over.png);
			background-position:  top left repeat-x;
		}
		
		#nav ul li.page-item-16 {			
			border-right: 0 none;
		}

/* --======= HERO =======-- */

#herowrapper {
	height: 200px;
	background: transparent url(images/bg_hero.png);
}

	#hero_left {
		margin-left: 10px;
		width: 670px;
		float: left;
	}
	
	#hero_right {
		float: right;
		width: 270px;
		margin-right: 10px;
	}

/* --======= MAIN CONTENT =======-- */

#contentwrapper {
	width: 910px;
	margin: 0 auto;
}

	.left-col {
		margin-top: 15px;
		float: left;
		width: 650px;
	}
	
		.left-col .home_item_one {
			float: left;
			width: 310px;
		}
		
		.left-col .home_item_two {
			float: right;
			width: 310px;
		}
	
	.right-col {
		margin-top: 15px;
		float: right;
		width: 240px;
	}

#breadcrumb {
	font-size: 11px;
	font-style: italic;
	padding: 0;
	width: 905px;
	margin: 0 auto 10px auto;
}

/* --======= FOOTER =======-- */

#footer {
	width: 940px;
	margin: 0 auto;
	height: 25px;
	background: #004a81 url(images/bg_footer.png) top left repeat-x;	
	padding-top: 10px;
	color: #ffffff;
}

	
	#footer p {
		font-size: 11px;
		margin: 0 0 0 15px; 
	}

	#footer a { 
		color: #ffffff;
		text-decoration: none;
	}
	
	#footer a:hover {
		text-decoration: underline;
	}

/* --======= FORMS =======-- */

#search form { margin-bottom: 10px; }
#search form input { border: 1px solid #58748f; width: 200px; padding: 3px 2px; }
#search form input#search { background: #1f497b; font-weight: bold; color: #ffffff; border:0 none; cursor:pointer; padding: 3px 0; text-align: center; width:70px; margin-left: 5px; margin-right: 0;}
#search form input#search:hover { background: #426fb4; }

div.error { color: red; margin-top: 5px; }


/* --======= TYPO =======-- */

h1, h2 {
	margin: 0;
	padding: 0;
}

h2 {
	color: #1f497b;
	font-size: 16px;
}

h3 {
	color: #1570b7;
	font-size: 15px;
	clear: both;
}

p, li {
	font-size: 0.9em;
	line-height: 1.4em;
}

a { 
	color: #156fb7;
	text-decoration: none;
}

a:hover { text-decoration: underline; }

/* --======= WATER CALC =======-- */

#watercalc { margin: 20px 0px;}

#stepper { width: 200px; float: right; margin: 10px 0px;}
#stepper ul#steps { list-style-type: none; margin: 0; padding: 0; }
#stepper ul#steps li { float: left; margin-left: 12px;}
#stepper ul#steps li a { font-size: 28px; padding: 3px 10px; text-align: center; background: #cccccc; display: block; font-weight: bold; text-decoration: none; color: #ffffff; }
#stepper ul#steps li.current a { background: #006699; }

#watercalc h2.wc_header { clear: both; color: #ffffff; margin-top: 10px; padding: 6px 10px 6px 0px; background: #1570b7 url(../images/h2_span.png) top left no-repeat; font-size: 20px; font-weight: normal; }
#watercalc h2.wc_header span { padding: 8px 10px 8px 3px; margin: 0px 25px 0px 15px; }

form#stepone select#city { width: 150px; margin-right: 20px; }
form#stepone label  { font-weight: bold; }

form#steptwo label  { font-weight: bold; width: 250px; float: left;}
form#steptwo span.avg a { font-size: 11px; text-decoration: underline; margin-left: 5px; font-style: italic;}


form#stepthree label  { font-weight: bold; width: 250px; float: left;}
form#stepthree span.avg a { font-size: 11px; text-decoration: underline; margin-left: 5px; font-style: italic;}

ol.items { list-style-type: none; margin: 0 0 20px 0; padding: 0 ;}

form#stepone li,
form#steptwo li,
form#stepthree li { clear: both; margin-bottom: 10px;}

input#next, a.another {  background: #1f497b; color: #ffffff; padding: 5px 10px; text-align: center; border: 0 none; font-weight: normal; font-size: 14px; text-transform: uppercase;}
label { font-size: 0.9em; }


/* --======= HELP BOX =======-- */

a.whatsthis img {
	border: 0;
	vertical-align: bottom;
}

a.whatsthis span {
	display: none;
	text-decoration: none;
	font-size: 11px;
	font-weight: normal;
	color: #333333;
	width: 280px;
}

a.whatsthis:hover {
/** fix for IE6 popup bug.  nice one Microsoft! */
	overflow: hidden;
	text-decoration: none;
}

a.whatsthis:hover span {
	display: inline;
	border: 1px solid #cccccc;
	position: absolute;
	background-color: #ffff99;
	padding: 5px;
	margin-left: 5px;
	overflow: hidden;
}