@charset "UTF-8";

/* 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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	background:url(../images/bgrepeat.jpg) repeat #0f1a26;
	font-family:Helvetica, Arial, sans-serif;
	
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body, html
{    
    overflow-x: hidden;
}

/* scroller stuff */

#intro {
}

.nav_anchor {
	height: 0;
	margin: 0;
	padding: 0;
}

.nav {
	margin: 0;
	min-width: 100%;
	max-width: 1002px;
	height: 45px;
	color: #666666;
	font-weight: bold;
	z-index: 100;
}

 


/* top */
#topBar {
	background-color: #333333;
	color: #ffffff;
	height: 32px;
	margin: 0;
	width: 100%;
	overflow-x: hidden;
	border-bottom: dotted 1px #666666;

}
  #topContent {
	  max-width: 1002px;
	  height: 32px;
	  margin:0 auto;
  }
	#pandoraLogo {
		width: 108px;
		height: 23px;
		float:left;
	}
	#facebookSocial {
		width: 92px;
		height: 26px;
		float:right;
		overflow:hidden;
		margin-top:6px;
	} 
	#googleSocial {
		width: 83px;
		height: 26px;
		float:right;
		margin-top:3px;
	}  
	#twitterSocial {
		width: 90px;
		height: 26px;
		float:right;
		margin-top:5px;
	} 


/* main */
#wrapper {
	margin:0 auto;
	max-width: 1002px;
	background: #ffffff;	
}

  #topMain {
	  margin: 0;
	  max-width: 1002px;
	  height: 158px;
	  background: url(../images/headbg_gray.jpg) repeat-x;
	  border-left: solid 1px #acb2b8;
	  border-right: solid 1px #acb2b8;
	  border-bottom: dotted 1px #333333;	
  }
  
	#pandoraHand {
		margin: 0;
		width: 113px;
		height: 137px;
		float: left;
		margin: 10px 0 0 30px;
	}
	
	#middleLogo {
		width: 254px;
		height: 56px;
		position: absolute;
		top: 90px;
		left: 50%;
		margin-left: -127px;

	}	
	
	#topMainRight {
		margin: 0;
		width: 152px;
		height: 158px;
		float: right;
		border-left: dotted 1px #6f757a;	
	}
	  #topDate {
		  margin: 0;
		  width: 152px;
		  height: 87px;
		  float: left;
		  border-bottom: dotted 1px #6f757a;	
	  }
	  #topLocation {
		  margin: 0;
		  width: 152px;
		  height: 71px;
		  float: left;
	  }
	  


  #topBlue {
	  margin: 0;
	  max-width: 1002px;
	  height: 244px;
	  background: url(../images/headbg_blue.jpg) repeat;
	  border-left: solid 1px #acb2b8;
	  border-right: solid 1px #acb2b8;
  }
  
	#discoverDen {
		position: absolute;
		top: 220px;
		left: 50%;
		margin-left: -386px;
		padding-bottom: 10px;
		width: 771px;
		height: 64px;
		background:url(../images/discover_big.png) top center no-repeat;
		border-bottom: dotted 2px #2a7cab;	
	}    
	
	#discoverTxt {
		position: absolute;
		top: 302px;
		left: 50%;
		margin-left: -386px;
		width: 771px;
		height: 69px;
		font-size: 23px;
		line-height: 28px;
		color: #97d1f1;
	} 
	#discoverTxtMobile {
		display: none;
	} 		
	
	#topBlueEmpty {
		max-width: 1002px;
		height: 176px;
	}	
		
	#topBlueBottom {
		max-width: 1002px;
		height: 71px;
		
	}	   	
  
	  #topBlueLeft {
		  width: 180px;
		  height: 24px;
		  float: left;
		  color: #ffffff;
		  font-size: 10px;
		  font-weight: bold;
		  margin: 38px 0 0 10px;
	  }	   	
	
	  #topBlueRight {
		  /*width: 450px;*/
		  height: 55px;
		  float: right;
	  }	   	
      
  
  #topHoriz {
	  margin: 0;
	  max-width: 1002px;
	  height: 34px;
	  background: url(../images/horiz.gif) top left repeat-x;
	  border-left: solid 1px #acb2b8;
	  border-right: solid 1px #acb2b8;
	  border-bottom: dotted 2px #666666;  	
  }  
  
  #navBox {
	  margin: 0;
	  max-width: 1000px;
	  height: 45px;
	  background: url(../images/grad_bg_gray.jpg) top left repeat-x;
	  border-left: solid 1px #acb2b8;
	  border-right: solid 1px #acb2b8;
	  border-bottom: dotted 2px #666666;	
	  font-size: 20px;
	  color: #666666;
	  font-weight: bold;
  }  
  
  #leftNav {
	  margin: 6px 0 0 0;
	  text-align:center;
	  width: 25%;
	  height: 32px;
	  border-right: dotted 2px #666666;	
	  float: left;
  } 
  #rightNav {
	  margin: 6px 0 0 0;
	  text-align:center;
	  width: 23%;
	  height: 32px;
	  float: left;
  }     
  
  #leftNav a, #rightNav a {
	  padding-top: 7px;
	  display: block;
	  color: #666666;
	  text-decoration:none;
  } 
  
  #dotRow {
	  margin: 0;
	  max-width: 1002px;
	  height: 20px;
	  border-left: solid 1px #acb2b8;
	  border-right: solid 1px #acb2b8;		  
	  border-bottom: dotted 2px #666666;	
	  display: block;
  } 
  
  #dateRow {
	  margin: 0;
	  max-width: 1002px;
	  height: 28px;
	  border-left: solid 1px #acb2b8;
	  border-right: solid 1px #acb2b8;		  
	  border-bottom: dotted 2px #666666;	
	  color: #858585;
	  font-weight: bold;
	  text-align:left;
  }        
  
  #dateRow p {
	  padding: 7px 0 0 22px;
  }   
  
  #bandWrapper {
	  margin: 0;
	  padding: 0;
	  max-width: 1002px;
	  border-left: solid 1px #acb2b8;
	  border-right: solid 1px #acb2b8; 
  } 
  
  
	.bandBox {
		margin: 0;
		padding: 23px 13px 0 10px;
		width: 300px;
		height: 350px;
		vertical-align: top;
		display: inline-block;
		text-align:left;		
	}    
  
	.bandBoxNormal {
		margin: 0;
		padding: 0;
		width: 300px;
		height: 350px;
		position: absolute;
	
	}
	.bandBoxNormal p {
		font-size: 18px;
		font-weight: bold;
		display:block;
		padding-top: 5px;
	} 
	
	
	.bandBoxOverlay {
		margin: 0;
		padding: 0;
		width: 300px;
		height: 300px;
		position: absolute;
		background-color:rgba(8,26,39,0.9);
		display: none;
		color: #ffffff;
	
	}	
		
	.bandBox:hover .bandBoxOverlay {
		display: block;
	} 
		
	.bandBoxTop {
		width: 290px;
		height: 165px;
		margin: 15px 0 0 10px;
	}
	
	.bandBoxBot {
		width: 290px;
		height: 100px;
		margin: 0 0 0 10px;
	}	

	  .bandBoxBtn {
		  width: 50%;
		  height: 100px;
		  float:left;
	  }	
	
	  .bandBoxBtn p {
		  font-size: 12px;
		  font-weight: bold;
		  color: #ffffff;
		  display: block;
		  padding-bottom: 7px;
	  }	
		
		
	.bandBoxOverlay h1 {
		font-size: 20px;
		font-weight: bold;
		display: block;
		padding-bottom: 3px;
	}
	
	.bandBoxOverlay h2 {
		font-size: 16px;
		font-style: italic;
		display: block;
		padding-bottom: 3px;
	}
	
	.bandBoxOverlay h5 {
		font-size: 14px;
		font-style: italic;
		display: block;
		padding-bottom: 15px;
	}
		
	.bandBoxOverlay h3 {
		font-size: 13px;
		color: #cccccc;
		display: block;
		padding: 0 10px 10px 0;
	}
	
	.bandBoxOverlay h4 {
		font-size: 14px;
		font-weight: bold;
		display: block;
	}	
	
	
	#topMobileRight, #topBlueRightMobile {
		display: none;
	}				
	
