body { font-size: 76%; font-family: Trebuchet MS, Sans-serif }


body { background: #333; padding: 0; margin: 0; text-align: center; }

#outer { background: #000; width: 780px; margin: 20px auto; text-align: left; border: 5px solid #fff; padding: 5px; }
#inner { border: 5px solid #97be0d; background: #fff url(images/bg/home.jpg); }


/* border colours */
#meet #inner { border: 5px solid #5a2a71; background: #000 url(images/bg/meet.jpg) no-repeat; }
#gallery #inner { border: 5px solid #0084a8; background: #000 url(images/bg/gallery.jpg) no-repeat; }
#repetoire #inner { border: 5px solid #0073b3; background: #000 url(images/bg/rep.jpg) no-repeat; }
#faqs #inner { border: 5px solid #745a32; background: #000 url(images/bg/faqs.jpg) no-repeat; }
#listen #inner { border: 5px solid #99141b; background: #000 url(images/bg/listen.jpg) no-repeat; }

#clients #inner { border: 5px solid #248890; background: #000 url(images/bg/clients.jpg) no-repeat; }
#references #inner { border: 5px solid #594e36; background: #000 url(images/bg/references.jpg) no-repeat; }


#home p { position: absolute; bottom: 30px; right: 20px; font-size: 1.2em; }

#header { padding-top: 260px; }

/* navigation */
/* default */
#nav { 
height: 25px; 
font-family: arial, sans-serif; 
font-size: 1.3em;
}



#nav { background: #97be0d url(images/logos/beat-logo-green.gif) no-repeat right; }
#meet #nav { background: #5a2a71 url(images/logos/beat-logo-purple.gif) no-repeat right; }
#clients #nav { background: #248890 url(images/logos/beat-logo-teal.gif) no-repeat right; }
#repetoire #nav { background: #0073b3 url(images/logos/beat-logo-blue.gif) no-repeat right; }
#faqs #nav { background: #745a32 url(images/logos/beat-logo-brown.gif) no-repeat right; }
#listen #nav { background: #99141b url(images/logos/beat-logo-red.gif) no-repeat right; }

#references #nav { background: #594e36 url(images/logos/beat-logo-brown.gif) no-repeat right; }


#nav a { text-decoration: none; color: #fff; font-weight: normal ! important; }

#nav ul { padding: 0; padding-top: 3px; margin: 0; list-style: none; }
#nav li { padding: 0  12px ; margin: 0; float: left; display: block; }

#nav li a { opacity: .5; filter: alpha(opacity=50);}
#home #nav li.home a { opacity: 1; filter: alpha(opacity=100);}
#repetoire #nav li.repetoire a { opacity: 1; filter: alpha(opacity=100); }
#clients #nav li.clients a { opacity: 1; filter: alpha(opacity=100); }
#meet #nav li.meet a { opacity: 1; filter: alpha(opacity=100); }
#listen #nav li.listen a { opacity: 1; filter: alpha(opacity=100); }
#references #nav li.references a { opacity: 1; filter: alpha(opacity=100); }

#nav li a:hover { opacity: 1; filter: alpha(opacity=100); }


#content { padding: 0 20px 20px 20px; width: 730px; color: #fff; z-index: 99; }
#shadow { background: #000; opacity: .7;  filter: alpha(opacity=70); height: 250px; }


/* repetoire and meet the band need to stretch */
#repetoire #shadow, #meet #shadow,  #clients #shadow , #references #shadow{ display: none; }
#repetoire #content, #meet #content, #clients #content, #references #content { background: #000; opacity: .7;  filter: alpha(opacity=70); padding-top: 15px; }


/* listen and main page don't */
#listen #content, #home #content { 
opacity: 1;
filter: alpha(opacity=100); 
position: absolute; 
height: 250px; 
background: transparent; 
}

#listen #shadow { opacity: 1; filter: alpha(opacity=100); background: url(images/bg/listendark.jpg); height: 250px;}

#content:after { display: block; content:""; clear: both; }


.flashplayer { position: absolute; right: 10px; top: 10px; } 


table { width: 1800px; }
#repetoire #content div { font-size: .96em; line-height: 1.1em;}
#repetoire #content b { font-size: 1.2em;}

#listen p { width: 320px; } 

#meet h2, #repetoire h2 { margin-top: 0; }

#meet.leftcol br, #meet.rightcol br { display: none; }

.leftcol, .rightcol { width: 350px; padding: 0; float: left; }
.leftcol { margin-right: 30px; }
ul { margin: 0; padding: 0; padding-left: 13px; }
.leftcol p { margin-top: 0; }
.rightcol strong { display: block; padding-top: 20px;}
#meet .rightcol { padding-top: 30px; }


#content { position: relative; }
#answerbox {  
position: absolute; 
right: 20px; 
top: 10px; 
width: 330px; 
visibility: hidden;
z-index: 99;
padding: 2px;
text-align: left; 
font-size: .96em;
line-height: 1.2em;
}


#references a { color: #fff; font-weight: bold; text-decoration: none; }

#references h5 { width: 330px; margin: 5px; }

.scroller { height: 350px; overflow: hidden; overflow-y: auto; width: 380px; }
.scroller a { font-weight: normal ! important; }