/*
Theme Name: DJ ROYALE
Theme URI: http://www.djroyale.net/
Description: DJ Royale custom theme
Version: 0.1
Author: JWB
Author URI: http://culturekiller.com/
Tags: DJ Royale
*/
/* partial 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,
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;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*jwb added
set body height to 100% so the #fade can be set to 100% height rather than a fixed pixel height
100% height won't work unless the parent element has a specific height (in this case body is parent of #fade) */
body {
	height: 100%;
}

 #fade{
position:fixed;
top:0px;
left:0px;
width: 100%;
height: 100%;
/*height: 957px;*/
z-index:999;
}

/*..........link and text styles............*/

p{
font-family: century gothic, sans-serif;
font-size: 10px;
color:#D5D5D5;
}

#credit p{
font-family: century gothic, sans-serif;
font-size: 10px;
color:gray;
cursor: pointer;
}

span.nolink{
text-decoration: none;
font:  12px century gothic, sans-serif;
letter-spacing: .15em;
line-height: 1;
color: #D5D5D5; 
}

a.creditinfo{
font-family: century gothic, sans-serif;
font-size: 10px;
color: #fff;
text-decoration: none;
}
a.creditinfo:visited {
color:  #fff;
}
a.creditinfo:hover{
color:gray;
}
a.creditinfo:active {
color:  #fff;
}

a.joe {
text-decoration: none;
border-bottom: 1px solid #2A2A2A; 
font:  12px century gothic, sans-serif;
letter-spacing: .15em;
line-height: 1;
color: #D5D5D5; 
padding: 6px 0 6px 0; 
display: block; 
cursor: pointer; 
}

a.joe:visited {
color:  #D5D5D5;
}
a.joe:hover{
color:#ff00ff;
}
a.joe:active {
color:  #D5D5D5;
}

a.moremusic {
text-decoration: none;
font:  8px century gothic, sans-serif;
letter-spacing: .15em;
line-height: 1;
color: #D5D5D5; 
padding: 6px 0 6px 0; 
display: block; 
cursor: pointer; 
}

a.moremusic:visited {
color:  #D5D5D5;
}
a.moremusic:hover{
color:#ff00ff;
}
a.moremusic:active {
color:  #D5D5D5;
}

#ib:hover{
background-position: -75px 0;
}

#sc:hover{
background-position: -75px 0;
}

#fb:hover{
background-position: -50px 0;
}

#yt:hover{
background-position: -50px 0;
}

#ms:hover{
background-position: -50px 0;
}

#twitter:hover{
background-position: -50px 0;
}
#icons span{
display:none;
}

/*............list styles...............*/

li a {
color: #D5D5D5;
text-decoration: none;
}

li a:visited {
color:  #D5D5D5;
}

li a:hover{
color:#ff00ff;
}

li a:active {
color:  #D5D5D5;
}

/*...............BODY.................. */
body {
background: #000;
font-family: century gothic, helvetica, sans-serif;
font-size: 11px;
}

/*...............DIVS.................*/

#yt{
float:left;
height:66px;
width:45px;
margin:0 0 0 5px;
background: url("images/yt.jpg") 0 0 no-repeat;
}

#sc{
float:left;
height:66px;
width:75px;
background: url("images/sc.jpg") 0 0 no-repeat;
}

#fb{
float:left;
height:66px;
width:45px;
margin:0 0 0 5px;
background: url("images/fb.jpg") 0 0 no-repeat;
}

#ms{
float:left;
height:66px;
width:45px;
margin:0 0 0 5px;
background: url("images/ms.jpg") 0 0 no-repeat;
}

#twitter{
float:left;
height:66px;
width:45px;
margin:0 0 0 5px;
background: url("images/twitter.jpg") 0 0 no-repeat;
}

#main{
width: 900px;
margin: 0 auto;
padding: 30px 0 0 0;
}

#header{
/*position:relative;*/
height:398px;
width:900px;
}

#mainpic{
position: relative;
height:363px;
width:900px;
background: url("images/mainpic.jpg") 80px 0 no-repeat;
}

#flyer{
position:absolute;
overflow: hidden;
clip:rect(0px 60px 91px 0px);
top:145px;
left:85px;
width:60px;
height:91px;
z-index:55;
}

#flyer img{
display: none;
}

#flyer-overlay{
position:absolute;
top:145px;
left:85px;
width:60px;
height:91px;
background:url(images/flyer-overlay.png) no-repeat left top;
z-index:56;
}

#flyer-outer {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1100px;
text-align: center;
background: url(images/flyer-trans.png) repeat;
z-index:57;
}

#flyer-pop{
position:relative;
z-index:58;
-moz-opacity: 1.0;
opacity:100;
filter: alpha(opacity=100);
z-index:58;
padding-top: 30px;
}

#banner{
/*position:relative;*/
height:35px;
width:900px;
background: url("images/banner.jpg") 60px 0 no-repeat;
}

#stage{
width: 900px;
/*height:259px;*/
background: url("images/stagebg.jpg") 95px 0 no-repeat;
}

#column1{
float:left;
width: 310px;
margin:0 0 0 130px;
}

#column2{
float:left;
width: 310px;
margin:0 0 0 50px;
}

#news{
float:left;
width: 310px;
margin:30px 0 0 0;
}

#newshead{
float:left;
width: 310px;
height:15px;
margin:0 0 7px 0;
background: url("images/news.png") 0 0 no-repeat;
}

#tweet{
float:left;
width: 310px;
margin: 25px 0 0 0;
}

