/* --------------------------------------------
 	File:		Westside Health Authority CSS File
' 	Created:	04/08/09
' 	For:		Westside Health Authority
' 	CSS:		Michael Knauer
' 	Copyright:	Westside Health Authority 2009
-------------------------------------------- */

/* ---- CSS Reset ---- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/* ---- Structure Styles ---- */

body { background: url(../resources/BKG.jpg) 0 0 repeat-x; background-color: #c8eab8; font: normal 12px/16px Arial, Helvetica, sans-serif; color: #000; }

a:link, a:visited, a:hover, a:active {color: #333333;}

#wrapper {
	width:850px;
	margin: 25px auto 0;
	font-size: 12px; font-family: Arial, Helvetica, sans-serif;
	position: relative;
}
#container {border-top: solid 1px #555; border-left: solid 1px #555; border-right: solid 1px #555; float: left;}

/* ---- Header Styles ---- */

#header {
	width: 850px; height: 180px; background-color: #069;
	float: left; position: relative;}
	
/* ---- Nav Styles ----- */
#nav { width: 844px; height: 44px; background-color: #036; border-top: solid 1px #fff; text-decoration: none; margin: 0; 
		padding: 0 0 0 6px; float: left; text-transform: uppercase; position: relative; font-family: Arial, Helvetica, sans-serif; list-style: none; }

#nav li ul, #nav li ul { margin: 0; padding: 0; }

#nav a { text-decoration: none; list-style: none; }

#nav li { margin: 0; float: left; display: block; } /*float the main list items*/

#nav li ul { display: none; }

#nav li.off ul, #nav li.on ul  { height: 33px; width: 834px; position: absolute; top: 44px; left: 0; background: #eee; border-bottom: solid 2px #ccc; border-bottom: solid 2px #39C; list-style: none; padding: 0 8px; } /*put the subnav below*/

#nav li.on ul {	background: #eee; }

#nav li.on:hover ul, #nav li.over ul { background: #eee; } /*for ie*/

#nav li.on a, #nav li.off a { color: #fff; font: bold 12px/14px Arial, Helvetica, sans-serif; text-decoration: none; text-transform: uppercase; padding: 15px 32px 16px; display: block; }

#nav li.on ul a, #nav li.off ul a { 
	border: 0; float: left; /*ie doesn't inherit the float*/
	width: auto; margin-right: 1px; }
	
#nav li.off a:hover, #nav li.on a:hover { color: #FF9; background-color: #69F; }

#nav li.on:hover ul a, #nav li.over ul li a { background: #eee; } /*for ie - the specificity is necessary*/

#nav li.on ul { display: block; }

#nav li.off:hover ul, #nav li.over ul {	display: block; z-index: 6000; }


/*subnav formatting*/

#nav li.on ul a, #nav li.off ul a { display: block; background: #eee; color: #888; font-family: arial, verdana, sans-serif; font-size: 9px; padding: 9px 10px 10px; float: left; }		
#nav li.on ul a:hover, #nav li.off ul a:hover { color: #444; background-color: #ddd; }
#nav .donations { margin: 0 0 0 500px;}

#subnav { height: 35px; width: 850px; float: left; }

/* ---- Main Styles ---- */

#body { width: 850px; background-color: #fff; margin: 0; padding: 0 0 30px 0; float: left; position: relative; }
.breadcrumb { font-size: 14px; font-weight: bold; }

#top-img { margin: 10px 0 0 25px; padding: 0; float: left; }

#main { width: 505px; font: normal 12px/20px Arial, Helvetica, sans-serif; color: #2a2a2a; background-color: #fff; 
	margin: 20px 0 0; padding: 15px 30px 40px 35px; float: left; position: relative; border-right: solid 1px #ccc;
}
#main .indeximg { margin: -5px 0 0 0; }
#main h1 { font: bold 20px/24px Arial, Helvetica, sans-serif; color: #069; border-bottom: dotted 1px #ccc; margin-bottom: 20px; padding: 0 0 5px 0; }
#main h2 { font: bold italic 14px/18px Arial, Helvetica, sans-serif; color: #CC3300; margin-bottom: 20px; margin: 0 0 10px 0; clear: left; }
#main h3 { font: bold 12px/18px Arial, Helvetica, sans-serif; color: #CC3300; margin-bottom: 10px; color: #006699; }
#main li { margin: 0 0 0 25px;}
#main .table { font: normal 12px/20px Arial, Helvetica, sans-serif; color: #2a2a2a; }
#main strong, #main .table strong { font: bold 12px/20px Arial, Helvetica, sans-serif; }
#main .table em { font: italic 12px/20px Arial, Helvetica, sans-serif; }

