/* -------------------------------------------------------------
	Souled Out.
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Description:	Screen Style
	Filename:		style.css
	Version:		1.0
	Date:			09 March 2009
------------------------------------------------------------- 

Table of Contents (subject to change):
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	+ Semantic Elements / Defaults
	+ Custom Classes
		- Document Setup
		- Masthead
		- Messaging
		- Sidebar
		- Content
		- Footer
	+ Form Styles
	+ Miscellaneous

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
*/


/* -------------------------------------------------------------
	Semantic Elements / Defaults
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

html{
height: 100%;
overflow: -moz-scrollbars-vertical;
overflow-x: auto;
}

body {
	background: #000 url(/images/bg.jpg) no-repeat top center;
	font-family: Verdana, Arial, sans-serif;
	color: #fff;
	text-align: center;
}

#inner{
color: #bcbaba;
background: #000 url(/images/innerBg.jpg) no-repeat top center;
}

a img, :link img, :visited img {
	border: 0;
}

a{
outline: none;
}

a:link, a:visited {
	color: #ffd376;
	text-decoration: underline;
}

a:hover, a:active, a:focus {
	text-decoration: none;
color:#ffd376;
}

h2 {
	font-size: 2.3em;
}

h3 {
	font-size: 1.8em;
	color: #ffba27;
        clear:both;
        letter-spacing: -.05em;
        font-weight: bold;
        line-height: 1.3em;
        margin-bottom: 15px;
}

.list{margin: 20px 0 0 0;}
.listEm{font-style: italic;font-weight:bold;line-height: 1.3;}
h4 {
	font-size: 1.3em;
	color: #fff;
        font-weight: bold;
        font-style: italic;
        line-height: 1.3;
}

h5 {
	font-size: 1em;
}

em{font-style:italic;}

.headlineBand, .headlinePhoto, .headlineBooking, .headlineShows, .headlineContact, .headlineSongList, .headlineTestimonials{
height: 61px;
width: 300px;
text-indent: -9999em;
margin-left: -10px;
margin-bottom: 30px;
background: url(/images/headlineBand.png) no-repeat left top;
}

.headlinePhoto{
background: url(/images/headlinePhoto.png) no-repeat left top;
}

.headlineBooking{
background: url(/images/headlineBooking.png) no-repeat left top;
}

.headlineShows{
background: url(/images/headlineShows.png) no-repeat left top;
}

.headlineContact{
background: url(/images/headlineContact.png) no-repeat left top;
}

.headlineSongList{
background: url(/images/headlineSongList.png) no-repeat left top;
}

.headlineTestimonials{
background: url(/images/titleTestimonials.png) no-repeat left top;
}


/* -------------------------------------------------------------
	Custom Classes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*	Document Setup
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.index {
	width: 982px;
	margin: 0 auto;
	text-align: left;
}

p{
margin-bottom: 15px;
}

#home .rightCol h3, #home .rightCol p{
margin: 0 0 15px 15px;
width: 500px;
}

#home .rightCol h3{
width: 510px;
padding-top: 10px;
}



/*	Masthead
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#flashHeader{
height: 391px;
background: #000;
}

#flashHeader p{
display:none;
}

#header{
height: 264px;
background: url(/images/innerHeadBg.jpg) no-repeat 0 0;
}

.headerHome{
float: left;
display:block;
text-indent: -9999em;
height: 230px;
width: 360px;
}

#header img{
float:right;
margin-right: 21px;
}

.leftCol{
float:left;
width: 268px;
height: 307px;
background: url(/images/leftColBg.jpg) no-repeat -1px 0;
padding: 204px 0 0 118px;
}

#inner .leftCol{
width: 285px;
height: 420px;
padding: 148px 0 0 75px;
background: url(/images/innerLeftColBg.jpg) no-repeat 0 0;
}

.rightCol{
position: relative;
float:left;
width: 595px;
height: 511px;
background: url(/images/rightColBg.jpg) no-repeat;
font-size: .8em;
line-height: 1.7;
}
#home .rightCol p{

}

#home .rightCol .quote{
width: 300px;
float:left;
margin: 15px 0 0 36px;
font-size: .85em;
line-height: 1.5;
color: #999; 
}

#inner .rightCol{
width: 542px;
padding: 0 40px 0 40px;
background: transparent;
line-height: 2;
}

.content{min-height: 400px;}

#inner .rightCol.theSongs{background: url(/images/songListBg.jpg) no-repeat right 70px;}
#inner .rightCol.theShows{background: url(/images/showsBg.jpg) no-repeat 258px 31px;}

.arrow{
position: relative;
z-index: 2;
top: 0px;
left: 277px;
width: 292px;
height: 143px;
text-indent: -9999em;
cursor: pointer;
background: url(/images/photoGalArrow.png) no-repeat 0 -9px;
}

.arrow:hover{
background-position: 0 -152px;
}

.photoArrow{
display:block;
text-indent: -9999em;
width: 292px;
height: 143px;
float: right;
margin: 0 27px 0 0;
}

.readMore{
display:block;
float: right;
text-indent: -9999em;
width: 116px;
height: 29px;
margin: -20px 90px 0 0;
background: url(/images/readMore.png) no-repeat 0 0;
}

.readMore:hover{
background: url(/images/readMore.png) no-repeat 0 -29px;
}

.footer{
clear: both;
height: 70px;
margin: 20px;
padding-top: 15px;
}

.csLogo{
display:block;
width: 124px;
height: 28px;
float:left;
text-indent: -9999em;
background: url(/images/csLogo.gif) no-repeat;
}
.csLogo:hover{
background-position: 0 -28px;
}

#inner .csLogo{
width: 100%;
margin: 36px 0 0 43px;
clear:both;
background: transparent;
}

#inner .csLogo:hover{
background: url(/images/csLogo.gif) no-repeat 0 -28px;
}

.clearFix{height:1px;clear:both;}

.leftCol p{
color: #212121;
font-size: .65em;
clear:both;
text-align: center;
margin-left: -70px;
padding-top: 10px;
}

.footer p{
float: right;
font-size: .65em;
color: #787775;
padding-top: 6px;
}

.imgRight{
float: right;
border: 5px solid #393939;
margin: 0 0 5px 5px;
}

.imgLeft{
float: left;
border: 5px solid #393939;
margin: 0 10px 30px 0;
}

.noBorder{border: 0px;}

#inner .rightCol ul{
margin-left: 30px;
}

#inner .rightCol ul li{
list-style: none;
color: #fff;
font-style: italic;
font-family: Arial, sans-serif;
padding-left: 20px;
background: url(/images/iconList.gif) no-repeat 0 8px;
}

.innerFooter{
position: relative;
float: left;
width: 545px;
height: 210px;
margin-top: 40px;
clear:both;
background: url(/images/innerFooterBg.jpg) no-repeat;
}


.innerFooter .clickHere{
display:block;
float: left;
text-indent: -9999em;
width: 116px;
height: 29px;
margin: 150px 0 0 60px;
background: url(/images/clickHere.png) no-repeat 0 0;
}

.innerFooter .clickHere:hover{
background: url(/images/clickHere.png) no-repeat 0 -29px;
}

.innerFooter .arrow{
position: absolute;
z-index: 2;
top: 52px;
left: 227px;
width: 292px;
height: 143px;
text-indent: -9999em;
cursor: pointer;
background: url(/images/photoGalArrow.png) no-repeat 0 -9px;
}

.innerFooter .arrow:hover{
background-position: 0 -152px;
}

.innerFooter .photoArrow{
display:block;
text-indent: -9999em;
width: 282px;
height: 143px;
float: right;
margin: -20px 10px 0 0;
}

#accordion{margin-top: 30px;}

.anchors a{
font-size: 11px;
margin-right: 15px;
padding-right: 13px;
background: url(/images/iconDownArrow.gif) no-repeat right 3px;
}


/*----------- Photo Gallery Styles -------------*/

