@import url(reset.css);
@import url(typography.css);
@import url(h-nav2.css);


/*-------------------layout-------------------*/

body{background: #bdd8ed url(images/background.jpg) repeat top center fixed;}


body{
min-width:780px;/* for mozilla*/
width:100%;
}
#fullpage{
width:780px;
position:relative;
margin: 0 auto;
}

div#header{
background: url(images/banner.png) top left no-repeat;
height:326px;
text-indent:-9999px;
margin:0 0 0 -92px;
}

div#container{
position:relative;
width:800px;
top:50px;
clear:both;
}
div#content{
position:relative;
width:420px;
float:left;
margin:0 25px 0 0;
}
div#content.bigContent{
width:576px;
}
div#container.wideContainer{
width:840px;
}

div#bannerpic{
position:absolute;
top:86px;
left:134px;
height:248px;
width:517px;
overflow:hidden;

}
div#sidebar{
	width:208px;
	float:left;
	margin-right:12px;
}

div#brief{
	width:193px;
	height:189px;
	left:0px;
	background: url(images/at-a-glance.gif) no-repeat bottom left #5078b7;
	padding: 28px 3px 7px 7px;
	-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	-webkit-box-shadow:2px 2px 4px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	margin-bottom:18px;
	border:1px solid #2A3592;
}

div#mailinglist{
	width:204px;
	margin:0;
}

div#sponsors{
background: url(images/footer-sponsors.png) top right no-repeat;
position:relative;
left:208px;
width:588px;
height:150px;
margin:36px 0 0 0;
padding-bottom:9px;
clear:both;
}


a.foot-link{
display: block;
text-indent: -9999px;
width:90px;
margin-right:10px;
height:74px;
display:inline-block;
vertical-align:top;
zoom:1;
*display:inline;	
}
a.foot-link.big{width:100%;height:100px;}
a.foot-link.rock{width:106px;}
a.foot-link.coke{width:74px;}
a.foot-link.hersheys{width:68px;}
a.foot-link.pa{width:60px;}
a.foot-link.hersheys{width:68px;}
a.foot-link.ag{width:76px;margin-right:0;}

#links{
float:left;
margin:50px 0 0 0px;
width:114px;
z-index:1;

}
h1 a.guitar{
width:320px;
height:361px;
position:absolute;
top:0px;
right:0;
margin-right:-149px;
background:url(images/guitar1.png) bottom left;
text-indent:-800px;
display:block;
overflow:hidden;
z-index:100;
}


div.logo{
width:210px;
height:270px;
position:absolute;
top:10px;
left:-90px;
z-index:500;
}
.homepage div.logo{
width:280px;
height:150px;
position:absolute;
top:10px;
left:-10px;
z-index:500;
}
div.logo a{
width:100%;
height:100%;
display:block;
}
#gallery{
position:absolute;
left:0px;
top:0px;
width:517px;
height:248px;
list-style:none;
overflow:hidden;
padding:0;
margin:0;
}
div.thirtyfive{
	width:134px;
	height:103px;
	position: absolute;
	top:67px;
	left:109px;
	z-index: 500;
	background: url(images/35.png) top left no-repeat;
}
#countdown{
position:absolute;
left:146px;
top:324px;
width:510px;
margin:0;
padding:0;
border:0;
z-index:101;
}


#countdown img{
margin: 0 10px 0 1px;
}
.countdown0, .countdown1, .countdown2, .countdown3, .countdown4, .countdown5, .countdown6, .countdown7, .countdown8, .countdown9{
width: 10px; height:24px; background:url(images/numberstrip-2.png) top left no-repeat;margin-right:2px;
}

 div#countdown img, div#countdown div{display:block; float:left; }
.countdown0{background-position: -114px 0px; }
.countdown1{background-position: 0px 0px;width:9px;}
.countdown2{background-position: -12px 0px;width:12px;}
.countdown3{background-position: -25px 0px;width:12px}
.countdown4{background-position: -37px 0px;}
.countdown5{background-position: -50px 0px;}
.countdown6{background-position: -63px 0px;}
.countdown7{background-position: -76px 0px;}
.countdown8{background-position: -89px 0px;width:12px;}
.countdown9{background-position: -101px 0px;width:12px;}


