/* CSS Document */

body {
	margin: 0px auto 0px auto;
	padding: 0px;
	text-align: left;
	background:#000000 url("../images/bg.jpg") top no-repeat;
	font:12px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #ffffff;
	}
	
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,div,dd,dt,dl {
	margin:0px;
	padding:0px;
	list-style:none;
	}

h1 { font-size:14px; font-weight: bold; color: #FF0000; padding: 0px 26px 15px 40px;}
h2 { font-size:12px; font-weight: bold; color: #FF0000; padding: 0px 26px 15px 40px;}

a { color: #ff0000;
	text-decoration:underline;
	}

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



/*-------------------- classes --------------------*/

.clear	{ 
	clear:both;
	}

div.clear	{ 
	height:.01em; 
	overflow:hidden; 
	}

p.back-to-top {
	text-align:right;
	padding-right:30px;
	}

img.img-left { 
	float:left; 
	margin:5px 15px 10px 0px;
	}

img.img-right { 
	float:right; 
	margin:5px 0px 5px 10px; 
	}

p.right-text {
	padding: 64px 40px 0 25px;
	}
	
/*-------------------- end classes --------------------*/



/* ------------------------ form elements ------------------------ */

form {
	width:280px;
	margin-left:0px; /* set margin left */
	border:none;
	}
		
input { 
	background-color:#333333 !important; /* to prevent highlighting by Google Toolbar */
	border:1px solid #FFFFFF;
	color:#faf2de;
	width:275px; /* 5 pixles smaller than form width !important */
	height:20px;
	line-height:50px;
	margin-bottom:2px; /* sets vertical spacing between fields */
	padding-top:2px; /* vertically position text in input/textarea field */
	padding-bottom:2px;
	font:11px Verdana, Arial, Helvetica, sans-serif; 
	}


/* ------------------------ end form elements ------------------------ */



/* ------------------------ main contact form ------------------------ */

#contact-main {
	margin:30px 0 10px 80px;
	}

#contact-main fieldset {
	border:0px;
	}

#contact-main label {
	display:block;
	font-size:1em;
	margin-bottom:15px;
	position:relative;
	text-align:right;
	width:220px;
	}
	
#contact-main label input, #contact-main label textarea, #contact-main label select {
	left:110%;
	position:absolute;
	top:-4px;
	width:250px;
	}
	
#contact-main label img {
	left:110%;
	position:absolute;
	top:-4px;
	width:150px;
	height:40px;
	}

#contact-main label select {
	width:250px;
	height:22px;
	}

#contact-main label textarea {
	height:80px;
	overflow:auto;
	}

/* ------------------------ end main contact form ------------------------ */



/* ------------------------ submit button form elements ------------------------ */ 

input.submit, input.submit-contact-main { 
	background:url("../images/btn-submit.jpg");
	width:75px;
	height:25px;
	cursor:pointer; 
	padding:0;
	margin:0px 0 0 243px;
	}
	
input.clear-contact-main { 
	background:url("../images/btn-clear.jpg");
	width:75px;
	height:25px;
	cursor:pointer; 
	padding:0;
	margin:10px 0 0 243px;
	}
	
input.submit-email { 
	background:url("../images/btn-submit.jpg");
	border:none;
	width:75px;
	height:25px;
	cursor:pointer; 
	padding:0;
	margin:3px 0 0 202px;
	}

/* ------------------------ end submit button form elements ------------------------ */



/* ------------------------ home page styles ------------------------ */

#container { 
	width:1020px; 
	margin:0px auto 0px auto;
	}
	
#masthead-signupform {
	background-image:url("../images/masthead-new.jpg");
	width:1020px;
	height:145px;
	position:relative;
	}
	#masthead-signupform a { width:264px; height:100px; top:15px; left:34px; position:absolute; }
		#masthead-signupform a span { display:none; }

#signup-form {
	width:280px;
	padding:47px 0 0 700px ;
	}
	
#masthead {
	background-image:url("../images/masthead.jpg");
	width:1020px;
	height:145px;
	position:relative;
	}
	#masthead a { width:264px; height:100px; top:15px; left:34px; position:absolute; }
		#masthead a span { display:none; }