.photoGal{margin-top: 30px;}

.photoGal img{
border: 3px solid #ffe3a3;
margin: 0 17px 17px 0;
background: #fff;
padding: 1px;
float: left;
}


/*---------- form layout ------------- */

#contactForm{
width: 531px;
height: 607px;
padding: 90px 0 0 85px;
background: url(/images/formBg.jpg) no-repeat;
}

#contactForm label{
display: block;
text-indent: -9999em;
}

#contactForm input, #contactForm textarea{
font-family: arial, helvetica, sans-serif;
font-size: 14px;
color: #ffba27;
border: 0px;
width: 364px;
background: transparent;
}

#name{margin-top: 8px;}
#email{margin-top: 55px;}
#phone{margin-top: 54px;}
#comments{margin-top: 54px;}

#contactForm textarea{
height: 84px;
font-size: 12px;
overflow:auto;
}

#contactForm #submit{
width: 115px;
height: 34px;
float: right;
padding: 0px;
margin: 40px 140px 0 0;
text-indent: -9999em;
cursor: pointer;
background: url(/images/submit.gif) no-repeat;
}
#contactForm #submit:hover{
background-position: 0 -34px;
}

#emailResponseContainer{
display:none;
text-align: center;
color: #ffba27;
}

#quotes{
float:left;
width: 270px;
height: 99px;
margin: -3px 0 0 65px;
text-indent: -9999em;
background: url(/images/testimonials.jpg) no-repeat;
}
#quotes a{display:block;height: 99px;}

/*---------- shows layout ------------- */

#showsTable{
border-collapse: collapse;
font-size: 12px;
}

.showsDate, .showsVenue, .showsTime, .showsType{
height: 50px;
text-indent: -9999em;
background: url(/images/showDate.png) no-repeat left;
}
.showsVenue{background: url(/images/showVenue.png) no-repeat left;}
.showsTime{background: url(/images/showTime.png) no-repeat left;}
.showsType{background: url(/images/showType.png) no-repeat left;}

.showDate, .showVenue, .showTime, .showType{padding: 5px 10px;}
.showDate, .showVenue, .showTime{padding-right: 20px;}
.showTime{padding-right: 60px;}
.showOther{background: url(/images/rowOtherBg.png);}

/*---------- testimonials layout ------------- */

blockquote{
padding: 10px 0 10px;
border-bottom: 2px solid #333;
}
blockquote em{
display:block;
color:#fff;
font-weight:bold;
font-style: italic;
}