/* Core *//* Let the games Begin! */

* {
	margin: 0;
	padding: 0;
	}

html,body {
	min-height: 100%;
	min-width: 750px;
	}

body {
	background: #000 url(../i/home_bg_clean.jpg) no-repeat top center;
	color: #ccc;
	text-align: center; /* For IE5 Centering */
	}

body.grunge {
	background-image: url(../i/home_bg_grunge_clean.jpg);

	}

.clear {
	clear: both;
	}

input.initial {
	color: gray;
}

button:hover {
	cursor: hand;
	cursor: pointer;
}

/*&& 1> Typography */

#content h1 {
	color: lightcoral;
	font: 700 16px/26px verdana,sans-serif;
	text-transform: uppercase;
	}
	
#content .fame h1 {
	color: beige;
	}

#content h1.centered {
	text-align: center;
	width: 700px;
	}

#content p.instructions {
	background: #111;
	border: 1px solid #222;
	border-width: 1px 0 0 1px;
	color: lavender;
	text-align: center;
	margin: 15px 0 0 0;
	width: 600px;
	padding: 15px 50px;
	letter-spacing: 0.03em;
	}

#content p.instructions span {
	color: #fff;
	}

#main p {
	color: #fff;
	font: 11px/18px "lucida grande",verdana,sans-serif;
	margin: 5px 0;
	}

#side h1 {
	color: #555;
	font: 13px/24px "lucida grande",verdana,sans-serif;
	margin: 7px 0;
	text-transform: uppercase;
	text-align: center;
	}

#main h2 {
	color: #0af;
	font: 14px/26px "lucida grande",verdana,sans-serif;
	}

#main h3 {
	color: #fff;
	font: 13px/26px "lucida grande",verdana,sans-serif;
	margin: 5px 0 0 0;
	text-transform: uppercase;
	}

#side h3,#side ul,#side p {
	margin-left: 10px;
	}

#side ul {
	list-style: none;
	}

#side ul li {
	font: 11px/22px "lucida grande",verdana,sans-serif;
	padding: 0 0 0 15px;
	color: #777;
	height: 20px;
	}

#side ul li a {
	color: #aaa;
	text-decoration: none;
	}

#side ul li a:hover {
	color: #fff;
	}

/*&& 2> Navigation */

/*&&&&& a. Positioning */

#navigation {
	background: url(../i/home_bg_clean.jpg) top center;
	display: block;
	list-style: none;
	margin: 0 auto 10px auto;
	height: 75px;
	width: 750px;
	z-index: 10;
	position: relative;
	}

#navigation ul {
	list-style-type: none;
}

#navigation li {
	float: left;
	}

#navigation li a {
	background: url(../i/navigation_sprite.jpg) no-repeat;
	display: block;
	font: 11px/30px "lucida grande","lucida sans unicode",verdana,sans-serif;
	margin: 16px 0 0 0;
	height: 40px;
	width: 106px;
	}

#navigation li .logo {
	margin-right: 90px;
	margin-left: 25px;
	width: 85px	
	}

#navigation a span {
	display: none;
	}

#navigation li a.logo {
	background-position: -25px 0;
	}

#navigation li a.logo:hover,.home #navigation li a.logo {
	background-position: -25px -41px;
	}

#navigation li a.home {
	background-position: -200px 0;
	}

#navigation li a.home:hover,.home #navigation li a.home {
	background-position: -200px -41px;
	}

#navigation li a.equipment {
	background-position: -306px 0;
	}

#navigation li a.equipment:hover,.equipment #navigation li a.equpiment {
	xbackground-position: -306px -41px;
	}

#navigation li a.charts {
	background-position: -412px 0;
	}

#navigation li a.charts:hover,.charts #navigation li a.charts {
	background-position: -412px -41px;
	}

#navigation li a.bands {
	background-position: -518px 0;
	}

#navigation li a.bands:hover,.bands #navigation li a.bands {
	background-position: -518px -41px;
	}

#navigation li a.sign {
	background-position: -624px 0;
	}

#navigation li a.sign:hover,.sign #navigation li a.sign {
	background-position: -624px -41px;
	}

#navigation.listband li a.sign {
	background-position: -730px 0;
	}

#navigation.listband li a.sign:hover,.sign.listband #navigation li a.sign {
	background-position: -730px -41px;
	}

#navigation.myband li a.sign {
	background-position: -836px 0;
	}

#navigation.myband li a.sign:hover,.sign #navigation.myband li a.sign {
	background-position: -836px -41px;
	}

/*&& 3> Splash */

/* User Navigation */

