@import url("../css/reset.css");

/*  
#C2B59B = bg kaki color
#557F9A = dark blue
#54B9E4 = light blue
#D2C5B8 = light brown
#877B6A = dark brown

Globals
--------------------------------------------------------------------------------------------------- */

* {margin:0; padding:0;}

body {
    text-align: center;
    font: 12px/1.4em Georgia, "Times New Roman", Times, serif;
    background: #C2B59B;
    color:#414042;
	margin: 0;
} 
hr { display: none; }

.clear { clear: both; }
img.right {
	float: right;
	margin: 0 0 15px 15px;
	border: 2px solid #C2B59B;
}
img.left {
	float: left;
	margin: 0 15px 15px 0;
	border: 2px solid #C2B59B;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

.small {
	font-size: 11px;
}
blockquote .small {
	font-weight: bold;
}

a {
	color: #549CBF;
	text-decoration: none;
}
a:hover {
	color: #999;
	text-decoration: underline;
}
/* Layout Divisions
--------------------------------------------------------------------------------------------------- */
#wrapper {
	margin: 0 auto;
	text-align:left;
	width: 1005px;  
	position: relative;
}
#container {
	background: url(../gfx/bg_global.png) repeat-y 0 0;
}
#header {
	height: 79px;
	background:url(../gfx/bg_top.jpg) no-repeat 0 0;
}
#home #headBox {
	width: 590px;
	height:260px;
	margin: 32px 7px 0 8px;
	padding: 35px 162px 0 238px;
	background: url(../gfx/bg_head.jpg) no-repeat 0 0;
}
#headBox {
	width: 590px;
	height:186px;
	margin: 32px 7px 0 8px;
	padding: 25px 162px 0 238px;
	background: url(../gfx/bg_inside_head.jpg) no-repeat 0 0;
}

/* ------| logo |------ */
#logo {
	display: block;
	position: absolute;
	top: 78px;
	left: 26px;
	z-index: 1000;
}
#logo a {
	display: block;
	height: 210px;
	width: 182px;
	background: url(../gfx/logo.png) no-repeat 0 0;
	text-indent: -9999px;
}

/* Navigation
--------------------------------------------------------------------------------------------------- */
#navigation {
	width: 980px;
	background:  url(../gfx/nav_bg.png) repeat-x;
	position: absolute;
	top: 78px;
	left: 13px;
}

#navigation ul {
	margin: 0 0 0 190px;
	padding: 0;
}
#navigation ul li {
	float: left;
	height: 32px;
	font-size: 14px;
	position: relative; /* this is for the drop-down menu functionality */
}

/* ------| Drop-Down Menu Resets |------ */
#navigation ul li ul {
	margin: 0;
	padding: 0;
}
#navigation ul li ul li {
	margin: 0;
	padding: 0;
	height: auto;
}

/* ------| Home |------ */
#n-home a {
	display: block;
	width: 79px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat 0 0;
	text-indent:-9999px;
}
#n-home a:hover, 
body#home #n-home a {
	background-position: 0 -32px;
}

/* ------| Pemberton |------ */
#n-pemberton a.glob_nav {
	display: block;
	width: 175px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat -79px 0;
	text-indent:-9999px;
}
#n-pemberton a.glob_nav:hover, 
body#pemberton #n-pemberton a.glob_nav {
	background-position: -79px -32px;
}
#n-pemberton.sfHover a.glob_nav,
body#pemberton #n-pemberton.sfHover a.glob_nav {
	background-position: -79px -64px;
}

/* ------| Dyking |------ */
#n-dyking a.glob_nav {
	display: block;
	width: 94px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat -254px 0;
	text-indent:-9999px;
}
#n-dyking a.glob_nav:hover,
body#dyking #n-dyking a.glob_nav {
	background-position: -254px -32px;
}
#n-dyking.sfHover a.glob_nav,
body#dyking #n-dyking.sfHover a.glob_nav {
	background-position: -254px -64px;
}

/* ------| PVDD |------ */
#n-pvdd a.glob_nav {
	display: block;
	width: 80px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat -348px 0;
	text-indent:-9999px;
}
#n-pvdd a.glob_nav:hover,
body#pvdd #n-pvdd a.glob_nav {
	background-position: -348px -32px;
}
#n-pvdd.sfHover a.glob_nav,
body#pvdd #n-pvdd.sfHover a.glob_nav {
	background-position: -348px -64px;
}

