﻿/* CSS layout */
body {
	margin: 0;
	padding: 0;
}

#masthead {
	min-width: 600px;
}

#logo {
	float: left;
	width: 200px;
	background-color:#ffffff;
	/*background-color:#47a3da;*/
}

#header {
	margin-left:200px;
	background-color:#ffffff;
	/*background-color:#47a3da;*/
}

#container {
	clear: both;
	min-width: 600px;
}

#left_col {
	float: left;
	width: 200px;
}

#right_col {
	float: right;
	width: 200px;
}

#page_content {
	border: thin solid #C0C0C0;
	margin-left: 200px;
	margin-right: 200px;
}
#nav {
	clear: both;
}

#footer {
	clear: both;
	
}
.headerTxt {
	font-family: 'Open Sans', sans-serif;
	font-size: x-large;
	text-align: right;
	color: #FFFFFF;
}

.headerImg{
	vertical-align: middle;
}

@charset "utf-8";
body { margin:0; padding:0; width:100%; color:#000000; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}
html, .main { padding:0; margin:0; background-color:#fff;}
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
h1 { margin:0; padding:0; color:#fff; font:bold 40px/1.2em Arial, Helvetica, sans-serif; text-align:center; letter-spacing:-2px;}
h1 a, h1 a:hover { color:#fff; text-decoration:none;}
h1 small { display:block; font:normal 13px/1.2em Arial, Helvetica, sans-serif; letter-spacing:normal; padding:8px 0;}
h2 { font:bold 24px Arial, Helvetica, sans-serif; color:#5f5f5f; padding:8px 0; margin:8px 0;}
p { margin:8px 0; padding:0 0 8px 0; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}
a { color:#0588c6; text-decoration:underline;}

.header, .content, .fbg, .footer, form, ol, ul, ol li, .content .mainbar, .content .sidebar { margin:0; padding:0;}
.content_resize, .header_resize, .fbg_resize, .footer_resize { margin:0 auto; padding:0 40px; width:890px;}
.header_resize, .hbg_resize { margin:0 auto; padding:0; width:970px;}
.content_resize, .fbg_resize { padding:24px 40px;}

/* header */
.header { height:312px; background:url(images/header_bg.gif) repeat-x top;}
.header .nav_menu ul { padding:0 16px; float:right; width:auto; list-style:none; height:53px; background:url(images/menu.gif) repeat-x top;}
.header .nav_menu ul li { margin:0 2px; float:left; height:53px;}
.header .nav_menu ul li a { display:block; margin:0; padding:14px 8px; color:#5f5f5f; text-decoration:none; font-weight:bold;}
.header .nav_menu ul li a:hover, .header .nav_menu ul li.active a { color:#47add9; background:url(images/menu_a.gif) repeat-x top;}
.header img.hbgimg { margin:0; padding:2px 2px 0 0;}
.header .logo { background:url(images/wannonwater2.png) no-repeat center 24px; height:120px; padding-top:120px;}

/*.header .logo { background:url(images/hbg_img.png) no-repeat center 24px; height:180px; padding-top:120px;}*/

/* header2 test*/
.header2 { height:190px; background:url(images/header_bg2.gif) repeat-x top;}
.header2 .nav_menu ul { padding:0 16px; float:right; width:auto; list-style:none; height:53px; background:url(images/menu.gif) repeat-x top;}
.header2 .nav_menu ul li { margin:0 2px; float:left; height:53px;}
.header2 .nav_menu ul li a { display:block; margin:0; padding:14px 8px; color:#5f5f5f; text-decoration:none; font-weight:bold;}
.header2 .nav_menu ul li a:hover, .header .nav_menu ul li.active a { color:#47add9; background:url(images/menu_a.gif) repeat-x top;}
.header2 img.hbgimg { margin:0; padding:2px 2px 0 0;}
.header2 .logo { background:url(images/wannonwater.png) no-repeat center 1px; height:63px; padding-top:60px;}

/*.header2 .logo { background:url(images/hbg_img.png) no-repeat center 1px; height:160px; padding-top:60px;}*/


/* content */
.content { background:url(images/content_bg.gif) repeat-x top;}
.content .mainbar { float:left; width:630px;}
.content .mainbar .article img { border:0px solid #dedede; padding:3px;}
.content .mainbar .article img.ilf { float:left; margin:0 16px 8px 0;}
.content .mainbar .article, .content .sidebar .gadget { margin:0; padding:0 0 16px 0;}
.content .sidebar { float:right; width:236px;}
.content a.btn { margin-right:4px; padding:10px 0; display:block; float:left; width:105px; text-align:center; background:url(images/a_bg.gif) no-repeat center center; text-decoration:none;}
ul.sb_menu, ul.ex_menu { list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0;}
ul.sb_menu li { padding:4px 0 4px 4px;}
ul.ex_menu li { padding:4px 0 8px 4px;}
ul.sb_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; padding-left:18px; background:url(images/li.gif) no-repeat left center;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#47add9; font-weight:bold;}

/* test bit */
ul.sub_menu, ul.ex_menu { list-style:none; color:#959595;}
ul.sub_menu li, ul.ex_menu li { margin:0;}
ul.sub_menu li { padding:4px 0 4px 4px;}
ul.ex_menu li { padding:4px 0 8px 4px;}
ul.sub_menu li a, ul.ex_menu li a { color:#5f5f5f; text-decoration:none; padding-left:18px; background:url(images/li2.gif) no-repeat left center;}
ul.sub_menu li a:hover, ul.ex_menu li a:hover { color:#47add9; font-weight:bold;}




/* subpages */
.content .mainbar .comment { margin:0; padding:16px 0 0 0;}
.content .mainbar .comment img.userpic { border:1px solid #dedede; margin:10px 16px 0 0; padding:0; float:left;}

/* fbg */
.fbg { background-color:#0588c6; color:#fff;}
.fbg h2 { color:#fff;}
.fbg a { color:#fff;}
.fbg img { padding:5px; border:1px solid #0476ac; background-color:#4ba9d6;}
.fbg .col { margin:0; float:left;}
.fbg .c1 { padding:0 16px 0 0; width:326px;}
.fbg .c2 { padding:0 16px; width:296px;}
.fbg .c3 { padding:0 0 0 16px; width:200px;}
.fbg .c1 img { margin:4px;}
.fbg ul.sb_menu li a { color:#fff; background:url(images/li_w.gif) no-repeat left center;}
.fbg ul.sb_menu li a:hover { color:#fff; font-weight:bold;}


/* footer */
.footer p.lf { padding:16px 0; float:left; width:auto;}
ul.fmenu { padding-top:20px; list-style:none; float:right; width:auto;}
ul.fmenu li { margin:0 2px; float:left;}
ul.fmenu li a { display:block; margin:0; padding:4px 8px; color:#5f5f5f; text-decoration:none; font-weight:bold;}
ul.fmenu li a:hover, ul.fmenu li.active a { color:#0588c6;}

/* form */
ol { list-style:none;}
ol li { display:block; clear:both;}
ol li label { display:block; margin:0; padding:16px 0 0 0;}
ol li input.text { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff;}
ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background:#fff;}
ol li .send { margin:16px 0 0 0;}


@media print
{
	.sidebar, .nav_menu, .footer
	{
	display:none;
	}
}





/* calc forms */

input.rounded { 
  border: 1px solid #ccc; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
  border-radius: 5px; 
    -moz-box-shadow: 2px 2px 3px #666; 
    -webkit-box-shadow: 2px 2px 3px #666; 
  box-shadow: 2px 2px 3px #666; 
  font-size: 12px; 
  padding: 4px 7px; 
  outline: 0; 
    -webkit-appearance: none; 
} 
input.rounded:focus { 
    border-color: #ff0000; 
} 

input.roundedGreen { 
  border: 1px solid #ccc; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
  border-radius: 5px; 
    -moz-box-shadow: 2px 2px 3px #666; 
    -webkit-box-shadow: 2px 2px 3px #666; 
  box-shadow: 2px 2px 3px #666; 
  font-size: 12px; 
  padding: 4px 7px; 
  outline: 0; 
    -webkit-appearance: none; 
    background-color: #92d050; 
  text-align:right; 
} 
input.roundedGreen:focus { 
    border-color: #ff0000; 
} 

input.roundedYellow { 
  border: 1px solid #ccc; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
  border-radius: 5px; 
    -moz-box-shadow: 2px 2px 3px #666; 
    -webkit-box-shadow: 2px 2px 3px #666; 
  box-shadow: 2px 2px 3px #666; 
  font-size: 12px; 
  padding: 4px 7px; 
  outline: 0; 
    -webkit-appearance: none; 
    background-color: #ffc000; 
  text-align:right; 
} 
input.roundedYellow:focus { 
    border-color: #ff0000; 
} 



select.rounded2 { 
  border: 1px solid #ccc; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
  border-radius: 5px; 
    -moz-box-shadow: 2px 2px 3px #666; 
    -webkit-box-shadow: 2px 2px 3px #666; 
  box-shadow: 2px 2px 3px #666; 
  font-size: 12px; 
  padding: 4px 7px; 
  outline: 0; 
    -webkit-appearance: none; 
} 
select.rounded2:focus { 
    border-color: #ff0000; 
} 

select.rounded2Dynamic { 
  border: 1px solid #ccc; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
  border-radius: 5px; 
    -moz-box-shadow: 2px 2px 3px #666; 
    -webkit-box-shadow: 2px 2px 3px #666; 
  box-shadow: 2px 2px 3px #666; 
  font-size: 12px; 
  padding: 4px 7px; 
  outline: 0; 
    -webkit-appearance: none; 
  background-color: #92d050; 
  text-align:right; 
  width: 85px;
} 
select.rounded2Dynamic:focus { 
    border-color: #ff0000; 
} 





/*   button stuff  */
/*------------------------nav button----------------------------*/
.button2 {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	/*text-shadow: 0 1px 1px rgba(0,0,0,.3);*/
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button2:hover {
	text-decoration: none;
}
.button2:active {
	position: relative;
	top: 1px;
}


/* nav grey*/

.navgrey {
	color: #000000;
	border: solid 1px #0076a3;
	background: #d7d7d7;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.navgrey:hover {
	color: #939a90;
	background: #d7d7d7;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.navgrey:active {
	color: #d7d7d7;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}


/* nav clear*/

.navclear {
	color: #000000;
	border: solid 1px #0076a3;
	background: #ffffff;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.navclear:hover {
	color: #ffffff;
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.navclear:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}





/* nav blue */
.navblue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0066CC;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.navblue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.navblue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}



/* nav green */
.navgreen {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.navgreen:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.navgreen:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}


/*------------------------other buttons----------------------------*/
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	/*text-shadow: 0 1px 1px rgba(0,0,0,.3);*/
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}
.small {
	font-size: 10px;
	padding: .4em 1.5em .20em;
}



/* blue */
.blue {
	color: #000000;
	border: solid 1px #0076a3;
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #33CCFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #000000;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}



/* green */
.green {
	color: #e8f0de;
	border: solid 1px #538312;
	background: #64991e;
	background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
	background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
	background: #538018;
	background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
	background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
	color: #a9c08c;
	background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
	background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}


/* red */
.red {
	color: #000000;
	border: solid 1px #0076a3;
	background: #F0F000;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.red:hover {
    color: #ffffff;
	background: #ff0000;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.red:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}