#flash { padding:47px 0 0 22px; }

#podcast {
	background:#20282f url("../images/index-podomatic.jpg") top left no-repeat;
	width:345px;
	height:432px;
	float:left;
	}
	#playlist {
		width:320px;
		height:372px;
		margin:45px 0 0 5px;
		}

#body-contain {
	width:1020px;
	background:url("../images/bkgd-2col.jpg") repeat-y scroll 0 0 ;
	}

#body-contain:after { 
	content:"."; 
	display:block; 
	height:0;
	clear:both; 
	visibility:hidden;
	}

#index-2-col-end {
	background:url("../images/index-2-col-bottom.jpg") no-repeat;
	width:1020px;
	height:40px;
	}
 
#welcome p {
	padding: 0px 26px 14px 40px;
	}
	
#releases-index {
	padding-top:64px;
	background:url("../images/index-title-releases.jpg") top no-repeat;
	width:345px;
	float:left;
	}
	#releases-index p {
		margin:0px 25px 20px 25px;
		}
	.releases-divider {
		background:url("../images/img-divider.jpg") bottom no-repeat;
		width:280px;
		height:1px;
		margin:0px 25px 15px 25px;
		}

#three-columns {
	background:url("../images/bkgd-3col.jpg") repeat-y scroll 0 0;
	width:1020px;
	}
	
#events-index {
	padding-top:64px;
	background:url("../images/index-title-events.jpg") top no-repeat;
	width:345px;
	display:inline;
	float:left;
	}
	#events-index p {
		margin:0px 25px 38px 40px;
		}
	.events-divider {
		background:url("../images/img-divider.jpg") bottom no-repeat;
		width:280px;
		height:1px;
		margin:0px 25px 21px 40px;
		}	

#chart-index {
	padding-top:64px;
	background:url("../images/index-title-chart.jpg") top no-repeat;
	width:330px;
	display:inline;
	float:left;
	}
	#chart-index ul {
		padding:0px 25px 5px 25px;
		font:11px/16px Verdana, Arial, Helvetica, sans-serif;
		color:#FFFFFF; 
		}
		#chart-index li {
			background:transparent url("../images/bullet.gif") 0px 4px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:20px; /* pushes text to the right to display bg img */
			padding-bottom:10px;
			}
	#chart-index p {
		margin: 0px 40px 5px 25px;
		}
		
#youtube-video {
	float:left;
	padding: 30px 20px 0 25px;
	}
	#youtube-video p {
		color:#ffffff;
		background-color:#ed2224;
	}

/* ------------------------ end home page styles ------------------------ */



/* ------------------------ network icons for all pages ------------------------ */

#network-icons {
	background:url("../images/hawt-network-icons.jpg") top no-repeat;
	width:345px;
	height:287px;
	position:relative;
	float:left;
	}
	#network-icons #podomatic a {
		height:70px;
		width:70px;
		top:64px;
		left:25px;
		position:absolute;
		}
		#network-icons #podomatic a:hover { background:url("../images/icon-hc-over.jpg"); }
		#network-icons #podomatic a span { display:none; }
	#network-icons #soundcloud a {
		height:70px;
		width:70px;
		top:64px;
		left:130px;
		position:absolute;
		}
		#network-icons #soundcloud a:hover { background:url("../images/icon-sc-over.jpg"); }
		#network-icons #soundcloud a span { display:none; }
	#network-icons #youtube a {
		height:70px;
		width:70px;
		top:64px;
		left:235px;
		position:absolute;
		}
		#network-icons #youtube a:hover { background:url("../images/icon-yt-over.jpg"); }
		#network-icons #youtube a span { display:none; }
	#network-icons #facebook a {
		height:70px;
		width:70px;
		top:179px;
		left:25px;
		position:absolute;
		}
		#network-icons #facebook a:hover { background:url("../images/icon-fb-over.jpg"); }
		#network-icons #facebook a span { display:none; }
	#network-icons #twitter a {
		height:70px;
		width:70px;
		top:179px;
		left:130px;
		position:absolute;
		}
		#network-icons #twitter a:hover { background:url("../images/icon-tw-over.jpg"); }
		#network-icons #twitter a span { display:none; }
	#network-icons #myspace a {
		height:70px;
		width:70px;
		top:179px;
		left:235px;
		position:absolute;
		}
		#network-icons #myspace a:hover { background:url("../images/icon-ms-over.jpg"); }
		#network-icons #myspace a span { display:none; }
		

