/* Reset CSS */
/* --------------------- */
@import "reset.css";

/* Universal */
/* --------------------- */
html, body{
	font: 10pt/16pt "Helvetica",Arial,sans-serif;
	color: #555;
	background: url("images/bgTile.gif") repeat-x left top #e0e5d3;
}

a{
	font-weight: bold;
	color: #ed4c57;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/* Headers */
/* --------------------- */
h1, h2{
	text-transform: uppercase;
	clear: both;
}

h1{
	color: #ed4c57;
	font-size: 18pt;
	line-height: 18pt;
}

h2{
	font-size: 12pt;
	line-height: 12pt;
}

h3{
	font-size: 12pt;
	line-height: 12pt;
	font-weight: bold;
}

/* Common Classes */
/* --------------------- */
.bold{
	font-weight: bold;
}

.italic{
	font-style: italic;
}

.underline{
	text-decoration: underline;
}

.strike{
	text-decoration: line-through;
}

.red{
	color: #red;
}

.leftCol, .rightCol{
	width: 48%;
	float: left;
}

.rightCol{
	float: right;
}

/* Structure */
/* --------------------- */
.overflow{
	width: 100%;
	overflow: hidden;
}

#canvas{
	width: 960px;
	margin: 0 auto;
	background-color: #ffffff;
}

#header{
	height: 40px;
	width: 100%;
	overflow: hidden;
	background-color: #4c2d00;
}

ul#nav{
	width: 960px;
	overflow: hidden;
	height: 40px;
	margin: 0 auto;
}

ul#nav li{
	display: inline;
}

ul#nav a{
	display: block;
	margin-left: 35px;
	height: 40px;
	background: url("images/nav.gif") no-repeat left top;
	float: left;
	text-indent: -4000px;
}

ul#nav a#navLogo{ width: 83px; margin-left: 0; }
ul#nav a#navAbout{ width: 119px; background-position: -74px 0; }
ul#nav a#navVolunteer{ width: 125px; background-position: -193px 0; }
ul#nav a#navDonate{ width: 100px; background-position: -318px 0; }
ul#nav a#navRacers{ width: 98px; background-position: -418px 0; }
ul#nav a#navContact{ width: 131px; background-position: -516px 0; }
ul#nav a#navMedia{ width: 94px; background-position: -647px 0; }

#about ul#nav a#navAbout, ul#nav a#navAbout:hover{ background-position: -74px bottom; }
#volunteer ul#nav a#navVolunteer, ul#nav a#navVolunteer:hover{ background-position: -193px bottom; }
#donate ul#nav a#navDonate, ul#nav a#navDonate:hover{ background-position: -318px bottom; }
#racers ul#nav a#navRacers, ul#nav a#navRacers:hover{ background-position: -418px bottom; }
#contact ul#nav a#navContact, ul#nav a#navContact:hover{ background-position: -516px bottom; }
#media ul#nav a#navMedia, ul#nav a#navMedia:hover{ background-position: -647px bottom; }

.tab{
	width: 59px;
	height: 60px;
	line-height: 60px;
	border-right: 1px solid #5aa095;
	color: #ffffff;
	font-size: 36pt;
	font-weight: bold;
	text-align: center;
	background-color: #66b5a9;
	margin-left: -60px;
	position: absolute;
	float: left;
}

#banner{
	width: 100%;
	overflow: hidden;
}

#banner a{
	color: #e6ffcb;
}

#banner h2{
	color: #e6ffcb;
}

#main{
	padding: 20px;
}

#footer{
	height: 20px;
	margin: 0 auto 20px;
	overflow: hidden;
	clear: both;
	color: #aaaaaa;
	padding: 6px 10px;
	background: url("images/footerLogo.gif") no-repeat 10px center #4c2d00;
	line-height: 22px;
}

#footer #footNav{
	width: 80%;
	float: right;
	text-align: right;
}

#footer a{
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
}

#footer a:hover{
	text-decoration: underline;
}

#footer #copyright{
	color: #ffffff;
	font-size: 8pt;
	font-weight: bold;
}

#footer #copyright a{
	display: block;
	float: left;
	width: 52px;
	height: 20px;
}

/* Google Form */
/* --------------------- */
.gForm h2{
	color: #66b5a9;
	margin-bottom: 4px;
	margin-top: 30px;
}

.gForm p{
	font-size: 8pt;
	line-height: 8pt;
	color: red;
	margin-bottom: 8px;
}

.gForm p.comment{
	font-size: 9pt;
	line-height: 14pt;
	color: #555;
	margin-bottom: 8px;
}