/* ------| News |------ */
#n-news a.glob_nav {
	display: block;
	width: 76px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat -428px 0;
	text-indent:-9999px;
}
#n-news a.glob_nav:hover,
body#news #n-news a.glob_nav {
	background-position: -428px -32px;
}
#n-news.sfHover a.glob_nav,
body#news #n-news.sfHover a.glob_nav {
	background-position: -428px -64px;
}

/* ------| FAQ's |------ */
#n-faqs a.glob_nav {
	display: block;
	width: 70px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat -504px 0;
	text-indent:-9999px;
}
#n-faqs a.glob_nav:hover,
body#faqs #n-faqs a.glob_nav {
	background-position: -504px -32px;
}
#n-faqs.sfHover a.glob_nav,
body#faqs #n-faqs.sfHover a.glob_nav {
	background-position: -504px -64px;
}

/* ------| Resources |------ */
#n-resources a.glob_nav {
	display: block;
	width: 114px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat -574px 0;
	text-indent:-9999px;
}
#n-resources a.glob_nav:hover,
body#resources #n-resources a.glob_nav {
	background-position: -574px -32px;
}
#n-resources.sfHover a.glob_nav,
body#resources #n-resources.sfHover a.glob_nav {
	background-position: -574px -64px;
}

/* ------| Contact Us |------ */
#n-contact a {
	display: block;
	width: 101px;
	height: 32px;
	background: url(../gfx/glob_nav_bg.png) no-repeat -688px 0;
	text-indent:-9999px;
}
#n-contact a:hover,
body#contact #n-contact a {
	background-position: -688px -32px;
}



/* Login
--------------------------------------------------------------------------------------------------- */
#loginBox {
	position: absolute;
	right: 25px;
	top: 40px;
	font-size: 11px;
	color: #777;
}
#loginBox label {
	margin: 0 10px;	
}
#loginBox .fieldBox {
	font-size: 11px;
	width: 120px;
	border: 2px solid #C2B59B;
	padding: 3px;
	background:url(../gfx/input_bg.jpg) repeat-x 0 0;
}
#loginBtn {
	width: 45px;
	height: 22px;
	background:url(../gfx/btn_login.png) no-repeat 0 0;
	border: none;
	cursor: pointer;
	padding: 1px 0;
	text-indent: -9999px;
}
#loginBtn.hoverme {
	background:url(../gfx/btn_login.png) no-repeat 0 -22px;
}


/* Head Box
--------------------------------------------------------------------------------------------------- */
body#home #headBox h1 {
	background: url(../gfx/title_home.png) no-repeat 0 0;
	width: 590px;
	height: 100px;
	text-indent:-9999px;
}
#headBox a {
	display:block;
	background: url(../gfx/btn_home_link.png) no-repeat 0 0;
	width: 137px;
	height: 22px;
	text-indent: -9999px;
	margin: 10px 0 0 5px;
}
#headBox a:hover {
	background: url(../gfx/btn_home_link.png) no-repeat 0 -22px;	
}


/* ------| head titles |------ */
body #headBox h1 {
	width: 430px;
	height: 75px;
	text-indent:-9999px;
	margin: 0 auto;
}
body#pemberton #headBox h1 {
	background: url(../gfx/headers/pemberton_valley.png) no-repeat 0 50%;
	width: 459px;
	height: 75px;
}
body#dyking #headBox h1 {
	background: url(../gfx/headers/flood_protection.png) no-repeat 0 0;
	width: 431px;
	height: 75px;
}
body#pvdd #headBox h1 {
	background: url(../gfx/headers/pvdd_administration.png) no-repeat 0 50%;
	width: 522px;
	height: 75px;
}
body#news #headBox h1 {
	background: url(../gfx/headers/news_updates.png) no-repeat 0 50%;
	width: 436px;
	height: 75px;
}
body#faqs #headBox h1, body#about #headBox h1 {
	background: url(../gfx/headers/faqs.png) no-repeat 0 50%;
	width: 560px;
	height: 75px;
}
body#resources #headBox h1 {
	background: url(../gfx/headers/our_resources.png) no-repeat 0 50%;
	width: 440px;
	height: 75px;
}
body#contact #headBox h1 {
	background: url(../gfx/headers/contact.png) no-repeat 0 50%;
	width: 440px;
	height: 75px;
}
body#secure #headBox h1 {
	background: url(../gfx/headers/secure_area.png) no-repeat 0 50%;
	width: 440px;
	height: 75px;
}
body #secondary h3 {
	width: 260px;
	height: 36px;
	text-indent: -9999px;
}
body#pemberton #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_pemberton.png) no-repeat 0 0;
}
body#about #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_about.png) no-repeat 0 0;
}
body#about #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_about.png) no-repeat 0 0;
}
body#dyking #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_dyking.png) no-repeat 0 0;
}
body#pvdd #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_pvdd.png) no-repeat 0 0;
}
body#about #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_faqs.png) no-repeat 0 0;
}
body#resources #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_resources.png) no-repeat 0 0;
}
body#contact #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_contact.png) no-repeat 0 0;
}
body#secure #secondary h3 {
	background:url(../gfx/sub_titles/title_sub_secure.png) no-repeat 0 0;
}

