/*
** ----------------------------------
**  Basic layout and container divs.
** ----------------------------------
*/
	html, body{margin:0; padding:0;text-align:center; background-color: #eee; font-family: helvetica, arial, verdana, sans-serif;} 
	#pagewidth{width:910px;text-align:left;margin-left:auto;margin-right:auto; background-color: #fff; border: 1px solid #ddd;} 
	#header{position:relative;height:200px;background-color:#ffffff;width:100%;} 
	#wrapper {background: url(../images/background_brown3.gif) top left repeat-y;}
	#leftcol{width:240px;float:left;position:relative; background-color: #291c11;}

/*
** --------------------------------------------------------------------------
** The footer height set to zero unless it is used. To make this empty div or 
** any other empty div stay at zero height in IE, include a comment tag in
** the html markup.
** --------------------------------------------------------------------------
*/
	#footer{height: 0;background-color:#eee; clear:both;} 
	
/*
** ------------------------------------------------------------
** The footer for the front page - backup for flash button menu.
** You can add copyright or other information here too.
** ------------------------------------------------------------
*/
	#index_footer{font-size: 11px; background-color: #332200; color: #444; clear: both; text-align: center; margin: 0; padding: 0 0 10px 0;}
	#index_footer a {color: #aaa; text-decoration: underline;}
	#index_footer a:hover {color: #eee; text-decoration: none;}

/*
** ------------------------------------------------
** Container for the main section of the front page.
** ------------------------------------------------
*/
	#index_maincontainer {width: 100%; background-color: #332200;}

/*
** -----------------------------------------
** The containers for the main section of all
** of the inner pages with associated styles.
** -----------------------------------------
*/
	#maincol{background-color: #fff;float: right;display:inline;position: relative;width:670px;}
	#contain {padding: 0; margin: 28px 100px 100px 45px; color: #332200; font-size: 14px;}
	#contain a {color: blue;text-decoration: underline;}
	#contain a:hover {color: red;text-decoration: none;}
	#contain p {padding: 0; margin: 0 0 25px 0;}

/*
** -----------------------------------------------------------------------
** The top left logo using an image replacement technique
** similar to that found at the bottom of this page:
** http://www.mezzoblue.com/tests/revised-image-replacement/
** except using anchor tags instead of spans. The 
** logo is a clickable image, but search engines, screen
** readers, and anybody with images or CSS off will see
** the h1 heading text. The image will need to have an opaque 
** background to hide the text. If image has to be transparant, 
** then the text can be the same color as the background, but then 
** it won't be visible except to search engines,screen readers,CSS off, etc. 
** The other advantage of making the text the same color as the
** background is that it won't be visible if the image loads slow.
** ------------------------------------------------------------------------
*/
	#logo {float: left; margin: 13px 0 0 35px; padding: 0;}
	h1.logo_header {width: 445px;height: 185px;position: relative;color: #fff; font-size: 14px;}
	h1.logo_header a {background: url(../images/PSPlogoFweb.jpg) no-repeat; position: absolute;width: 100%;height: 100%;}

/*
** -------------------------------------------------
** The donation meter as a static image. This could
** be replaced with html and css, but the background
** image will have to be updated anyway.
** -------------------------------------------------
*/
	/*#donation_meter {float: right; padding: 0; margin: 30px 50px 0 0; width: 145px; height: 145px; background: #fff url(../images/donation_meter.gif) 0 0 no-repeat;}*/
#donation_meter {
	float: right;
	padding: 0;
	margin: 30px 50px 0 0;
	width: 180px;
	height: 148px;
	/*background: #fff url(../images/donation_meter.gif) 0 0 no-repeat;*/
}
tr.donation_meter_top{
	border-bottom: thick solid #FFFFFF;
	background: #FFFFFF url(/images/donationMeter/circle-back.gif) 0 0 no-repeat;
}
tr.donation_meter_bottom{
}
table.donation_meter_table{
	background: #FFFFFF url(/images/donationMeter/circle-front.gif) 0 0 no-repeat;
}
td.donation_meter_text_goal{
	text-align: center;
	color: #FFFFFF;
	padding: 15px 0px 0px 0px;
}
td.donation_meter_text_raised{
	text-align: center;
	color: #FFFFFF;
	padding: 0px 0px 15px 0px;
}
img.donation_meter_labels{
	/*padding: 6px 0px 6px 0px;*/
}

/*
** ------------------------------------------------------- 
** The horizontal stripes of color between the header and
** main content. The html markup needs a blank comment tag
** in the empty divs so IE doesn't assign a default height.
** -------------------------------------------------------
*/
	#stripes {width: 100%; clear: both;}
	#stripes #green {height: 4px; background-color: #aacc55;}
	#stripes #yellow {height: 7px; background-color: #ffff77;}
	#stripes #pink {height: 12px; background-color: #ffccdd;}
	#stripes #blue {height: 21px; background-color: #99ddff;}

/*
** ---------------------------
** The left navigation styles.
** ---------------------------
*/
	ul#left_navigation {margin: 28px 0 200px 0; padding: 0; list-style-type: none; font-size:13px; font-family:Arial, Helvetica, sans-serif;}
	ul#left_navigation li {margin: 0;}
	ul#left_navigation li.yellow a {display: block; padding: 6px 10px 6px 60px; width: 170px; color: #fff; background: #291c11 url('../images/nav_dot_yellow.gif') 30px 50% no-repeat; text-decoration: none; font-weight: normal;}
	ul#left_navigation li.yellow a:hover {color: #ffff77; background-color: #291c11; text-decoration: none;}
	ul#left_navigation li.pink a {display: block; padding: 6px 10px 6px 60px; width: 170px; color: #fff; background: #291c11 url('../images/nav_dot_pink.gif') 30px 50% no-repeat; text-decoration: none; font-weight: normal;}
	ul#left_navigation li.pink a:hover {color: #ffccdd; background-color: #291c11; text-decoration: none;}
	ul#left_navigation li.blue a {display: block; padding: 6px 10px 6px 60px; width: 170px; color: #fff; background: #291c11 url('../images/nav_dot_blue.gif') 30px 50% no-repeat; text-decoration: none; font-weight: normal;}
	ul#left_navigation li.blue a:hover {color: #aaddff; background-color: #291c11; text-decoration: none;}
	ul#left_navigation li.green a {display: block; padding: 6px 10px 6px 60px; width: 170px; color: #fff; background: #291c11 url('../images/nav_dot_green.gif') 30px 50% no-repeat; text-decoration: none; font-weight: normal;}
	ul#left_navigation li.green a:hover {color: #aacc66; background-color: #291c11; text-decoration: none;}

/*
** ---------------------------------------------------------
** Same image replacement technique as used in the
** logo above but without being clickable links. Done
** for same reasons as mentioned above and with same caveats
** ---------------------------------------------------------
*/
	.pageheader_aboutus {width: 277px;height: 72px;position: relative;color: #fff; font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_aboutus span {background: url(../images/head-about-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_makeadonation {width: 553px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_makeadonation span {background: url(../images/head-makeadonation-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_sponsors {width: 310px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_sponsors span {background: url(../images/head-sponsors-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_supporters {width: 310px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_supporters span {background: url(../images/head-supporters-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_ourprojects {width: 421px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_ourprojects span {background: url(../images/head-projects-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_volunteer {width: 319px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_volunteer span {background: url(../images/head-volunteer-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_dreamteam {width: 505px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_dreamteam span {background: url(../images/head-dreamteam-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_events {width: 188px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_events span {background: url(../images/head-events-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_contactus {width: 365px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_contactus span {background: url(../images/head-contactus-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_thanks {width: 365px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_thanks span {background: url(../images/head-thankyou-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_affiliates {width: 237px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_affiliates span {background: url(../images/head-affiliates-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_meetthekids {width: 350px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_meetthekids span {background: url(../images/head-meetthekids-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}
	.pageheader_lifeworkswishlist {width: 502px;height: 72px;position: relative;color: #fff;font-size: 13px; margin: 0 0 5px 0; padding: 0;}
	.pageheader_lifeworkswishlist span {background: url(../images/head-lifeworks-whiteback.gif) no-repeat; position: absolute;width: 100%;height: 100%;}

/*
** ------------------------------------------------------
** html form styles for volunteer page or any other forms
** ------------------------------------------------------
*/
	span.bold_red {font-weight: bold; color: #ff0000;}
	form#volunteer fieldset {border: 0;}
	label.hidden {display: none;}
	table.volunteer {width: 100%; margin: 0; padding: 0; border: 0; font-size: 12px;}
	table.volunteer tr td {padding: 0 0 5px 0;}
	table.volunteer tr td.label {vertical-align: top; text-align: right; padding: 5px 5px 0 0;}
	table.volunteer tr td.label_required {vertical-align: top; text-align: right; font-weight: bold; color: #332200; padding: 5px 5px 0 0;}
	table.volunteer tr td.label_required:before {}
	table.volunteer tr td.form_buttons {padding-top: 20px;}

/*
** --------------------------------------------------------
** Misc CSS hacks and fixes that may not actually be needed
** --------------------------------------------------------
*/

.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 */