.gForm div{
	margin-bottom: 20px;
}

.gForm label,
.gForm span{
	display: block;
	line-height: 12pt;
}

.gForm label{
	font-weight: bold;
	color: #333;
}

.gForm span{
	font-size: 8pt;
	color: #888;
}

.gForm label span{
	display: inline;
	font-size: 10pt;
	color: #333;
}

.gForm span.red{
	display: inline;
	color: red;
}

.gForm ul label{
	display: inline;
	font-weight: normal;
}

.gForm ul li .formText{
	display: inline;
	width: 100px;
}

.gForm input.formText{
	border: 1px solid #999999;
	font-size: 10pt;
	padding: 4px 2px;
	width: 200px;
}

.gForm textarea{
	border: 1px solid #999999;
	font-size: 10pt;
}

/* Home */
/* --------------------- */
#about #missionTab{
	margin-top: 250px;
}

#about #banner{
	height: 240px;
	background: url("../images/donationsRider.jpg") no-repeat right top;
}

#about #banner #donations{
	width: 320px;
	height: 240px;
	float: left;
	overflow: hidden;
}

#about #banner #current, #about #banner #goal, #about #banner #toDate{
	width: 280px;
	height: 40px;
	padding: 20px;
	clear: left;
	float: left;
	font-size: 14pt;
	line-height: 14pt;
	color: #e6ffcb;
	overflow: hidden;
}

#about #banner .amount{
	font-weight: bold;
	font-size: 16pt;
	line-height: 18pt;
	color: #ffffff;
}

#about #banner #current{
	background-color: #70c6b9;
}

#about #banner #goal{
	background-color: #66b5a9;
}

#about #banner #toDate{
	background-color: #5aa095;
}

#about #banner #carousel{
	width: 640px;
	height: 240px;
	float: right;
	background: url("../images/donationsRider.jpg") no-repeat right top;
}

#mission, #causes{
	float: left;
	margin-bottom: 10px;
	width: 610px;
	font-size: 9pt;
}

#causes{
	margin-left: 20px;
	margin-left: 0;
}

#about #causes img.offset{
	display: block;
	float: left;
	width: 100px;
	height: 100px;
	margin: 10px 10px 10px 0;
}

#mission h1, #causes h1{
	margin-bottom: 10px;
}

#causes h2{
	margin-bottom: 5px;
	color: #66b5a9;
}

#mission p, #causes p{
	margin-bottom: 10px;
}

#about .sidebar{
	width: 290px;
	overflow: hidden;
	float: right;
	padding-right: 20px;
}

#about a#imAware{
	display: block;
	text-indent: -4000px;
	width: 290px;
	height: 240px;
	float: right;
	margin-right: 20px;
	background: url("images/imAware.gif") no-repeat right top;
}

#about a#imAware:hover{
	background-position: right bottom;
}

#about .split{
	height: 50px;
	overflow: hidden;
	clear: both;
	margin-bottom: 20px;
}

#about #main{
	padding-left: 0;
	padding-right: 0;
}

#mission, #causes{
	padding-left: 20px;
}

#about #social{
	height: 40px;
	margin-top: -20px;
	margin-bottom: 10px;
	width: 100%;
	overflow: hidden;
	clear: both;
}

#about #social #twitter{
	float: left;
	text-indent: 20px;
	margin-right: 20px;
}

/* Volunteer */
/* --------------------- */
#volunteer #banner{
	height: 200px;
	background: url("images/volunteerBanner.jpg") no-repeat left -20px;
}

#awareness, #helpOut{
	background-color: #ffffff;
	width: 430px;
	float: right;
	margin-bottom: 20px;
}

#helpOut{
	float: left;
}

#awareness h1, #helpOut h1{
	margin-bottom: 10px;
}

#awareness h2{
	margin-bottom: 5px;
	color: #66b5a9;
}

#helpOut p, #awareness p{
	margin-bottom: 20px;
	font-size: 10pt;
	line-height: 16pt;
}

#helpOut ul#positions{
	font-size: 10pt;
	line-height: 18pt;
	list-style-type: disc;
	margin-left: 20px;
	margin-bottom: 10px;
	margin-top: -10px;
}

/* Donate */
/* --------------------- */
#donate #banner{
	background: url("images/donationsBanner.jpg") no-repeat right top #ffffff;
	color: #ffffff;
}

#donate #banner #raceinfo{
	width: 440px;
	padding: 20px 20px 10px;
	background-color: #74c7b8;
	float: left;
}

#donate #banner #raceinfo h1{
	color: #e6ffcb;
	margin-bottom: 10px;
}

