/* 2009 madewithpixels */
/* XHTML / CSS written by Michael Auty */

@import url(ComboBox.FiveASide.css);

/* GLOBAL STYLES 
-------------------------------------------------------------------------------*/
html, body {
	width:100%;
	height:100%;
	} 

body {
	height:100%;
	font-family:Helvetica, Arial, sans-serif;
	font-size:62.5%;
	color:#fff;
	line-height:2em;
	background:#1d4764 url(../../images/bg.jpg) repeat-x;
	}

body#step {
	background:#1d4764 url(../../images/bgstep.jpg) repeat-x;}



/* RESET DEFAULT AND DEFINE GENERIC STRUCTURAL STYLES
-------------------------------------------------------------------------------*/
body, p, h1, h2, h3, h4, h5, ul, ol, li, form, input, fieldset, label, blockquote, dl, dt, dd, fieldset, a:link img, a:visited img, a:active img, a:hover img {
	margin:0;
	padding:0;
	list-style-type:none;
	border:none;
	}

.clear {
	clear:both; }

.floatleft {
	float:left; }

.floatright {
	float:right; }

img.floatleft {
	margin:5px 20px 10px 0; }

hr { 
	display:none; }

.icon,
.hdr,
.btn {
	margin:0;
	padding:0;
	text-indent:-5000px;
	font-size:0;
	line-height:0;
	overflow:hidden;
	}
	
img {
	border:none;}

/* GLOBAL TYPOGRAPHY
-------------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	}

h1#logo a:link, 
h1#logo a:visited,
h1#logo a:active,
h1#logo a:hover {
	display:block;
	margin:0;
	padding:0;
	width:460px;
	height:160px;
	}

p {
	font-size:1.4em;
	margin:0 0 2em 0;
	}

em {
	font-style:italic; }



/* GLOBAL LINK STYLES
-------------------------------------------------------------------------------*/
a { /* Firefox */ 
	outline:none; }
	
a:link, a:visited, a:active {
	color:#f79825;
	text-decoration:none;
	}

a:hover {
	text-decoration:underline; }

.btn_donate {
	float:right;
	display:inline;
	margin:-418px -6px 0 0;
	width:165px;
	height:128px;
	background:url(../../images/btn_donatehome.jpg) no-repeat;
	}



/* GLOBAL FORM STYLES
-------------------------------------------------------------------------------*/
input, textarea, select {
	color:#7d7e63;
	background:#fbfdc6;
	border:3px solid #eaeae3;
	width:340px;
	padding:5px;
	font-family:Helvetica, Arial, sans-serif;
	}

label {
	padding:6px 0 0 0; }

label span.req {
	color:red; }

a:link.btn_submit,
a:visited.btn_submit,
a:active.btn_submit {
	padding:10px;
	font-weight:bolder;
	color:#fff;
	font-size:1.8em;
	background:#f79825;
	}

a:hover.btn_submit {
	color:#fff;
	font-size:1.8em;
	background:#999;
	}
	
	

/* GLOBAL LAYOUT
-------------------------------------------------------------------------------*/
#sitewrapper {
	width:940px;
	height:100%;
	margin:0 auto;
	}

#header {
	width:940px;
	height:180px;	
	background:url(../../images/header.jpg) no-repeat;
	}

body#step #header {
	height:170px; }

/* main navigation */
#navmain {
	float:right;
	display:inline;
	margin:-127px 0 0 0;
	width:488px;
	height:49px;
	}

#navmain li a:link,
#navmain li a:visited,
#navmain li a:active {
	display:block;
	float:left;
	display:inline;
	height:43px;
	padding:6px 0 0 18px;
	color:#fff;
	font-size:1.4em;
	background:url(../../images/nav.jpg) no-repeat;
	}


#navmain li a:hover {
	background:url(../../images/nav.jpg) 0 -49px no-repeat;
	color:#094488;
	text-decoration:none; 
	}

#navmain li a.homelink {
	width:59px; }

#navmain li a.aboutlink {
	width:59px; }

#navmain li a.bloglink {
	width:59px; }
	
#navmain li a.getlink {
	margin:0 0 0 -7px;
	width:89px; }

#navmain li a:hover.getlink {
	background:url(../../images/nav.jpg) -143px -49px no-repeat; }

#navmain li a.donatelink {
	width:59px; }

