/*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:800px; margin:0 auto; }
.headerleft{width:0px; float:left; /*background:url(../images/left-corner.png) no-repeat left top;*/ text-indent:-999px;height:131px}
.headermid{width:800px; float:left; /*background: url(../images/bg.png) repeat-x;*/ height:131px; padding:0px }
.headerright{width:0px; float:right; /*background:url(../images/right-corner.png) right top;*/ text-indent:-999px;height:131px}

.song-img{ float:left; border:0px solid #fff; margin-right:10px; width:220px; position:relative}
#current-play-pic { width:220px; height:131px; }
.img-shade{ position:absolute; left: -20px; top: -20px; }
.song-detail{ float:left; width:570px;}

.song{ float:left; width:420px; margin-top:10px; height:40px; }
.download{ float:right; width:130px; margin-top:10px; padding:5px; background:#fff; color:#e64c4c; margin-right:10px; }
.download a { color:#e64c4c; text-decoration:none; }
.download a:hover { color:#e64c4c; text-decoration:none; }
.seekbar{ float:left; width:320px; background:url(../images/bar.png) no-repeat 4px 4px; margin-top:9px}

.seekbar-time{ float:left; width:560px; padding-left:0px; 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:560px;}

.rewind a{ background-size:contain; float:left; width:32px; background-image:url(../images/skip-back.png); text-indent:-999px; height:32px; margin:10px 15px 10px 60px }
.rewind a:hover{ background-size:contain; float:left; width:32px; background-image:url(../images/skip-back_hover.png); text-indent:-999px; height:32px}

.rewind30 a{ background-size:contain; float:left; width:32px; background-image:url(../images/backward30sec.png); text-indent:-999px; height:32px; margin:10px 15px}
.rewind30 a:hover{ background-size:contain; float:left; width:32px; background-image:url(../images/backward30sec_hover.png); text-indent:-999px; height:32px}

.play a{ background-size:contain; float:left; width:48px; background-image:url(../images/play_new.png); text-indent:-999px; height:48px; margin:0px 15px}
.play a:hover{ background-size:contain; float:left; width:48px; background-image:url(../images/play_hover.png); text-indent:-999px; height:48px}

.pause a{ background-size:contain; float:left; width:48px; background-image:url(../images/pause_new.png); text-indent:-999px; height:48px; margin:0px 15px}
.pause a:hover{ background-size:contain; float:left; width:48px; background-image:url(../images/pause_hover.png); text-indent:-999px; height:48px}

.forward30 a{ background-size:contain; float:left; width:32px; background-image:url(../images/forward30sec.png); text-indent:-999px; height:32px; margin:10px 15px}
.forward30 a:hover{ background-size:contain; float:left; width:32px; background-image:url(../images/forward30sec_hover.png); text-indent:-999px; height:32px}

.forward a{ background-size:contain; float:left; width:32px; background-image:url(../images/skip-next.png); text-indent:-999px; height:32px; margin:10px 15px}
.forward a:hover{ background-size:contain; float:left; width:32px; background-image:url(../images/skip-next_hover.png); text-indent:-999px; height:32px}

.stop a{ background-size:contain; float:left; width:32px; background-image:url(../images/stop.png); text-indent:-999px; height:32px; margin:10px 15px}
.stop a:hover{ background-size:contain; float:left; width:32px; background-image:url(../images/stop.png); text-indent:-999px; height:32px}

.volume{ float:right; width:100px; margin-top:15px; }

.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}