#donate #banner #raceinfo p{
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 12pt;
	line-height: 18pt;
}

#donate #main{
	padding-left: 0;
}

#sponsorshipInfo, #sponsorshipSubmission{
	width: 450px;
	float: left;
}

#sponsorshipInfo .split{
	margin-bottom: 20px;
}

#sponsorshipSubmission{
	float: right;
}

#sponsorshipInfo h1, #sponsorshipSubmission h1{
	margin-bottom: 10px;
}

#sponsorshipInfo h1{
	padding-left: 20px;
}

#sponsorshipInfo p{
	padding-left: 20px;
	margin-bottom: 20px;
	font-size: 9pt;
}

#sponsorshipInfo p.slimPad{
	margin-bottom: 10px;
}

/* Racers */
/* --------------------- */
#racers #banner{
	height: 240px;
	background: url("images/racersBanner.jpg") no-repeat left top;
}

#racers #banner #schedule{
	width: 240px;
	height: 200px;
	padding: 20px;
	float: right;
	overflow: hidden;
	color: #ffffff;
	font-size: 12pt;
	line-height: 17pt;
	font-weight: bold;
	background-color: #4b847b;
}

#racers #banner #schedule h2{
	margin-bottom: 6px;
}

#racers #banner #schedule ul{
	line-height: 26px;
}

#racers .split{
	clear: both;
	margin: 20px 0;
}

#racers #main{
	padding-left: 0;
	padding-right: 0;
}

.racer{
	width: 920px;
	margin: 0 auto;
	overflow: hidden;
}

.racer .sidebar{
	width: 130px;
	float: left;
	overflow: hidden;
}

.racer .portrait{
	display: block;
	width: 130px;
}

.racer .points{
	font-size: 10pt;
	line-height: 10pt;
	text-align: center;
	margin-top: 10px;
	padding: 10px 0;
	background-color: #70c6b9;
	color: #e6ffcb;
	font-weight: bold;
}

.racer .points span{
	display: block;
	font-size: 18pt;
	margin-top: 8px;
	color: #ffffff;
}

.racer .info{
	width: 770px;
	float: right;
}

.racer .info h2{
	display: inline;
	color: #66b5a9;
	margin-bottom: 6px;
}

.racer .info .cause{
	font-size: 12pt;
	line-height: 17pt;
	font-weight: bold;
}

.racer .info .contact{
	font-weight: bold;
	line-height: 14pt;
}

.racer .info .league{
	float: right;
}

.racer .info .leftCol, .racer .info .rightCol{
	width: 375px;
}

.racer .info h3{
	margin-top: 20px;
}

.racer .info .leftCol p, .racer .info .rightCol p{
	margin-top: 5px;
	font-size: 9pt;
}

/* Media */
/* --------------------- */
#media h1{
	margin-bottom: 6px;
}

#media h2{
	color: #66b5a9;
	margin-bottom: 6px;
}

#media object{
	margin-bottom: 20px;
}

/* Contact */
/* --------------------- */
#contact #banner{
	background: url("images/contactBanner.jpg") no-repeat left top;
}

#contact #banner #organization{
	width: 440px;
	padding: 20px;
	float: left;
	overflow: hidden;
	color: #ffffff;
	font-size: 12pt;
	line-height: 17pt;
	font-weight: bold;
	background-color: #66b5a9;
}

#contact #banner #organization h2{
	color: #e6ffcb;
	margin-bottom: 6px;
}

#address{
	margin-bottom: 14px;
	font-size: 12pt;
	line-height: 18pt;
}

#administration{
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
}

#organization h1, #administration h1, #volunteers h1, #contact .rightCol h1{
	margin-bottom: 10px;
}

.member{
	margin-bottom: 20px;
}

.member .portrait{
	width: 80px;
	height: 90px;
	overflow: hidden;
	float: left;
	margin-right: 10px;
}

.member .name{
	font-size: 14pt;
	font-weight: bold;
	line-height: 18pt;
}

.member .title, .member .email{
	font-size: 10pt;
	line-height: 14pt;
	font-weight: bold;
}

#contact .rightCol, #contact .leftCol{
	margin-bottom: 20px;
}

#contact .rightCol #comments{
	margin-bottom: 20px;
}

/* Aware */
/* --------------------- */
#aware #thanks, #aware #awareForm{
	width: 450px;
	float: left;
	overflow: hidden;
	margin-bottom: 20px;
}

#aware #thanks h1, #aware #thanks p{
	margin-bottom: 10px;
}

#aware #awareForm{
	float: right;
}

#aware #awareForm p{
	margin-top: 10px;
}