#user_nav {
	background: url(../i/user_nav_bg.jpg) repeat-x top;
	display: block;
	height: 35px;
	width: 750px;
	margin: 10px auto 0 auto;
	position: relative;
	padding-bottom: 5px;
	}

.logged_in #user_nav {
	display: block;
	}

#user_nav #user_info {
	background: url(../i/user_nav_left.jpg) no-repeat top left;
	float: left;
	height: 21px;
	padding: 7px 0 7px 15px;
	}

#user_nav #user_info span {
	color: #555;
	font: 11px/22px verdana,sans-serif;
	}

#user_nav #user_actions {
	background: url(../i/user_nav_right.jpg) no-repeat top right;
	float: right;
	height: 35px;
	}

#user_nav #user_actions ul {
	list-style: none;
	padding: 7px 5px;
	}

#user_nav #user_actions ul li {
	float: left;
	margin: 0 10px 0 0;
	}

#user_nav a {
	font: 11px/22px verdana,sans-serif;
	color: #333;
	color: #003663;
	text-decoration: none;
	}

#user_nav a:hover {
	color: #0072bc;
	}
	
#user_nav input.username, #user_nav input.password {
	width:100px;
	padding: 4px;
	border: 1px solid gray;
	text-align: center;
	font-size: 11px;
}

/*&&&&& a. Header */

#header {
	margin: 0 auto;
	text-align: left;
	padding: 10px;
	height: 185px;
	width: 730px;
	}

#splash {
	background: url(../i/header_3.jpg) no-repeat top left;
	float: left;
	margin: 0 10px 0 0;
	height: 180px;
	width: 465px;
	}

/*&& 4> Panel */

#panel {
	float: left;
	position: relative;
	width: 255px;
	height: 180px;
	}

/* a. Search Form */

#panel .search {
	display: block;
	height: 60px;
	}

#panel .search .for {
	background: url(../i/panel_search_bg.jpg) no-repeat top left;
	border: 0 none;
	display: block;
	float: left;
	margin: 8px 5px 10px 10px;
	padding: 13px 12px 12px 18px;
	height: 15px;
	width: 97px;
	font-family: verdana;
	font-size: 12px;
	}

#panel .search .submit {
	background: url(../i/panel_search_button_bg.jpg) no-repeat top left;
	border: 0 none;
	display: block;
	margin: 8px 0 0 0;
	float: left;
	width: 103px;
	height: 40px;
	}

x#panel .search .for:hover {
	background-image: url(../i/panel_search_hover.jpg);
	}

#panel .search .for:active,#panel .search .for:focus {
	background-image: url(../i/panel_search_active.jpg) !important;
	}
	
x#panel .search .submit:hover {
	background-image: url(../i/panel_search_button_hover.jpg);
	}
	
#panel form.search .submit:active {
	background-image: url(../i/panel_search_button_active.jpg);
	}

/* b. Featured Song */

#panel .featured {
	margin: 45px 12px 10px 12px;
	padding: 10px 0 0 0;
	height: 53px;
	width: 231px;
	}

#panel .featured .song {
	float: left;
	height: 53px;
	width: 105px;
	margin: 0px 10px 0 15px;
	}

#panel .featured .listen,#panel .featured .download {	
	background: url(../i/panel_song_listen.jpg) no-repeat top left;
	display: block;
	clear: right;
	font: 11px/16px "lucida grande",verdana,sans-serif;
	margin: 1px 0 0 0;
	overflow: hidden;
	height: 20px;
	}

#panel .featured .download {
	background-image: url(../i/panel_song_download.jpg);
	}

#panel .featured .download:hover {
	background-image: url(../i/panel_song_download_hover.jpg);
	}

#panel .featured .listen:hover {
	background-image: url(../i/panel_song_listen_hover.jpg);
	}

#panel .featured .listen span,#panel .featured .download span {
	display: none;
	}

/* Song Information Layout 
 
	#panel .song
	<span class="title">Song title</span>
	<span class="by">By</span><span class="artist">Artist Name</span>

*/

#panel .song .title {
	color: #333;
	float: left;
	font: 11px/14px "trebuchet ms","lucida grande",verdana,sans-serif;
	}

#panel .song .by {
	float: left;
	clear: left;
	color: #888;
	font: italic 11px/14px "trebuchet ms","lucida grande",verdana,sans-serif;
	margin: 2px 7px 0 0;
	}

#panel .song .artist {
	color: #777;
	float: left;
	font: 11px/14px "trebuchet ms","lucida grande",verdana,sans-serif;
	margin: 2px 0 0 0;
	text-decoration: underline;
	}

