/* ----------------
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: inherit;
	vertical-align: baseline;}
	
/* ----------------
END OF RESET
-----------------*/

body{
	background: #FFF url(../img/body-bg.png);
	font-family:Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	color: #000;}

p{
	line-height: 22px;}	
li{
	line-height: 22px;}

a{
	color: #CC3333;
	text-decoration: none;}

a:hover{
	text-decoration: underline;}

#all{
	width: 960px;
	margin: 0 auto;
	background: #FFF;
	border-left: 2px solid #CC3333;
	border-right: 2px solid #CC3333;}
	
#content{
	overflow: hidden;
	margin: 0;
	padding: 25px;
	height: 1%;}
	
/* ----------------
HEADER
-----------------*/

#globalnav{
	background: #FFF  url(../img/globalnav-bg.png);
	margin: 0;
	list-style-type: none;
	overflow: hidden;
	height: 46px;}

#globalnav a.ymcanorth{
	background: url(../img/ymcalogo.jpg) no-repeat;
	width: 162px;
	height: 46px;
	display: block;
	float: right;
	padding: 0 10px 0 0;}

#globalnav a.ymcanorth span{
	display: none;}

#globalnav li a.yradiolink{
	background: url(../img/yradiologo.gif);
	width: 121px;
	height: 31px;
	display: block;}

#globalnav li a.yradiolink span {
	display: none;}

#header h1{
	background: #222 url(../img/header-title.jpg);
	width: 960px;
	height: 320px;
	margin: 0;
	padding: 0;}

#header h1 span, #header-short h1 span{
	display: none;}

/* ----------------
END OF HEADER
-----------------*/

/* ----------------
NAVIGATION
-----------------*/

#nav{
	border-top: 2px #D14848 solid;
	border-bottom: 3px #000 solid;
	overflow: hidden;
	height: 1%;
	background: #CC3333 url('../img/nav/nav_bg.png');}

.menu{
	font-size:18px;
	font-weight:bold;
	width: 960px;
	margin: 0 auto;}
	
.menu ul{
	margin:0;
	padding:0;
	list-style-type: none;
	height: 50px;}
	
.menu li{
	float:left;
	padding:0px;}
		
.menu li a{
	/*background: url('../img/nav/seperator.gif') bottom right no-repeat;*/
	color:#000;
	display:block;
	font-weight:normal;
	line-height:20px;
	padding-top: 5px;
	text-align:center;
	text-decoration:none;
	width: 137px;
	height: 50px;
	display: block;}
		
.menu li a:hover, .menu ul li:hover a{
	background: #000;
	color:#FFFFFF;
	text-decoration:none;}
		
.menu li span{
	color: #FFF;
	font-size: 13px;}

.menu li ul{
	background:#000;
	display:none;
	height:auto;
	padding:0px;
	margin:0px;
	border:0px;
	position:absolute;
	width:195px;
	margin-lefT: -18px;
	/*top:1em;
	/*left:0;*/}

.menu li:hover ul{
	display:block;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;}
	
.menu li li {
	border-top: 1px solid #333;
	display:block;
	float:none;
	margin-top:0px;
	padding:0px;
	width:195px;}
		
.menu li:hover li a{
	background:none;
	line-height: 35px;}
	
.menu li ul a{
	display:block;
	height:35px;
	font-size:12px;
	font-style:normal;
	margin:0px;
	padding:0px 10px 0px 15px;
	text-align:left;}
		
.menu li ul a:hover, .menu li ul li:hover a{
	background:#CC3333 url('../img/nav/hover_sub.gif') center left no-repeat;
	border:0px;
	color:#ffffff;
	text-decoration:none;
	width: 170px;}
		
.menu p{
	clear:left;
	width:195px;}

/* ----------------
END OF NAVIGATION
-----------------*/	

/* ----------------
HOME PAGE
-----------------*/

#listencontent {
	overflow: hidden;
	margin: 0;
	padding: 10px 0 0 0;
	height: 1%;}