/* @media */



@media (max-width: 790px) {

	#discoverDen {
		position: absolute;
		top: 220px;
		left: 50%;
		margin-left: -263px;
		padding-bottom: 10px;
		width: 526px;
		height: 44px;
		background:url(../images/discover_small.png) top center no-repeat;
		border-bottom: dotted 2px #2a7cab;	
	} 
		
	#discoverTxt {
		display: none;
	} 	 
	
	#discoverTxtMobile {
		display:block;
		position: absolute;
		top: 283px;
		left: 50%;
		margin-left: -263px;
		width: 526px;
		height: 40px;
		font-size: 22px;
		line-height: 30px;
		color: #97d1f1;
	} 	
	
	#topBlueLeft {
		width: 220px;
		height: 20px;
		position: absolute;
		top: 310px;
		left: 50%;
		margin-left: -80px;

	}
	
	.bandBox {
		margin: 0;
		padding: 15px 1px 0 1px;
	
	}    		
			
}	

@media (max-width: 640px)  { 


	
	#topBar {
		display:none;
	}
	
	#discoverDen {
		top: 177px;
		left: 320px;
	} 	
	
	#discoverTxtMobile {
		top: 237px;
		left: 320px;
		font-size: 22px;
		line-height: 30px;
		padding-left: 10px;
	} 

	#topBlueLeft {
		width: 220px;
		height: 20px;
		position: absolute;
		top: 284px;
		left: 300px;
		font-size: 14px;
	}		
	
	#topBlueRight {
		display:none;
	}	
	
	#middleLogo {
		width: 254px;
		height: 56px;
		position: absolute;
		top: 60px;
		left: 320px;
	}	
	
	#topMainRight {
		display: none;
	}
	
	#topMobileRight {
		display: block;
		width: 164px;
		height: 60px;
		float: right;
	}
	
	#mobileFb {
		float: left;
		margin-right: 10px;
	}	
	
	#mobileTw {
		float: left;
	}	
	
	#topBlueRightMobile {
		display: block;
		width: 640px;
		height: 101px;
		/*float: left;*/
		position: absolute;
		right: 0;
		margin-top: 8px;		
	}
	
	#topBlue {
		width: 640px;
		height: 285px;	
	}
	
	.bandBox {
		margin: 0;
		padding: 15px 1px 0 1px;
	} 
	
	.bandBox:hover .bandBoxOverlay {
		display: none;
	} 	
	
