/*Job Board Layout Fixed Width with top nav CSS */

/**********/
/*
 Ripped of computer arts mag
 
 @charset "UTF-8";
/* CSS Document */

/* A very simple CSS reset */
/*html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, small, strike, strong, b, u, i,  ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

 
*/

/***************************************************/
/*			Reset all browsers                     */
/***************************************************/
/* sets all padding and margin in all browsers to 0*/

*{ margin:0; padding:0;}
li, dd { margin-left:5%; }
fieldset { padding: .5em; }
li{list-style:none;}
img { border:none;}
/***************************************************/
/*          Elements                               */
/***************************************************/
body { text-align:center; background:#fff;}
/***************************************************/
/*          classes                                */
/***************************************************/
.fltleft { float:left;}

.fltrght { float:right;}

.clear { clear:both;}

.dropcaps:first-letter { font-size:3em; color:#333; float:left; margin:3px 5px 5px 0;}

/* Useful piece of css for terms and condtions section of webistes or legal bumbo */

/*

#lcont ul li:after { color:#fff; content:' your string here'; }

--- use below in conjunction with javascript and html Dom
#lcont p:after { color:#fff; content: " "counter(p) ". " ;  counter-increment: p +2; }

*/
.underline { text-decoration:underline;}

/***************************************************/
/*          Wrapper encapsalting Id                */
/***************************************************/
#wrapper { width:893px; margin:0 auto; text-align:left; font-family:Trebuchet MS; clear:both}
/***************************************************/
/*          Header  encapsalting Id                */
/***************************************************/
* html #header { background:url(../imgs/layout/headerBg.png) no-repeat; width:893px; height:85px; text-align:center; color:#fff}
#header { background:url(../imgs/layout/headerBg.png) no-repeat; width:893px; height:93px; text-align:center; color:#fff}

html>body #header { }

#header img {}

#header a { color:#fff; text-decoration:none}
* html #header .left { float:left; width:320px; margin:0; padding:3px 0 0 0; height:50px;}
#header .left { float:left; width:320px; margin:0; padding:3px 0 0 0; height:90px;}
* html #header .left img { float:left; margin:0px 10px 0 10px}
#header .left img { float:left; margin:9px 10px 0 10px}

#header .center { float:left; width:337px;}
#header .right { float:right; width:205px;}

* html #header h1 { font-size:24px; float:right; margin:0px 0 0 -100px; line-height:15px; background:url(../imgs/layout/sewage&drainage-reflection.png) no-repeat 75px bottom; height:89px; padding:0 0 0 0;}
#header h1 { font-size:24px; float:left; margin: 4px 0 0 -15px; line-height:15px; background:url(../imgs/layout/sewage&drainage-reflection.png) no-repeat bottom left; height:78px; padding:11px 0 0 0;}
*:first-child+html #header h1 { font-size:24px; float:right; margin:4px 55px 0 -29px; line-height:15px; background:url(../imgs/layout/sewage&drainage-reflection.png) no-repeat bottom left; height:89px; padding:0 0 0 0;}

*  html #header h1 span {margin:20px 0 0 95px; float:left;}
#header h1 span { font-size:12px; margin:25px 0}
*+html #header h1 span { margin:20px 0 0 25px; float:left;}

*  html #header h1 sup { margin:-20px 0 0 -85px; padding:10px 0;}
#header h1 sup { float:right; margin:-2px 0}
*:first-child+html #header h1 sup { margin:-20px 0 0 0; padding:10px 0;}
#header h1 sup ,  x:-moz-any-link, x:default  { margin:-6px 0 }

* html #header h2 { font-size:17.5px; margin:13px 6px 0 0; /*background:url(../imgs/layout/lakeDiscrit-relection.png) no-repeat -4px bottom;*/ height:71px} 
#header h2 { font-size:17.5px; margin:15px 6px 0 0; /*background:url(../imgs/layout/lakeDiscrit-relection.png) no-repeat -4px bottom;*/ height:71px}
*:first-child+html #header h2 { font-size:17.5px; margin:18px 6px 0 0; /*background:url(../imgs/layout/lakeDiscrit-relection.png) no-repeat -4px bottom;*/ height:71px}
#header h2 span { font-size:16px;}

#header p { float:left; display:inline; margin:10px;}

* html #header ul { font-size:12px; float: left; margin:20px 13px 0px 13px;}
#header ul { font-size:12px;  float: left; margin: 20px 13px 13px 13px; }
#header ul li { clear: both; margin: -5px; width: 187px;}
* html #header ul li { clear: both; margin: -3px; width: 187px;}
#header ul li img { float:left; }
* html #header ul li p { float:left; display:inline; margin:10px 5px 7px 6px; }
#header ul li p { float:left; display:inline; margin:5px 5px 7px 6px; }
#header ul li p.less { float:left; display:inline; margin:3px 5px 4px 6px; }

/***************************************************/
/*          Main container Id                      */
/***************************************************/
/* formual for anysize of layout */
/* Small Container Width = (Overall Width - (margin * no.col+1)) / no.col */
/* 754px */
#container { background:url(../imgs/layout/bg.png) no-repeat; width:894px; height:781px }

/***************************************************/
/*          Navigation Id       		   */
/***************************************************/
#nav { padding:5px 0 0 0; float:left;}

#nav ul { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px;}

#nav ul li.first { list-style:none; display:inline; float:left; width:73px; padding:6px 0 0 20px; height:26px; margin:-2px 0 0 25px; }
#nav ul li.first:hover, #nav ul li.firstactive, #nav ul li.firstactive:hover { background:url(../imgs/layout/nav-rll-bg.png); width:73px; padding:6px 0 0 20px; height:26px; margin:-2px 0 0 25px; }


#nav ul li { list-style:none; display:inline; float:left; width:100px; padding:7px 0px 0 20px; height:29px; margin:-3px 0;}
#nav ul li:hover, #nav ul li.active { background:url(../imgs/layout/nav-rll-bg.png); width:100px; padding:7px 0px 0 20px; height:29px; margin:-3px 0;}

#nav a {color:#fff;}

#nav a:link, #nav a:visited {text-decoration:none;}

#nav a:hover {color:#fff;}

/*          Header of container colum Id           */
* html #containerMast { background:url(../imgs/layout/image-rotate-cont.png); clear:both; float:left; height:304px; width:875px; margin:-4px 0px 0 5px;}
#containerMast { background:url(../imgs/layout/image-rotate-cont.png); clear:both; float:left; height:304px; width:883px; margin:-4px 5px 0 5px;}

/*--------------------------------------------*/
/* following code is for four in a row colums */
/*--------------------------------------------*/

#containerMast .subcontaierfrst { width:182px; margin:0 5px; display:inline; background:#666; float:left;}
#containerMast .subcontaier { width:182px; margin:0 5px 0 0; display:inline; background:#666; float:left;}
#containerMast a { text-decoration:none; color:#fff}
#containerMast p { margin:268px 10px 0 10px; color:#fff; clear:both; text-align:center; font-size:12px}
#containerMast .slideshowLeft {}

#containerMast .slideshowLeft img { left:40px; top:15px; position:absolute; }
#containerMast .slideshowLeft span { left:50px; top:238px; position:absolute; width:200px}
#containerMast .slideshowRight img { left:425px; top:15px; position:absolute;}
#containerMast .slideshowRight span { left:445px; top:238px; position:absolute; width:200px }

#containerMast .slideshowRight {}
#containerMast p a:hover { text-decoration:underline; color:#fff}

.margin35 { margin:35px 0 0 0}
.margin30 { margin:30px 0 0 0}
.margin55 { margin:55px 0 0 0}

/*-------------------------------------------*/
/* following code is for two in a row colums */
/*-------------------------------------------*/
/*          Left container colum Id                */
#container .lcont { width:557px; margin:0 20px; display:inline; float:left; color:#eee; font-size:12px}
#container .lcont ul.dotted { margin:10px;}
#container .lcont ul.dotted li{ margin:5px 0 0 0; border-bottom:dotted 1px;}
#container .lcont ul.dotted p{ margin:0 0 5px 0;}

#container .lcont p strong { font-size:14px;}
#container .lcont p {  margin:10px 0;}

/*          Right container colum Id                */
* html #container .rcont { width:279px; height:220px; background:url(../imgs/layout/content-right-box.png); font-size:13px; color:#fff; position: absolute; top:430px; left:780px}
* html #container .rcontStdPage { width:279px; height:220px; margin:0 0 0 0; display:inline; background:url(../imgs/layout/content-right-box.png); float:left; font-size:13px; color:#fff;}
#container .rcont, #container .rcontStdPage{ width:279px; height:220px; margin:0 5px 0 0; display:inline; background:url(../imgs/layout/content-right-box.png); float:left; font-size:13px; color:#fff;}
#container .rcont ul, #container .rcontStdPage ul {margin:0;}
* html #container .rcont li, * html #container .rcontStdPage li { margin:5px 0 3px 8px; border-bottom:1px dashed #99a1d9; float:left;}
#container .rcont li, #container .rcontStdPage li { margin:5px 0 3px 10px; border-bottom:1px dashed #99a1d9; float:left}
* html #container .rcont li.last, * html  #container .rcontStdPage li.last{ margin:8px 0 8px 8px; border:none;}
#container .rcont li.last, #container .rcontStdPage li.last { margin:8px 0 8px 10px; border:none;}
#container .rcont li.lastContactus { margin:-1px 0 0px 10px; border:none;}
#container .rcont li img, #container .rcontStdPage li img { float:left; }
* html #container .rcont li img.arrows, * html #container .rcontStdPage li img.arrows { float:left; margin:10px 5px;}
#container .rcont li img.arrows, #container .rcontStdPage li img.arrows { float:left; margin: 10px;}
#container .rcont li p, #container .rcontStdPage li p { width:184px; float:left; }
#container .rcont li a, #container .rcontStdPage li a { font-size:13px; color:#fff; text-decoration:none;}
#container .rcont li a:hover, #container .rcontStdPage li a:hover { text-decoration:underline; }

*  html fieldset { border:1px dashed #B9BBC8;  font-size:13px; height:374px; background:#6A76C9}
fieldset { border:1px dashed #B9BBC8;  font-size:13px; height:377px; background:#6A76C9}
*+html fieldset { border:1px dashed #B9BBC8;  font-size:13px; height:374px; background:#6A76C9}


label {float:left; margin:7px; width:70px; font-size:12px;}
input, textarea {float:left; margin:7px; width:140px}
textarea {float:left; margin:7px; width:430px}
.address { height:110px}
.form-val-check {float:right;}
fieldset .fltleft { float:left; width:290px}
fieldset .fltrght { float:left; width:245px}
#recaptcha_widget  .fltleft { float:left; width:150px;}

.recapatchaleft { background:url(../imgs/layout/recaptch-lft.png); display:block; width:5px; height:61px; margin:0px; float:left;}
.recapatcharight { background:url(../imgs/layout/recaptch-rght.png); display:block; width:5px; height:61px; margin:0px; float:left;}

#recaptcha_widget { margin:5px; }

#recaptcha_widget .fltrght { margin:5px 0 0 10px; float:right; width:130px}
#recaptcha_widget .fltrght div{ margin:0 0 0 0; font-size:13px; color:#333; clear:both;}
#recaptcha_widget .fltrght div img { margin:-1px 5px; float:left; font-size:13px; color:#333;}
#recaptcha_widget .fltrght div a { padding:0; font-size:13px; color:#333; margin:-1px 0; float:left}
#recaptcha_widget .fltrght div a span{ padding:0; margin:0}
#recaptcha_widget .fltrght div a span.bot{margin:2px 0; float:right}
#recaptcha_widget .fltrght .recaptcha_only_if_image {float:left; margin:2px 0 -2px 0}

#recaptcha_widget input { float:left; margin:8px 0 3px 0; height:24px; padding:0 5px; border:none; }
#recaptcha_widget input.active{ float:left; margin:8px 0 3px 0; height:14px; padding:5px; border:none; }

input.submit { margin:3px 0 10px 86px;}

*html #map_canvas { margin:225px 0 0 0; float:left;}
#map_canvas { margin:5px 0; float:left;}
h2.contact { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; background:#6A76C9; border:1px dashed #B9BBC8; border-bottom:none; padding: 5px 10px; width: 300px; position:relative; margin:0 0 -1px 0; }

/*--------------------------------------------*/
/*	following code is for a one colum layout  */
/*--------------------------------------------*/
* html #tabs .onecol { color:#eee; padding:0 20px 0 30px; margin:20px -27px; float:left; width:816px; background:none;  }
#tabs .onecol { color:#eee; padding:0 10px 0 20px; margin:20px -27px; float:left; width:816px; background:none;  }

#onecol { color:#eee; padding:10px 0 0 5px; float:left; width:100%}

#onecol .longbox { color:#eee; clear:both; padding:0 15px; float:left; font-size:13px;}
#onecol .longbox p strong { font-size:14px;}
#onecol .longbox p {  margin:0 0 10px 0;}
#tabs .onecol a img { border:3px solid #6975c8;}
#tabs .onecol a:hover img { border:3px solid #22274b;}

#onecol .box { float:left; width:295px;}

*  html #onecol .box h2 { width:247px; height:24px; padding:7px 25px; font-size:18px; background:url(../imgs/layout/box-header.png) no-repeat; margin:0 0 0 2px; }
#onecol .box h2 { width:247px; height:24px; padding:7px 25px; font-size:18px; background:url(../imgs/layout/box-header.png) no-repeat; margin:0 0 0 2px; }
*+html #onecol .box h2 { width:247px; height:24px; padding:7px 25px; font-size:18px; background:url(../imgs/layout/box-header.png) no-repeat; margin:0 0 0 2px; }

*  html #onecol .box h2.midBox { margin:0 0 0 -3px;}
#onecol .box h2.midBox { margin:0 0 0 -3px}
*+html #onecol .box h2.midBox { margin:0 0 0 -3px}

*  html #onecol .box h2.rightBox { margin:0 0 0 -11px}
#onecol .box h2.rightBox { margin:0 0 0 -7px}
*+html #onecol .box h2.rightBox { margin:0 0 0 -7px}

*  html #onecol .box .h2imgleft { float: left; margin: -23px 0 -10px -10px;}
#onecol .box .h2imgleft { float: left; margin: -23px 0 0 -10px; }
*+html #onecol .box .h2imgleft { float: left; margin: -23px 0 0 -10px;}

*  html #onecol .box .h2imgmid { float: left; margin: -20px 0 -10px -10px}
#onecol .box .h2imgmid { float: left; margin: -20px 0 0 -10px}
*+html #onecol .box .h2imgmid { float: left; margin: -20px 0 0 -10px}

*  html #onecol .box .h2imgright { float: left; margin: -16px 0 -10px -10px}
#onecol .box .h2imgright { float: left; margin: -16px 0 0 -10px}
*+html #onecol .box .h2imgright { float: left; margin: -16px 0 0 -10px}

#onecol .leftBox, #onecol .midBox, #onecol .rightBox { width:255px; height:153px; margin:0; font-size:11px; padding:7px 20px 0 20px; }
* html #onecol .leftBox { background:url(../imgs/layout/left-bot-box.png); padding:7px 24px 0 20px;}
#onecol .leftBox { background:url(../imgs/layout/left-bot-box.png);}
#onecol .leftBox p { padding:0 10px}
* html #onecol .midBox { background:url(../imgs/layout/mid-bot-box.png); }
#onecol .midBox { background:url(../imgs/layout/mid-bot-box.png);}
#onecol .midBox p { padding:0 5px}
* html #onecol .rightBox { background:url(../imgs/layout/right-bot-box.png); width:252px; margin:0 0 0 -4px}
#onecol .rightBox { background:url(../imgs/layout/right-bot-box.png); width:252px}

#onecol ul { padding:0 5px }
#onecol ul li { list-style:url(../imgs/layout/arrow-smll.gif); }

ul.inline { float:left; margin-top:-16px; }
* html ul.inline li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.inline li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

ul.nocol { position:absolute; top:843px; left:185px; width:100%;}

ul.nocolAboutus { float:left; margin:65px 0 0 0; width:100%;}
* html ul.nocolAboutus li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.nocolAboutus li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

ul.nocolAboutus { float:left; margin:54px 0 0 0; width:100%;}
* html ul.nocolAboutus li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.nocolAboutus li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

ul.nocolExamples { float:left; margin:-5px 0 0 0; width:100%;}
* html ul.nocolExamples li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.nocolExamples li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

ul.nocolPrivacy { float:left; margin:65px 0 0 0; width:100%;}
* html ul.nocolPrivacy li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.nocolPrivacy li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

ul.nocolTerms { float:left; margin:11px 0 0 0; width:100%;}
* html ul.nocolTerms li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.nocolTerms li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

ul.nocolAssec { float:left; margin:160px 0 0 0; width:100%;}
* html ul.nocolAssec li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.nocolAssec li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

* html ul.nocol li { float:left; font-size:12px; color:#fff; margin:0 0 0 15px; }
ul.nocol li { float:left; font-size:12px; color:#fff; margin:0 0 0 32px; }

/***************************************************/
/*          Footer Id                */
/***************************************************/
#footer { padding:0 10px; color:#111; font-size:11px; padding:0 85px;}

#footer p { float:left;}

/*------------------- Site links ------------------------------*/
#footer ul { margin:0 68px; padding:0 0 10px 0; float:left;}

#footer ul li {display:inline; margin:0 5px; float:left; }

#footer ul a {text-decoration:none; color:#111;}

#footer ul a:hover {color:#111; text-decoration:underline;}

/*------------------- External links ------------------------------*/
#footer ul.externallinks { margin:10px 0; padding:0 0 10px 0; border-bottom: #999 dashed 1px;}

#footer ul.externallinks li {display:inline; margin:0; color:#999;}

/*------------ Copy right and creative plug -------------------*/
#footer p { margin:0px;}

#footer .copy { color:#ccc; border-bottom: #999 dashed 1px;}

#footer .creative { color:#ddd;}