/*CSS Document*/
/*Comment all css which you are not useing in Layout*/
/*Don't use undescore(_)*/
/*Don't define font family in body*/  
/*UseProper name for css*/

/*ClearFix*/
.Clearfix:after {
	content: ".";	display: block;	clear: both;	visibility: hidden;
	line-height: 0;	height: 0;
}
.Clear {clear:both;}
.Clearfix{display: inline-block;}
h1{font-size: 100%;}
h2{font-size: 80%;}


#wraper{width:100%;height:auto;margin:0px;}
#mainwraper {width:100%; margin: 0 auto; /*padding:20px 18px 20px 18px;*/ /*background:#6699FF;*/ /*border:1px solid #a1a6ac;*/}

.header{width:600px; margin:0 auto; }
.headerleft{width:20px; float:left; /*background:url(../images/left-corner.png) no-repeat left top;*/ text-indent:-999px;height:213px}
.headermid{width:533px; float:left; /*background: url(../images/bg.png) repeat-x;*/ height:185px; padding:20px 0px 8px 0px }
.headerright{width:11px; float:right; /*background:url(../images/right-corner.png) right top;*/ text-indent:-999px;height:213px}

.song-img{ float:left; border:4px solid #fff; margin-right:20px; width:161px; position:relative}
.img-shade{
	position:absolute;
	left: -20px;
	top: -20px;
}
.song-detail{ float:left; width:342px;}

.song{ float:left; width:210px;}
.download{ float:right; width:105px; padding-top:15px; padding-bottom:15px}
.seekbar{ float:left; width:320px; background:url(../images/bar.png) no-repeat 4px 4px; margin-top:9px}

.seekbar-time{ float:left; width:303px; padding-left:20px; padding-bottom:3px; font-size:10px; font-family:Arial, Helvetica, sans-serif; color:#fff}
.left-time{ float:left}
.right-time{ float:right}


.player{ float:left; width:340px;}
.rewind a{ float:left; width:41px; background:url(../images/rewind.png) 0px 0px; text-indent:-999px; height:41px; margin:23px 4px 0px 0px}
.rewind a:hover{ float:left; width:41px; background:url(../images/rewind.png) 0px 41px; text-indent:-999px; height:41px}

.play a{ float:left; width:66px; background:url(../images/play.png) 0px 0px; text-indent:-999px; height:65px; margin:8px 4px 0px 0px}
.play a:hover{ float:left; width:66px; background:url(../images/play.png) 0px 65px; text-indent:-999px; height:65px}

.pause a{ float:left; width:66px; background:url(../images/pause.png) 0px 0px; text-indent:-999px; height:65px; margin:8px 4px 0px 0px}
.pause a:hover{ float:left; width:66px; background:url(../images/pause.png) 0px 65px; text-indent:-999px; height:65px}

.forward a{ float:left; width:41px; background:url(../images/forward.png) 0px 0px; text-indent:-999px; height:41px; margin:23px 4px 0px 0px}
.forward a:hover{ float:left; width:41px; background:url(../images/forward.png) 0px 41px; text-indent:-999px; height:41px}

.stop a{ float:left; width:41px; background:url(../images/stop.png) 0px 0px; text-indent:-999px; height:41px; margin:23px 0px 0px 0px}
.stop a:hover{ float:left; width:41px; background:url(../images/stop.png) 0px 41px; text-indent:-999px; height:41px}
.volume{ float:right; width:87px}




.middle{width:100%; vertical-align:top; float:left; padding-top:9px }
.middleleft{width:22px; float:left; /*background: url(../images/left-img.jpg) no-repeat left top;*/ text-indent:-999px;/*height:308px;*/}
.middlemid{width:100%; float:left; /*background: url(../images/bg-mid.jpg) repeat-x;*/ /*height:290px;*/ padding:10px 0px 8px 0px }
.search{  background:url(../images/bg-textbox.png) no-repeat; width:500px; margin:0 auto; height:18px; padding:4px 10px 4px 15px; }
.search input{ float:left; background:none; border:none; width:140px; color:#fff}
.search img{ float:left; margin-top:1px}

.folder{  background:url(../images/bg-textbox.png) no-repeat; width:500px; margin:0 auto; height:18px; padding:4px 10px 4px 15px; }

.middleright{width:22px; /*float:right;*/ /*background: url(../images/right-img.jpg) no-repeat right top;*/ text-indent:-999px;height:308px}


.track-list{ float:left; width:100%;  padding:25px 0px 0px 2px; font-family:Arial, Helvetica, sans-serif}
.list-first{float:left; width:100%; background:url(../images/bg-list1.png) no-repeat 0px 0px;height:35px; padding:5px 20px}
.list-first:hover{float:left; width:100%; background:url(../images/bg-list1.png) no-repeat 0px -45px;height:35px;padding:5px 20px;cursor:pointer;}

.list-list{float:left; width:100%; background:url(../images/bg-list.png) repeat-x 0px 0px; height:36px;padding:5px 20px}

.list-list:hover{float:left; width:100%; background:url(../images/bg-list.png) repeat-x  0px -46px;height:36px;padding:5px 20px; cursor:pointer;}
.list-last{float:left; width:100%; background:url(../images/bg-list2.png) no-repeat 0px 0px; height:35px;padding:5px 20px}

.list-last:hover{float:left; width:100%; background:url(../images/bg-list2.png) no-repeat 0px -45px;height:35px;padding:5px 20px;cursor:pointer;}


.track-no{ background:url(../images/image30.png) no-repeat; float:left; width:35px; font-size:18px; color:#b3b3b3; padding-top:7px}

.track-no1{ background:url(../images/image230.png) no-repeat; float:left; width:35px; font-size:18px; color:#b3b3b3; padding-top:7px}
.track-song1{ float:left; padding-top:5px; font-size:14px}
.track-song1 p{ font-size:11px}



.track-song{ float:left; padding-top:5px; font-size:14px}
.track-song p{ font-size:11px}
.track-time{ float:right; text-align:right; font-size:12px; width:80px; padding-top:10px; color:#a8a8a8;}
.track-time span{ color:#595959}