/*****************************
  STYLESHEET
  VERSION: 1.0
    
  WEBSITE: WCCS
  AUTHOR: Chris Doyle
  CREATED: 12/01/09
  COMMENTS: Stylesheet for WCCS.
*/

/** DEFAULT LAYOUT DIV styles */
#frame { width: 760px; height: 100%; clear: both; border:1px solid #999999;}
#header { width: 100%; height: 92px;}
#columnMain { float: right; width: 380px; height:400px;}
#columnLeft { float: left; width: 150px; height: 400px; background:#CCCCCC;}
#columnRight { float: right; width: 140px; height: 400px; background:#CCCCCC;}
#enclose { float: left; width: 760px;}
#footer { padding:1 0 0 0px; float:left; width:100%; height:17px; background:#999999; color:#FFFFFF;}
#utilities { padding: 0 5 0 12px; color: #999999; float:right;}

#homeStrip{	width:760px; height:234px; background:URL(images/WCCSLogoMain.jpg) no-repeat; border-bottom:1px solid #999999;}
#innerStrip{ width:760px; height:134px; border-bottom:1px solid #999999;}

#homeNews{ width: 470px; float: left; padding-top: 10px; padding-left: 30px;}
#homeLinks{ width: 200px; float: right; padding-top: 20px; padding-left: 30px; padding-right: 30px;}
#mainPhotos{ float:left; padding-top: 40px; padding-left: 30px; padding-bottom: 40px;}

#nav2 { float: left; padding-top: 5px; padding-left: 20px;}
#content {float: left; width: 700px; padding-top: 10px; padding-left: 30px; padding-right: 30px; padding-bottom: 40px;}

#relatedInfo {float:right; width:230px; height:100%; padding: 10 10 0 0px;}
html>body #relatedInfo {width:220px;}


/* MAIN MENU NAVIGATION styles */
#nav{ clear: both; width: 760px; padding:0px; margin:0px; background-color: #99cc33; border-bottom: 4px solid #fff; color: #fff;}
#nav img{ margin: 0 -2 -4 -1px;	padding: 0px;}
#nav ul { padding: 0px; margin: 0px; height: 20px;}
#nav ul li { list-style: none; display: inline; padding: 0px; margin: 0px; border: 0px;}
#nav ul li a { border-right: 1px solid #FFFFFF; padding: 0 6 6 6; margin: 0 -3 0 0px; height: 20px; background: #990033; font: 11px Arial, Helvetica, sans-serif; text-decoration: none; text-transform:uppercase; color: #FFFFFF;}
html>body #nav ul li a { height:20px;}
#nav ul li a#current { color: #FFFFFF; background: #990033;}
#nav li a:hover{ background: #CC3399;}


/** MISCELLANEOUS LAYOUT DIVS */
.innerStrip{ width:100%; height:75;	background: #FFFFFF; border-bottom: 2px solid #000000;}
.floatLeft{	float: left;}
.floatRight{ float: right; clear:right;	margin: 0px; padding: 0px;}
.spacer{ padding: 20px;}

#search{ float:right; margin-top:145px; width:160px; height:25px; bottom:0px; padding:10 0 0 20px}
html>body #search{ width:140px; height:15px;}
#searchInner{ float:right; margin-top:75px; width:160px; height:25px; bottom:0px; padding:10 0 0 20px}
html>body #searchInner{ width:140px; height:15px; margin-top:0px;}

#pageInfo {float:left; width:500px; padding:50 0 0 10px;}
#pageTitle {float: left; padding:0 5 0 0px;}
#pageTitle h1 {text-transform:uppercase; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 24px;}
#sectionMenu {float: left; width: 120px; margin: 2 0 0 0px;}
#pageBlurb {float: left; width:500px; clear:both; padding:0 0 0 10px; color:#FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
#email a:link { float: right; padding-left: 20px; padding-right: 30px; color: #0066FF;}

/** LINK styles */

/* MAIN LINK styles */
#nav a {
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #fff;
}
#nav a:link {
	color: #fff;
}
#nav a:visited {
	color: #fff;
}
#nav a:active {
	color: #fff;
}
#nav a:hover {
	color: #0099CC;
}

