/*====================================================================*/
/* Stylesheet created by Jonny Haynes - www.jonnyhaynes.com */
/* me[@]jonnyhaynes.com - August 2009 */
/*====================================================================*/
 
/* 
--- PLEASE NOTE ---
 
Please check the 'General' section of this stylesheet before creating any small custom styles.
The styles you want may already be in there.
 
Please put any Internet Explorer specific styles/hacks/fixes in 'ie.css'.
 
--- CONTENTS ---
 
1) All
2) Body
3) General
4) Clearfix
5) sIFR
6) Structural
 
7) Header
8) Primary Content
9) Secondary Content
10) Footer
 
##) Styles that need putting in order
 
*/
	
/* ------------------------------------------------------------------ */
/* =All */
/* ------------------------------------------------------------------ */
 
* { margin: 0; padding: 0; }
 
/* ------------------------------------------------------------------ */
/* =Body */
/* ------------------------------------------------------------------ */

body {
	background: #a3beec url(/graphics/general/background.gif) repeat-x 0 0 fixed;
	font: normal 101%/101% Tahoma, Arial, Verdana, Sans-serif;
	color: rgb(0, 0, 0);
	}
	
/* ------------------------------------------------------------------ */
/* =General */
/* ------------------------------------------------------------------ */

p {
	margin: 0 0 20px;
	font-size: 0.8em;
	line-height: 1.6;
	}

/* ------------------------------------------------------------------ */
/* =Structural */
/* ------------------------------------------------------------------ */

.wrap {
	margin: 0 auto;
	padding: 0 10px;
	width: 940px;
	position: relative;
	}
	
div#clouds-wrapper {
	background: transparent url(/graphics/general/white-clouds.png) repeat-x 50% 67px;
	height: 236px;
	width: 100%;
	position: fixed;
	}
	
div#flying-plug {
	background: transparent url(/graphics/general/plug.gif) no-repeat 0 0;
	margin: 0 0 0 -86px;
	height: 152px;
	width: 150px;
	position: fixed;
	top: 62px;
	}
	
div#header {
	background: transparent url(/graphics/header/black-cloud.png) no-repeat 0 42px;
	padding: 0 40px 0 0;
	position: fixed;
	float: right;
	z-index: 100;
	}
	
div#back-hills {
	background: transparent url(/graphics/general/back-hills.png) no-repeat 50% 0;
	height: 300px;
	width: 100%;
	position: fixed;
	bottom: 0;
	}
	
div#scenery {
	background: transparent url(/graphics/general/scenery.png) no-repeat 50% 0;
	margin: 0 0 0 -25px;
	height: 400px;
	width: 100%;
	position: fixed;
	bottom: 50px;
	text-align: center;
	}
	
div#electric-bolt {
	background: transparent url(/graphics/general/electric-bolt.gif) no-repeat 50% 0;
	margin: -70px 0 0 -400px;
	height: 193px;
	width: 100%;
	position: absolute;
	z-index: -25;
	}
	
div#beam {
	background: transparent url(/graphics/general/beam.gif) no-repeat 50% 0;
	margin: 0 0 0 459px;
	height: 1000px;
	width: 100%;
	position: fixed;
	bottom: 405px;
	}
	
div#content {
	background: rgba(244, 253, 4, 0.5) url(/graphics/content/background.gif) repeat 0 0 fixed;
	padding: 67px 20px 522px;
	width: 420px;
	border: 1px solid rgb(134, 140, 174);
	position: absolute;
	top: 0;
	left: 400px;
	overflow: auto;
	}
	
div#front-hill {
	background: transparent url(/graphics/general/front-hill.png) no-repeat 50% 0;
	margin: 0 0 0 350px;
	height: 280px;
	width: 100%;
	position: fixed;
	bottom: -50px;
	}
	
div#tree {
	background: transparent url(/graphics/general/tree.png) no-repeat 50% 0;
	margin: 0 0 0 -75px;
	height: 502px;
	width: 100%;
	position: fixed;
	bottom: 0;
	}
	
div#wall {
	background: transparent url(/graphics/general/wall.png) no-repeat 50% 0;
	margin: 0 0 0 75px;
	height: 339px;
	width: 100%;
	position: fixed;
	bottom: 0;
	}	