#navmain li a:hover.donatelink {
	width:59px;
	background:url(../../images/nav.jpg) 3px -49px no-repeat;
	}

#navmain li a.contactlink {
	width:60px; }

#navmain li a:hover.contactlink {
	background:url(../../images/nav.jpg) -332px -49px no-repeat;
	}

body#homepage #navmain li a.homelink {
	background:url(../../images/nav.jpg) 0 -49px no-repeat;
	color:#094488;
	}

body.blogpage #navmain li a.bloglink {
	background:url(../../images/nav.jpg) 0 -49px no-repeat;
	color:#094488;
	}

body.aboutpage #navmain li a.aboutlink {
	background:url(../../images/nav.jpg) 0 -49px no-repeat;
	color:#094488;
	}

body.getpage #navmain li a.getlink {
	background:url(../../images/nav.jpg) -143px -49px no-repeat;
	color:#094488;
	}

body.donatepage #navmain li a.donatelink {
	background:url(../../images/nav.jpg) 3px -49px no-repeat;
	color:#094488;
	}

body.contactpage #navmain li a.contactlink {
	background:url(../../images/nav.jpg) -332px -49px no-repeat;
	color:#094488;
	}

/* tab box */
dl#tabbox {
	width:940px;
	height:320px;
	background:url(../../images/tabbox.jpg) top right no-repeat;
	}

dl#tabbox dd {
	display:none; }

dl#tabbox dd.on {
	display:block;
	float:right;
	display:inline;
	padding:45px 65px 42px 0;
	width:550px;
	height:150px;
	}

dl#tabbox dd.on h3 {
	color:#fff;
	font-size:1.6em;
	line-height:1.8em;
	padding:0 170px 0 0;
	}

dl#tabbox dd h3 a:link,
dl#tabbox dd h3 a:visited,
dl#tabbox dd h3 a:hover {
	display:block;
	padding:0 30px 40px 0;
	color:#fff;
	background:url(../../images/btn_more.jpg) bottom right no-repeat;
	}

dl#tabbox dd h3 a:hover {
	text-decoration:none;}

dl#tabbox dd {
	background:url(../../images/tabboxone.jpg) 361px 15px no-repeat;
	}

dl#tabbox dd img.floatright {
	margin:5px 55px 0 0;}

dl#tabbox dt {
	position:absolute;
	width:320px;
	height:121px;
	}

dl#tabbox dt a {
	display:block;
	width:320px;
	height:20px;
	position:absolute;
	}

dl#tabbox dt a:link.btn_what,
dl#tabbox dt a:visited.btn_what,
dl#tabbox dt a:active.btn_what {
	height:100px;
	background:url(../../images/btn_what.png) -322px 0 no-repeat;
	z-index:10;
	}

dl#tabbox dt a:hover.btn_what,
dl#tabbox dt.on a:link.btn_what,
dl#tabbox dt.on a:visited.btn_what,
dl#tabbox dt.on a:active.btn_what {
	background:url(../../images/btn_what.png) no-repeat;
	}
	
dl#tabbox dt a:link.btn_where,
dl#tabbox dt a:visited.btn_where,
dl#tabbox dt a:active.btn_where {
	height:115px;
	margin:80px 0 0 0;
	background:url(../../images/btn_where.png) no-repeat;
	z-index:100;
	}

dl#tabbox dt a:hover.btn_where,
dl#tabbox dt.on a:link.btn_where,
dl#tabbox dt.on a:visited.btn_where,
dl#tabbox dt.on a:active.btn_where {
	background:url(../../images/btn_where.png) -321px 0 no-repeat;}

dl#tabbox dt a:link.btn_how,
dl#tabbox dt a:visited.btn_how,
dl#tabbox dt a:active.btn_how {
	height:115px;
	margin:150px 0 0 0;
	background:url(../../images/btn_how.png) no-repeat;
	z-index:1000;
	}

dl#tabbox dt a:hover.btn_how,
dl#tabbox dt.on a:link.btn_how,
dl#tabbox dt.on a:visited.btn_how,
dl#tabbox dt.on a:active.btn_how {
	background:url(../../images/btn_how.png) -324px 0 no-repeat;
	}
	
/* get involved feature */
.hdr_getinvolved {
	width:407px;
	height:150px;
	background:url(../../images/hdr_getinvolved.png) no-repeat;
	}

