/*------------------------------------------------- Global Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	}

/*------------------------------------------------- Document Setup */

html, body { margin: 0; padding: 0; }

body {
		font-size: 62.5%;
		font-family: Helvetica, Tahoma, Arial, sans-serif;
		color: #695a42;
		}


/*------------------------------------------------- Structure & Layout */

#topStripe { width: 100%; height: 4px; background: #b75531; }
	
div#header { width: 100%; background: url(../assets/darkBG.jpg) repeat; }
div#headerWrapper { width: 940px; margin: 0 auto; }

div#hourStrip { width: 100%; background: url(../assets/blueBG.jpg) repeat; }
div#hourStripWrapper { width: 940px; margin: 0 auto; height: 215px; }

div#mainContent { width: 100%; background: url(../assets/lightBG.jpg) repeat; }
div#mainContentWrapper { width: 940px; margin: 0 auto; }

div#footer { width: 100%; background: url(../assets/darkBG.jpg) repeat; }
div#footerWrapper { width: 940px; margin: 0 auto; padding: 60px 0 0 0; }
div.one-third { width: 300px; margin-left: 20px; float: left; }
div#footerContent { width: 960px; margin: 20px 0 120px -20px; }

div#subfooter { width: 100%; background: url(../assets/lightBG.jpg) repeat; }
div#subfooterWrapper { width: 700px; margin: 0 auto; padding-top: 80px; padding-bottom: 200px; }
div#subfooterContent { margin-left: -20px; }
div.one-quarter { width: 220px; margin-left: 20px; float: left; }
div#subfooterContent div.one-quarter p { text-align: center; font-size: 12px; }

/*------------------------------------------------- Header & Blue-"Hour" Strip */

div#headerWrapper h1#titleText {
	width: 671px; 
	height: 59px; 
	float: left;  
	margin: 70px 0 50px 0;
	background: url(../assets/ZURBwired2009.png) no-repeat;
	text-indent: -9999px;
	} 
	
div#headerWrapper img#attributionText {float: right;  margin-top: 75px;}
div#headerWrapper a img { border: none; }
img#chicken { float: right; margin: -40px 0 0 0;}

div#hourStripWrapper img#hourText { margin: 40px 0 0 0; }
div#hourStripWrapper h3 { 
	color: white; 
	font-size: 2.2em; 
	font-weight: normal; 
	line-height: 1.5em; 
	width: 700px;
	margin: 10px 0 30px 0;
	}
	
#hourText { position: relative; z-index:30; }



/*------------------------------------------------- Connectors (These maintain the differences between entries)*/
/* All Connectors are currently uniform under these heights */
.connector.first { background: url(../assets/connector.png) repeat-y; height: 280px; }
.vertline.first { background: url(../assets/vertline.png) repeat-y; height: 230px; }
.connector.second { background: url(../assets/connector2.png) repeat-y; height: 280px; }
.vertline.second { background: url(../assets/vertline2.png) repeat-y; height: 230px; }

.horzlineLtoR { height: 60px; float: left; width: 940px; background: url(../assets/horzlineLtoR.png); }
.horzlineRtoL{ height: 60px; float: left; width: 940px; background: url(../assets/horzlineRtoL.png); }


/*------------------------------------------------- Main Content Section*/

img#readySetGo { margin: 10px 0 35px 0; }

.entry { float: left; margin: 0 0 0 0; }

.time-stamp {float: left; width: 143px; }
.time-content-wrapper { float: left; width: 797px; }
.time-content-media img { 
	border: 10px solid #fff;
	-webkit-border-image: url(../assets/imageBG.png) 10 10 10 10 round;
	-moz-border-image: url(../assets/imageBG.png) 10 10 10 10 round;
	border-image: url(../assets/imageBG.png) 10 10 10 10 round; 
	-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	margin: 0 0 0 25px;
	float: left;
	}
	
.time-content-media object { 
	margin: 0 0 0 25px;
	float: left;
	padding: 4px; 
	border: 1px solid #cbbfaa; 
	}
	
/*used to keep looking good in IE7*/	
.object-container { overflow: hidden; float: left; }
	
.time-content-media img.rleft { 
	rotation: -2deg;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	}
	
.time-content-media img.rright { 
	rotation: 2deg;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	}
	
.time-content-media img.final { 
	margin: 0 20px 0 0;
	}