/* ------------------------ end network icons for all pages ------------------------ */



/* ------------------------ sub page styles ------------------------ */

#container-sub {
	background:url("../images/bg-wrap-subpage.jpg");
	width:951px; 
	margin:0px auto 0px auto;
	}

#column-left {
	width:675px;
	float:left;
	}
	
	#column-left p {
		color:#FFFFFF;
		padding: 0px 26px 15px 40px;
		}		
	#column-left h1.toppadding {
		padding-top:90px;
		}
		
	/* single column list */
	#column-left ul { 
		padding:0px 0px 0px 50px;
		font:11px/16px Verdana, Arial, Helvetica, sans-serif;
		color:#FFFFFF; 
		}
		#column-left ul li { 
			background:transparent url("../images/bullet.gif") 0px 4px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:20px; /* pushes text to the right to display bg img */
			padding-bottom:10px;
			}

/* -------------------------------------------------- */
		
#column-right {
	width:345px;
	float:right;
	}
	
	#column-right #sub-icons {
		background:url("../images/hawt-network-icons.jpg") top no-repeat;
		width:345px;
		height:287px;
		position:relative;
		}
		#column-right #sub-icons #podomatic a {
			height:70px;
			width:70px;
			top:64px;
			left:25px;
			position:absolute;
			}
			#column-right #sub-icons #podomatic a:hover { background:url("../images/icon-hc-over.jpg"); }
			#column-right #sub-icons #podomatic a span { display:none; }
		#column-right #sub-icons #soundcloud a {
			height:70px;
			width:70px;
			top:64px;
			left:130px;
			position:absolute;
			}
			#column-right #sub-icons #soundcloud a:hover { background:url("../images/icon-sc-over.jpg"); }
			#column-right #sub-icons #soundcloud a span { display:none; }
		#column-right #sub-icons #youtube a {
			height:70px;
			width:70px;
			top:64px;
			left:235px;
			position:absolute;
			}
			#column-right #sub-icons #youtube a:hover { background:url("../images/icon-yt-over.jpg"); }
			#column-right #sub-icons #youtube a span { display:none; }
		#column-right #facebook a {
			height:70px;
			width:70px;
			top:179px;
			left:25px;
			position:absolute;
			}
			#column-right #facebook a:hover { background:url("../images/icon-fb-over.jpg"); }
			#column-right #facebook a span { display:none; }
		#column-right #sub-icons #twitter a {
			height:70px;
			width:70px;
			top:179px;
			left:130px;
			position:absolute;
			}
			#column-right #sub-icons #twitter a:hover { background:url("../images/icon-tw-over.jpg"); }
			#column-right #sub-icons #twitter a span { display:none; }
		#column-right #myspace a {
			height:70px;
			width:70px;
			top:179px;
			left:235px;
			position:absolute;
			}
			#column-right #myspace a:hover { background:url("../images/icon-ms-over.jpg"); }
			#column-right #myspace a span { display:none; }

	#column-right p {
		color:#FFFFFF;
		padding-top:0px;
		margin:0px 30px 10px 30px;
		}
		
	#column-right ul {
		padding:0px 35px 5px 25px;
		font:11px/16px Verdana, Arial, Helvetica, sans-serif;
		color:#FFFFFF; 
		}
		#column-right li {
			background:transparent url("../images/bullet.gif") 0px 4px no-repeat; /* 0px = horizontal position for left, 6px = vertical position from top */
			padding-left:20px; /* pushes text to the right to display bg img */
			padding-bottom:10px;
			}
	
	#releases-sub {
		padding-top:64px;
		background:url("../images/sub-title-releases.jpg") top no-repeat;
		width:345px;
		display:inline;
		float:left;
		}
		#releases-sub p { margin:0px 25px 20px 25px; }
		#releases-sub.releases-divider { background:url("../images/img-divider.jpg") bottom no-repeat; width:280px; height:1px; margin:0px 25px 15px 25px; }
	
	#event-sub {
		padding-top:64px;
		background:url("../images/sub-title-events.jpg") top no-repeat;
		width:345px;
		display:inline;
		float:left;
		}
		#event-sub p { margin:20px 40px 38px 25px; }
		#event-sub.event-divider { background:url("../images/img-divider.jpg") bottom no-repeat; width:280px; height:1px; margin:0px 25px 15px 25px; }
			
	#chart-sub {
		padding-top:64px;
		background:url("../images/sub-title-chart.jpg") top no-repeat;
		width:345px;
		display:inline;
		float:left;
		}
		#chart-sub p { margin: 0px 40px 5px 25px; }
		#chart-sub.chart-divider { background:url("../images/img-divider.jpg") bottom no-repeat; width:280px; height:1px; margin:0px 25px 21px 40px; }