h3.hdr_getinvolved a:link,
h3.hdr_getinvolved a:visited,
h3.hdr_getinvolved a:active {
	display:block;
	width:407px;
	height:150px;
	}

#getinvolved p {
	width:500px; }

ul#logos {
	float:right;
	display:inline;
	width:380px;
	margin:20px 0 0 -40px;
	}

ul#logos li {
	float:left;
	display:inline;
	min-height:100px;
	 }
	
ul#logos li.sfas {
	margin:-5000px 0 0 0;
	 }

/* footer */
#footer {
	float:left;
	display:inline;
	width:940px;
	margin:40px 0 0 0;
	padding:20px 0 40px 0;
	border-top:1px dotted #fff;
	}

#footer ul {
	float:left;
	padding:0 0 20px 0; }

#footer ul li {
	float:left;
	display:inline;
	margin:0 30px 0 0;
	font-size:1.1em;
	}

#footer p {
	float:right;
	display:inline;
	font-size:1.1em;
	}

#footer p.socials {
	margin:-80px 0 0 0; }

#footer p a:link span {
	color:#fff; }

#footer p a:hover {
	text-decoration:none; }

#footer p#registered {
	float:left;
	width:940px;
	text-align:center;
	font-size:1em;
	color:#a5afb6;
	line-height:1.4em;
	margin:0 0 20px 0;
	}

/* stepdown styles */ 
body#step #content {
	float:left;
	display:inline;
	padding:0 0 100px 0;}

body#step #content h3,
body#step #content p { 
	float:left;
	display:inline;
	margin:40px 0 0 167px;
	}

body#step #content p {
	margin:10px 0 0 167px;
	}

body#step #content h3 {
	width:780px; }

body#step #content ul.list {
	clear:both;
	margin:0 0 0 167px;
	padding:20px 0 0 0;
	font-size:1.4em;
	}

body#step.contactpage #content p {
	margin:0 0 0 10px;}

body#step.contactpage #content ul.list {
	clear:both;
	width:250px;
	margin:0 0 0 10px;
	padding:20px 0 0 0;
	font-size:1.4em;
	}

body#step #content ul.list li {
	padding:0 0 10px 0;
	list-style-type:square;}

.hdr_getinvolvedmain {
	margin:40px 0 0 0;
	width:940px;
	height:140px;
	background:url(../../images/hdr_getinvolvedmain.png) no-repeat;
	}


body#step.getpage #content h3.hdr_action {
	margin:-20px 0 0 167px;
	height:71px;
	background:url(../../images/hdr_action.png) no-repeat;
	}

body#step.getpage #content h3.hdr_getone {
	margin:30px 0 0 167px;
	height:44px;
	background:url(../../images/hdr_getone.png) no-repeat;
	}

body#step.getpage #content h3.hdr_gettwo {
	height:44px;
	background:url(../../images/hdr_gettwo.png) no-repeat;
	}

body#step.getpage #content h3.hdr_getthree {
	height:79px;
	background:url(../../images/hdr_getthree.png) no-repeat;
	}

body#step.getpage #content h3.hdr_getfour {
	height:85px;
	background:url(../../images/hdr_getfour.png) no-repeat;
	}

h4.hdr_people {
	width:213px;
	height:34px;
	background:url(../../images/hdr_people.png) no-repeat;
	}

h4.hdr_equipment {
	width:263px;
	height:34px;
	background:url(../../images/hdr_equipment.png) no-repeat;
	}

.hdr_aboutmain {
	margin:40px 0 0 0;
	width:940px;
	height:140px;
	background:url(../../images/hdr_aboutmain.png) no-repeat;
	}

body#step.aboutpage #content h3.hdr_aboutone {
	margin:0 0 0 167px;
	height:44px;
	background:url(../../images/hdr_aboutone.png) no-repeat;
	}

body#step.aboutpage #content h3.hdr_abouttwo {
	height:44px;
	background:url(../../images/hdr_abouttwo.png) no-repeat;
	}

body#step.aboutpage #content h3.hdr_aboutthree {
	height:76px;
	background:url(../../images/hdr_aboutthree.png) no-repeat;
	}

body#step.aboutpage #content h3.hdr_aboutfour {
	height:82px;
	background:url(../../images/hdr_aboutfour.png) no-repeat;
	}

