/* default
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {width: 100%; height:auto}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:#666; text-decoration:none}
a:hover{ text-decoration:underline}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

h1,h2,h3,h4,h5,h6{ font-weight:400}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  

.clear { clear: both; }

.hide { display: none; }

img { display: block; }

img.no-resize { width: auto; }

.sep-vert { position: relative; display: block; width: 1px; height: 199px; background: url(img/sep-vert-sm.png) center center no-repeat; }
.sep-horiz { position: relative; display: block; width: 990px; height: 1px; background: url(img/sep-horiz.png) center center no-repeat; }

.artist-extra, .lyric-extra { display: none; }


/*** site styles ***/

html, BODY { height: 100%; }
BODY { background: #000 url(img/darkBG.png); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #000; text-align: center; }

#site { position: relative; display: block; width: 1000px; margin: 0 auto; text-align: left; }

#header { position: relative; display: block; width: 100%; padding: 10px 0 10px 15px; background: url(img/header.jpg) center top;  box-sizing: border-box; -moz-box-sizing: border-box; }
#logo { position: relative; display: block; float: left; width: 289px; margin: 0; padding: 0; }
#logo img { position: relative; display: block; width: 100%; height: auto; }
#logo h2 { text-indent: -9999px; overflow: hidden; font-size: 1px; }

#header-right { position: relative; display: block; float: right; width: 691px; height: 215px; }

#header-right .box { position: relative; display: block; width: 691px; height: 37px; margin: 0 0 10px; background: url(img/title.png) no-repeat; text-indent: -99999px; overflow: hidden; }
#header-right .box-2 { position: relative; display: block; float: right; }
#header-right .box-2 .phone { position: relative; display: block; width: 291px; height: 60px; padding: 0; margin: 8px 15px 0 0; background: url(img/call.png) no-repeat; text-indent: -99999px; overflow: hidden; float: left; }
#header-right .box-2 .social { position: relative; display: block; float: left; }
#header-right .box-2 .social a { display: block; width: 42px; height: 41px; float: left; margin: 15px 10px 0 0; background-position: -1px 0; background-repeat: no-repeat; text-indent: -99999px; overflow: hidden; }
#header-right .box-2 .social a:hover { background-position: -44px 0; }
#header-right .box-2 .social a.facebook { background-image: url(img/facebook.png); }

#menu { position: absolute; bottom: 0; right: 0; display: block; width: auto; z-index: 500; }
#menu ul { margin: 0; padding: 0; float: right; }
#menu li { position: relative; list-style-type: none; margin: 0; padding: 0; display: block; float: left; white-space: nowrap; letter-spacing: 0; }
#menu li.sep { font-size: 20x; line-height: 1; color: #fff; }
#menu li a { display: block; padding: 0 10px; font-size: 22px; line-height: 1; color: #fff; text-transform: uppercase; text-decoration: none; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; }
#menu li a:hover, #menu li.current a { color: #e81925; text-decoration: none; }

#banner-wrapper { position: relative; display: block; border-top: 3px solid #e3b508; border-bottom: 3px solid #e3b508; }
#banner-wrapper #banner { position: relative; display: block; height: 512px; overflow: hidden; }
#banner-wrapper #banner img {  }

.shout-box { position: relative; display: block; background: url(img/bg-quicklinks.png); padding: 20px 0 10px; }
.shout-box div { position: relative; display: block; width: 33%; padding: 6px 38px; float: left; box-sizing: border-box; -moz-box-sizing: border-box; }
.shout-box div.shout-box-2, .shout-box div.shout-box-3 { background: url(img/quicklinks-sep.png) left top no-repeat; padding-left: 37px; padding-right: 37px; }
.shout-box div a { display: block; text-decoration: none; text-transform: uppercase; color: #000; font-size: 24px; font-weight: bold; line-height: 1; text-align: center; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; }
.shout-box div a:hover { text-decoration: none; color: #fff; }
.shout-box div a img { border: 4px solid #5e5e5e; margin: 0 0 20px; width: 249px; }
.shout-box div a span { display : block; }

.content { position: relative; display: block; background: url(img/lightBG.png); padding: 15px 35px 50px; box-sizing: border-box; -moz-box-sizing: border-box; }
.content h1.page-title { border-left: 15px solid #e3b508; margin: 0 0 15px; padding: 0 0 0 7px; text-transform: uppercase; color: #000; font-size: 30px; font-weight: bold; line-height: 1; }
.content .content-area { position: relative; display: block; color: #000; font-size: 15px; }

.content .content-area a { color: #0095da; text-decoration: none; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; }
.content .content-area a:hover { color: #000; text-decoration: none; }
.content .content-area p { margin: 0 0 20px; padding: 0; line-height: 1.4; }

.work-box { position: relative; display: block; padding: 20px 0 10px; }
.work-box div { position: relative; display: block; width: 33%; padding: 6px 5px; float: left; box-sizing: border-box; -moz-box-sizing: border-box; }
.work-box div.shout-box-2, .work-box div.shout-box-3 { background: url(img/quicklinks-sep.png) left top no-repeat; padding-left: 33px; padding-right: 33px; }
.work-box div a { display: block; text-decoration: none; text-transform: uppercase; color: #000; font-size: 24px; font-weight: bold; line-height: 1; text-align: center; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; }
.work-box div a:hover { text-decoration: none; color: #fff; }
.work-box div a img { border: 4px solid #666; margin: 0 0 20px; width: 249px; }
.work-box div a span { display : block; }


@viewport { width: auto; }

@media only screen and (max-width: 980px) {
}

@media only screen and (max-width: 800px) {
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 640px) {
}

@media only screen and (max-width: 480px) {
}

@media only screen and (max-width: 360px) {
}

@media only screen and (max-width: 320px) {
}

@media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
}

@media only screen and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
}