@charset "UTF-8";
/* CSS Document */

html { height:100%;}

body {margin:0px;padding:0px;background: #808080; height:100%;font-family:Arial, Helvetica, sans-serif;font-size:62.5%;}

#container {
 width:885px;
 margin:0px auto;
 padding:0px;
 position:relative;
 z-index:100;
 height:100%;
}

#wrapper {
 width:100%;
 background: url(wrapper_bkg.jpg) repeat-y top center;
}


/* ----- header info ----- */

#header {width:883px;height:83px;}

#logo_top {
 background:url(images/logo_top.jpg) top left no-repeat;;
 height:40px;
 width:885px;
 margin:0px;padding:0px;
 float:left;
}
 
#navigation {
 margin:0px;
 padding:0px;
 width:885px;
 clear:both;
 float:left;
}

#navigation li {
 text-indent:-9999px;
 margin:0px; padding:0px;
 display:block;
 float:left;
 list-style:none;
 height:45px;
 margin:0px;
 padding:0px;
 overflow:hidden;
}

#navigation li a {
 display:block;
 height:45px;
 overflow:hidden;
 }

#logo {background:url(images/logo_bottom.jpg);width: 219px;}
#safety {background:url(images/safety.jpg); width:90px;}
#employment {background:url(images/employment.jpg); width:131px;}
#awards {background:url(images/awards.jpg); width:222px;}
#links {background:url(images/coastal.jpg); width:134px;}
#login {background:url(images/login.jpg); width:75px;}
#links_right {background:url(images/links_right.jpg); width:14px;}

#logo a {width:219px;}
#safety a {width:90px;}
#employment a {width:131px;}
#awards a {width:222px;}
#links a {width:134px;}
#login a {width:75px;}
#links_right a {width:14px;}

#safety a:hover {background:url(images/safety_on.jpg);}
#employment a:hover {background:url(images/employment_on.jpg);}
#awards a:hover {background:url(images/awards_on.jpg);}
#links a:hover {background:url(images/coastal_on.jpg);}
#login a:hover {background:url(images/login_on.jpg);}

/* ----- left box navigation  ----- */

#left_box {
 float:left;
 width:270px;
 height:473px;
 background:url(images/links_bkg.jpg) no-repeat;
 }
 
 
#left_navigation {
 list-style:none; 
 width: 145px;
 margin:0px auto;padding:75px 0 0 0;
}

#left_box li {
 margin:11px 0px;
 padding:0px;
 width: 145px;
 height:18px;
 text-indent:-9999px;
 overflow:hidden;
 }
 
#left_box li a {
 display:block;
 height:18px;
 width:145px;
}

#left_box li a:hover {
 position:relative;left:5px;
}
 
#profile a {background:url(images/profile.gif);height: 39px !important;}
#profile  {height:39px !important;}
#services a {background:url(images/services.gif);}
#projects a {background:url(images/projects.gif);}
#equipment a {background:url(images/equipment.gif);}
#contact a {background:url(images/contact.gif);}
#home a {background:url(images/home.gif);}
#flood-hurricane a {background:url(images/flood-hurricane.gif); height: 49px !important; width:156px !important}
#flood-hurricane {height: 49px !important; width: 161px !important}

#profile a:hover {background:url(images/profile_on.gif)}
#services a:hover {background:url(images/services_on.gif);}
#projects a:hover {background:url(images/projects_on.gif);}
#equipment a:hover {background:url(images/equipment_on.gif);}
#contact a:hover {background:url(images/contact_on.gif);}
#home a:hover {background:url(images/home_on.gif);}
#flood-hurricane a:hover {background:url(images/flood-hurricane_on.gif)}

/* ----- background ----- */

#background {position:absolute;top:0;z-index:1;width:100%}

#header_background {
 width:100%;
 background:url(images/header_bkg.jpg) top repeat-x;
 height: 116px;
 position: absolute;
 top: 0px;
 z-index:10;
}

#color_left {
 position:absolute;
 z-index:1;
 left:0px;
 width:50%;
 top:0px;
 background:#0d0d0d;
}

#color_right{
 position:absolute;
 z-index:1;
 right:0px;
 width:50%;
 top:0px;
 background:#e6e6e6;
}

/* ----- content ----- */
#lower_box {
 background:url(images/content_bkg.gif) top left #ffffff;
 padding:0px;
 width: 870px;
}

*+ html body #wrapper #container #lower_box {position:relative;top:2px;}

#right_box {
 margin:0; padding:0px;
 float:right;
 width:600px;
}



#content { width:580px; float:right; }

#content p { font-family:Arial, Helvetica, sans-serif; line-height: 1.5em; font-size: 1.2em; margin:5px 50px 7px 0px;}

#content p a {color: #3069b3; text-decoration: none; }
#content p a:hover {text-decoration: underline}
 
#content h3 { font-family: Arial, Helvetica, sans-serif; color:#3069b3; margin: 15px 15px 20px 0px; letter-spacing:1px; font-size:1.5em; background-repeat: no-repeat;}
 
#content h4 { font-family: Arial, Helvetica, sans-serif; color:#333333; margin:15px 0 3px 3px; letter-spacing:1px; font-size: 1.6em; clear: left;}
#content h3 a, #content h4 a {color: #3069b3; text-decoration: none; }
#content h3 a:hover, #content h4 a:hover {text-decoration: underline}