/* contact form */
.hdr_contactmain {
	margin:40px 0 0 0;
	width:940px;
	height:140px;
	background:url(../../images/hdr_contactmain.png) no-repeat;
	}

body.contactpage #content p {
	float:left;
	display:inline;
	width:300px;
	margin:0 40px 0 0;
	}

#formwrapper {
	float:right;
	display:inline;
	margin:-235px 0 0 0;
	padding:20px;
	width:560px;
	border:1px dotted #fff;
	}

ul#form li {
	padding:0 0 10px 0;}

ul#form li label {
	float:left;
	display:inline;
	width:200px;
	font-size:1.2em;
	}

ul#form li select {
	width:356px;
	height:30px;
	line-height:2em; }

ul#form li.invalid input, 
ul#form li.invalid textarea, 
ul#form li.invalid select {
	color:#fff;
	background:#d72828;
	border:3px solid #eaeae3;
	font-family:Helvetica, Arial, sans-serif;
	}

#formwrapper a.btn_submit {
	float:left;
	display:inline;
	margin:-40px 0 0 410px; 
	}

body.contactpage #content #formwrapper li p {
	float:left;
	display:inline;
	width:200px;
	margin:10px 0 0 0;
	padding:0;
	font-size:1.1em;
	line-height:1.4em;
	}
	
/* secondary navigation */ 
#navsec {
	float:left;
	display:inline;
	width:138px;
	}
	
#navsec {
	margin:0 0 -100px 0; }
	
body.getpage #navsec li a {
	width:138px; }

body.aboutpage #navsec li a {
	width:141px; }
	
#navsec li a:link,
#navsec li a:visited,
#navsec li a:active {
	display:block;
	height:30px;
	}

body.getpage #navsec li a {
	background:url(../../images/navsec_get.png) no-repeat; }

body.aboutpage #navsec li a {
	background:url(../../images/navsec_about.png) no-repeat; }
	

#navsec li a:link.play,
#navsec li a:visited.play,
#navsec li a:active.play {
	background-position:0 0; }

#navsec li a:link.volunteer,
#navsec li a:visited.volunteer,
#navsec li a:active.volunteer {
	background-position:0 -30px; }

#navsec li a:link.sponsor,
#navsec li a:visited.sponsor,
#navsec li a:active.sponsor {
	background-position:0 -60px; } 

#navsec li a:link.weneed,
#navsec li a:visited.weneed,
#navsec li a:active.weneed {
	background-position:0 -90px; }


#navsec li a:hover.play {
	background-position:-137px 0; }

#navsec li a:hover.volunteer {
	background-position:-137px -30px; }

#navsec li a:hover.sponsor {
	background-position:-137px -60px; }

#navsec li a:hover.weneed {
	background-position:-137px -90px; }

body.aboutpage #navsec li a:hover.volunteer {
	background-position:-140px 0; }

body.aboutpage #navsec li a:hover.sponsor {
	background-position:-140px -30px; }

body.aboutpage #navsec li a:hover.weneed {
	background-position:-140px -60px; }

a.btn_donate2 {
	display:block;
	width:146px;
	height:162px;
	background:url(../../images/btn_donate2.png) no-repeat;
	}

body.aboutpage a:link.btn_donate2,
body.aboutpage a:visited.btn_donate2,
body.aboutpage a:active.btn_donate2 {
	margin:-87px 0 -76px 810px; }

body.contactpage a:link.btn_donate2,
body.contactpage a:visited.btn_donate2,
body.contactpage a:active.btn_donate2 {
	float:left;
	display:inline;
	margin:20px 0 -183px 810px;
	}

a.btn_getintouch {
	display:block;
	width:151px;
	height:140px;
	background: url(../../images/btn_getintouch.png) no-repeat;
	}

a.btn_getintouch.floatleft {
	margin:5px 20px 0 0; }

body.getpage a.btn_getintouch.floatright {
	margin:0 0 0 20px; }

body.getpage a.btn_donate2 {
	float:right;
	display:inline;
	margin:-180px 0 0 20px; 
	}

p.getone {
	padding:0 180px 0 0;}

ul#resources {
	float:left;
	display:inline;
	margin:0 0 0 167px; 
	}

ul#resources li {
	float:left;
	display:inline;
	margin:20px 0 0 0;
	padding:0 60px 0 0;
	width:320px;
	font-size:1.2em;
	}