/*&& 5> Content */

.songheader {
	font-family:verdana, "Lucida Grande"; 
	font-size:10px; 
	color:#fccccc;
	padding: 9px 0px 5px 4px
}

#main {
	clear: both;
	margin: 0 auto;
	text-align: left;
	padding: 13px;
	width: 730px;
	}

/* 5a - Float */

#main #content {
	float: left;
	margin: 0 10px 30px 0;
	min-width: 465px;
	}
	
.home #main {
    margin-top: 10px;
}

.home #main #content {
	float: left;
	margin: 0 10px 10px 0;
	min-width: 465px;
	}	

.bands #main #content {
	float: left;
	margin: 0 10px 30px 0;
	width: 465px;
	}

/*&& 6> Side */

#main #side {
	float: left;
	xposition: absolute;
	xleft: 615px;
	width: 255px;
	}

/* 6b - Box Wrappers */

#side .box {
	background: url(../i/side_bg.jpg) no-repeat top center;
	margin: 5px 0 15px 0;
	}

#side .box .stripe {
	background: url(../i/side_stripe.gif) no-repeat bottom center;
	padding: 2px 10px 10px 10px;
	}

/* 6c - BIYB */

.biyb .search {
	padding: 10px 0;
	}

.biyb .text,.biyb .submit {
	border: 0 none;
	display: block;
	float: left;
	}

.biyb .text {
	background: url(../i/side_biyb_input.jpg) no-repeat top center;
	margin: 0 9px 0 0;
	padding: 13px 5px 7px 15px;
	height: 20px;
	width: 105px;
	}

.biyb .text:focus {
	background-image: url(../i/side_biyb_input_active.jpg);
	}

.biyb .submit {
	background: url(../i/side_biyb_search.jpg) no-repeat top center;
	height: 40px;
	width: 101px;
	}

#main .biyb p {
	padding: 10px 10px 3pt 0pt;
	font: 10px/14px verdana,sans-serif;
	color: #555;
	clear: both;
	text-align: center;
	}

/* 6d - Player Link (.listen) */

#side .listen a img {
	border: 0 none;
	}

#side .listen .stripe {
	padding: 11px 0;
	}

#side .listen a {
	display: block;
	margin: 0 11px;
	}

/* 6e - Login */

#side .login {
	background-image: url(../i/side_blue_bg.jpg);
	}

#side .login .stripe {
	background-image: url(../i/side_blue_stripe.jpg);
	padding: 13px 20px 20px 20px;
	}

#side .login h1 {
	color: #fff;
	}

#side .login form {
	margin: 15px 10px 10px 10px;
	}
	
#side .login form label {
	clear: left;
	color: #fff;
	display: block;
	float: left;
	font: 11px/18px "lucida grande",verdana,sans-serif;
	margin: 5px 0;
	}

#side .login form input {
	margin: 5px 0 5px 10px;
	width: 120px;
	}	

#side .login button {
	font: 11px/22px "lucida grande",verdana,sans-serif;
	text-align: left;
	padding: 3px;
	margin: 5px 5px 0 5px;
	}

/*&& 7> Footer */

#footer {
	background: #000 url(../i/footer_bg.jpg) no-repeat bottom left;
	clear: both;
	margin: 0 auto 10px auto;
	position: relative;
	height: 65px;
	width: 750px;
	text-align: left;
	}

#footer p {
	display: none;
	}

#footer #controls {
	position: absolute;
	height: 45px;
	width: 76px;
	top: 20px;
	right: 20px;
	}

#controls a {
	float: left;
	display: block;
	height: 30px;
	width: 14px;
	cursor: pointer;
	}

#controls .small_font {
	width: 12px;
	}

#controls .medium_font {
	width: 14px;
	}

#controls .large_font {
	width: 16px;
	}

#controls .grunge_on {
	margin: 0 6px 0 0;
	width: 16px;
	}

#controls .grunge_off {
	width: 12px;
	}

#footer #controls span {
	display: none;
	}

/* Grungerizer */

.grunge #footer .grunge_off:link,.grunge #footer .grunge_off:visited {
	background: transparent;
	}

#controls a:hover,.grunge #footer .grunge_off:hover {
	background: url(../i/footer_arrow_blue.gif) no-repeat bottom center;
	}

#footer #controls .grunge_off,.grunge #footer .grunge_on {
	background: url(../i/footer_arrow.gif) no-repeat bottom center ;
	}

.grunge #footer #controls .grunge_off {
	background: transparent;
	}