/* kill max-widths */

  #navBox, #wrapper {
	  width: 640px;
  }  
  

/* mobile */  
.station.feature {
	width: 250px;
	float: left;
	margin: 0 0.3em 1.5em;
}

.station {
	vertical-align: top;
	display: inline-block;
	margin: 0.35em;
	
	zoom: 1;
	*display:inline;
}

.stationOverlayHolder {
	position: relative;
}

.stationOverlay {
	background: rgb(0, 0, 0); /* The Fallback */
	background-color: rgba(0, 0, 0, 0.75); 
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	opacity: 0;
	filter: alpha(opacity = 0);
}

.stationOverlay h2 {
	margin-left: 62px;
	color: #fff;
	font-weight: bold;
	margin-top: .75em;
	margin-bottom: .25em;
	display: none;
}

.stationOverlay.active {
	opacity: 1;
	filter: alpha(opacity = 100);
}

.stationOverlay p {
	position: absolute;
	bottom: 0;
	color: #fff;
	margin: 1.5em;
	font-size: .75em;
	text-align: left;

	/*maybe*/
	max-height: 8.75em;
}



/* mobile slide up */
 

	.infoBox .play1 {
		bottom: 5%;
		left: 20px;
		position: absolute;
	}
	.infoBox .play2 {
		bottom: 5%;
		right: 40px;
		position: absolute;
	}	

	.infoBox h6 {
		margin: 20px 0 0 20px;
		font-size:25px;
		font-weight: bold;
		width: 640px;
		float:left;
	}

	.infoBox h7 {
		margin: 5px 0 0 20px;
		width: 640px;
		font-size:20px;
		font-style:italic;
		float:left;
	}
	.infoBox h8 {
		margin: 5px 0 0 20px;
		width: 640px;
		font-size:20px;
		float:left;
	}	

	.infoBox h9 {
		margin: 5px 0 0 20px;
		width: 580px;
		font-size:16px;
		float:left;
	}	


	.infoBox h12 {
		margin: 0 0 0 5px;
		width: 640px;
		font-size:16px;
		position: absolute;
		bottom:36%;
		left: 14px;
	}	
	
	.infoBox h13 {
	
		position:absolute;
		font-size:16px;
		font-weight: bold;
		position: absolute;
		bottom:100px;
		left: 20px;
	}	
	
	.infoBox h14 {
	
		position:absolute;
		font-size:16px;
		font-weight: bold;
		position: absolute;
		bottom:100px;
		left: 325px;
	}			

	.infoBox h2 {
		margin-left: 62px;
		color: #fff;
		font-weight: bold;
		margin-top: .75em;
		margin-bottom: .25em;
		display: none;
	}

	.infoBox.active {
		opacity: 1;
	}

	.infoBox p {
		bottom: 0;
		color: #fff;
		margin-left: 60px;
		margin-right: 10px;
		margin-bottom: 10px;
		/*font-size: .75em;*/
		font-size: 10px;
		text-align: left;
	}

 


	.infoBox {
		color:#ffffff;
		width: 640px;
		background-color: rgba(8, 26, 39, 0.75); 
		position: fixed;
		z-index: 100;

		bottom: 0;
		left: 0;
		height: 350px;
		text-align: left;

		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
	}

	.infoBox.up {
		-webkit-transition-duration: 500ms;
		z-index: 200;
	}


	.stationAlbumScreen {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

/*	.stationAlbumScreen.active {
		-webkit-box-shadow: inset 0px 0px 40px 10px rgba(255, 255, 255, .5), inset 0px 0px 0px 4px rgba(0, 0, 0, 1);
        box-shadow: inset 0px 0px 40px 10px rgba(255, 255, 255, .5), inset 0px 0px 0px 4px rgba(0, 0, 0, 1);
	}*/





.station img {
    width: 100%;
   	height: auto;
}

.stationOverlay img {
	margin-top: 2em;
	width: 30%;
}
	   	

/* mobile overlay */
	.bandBoxTop {
		width: 640px;
		height: 165px;
		margin: 15px 0 0 10px;
	}
	
	.bandBoxBot {
		width: 640px;
		height: 100px;
		margin: 15px 0 0 10px;
	}	

	  .bandBoxBtn {
		  width: 50%;
		  height: 100px;
		  float:left;
	  }	
	
	  .bandBoxBtn p {
		  font-size: 14px;
		  font-weight: bold;
		  color: #ffffff;
		  display: block;
		  padding-bottom: 7px;
	  }	


  	
}