.jp-gui {position:relative; padding:0px;border:0px; width:195px; height:305px; background:url(back.png);color:#ffffff;} .jp-gui.jp-no-volume {width:432px;} .jp-gui ul {margin:0; padding:0;} .jp-gui ul li {position:relative;float:left;list-style:none;margin:1px;padding:1px 0;cursor:pointer;} .jp-gui ul li a { margin:0 4px;color:#fff;text-decoration:none;} li.jp-pause,li.jp-repeat-off,li.jp-unmute,.jp-no-solution { display:none;} li.jp-play,li.jp-pause,li.jp-stop{top:70px;left:5px} .jp-progress { position:absolute; top:98px; left:45px; width:110px; height:7px;} .jp-progress .ui-slider-handle {cursor:pointer;height:10px;width:12px;top: -.15em !important;} .jp-current-time, .jp-duration {position:absolute;left:160px;top:96px;font-size:0.6em; cursor:default;} .jp-title {position:absolute;left:1px;top:53px;width:186px;font-size:0.6em;background:#c7c7c7; cursor:default;color:#393939;border:1px solid #c7c7c7;} .jp-current-time { left:5px;} .jp-duration {right:266px;} .jp-gui.jp-no-volume .jp-duration {right:70px;} .jp-clearboth {clear:both;} .jp-volume-bar {position: absolute;overflow: hidden;background: #ddd; top:80px;left:120px;width:60px;height:.2em;cursor: pointer; } .jp-volume-bar-value {background: #393939;width: 0px;height: .2em; } .jp-progress {overflow: hidden;background-color: #ddd; } .jp-audio .jp-progress {position: absolute;top:98px; left:45px; width:110px; height:7px;} .jp-audio .jp-progress .ui-slider-handle {cursor:pointer;height:10px;width:12px;top: -.15em !important;} .jp-audio .jp-type-single .jp-progress {left: 110px;width: 186px; } .jp-audio .jp-type-playlist .jp-progress {left: 166px; width: 130px; } .jp-play-bar {background: #393939;width: 0px;height: 100%; } .jp-details {font-weight: bold;text-align: center;cursor: default; } .jp-details,.jp-playlist {position:absolute;margin-left:2px;margin-top:-190px;width: 186px;height:175px;background-color: #000000; color:#ffffff;border-top: 1px solid #009be3; overflow-y:scroll;font-size:.60em !important; } .jp-type-single .jp-details, .jp-type-playlist .jp-details { border-top: none; } .jp-details .jp-title {margin: 0; padding: 5px 20px; font-size: .72em;color:#fff; font-weight: bold; } .jp-playlist ul {list-style-type: none; margin: 0; padding: 0; font-size: 1.1em;font-family: arial; } .jp-playlist li { padding: 5px 0 4px 2px; border-bottom: 1px solid #eee; } .jp-playlist li div { display: inline; } .jp-playlist::-webkit-scrollbar {width: 0.7em;} .jp-playlist::-webkit-scrollbar-button { background: #ccc} .jp-playlist::-webkit-scrollbar-track-piece { background: #888;} .jp-playlist::-webkit-scrollbar-thumb { background: #eee;}​ div.jp-playlist li:last-child {padding: 2px 0 5px 10px;border-bottom: none; } div.jp-playlist li.jp-playlist-current {list-style-type: none;background: #580E74;list-style-position: inside; } div.jp-playlist a {color: #fff;text-decoration: none;display:block } div.jp-playlist a:hover {color: #0d88c1; } div.jp-playlist a.jp-playlist-current {color: #ffffff; } div.jp-playlist a.jp-playlist-item {color: #fff; }