@charset "utf-8";
/* CSS Document */
ul, li { list-style:none; padding:0; margin:0; }
.DreambackMusicPlayer { height: 40px; position: relative; width: 490px; position: relative; margin: 50px auto 0; }
#MusicPlayer, #PlayBtn, #PrevBtn, #NextBtn, #FullProgressBar, #LoadProgressBar, #PlayProgressBar, #CurrentPlay, #SoundBtn, #SoundBar, #CurSoundBar, #DownLoadBtn, #CurSound { background-image: url(../images/skin-png24.png); }
#MusicPlayer { height: 40px; width: 490px; background-position: 0 0; position: relative; z-index: 2; }
#PlayBtn, #PrevBtn, #NextBtn { width: 20px; height: 20px; overflow: hidden; display: inline-block; margin-left: 8px; margin-top: 11px; float: left; }
#PlayBtn { }
#PrevBtn { background-position: -40px -67px; }
#NextBtn { background-position: -60px -67px; }
#PlayBtn, #PrevBtn, #NextBtn, #CurrentPlay, #DownLoadBtn, #CurSound { opacity: .8 }
#PlayBtn:hover, #PrevBtn:hover, #NextBtn:hover, #CurrentPlay:hover, #DownLoadBtn:hover, #CurSound:hover { opacity: 1; cursor: pointer; }
#TimeBar { float: left; font-size: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; line-height: 20px; height: 20px; overflow: hidden; width: 60px; text-align: center; margin-top: 10px; margin-left: 8px; color: #999; }
#TimeBar #CurTime { color: #fff; }
#FullProgressBar, #LoadProgressBar, #PlayProgressBar { font-size: 0; height: 9px; }
#FullProgressBar { background-position: 0 -40px; float: left; margin-top: 17px; margin-left: 10px; position: relative; width: 200px; }
#LoadProgressBar { background-position: 0 -49px; }
#PlayProgressBar { background-position: 0 -58px; }
#LoadProgressBar, #PlayProgressBar { position: absolute; left: 0; top: 0; }
#CurrentPlay { position: absolute; width: 20px; height: 20px; background-position: -80px -67px; }
#SoundBtn { width: 20px; height: 20px; float: left; background-position: -100px -67px; margin-left: 8px; margin-top: 11px; }
#SoundBar { font-size: 0; height: 7px; width: 50px; background-position: -200px -40px; float: left; margin-left: 8px; position: relative; margin-top: 17px; }
#CurSoundBar { font-size: 0; height: 7px; position: absolute; left: 0; top: 0; background-position: -200px -47px; }
#CurSound { font-size: 0; height: 20px; width: 20px; position: absolute; background-position: -120px -67px; }
#DownLoadBtn { display: block; float: left; font-size: 0; width: 20px; height: 20px; margin-left: 8px; background-position: -140px -67px; margin-top: 11px; }
#MusicList { position: absolute; left: 0; top: 35px; background: #111; width: 100%; height: 300px; z-index: 1; border-top: 5px solid #111; border-radius: 3px; overflow:hidden;}
#MusicList ul{position:absolute;left:0;top:0;width:100%;}
#MusicList li textarea { display:none; }
#MusicList li { color:#666; font-size:14px; height:30px; line-height:30px; padding-left:20px; border-bottom:1px solid #000; /* 定义动画的过程 */
    -webkit-transition: all .5s ease-in; -moz-transition:    all .5s ease-in; -o-transition:      all .5s ease-in; transition:         all .5s ease-in; }
#MusicList li.cur, #MusicList li:hover { background:#333; color:#fff; }
.play{background-position:0 -67px;}
.pause{background-position:-20px -67px;}

#ListScrollBar{position:absolute;left:479px;top:0;font-size:0;height:100px;width:10px;background:#999; border-radius:5px;opacity:.5;filter:alpha(opacity=50);}
#ListScrollBar:hover{opacity:1;filter:alpha(opacity=100);}