#content h5 {font-size: 1.3em; margin: 5px; color: #333333}
#content h5 a {color: #3069b3; text-decoration: none;}
#content h5 a:hover {text-decoration: underline;}

#content ul { margin: 3px 35px; padding:0px; width: 75%; list-style:square;}
#content li { margin:2px 0;  font-family:Arial, Helvetica, sans-serif; line-height: 1.5em; font-size: 1.2em;}
#content li a {color: #3069b3; text-decoration: none; }
#content li a:hover {text-decoration: underline}

#content table td {font-size: 1.1em}

#content form input, #content form textarea {border: 1px solid #000000}
#content form input:focus, #content form textarea:focus {border: 1px solid #3069b3}

#content form h3 {margin: 0px}

#projects_list {
 color:#3069b3;
 font-size:1.2em;
 float:left;
 font-weight: bold;
}

#projects_list li {
 margin:4px;
}


/* ----- footer ----- */

#footer {
 background: url(images/footer_bkg.jpg) repeat-x;
 width:100%;
 height:126px;
 margin-top:-18px;
 position:relative;
 z-index:100;
 clear:both;
 font-family:Arial, Helvetica, sans-serif;
}

#footer p {
 color: #e5e5e5;
 font-size:1.1em;
 margin:3px;
 text-align:center;
 padding-top:9px;
 letter-spacing: 1px;
 line-height:1.6em;
} 
 
#footer p a{
 color: #e5e5e5;
 text-decoration:none;
 font-weight:bold;
}

/* ----- map section -----*/

#map_section { background: #414041; padding:5px; border-bottom: 4px solid #a3ca40; }
 
#map_section .list_items{ font-size: 1.1em; padding: 2px; color: #ffffff }
 
#map_section .list_items a { display:block; height: 100%; width: 100%; color: #ffffff; font-weight:bold; text-decoration: none; padding:2px }
 
#map_section .list_items a:hover { display:block; height: 100%; width: 100%; color: #5785C1; background: #ffffff; }

#map_section .list_items h3 a {display:inline; }

#map_section .list_items h3 a:hover {display:inline;}

#map_section .list_items h3 {margin: 0 0 0 10px; padding: 0px}

/* ----- recent projects ----- */
#projects_gallery {
 background: #414041;
 padding:10px;
 border-bottom: 4px solid #a3ca40;
}

#myScrollContent ul {
 margin:0px; padding:0px; width: 163px
}

#myScrollContent li {
 margin:0px;padding:0px;text-indent:-9999px;
 overflow:hidden;
}
 
#myScrollContent li a {
 display:block;height:23px;width:163px;
}
 
.breach {background:url(images/gallery_breach.jpg)}
.fifi{background:url(images/gallery_fifi.jpg)}
.canal {background:url(images/gallery_17th.jpg)}
.clay {background:url(images/gallery_clay.jpg)}
.dredg {background:url(images/gallery_dredg.jpg)}

.breach a:hover {background:url(images/gallery_breach_on.jpg)}
.fifi a:hover {background:url(images/gallery_fifi_on.jpg)}
.canal a:hover {background:url(images/gallery_17th_on.jpg)}
.clay a:hover {background:url(images/gallery_clay_on.jpg)}
.dredg a:hover {background:url(images/gallery_dredg_on.jpg)}

#up {background:url(images/up.jpg); width:27px; height:24px; text-indent:-9999px;}
#down {background:url(images/down.jpg); width:27px; height:24px; text-indent:-9999px;}
#up a {display:block;width:27px; height:24px;}
#down a {display:block;width:27px; height:24px;}

/* ----- headers ----- */

#h3_recent {background:url(images/h3_recent.jpg); text-indent:-9999px; width: 212px; height: 22px; margin:15px;}
#h3_history {background:url(images/h3_history.jpg); text-indent:-9999px; width: 275px; height: 22px; }
#h3_services {background:url(images/h3_services.jpg); text-indent:-9999px; width: 144px; height: 22px; }
#h3_safety {background:url(images/h3_safety.jpg); text-indent:-9999px; width: 110px; height: 22px; }
#h3_employment {background:url(images/h3_employment.jpg); text-indent:-9999px; width: 198px; height: 22px; }
#h3_awards {background:url(images/h3_awards.jpg); text-indent:-9999px; width: 358px; height: 22px; }
#h3_links {background:url(images/h3_links.jpg); text-indent:-9999px; width: 219px; height: 22px; }
#h3_projects {background:url(images/h3_projects.jpg); text-indent:-9999px; width: 144px; height: 22px;float: left }
#h3_equipment {background:url(images/h3_equipment.jpg); text-indent:-9999px; width: 171px; height: 22px; }
#h3_contact {background:url(images/h3_contact.jpg); text-indent:-9999px; width: 135px; height: 22px; }
#h3_login {background:url(images/h3_login.jpg); text-indent:-9999px; width: 92px; height: 22px; }
#h3_miss_river {background:url(images/h3_miss_river.jpg); text-indent:-9999px; width: 268px; height: 22px; }
#h3_welcome {background:url(images/h3_welcome.jpg); text-indent:-9999px; width: 332px; height: 22px; }
#h3_flood-hurricane {background:url(images/h3_flood-hurricane.gif); text-indent:-9999px; width: 521px; height: 22px; }