/* Middle Boxes
--------------------------------------------------------------------------------------------------- */
body#home #midBox {
	width: 980px;
	margin: 20px auto 20px auto;
}
body#home #midBox .box {
	width: 243px;
	font-size: 11px;
	color: #888;
	background:url(../gfx/box_shadow.jpg) no-repeat right;
	float: left;
}
body#home #midBox .box dt {
	font-size: 16px;
}
body#home #midBox .box p {
	line-height: 18px;	
}
body#home #midBox .box dl {
	margin: 0 30px;
}
body#home #midBox .box img {
	padding: 3px;
	border: 1px solid #ccc;
	margin: 10px 0;
}
.more_btn {
	display: block;
	width: 80px;
	height:22px;
	background:url(../gfx/btn_readmore.png) no-repeat 0 0;
	text-indent: -9999px;
	margin: 15px 0 0 0;
}
.more_btn:hover {
	background:url(../gfx/btn_readmore.png) no-repeat 0 -22px;
}


body#home #midBox h2 {
	font: bold 17px Trajan Pro, Arial Black, Gadget, sans-serif;
	padding: 0;
	text-align: left;
	width: 300px;
	color: #666666;
	margin: 0;
}

body#home #midBox #section_d {
	background: none;
}

/* ------| content area |------ */
#contentarea {
	width: 990px;
	text-align: left;
	margin: 0 7px 0 8px;
	padding: 0 0 15px 0;
}
/* ------| columns |------ */
#primary {
	float: right; 
	position:relative;
	width: 650px;
}
#secondary {
	float: left; 
	position:relative;
	width: 340px;
	background: url(../gfx/bg_nav-area.jpg) no-repeat 0 0;
}

/* Content Body
--------------------------------------------------------------------------------------------------- */
.body {
	padding: 20px;
}
.body h2 {
	font-size: 18px;
	margin: 15px 0 0 0;
	padding: 15px 50px;
	text-align: left;
	color: #557F9A;
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
	background:url(../gfx/curly_big_icon.png) no-repeat 0 50%;
	margin: 0;
}
.body h2.in_title {
	font: bold 21px Trajan Pro, Arial Black, Gadget, sans-serif;
	background: none;
	padding: 0;
	text-align: left;
	width: 360px;
	height: 20px;
	color: #666666;
	border: 0px;
	margin: 0;
}
.body h3 {
	font-size: 16px;
	text-align: left;
	border-bottom: 1px dotted #999;
	border-top: 1px dotted #999;
	color: #847866;
	margin: 25px 0 15px;
	padding: 10px 0;
}
.body h4 {
	font-size: 15px;
	font-style: italic;
	padding: 0;
	text-align: left;
	color: #98855C;
	margin: 0;
	padding: 0;
}
.body h5 {
	font-size: 13px;
	font-weight: bold;
	padding: 0;
	text-align: left;
	color: #333;
	margin: 0;
}
.body h6 {
	font-size: 11px;
	margin: 0 0 -20px 0;
	font-weight: bold;
	color: #557F9A;
}
.body .bigtext {
	font-size: 26px;
	color: #777;
	line-height: 35px;
}
.body blockquote p {
	border: 1px dotted #999;
	font-size: 14px;
	background: #EFEAE4;
	padding: 10px;
	color: #557F9A;
	font-style: italic;
}
.body p {
	margin: 20px 0;
	line-height: 20px;
}

