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;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: #fff;
	background: #000;
	font: normal normal normal 13px/17px Helvetica, Arial, sans-serif;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
strong {
	font-weight: bold;
}

/***************
/*  global
/**************/

a:link { color: #fff; }
a:visited { color: #fff; }
a:hover { color: #ffcc33; }
a:active { color: #fff; }
.clear { clear: both; }
.clearleft { clear: left; }
img.imgr { float: right; margin: 0 0 0 10px; }


#container {
	position: relative;
	width: 960px;
	margin: 0 auto;
}

#masthead {
	min-height: 90px;
	background: transparent url('/img/fill-black50.png') repeat 0 0;
	/*border-bottom: 1px solid #403A36;*/
}
	#masthead h1 {
		width: 220px;
		height: 80px;
		
	}

	#masthead h1 a {
		display: block;
		width: 220px;
		height: 80px;
		background: transparent url('/img/h1.png') repeat 0 0;
		text-indent: -5000em;
	}
		#masthead h1 a:hover {
			background-position: 0 -80px;
		}

#footer {
	clear: both;
	margin: 30px 0 30px;
}
	#footer div {
		position: relative;
		float: left; 
		text-align: center;
		width: 310px;
		background: transparent url('/img/fill-black.png') repeat 0 0;
	}
	#footer div img {
		padding: 0 0 10px;
	}
	#footer div a {
		text-decoration: none;
	}
		#footer div a:hover {
			text-decoration: underline;
		}
		#footer div a strong {
			color: #ffcc33;
		}
	#footer div p {
		padding: 0 0 10px;
	}

#copyright {
	clear: both;
	text-align: center;
	padding: 20px 0;
	/*margin: 50px 0 0;*/
	color: #333;
}
	#copyright a {
		color: #333;
	}

ul.nav {
	position: absolute;
	top: 40px;
	right: 150px;
	text-transform: uppercase;
}
	ul.nav li {
		display: inline;
		margin: 0 0 0 0;
	}
	ul.nav li a {
		display: inline-block;
	}
	.nav a {
		font-size: 20px;
		text-decoration: none;
		padding: 5px;
	}
	.nav a:hover {
		background: #ffcc33;
		color: #000;
	}
	#music li.music a { background: #ffcc33; color: #000; }
	#gigs li.gigs a { background: #ffcc33; color: #000; }
	#gallery li.gallery a { background: #ffcc33; color: #000; }
	#about li.about a { background: #ffcc33; color: #000; }
	#contact li.contact a { background: #ffcc33; color: #000; }

div.cont-seekr a {
	position: absolute;
	top: 15px;
	right: 0;
	width: 110px;
	padding: 10px;
	border: 1px solid #ffcc33;
	color: #ffcc33;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
}
	div.cont-seekr a:hover {
		background-color: #ffcc33;
		color: #000;
	}

#promo {
	position: relative;
	height: 120px;
	overflow: hidden;
}
	#index #promo h2 {
		position: absolute;
		top: 10px;
		left: 279px;
		width: 402px;
		height: 190px;
		background: transparent url('/img/logo-index.jpg') no-repeat 0 0;
		text-indent: -5000em;
	}
/*.img_fade {display:none;}
*/
.mgr15 {
	margin-right: 15px;
}

.pdtp {
	padding-top: 20px;
}

hr {
	display: block;
	border: 0;
	color: #403A36;
	background-color: #403A36;
	height: 1px;
	margin-bottom: 9px;
}

#content {
	float: left;
	width: 630px;
	background: transparent url('/img/fill-black50.png') repeat 0 0;
	/*color: #000;*/
	padding: 10px;
}
	#content p {
		padding: 0 0 10px;
	}

#index #content {
	float: none;
	width: auto;
	background: transparent;
	padding: 0;
}
	#index #content p {
		padding: 0 0 2px;
	}
	
#gallery #content {
	float: none;
	width: auto;
	background: transparent;
	padding: 10px;
	margin-bottom: 20px;
	/*border-bottom: 1px dotted #403A36;*/
}
	#gallery #content p {
		padding: 0 0 2px;
	}
	
#gigs #content {
	float: none;
	width: auto;
	padding: 10px;
	margin-bottom: 20px;
	/*border-bottom: 1px dotted #403A36;*/
}
	#gigs #content p {
		padding: 0 0 2px;
	}
	
#about #content {
	float: none;
	width: auto;
	padding: 10px;
	margin-bottom: 20px;
	/*border-bottom: 1px dotted #403A36;*/
}
	#about #content p {
		padding: 0 0 10px;
	}
	
#contact #content {
	float: none;
	width: auto;
	padding: 10px;
	margin-bottom: 20px;
	/*border-bottom: 1px dotted #403A36;*/
}
	#contact #content p {
		padding: 0 0 10px;
	}
	
