@import url(core.css);

/* force vertical scrollbar */
html, body { 
	height: 100%;
	margin: 0 0 1px;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}


/* =STRUCTURE
----------------------------------------------- */
body {
	background: #f0f5f8 url(../images/layout/body-bg.png) repeat-y top;
}
#container {
	background: url(../images/layout/bg-top.png) no-repeat top;
}
#header, #main-outer, .wrapper, .footer-wrap {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.footer-wrap {
	width:760px;	
	margin-left:160px;
}
#header {
	height: 115px;
	z-index: 5;
}
	#logo {
		position: relative;
		top: 34px;
		left: 0;
	}

#main-outer {
	background: url(../images/layout/contentbg-repeat.png) repeat-y top;
	z-index: 4;
}
	#main-inner {
		overflow: hidden;
		background: url(../images/layout/contentbg-top.png) no-repeat top;
		zoom: 1;
	}
		#subnav {
			width: 118px;
			float: left;
			padding-left: 32px;	
			padding-right: 20px;
			position: relative;
			padding-top: 127px;
		}
		#content {
			float: left;
			width: 735px;
			padding-left: 30px;
			padding-top: 11px;
		}
#footer-top {
	background:url(/images/layout/footer-top.png) no-repeat top;
	height:1px;
}
#home-footer-top {
	background:url(/images/layout/home-footer-top.png) no-repeat top left;
	height:1px;
	margin:0 -160px 0 -160px;
	display:block;
}
#footer {
	background: url(../images/layout/footer.png) repeat-y top;
	overflow: hidden;
	height: 54px;
}


/* =UTILITIES
----------------------------------------------- */
#utilities {
	position: absolute;
	right: 30px;
	top: 10px;
	font-size: 10px;
}
	#utilities a {
		display: block;
		float: left;
		color: #a0b4c0;
		text-decoration: none;
		background-color: #f7f7f7;
		border: 1px solid #b0c4d1;
		margin-left: 4px;
		padding: 2px 10px;
		zoom: 1;
	}
	#utilities a:hover {
		background-color: #7aa5dc;
		border: 1px solid #7aa5dc;
		color: white;
	}

/* =NAVIGATION
----------------------------------------------- */
#nav {
	width: 745px;
	position: absolute;
	background: url(../images/nav/nav.png);
	right: 22px;
	top: 60px;
}
	#nav ul.menubar {
		overflow: hidden;
	}
	#nav li.menubar {
		float: left;
		display: inline;
		margin: 0 -1px;
	}
	#nav li a.menubar {
		display: block;
		overflow: hidden;
		height: 1px;
		padding-top: 31px;
		background-position: top left;
		position: relative;
		z-index: 1;
	}
	#nav #navmenu li a.menubar:hover, #nav #navmenu li a.yuimenubaritemlabel-selected {
		background-position: 0 -32px;
		z-index: 4;
	}
	#nav li.menubar a.active {
		background-position: 0 -64px;
		z-index: 2;
	}
		.nav-aboutus {
			width: 119px;
			background: url(../images/nav/nav-aboutus.png) no-repeat top left;
		}
		.nav-membrane {
			width: 210px;
			background: url(../images/nav/nav-membrane.png) no-repeat top left;
		}
		.nav-wastewater {
			width: 275px;
			background: url(../images/nav/nav-wastewater.png) no-repeat top left;
		}
		.nav-installations {
			width: 144px;
			background: url(../images/nav/nav-installations.png) no-repeat top left;
		}

		.yuimenu ul {
			border: 1px solid #6491cf;
			border-top-width: 0;
			position: relative;
			top: 0;
			margin-bottom: -1px;
			background-color: white;
		}
		.yuimenubar .yuimenu li {
			background: url(../images/dotted-h-subnav.gif) repeat-x top left;
			margin: 0 3px -1px;
		}
		.yuimenu a {
			padding: 5px 5px 6px 20px;
			display: block;
		}
		.yuimenu .bd {
			top: -1px;
		}
		.nav-aboutus .bd { width: 109px; position: absolute; left: 10px; }
		.nav-membrane .bd { width: 210px; position: absolute; left: 0; }
		
		.gecko .nav-membrane .bd, .gecko .nav-installations .bd { left:1px; }
		 
		.nav-wastewater .bd { 
			/*width: 721px; */width:722px;
			position: absolute; 
			/*left: -317px; */left:-319px;
		}
		
			.nav-wastewater .yuimenu ul {
				border-top-width: 1px;
				overflow: hidden;
				width: 100%;
				/*padding-left: 10px;*/
				padding-left: 7px;
			}
			.nav-wastewater .yuimenu img {
				border: 1px solid #bcced9;
				display: block;				
			}
			.nav-wastewater .yuimenu a {
			}
			.nav-wastewater .yuimenu table {
				margin-top: 3px;
				width: 100%;
				table-layout: fixed;
			}
			.nav-wastewater .yuimenu td {
				background-color: #f3efef;
				text-align: center;
				padding: 3px;
				height: 31px;				
				vertical-align: middle;
				line-height: 1em;
			}
			.nav-wastewater .yuimenu .yuimenuitem-selected td {
				background-color: #7aa5dc;
				color: white;
			}
				.nav-wastewater .yuimenu .yuimenuitem-selected a {
					color: white;
				}
			.nav-wastewater .yuimenu li {
				width: 124px;
				float: left;
				dispay: inline;
				/*padding: 22px 0 19px 10px;*/
				padding: 22px 0 19px 11px;
				background: none;
			}
			.nav-wastewater .yuimenu a, .nav-wastewater .yuimenu a:hover {
				text-decoration: none;
				padding: 0;
			}
			
		.nav-installations .bd { width: 140px; position: absolute; left: 0; }
		

	#subnav #section {
		position: absolute;
		left: 32px;
		top: 54px;
		width: 118px;
		height: 50px;
	}		
		#section table {
			height: 100%;
			width: 100%;
			margin: 0; padding: 0;
		}
		#section td {
			vertical-align: middle;
		}
				
		#subnav #section a, #subnav #section a:hover  {
			font-size: 15px;
			color: #000;
			text-decoration: none;
			font-weight: bold;
			line-height: 16px;
		}
		#subnav li {
			background: url(../images/dotted-h-subnav.gif) repeat-x bottom left;
		}
		#subnav ul a {
			text-decoration: none;
			color: #5c5c5c;
			padding: 10px 0;
			display: block;
		}
		#subnav ul a:hover, #subnav ul a.active {
			color: #3c67a2;
		}
		#subnav ul a.active {
	font-weight: normal;
		}

