@charset "UTF-8";
/* CSS Document */

body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #000;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

a {
color: #FFF;

}

a:hover {
	color:#990000;
}

#news a {
	color:#cccc99;
	list-style:none;
	text-decoration:none;
}

#news a:hover {
	color:#999999;
}

#presspg a:hover {
color:#999966}



#presspg a, h3 {
color:#fff;
font-size:11px;
font-weight:bold;
text-decoration:none;
line-height:1px;
padding-top:10px;
 }
 
 
#press-content {
	position:relative;
	top:150px;
	left:40px;
	z-index:111;
	width:290px;
	height:320px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	} 

h0 {
color:#000000;
font-size:12px;
font-weight:bold;
line-height:15px;
padding-top:10px;
}

h1 {

color:#FFCC00;
font-size:13px;
font-weight:bold;
line-height:1px;
padding-top:10px;
}

h2 {

color:#CC0000;
font-size:12px;
font-weight:bold;
line-height:1px;
padding-top:10px;
}

h7 {
	color:#666666;
	font-size:12px;
	font-weight:bold;
	padding:10px 0px;
}



#news h2 {

color:#CC0000;
font-size:12px;
font-weight:bold;
line-height:1px;
padding-top:10px;
}

#bio a {
	color:#cccc99;
	list-style:none;
	text-decoration:none;
	}
#bio a:hover {
	color:#999999;
}

#bio-content {
	position:relative;
	top:150px;
	left:40px;
	z-index:111;
	width:290px;
	height:320px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}
#lesson-content h6 {

color:#FF9900;
font-size:13px;
font-weight:bold;
line-height:1px;
padding-top:10px;
}
#lesson-content {
	position:relative;
	top:100px;
	left:40px;
	z-index:112;
	width:290px;
	height:315px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}
	
	
#equip-content h8 {

color:#C3A51D;
font-size:13px;
font-weight:bold;
line-height:1px;
padding-top:7px;
}
#merch-content {
	position:relative;
	top:110px;
	left:-270px;
	z-index:111;
	width:590px;
	height:385px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}





	
#equip-content {
	position:relative;
	top:150px;
	left:35px;
	z-index:111;
	width:290px;
	height:320px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}



#container { 
	width: 970px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	height:600px;
	background: #FFFFFF;
	border:5px solid #CCC;
	margin: 70px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

#playlist1 {
	position:relative;
	width:600px;
	height:150px;
	z-index:101;
	top:-29px;
	left:-250px;
}

#playlist2 {
position:relative;
width:600px;
height:150px;
z-index:101;
top:-144px;
left:-250px;
}

#playlist3 {
position:relative;
width:600px;
height:150px;
z-index:101;
top:-230px;
left:-250px;
}

#legend {
	position:relative;
	width:250px;
	height:30px;
	z-index:117;
	top:60px;
	left:-240px;
	border: 0px solid #fff;
	visibility: visible;
	overflow: visible;
	font-size:10px;
}



#albumcover1 {
	position:relative;
	width:100px;
	height:100px;
	z-index:109;
	top:70px;
	left:-370px;
	border: 1px solid #fff;
	overflow: visible;
}

#albumcover2 {
position:relative;
width:100px;
height:100px;
z-index:110;
top:-47px;
left:-370px;
border: 1px solid #fff;
}

#albumcover3 {
position:relative;
width:100px;
height:100px;
z-index:110;
top:-133px;
left:-370px;
border: 1px solid #fff;
}




#content, #contactBox {
	position:relative;
	top:120px;
	left:40px;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:11px;
	overflow:hidden;
	width:290px;
	height:320px;
}






#phototype {
	position:relative;
	top:210px;
	left:-250px;
	z-index:107;
	width:470px;
	height:33px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
:bold;
	font-size:12px;
	overflow:hidden;
}



#photobox1 {
position:relative;
top:300px;
left:50px;
height:50px;
width:50px;
margin:0px;
}

#photobox2 {
position:relative;
top:250px;
left:500px;
height:50px;
width:50px;
}

#photobox3 {
position:relative;
top:100px;
left:200px;
height:50px;
width:50px;
}

#photobox4 {
position:relative;
top:-85px;
left:105px;
height:50px;
width:50px;
}




#photobox1 a {
background:color:#003366;
}
#tablehead h5{
	color:#990000;
	font:Arial, Helvetica, sans-serif;
	font-size:11px;
}
#tablehead {
	position:relative;
	top:148px;
	left:178px;
	z-index:101;
	width:470px;
	height:48px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:11px;
	overflow:hidden;
	background: url(../images/20.png) repeat;
}


#tabletop {
	position:relative;
	top:148px;
	left:178px;
	z-index:101;
	width:470px;
	height:33px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:14px;
	overflow:hidden;
}

#merchcontent1 {
	position:relative;
	top:100px;
	left:-270px;
	z-index:111;
	width:600px;
	height:320px;
	overflow:hidden;
	color:#000;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}
#merchcontent2 {
	position:relative;
	top:220px;
	left:130px;
	z-index:111;
	width:240px;
	height:120px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}
#contactadd {
	position:relative;
	top:150px;
	left:150px;
	z-index:111;
	width:250px;
	height:220px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}
#news-contents {
	position:relative;
	top:120px;
	left:40px;
	z-index:111;
	width:290px;
	height:320px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}
#link-cont a:hover {
	color:#666666;
	list-style:none;
	text-decoration:none;
	}	
#link-cont a {
	color:#FF0000;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	list-style:none;
	text-decoration:none;
	}