/* ------------------------ subhead framework ------------------------ */

body#index #welcome { background:url("../images/index-title-welcome.jpg") top no-repeat; height:64px; width:675px; float:left; }
body#about #subhead { background:url("../images/sub-title-about.jpg") no-repeat; height:64px; }
body#hawt-crew #subhead { background:url("../images/sub-title-hawt.jpg") no-repeat; height:64px; }
	body#hawt-la #subhead { background:url("../images/sub-title-hawtla.jpg") no-repeat; height:64px; }
	body#hawt-sf #subhead { background:url("../images/sub-title-hawtsf.jpg") no-repeat; height:64px; }
	body#hawt-sd #subhead { background:url("../images/sub-title-hawtsd.jpg") no-repeat; height:64px; }
body#events #subhead { background:url("../images/sub-title-upcoming.jpg") no-repeat; height:64px; }
body#music #subhead { background:url("../images/sub-title-music.jpg") no-repeat; height:64px; }
body#media #subhead { background:url("../images/sub-title-media.jpg") no-repeat; height:64px; }
body#gear #subhead { background:url("../images/sub-title-gear.jpg") no-repeat; height:64px; }
body#contact #subhead { background:url("../images/sub-title-contact.jpg") no-repeat; height:64px; }
	body#thanks #subhead { background:url("../images/sub-title-thankyou.jpg") no-repeat; height:64px; }
body#top10 #subhead { background:url("../images/sub-title-top10.jpg") no-repeat; height:64px; }

/* ------------------------ end sub page styles ------------------------ */



/* ------------------------ banner framework ------------------------ */

body#index #banner { background:#ffffff url("../images/index-banner.jpg") top left no-repeat; width:675px; height:432px; float:left; }	

body#about #banner { background:#ffffff url("../images/sub-banner-la.jpg") top left no-repeat; width:1020px; height:315px; } 
body#hawt-crew #banner { background:#ffffff url("../images/sub-banner-la.jpg") top left no-repeat; width:1020px; height:315px; } 
body#hawt-la #banner { background:#ffffff url("../images/sub-banner-la.jpg") top left no-repeat; width:1020px; height:315px; }
body#hawt-sf #banner { background:#ffffff url("../images/sub-banner-sf.jpg") top left no-repeat; width:1020px; height:315px; }
body#hawt-sd #banner { background:#ffffff url("../images/sub-banner-sd.jpg") top left no-repeat; width:1020px; height:315px; }
body#events #banner { background:#ffffff url("../images/sub-banner-sf.jpg") top left no-repeat; width:1020px; height:315px; }
body#music #banner { background:#ffffff url("../images/sub-banner-la.jpg") top left no-repeat; width:1020px; height:315px; }
body#media #banner { background:#ffffff url("../images/sub-banner-sd.jpg") top left no-repeat; width:1020px; height:315px; }
body#gear #banner { background:#ffffff url("../images/sub-banner-sf.jpg") top left no-repeat; width:1020px; height:315px; }
body#contact #banner { background:#ffffff url("../images/sub-banner-la.jpg") top left no-repeat; width:1020px; height:315px; }
body#thanks #banner { background:#ffffff url("../images/sub-banner-sd.jpg") top left no-repeat; width:1020px; height:315px; }
body#top10 #banner { background:#ffffff url("../images/sub-banner-sd.jpg") top left no-repeat; width:1020px; height:315px; }