/* 2ND NAV LINK styles */
#nav2 a {
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #666;
}
#nav2 a:link {
	color: #666;
}
#nav2 a:visited {
	color: #666;
}
#nav2 a:active {
	color: #666;
}
#nav2 a:hover {
	color: #0099CC;
}

/* STANDARD LINK styles */
a {
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #333399;
}
a:link {
	color: #333399;
}
a:visited {
	color: #333399;
}
a:active {
	color: #333399;
}
a:hover {
	color: #0099CC;
}

/* BREADCRUMB LINK styles */
#breadcrumbs {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #990033;
	margin: 0 0 10 0px;
}
#breadcrumbs a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-transform: uppercase;
	color: #990033;
}
#breadcrumbs a:hover {
	text-decoration: underline;
}

/* FOOTER links */
#footer a {
	margin: 0px;
	padding: 0 5 0 5px;
	text-transform: uppercase;
	font-size: 10px;
	color: #FFFFFF;
}

/* CONTACT FORM */
#contactForm{
	width: 290px;
	border: 1px solid #F7A300;
	clear: both;
}
.formHeading{
	width: 290px;
	height: 20px;
	background: #F7A300;
}
.formRow{
	width: 280px;
	height: 18px;
	margin: 5 2 5 2px;
	clear: both;
}
.fieldName{
	width: 80px;
	float: left;
	padding: 3 2 3 2px;
	text-align: right;
}
.field{
	width: 190px;
	float: right;
	padding: 2px;
	text-align: left;
}
.formHeading h1{
	margin: 0px;
	padding: 2 0 0 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;	
	color: #FFFFFF;	
}
.tableHeading{
	height: 20px;
	background: #F7A300;
}
.tableHeading h1{
	margin: 0px;
	padding: 2 0 0 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;	
	color: #FFFFFF;	
}

/* SELECTOR STYLES */
/* -------------------------------------------------------------------------------------- */

body{
	padding:0px;
	margin:0px;
}

div{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

h1{
	font-family: Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size: 18px;
	color: #33ccff;
	padding-left: 10px;
	margin: 0px;
	font-weight: normal;
}
h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #3399cc;
	padding: 0px;
	margin: 0 0 10 0;
}
h3,h4,h5,h6{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	padding-left: 15px;
	margin: 10 0 5 0;
}
p{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	margin: 0px 0px 0px 0px;
	padding: 0 0 0 20px;
}
td{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	margin: 0px 0px 8px 0px;
	padding: 0px;
}
ul{
	margin: 0 0 0 26;
	padding: 4 5px;
}
li{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
}
img{
	border:0px;
	margin: 0px;
	padding: 0px;
}

/** FORM styles */
form{
	padding: 0px;
	margin: 0px;
	border: 0px;
}
form.searchBox{
	padding: 0px;
	margin: 0 0 1 0px;
	border: 0px;
}

input{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	border: 0px;
	height: 16px;
	padding: 0px;
	margin: 1 0 1 0px;
	border: 1px solid #CCCCCC;
	vertical-align: top;
}
input.lge{
	width: 140px;
}
input.med{
	width: 110px;
}
input.sml{
	width: 70px;
}
textarea{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	width: 180px;
	border: 0px;
	height: 60px;
	padding: 0px;
	margin: 0px;
	border: 1px solid #CCCCCC;
}
input.checkBox{
	margin-right: 3px;
	float: left;
	width: 14px;
	height: 14px;
}
input.button {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #2F2923;
	background-color: #E5E5D3;
	border-top-color: #F0F0E6;
	border-right-color: #919186;
	border-bottom-color: #606059;
	border-left-color: #EAEADC;
	padding: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
}
input.imageButton{
	margin: 0px;
	padding: 0px;
	border: 0px;
}
select{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	border: 0px;
	height: 16px;
	padding: 0px;
	margin: 0px;
	background: #F7A300;
	border: 1px solid #CCCCCC;
}

/** MISCELLANEOUS styles */

.boxBacking {
	background-color:#CCCCCC;
}
.boxHeader {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background-color:#999999;
	color: #FFFFFF;
}