@charset "utf-8";

/**

 * SMusic

 * Author:Smohan

 * Version:2.0.0

 * url: http://www.smohan.net/lab/smusic.html



/*reset*/

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);word-wrap: break-word;font-size: inherit;line-height: inherit;overflow: visible;}

header,footer,section,article,aside,nav,address,figure,figcaption,menu,details{display:block;}

.f-cb{height: 0;}

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

.f-ib{display:inline-block;}

.f-din{display:inline;}

.f-dn{display:none;}

.f-db{display:block;}

.f-fl{float:left;}

.f-fr{float:right;}

.f-fwn{font-weight:normal;}

.f-fwb{font-weight:bold;}

.f-tal{text-align:left;}

.f-tac{text-align:center;}

.f-tar{text-align:right;}

.f-oh{overflow: hidden;zoom: 1;clear: both;}

.f-tdn{text-decoration: none!important;}

.f-vam,.f-vama *{vertical-align:middle;}

.f-wsn{word-wrap:normal;white-space:nowrap;}

.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}

.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}

.f-ti{overflow:hidden;text-indent:-30000px;}

.f-lhn{line-height:normal;}

.f-toe{overflow:hidden;word-wrap:normal!important;white-space:nowrap;text-overflow:ellipsis;}

.f-usn{-webkit-user-select:none;user-select:none;}

.f-bsb{-webkit-box-sizing:border-box;box-sizing:border-box;}

.f-cp{cursor: pointer}



 




html,body{
	width: 100%;
	height: 100%;
	background-color:#FBEDA0;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	background-image: url(../images/bg8.jpg);
	background-repeat: no-repeat;
}



/*SMusic*/

.grid-music-container{

    width: 100%;
    padding: 20px;

    position: absolute;

top: 50%;

    margin-top: -118px;

    background-color: #FBEDA0;

    font-family: "Microsoft Yahei","寰蒋闆呴粦","Helvetica Neue","Hiragino Sans GB",Helvetica,Tahoma,sans-serif;

    text-shadow: 1px 0 0 rgba(255,255,255,.7);left: auto;

	right: auto;



}



.grid-music-container .m-music-play-wrap{

    height: 150px;

    position: relative;

    padding-left: 140px;

}

.grid-music-container .u-cover{

    width: 121px;

    height: 121px;

    overflow: hidden;

    background: url(../img/music_icons.png) 0 0 no-repeat;

    position: absolute;

    top: 0;

    left: 0;

}

.grid-music-container .u-cover img{

    display: block;

    width: 100%;

    height: auto;

    max-height: 100%;

    border-radius: 50%;

}

.grid-music-container .u-cover.play{

    -webkit-animation: Circle 10s linear infinite 0s forwards;

    animation: Circle 10s linear infinite 0s forwards;

}

.grid-music-container .u-cover.paused{

    -webkit-animation-play-state: paused;

    animation-play-state: paused;

}

@-webkit-keyframes Circle {

    from{

        -webkit-transform: rotate(0deg);

    }

    to{

        -webkit-transform: rotate(360deg);

    }

}

@keyframes Circle {

    from{

        transform: rotate(0deg);

    }

    to{

        transform: rotate(360deg);

    }

}



.grid-music-container .m-now-info{

    height: 100%;

}

.grid-music-container .m-now-info h1{

    font-weight: normal;

}

.grid-music-container .m-now-info h1 strong{

    font-size: 20px;

    color: #333333;

    font-weight: normal;

}

.grid-music-container .m-now-info h1 small{

    margin-left: 20px;

    font-size: 16px;

    color: #313230;

}

.grid-music-container .m-now-controls{

    padding-top: 10px;

    position: relative;

}

.grid-music-container .m-now-controls .u-control{

    display: inline-block;

    vertical-align:middle;

    font-size: 0;

    overflow: hidden;

}

.grid-music-container .m-now-controls .u-process{

    width: 180px;

    height: 6px;

    position: relative;

    background-color: #cecfd4;

    cursor: pointer;

}

.grid-music-container .m-now-controls .u-process .buffer-process,.grid-music-container .m-now-controls .u-process .current-process{

    display: block;

    width: 0;

    height: 6px;

    position: absolute;

    top:0;

    left: 0;

    background-color: #FBF5D5;

    z-index: 1;

}

.grid-music-container .m-now-controls .u-process .buffer-process{

    z-index: 0;

    background-color: #c1c2c0;

}

.grid-music-container .m-now-controls .u-time{

    margin-left: 10px;

    font-size: 12px;

    color: #585957;

}

.grid-music-container .m-now-controls .u-volume{

    overflow: visible;

    text-align: center;

    position: relative;

    margin-left: 20px;

}