#main .imgr { margin: 15px 0 15px 15px; }
#main .imgl { margin: 15px 15px 0 15px; }

#main .facilities { height: 100px; margin: 0 0 25px 0; padding: 0 0 25px 0; border-bottom: solid 1px #eee; font: normal 11px/17px Arial, Helvetica, sans-serif; }
#main .facilities2 { height: 100px; font: normal 11px/17px Arial, Helvetica, sans-serif; }
#main .pic-thumb { float: left; margin: 0 10px 0 0; }

#side { width: 235px; background-color: #fff; margin: 0 20px 0 0; padding: 30px 0 0; float: right; position: relative; }

#side #newsbox { width: 234px; background-color: #E2E2E2; border: solid 1px #003466; float: right; padding: 0 0 15px 0; margin: 0 0 15px 0; }
#side #newsbox h1 { font: bold 14px/18px Arial, Helvetica, sans-serif; color: #fff; padding: 10px 20px; background-color: #003466; margin: 0 0 10px 0; }
#side #newsbox p { font: normal 12px 16px Arial, Helvetica, sans-serif; color: #333; margin: 0 15px 15px;}
#side #newsbox .input { width: 120px; height: 14px; font: normal 12px/14px Arial, Helvetica, sans-serif; color: #1c1c1c; border: solid 1px #ccc; margin: 0 10px 0 15px; padding: 5px;}

#side #donatebox { width: 234px; background-color: #E2E2E2; border: solid 1px #519704; float: right; padding: 0 0 15px 0; margin: 0 0 15px 0; }
#side #donatebox h1 { font: bold 14px/18px Arial, Helvetica, sans-serif; color: #fff; padding: 10px 20px; background-color: #519704; margin: 0 0 10px 0; }
#side #donatebox p { font: normal 12px 16px Arial, Helvetica, sans-serif; color: #333; margin: 0 15px 15px; }

/* ---- Form Styles ---- */

#main #form .find { margin: 0 0 10px 0; _float: left; }
#main #form .form { margin: 0 0 0 35px; }
#main #form .text { font: bold 12px/14px Arial, Helvetica, sans-serif; color: #1c1c1c; }
#main #form .input {
	width: 120px; height: 14px;
	font: normal 12px/14px Arial, Helvetica, sans-serif; color: #1c1c1c;
	border: solid 1px #ccc;
	margin: 5px 10px 10px 0; padding: 5px;
}
#main #form select { width: 132px; font: normal 12px/16px Arial, Helvetica, sans-serif; color: #1c1c1c; border: solid 1px #ccc; margin: 5px 10px 10px 0; }
#main #form .go { margin: 0 0 3px 0; }
#main #form .directions {
	width: 225px;
	font: bold 13px/17px Arial Narrow; color: #292929;
	margin: 7px 0 0 25px; float: left;
	_margin: 7px 0 0 10px; float: left;
}

/* ---- Footer Styles ---- */

#footer {
	width: 850px; height: 200px; background: url(../resources/images/footerbg.png) 0 0 repeat-x;
	background-color: #CC9; border-top: solid 10px #996;
	font: normal 11px/14px Arial, Helvetica, sans-serif; color: #333; float: left;  position: relative;
}
#footer .info {  font: normal 11px/14px Arial, Helvetica, sans-serif; color: #333; margin: 8px 0 0 0; }
#footer h1 { font: bold 14px/18px Arial, Helvetica, sans-serif; color: #505027; margin: 0 0 10px 0; font-style: normal; }
#footer #column-main { width: 430px; position: absolute; top: 25px; left: 35px; }
#footer #column-secondary { width: 280px; position: absolute; top: 25px; right: 25px; }