#registerNow{
width:207px;
height:29px;
background:url(images/Register.png) top left;
margin-left:10px;
z-index:101;
}
#registerNow:hover{
background:url(images/Register.png) bottom left;
}
#registerNow a{
display:block;
width:100%;
height:100%;
text-indent:-2999px;
z-index:101;
}
.results{
width: 560px;
}



/*-------------------UI elements-------------------*/

.clearit{
clear:both;
width:0px;
height:0px;
}


/*------------------- homepage elements -------------------*/

.homepage div#header{
background: url(images/home-masthead.png) no-repeat top left;
height:464px;
margin:0 0 0 -82px;
position: relative;
}
.homepage div#bannerpic{
	top:227px;
	left:134px;
}

.homepage ul#navigation{
	top:513px;
}

.homepage #countdown{
top:466px;
left:144px;
}

.homepage div#brief{
top:615px;
}

.homepage div#mailinglist{
	top:855px;
}

.homepage div#container{
top:74px;
}

.homepage h1 a.guitar{
width:320px;
height:430px;
top:0px;
right:0;
margin-right:-150px;
background: url(images/guitar-home.png) top left no-repeat;
z-index:100;
}

.swirl1{
width:275px;
height:59px;
position:absolute;
top:0px;
left:397px;
background:url(images/cloud.png) no-repeat top left;
}
.swirl2{
width:278px;
height:188px;
position:absolute;
top:310px;
right:0;
margin-right:-140px;
background:url(images/swirl-2.png) no-repeat top left;
}

.social{margin-top:22px;}

.social img{
float:left;
margin:4px 6px 0 0;
}



.alternate2{
background:#c2d5e8;
}
table ol{
margin: 0 6px 0 20px;
}
tr.alternate, .alternate, .alternate50{
background: #d5e6f2;
}
.alternate50{
width:50%;
background: #d5e6f2;
}

.alternate50-2{
width:50%; 
background:#c2d5e8;
}

.alternate33{
width:33%;
background: #c2d5e8;
}

.alternate33-2{
width:33%; 
background:#d5e6f2;
}

tr.tabletop, .tabletop, .tabletop p{
background: #5078b7;
color:#FFF;
}

#twitter_div{border-left:1px solid #aec9e2;padding-left:6px;}
#twitter_div span{
font-size:11px;
color:#888;
}
#twitter_div h6{
font-size:12px;
}
.iframe{
	width: 205px; 
	height: 265px;
	margin-top:18px;
}
.hide{
	display: none;
}

.fieldWrap{
	background: #E7E5E5;
	border:1px solid #bbb;
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:3px;
	padding:3px 0 3px 3px;
	margin:4px 0 0 0;
}
.fieldWrap input.mailfield{
	background: none transparent;
	border:0 none;
	font: 13px/24px sans-serif;
	color:#666;
	width:124px;	
}
}
.fieldWrap input.mailfield:focus{
	outline: 0 none;
}
.button{
	background: url(images/button.gif)  repeat-x top left;
	font: bold 13px/24px sans-serif;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:3px;
	padding:0 10px;
	border:1px solid #8b0303;
	color:#fff;
	cursor: pointer;
}
.button:hover{
	background: url(images/button.gif)  repeat-x 0 -46px;
}

.sponsors{
list-style:none;
margin:10px 0;
padding:10px 0;
background:#fff;
text-align: center;
}
.sponsors.charities{background-color:transparent;}

.sponsors li{
    display:inline-block;
    vertical-align:middle;
    zoom:1;
    *display:inline;
    width:160px;
    margin:10px 10px;
    position: relative;
}
.sponsors li img{
    max-width:100%;
}
.sponsors p{
    color:#EE3A43;
    margin:6px 0;
}