/* =CONTENT
----------------------------------------------- */
#content {
	overflow: hidden;
	color: #231f20;
	zoom: 1;
	vertical-align: bottom;
}
	#content-banner {
		background: url(../images/banners/banner-01.jpg) no-repeat top;
		position: relative;
		left: -2px;
		top: 0;
		width: 735px;
		height: 191px;
	}
		.aboutus #content-banner { background-image: url(../images/banners/banner-04.jpg); }
		.membrane #content-banner { background-image: url(../images/banners/banner-03.jpg); }
		.wastewater #content-banner { background-image: url(../images/banners/banner-02.jpg); }
	#breadcrumbs {
		margin: 12px 0;
		font-size: 10px;
		color: #767474;
	}
		#breadcrumbs span {
			color: #5475a3;
		}
		#breadcrumbs a {
			color: #767474;
		}
		
		
	#textbody {
		overflow: hidden;
		width: 570px;
		float: left;
		line-height: 1.5em;
		padding-bottom: 50px;
	}
		.overview-panels {
			width: 603px;
			overflow: hidden;
			margin-top: 25px;
		}
			.overview-panels .panel {
				width: 171px;
				padding-right:14px;
				margin-bottom:25px;
				margin-right:14px;
				float: left;
				zoom: 1;
				background: url(../images/dotted-v.gif) repeat-y top right;
			}
				.overview-image {
					border: 1px solid #bacdd9;
					width: 168px;
					height: 96px;
					overflow: hidden;
				}
				.overview-title {
	font-size: 14px;
	color: #5979a6;
	margin: 10px 0;
	font-weight: bold;					
				}
				#textbody .panel .readmore, #textbody .panel .readmore:visited {
					color: #FFF;
					display: block;
					height: 16px;
					background: url(../images/layout/readmore.png) no-repeat;
					text-transform: uppercase;
					font-size: 10px;
					padding-left: 10px;
					margin: 10px 0;
					line-height: 16px;					
				}
				#textbody .panel .readmore:hover {
					background-image: url(../images/layout/over/readmore.png);
					text-decoration: none;
				}

/* =CTAS
----------------------------------------------- */
#ctas {
	width: 151px;
	float: right;
}
	#ctas .cta {
		width: 150px;
		height: 1px;
		display: block;
		overflow: hidden;
		position: relative; left: 3px; top: 0;
	}
	#ctas .cta:hover {
		background-position: top right;
	}
	#cta-videodemo {
		padding-top: 103px;
		background-image: url(../images/cta/cta_watchvideo.jpg);
	}
	#cta-requestquote {
		padding-top: 84px;
		background-image: url(../images/cta/cta_requestquote.jpg);
	}

/* =FOOTER
----------------------------------------------- */
#footer-content {
	padding-left: 200px;
	padding-top: 13px;
	line-height: 1.5em;
	font-size: 10px;
}
#footer-content, #footer-content a, #footer, #footer a {
	color: white;
	text-decoration: none;
}
#footer-content a:hover, #footer a:hover {
	text-decoration: underline;
	color: white;
}

.tableBorderBg {
	background-color: #F7F7F7;
	border: 1px solid #B0C4D1;
}