#footer ul li { margin: 0; padding: 0; display: block; list-style: none; }
#footer li { /*float the main list items*/
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	float: left;
	display: block;
	text-align: left;
}
#footer li a { width: 110px; font: bold 11px/14px Arial, Helvetica, sans-serif; text-transform: uppercase; color: #333; text-decoration: none; padding: 6px 0; margin: 0 5px; float: left; }
#footer li a:hover { color: #069; text-decoration: none; }

#footer #copyright { width: 350px; font: bold 11px/14px Arial, Helvetica, sans-serif; float: left; margin: 25px 0 0 5px;  }
#footer #lab { width: 273px; font: bold 11px/14px Arial, Helvetica, sans-serif; color: #111; float: left; margin: 15px 0 0 5px;  }
#footer #lab  a { color: #111; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}
#footer #lab  a:hover { color: #069; text-decoration: underline; }

/* ------------------------------------------------------------------- */

/* Margins */

/* Top */
.mt5  {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt15 {margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt25 {margin-top: 25px;}
.mt30 {margin-top: 30px;}
.mt35 {margin-top: 35px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}

/* Right */
.mr5  {margin-right: 5px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.mr25 {margin-right: 25px;}
.mr30 {margin-right: 30px;}
.mr35 {margin-right: 35px;}
.mr40 {margin-right: 40px;}
.mr50 {margin-right: 50px;}

/* Bottom */
.mb5  {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb25 {margin-bottom: 25px;}
.mb30 {margin-bottom: 30px;}
.mb35 {margin-bottom: 35px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}

/* Left */
.ml5  {margin-left: 5px;}
.ml10 {margin-left: 10px;}
.ml15 {margin-left: 15px;}
.ml20 {margin-left: 20px;}
.ml25 {margin-left: 25px;}
.ml30 {margin-left: 30px;}
.ml35 {margin-left: 35px;}
.ml40 {margin-left: 40px;}
.ml50 {margin-left: 50px;}
.ml55 {margin-left: 55px;}
/* ------------------------------------------------------------------- */

/* Paddings */

/* Top */
.pt2  {padding-top: 2px;}
.pt3  {padding-top: 3px;}
.pt5  {padding-top: 5px;}
.pt8  {padding-top: 8px;}
.pt10 {padding-top: 10px;}
.pt15 {padding-top: 15px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt35 {padding-top: 35px;}
.pt40 {padding-top: 40px;}
.pt50 {padding-top: 50px;}

/* Right */
.pr5  {padding-right: 5px;}
.pr10 {padding-right: 10px;}
.pr15 {padding-right: 15px;}
.pr20 {padding-right: 20px;}
.pr25 {padding-right: 25px;}
.pr30 {padding-right: 30px;}
.pr35 {padding-right: 35px;}
.pr40 {padding-right: 40px;}
.pr50 {padding-right: 50px;}

/* Bottom */
.pb5  {padding-bottom: 5px;}
.pb8  {padding-bottom: 8px;}
.pb10 {padding-bottom: 10px;}
.pb15 {padding-bottom: 15px;}
.pb20 {padding-bottom: 20px;}
.pb25 {padding-bottom: 25px;}
.pb30 {padding-bottom: 30px;}
.pb35 {padding-bottom: 35px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pb65 {padding-bottom: 65px;}

/* Left */
.pl5  {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl15 {padding-left: 15px;}
.pl20 {padding-left: 20px;}
.pl25 {padding-left: 25px;}
.pl30 {padding-left: 30px;}
.pl35 {padding-left: 35px;}
.pl40 {padding-left: 40px;}
.pl50 {padding-left: 50px;}

/* All */
.p2  {padding: 2px;}
.p3  {padding: 3px;}
.p5  {padding: 5px;}
.p8  {padding: 8px;}
.p10 {padding: 10px;}
.p15 {padding: 15px;}
.p20 {padding: 20px;}
.p25 {padding: 25px;}
.p30 {padding: 30px;}
.p35 {padding: 35px;}
.p40 {padding: 40px;}
.p50 {padding: 50px;}