@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {max-width: 100%;}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {width:100%;}
* {box-sizing: border-box; -moz-box-sizing: border-box;}

/*	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {clear: both; display: block; float: left; margin-left: 0; width: 100%;}
.fluidList {list-style:none; list-style-image:none; margin:0; padding:0;}
/* Basic */
body {background: #817753; color: #ffffff; font-family: Helvetica, Arial, sans-serif; margin: 0;}
	a:link, a:visited {color: #c1ae60;}
		a:hover, a:focus {color: #ffffff;}
h2 {margin-top: 2em;}
img {border: none;}
a:hover; a:focus {opacity: .95;}
/* Wufoo Form Over-rides */
.info h2 {display: none;}
.desc {text-transform: uppercase;}
input, select, textarea {width: 100%;}
.phone-field input {width: 47px;}
form li.buttons #saveForm {display:block; height: auto; width: 190px; box-shadow: 0 0 10px 0 #000000; -webkit-box-shadow: 0 0 10px 0 #000000;}

/* Mobile Layout: 480px and below. */

/* Layout */
.wrap {clear: none; float: none; margin-left: auto; margin-right: auto; padding-left: 2.275%; padding-right: 2.275%; position: relative; width: 86.45%;}
.content {width: 100%;}
	.logo {background: url("../img/logo.png") 0 0 no-repeat; background-size: contain; display: block; float: left; height: 65px; margin: 0 0 50px 0; overflow: hidden; text-indent: 200%; white-space: nowrap; width: 100%;}
	.facebook {}
		.facebook a {display: block; font-size: 1.1em; margin-bottom: 5px; padding: 5px 0; text-align: center;}
			.facebook .public {background: url("../img/bg-facebook.png") center top no-repeat; height: 70px; overflow: hidden; margin-top: 20px; padding: 70px 0 0 0;}
.events {color: #c1ae60; margin-bottom: 10px;}
.bios {color: #ffffff; margin-bottom: 10px;}
	.events h2, .bios h2 {font-size:1.8em; text-transform: uppercase;}
	.leader-list, .leader-list li {display: inline-block; list-style: none; margin: 0 0 .5em 0; padding: 0;}
		.leader-list {width: 100%;}
		.leader-list li {width: 50%;}
	.bios h3 {border-top: 1px solid #c1ae60; padding-top: .5em;}
	.main-img {border: 1px solid #c1ae60; display: block; height: auto; margin: 0 0 1em 0; width: 100%;}
	.bios h3 + img {border: 1px solid #c1ae60; display: block; float: right; height: auto; margin: 0 0 .5em 1em; width: 50%;}
.cta {}
	.extras {}
		.resources:link, .resources:visited {color: #ffffff; display: block; float: right; margin-bottom: 50px; text-decoration: none; width: 100%;}
			.resources span {display: block; font-size: 1.8em; margin-bottom: 10px; text-transform: uppercase;}
		.contact-phone {color: #ffffff; display: block; position: absolute; right: 0; top: 0; text-decoration: none; width: 70%;}
			.phone strong {font-size: 1.2em;}
			.phone-number {display: block; font-size: 1.8em; margin-bottom: 10px;}
/* Helpers */
.zeroMargin_mobile {margin-left: 0;}
.hide_mobile {display: none !important;}
.access, #header {left: -9999px; position: absolute;}
.confirm h2 {color: #ffffff;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
	/* Basic */
	body {font-size: .625em;}	
	/* Layout */
	.wrap {clear: none; float: none; margin: auto; margin-left: auto; padding: 0; width: 950px;}
	.content {display: inline-block; font-size: 1.25em; padding-left: 40px; vertical-align: top; width: 230px;}
		.logo {background-position: center 15px; background-size: auto; float: none; height: 220px; margin: 0; width: 100%;}
		.facebook .public {height: auto; margin-top: 0; overflow: visible; padding-top: 85px;}
			.facebook a:link, .facebook a:visited {color: #ffffff;}
				.facebook a:hover, .facebook a:focus {color: #c1ae60;}
	.events, .bios {display: inline-block; padding: 60px 50px 0 50px; vertical-align: top; width: 370px;}
		.events article {border-bottom: 1px solid #908662; margin-bottom: 2em;}
			.events article h3 {font-size: 1.5em; font-weight: normal; margin: .5em 0 2em 0; text-transform: none;}
			.events article img {display: block; height: auto; width: 270px;}
	.cta {background: url("../img/bg-cta.png") left top no-repeat; display: inline-block; vertical-align: top; width: 350px;}
		.extras {float: right; margin: 30px 20px 30px 0; width: 115px;}
			.contact-phone {color: #ffffff; display: block; float: right; position: relative; right: auto; top: auto; text-decoration: none; width: 100%;}
				.phone strong {font-size: 1.2em;}
				.phone-number {font-size: 1.8em; margin-bottom: 10px;}
		.cta iframe {margin-top: 320px; width: 190px !important;}
	.citation {border-top: 1px solid #908662;}
		.citation p {display: inline-block; padding: 0 50px 0 280px; width: 600px;}
	.zeroMargin_tablet {margin-left: 0;}
	.hide_mobile {display: block !important;}
	.hide_tablet {display: none !important;}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
	/* Basic */
	body {background: #817753 url("../img/bg-body.png") center 10px no-repeat;}
	/* Layout */
	.content p {padding-left: 25px;}
	.facebook a {font-size: 1.5em;}
	.events {padding: 150px 50px 0 50px;}
	.fundraiser {background: url("../img/fundraiser-tshirt.png") left top no-repeat; height: 220px; margin-top: 20px; overflow: hidden; text-indent: 200%; white-space: nowrap; width: 100%;}
	.zeroMargin_desktop {margin-left: 0;}
	.hide_tablet {display: block !important;}
	.hide_desktop {display: none !important;}
}