/* ------------------------ end banner framework ------------------------ */



/* ------------------------ bottom-wrap ------------------------ */

#footer {
	background:url("../images/footer.jpg") top no-repeat;
	height:123px;
	width:1020px;
	height:145px;
	clear:both;
	}
	
#footer p {
	color:#FFFFFF;
	padding:60px 80px 0 80px;
	}
	
#footer a {
	color:#FFFFFF;
	text-decoration:none;
	}
	
#footer a:hover {
	color:#ff0000;
	text-decoration:none;	
	}

/* ------------------------ end bottom-wrap ------------------------ */
	


/*-------------------- NAVIGATION FRAMEWORK --------------------*/
/*--------------------Horizontal Sprite Navigation--------------------*/

#nav {
	background:url("../images/nav.jpg") no-repeat;
	width:1020px;
	height:25px;
	margin:0;
	padding:0;
	position:relative;
	z-index: 9999;
	}

#nav span { display:none; }

#nav li { float:left; list-style:none; _display:inline; position:relative; }

#nav li, #nav a { height:25px; display:block; } /* change height here also */

#nav-01 { width: 88px;}
#nav-02 { width: 196px;}
#nav-03 { width: 167px;}
#nav-04 { width: 189px;}
#nav-05 { width: 91px;}
#nav-06 { width: 92px;}
#nav-07 { width: 84px;}
#nav-08 { width: 113px;}


/*-------------- (-20px) X position of button / (-27px) height of image from above ------------- */
#nav-01 a:hover { background:url("../images/nav.jpg") 0px -25px no-repeat; }
#nav-02 a:hover { background:url("../images/nav.jpg") -88px -25px no-repeat; }
#nav-03 a:hover { background:url("../images/nav.jpg") -284px -25px no-repeat; }
#nav-04 a:hover { background:url("../images/nav.jpg") -451px -25px no-repeat; }
#nav-05 a:hover { background:url("../images/nav.jpg") -640px -25px no-repeat; }
#nav-06 a:hover { background:url("../images/nav.jpg") -731px -25px no-repeat; }
#nav-07 a:hover { background:url("../images/nav.jpg") -823px -25px no-repeat; }
#nav-08 a:hover { background:url("../images/nav.jpg") -907px -25px no-repeat; }


/* ------------------------ son of suckerfish: horizontal sprite nav ------------------------ */
#nav li ul {
	position:absolute;
	left:-9999px;
	padding-right:1px; /* Fixes one px spacing for border-right in FF */
	background-color:#333333;	/* Background color of drop down nav - add more styles (i.e. background image) if you want */
	}

#nav li ul li { 
	height:25px; /* Height of each drop down nav item */
	border:1px solid #FFFFFF;
	border-top:none;
	}	

#nav li ul li a {
	width:100%;
	height:25px;	/* Height of each drop down nav item, should match above */
	line-height:25px;	 /* Height of each drop down nav item again, should match above */
	}

#nav li ul li a span {
	display:block;
	padding-left:23px;
	}

/* Drop down link styles */
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
	font-size:1.0em;
	color:#FFFFFF;
	text-decoration:none;
	}

#nav li:hover ul, #nav li.sfHover ul	{ left: auto; }

/* Hover styles for drop down items */
#nav-03 ul a:hover, #nav-06 ul a:hover { 
	background-image:none;
	background-color:#ed2224;
	color:#FFFFFF;
	text-decoration:none;
	}

/* width of drop down nav - choose width that allows items to display on one line */
#nav-03 ul, #nav-03 li { width:167px; }		
#nav-06 ul, #nav-06 li { width:167px; }

/*-------------------- END NAVIGATION FRAMEWORK --------------------*/



/*-------------------- LIGHTBOX --------------------*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/*-------------------- END LIGHTBOX --------------------*/