#aside {
	margin: 0 0 0 660px;
	background: transparent url('/img/fill-black50.png') repeat 0 0;
	/*border: 1px dotted #403A36;*/
	padding: 10px;
}
	#aside h3 {
		font-size: 24px;
		line-height: 28px;
		padding: 0 0 5px;
		color: #ffcc33;
	}
	#aside p {
		padding: 0 0 15px;
		color: #a69b71;
		font-size: 12px;
		line-height: 16px;
	}

.youtube_cont {
	text-align: center;
	padding: 10px 0;
	margin: 0 0 10px;
}

blockquote {
	display: block;
	padding: 10px;
	border: 1px dotted #403A36;
	margin: 10px 0 20px;
}
#about h3 {
	font-size: 22px;
	line-height: 26px;
	color: #fff;
	text-transform: uppercase;
	padding: 0 0 10px;
}



body#index { background: #000 url('/img/bg-index.jpg') no-repeat top center; }
body#index #promo { height: 270px; }

body#music { background: #000 url('/img/bg-music.jpg') no-repeat top center; }
body#music #promo { height: 270px; }

body#gigs { background: #000 url('/img/bg-gigs.jpg') no-repeat top center; }
body#gigs #promo { height: 270px; }

body#gallery { background: #000; }
body#gallery #promo { height: 330px; margin-bottom: 30px; }
body#gallery #promo img { float: left; }

body#gallery .gallery_cont a { 
	float: left;
	margin: 0 9px 9px 0;
	border: 1px dotted #403A36;
}
	body#gallery .gallery_cont a:hover { 
		border: 1px solid #ffcc33;
	}

.gallery_overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 22;
	background: transparent url('/img/gallery_overlay.png') no-repeat 0 0;
	width: 960px;
	height: 330px;
}

body#about { background: #000 url('/img/bg-about.jpg') no-repeat top center; }
body#about #promo { height: 270px; }

body#contact { background: #000 url('/img/bg-contact.jpg') no-repeat top center; }
body#contact #promo { height: 270px; }

body#music h2 {
	display: inline-block;
	width: 270px;
	height: 45px;
	background: transparent url('/img/h2_fo-music.png') repeat 0 0;
	text-indent: -5000em;
	margin: 0 0 10px;
}

body#gigs h2 {
	display: inline-block;
	width: 270px;
	height: 45px;
	background: transparent url('/img/h2_fo-gigs.png') repeat 0 0;
	text-indent: -5000em;
	margin: 0 0 10px;
}

body#gallery h2 {
	display: inline-block;
	width: 270px;
	height: 45px;
	background: transparent url('/img/h2_fo-gallery.png') repeat 0 0;
	text-indent: -5000em;
	margin: 0 0 10px;
}

body#about h2 {
	display: inline-block;
	width: 270px;
	height: 45px;
	background: transparent url('/img/h2_fo-about.png') repeat 0 0;
	text-indent: -5000em;
	margin: 0 0 10px;
}

body#contact h2 {
	display: inline-block;
	width: 270px;
	height: 45px;
	background: transparent url('/img/h2_fo-contact.png') repeat 0 0;
	text-indent: -5000em;
	margin: 0 0 10px;
}





div.thirds {
	position: relative;
	float: left; 
	width: 288px;
	height: 380px;
	padding: 0 10px;
	/*border: 1px dotted #403A36;*/
	background: transparent url('/img/fill-black50.png') repeat 0 0;
}
span.youtube {
	display: inline-block;
	width: 35px;
	height: 16px;
	margin: 0 3px;
	background: url('/img/icon-youtube.png') no-repeat 0 0;
	text-indent: -5000em;
}
div.thirds h3 {
	padding: 10px 0 5px;
	font-size: 16px;
	line-height: 20px;
}
p.thirds_p_sml {
	padding: 0;
	font-size: 10px;
	line-height: 14px;
}
.thirds-scrollbox {
	overflow: auto;
	height: 255px;
}
.gig {
	padding: 0 0 10px;
	margin: 0 0 10px;
	/*border-bottom: 1px solid #403A36;*/
}
	.gig img {
		float: left;
		padding: 0 10px 0 0;
	}
	.gig p {
		font-size: 11px;
	}
	.gig p span {
		color: #98895c;
	}
	.gig p a {
		text-decoration: none;
		color: #CB9832;
	}
		.gig p a:hover {
			text-decoration: underline;
		}
.gallery-thumbs a {
	display: inline-block;
	border: 1px solid #000;
	margin: 0;
	padding: 0;
}
	.gallery-thumbs a:hover {
		border: 1px solid #ffcc33;
	}


div.gig_cont {
	border: 1px dotted #403A36;
	border-width: 0 0 1px;
	padding: 0 0 20px;
	margin: 0 0 30px;
}
	.gig_cont h3 {
		font-size: 24px;
		line-height: 28px;
	}
	.gig_cont h4 {
		color: #666;
		margin: 0 0 20px;
	}
	.gig_cont h5 {
		color: #ffd60b;
		margin: 10px 0 15px;
		font-size: 15px;
		line-height: 19px;
	}
	
	.gig_cont table {
		margin: 0 0 20px;
		font-size: 11px;
		width: 420px;
/*		border: 1px solid #403A36;
		border-width: 0px 1px;*/
	}
	.gig_cont table td {
		padding: 3px;
		border: 1px solid #333;
		border-width: 0px 0 1px;
		color: #666;
	}
	.gig_cont table td + td {
		font-weight: normal;
		color: #fff;
	}
	div.gig_cont_l {
		float: left;
		width: 450px;
	}
	div.gig_cont_r {
		margin: 0 0 0 470px;
	}
	.widget-justgiving {
		float: right;
		width: 150px;
		margin: 0 0 10px 10px;
		text-align: center;
		
	}