/*---tooltip styles---*/
.hidden-box{
    display: none;
    position: absolute;
    top:10px;
    left:140px;
    z-index: 3000;
    width:300px;
    height:auto;
    background:#e0edf6;
    box-shadow:1px 1px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:1px 1px 4px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:1px 1px 4px rgba(0, 0, 0, 0.2);
	border:1px solid #999;
}
.hidden-box p, .hidden-box h4{
margin:10px; color:#333; text-align:left; opacity:1.0;
}
.hidden-box h4{color:#EE3A43;}

/* Mobile/Browser */
@media only screen and (max-width: 560px) {
	html{
		min-height:100%;
		height:auto;
	}
	
	html body{
	background: #fff url(images/background-mob.jpg) no-repeat top left scroll;
	-webkit-text-size-adjust: none;
	min-height:100%;
	height:auto;
	}
	img{
		max-width: 100%;
	}
	#fullpage{
		width:auto;
		margin:0 10px;
	}
	div#header, .homepage div#header{
		background: url(images/mobile-head-sm.png) top center no-repeat scroll;
		width:auto;
		height:153px;
		margin:0;
	}
	div.logo, .homepage div.logo{
		height:140px;
		left:0;
		
	}
	div#sponsors{
		width:auto;
		left:0;
	}
	body, div#sidebar, div#content, div#container, ul#navigation, .homepage ul#navigation, .homepage div#container, div.results{
		width:auto;
		min-width:0;
		margin:0;
		top:auto;
	}
	div#container{
		top:0;
	}
	h1 a.guitar, .thirtyfive, div#countdown, .homepage div#countdown, .homepage h1 a.guitar{
		display: none;
	}
	div#bannerpic, .homepage div#bannerpic{
		display:none;
		/*left:0;
		top:0;
		width:auto;
		position: relative;
		margin-top:10px;
		height:120px;	*/
			
	}
	div#bannerpic #gallery{
		width:auto;
	}
	ul#navigation, .homepage ul#navigation{
		position: static;
		width:100%;
		-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		margin:18px 0;
	}
	
	ul#navigation ul{
		position: static;
		width:100%;
		display: none;
		border:0 none;
		border-top: 1px solid #680b0f;
	}
	ul#navigation li{
		width:100%;
		float:none;
		border:0 none;
		position: relative;
		background: #9B1118;
		border-bottom: 1px solid #680b0f;
	}
	ul#navigation li li{
		background: #b9595e;
	}
		ul#navigation li li li{
		background: #cd888c;
	}
	ul#navigation li a{
		display: block;
		padding:10px;
		border:0 none;
		color:#fff;
		font-size:16px;
	}
	ul#navigation li a:hover{
		background: none transparent;
	}
	ul#navigation li li a{
		padding-left:20px;
	}
	ul#navigation li li li a{
		padding-left:40px;
	}
	ul#navigation li a.withArrow{
		margin-right:40px;
	}
	img.arrow{
		position: absolute;
		top:2px;
		right:2px;	
	}
	#sponsors p, div#mailinglist, .homepage div#mailingList{
		width:auto;
	}
	div#sidebar{
		width:100%;
	}
	div#brief, .homepage div#brief{
		width:auto;
		background: url(images/at-a-glance-sm.png) bottom right no-repeat #5078b7;
		height:auto;
		padding:7px;
	}
	ul#navigation li a.arrow{
		display: block;
		position: absolute;
		top:2px;
		right:2px;
		height:29px;
		width:29px;
		background: url(images/arrow.png) top left no-repeat transparent;
		padding:0;
		cursor: pointer;
	}
	ul#navigation li a.arrow.down{
		background: url(images/arrow.png) 0px -33px no-repeat transparent;		
	}
	.iframe{
		width: auto; 
		height:210px;
	}
	div#registerNow.hide{
		display: block;
		float:none;
		margin:9px auto 0;
	}
	.fieldWrap input.mailfield{
		width:220px;
	}
	div#sponsors{
	background-size:100% auto;
	
	}
	a.foot-link.rock{width:125px;}
	a.foot-link.coke{width:65px;margin-right:0;}
	a.foot-link.hersheys{margin-right:0;width:78px;}
	a.foot-link.asics{width:125px;margin-right:0;}
	
}


/* Mobile Landscape/Browser */
@media only screen and (min-width: 480px) and (max-width: 560px) {
	.fieldWrap input.mailfield{
		width:380px;
	}
	a.foot-link.hersheys{margin-right:0;width:140px;}

	.iframe{
		width: 460px; 
	}

	
}