/*********************************************************************SETTiNGS*/
body{
	background:url(../player/mobilexy.png) left top 1px;
}
.window{
	position:relative;
	margin-top:-8px;
	margin-left:-8px;
	width:1276px;
	color:#C8C8C8;
	font-family:arial;
	font-size:12px;
	font-weight:normal;
}
.window.main{
	height:0px;
}
.window.main .body-content{
	width:1276px;
	height:558px;
	background:url(../player/mobilexy.png) left;
	border-bottom:2px solid black;
	border-left:2px solid black;
	border-right:2px solid black;
}
.window.main .controls{
	position:absolute;
	top:0px;
	left:0px;
	width:1276px;
	height:60px;
	border:2px solid black;
	background:url(../player/mobile.png) -2px -2px;
}
/**********************************************************************BUTTONS*/
.controls .button{
	margin:auto;
	display:inline-block;
	width:70px;
	height:60px;
	background:url(../player/mobile.png);
	margin-right:2px;
	cursor:pointer;
}
/*********************************************************************PREViOUS*/
.controls .button.previous{
	background-position:-2px -126px;
}
.controls .button.previous:hover{
	background-position:-2px -186px;
}
/****************************************************************SEEK*BACKWARD*/
.controls .button.seek-backward{
	background-position:-72px -126px;
}
.controls .button.seek-backward:hover{
	background-position:-72px -186px;
}
/*************************************************************************PLAY*/
.controls .button.play{
	background-position:-142px -126px;
}
.controls .button.play:hover{
	background-position:-142px -186px;
}
/************************************************************************PAUSE*/
.controls .button.pause{
	background-position:-352px -126px;
}
.controls .button.pause:hover{
	background-position:-352px -186px;
}
/*****************************************************************SEEK*FORWARD*/
.controls .button.seek-forward{
	background-position:-212px -126px;
}
.controls .button.seek-forward:hover{
	background-position:-212px -186px;
}
/*************************************************************************NEXT*/
.controls .button.next{
	background-position:-282px -126px;
}
.controls .button.next:hover{
	background-position:-282px -186px;
}
/************************************************************************TiTLE*/
.window.main .title{
	position:absolute;
	top:15px;
	left:362px;
	width:551px;
	height:27px;
	margin-top:4px;
	font-size:18px;
	font-weight:normal;
	z-index:1;
	overflow:hidden;
	padding-left:9px;
	padding-right:10px;
}
/**********************************************************************SHUFFLE*/
.controls .button.shuffle{
	background-position:-892px -126px;
	width:118px;
	float:right;
}
.controls .button.shuffle:hover{
	background-position:-892px -186px;
}
.controls .button.shuffle.off{
	background-position:-774px -126px;
}
.controls .button.shuffle.off:hover{
	background-position:-774px -186px;
}
/***********************************************************************REPEAT*/
.controls .button.repeat.none{
	background-position:-420px -126px;
	width:118px;
	float:right;
}
.controls .button.repeat.none:hover{
	background-position:-420px -186px;
}
.controls .button.repeat.one{
	background-position:-538px -126px;
	width:118px;
	float:right;
}
.controls .button.repeat.one:hover{
	background-position:-538px -186px;
}
.controls .button.repeat.all{
	background-position:-658px -126px;
	width:118px;
	float:right;
}
.controls .button.repeat.all:hover{
	background-position:-658px -186px;
}
/***********************************************************************VOLUME*/
.controls .button.volume {
	float:right;
	background:none;
	width:104px;
	height:34px;
	margin-top:16px;
	margin-right:0px;
}
.controls input.volumeSlider{
	background:none;
	width:84px;
	margin-left:9px;
	font-size:20px;
	font-weight:normal;
}
/******************************************************************ACTiVE*TiME*/
.window.main .currentTime{
	float:left;
	margin-top:16px;
	margin-left:21px;
	font-size:27px;
	font-weight:normal;
}
/*********************************************************************SEEK*BAR*/
.window.main .progress{
	position:absolute;
	height:62px;
	top:62px;
	left:0px;
	width:1276px;
	border-bottom:2px solid black;
	border-left:2px solid black;
	background:url(../player/mobile.png) -2px -62px;
}
.window.main input.seek{
	margin-top:18px;
	margin-left:32px;
	width:1063px;
	font-size:20px;
	font-weight:normal;
	background:none;
}
/*******************************************************************TOTAL*TiME*/
.window.main .totalTime{
	float:right;
	margin-top:16px;
	margin-right:21px;
	font-size:27px;
	font-weight:normal;
}
/*********************************************************************PLAYLiST*/
.window.playlist{
	position:relative;
	margin-top:131px;
	top:5px;
	left:2px;
	width:1276px;
	height:418px;
}
.window.playlist tr{
	cursor:pointer;
}
.window.playlist tr:hover{
	background:rgba(255,255,255,.05);
}
.window.playlist tr.currentlyPlaying{
	background:rgba(0,0,0,.25);
}
.window.playlist td{
	color:#C8C8C8;
	font-size:22px;
	font-weight:normal;
	padding-left:3px;
	padding-right:3px;
}
.window.playlist td.n{
	width:1182px;
	height:5px;
}
.window.playlist td.d{
	padding:1px;
	padding-top:2px;
	padding-bottom:2px;
	padding-right:0px;
}
.window.playlist .body-content{
	position:absolute;
	width:100%;
	height:100%;
	padding-left:5px;
	padding-right:43px;
	box-sizing:border-box;
	overflow-y:scroll;
	overflow-x:hidden;
}
.window.playlist .body-right{
	position:absolute;
	right:0px;
	width:32px;
	height:100%;
	background:url(../player/mobiley.png) repeat-y;
}
.window.playlist .scroller{
	position:absolute;
	width:24px;
	height:24px;
	right:10px;
	background:url(../player/mobile.png) -1014px -126px;
	cursor:pointer;
}
/******************************************************************************/