﻿body 
{
	font-family: Tahoma, Verdana, Arial;
	font-size: 8pt;
	color: #fff;
	margin: 0 auto;
	padding: 0;
	background-color: #282825;
	color: #aeaea2;
}

a
{
	color: #ffcc66;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

.DoNotDisplay
{
	display: none;
}

/* MUST BE MOVED TO CONTENT */
textarea
{
	width: 95%;
	height: 150px;
}

h1 
{
	font-size: 140%;
	margin: 0;
	padding: 0;
}

h2 
{
	margin: 0;
	padding: 0;
	font-size: 110%;
}

h3
{
	margin: 0;
	padding: 0;
	font-size: 100%;
}

.right
{
	float: right;
}

.left
{
	float: left;
}


div.row 
{
	clear: both;
	width: 100%;
}

div.row span.label
{
	float: left;
	width: 120px;
	text-align: right;
}

div.row span.formw
{
	float: right;
	width: 397px;
	text-align: left;
}



input, select, textarea
{
	margin: 0;
	padding: 0 0 0 3px;
	font-family: Arial, Verdana, Times New Roman;
	font-size: 8pt;
}

input.txtfield
{
	border: solid 1px #999;
}

input.button
{
	border: solid 1px #999;
}

#container
{
    margin: 0 auto;
	width: 995px;
	border-left: solid 1px #000;
	border-right: solid 1px #000;
}

    #header
    {
        position: relative;
    	height: 81px;
    }
        #header .counterspan
        {
            position: absolute;
            top: 16px; 
            right: 15px;
            height: 49px;
            font-size: 38px;
        }
            .counterspan span.counter 
            {
                float: left;
                display: block;
                background-image: url(../images/counters.gif);
                background-repeat: no-repeat;
                width: 34px;
                height: 49px;
                text-indent: -10000px;
            }
            .counterspan span.counter_0 { background-position: left top; }
            .counterspan span.counter_1 { background-position: left -49px; }
            .counterspan span.counter_2 { background-position: left -98px; }
            .counterspan span.counter_3 { background-position: left -147px; }
            .counterspan span.counter_4 { background-position: left -196px; }
            .counterspan span.counter_5 { background-position: left -245px; }
            .counterspan span.counter_6 { background-position: left -294px; }
            .counterspan span.counter_7 { background-position: left -343px; }
            .counterspan span.counter_8 { background-position: left -392px; }
            .counterspan span.counter_9 { background-position: left -441px; }
        #nav_container
        {
            background: url(../images/bg_nav.jpg) no-repeat left top;
	        width: 995px;
	        height: 38px;
        }
        #nav 
        {
            float: left;
            height: 38px;
            margin: 0;
            margin-left: 256px;
            display: inline;
            padding: 0;
            list-style: none;
            vertical-align: middle;
        }
            #nav li
            {
	            float: left;
	            margin: 0;
	            padding: 0;
	            font-weight: bold;
            }
                #nav li a
                {
	                display: block;
	                margin: 0 19px 0 0;
	                padding: 0;
	                text-decoration: none;
	                border-bottom: none;
	                overflow: hidden;
	                height: 38px;
	                text-indent: -10000px;
                }
					#nav li a.NavHome 
					{
						width: 50px;
						background: url(../images/nav_home.jpg) no-repeat left top;
					} 
					#nav li a.NavBeats 
					{
						width: 55px;
						background: url(../images/nav_beats.jpg) no-repeat left top; 
					} 
					#nav li a.NavStore 
					{
						width: 55px;
						background: url(../images/nav_store.jpg) no-repeat left top;
					}
					#nav li a.NavFeatures 
					{
						width: 83px;
						background: url(../images/nav_features.jpg) no-repeat left top;
					} 
					#nav li a.NavEvents 
					{
						width: 64px;
						background: url(../images/nav_events.jpg) no-repeat left top;
					}
					#nav li a.NavReviews 
					{
						width: 73px;
						background: url(../images/nav_reviews.jpg) no-repeat left top;
					}
					#nav li a.NavBlog 
					{
						width: 47px;
						background: url(../images/nav_blog.jpg) no-repeat left top;
					}

    #wrapper { clear: both; }
		
		.centeredBody
		{
			width: 100%;
			padding-top: 100px;
			text-align: center;
		}
			.centeredBody table
			{
				margin: 0 auto;
			}
        
        #sidebar_wrapper
        {
            float: left;
            width: 257px;
	        background-color: #5d5d56;
	        border-top: 1px solid #181816;
        }
            #sidebar
            {
	            margin: 5px 5px 5px 4px;
	            padding: 1px 1px 55px 1px;
	            background: url(../images/sidebar_bg.gif) repeat-y left top;
            }

        #content
        {
            float: left;
            padding: 5px;
            padding-right: 0;
        }
            #ad_hor 
            {
                margin: 0 0 5px 0;
            }

            #ad_ver 
            {
                float: left; 
                width: 120px;
                margin: 0 0 0 5px;
                background-color: #282825; 
            }
            
            #ad_bottom
            {
                clear: both;
                margin: 0 0 5px 262px;
            }    
            
            #bodyTopborder
            {
				background: url(../images/body_topborder.gif) no-repeat left top;
				padding-top: 10px;
				float: left;
            }
            
            #bodyBottomborder
            {
				background: url(../images/body_bottomborder.gif) no-repeat left bottom;
				padding-bottom: 6px;
				float: left;
            }
            
            #body 
            {
                float: left; 
                width: 591px;
                min-height: 200px;
                padding: 0 6px;
                display: inline;
                background: url(../images/body_bg.gif) repeat-y left top;
            }
            
            #patternedBackground
            {
				float: left;
				min-height: 200px;
				background: url(../images/body_bg_pattern.gif) repeat-y left top;
            }
            
            .contentPager
			{
				float: left;
				display: inline;
				margin: 0 8px;
				padding: 5px 0;
				width: 575px;
				font-weight: bold;
				text-align: right;
			}
    #footer
    {
        clear: both;
        text-align: center;
        background-color: #484845;
        padding: 10px 0;
    }
#splash 
{
	width: 530px;
	height: 200px;
	background-image: url(../../UI/Images/home_splash.jpg);
	margin-bottom: 3px;
}

.contentbox
{
	margin-bottom: 3px;
	padding: 0 4px;
}
	.topborder
	{
		background: url(../images/contentbox_topborder.gif) no-repeat top left;
		width: 238px;
		padding-top: 9px;
	}
	
	.body
	{
		font-weight: bold;
		padding: 8px 0 0 16px;
		background: url(../images/contentbox_body.gif) repeat-y top left;
	}
		.body p
		{
			margin: 0;
			padding-bottom: 7px;
		}
		
		.favorites
		{
			padding: 0;
			margin: 0;
			width: 206px;
			list-style: none;
		}
			.favorites li
			{
				margin: 0;
				padding: 0 0 3px 0;
			}
	
	.bottomborder
	{
		background: url(../images/contentbox_bottomborder.gif) no-repeat bottom left;
		width: 238px;
		padding: 0 0 9px 0;
	}
	
	p.bio
	{
	    clear: both;
	    margin-left: 10px;
	}
	    p.bio img
	    {
	        margin-left: 10px;
	    }
	
	#spotlightTitle
	{
		height: 26px;
		width: 238px;
		text-indent: -5000000px;
		background: url(../images/spotlight_title.gif) no-repeat top left;
	}
		.spotlightTopborder
		{
			background: url(../images/spotlight_topborder.gif) no-repeat top left;
			padding-top: 13px;
		}
		.spotlightTopRightborder
		{
			background: url(../images/spotlight_top_rightborder.gif) no-repeat top right;
			padding-right: 12px;
			height: 186px;
		}
		.spotlightTopLeftborder
		{
			background: url(../images/spotlight_top_leftborder.gif) no-repeat top left;
			padding-left: 10px;
			height: 186px;
		}
		.spotlightBottomborder
		{
			background: url(../images/contentbox_bottomborder.gif) no-repeat bottom left;
			padding-bottom: 9px;
		}
		
		.spotlightInfoBorder
		{
			background: url(../images/contentbox_body.gif) repeat-y top left;
			padding-left: 10px;
			width: 228px;
			min-height: 100px;
		}
		
		
		
		.spotlightImage
		{
			padding-bottom: 15px;
			background: black url(../images/spotlight_midborder.gif) no-repeat bottom left;
			height: 171px;
			width: 216px;
		}
			.spotlightImage img
			{
				float: left;
				height: 171px;
				width: 216px;
			}
			
		.spotlightInfo
		{
			width: 198px;
			padding: 7px 9px;
		}
			.spotlightInfo p
			{
				padding: 0 0 4px 0;
				margin: 0;
			}
			
			.spotlightInfoLabel
			{
				font-weight: bold;
			}
			
			.spotlightInfoText
			{
				font-weight: bold;
				color: #ffcc66;
			}
		
		.spotlightPager
		{
			height: 14px;
			width: 100%;
		}
			.spotlightPrev
			{
				float: left;
				padding: 0 9px;
				font-weight: bold;
				color: #fff;
			}
			
			.spotlightNext
			{
				float: right;
				padding: 0 12px 0 9px;
				font-weight: bold;
				color: #fff;
			}

.searchbox
{
	background: url(../images/search_bg.gif) no-repeat top left;
	margin-bottom: 5px;
	padding: 12px 0 12px 12px;
	height: 64px;/*88px;*/
	width: 234px;/*246px;*/
}
	.searchTextbox
	{
		width: 158px;
		height: 23px;
		padding: 5px 8px 0px 8px;
		color: #81632d;
		background-color: #e9b554;
		border: 1px solid black;
		font-size: 150%;
		font-weight: bold;
		margin: 0px;
	}
	
	.searchButton
	{
		background-color: transparent;
		color: #e9b554;
		font-size: 150%;
		font-weight: bold;
		height: 29px;
		padding: 0;
		margin-top: 1px;
		width: 40px;
		vertical-align: top;
		border-color: #666 !important;
	}
	
	
/* Hazard bar tab nav */
#tabbedNav_container
{
    background: url(../images/hazard_tab_bg.gif) repeat-x left top;
    float: left;
    width: 591px;
    height: 28px;
}

#tabbedNav 
{
    float: left;
    margin: 0;
    padding: 0 0 0 2px;
    width: 589px;
    display: inline;
    list-style: none;
    vertical-align: middle;
}

    #tabbedNav li
    {
        float: left;
        margin: 0 1px 0 0;
    }

        #tabbedNav li a
        {
            display: block;
            margin: 0;
            padding: 0;
            width: 110px;
            height: 28px;
            text-decoration: none;
            border-bottom: none;
            text-indent: -100000px;
            overflow: hidden;
        }
			#tabbedNav li.tabbedNewBeats a
			{
				background: url(../images/hazard_tab_newbeats_off.gif);
			}
			#tabbedNav li.tabbedNewBeats a:hover,
			#tabbedNav li.tabbedNewBeats a.selected
			{
				background: url(../images/hazard_tab_newbeats_on.gif);
			}
			
			#tabbedNav li.tabbedTopBeats a
			{
				background: url(../images/hazard_tab_topbeats_off.gif);
			}
			#tabbedNav li.tabbedTopBeats a:hover,
			#tabbedNav li.tabbedTopBeats a.selected
			{
				background: url(../images/hazard_tab_topbeats_on.gif);
			}
			
			#tabbedNav li.tabbedProducer a
			{
				background: url(../images/hazard_tab_producer_off.gif);
			}
			#tabbedNav li.tabbedProducer a:hover,
			#tabbedNav li.tabbedProducer a.selected
			{
				background: url(../images/hazard_tab_producer_on.gif);
			}
			
			#tabbedNav li.tabbedDetails a
			{
				background: url(../images/hazard_tab_details_off.gif);
			}
			#tabbedNav li.tabbedDetails a:hover,
			#tabbedNav li.tabbedDetails a.selected
			{
				background: url(../images/hazard_tab_details_on.gif);
			}


/* GridView */
#gridView_container
{
	float: left;
}
	.grid
	{
		width: 591px;
	}
		.grid td
		{
			padding-left: 8px;
		}
			
		.grid a { font-weight: bold; }
	
		.oddRow
		{
			background: url(../images/grid_rowa_bg.gif) repeat-y 20% 0%;
		}
		.evenRow
		{
			padding: 3px;
			width: 591px;
			background: url(../images/grid_rowb_bg.gif) repeat-y 20% 0%;
		}


/* Review Blocks */
.reviewBlock, .lastreviewBlock
{
	float: left;
	display: inline;
	padding: 26px 8px 26px 12px;
	margin: 0 8px 10px 8px;
	width: 555px;
	border-bottom: 2px solid #6f6f6a;
	color: #fff;
}
	.lastreviewBlock { border-bottom: none; }

	.reviewImageBox
	{
		float: left;
		width: 158px;
		height: 158px;
		margin-right: 13px;
		background-color: Green;
	}
	    .reviewImageBox img
	    {
	        width: 158px;
		    height: 158px;
		    border: none;
	    }
	
	.reviewRating
	{
		float: right;
		width: 55px;
		height: 40px;
		background: url(../images/review_rating_bg.gif) no-repeat top left;
		text-align: center;
		font-weight: bold;
		font-size: 20px;
		line-height: 40px;
		vertical-align: middle;
	}
	
	.reviewAlbum
	{
		float: left;
		display: inline;
		width: 300px;
		font-size: 20px;
	}
	
    .reviewArtist
    {
		float: left;
		display: inline;
		width: 300px;
		font-size: 15px;
    }
    
    .reviewDescription
    {
		float: left;
		width: 380px;
		padding: 5px 0;
		margin: 0;
    }



/* Events  (Comments used these styles too) */           
.contentTitle
{
	height: 20px;
	font-size: 150%;
	float: left;
	vertical-align: bottom;
	margin-left: 8px;
	padding-top: 10px;
	color: #fff;
}

.contentSubTitle
{
	height: 20px;
	float: left;
	font-size: 100%;
	vertical-align: bottom;
	line-height: 23px;
	margin-left: 8px;
	padding-top: 10px;
	color: #fff;
}
.eventsBlock
{
	float: left;
	display: inline;
	padding: 10px 0 15px 0;
	margin: 0 8px;
	width: 575px;	
	color: #fff;
}

	.eventsDate
	{
		float: left;
		font-size: 12px;
		width: 575px;
		padding-bottom: 4px;
		margin: 0;
		border-bottom: 2px solid #6f6f6a;
	}
	
	.eventsSection
	{
		padding: 10px 0;
		width: 575px;
		float: left;
	}



/* Features */
#feature_container
{
	float: left;
	width: 591px;
}
	#feature_wrapper
	{
		float: left;
		border-bottom: 1px solid #aeaea2;
	}

	#featureImage
	{
		float: left;
		width: 373px;
		height: 292px;
		overflow: hidden;
	}
	
	#featureScroller
	{
		float: right;
		margin-left: 5px;
		width: 211px;
		border-left: 1px solid #333;
	}
		.featureScrollUp, .featureScrollDown, .featureScrollUpEnabled, .featureScrollDownEnabled
		{
			float: left;
			text-indent: -100000px;
			display: block;
			width: 211px;
			height: 29px;
			overflow: hidden;
		}
			.featureScrollUp, .featureScrollUpEnabled { background: url(../images/feature_scroll_up_on.gif) no-repeat top left; }
			.featureScrollUpEnabled:hover { background: url(../images/feature_scroll_up.gif) no-repeat top left; }
			.featureScrollDown, .featureScrollDownEnabled { background: url(../images/feature_scroll_down_on.gif) no-repeat top left; }
			.featureScrollDownEnabled:hover { background: url(../images/feature_scroll_down.gif) no-repeat top left; }
	
		#featureScrollRegion
		{
			float: left;
			width: 211px;
			height: 234px;
			overflow: hidden;
		}
		
			.featureItem, .featureItemSelected
			{
				color: #aeaea2;
				float: left;
				width: 197px;
				height: 24px;
				padding: 11px 7px 11px 7px;
				border-bottom: 1px solid #333;
			}
				.featureItem:hover { background-color: #333; text-decoration: none; }
				.featureItemSelected { background-color: #666; }

	#featureDescription
	{
		clear: both;
		float: left;
		padding: 12px 3px 12px 7px; 
	}	
		#featureDescription p
		{
			margin: 0 0 12px 0;
			width: 572px;
		}


/* formSection */
.formSection
{
	width: 575px;
	padding: 10px 8px;
	float: left;
}
	.formSection p, .formSection p.buttons
	{
		float: left;
		padding: 0 0 5px 0;
		margin: 0;
		width: 575px;
	}
		.formSection p.buttons { text-align: right; }
	
	.formSection h2
	{
		clear: both;
		font-size: 125%;
		margin: 0 0 10px 0;
	}
	.formSection h3
	{
		clear: both;
		font-size: 110%;
		margin: 5px 0 5px 0;
	}
	
	.agreementTextarea
	{
		overflow: auto;
	}
	
	.radioSelection
	{
		float: left;
		padding: 0 15px 10px 15px;
		width: 530px;
	}
		.radioButton
		{
			float: left;
		}
	
		.radioLabel
		{
			float: left;
			width: 500px;
			padding: 0 0 10px 8px;
		}
		
	.form
	{
		float: left;
		width: 450px;
	}
	
	.label
	{
		float: left;
		width: 120px;
		padding-right: 4px;
		text-align: right;
	}
		.required
		{
			color: #ffcc66;
		}
		.error
		{
			color: #cc0000;
		}
		.notes { padding-top: 5px; font-size: 80%; }
		
.updateProgress
{
	position: absolute;
	background-color: #000;
	filter: alpha(opacity=60);
	MozOpacity: 0.7;
	opacity: 0.7;
	padding: 0px;
	margin: 0;
}
.updateProgress div
{
	background-color: #000;
	position: absolute;
	top: 40%;
	left: 40%;
}