#link-cont  {
	position:relative;
	top:60px;
	left:420px;
	width:385px;
	height:310px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	}
#contentGigs {
	position:relative;
	top:142px;
	left:178px;
	z-index:101;
	width:470px;
	height:150px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	background: url(../images/20.png) repeat;
	}
	

	
	
#contentGigs h2{
	color:#CC3300;
	font-size:14px;
	font-weight:bold;
	line-height:1px;
	padding-top:10px;
}

#contact-thanks  {
	position:relative;
	top:180px;
	left:25px;
	z-index:105;
	width:270px;
	height:250px;
	overflow:hidden;
	color:#FFFFFF;
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	overflow:hidden;
	}

#contactBox {
	height:350px;
	top:110px;
	color: #999999;
}

#content p { 
padding-top:0px;
padding-right:15px;
padding-left:10px}

.scroll-track{
 height:10px;
 width:5px;
 background: #666666;
 cursor:pointer;
}

.scroll-handle{
 height:10px;
 width:5px;
 background:#333;
 cursor:pointer;
}


/* Navigation */
#nav {
	color:#FFFFFF;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:2px;
	position: relative;
	width: 970px;
	top: 535px;
	left:10px;
	z-index:999;
	margin:0;
	
}

#nav li {
list-style:none;
padding:0px;

}

#nav a {
color: #fff;
text-decoration: none;
text-align: left;
font-weight:bold;
padding-right:13px;
}

#nav a:hover { color:#666 };
#nav a:active { color:#666 };



.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	xmargin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	xmargin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


#index-contents {
color: #FFF;
xfont-weight:bold;
font-size:12px;
letter-spacing:1px;
width:200px;
height:50px;
top:530px;
left:90px;
position:relative;
}
/* PAGES -------------------------- */
/*INDEX */
#area1index {
	float: left; background: url(../images/background/home_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3index {
	float: right; background: url(../images/background/home_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2index {		background: url(../images/background/home_2.jpg) no-repeat left; }

#area2index a { text-decoration:none; }
#area2index a:hover { color:#666 }


/*NEWS */
#area1 {
	float: left; background: url(../images/background/news_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3 {
	float: right; background: url(../images/background/news_3.jpg) no-repeat left; 
	height:600px; width:345px; position:relative; top:0;z-index:2;}
	
#area2 { 
	background: url(../images/background/news_2.jpg) no-repeat top left;
}	
	
	

/* GIGS */
#area1-gigs {
	float: left; background: url(../images/background/gigs_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-gigs {
	float: right; background: url(../images/background/gigs_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-gigs {		background: url(../images/background/gigs_2.jpg) no-repeat left; }

/* PRESS */
#area1-press {
	float: left; background: url(../images/background/press_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-press {
	float: right; background: url(../images/background/press_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-press {		background: url(../images/background/press_2.jpg) no-repeat left; }
	
/* BIO */
#area1-bio {
	float: left; background: url(../images/background/bio_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-bio {
	float: right; background: url(../images/background/bio_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-bio {		background: url(../images/background/bio_2.jpg) no-repeat left; }
	
/* AUDIO */
#area1-audio {
	float: left; background: url(../images/background/audio_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-audio {
	float: right; background: url(../images/background/audio_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-audio {		background: url(../images/background/audio_2.jpg) no-repeat left;}

	
/* MERCH */
#area1-merch {
	float: left; background: url(../images/background/merch_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-merch {
	float: right; background: url(../images/background/merch_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-merch {		background: url(../images/background/merch_2.jpg) no-repeat left; }
	
/* LESSONS */
#area1-lessons {
	float: left; background: url(../images/background/lessons_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-lessons {
	float: right; background: url(../images/background/lessons_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-lessons {	background: url(../images/background/lessons_2.jpg) no-repeat left; }

/* EQUIP */
#area1-equip {
	float: left; background: url(../images/background/equip_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-equip {
	float: right; background: url(../images/background/equip_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-equip{		background: url(../images/background/equip_2.jpg) no-repeat left;}
	
/* PHOTOS */
#area1-photos {
	float: left; background: url(../images/background/photos_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-photos {
	float: right; background: url(../images/background/photos_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-photos{		background: url(../images/background/photos_2.jpg) no-repeat left;}
	
/* LINKS */
#area1-links {
	float: left; background: url(../images/background/links_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-links {
	float: right; background: url(../images/background/links_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-links {		background: url(../images/background/links_2.jpg) no-repeat left; }
	
/* CONTACT */
#area1-contact {
	float: left; background: url(../images/background/contact_1.jpg) no-repeat left; 
	height:600px; width:225px; }

#area3-contact {
	float: right; background: url(../images/background/contact_3.jpg) no-repeat left; 
	height:600px; width:345px; }
	
#area2-contact {	background: url(../images/background/contact_2.jpg) no-repeat left; }
	

/* Generic setting for Area 2 */	
#area2index, #area2, #area2-gigs, #area2-press, #area2-bio, #area2-audio,
#area2-merch,#area2-lessons, #area2-equip, #area2-photos, #area2-links, #area2-contact {
float:left; width:400px; height:600px; color:#FFF; z-index:2 }

.h7 { color: #FFF; font-size:12px; height:12px; padding-left:9px;
}

#footer {
	width:360px;
	height:15px;
	top:590px;
	left:0px;
	position:relative;
	color:#666;
	z-index:0;
	font-size:10px;
}
#copyright { float:left; width 300px; }
#superstudio { float:right; text-align:right;}
#superstudio a { color:#666; text-decoration:none;}