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


body{
	background:#FFF;
	padding:0;
	margin:0;
	font-size:0;
	line-height:0;
	color:#7e8184;
	font-family:Arial, Helvetica, sans-serif;
}
.clearme{
	display:block;
	position:relative;
	clear:both;
}




/* TEMP */

h1{
	margin:0 0 10px;
}
p{
	margin:0;
}
a{
	border:none;
}


            







/* - - - - - MAIN - - - - - */

#container{
	position:relative;
	margin:0 auto;
	background:url(../images/background.jpg) no-repeat;
	width:300px;
	height:600px;
}








/* - - - - - DESIGN - - - - - */

#paris_button, #amsterdam_button, #cologne_button{
	position:absolute;
	display:block;
	width:300px;
	height:600px;
	z-index:1000;
	background:url(../images/paris_button.png) 0 0;
}
#amsterdam_button{
	background:url(../images/amsterdam_button.png) 0 0;
}
#cologne_button{
	background:url(../images/cologne_button.png) 0 0;
}
#paris_button:hover, #amsterdam_button:hover, #cologne_button:hover{
	background-position:-300px 0;
}


#paris_art, #amsterdam_art, #cologne_art{
	position:absolute;
	width:116px;
	top:302px;
	left:92px;
	height:122px;
	padding:0;
	margin:0;
	background:url(../images/sprite.png) 0 -80px;
}
#amsterdam_art{
	background:url(../images/sprite.png) -120px -80px;
}
#cologne_art{
	background:url(../images/sprite.png) -240px -80px;
}





#paris_text, #amsterdam_text, #cologne_text{
	position:absolute;
	left:0;
	top:90px;
	width:300px;
	height:104px;
	overflow:hidden;
}
#amsterdam_text{
	height:128px;
}
#cologne_text{
	height:128px;
}


#paris_text_1, #amsterdam_text_1, #cologne_text_1{
	position:relative;
	width:281px;
	height:104px;
	margin:0 auto;
	background:url(../images/sprite.png) 0 -250px;
}
#amsterdam_text_1{
	width:250px;
	height:128px;
	background:url(../images/sprite.png) 0 -360px;
}
#cologne_text_1{
	width:223px;
	height:128px;
	background:url(../images/sprite.png) 0 -500px;
}

#paris_text_2, #amsterdam_text_2, #cologne_text_2{
	position:relative;
	width:289px;
	height:104px;
	margin:0 auto;
	background:url(../images/sprite.png) -290px -250px;
}
#amsterdam_text_2{
	width:215px;
	height:128px;
	background:url(../images/sprite.png) -290px -360px;
}
#cologne_text_2{
	width:215px;
	height:128px;
	background:url(../images/sprite.png) -290px -360px;
}




#frame1{
	position:relative;
	width:300px;
	height:100%;
	display:none;
}

#frame2{
	position:relative;
	width:300px;
	height:100%;
	display:none;
}


 




/* - - - - - DATA SLIDER - - - - - */

#data_slider{
	position:absolute;
	width:300px;
	left:0;
	top:453px;
}

#data_slider #title_sebastien, #data_slider #title_benny, #data_slider #title_bbf{
	position:relative;
	width:265px;
	height:11px;
	margin:-2px auto 0;
	background:url(../images/sprite.png) 0 -208px;
}
#data_slider #title_benny{
	background:url(../images/sprite.png) 0 -225px;
}
#data_slider #title_bbf{
	background:url(../images/sprite.png) 0 -240px;
}

#data_slider #playcounts{
	position:relative;
	width:265px;
	height:13px;
	background:url(../images/sprite.png) -270px -40px no-repeat;
	margin:12px auto 13px;
}



#toptracks_wrapper{
	position:relative;
	width:265px;
	height:43px;
	margin:0 auto;
	overflow:hidden;
}


#toptracks{
	position:relative;
	width:1500px;
}


.lightrow{
	position:relative;
	display:inline-block;
	*display:block;
	*float:left;
	top:0;
	left:0;
	width:261px;
	height:43px;
	padding:0 2px;
	margin:0 auto;
	background:url(../images/sprite.png) 0 -26px no-repeat;
}
.lightrow  .name{
	position:relative;
	display:inline-block;
	*display:block;
	*float:left;
	width:180px;
	overflow:hidden;
	margin:4px 0 0 2px;
	font-size:9px;
	line-height:9px;
	text-transform:uppercase;
}
.lightrow .plays{
	position:relative;
	display:inline-block;
	*display:block;
	*float:left;
	width:77px;
	overflow:hidden;
	margin:4px 0px 0 0;
	font-size:9px;
	line-height:9px;
	text-transform:uppercase;
	text-align:right;
}

.lightrow  .light_green{
	position:relative;
	display:inline-block;
	*display:block;
	*float:left;
	top:0;
	width:16px;
	height:13px;
	margin:-1px -1px 2px -2px;
	background:url(../images/sprite.png) -380px 0;
}

.lightrow  .light_blue{
	position:relative;
	display:inline-block;
	*display:block;
	*float:left;
	top:0;
	width:16px;
	height:13px;
	margin:-1px -1px 2px -2px;
	background:url(../images/sprite.png) -380px -13px;
}

.lightrow .light_off{
	position:relative;
	display:inline-block;
	*display:block;
	*float:left;
	top:0;
	width:16px;
	height:13px;
	margin:-1px -1px 2px -2px;
	background:url(../images/sprite.png) -380px -26px;
}