#listen {
	width: 960px;
	height: 100px;
	background: url(../img/listenbar.jpg) no-repeat;}


#listeninfo {
	float: left;
	padding: 15px;
	color: #FFF;}


#listeninfo a {
	color: #FFF;}

#listeninfo a:hover {
	color: #CC3333;}

#listeninfo .listennow{
	padding-top: 8px;
	font-weight: bold;}

#listen a.listenlink {
	color: #CC3333;
	width: 350px;
	height: 100px;
	display: block;
	background: #222 url(../img/listenbar.jpg);
	float: left;}

#listen a.listenlink span {
	display: none;}

#streamlink {
	margin: 0;
	padding-top: 5px;
	font-size: 80%;
	overflow: hidden;
}

#streamlink a {
	background: #000;
}

#streamlink ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#streamlink ul li {
	float: left;
	margin: 0 6px 0 0;
	display: inline;
}

#about {
	float: left;
	width: 428px;}

#about h2 {
	font-size: 130%;
	color: #000;
	margin: 0 10px 10px 0;}

#about p {
	margin-bottom: 10px;
	text-align: justify;}

#video{
	float: right;
	padding: 32px 0 0 0;}

#followus {
	float: right;
	padding: 10px 0 0 0;}

#followus li a {
	width: 32px;
	height: 32px;
	display: block;
}

#followus span {
	display: none;	
}

#followus ul{ 
	
}
	
#followus li{ 
	float: left;
	list-style-type:none; 
	padding: 0px 10px 0px 0px;
	line-height: 35px;
}

#followus li.follow-facebook a{ background: #FFF url(../img/facebook.png);}
#followus li.follow-twitter a{ background: #FFF url(../img/twitter.png);}
#followus li.follow-youtube a{ background: #FFF url(../img/youtube.png);}
#followus li.follow-digg a{ background: #FFF url(../img/digg.png);}

/* ----------------
END OF HOME PAGE
-----------------*/

/* ----------------
LATEST NEWS and UPCOMING GIGS PAGE
-----------------*/

#latest_upcoming {
	width: 640px;
	float: right;
	padding-left: 10px}

#latest_upcoming h3{
	padding: 20px 0 5px 0;
	font-size: 18px;}

#latest_upcoming h3 span{
	float: right;
	color: #999;}

#latest_upcoming p{
	text-align: justify;
	border-bottom: 1px solid #CCC;
	padding-bottom: 15px;}

#latest_upcoming img{
	float: left;
	padding: 0 10px 0px 0;}

#sidebar{
	background: #E0E0E0;
	width: 220px;
	float: left;
	padding: 0 15px 15px 15px;}

#sidebar h2{
	font-size: 24px;
	padding-top: 5px;}	

#sidebar h3{
	padding: 20px 0 5px 0;
	font-size: 16px;
	font-weight: bold;}

#sidebar h3 span{
	float: right;
	color: #999;}

#sidebar p{
	text-align: justify;
	border-bottom: 1px solid #999;
	padding-bottom: 15px;}

#sidebar h4{
	font-size: 16px;
	border-bottom: 1px solid #999;
	padding: 15px 0 15px 0;}

#sidebar ul{
	list-style-type: none;
	padding: 15px 0 0 0;}
	
#sidebar li{
	list-style-type: none;
	padding: 10px 0 10px 0;
	border-bottom: 1px solid #999;}	
	
#sidebar a{
	color: #000;
	width: 220px;
	display: block;}

#sidebar a:hover{
	color: #CC3333;}

#twitter_sidebar{
	width: 250px;
	float: left;}

#twitter_sidebar .twitter-follow-button{
	margin-top: 15px;}

#twitter_sidebar .twitter-share-button{
	margin-top: 10px;}

/* ----------------
END OF LATEST NEWS PAGE
-----------------*/

/* ----------------
DJ SELECT PAGE
-----------------*/