.grid-music-container .u-volume .volume-process{

    width: 3px;

    height: 50px;

    background: #cecfd4;

    position: absolute;

    top: -54px;

    left: 6px;

    cursor: pointer;

    visibility: hidden; /*璁剧疆涓嶅彲瑙佹€э紝鏈€濂戒笉瑕佷娇鐢╠isplay:none锛屼笉鐒堕珮搴﹀緢闅捐幏鍙?/

}

.grid-music-container .u-volume .volume-process.show{

    visibility: visible;

}

.grid-music-container .u-volume .volume-process .volume-current,

.grid-music-container .u-volume .volume-process .volume-event{

    display: inline-block;

    width: 3px;

    height: 50%;

    background-color: #FBF5D5;

    position: absolute;

    left: 0;

    bottom:0;

    -webkit-transition: height .2s linear;

    transition: height .2s linear;

}

.grid-music-container .u-volume .volume-process .volume-event{

    width: 21px;

    left: -10px;

    background: none;

    height: 100%;

    z-index: 1;

}

.grid-music-container .u-volume .volume-process .volume-bar{

    display: inline-block;

    width: 8px;

    height: 8px;

    border-radius: 100%;

    background-color: #fff;

    border: 1px solid #a8a9a7;

    position: absolute;

    left: -3px;

    bottom: 50%;

    -webkit-transition: bottom .2s linear;

    transition: bottom .2s linear;

   /* z-index: 2;*/

   /* opacity: 0;*/

}

.grid-music-container .u-volume .volume-process .volume-bar:hover,

.grid-music-container .u-volume .volume-process .volume-bar:active{

    background-color: #f1f2f0;

}

.grid-music-container .u-volume .volume-control{

    display: inline-block;

    width: 18px;

    height: 18px;

    background: url(../img/music_icons.png) -140px -80px no-repeat;

    cursor: pointer;

}

.grid-music-container .u-volume .volume-control:hover{

    background-position: -158px -80px;

}

.grid-music-container .u-volume .volume-control.muted{

    background-position: -140px -98px;

}

.grid-music-container .u-volume .volume-control.muted:hover{

    background-position: -158px -98px;

}

.grid-music-container .m-music-list-wrap{
	margin-left: 5px;
	margin-right: 25px;
	height: 420px;
	border: 1px solid rgba(255,255,255,.7);
	overflow-x: hidden;
	overflow-y: auto;
	margin-top: 10px;
}

.grid-music-container .m-music-list-wrap ul{}

.grid-music-container .m-music-list-wrap li{

    display: block;

    line-height: 30px;

    padding: 0 10px;

    cursor: pointer;

    color: #383937;

    font-size: 14px;

}

.grid-music-container .m-music-list-wrap li strong{

    font-size: 16px;

    font-weight: normal;

}

.grid-music-container .m-music-list-wrap li:hover,.grid-music-container .m-music-list-wrap li.current{

    background-color: rgba(255,255,255,.7);

    color: #3792ef;

}

.grid-music-container .m-music-list-wrap li.current{

    background-color: transparent;

}

.grid-music-container .m-play-controls{

    margin-top: 10px;

}

.grid-music-container .m-play-controls a{

    display: inline-block;

    vertical-align: middle;

}

.grid-music-container .m-play-controls .u-play-btn{

    display: inline-block;

    width: 30px;

    height: 30px;

    margin-right: 15px;

    cursor: pointer;

}

.u-play-btn{

    background: url(../img/music_icons.png) -220px 0 no-repeat;

}

.u-play-btn.prev,.u-play-btn.next{

    background-position: -220px 0;

}

.u-play-btn.prev:hover,.u-play-btn.next:hover{

    background-position: -220px -36px;

}

.u-play-btn.prev{

    -webkit-transform: rotate(-180deg);

    transform: rotate(-180deg);

}

.u-play-btn.play{

    background-position: -250px 0;

}

.u-play-btn.play:hover{

    background-position: -250px -36px;

}

.u-play-btn.paused{

    background-position: -280px 0;

}

.u-play-btn.paused:hover{

    background-position: -280px -36px;

}

.u-play-btn.mode{

    width: 20px!important;

    height: 18px!important;

    margin-right: 10px!important;

}

.u-play-btn.mode-list{

    background-position: -181px -98px;

    margin-left: 65px;

}

.u-play-btn.mode-list.current{

    background-position: -221px -98px;

}

.u-play-btn.mode-random{

    background-position: -201px -80px;

}

.u-play-btn.mode-random.current{

    background-position: -241px -80px;

}

.u-play-btn.mode-single{

    background-position: -181px -80px;

}

.u-play-btn.mode-single.current{

    background-position: -221px -80px;

}

/*姝岃瘝*/

.grid-music-container .m-music-lyric-wrap{

    width: 220px;

    height: 100%;

    background-color: rgba(255,255,255,.7);

    position: absolute;

    right: -220px;

    top : 0;

    border-left: 1px solid #fff;

    overflow: hidden;

}

.grid-music-container .m-music-lyric-wrap .inner{

    position: absolute;

    top:20px;

    left: 20px;

    right: 20px;

    bottom: 20px;

    overflow-x: hidden;

    overflow-y: auto;

}

.grid-music-container .m-music-lyric-wrap .inner ul{

    position: absolute;

    width: 100%;

    top:0;

    left: 0;

    overflow: hidden;

    -webkit-transition: all .3s;

    transition: all .3s;

}

.grid-music-container .m-music-lyric-wrap ul li{

    display: block;

    line-height: 30px;

    height: 30px;

    overflow: hidden;

    text-align: center;

    font-size: 13px;

    color: #666;

}

.grid-music-container .m-music-lyric-wrap ul li.current{

    color: #2e86ef;

    font-size: 14px;

    font-weight: bold;

}

.grid-music-container .m-music-lyric-wrap ul li.eof{

    height:100%;

    line-height: 250px;

    font-size: 20px;

    color: #999;

}