.time-content-text-subcontent { width: 300px; margin-top: 20px; }
.time-content-text-subcontent a { position: relative; display: block; }
.time-content-text { float: left; width: 300px; margin: 0 0 0 40px;  }
.time-content-text img { 
	float: left; 
	width: 90px; 
	height: 90px; 
	border: 5px solid #fff; 
	margin: 0 10px 0 0 ; 
	-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	}

.time-content-text.final { float: left; width: 320px; }
.time-content-wrapper.final { float: left; width: 940px; margin-bottom: 100px; }

.time-content-text img.play-btn {
	margin: 30px 0 0 -80px;
	float: none;
	border: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	width: auto; 
	height: auto;
	position: absolute;
	-webkit-transition: opacity .5s ease-in;
	}
	

/*Safari and Chrome hack for play btn*/
@media screen and (-webkit-min-device-pixel-ratio:0){
	.time-content-text img.play-btn { margin: 30px 0 0 30px; }
	}

.eight-am-banner { margin: 30px 0 30px 0; }

/*---- Header & Text Handling ----*/
h4 { color: #473f2e; font-size: 2.2em; margin-bottom: 4px; }
h4#partners { text-align: center; }
h5 { color: #9a8f7a; font-size: 1.6em; margin-bottom: 4px; }
h6 { font-size: 1.4em; font-weight: bold; }
a:link img.play-btn, 
a:visited img.play-btn { 
	opacity: .7;
	-moz-opacity: .7; 
	-webkit-opacity: .7; 
	 }
a:hover img.play-btn, 
a:focus img.play-btn { opacity: 1; }
a:link h6, 
a:visited h6,
a:link, 
a:visited { color: #695a42; text-decoration: none; border: none; }
a:hover h6, 
a:focus h6,
a:hover, 
a:focus { color: #473f2e; text-decoration: none; border: none; }
p { margin-top: 10px; font-size: 1.5em; line-height: 1.6em; }
div.time-content-text-subcontent p { font-size: 1.3em; line-height: 1.4em; margin-top: 4px;}

/*------------------------------------------------- Footer Goodies*/

.one-quarter img {
	width: 210px; 
	height: 75px; 
	border: 3px solid #fff;  
	-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	}
	
.one-third img {
	margin-top: 15px;
	border: 5px solid #fff;
	-webkit-border-image: url(../assets/imageBG.png) 5 5 5 5 round;
	-moz-border-image: url(../assets/imageBG.png) 5 5 5 5 round;
	border-image: url(../assets/imageBG.png) 5 5 5 5 round; 
	-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
	}


/*------------------------------------------------- Randomly Placed Mood Images*/
img#pie { 
	position: absolute; 
	margin: -100px 0 0 -800px;
	z-index:3; 
	rotation: 10deg;
	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	}
img#chicken_shadow { position: absolute; margin: 0 0 0 -45px; }
img#pie_shadow { position: absolute; margin: 130px 0 0 -65px; z-index: 0; }
img#flower_shadow { 
	position: absolute; 
	border: none; 
	margin: -100px 0 0 -250px; 
	border: none; 
	-webkit-border-image: none; 
	-moz-border-image: none; 
	border-image: none; 
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	}
img#chicken_shadow_small { position: absolute; margin: -120px 0 0 510px; }
img#start { position: absolute; margin: 10px 0 0 -4px; }
img#halfway{ position: absolute; margin: 5px 0 0 -4px; }
img#big_pie { margin-left: 180px;  margin-bottom: -48px; }
img#TFHours { position: absolute; margin: -80px 0 0 -140px; }

/*------------------------------------------------- Texture Tears*/
#darkTearTexture { 
	width: 100%; 
	height: 15px; 
	background: url(../assets/darkTearTexture.jpg) repeat-x;
	}
	
#blueTearTexture { 
	width: 100%; 
	height: 15px; 
	background: url(../assets/blueTearTexture.jpg) repeat-x;
	}
	
#lightTearTexture { 
	width: 100%; 
	height: 15px; 
	background: url(../assets/lightTearTexture.jpg) repeat-x;
	}
	
#footerTearTexture { 
	width: 100%; 
	height: 29px; 
	background: url(../assets/footerTear.png) repeat-x;
	margin-top: -29px; 
	}
	

/*------------------------------------------------- Float Clearing*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/*------------------------------------------------- Misc Goodies */

.left { float: left; }


.hidden  { display:none; }