.columnone {
  	float: left;
  	width: 200px;
	margin: 25px 13px 10px 0px;
	padding: 8px;
	min-height: 280px;
	max-height: 280px;
	overflow: hidden;
	border: 1px solid #999;}
	
.columnone h3{
	font-weight: bold;
	padding-bottom: 10px;
	text-align: center;}
	
.columnone img{
	border: 1px solid #FFF;}	
	
.columnone img:hover{
	border: 1px solid #CC3333;}		
	
.columnone p{
	padding-top: 5px;
	text-align: justify;}

.columnone a{
	color: #000;}	

.columnone a:hover{
	color: #CC3333;}			

.columntwo {
  	float: left;
  	width: 200px;
	margin: 25px 13px 10px 0px;
	padding: 8px;
	min-height: 280px;
	max-height: 280px;
	overflow: hidden;
	border: 1px solid #999;}

.columntwo h3{
	font-weight: bold;
	padding-bottom: 10px;
	text-align: center;}
	
.columntwo img{
	border: 1px solid #FFF;}	
	
.columntwo img:hover{
	border: 1px solid #CC3333;}		
	
.columntwo p{
	padding-top: 5px;
	text-align: justify;}	

.columntwo a{
	color: #000;}	

.columntwo a:hover{
	color: #CC3333;}
		
.columnthree {
  	float: left;
  	width: 200px;
	margin: 25px 12px 10px 0px;
	padding: 8px;
	min-height: 280px;
	max-height: 280px;
	overflow: hidden;
	border: 1px solid #999;}
	
.columnthree h3{
	font-weight: bold;
	padding-bottom: 10px;
	text-align: center;}
	
.columnthree img{
	border: 1px solid #FFF;}	
	
.columnthree img:hover{
	border: 1px solid #CC3333;}	
	
.columnthree p{
	padding-top: 5px;
	text-align: justify;}

.columnthree a{
	color: #000;}	

.columnthree a:hover{
	color: #CC3333;}					

.columnfour {
  	float: left;
  	width: 200px;
	margin: 25px 0px 10px 0px;
	padding: 8px;
	min-height: 280px;
	max-height: 280px;
	overflow: hidden;
	border: 1px solid #999;}
	
.columnfour h3{
	font-weight: bold;
	padding-bottom: 10px;
	text-align: center;}
	
.columnfour img{
	border: 1px solid #FFF;}	
	
.columnfour img:hover{
	border: 1px solid #CC3333;}		
	
.columnfour p{
	padding-top: 5px;
	text-align: justify;}

.columnfour a{
	color: #000;}	

.columnfour a:hover{
	color: #CC3333;}			
	

/* ----------------
END OF DJ SELECT PAGE
-----------------*/

/* ----------------
DJ PAGE
-----------------*/

#content h2{
	font-size: 28px;
	border-bottom: 1px solid #CC3333;}

.dj img{
	float: right;
	padding: 10px 0 10px 10px;}

.dj p{
	float: left;
	text-align: justify;
	width: 300px;
	padding: 10px 0 25px 0;}

.dj h3{
	font-size: 20px;
	border-bottom: 1px solid #CC3333;
	width: 300px;}

.dj ul{
	list-style-type: none;
	padding: 10px 0;}


.recent-shows{
	float: left;
	padding: 10px 0; 
	width: 100%;}

.recent-shows h3{
	font-size: 20px;
	border-bottom: 1px solid #CC3333;}

.recent-shows ul{
	list-style-type: none;
	padding: 10px 0;}

.recent-shows a{
	font-size: 18px;
	padding-bottom: 10px;}

.recent-shows span{
	color: #999;
	float: right;}

.recent-shows .comment{
	border-bottom: 1px solid #CCC;
	padding-bottom: 10px;
	text-align: justify;}

.recent-shows .morelink{
	color: #CC3333;
	font-size: inherit;}

.recent-shows .morelink:hover{
	text-decoration: underline;}

.recent-shows .backcat {
	padding: 10px 0 20px 0;}

#img_gallery h3{
	font-size: 20px;
	border-bottom: 1px solid #CC3333;}

#img_gallery ul{
	list-style-type: none;}
	
#img_gallery li{
	float: left;
	padding: 15px 12px 0 12px;}
	
#img_gallery img{
	border: 1px solid #CCC;}		
	
#img_gallery img:hover{
	border: 1px solid #CC3333;}

/* ----------------
END OF DJ PAGE
-----------------*/

/* ----------------
YSTUDIO PAGE
-----------------*/

#ystudio{
	float: right;
	width: 640px;}
	
#ystudio h2{
	border-bottom: 1px solid #CC3333;}	
	
#ystudio p{
	padding: 8px 0 8px 0;
	text-align: justify;}
	
#ystudio h3{
	padding: 15px 0 5px 0;
	font-size: 18px;}	
	
#ystudio ul{
	padding: 10px 0 0 20px;}
	
#ystudio li{
	padding-bottom: 5px;}
	
#ystudio img{
	margin: 10px 0 10px 0;}	
	
#ystudio .ystudio {	
	border-bottom: 1px solid #FF6600;}
	
#ystudio .yeducation {	
	border-bottom: 1px solid #99CC00;}
	
#ystudio .ysessions {	
	border-bottom: 1px solid #33CCCC;}

#ystudio .yvenue{	
	border-bottom: 1px solid #FF0099;}	

#ystudio .yrecording {	
	border-bottom: 1px solid #33CCFF;}	
	
#ystudio .yrehearsal{	
	border-bottom: 1px solid #FFFF00;}
	
#ystudio .no-bpoints {
	list-style-type: none;}	

#ystudio .pic{
	float: left;
	padding: 0 10px 0 0}
	
#ystudio .recstudio{
	float: right;
	clear: both;}
					
/* ----------------
END OF YSTUDIO PAGE
-----------------*/

/* ----------------
REVIEWS
-----------------*/

#rev_body{
	float: left;
	width: 630px;}

#rev_body p{
	text-align: justify;
	padding-top: 10px;
	width: 630px;
	float: left;}

#rev_body .cont{
	margin-top: -10px;}

#rev_body .pro-con{
	font-weight: bold;}

#rev_body ul{
	padding: 25px 0 0 25px;}

#rev_first img{
	float: right;
	padding: 10px 0 10px 10px;}

#rev_first p{
	width: 300px;
	text-align: justify;
	padding-top: 10px;}

#rev_first iframe{
	float: right;
	padding-top: 10px;}

#score {
	float: right;
	width: 250px;
	height: 500px;}

#score .revby{
	font-weight: bold;
	padding: 10px 0 0 5px;}

