body {
   background: #555;
}

#container0 {
   margin: 250px auto;
   overflow: hidden;
   width: 596px;
   height: 192px;
   border:3px solid #000;
   border-radius:5px;
}

#container1 {
   margin: 0px auto;
   overflow: hidden;
   width: 600px;
   height: 194px;
}

#container2 {
   margin: 0px auto;
   overflow: hidden;
   width: 590px;
   height: 24px;
}



#container1 .div-box1 {
   background-image: url(../img/bgl.jpg);
   border: 1px solid #777;
   float: left;
   width: 240px;
   height: 190px;
   color: #fff;
}

#container1 .div-box2 {
   background: linear-gradient(to bottom, #888, #444);
   border: 1px solid #777;
   float: left;
   width: 350px;
   height: 190px;
}


#container2 .div-box3 {
   float: left;
   width: 60px;
   height: 10px;
}







.plhide {
   display: inline-block;
}

/* playlist scrollbar */

#plUL {
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #CCCCCC), color-stop(50%, #EEEEEE), color-stop(50%, #EEEEEE), color-stop(100%, #CCCCCC));
          border-radius: 3px;
          box-shadow: inset -5px -5px 10px 0px rgba(255, 255, 255, 0.5), inset 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
   margin: 10px auto;
   width: 200px;
   padding: 10px;
   list-style-type: none;
   color: #000;
   font-size: 16px;
   font-weight: bold;
}

li.plSel {
   background-color: #0b5e5e;
   font-weight: bold;
   color: #abcdef;
   animation: mymove 1s infinite alternate;
}

@-webkit-keyframes mymove {
   from {
      opacity: 0.5;
   }

   to {
      opacity: 1;
   }
}

.list-box {
   background: #dddddd;
   border-radius: 4px;
   height: 120px;
   overflow-y: scroll;
}

.list-box::-webkit-scrollbar {
   width: 14px;
}

.list-box::-webkit-scrollbar-thumb {
   background-image: url("../btns/scrlth.png");
   background-repeat: no-repeat;
}

.list-box::-webkit-scrollbar-track {
   background: #000;

}

.list-box::-webkit-scrollbar-button:vertical:start:decrement {
   border-radius: 4px;
   background: linear-gradient(120deg, #f00 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #f00 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #f00 30%, rgba(0, 0, 0, 0) 31%);
   background-color: #fcff52;
}

.list-box::-webkit-scrollbar-button:vertical:end:increment {
   border-radius: 4px;
   background: linear-gradient(300deg, #f00 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #f00 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #f00 30%, rgba(0, 0, 0, 0) 31%);
   background-color: #fcff52;
}

.scroll-line {
   /*  background:#eee;
    box-shadow: inset 0 0 10px rgba(0,0,0,.9);
	*/
   margin: 6px auto;
   width: 278px;
}

.scroll-line:after {
   content: "";
   display: table;
   clear: both;
}

.scroll-title {
   padding-top: 4px;
   border-radius: 4px;
   position: relative;
   overflow: hidden;
   height: 20px;
}

#npTitle {

   color: #fff;
   font-size: 18px;
   font-weight: bold;
   animation: moving 5s infinite linear alternate;
   position: absolute;
   white-space: nowrap;
}

@keyframes moving {
   from {
      transform: translateX(100%);
      right: 100%;
   }

   to {
      transform: translateX(0%);
      right: 0%;
   }
}

.player-ctrl {
   width: 260px;
   box-shadow: 0 8px 4px -4px #000000;
   padding: 6px 5px 3px 5px;
   border: 1px solid #999;
   border-radius: 5px;
}

.plrbtn {
   background: linear-gradient(to bottom, #f00, #4d0000);
   width: 44px;
   height: 12px;
   margin-left: 46px;
   margin-right: 15px;
   border-radius: 5px;
   padding: 0px 5px 8px 5px;
   display: inline-block;
}


#btn_playPause {
   background: url(../btns/pp.png) no-repeat;
   border: none;
   outline: none;
   width: 12px;
   height: 12px;
   cursor: pointer;
}

#btnPrev {
   background: url(../btns/prev.png) no-repeat;
   border: none;
   outline: none;
   width: 12px;
   height: 12px;
   cursor: pointer;
}

#btnNext {
   background: url(../btns/next.png) no-repeat;
   border: none;
   outline: none;
   width: 12px;
   height: 12px;
   cursor: pointer;
}



.unmute {
   width: 12px;
   height: 12px;
   margin-left: 50px;
   display: inline-block;
   background-image: url(../btns/unmute.png);
   cursor: pointer;
   outline: none;
}

.mute {
   background-image: url(../btns/mute.png);
}


.vol {
   display: inline-block;
   margin: 3px;
   position: absolute;
}

.volume {
   background: #eee;
   margin-left: 10px;
   margin-right: 20px;
   display: inline-block;
   position: relative;
   cursor: pointer;
   width: 100px;
   height: 12px;
}

.volumeBar {
   display: inline-block;
   height: 12px;
   position: absolute;
   border-right: 10px dashed #f00;
   background: linear-gradient(to bottom, #00ff00, #888);
   width: 50%;
}

hr {
   border-top: 1px dashed #8c8b8b;
   border-bottom: 1px dashed #fff;
}