#footer #controls .medium_font {
	background: url(../i/footer_arrow.gif) no-repeat bottom center;
	}

/*&& 8> iPod */

#ipod {
	background: #000 url(../i/ipod_seal.jpg) no-repeat top left;;
	position: absolute;
	top: 0;
	left: 0;
	height: 40px;
	width: 120px;
	z-index: 1;
	}

#ipod p {
	display: none;
	}

/* 9. 15 Minutes of Fame (#main #content .fame)
>> a. Headers (.fame .headers > .rating,.songinfo,.genre,.listen,.download )
>> b. Song Rows (.fame .song)
>> c. Rating Boxes
>>>>> i. Boost Button (.fame .song .rating a.boost)
>>>>> ii. Grunge Backgrounds
>> d. Song Box (.fame .songinfo)
>> e. Genre (.fame .genre)
>> f. Listen and Download Links (.fame .listen,.fame .download)
*/

.fame .headers {
	font: 12px/24px "lucida grande",verdana,sans-serif;
	background: #0af url(../i/fame_headers.jpg) no-repeat top left;
	height: 20px;
	display: none;
	}

.fame .headers span {
	visibility: hidden;
	}

.fame .rating,.fame .songinfo,.fame .genre,.fame .listen,.fame .download {
	float: left;
	display: block;
	}

.fame .rating {
	width: 60px;
	padding: 5px 0px 0px 0px;
	}

.fame .song .rating {
	xheight: 40px;
	}

.fame .songinfo {
	padding: 0 0 0 10px;
	width: 150px;
	}

.fame .genre {
	width: 100px;
	}

/*
.fame .listen {
	width: 65px;
	}
*/

.fame .listen a {
	background: #000 url(../i/fame_listen_hover.jpg) no-repeat top left;
	display: block;
	height: 20px;
	width: 65px;
	}

.fame .listen a:hover {
	background-image: url(../i/fame_listen_hover_2.jpg);
	}

.fame .listen a span {
	display: none;
	}

/*
.fame .download {
	width: 65px;
	}
*/

.fame .download a {
	background: #000000 url(../i/download_arrow.png) no-repeat scroll 15px 3pt;
	display: block;
	height: 20px;
	width: 65px;
	}

.fame .download a:hover {
	xbackground-image: url(../i/download_arrow_hover.png);
	}

.fame .download a span {
	display: none;	
	}

/* 9b - Song Rows */

.fame .song 
{	
	xclear: both;
	padding: 0px 0px 18px 4px;
}

.fame .song:first
{	xclear: both;
	padding: 4px 0px 10.5px 0pt;
}

.fame .songinfo .title {
	color: #fff;
	float: left;
	font: 12px/16px "lucida grande",verdana,sans-serif;
	}

.fame .songinfo .by {
	float: left;
	clear: left;
	color: #999;
	font: italic 11px/14px "lucida grande",verdana,sans-serif;
	margin: 2px 7px 0 0;
	}

.fame .songinfo .artist {
	color: #ccc;
	float: left;
	font: 11px/14px "lucida grande",verdana,sans-serif;
	margin: 2px 0 0 0;
	}

.fame .songinfo .artist a {
	color: #999;
	text-decoration: none;
	}

.fame .song .genre span {
	color: #aaa;
	display: block;
	font: 11px/14px "lucida grande",verdana,sans-serif;
	}

/* Rating */

.fame .rating span {
	font: 12px "lucida grande",verdana,sans-serif;
	float: left;
	margin: 8px 0 0 0;
	color: pink;
	}

.fame .rating .boost{
	background: url(../i/fame_rating_boost.gif) no-repeat top left;
	float: left;
	margin: 8px 7px 0 0px;
	height: 16px;
	width: 16px;
	display: block;
	}

.fame .rating .boost:hover {
	background-image: url(../i/fame_rating_boost_hover.gif);
	}

.fame .rating .boost span {
	display: none;
	}

/* resultrow (musicbox) */
.result .resultrow {
	border: 1px solid white;
	height: 21px;
	padding: 2px 5px;
	background-color:#111;
}

/* hover color overriden in javascript */
.result .resultrow:hover {
	xborder-color: #272829;
	color #CCC;
	border-width: 1px;
	background-color: #1F3844;
}

.result em a {
	color: black;
}

.result em a:hover {
	color: white;
}

.result .bandname a, .result .bandname a:hover {
	background: url(../i/page_white_world.png) no-repeat scroll top left;
}

.result .helper {
	font-family: Lucida Grande;
}

.mbox_opts li:hover {
	background: #406074;
	background: #444;
}