div.next-box a {
	display: block;
	position: absolute;
	text-align: center;
	bottom: 10px;
	padding: 10px 0 0;
	width: 290px;
	height: 25px;
	background-color: #1a1a1a;
	color: #CB9832;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
}
	div.next-box a:hover {
		background-color: #ffcc33;
		color: #000;
	}
#index h2.h2-music a {
	display: block;
	margin: 10px 0;
	width: 290px;
	height: 50px;
	background: transparent url('/img/h2-music.png') repeat 0 0;
	text-indent: -5000em;
}
	#index h2.h2-music a:hover {
		background-position: 0 -50px;
	}

#index h2.h2-gigs a {
	display: block;
	margin: 10px 0;
	width: 290px;
	height: 50px;
	background: transparent url('/img/h2-gigs.png') repeat 0 0;
	text-indent: -5000em;
}
	#index h2.h2-gigs a:hover {
		background-position: 0 -50px;
	}

#index h2.h2-gallery a {
	display: block;
	margin: 10px 0;
	width: 290px;
	height: 50px;
	background: transparent url('/img/h2-gallery.png') repeat 0 0;
	text-indent: -5000em;
}
	#index h2.h2-gallery a:hover {
		background-position: 0 -50px;
	}




#contact form {
	float: left;
	margin: 20px 0;
	position:relative;
	padding: 15px;
	border: 1px dotted #403A36;
	}
	#contact form .error {
		color: red;
	}
	#contact form label {
		font-weight:bold;
		display:block;
		color: #ffcc33;
	}
	#contact form .textfield {
		font:102% Helvetica, Arial, sans-serif ;
		margin:7px 0;
		height:25px;
		border:solid 0 #fff;
		padding: 10px 8px 0;
		width:272px;
		voice-family: "\"}\""; 
		voice-family:inherit;
		width:272px;
		color: #fff;
		display: block;
	}
	#contact form input.textfield {
		background: transparent url("/img/textfield_bg.gif") no-repeat;
	}
	#contact form textarea {
		font:102% Helvetica, Arial, sans-serif;
		margin:7px 0;
		height:101px;
		border:solid 0 #fff;
		padding: 8px;
		background: transparent url("/img/textarea_bg.gif") no-repeat fixed;
		width:272px;
		voice-family: "\"}\""; 
		voice-family:inherit;
		width:272px;
		overflow: auto;
		color: #fff;
	}
	#contact form textarea {
		background: #fff url("/img/textarea_bg.gif") no-repeat;
		overflow: auto;
		display: block;
	}
	#contact form .submit {
		background: transparent url('/img/submit.gif') no-repeat;
		margin:10px 0 0;
		height:35px;
		border:solid 0 #fff;
		width:288px;
		font-size:135%;
		color:#000;
		float:left;
		cursor: pointer;
	}

div#contactform_r {
	margin: 20px 0 0 340px;
	padding: 0 0 0 0;
	/*border-left: 1px solid #fff;*/
}
	#contact #content h3 {
		font-size: 32px;
		line-height: 36px;
		color: #fff;
		text-transform: uppercase;
		padding: 0 0 10px;
	}
	#contact #content ul {
		padding: 0 0 20px;
	}
	#contact #content ul li {
		font-size: 22px;
		line-height: 28px;
		color: #fff;
		text-transform: uppercase;
		padding: 0 0 0;
	}
	#contactform_r strong {
		color: #ffcc33;
	}
	#contactform_r a {
		color: #ffcc33;
	}

div.hr {
	margin: 30px 0;
	height: 1px;
	background: transparent;
	border-bottom: 1px dotted #ccc;
}
	div.hr hr {
	  display: none;
	}




/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 100 pixels and if there is room the will grow
    and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to solve some problems I experienced
    in Internet Explorer 6. */
	background-image: url(/images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  When positioning the mouse over one of the hot spots, the cursor should change.
	I've noticed that this varies from browser to browser though. */
	cursor: url(/images/cursors/cursor_arrow_left.cur), w-resize;
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(/images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35; /* Standard CSS3 opacity setting */
	-moz-opacity: 0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */
	filter: alpha(opacity = 35); /* Opacity for Internet Explorer. */
	zoom: 1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */
}

/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(/images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(/images/cursors/cursor_arrow_right.cur), e-resize;
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(/images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}

/* The scroll wrapper is always the same width and height as the containing element (div).
   Overflow is hidden because you don't want to show all of the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}

#makeMeScrollable div.scrollableArea *
{
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}