#score p{
	padding: 5px 0 0 5px;}

#score h3{
	font-size: 20px;
	border-bottom: 1px solid #CC3333;
	padding-top: 10px;}

#score h4{
	padding-top: 10px;
	font-size: 80px;
	color: #999999;}

#score h5{
	text-align: center;
	padding: 25px 0 10px 0;
	font-weight: bold;}

#score ul{
	list-style-type: none;

	border-left:  1px solid #CCC;
	border-right:  1px solid #CCC;}

#score li{
	border-bottom: 1px solid #CCC;
	line-height: 32px;
	text-align: center;}

#score img{
	padding-top: 5px;}


/* ----------------
END OF REVIEWS
-----------------*/

/* ----------------
FOOTER
-----------------*/

#footer {
	background: #CC3333 url(../img/footer-bg.jpg);
	height: 33px;
	padding: 8px;}

#footer p {
	color: #000;
	float: right;
	margin: 0; 
	padding: 7px 0 0 0;
	text-align: center;
	font-size: 95%;}

#footer p span{
	color: #FFF;}

/* ----------------
END OF FOOTER
-----------------*/

/* ----------------
LIGHTBOX
-----------------*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; border-top: 5px solid #CC3333;}

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:img/lightbox/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../img/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../img/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	;border-bottom: 5px solid #CC3333;}

#imageData{	padding:0 10px; color: #666;}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/*----------------
END OF LIGHTBOX
-----------------*/