div#footer {
	background: transparent url(/graphics/footer/background.png) repeat-x 0 0;
	height: 37px;
	width: 100%;
	position: fixed;
	bottom: 0;
	-webkit-box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25);
	box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25); /* CSS3 goodness for when it gets implemented */
	}

div#top-bar {
	background: transparent url(/graphics/footer/background.png) repeat-x 0 0;
	height: 37px;
	width: 100%;
	position: fixed;
	top: 0;
	-webkit-box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25);
	box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.25); /* CSS3 goodness for when it gets implemented */
	}
	
/* ------------------------------------------------------------------ */
/* =Header */
/* ------------------------------------------------------------------ */
	
div#header h1 a {
	background: transparent url(/graphics/header/logo.png) no-repeat 0 0;
	margin: 67px 0 0 80px;
	height: 93px;
	width: 243px;
	text-indent: -1000em;
	display: block;
	}

div#header ul {
	margin: 10px 0 0 105px;
	height: 37px;
	width: 194px;
	list-style: none;
	display: block;
	-webkit-box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15); /* CSS3 goodness for when it gets implemented */
	position: relative;
	}
	
div#header li a {
	text-indent: -1000em;
	}
	
div#header li a span.button {
	background: rgba(0, 0, 0, 0.5);
	height: 37px;
	width: 38px;
	float: left;
	border-left: 1px solid rgb(244, 253, 4);
	}
	
div#header li:first-child a span.button {
	border-left: 0;
	}
	
div#header li a#news span.button {
	background-image: url(/graphics/header/navigation/news.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	}
	
div#header li a#news span.text {
	background: transparent url(/graphics/header/navigation/news-span.png) no-repeat 0 0;
	height: 41px;
	width: 84px;
	position: absolute;
	top: 46px;
	left: -56px;
	}
	
div#header li a#gigs span.button {
	background-image: url(/graphics/header/navigation/gigs.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	}
	
div#header li a#gigs span.text {
	background: transparent url(/graphics/header/navigation/gigs-span.png) no-repeat 0 0;
	height: 67px;
	width: 48px;
	position: absolute;
	top: 46px;
	left: 18px;
	}
	
div#header li a#band span.button {
	background-image: url(/graphics/header/navigation/band.png);
	background-position: 50% 100%;
	background-repeat: no-repeat;
	}
	
div#header li a#band span.text {
	background: transparent url(/graphics/header/navigation/band-span.png) no-repeat 0 0;
	height: 80px;
	width: 82px;
	position: absolute;
	top: 46px;
	left: 70px;
	}
	
div#header li a#gallery span.button {
	background-image: url(/graphics/header/navigation/gallery.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	}
	
div#header li a#gallery span.text {
	background: transparent url(/graphics/header/navigation/gallery-span.png) no-repeat 0 0;
	height: 55px;
	width: 63px;
	position: absolute;
	top: 46px;
	left: 122px;
	}

/*	
div#header li a#merchendise span.button {
	background-image: url(/graphics/header/navigation/merchendise.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	}
	
div#header li a#merchendise span.text {
	background: transparent url(/graphics/header/navigation/merchendise-span.png) no-repeat 0 0;
	height: 63px;
	width: 104px;
	position: absolute;
	top: 46px;
	left: 155px;
	}
*/
	
div#header li a#contact span.button {
	background-image: url(/graphics/header/navigation/contact.png);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	}
	
div#header li a#contact span.text {
	background: transparent url(/graphics/header/navigation/contact-span.png) no-repeat 0 0;
	height: 63px;
	width: 104px;
	position: absolute;
	top: 46px;
	left: 170px;
	}
	
div#header li a:hover span.button,
div#header li a:focus span.button {
	background-color: rgb(0, 0, 0);
	}
	
div#header li a:hover span.text,
div#header li a:focus span.text {
	display: block;
	}
	
/* ------------------------------------------------------------------ */
/* =Footer */
/* ------------------------------------------------------------------ */
	
div#footer p {
	background: rgba(244, 253, 4, 0.85);
	margin: 0 0 0 80px;
	padding: 5px 10px;
	width: 320px;
	font-size: 0.619em;
	line-height: 1.4;
	}
	
div#footer a {
	font-weight: bold;
	color: rgb(0, 0, 0);
	text-decoration: none;
	}
	
div#footer a:hover,
div#footer a:focus {
	text-decoration: line-through;
	}