.body ol {
	margin: 40px 80px;
}
.body ul {
	margin: 40px 65px;
}
.body ol li {
	list-style-type:upper-roman;
	margin: 15px 0;
	padding: 0 0 0 20px;
	font-size: 15px;
}	
.body ul li {
	margin: 15px;
	padding: 0 0 0 20px;
	font-size: 15px;
	list-style-image:url(../gfx/list_icon.png);
}
.body ul li ul {
	margin: 0 15px;
}
.body ul li ul li  {
	list-style-image: none;
	list-style-type: disc;
	padding: 0;
	font-size: 13px;
	color: #98855C;
}
.slideshow_box {
	float: right;
	border: 1px solid #ccc;
	padding: 10px 10px 15px 10px;
	margin: 0 0 15px 25px;
	position: relative;
}
.slideshow_box_flash {
	float: right;
	margin: 0 0 15px 25px;
}
.slideshow_box ul {
	margin: 0;
	padding: 0;
}
.slideshow_box ul li {
	padding: 0;
	margin:0;
	list-style-image:none;
	position: relative;
}
.btn_fullsize {
	position: absolute;
	display: block;
	text-indent: -9999px;
	background: url(../gfx/btn_fullsize.png) no-repeat 0 0;
	width: 100px;
	height: 22px;
	bottom: 7px;
	right: 10px;
}
.btn_fullsize:hover {
	background: 	url(../gfx/btn_fullsize.png) no-repeat 0 -22px;
}

dl.faqs {
	border-bottom: 1px dotted #999;
	padding: 0 0 10px;
}
dl.faqs dt {
	padding: 10px 0 0 0;
	margin: 10px 0 0 0;
	border-top: 1px dotted #999;
	font-size: 16px;
}
dl.faqs dt a {
	padding: 0 0 0 30px;
	background:url(../gfx/list_icon.png) no-repeat 0 50%;;
}
dl.faqs dd {
	display: none;
	font-size: 13px;
	color: #595140;
}
dl.faqs dd p {
	margin: 10px 0 0 0;
	padding: 0;
}
dl.faqs dd ul {
	margin: 10px 0 0 0;
	padding: 0;
}
dl.faqs dd ul li {
	list-style-image: none;
	padding: 0;
	margin: 0;
	font-size: 11px;
}

#secondary h3 {
	margin:  20px 0 20px 28px;
}

/* SubNav
--------------------------------------------------------------------------------------------------- */
#nav_box {
	background: url(../gfx/sub_list_foot.jpg) no-repeat 100% 100%;
	padding: 0 0 60px 0;
}	
#subnav {
	margin: 0 0 0 28px;
	padding: 0 0 2px 0;
	background: url(../gfx/sub_list_bg.jpg) repeat-y right;
}
#subnav li {
	margin: 5px 0;	
	padding: 0;
	width: 100%;
	height: 40px;
}
#subnav li a {
	display: block;
	height: 40px;
	font-size: 16px;
	line-height: 40px;
	padding: 0 0 0 40px;
	background:url(../gfx/sub_base_bg.png) no-repeat 0 0;
	color: #999;
}	
#subnav li a:hover,
#subnav li.active a{
	background:url(../gfx/sub_item_bg.png) no-repeat 0 0;	
	text-decoration:none;
	color: #557F9A;
}

/* Footer
--------------------------------------------------------------------------------------------------- */
#footer {
	background:  url(../gfx/bg_foot.jpg) no-repeat 0 0;
	height: 115px;
	color: #90B0C2;
	font-size: 11px;
	text-align:center;
	padding: 20px 0 0 0;
}
#footer ul {
	width: 640px;
	margin: 0 auto;
}
#footer ul li {
	float: left;
	padding: 0 5px;
	border-right: 1px solid #B0C9D7;
	margin: 0;
	height: 11px;
	line-height: 11px;
}
#footer ul li.last {
	border-right: 0px;
}
#footer a {
	color: #B0C9D7;
	margin: 0 10px;
	font-weight: normal;
}
#footer a:hover {
	color: #fff;	
}

#footCopy {
	width: 990px;
	margin: 0 auto;
	text-align: center;
	color: #7E6F4E;
}
#footCopy span {
	font-size: 10px;	
	line-height: 30px;
}
#footCopy a {
	font-weight: bold;
	color: #7E6F4E;
}



/* Helpers 
--------------------------------------------------------------------------------------------------- */
.clear {
	clear: both;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */