/*
------------------ REFERENCE ------------------

*/

/* ------------------ RESET (YAHOO 2.2.2) ------------------ */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}



/* ------------------ BODY & OVERALL CONTAINERS ------------------ */
html, body {
    margin: 0;
    background: #000;
}
body {
	padding: 10px 0 0 0;
	border: 0;
	text-align: center;
	color: #666;
	background: #000 url("../img/backgrounds/radiohead.jpg") top center no-repeat;
	font-family: Century Gothic, Apple Gothic, sans-serif;
	font-size: 81.25%;
	}

#header {
	background: url("../img/000000-75.png") top center repeat-y;
	padding: 10px 2% 10px 2%;
	margin: 10px 0 30px 0;
	border-top: 1px solid #7c7c7c;
	border-bottom: 1px solid #000;
	}

#header h1 { color: #fff; font-size: 292%; font-weight: lighter; text-align: left; letter-spacing: -1px; margin: 0; }
#header h1 a  { text-decoration: none; color: #fff; }
#header h1 a:visited { color: #fff; }
#header h2 { color: #eee; font-size: 131%; font-weight: strong; text-align: left; margin: 0; color: #999; }

#share { text-align: right; }

#nav a { text-decoration: none; color: #ccc; }
#nav a:hover { text-decoration: underline; color: #fff; } 


#container	{ width: 1100px; }
html>body #container { margin: 0 auto; }

#content-wrapper {
	width: 840px;
	float: left;
}

#content { 
	padding: 20px;
	border: 1px solid #181818;
	text-align: left;
	margin: 0;
	background: url("../img/000000-75.png") top center repeat-y;
	color: #fff;
}

#rhsSkyscraperAd-wrapper { float:left; width: 260px; text-align: right; }
#rhsSkyscraperAd-wrapper div.bg { background: url("../img/000000-75.png") top center repeat-y; margin: 0 0 50px 100px; }
#rhsSkyscraperAd-wrapper div.ad { position: relative; width: 160px; height: 600px; filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;  }
#rhsSkyscraperAd-wrapper div.ad:hover { position: relative; width: 160px; height: 600px; filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; }

a { color: #fff; }
.lhs { float: left; }
.rhs { float: right; }
h1 { color: #fff; font-size: 292%; font-weight: lighter; text-align: left; letter-spacing: -1px; margin: 0 0 1em 0; }
h2 { color: #eee; font-size: 131%; font-weight: bold; text-align: left; margin: 2em 0 0.5em 0; }
h3 { font-size: 154%; font-weight: lighter; padding: 0 0 20px 0; }
.layout-nav { width: 90%; float: left; }
#layout-nav { float: left; width: 10%; text-align: right; }

#sub-nav  { text-align: right; margin: 0 0 20px 0; }
#sub-nav span { font-size: 92%; color: #999; }
#sub-nav img { vertical-align: text-bottom; }
#sub-nav a { color: #999; }

.c30 { float: left; width: 30%; }
.c40 { float: left; width: 40%; }
.c45 { float: left; width: 45%; }
.c50 { float: left; width: 50%; }
.c55 { float: left; width: 55%; }
.c60 { float: left; width: 60%; }
.c70 { float: left; width: 70%; }
.align-rhs { text-align: right; }

.hide { display: none; margin: 0; padding: 0; }
.show { display: block; }
.nodec { border: 0; background: none; }
strong { font-weight: bold; }
em { font-style: italic; font-weight: bold; }

p, ul { padding: 10px 0 10px 0; }
p.center { width: 100%; text-align: center; }

ol li { list-style: lower-roman; margin: 5px 0 5px 50px; }
ul li { list-style: circle; margin: 5px 0 5px 50px; }

dt { float: left; width: 25%; clear: left; font-weight: bold; margin: 2em 0 1em 0; }
dt span.date { font-weight: normal; color: #999; }
dd { float: left; width: 75%; margin: 2em 0 1em 0; }
dd h4 { font-size: 115%; font-weight: bold; padding: 0 0 10px 0; }
dd p { margin-top: 0; padding-top: 0; }

.noArtistID, .musicbrainzID, .noAlbumID { font-size: 85%; }
.tooltip { display: none; background: transparent url("../img/black_arrow_big.png"); font-size: 100%; height: 170px; width: 310px; padding: 25px; color: #fff; }


/* ------------------ FORMS ------------------ */
form {margin: 0 0 50px 0; padding: 0; }
div.formrow { margin: 10px 0; }
form label { font-size: 100%; padding-right: 10px; width: 100%; }
label.big { font-size: 192%; }
form input, form select, form textarea { 
    padding: 2px;
    margin: 0;
    border: 1px solid #000;
    background: #c8c8c8;
    font-family: Verdana, Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 100%;
}
form input.big { font-size: 192%; padding: 1px 4px 4px 4px; }

form input:focus, form select:focus, form textarea:focus { background: #e8e8e8; }

p.thanks { font-size: 123%; border: 1px dotted #666; padding: 10px; }

form .tiny { width: 30px; }
form .half { width: 175px; }
form .full { width: 350px; }

form ul.errorlist { margin: 0; padding: 0; }
form ul.errorlist li { list-style: none; margin: 0; }

form ul.radiolist { margin: 0; padding: 0; }
form ul.radiolist li { list-style: none; margin: 0; padding: 0 0 5px 0; }

form input.button {
    border: 0;
    height: 27px;
    padding: 2px 5px;
    width: 125px;
    background: url("../img/button.png") 0 0 no-repeat;
    color: #fff;
    font-size: 100%;
    font-weight: bold;
    font-family: Century Gothic, Apple Gothic, sans-serif;
    margin: 0;
}
form input.button-75 { width: 75px; background-position: 0 -100px; }
form input.button:active, form input.button:hover { background-position: 0 -50px; }
form input.button-75:active, form input.button-75:hover { width: 75px; background-position: 0 -150px; }

#my-name-field { display: none; }

/* ------------------ TABLES ------------------ */
.itemtable {
    margin: 0 0 10px 0;
    padding: 0;
}
.itemtable th {
    font-weight: bold;
    text-align: left;
    border-bottom: #7c7c7c 1px solid;
    border-top: #7c7c7c 1px solid;
    border-left: 1px solid #bbb;
    font-size: 85%;
    margin: 0;
    padding: 5px;
    background: url("../img/000000-75.png") top center repeat-y;
}
.itemtable th.lastCol { border-right: 1px solid #bbb; }
.itemtable th.center { text-align: center; }
.itemtable th.right { text-align: right; }

.itemtable tr.odd, .itemtable tr.odd_last { }
.itemtable tr.even, .itemtable tr.even_last {background: url("../img/ffffff-15.png"); }

.itemtable td { margin: 0; padding: 10px 5px 10px 5px; border-left: 1px solid #bbb; font-size: 100%; vertical-align: top; }
.tdreveal { font-size: 85%; color: #777; }
.itemtable td.noBorder { border-left: 0; }
.itemtable td.lastCol { border-right: 1px solid #bbb; }
.itemtable td.center { text-align: center; }
.itemtable td.right { text-align: right; }
.itemtable td.middle { vertical-align: middle; }
.itemtable tr.last td { border-bottom: #7c7c7c 1px solid; margin: 0 0 10px 0; }
.itemtable tr.total td { border-bottom: #7c7c7c 1px solid; border-top: #7c7c7c 1px solid; margin: 0 0 10px 0;  background: url("../img/000000-75.png") top center repeat-y; }


#artistNews td.j { padding: 0 0 0 20px; }
.artistNewsItem { padding: 0 0 50px 0; }

/* ------------------ THUMBNAIL GRID ------------------ */
.boxgrid{ 
	width: 252px; 
	height: 220px;
	margin: 0 5px 10px 5px; 
	float:left; 
	border: 1px solid #000;
	background: url("../img/000000-75.png") top center repeat-y;
	overflow: hidden; 
	position: relative; 
}
.boxgrid-background { height: 370px; }
.boxgrid img.back{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	border: 0; 
}
	
.boxgrid h4 { font-size: 115%; font-weight: bold; padding: 0; float: left; width: 90%; }
.boxgrid h4.artist { height: 40px; line-height: 40px; white-space: nowrap; overflow: hidden; }
.boxgrid h4.artist span.rank { width: 10%; float: left; }
.boxgrid h4.artist span.artist { width: 90%; float: left; }
.boxgrid h4.album { font-size: 100%; height: 40px; }
.boxgrid h4.album span.rank { width: 10%; float: left; height: 40px; line-height: 20px; }
.boxgrid h4.album span.album { width: 90%; float: left; white-space: nowrap; overflow: hidden; height: 20px; line-height: 20px; }
.boxgrid h4.album span.artist { width: 90%; float: left; white-space: nowrap; overflow: hidden; height: 20px; line-height: 20px; font-weight: normal; }
.boxgrid h4.photo { height: 40px; line-height: 40px; white-space: nowrap; overflow: hidden; }

.boxgrid h5 { font-size: 92%; font-weight: bold; float: right; width: 10%; line-height: 40px; text-align: right; }
.boxgrid p { font-size: 100%; font-weight: normal; padding: 10px 0 0 9%; clear: left; }
			
.boxcaption{ 
	float: left; 
	position: absolute; 
	background: #000; 
	height: 100px; 
	width: 100%;
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	}

div.boxcaption div { padding: 0 5px; }
.caption .boxcaption { top: 180px; left: 0; }
.caption .boxcaption-background { top: 330px; left: 0; }

/* ------------------ WIDGET ------------------ */
#widget { padding: 20px 0 0 0; }
#widget h3 { font-size: 146%; font-weight: lighter; padding: 0 0 10px 0; }
#widget h4 { font-size: 115%; font-weight: strong; padding: 0; }
#widget img, .backSelect span, #widget-link img { padding: 2px; border: 1px solid #666; }
div.code { background: url("../img/ffffff-15.png"); border: 1px solid #666; margin: 3px 0 20px 0; overflow: auto; padding: 5px; width:96%; }
.backSelect { float: left; width: 120px; text-align: center; padding: 0 0 10px 0; }
.backSelect lable { padding: 0; }

#bottomBannerAd { margin: 50px 0 0 0; }

#footer-wrap {
	background: url("../img/000000-75.png") top center repeat-y;
	border-top: 1px solid #7c7c7c;
	padding: 10px 2% 10px 2%;
	height: 150px;
	margin: 25px 0 0 0;
}

#footer {
	color: #999;
	text-align: left;
	}

p.footer-info { float: left; width: 20%; font-size: 92%; margin: 0; padding: 10px 0 0 0; }
p.footer-attr { float: left; width: 80%; text-align: right; font-size: 92%; margin: 0; padding: 10px 0 0 0; }
p.footer-desc { width: 65%; font-size: 92%; padding: 20px 0 0 0; }


/* ------------------ SPRITES ------------------ */
img.sprite, a.sprite { background: url(../img/sprite.png) 0 0 no-repeat; border: 0; padding: 0; margin: 0; }
img.sprite-layout-list, a.sprite-layout-list { background-position: 0 0; }
img.sprite-layout-list-50, a.sprite-layout-list-50 { background-position: 0 -50px; }
img.sprite-layout-thumb, a.sprite-layout-thumb { background-position: 0 -100px; }
img.sprite-layout-thumb-50, a.sprite-layout-thumb-50 { background-position: 0 -150px; }
img.sprite-error, a.sprite-error { background-position: 0 -200px; }
img.sprite-up, a.sprite-up { background-position: 0 -249px; }
img.sprite-down, a.sprite-down { background-position: 0 -299px; }
img.sprite-new, a.sprite-new { background-position: right -350px; }
a.sprite-new { padding: 0 20px 0 0; }
img.sprite-feed, a.sprite-feed { background-position: 0 -400px; }
img.sprite-shop, a.sprite-shop { background-position: 0 -450px; }
img.sprite-xml, a.sprite-xml { background-position: 0 -500px; }
img.sprite-chart-artist, a.sprite-chart-artist { background-position: 0 -550px; }
img.sprite-chart-artist-50, a.sprite-chart-artist-50 { background-position: 0 -600px; }
img.sprite-chart-album, a.sprite-chart-album { background-position: 0 -650px; }
img.sprite-chart-album-50, a.sprite-chart-album-50 { background-position: 0 -700px; }
img.sprite-magnify, a.sprite-magnify { background-position: 0 -750px; }

img.logo { background: url(../img/sprite_logos.png) 0 0 no-repeat; border: 0; padding: 0; margin: 0; }
img.logo-associativetrails { background-position: 0 0; }
img.logo-musicbrainz { background-position: 0 -50px; }
img.logo-lastfm { background-position: 0 -100px; }


.clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; }
.clearfix {display:inline-block;}
.clearfix {display:block;}