/* Reset */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#FFFFFF; font-size: 13px; color: #666666; font-family: Helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}	
h2 { font-size: 1.4em; margin-bottom: 6px; color: #444444;}	
a, img { outline: none; border: none; color: rgba(0, 84, 34, 0.58); }
p { margin: 0 0 10px; line-height: 1.1em; font-size: 1.0em; }
img { display: block; margin-bottom: 5px; margin-top: 3px; }

	header img {
		margin-left: auto;
		margin-right: auto;
	}
	
/* iframe resizing code taken from */
/* http://stackoverflow.com/questions/12676725/responsive-iframe-google-maps-and-weird-resizing */
/*
	.iframe-rwd  {
		position: relative;
		padding-bottom: 65.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
*/

	.iframe-rwd  {
		position: relative;
		padding-bottom: 56.25%;		/* padding percent is the video aspect ratio */
		height: 0;
		overflow: hidden;
	}
				
	.iframe-rwd iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	#title {
		margin-top: 1%;
		text-align: center;
		font-size: 1.9em;
		line-height: 2.0em;
		color: #111111;
	}
	
	#titleTight {
		text-align: center;
		font-size: 1.7em;
		color: #111111;
	}
	
	#bigTitle {
		text-align: center;
		font-size: 2.3em;
		line-height: 1.5em;
		margin-bottom: 2%;
		color: #111111;
	}
	
	#mediumTitle {
		text-align: center;
		font-size: 1.4em;
		line-height: 1.5em;
		color: #111111;
	}
	
	#smallTitle {
		text-align: center;
		font-size: 1.2em;
		line-height: 1.4em;
	}
	
	#leftPhoto {
		float:left;
		width:300px;
	}
	#rightText {
		text-align: left;
		margin-left: 310px;
	}
	
	#rightPhoto {
		float:right;
		width:300px;
	}
	
	#leftText {
		text-align: right;
		margin-right: 310px;
	}
	
	#middleText {
		text-align: justify;
		font-size: 1.0em;
		color: #111111;
	}
	
	#middleTextHeading {
		text-align: justify;
		font-weight:bold;
		font-size: 1.3em;
	}

	
	#summary {
		font-size: 24px;
		margin: 10px;
		text-align: center;
	}
		
	#thanks {
		font-size: 0.85em; 
	}
	
	#center {
		margin-left: auto;
		margin-right: auto
	}

	#space {
		clear:both;
		padding: 10px
	}
	
	#wrapper {
		width: 96%;	
		max-width: 760px;
		margin: auto;
		padding: 2%;
	} 

	#skipTo {
		display: none;
	}

	/* Banner */			
	#banner {
		width: 100%;
	}

	#banner img {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}

	#ridePage {
		width: 94%;	
		max-width: 600px;
		margin: auto;
		padding: 3%;
	} 
	
	
/* reponsive table code from */
/* http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/ */

    #templateColumns table {
		height: 240px;
	}
	
/* Media Queries */

@media screen and (max-width: 620px) 
{	
	#templateColumns {
		width:100% !important;
	}

	.templateColumnContainer {
		display:block !important;
		width:100% !important;
	}
	
	#templateColumns table {
		height: 170px;
	}
/*	
	#templateColumns img {
		margin-left: auto;
		margin-right: auto;
	}
*/
	#BoB {
		display: none;
	}

	#banner img {
		width: 100%;
		height: auto;
	}

	#skipTo {
		display: block;
	}
		
	#leftPhoto, #rightPhoto {
		width: auto;
		height: auto;
		float: left;
	}
		
	#leftPhoto img, #rightPhoto img {
		width: 100%; 
		max-width: auto;
		height: auto;
	}

	#leftText, #rightText {
		width: 100%;
		float: left;
		text-align: left;
		margin-left: 0px;
		margin-right: 0px;
	}
	
	#leftText h2, #rightText h2 {
		font-size: 1.5em;
	}
	
	#leftText p, #rightText p {
		font-size: 1.1em;
		line-height: 1.2em;
	}
	
	#middleText {
		font-size: 1.1em;
		line-height: 1.4em;
		text-align: left;
	}
	
	#middleTextHeading {
		text-align: left;
	}

	#bigTitle {
		font-size: 1.8em;
		line-height: 1.5em;
	}

	#title {
		font-size: 1.7em;
		line-height: 1.4em;
		padding-top: 1%;
	}
	
	#titleTight {
		font-size: 1.4em;
	}

	#mediumTitle {
		font-size: 1.3em;
	}

	#smallTitle {
		line-height: 1.5em;
	}
	
	#thanks {
		font-size: 0.95em; 
		line-height: 1.25em;
	}
	
	header nav li {
		background: #EEEEEE;
		display: block;
	}

	header nav a {
		display: block;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 16px;
	}	
}

/* For legacy iPhone */

@media screen and (max-width: 320px) 
{
	#leftPhoto img, #rightPhoto img {
		max-width: 300px;
		height: auto;
	}
}