html, body {background:#032243;margin:0;padding:0;height:100%;width:100%;font-family: Arial, verdana, helvetica; font-size: 14px;color:#4d4d4d;}
img {border:0;}
form {margin:0; padding:0;}
.both {clear: both; }
p {margin:0;padding: 5px 0;line-height: 18px;}
a {color:#07467e;}
a:hover {text-decoration:none}
.LearnMore {color:#07467e;text-decoration:none;font-weight:bold;padding: 0 15px 0 20px;display:inline-block;background:#cee3f2 url("images/bg-a.png") 8px 11px no-repeat;font-size:12px;height:28px;line-height:28px;}
.LearnMore:hover {text-decoration:underline}
.header {background: #fff url("images/bg_header.png") center top repeat-x;height:80px}
.header .all {margin:0 auto;width:980px;height:80px}
.header .logo {width:222px;height:75px;background: transparent url("images/logo.png") center top no-repeat;display:block;float:left;}
.header ul {margin:0;padding:36px 0 0 0;list-style:none;float:right;font-family: Arial, verdana, helvetica; font-size: 14px;}
.header li {margin:0;padding:0;float:left;height:39px;border-left:#386186 solid 1px;}
.header li a {background: #05325a url("images/bg_menu.jpg") center top no-repeat;display:block;height:39px;text-decoration:none;color:#fff;}
.header li a.active, .header li a:hover {background-position:center bottom;}
.header li.first {border:0;}
.header li.first a { background-position:left top; }
.header li.first a.active, .header li.first a:hover {background-position:left bottom;}
.header li.last a { background-position:right top; }
.header li.last a.active, .header li.last a:hover {background-position:right bottom;}
.header li b {display:block;height:39px;line-height:39px;padding:0 20px;font-weight:normal;cursor:pointer;}
.header li .active b {background: transparent url("images/bg_menu.png") center bottom no-repeat;}
.middle {background: #b4b9bd url("images/bg.png") center top repeat;}
.middle .all {margin:0 auto;width:980px;}
.middle_bg_y {background: transparent url("images/bg_m_1.png") center top repeat-y;}
.middle_bg_x {background: transparent url("images/bg_m_2.png") center top repeat-x;}
.middle_bg {background: transparent url("images/bg_m_3.png") center top no-repeat;}
#page-bg-top {background: #272727;height:180px;}
.middle .leftBox {margin:0;padding:0 0 0 40px;width:200px;float:left;}
.middle .leftBox ul {margin:0;padding:0;font-size:12px;list-style:none;}
.middle .leftBox li {margin:0;padding:5px 10px 5px 15px;background: transparent url("images/bg_ul_l.png") 0 10px no-repeat}
.middle .leftBox p {margin:0 0 10px 0;padding:0;color:#07467e;font-size:12px;line-height: 14px;}
.middle .leftBox ul.menu {margin:0;padding:0 0 40px 0;font-size:12px;list-style:none;}
.middle .leftBox ul.menu li {margin:0;padding:2px 0;background-image:none;}
.middle .leftBox ul.menu li a {display:block;height:24px;line-height:24px;padding: 0 10px 0 10px;width:180px;text-decoration:none;color:#4d4d4d;font-size:13px;color: #4d4d4d;}
.middle .leftBox ul.menu li a:hover, .middle .leftBox ul.menu li a.active {background: #7ac142 url("images/bg_ul_l_a.png") 0 0 no-repeat;color:#fff;}
.middle .rightBox {margin:0;padding:7px 40px 0 0;width:670px;float:right;}
.middle .rightBox p {margin:0;padding: 0 0 15px 0;}
.middle .rightBox ul {margin:0;padding:0 0 20px 0;list-style:none;}
.middle .rightBox li {margin:0;padding: 5px 0 5px 20px;background: transparent url("images/bg_ul_r.png") 5px 8px no-repeat}
.middle .rightBox h3 {margin:0;padding:0;color:#05325a;font-size:16px;}
.middle .rightBox .col2 {float:right; width:320px;}
.services_grid {margin-bottom: 15px;clear: both;}
.services_grid img {display: block;float: left; border-width:0;}
.services_grid span {float: right;width: 86%;}
.services_grid span a.learn_more {text-decoration: none;background: url(images/learn_more_arrow.gif) left 3px no-repeat;padding-left: 10px;}
.ServicesTable {width:100%;}
.ServicesTable td {margin:0;padding: 10px 0;width:335px;}
.ServicesTable td.bBot {border-bottom:1px solid #ccc}
.ServicesTable td.bBot img {margin: 7px 0px;}
.ServicesTable td.bLeft {border-left:1px solid #ccc;}
.ServicesTable td.td-top {padding-top: 0;}
.ServicesTable td.td-top img {margin: 0 0 7px 0;}
.ServicesTable p {margin:0;padding:0;width:315px;}
.ServicesTable h3 {margin:0;padding:10px 0 5px 0;width:315px;}
.ServicesTable td.bLeft p,.ServicesTable td.bLeft h3,.ServicesTable td.bLeft img {padding-left:20px}
#ind-box {margin:0;padding: 0 0 30px 0;background: url("images/ind-box-bg.png") 0 0 repeat-x;}
#ind-box p {padding-bottom: 10px;}
#ind-box h2 {color:#fff;margin:0;padding:0 0 10px 19px;font-size:18px;height:40px;line-height:40px;background: transparent url("images/ind-h2-bg.png") 0 15px no-repeat;font-weight: normal;}
#ind-box #ind-c h2 {padding:0 0 10px 19px;background: transparent url("images/ind-h2-bg.png") 0 15px no-repeat;}
#ind-box p b {color:#07467e;display:block;}
#ind-l {float:left;width:430px;padding:0 10px 0 25px;}
#ind-c {float:left;width:210px;padding:0 10px 0 0;line-height: 16px;}
#ind-c h2 {margin-left: 8px;}
#ind-l .content {padding:0 0 0 15px;}
#ind-c .content {border-left:1px solid #ccc;padding:0 0 0 10px;margin-top: 5px;font-size:12px}
#ind-c .content p {padding: 0 0 20px 15px;}
#ind-c .content ul {margin:0;padding:0 0 0 15px;font-size:12px;list-style:none;}
#ind-c .content li {margin:0;padding:5px 0 5px 15px;background: transparent url("images/bg_ul_l.png") 0 10px no-repeat}
#ind-l .content h3 {color:#07467e;margin:0;padding:0;font-size:16px;}
#ind-box #ind-c .content h2,#ind-box #ind-r h2 {color:#07467e;padding:0 0 0 19px;background: transparent url("images/ind-h2-bg-1.png") 0 15px no-repeat;}
#ind-box #ind-r h2 {padding:3px 0 5px 19px;background: transparent url("images/ind-h2-bg-1.png") 0 17px no-repeat;}
#ind-sm-box {padding:10px 0;}
#ind-r {float:right;background: transparent url("images/bg-ind-r.png") 0 0 no-repeat;width:220px;padding:0 20px;font-size:14px}
#ind-r .LearnMore {color:#fff;background:#509725 url("images/bg-a-1.png") 0 0 no-repeat;}
#ind-r img {margin-bottom: 5px;}
#ind-sm-box-Water {padding: 0;float:left;font-size:12px;width:190px;}
#ind-sm-box-Sewer {padding: 0 0 0 15px;float:right;font-size:12px;width:190px;border-left:1px solid #ccc;}
.iconstyle { padding:0 10px 0 0; float:left;}
/* HEADERS */
h2.h2_headers {padding-left: 38px;font-family: "etica-display-1","etica-display-2",sans-serif;font-weight: 200;font-size: 38px;color: #003366;letter-spacing: -1px;}
#h2_Portfolio {margin:0 40px 20px 40px;padding:20px 0 10px 0;background: transparent url("images/h2_Portfolio.png") center bottom no-repeat;text-indent:-100000px;width:122px;height:33px;}
#h2_History {margin:0 40px 20px 40px;padding:20px 0 10px 0;background: transparent url("images/h2_History.png") center bottom no-repeat;text-indent:-100000px;width:103px;height:33px;}
#h2_Company {margin:0 40px 20px 40px;padding:20px 0 10px 0;background: transparent url("images/h2_Company.png") center bottom no-repeat;text-indent:-100000px;width:146px;height:33px;}
#h2_Services {margin:0 40px 20px 40px;padding:20px 0 10px 0;background: transparent url("images/h2_Services.png") center bottom no-repeat;text-indent:-100000px;width:127px;height:33px;}
#PortfolioList {margin:0;padding:0 30px;list-style:none;}
#PortfolioList li {margin:0;padding:10px;float:left;width:286px; height:196px;}
#PortfolioList a {width:282px; height:192px;display:block;border:3px solid #ccc;position:relative;color:#fff;text-decoration:none;}
#PortfolioList a:hover {border:3px solid #05325a;}
#PortfolioList img {width:282px; height:192px;}
#PortfolioList span {position:absolute;left:0;bottom:0;width:262px;height:45px;padding:10px;}
#PortfolioList span.bg {background:#08263d;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);-moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;}
#PortfolioList span b {display:block;font-size:12px;}
#PortfolioList span i {display:block;font-size:11px;color:#b0b1b3;}
.footer {background:#05325a;color:#fff;font-size:12px;}
.footer .all {margin:0 auto;width:950px;padding:10px 15px;}
.footer h3 {margin:0;padding:5px 0;color:#7ac142;font-weight:bold;font-size:18px;}
.footer-content {background: transparent url("images/bg_footer.png") -20px 0 repeat-y;margin-bottom: 10px;}
#footer-content-1 {float:left;width:200px;}
#footer-content-2 {float:left;width:180px;}
#footer-content-3 {float:left;width:180px;}
#footer-content-4 {float:left;width:210px;}
#footer-content-5 {float:left;width:140px;}
.footer_menu {padding:15px 15px 40px 15px;text-align:center;}
.footer_menu a {color:#fff;text-decoration:none;display:inline-block;padding:0 14px;border-left:1px solid #637d94;font-size: 12px;}
.footer_menu a:hover {text-decoration:underline}
.footer_menu a.first {border:0;}
/*form*/
.middle .rightBox form ul {margin:0;padding:0;font-size:14px;color:#3e3e3e;list-style:none;}
.middle .rightBox form ul li {margin:0;padding:0 0 10px 0; background:none;}
.middle .rightBox form ul li label,.middle .content form ul li input, .middle .content form ul li textarea {float:left;}
.middle .rightBox form ul li textarea {height:100px;}
.middle .rightBox form ul li label {width:100px;}
.bord {border:2px solid #ccc;width:420px;}
.bord-img-sm {padding: 5px 8px 12px 5px;background: url(images/img-bg.png) right bottom no-repeat;}
/* Gallery */
.boxgrid {width: 282px;height: 192px;margin: 10px;float: left; background: white;border: 2px solid #222;overflow: hidden;position: relative;}
.boxgrid img {position: absolute;top: 0;left: 0;border: 0;}
.boxcaption {float: left;position: absolute;background: #222;height: 100px;width: 100%;opacity: .8;}
.captionfull .boxcaption {top: 260;left: 0;}
.caption .boxcaption {top: 220;left: 0;}
#Portfolio-Container {margin: 0 30px;}
#Portfolio-Container h4 {font-size: 12px;color: white;font-weight: bold;padding: 10px 10px 1px 10px;margin: 0;text-decoration: none;}
#Portfolio-Container a {text-decoration: none;}
#Portfolio-Container p {font-size: 11px;color: #ddd;padding: 0 10px 10px 10px;margin: 0;line-height: normal;}
/*
Mosaic - Sliding Boxes and Captions jQuery Plugin
Version 1.0.1
www.buildinternet.com/project/mosaic
By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
Released under MIT License / GPL License
*/
* {
margin:0;
padding:0;
border:none;
outline:none;
}
/*General Mosaic Styles*/
.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:282px;
height:192px;
margin:9px;
background:#ccc url(portfolio_imgs/progress.gif) no-repeat center center;
border: 3px solid #ccc;
}
.mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
background:#111;
}
.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:100%;
height:100%;
background:#08263d;
}
/*** Custom Animation Styles (You can remove/add any styles below) ***/
.circle .mosaic-overlay {
background:url(portfolio_imgs/hover-magnify.png) no-repeat center center;
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter:alpha(opacity=00);
display:none;
}
.fade .mosaic-overlay {
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter:alpha(opacity=00);
background:url(portfolio_imgs/bg-black.png);
}
.bar .mosaic-overlay {
bottom:-100px;
height:100px;
background:url(portfolio_imgs/bg-black.png);
}
.bar2 .mosaic-overlay {
bottom:-62px;
height:110px;
opacity:0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
}
.bar2 .mosaic-overlay:hover {
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
}
.bar2b .mosaic-overlay {
bottom:-60px;
height:130px;
opacity:0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
}
.bar2b .mosaic-overlay:hover {
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
}
.bar2c .mosaic-overlay {
bottom:-47px;
height:110px;
opacity:0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter:alpha(opacity=80);
}
.bar2c .mosaic-overlay:hover {
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
}
.bar3 .mosaic-overlay {
top:-100px;
height:100px;
background:url(portfolio_imgs/bg-black.png);
}
/*** End Animation Styles ***/
/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}