#tweethead{
float:left;
width: 310px;
height:27px;
margin:0 0 5px 0;
background-color: #1f1f1f;
background-image: url("images/twitter.png");
background-repeat: no-repeat;
background-position: 7px center;
}

#booking{
float:left;
width: 310px;
margin:30px 0 0 0;
font-family: century gothic, helvetica, sans-serif;
color: #D5D5D5;
font-weight: normal;
font-size: 13px;
letter-spacing: .15em;
text-decoration: none;
}

#bookinghead{
float:left;
width: 310px;
height:15px;
margin:0 0 13px 0;
background: url("images/booking.png") 0 0 no-repeat;
}

#music{
float:left;
width: 310px;
margin:20px 0 0 0;
}

#musichead{
float:left;
width: 310px;
height:15px;
margin:0 0 15px 0;
background: url("images/music.png") 0 0 no-repeat;
}

#shows{
float:left;
width: 310px;
margin: 20px 0 0 0;
}

#showshead{
float:left;
width: 310px;
height:15px;
margin:0 0 7px 0;
background: url("images/shows.png") 0 0 no-repeat;
}

#icons{
float:left;
width: 310px;
margin:20px 0 0 0;
padding-left: 18px;
}

#offscreen{
position:absolute;
left: -300px;
top:0px;
}

#moremusic{
float:left;
text-align: right;
width: 310px;
}

/*...................tweet..................*/

#tweetcontainer {
float:left;
padding: 0;
width: 310px; 
overflow: hidden;
}

.tweet {
font-family: Century Gothic, sans-serif;
font-size: 11px;
color: #D5D5D5; 
}
  
 .tweet .tweet_list {
list-style-type: none;
margin: 0;
padding: 5px 10px 5px 8px;
background-color: #1f1f1f; 
}
    
.tweet .tweet_list li {
overflow: auto;
padding:3px 3px 9px 3px; 

}
      
.tweet .tweet_list li a {
color: #FF00FF; 
}
        
.tweet .tweet_list .tweet_even {
background-color: #1f1f1f; 
overflow: hidden;
}

.tweet .tweet_list .tweet_odd {
overflow: hidden;
}


      
/*.................accordion...................*/
.accordionContent { 
width: 310px; 
margin:0;
}
	
.accordionContent img { 
margin: 10px 0 15px 0;
}
	
.accordion { 
list-style-type: none; 
padding: 0; 
margin: 0; 
border: none; 
}

.accordion ul { 
padding: 0; 
margin: 0; 
float: left; 
display: block; 
width: 100%; 
}

.accordion li { 
cursor: pointer; 
list-style-type: none; 
padding: 0; 
margin: 0; 
float: left; 
display: block; 
width: 100%;
}
	
.accordion li div { 
padding: 20px; 
background: #D5D5D5; 
display: inline; 
clear: both; 
float: left; 
width: 270px;
}

.accordion li div p a { 
text-decoration: none;
border:none;
color: #2a2a2a; 
}

/*jwb added*/
.accordion li div p { 
color:#000;
font-size:10px;
margin:0;
padding:0;
}
/**/
	
.accordion a { 
text-decoration: none;
border-bottom: 1px solid #2A2A2A; 
font:  12px century gothic, sans-serif;
letter-spacing: .15em;
line-height: 1;
color: #D5D5D5; 
padding: 6px 0 6px 0; 
display: block; 
cursor: pointer; 

}
	
.accordion a:hover{ 
color: #FF00FF;
 }
	
/* Level 2 */
.accordion li ul li { 
background:  #2A2A2A; 
font-size: 13px;
}

/*...........credit.............*/
#credit{
float:right; 
margin: 30px 0 0 0; 
}

#credittitle{
float:right; 
margin:0; 
}

#creditinfo{
float:right; 
margin: 0 5px 0 0; 
display:none;
}

/* jwb added
audio player */

.audio-container {
float:left;
margin: 0 3px 0 0;
}

.audio-container p {
width:140px;
padding: 2px 2px 5px 0;
}

.audio-space {
float: left;
width: 280px;
line-height: 1px;
}

/* jwb added
subscribe form */

#sub-form input {
	padding: 4px 0;
	margin: 15px 0 0 0;
}

input#wpnewsletter_name, input#wpnewsletter_email {
	display: block;
	margin-bottom: 5px;
}

#sub-form img {
	vertical-align: top;
	padding-top: 2px;
}

#sub-form label {
	display: block;
}

div#ajaxNewsletter {
	width: 250px;
	padding: 0;
}

div#ajaxNewsletter div.success{
	width: 250px;
	padding: 0;
}
div#ajaxNewsletter div.error{
	width: 250px;
	padding: 0;
}
div#newsletterLoading{
	width: 250px;
	padding: 0;
}
div#newsletterFormDiv {
	width: 250px;
	padding: 0;
}




/* new music stuff */

li.music_thumb {
	position: relative;
	float: left;
	width: 88px;
	height: 88px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom: 15px;
	overflow:hidden;
	background: #333;
}

.music_un {
	border: 1px solid #2A2A2A;
}

.music_hi {
	border: 1px solid #ff00ff;
}

li.music_thumb a {
	display: block;
	width: 88px;
	height: 88px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
	text-indent: -9000px;
}

li.music_thumb a:hover {
	background: url(images/hover.png);
}

.music_margin {
	margin-right: 20px;	
}

#music_player {
	height: 0px;
	background: #333;
}