/*staging_test*/

#jukebox-container {background: url(rnh/juke_elements.png) 0 -284px; width: 725px; height: 380px; font-family: Arial, Helvetica, Helvetica Neue, sans-serif; position: absolute;}

/*top*/
.jp-top {height: 70px; background: url(rnh/juke_elements.png) 0 0 no-repeat; position: absolute; width: 725px;}
.jp-logo {display: block; width: 160px; height: 0; overflow: hidden; padding: 60px 0 0; background: url(rnh/juke_elements.png) -565px -144px no-repeat; position: absolute; left: 10px; top: 8px;  z-index: 1;}
.jp-select {position: absolute; right: 0; top: 0;}
.jp-select select {width: 260px; padding: 7px 10px; margin: 14px 14px 0 0; font-size: 12px;}


/*middle*/
.jp-middle {height: 260px; position:absolute; top: 60px;}

.jp-playlist-info {float: left; width: 310px; height: 260px; overflow:hidden;}
.jp-playlist-info  a {color: #5d9ebf;}
.jp-playlist-info-top {background: #222; overflow: hidden; padding: 12px;}
.playlist-label {font-size: 17px; font-weight: bold; color: #5d9ebf; margin: 3px 0; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; max-width: 192px; }
.playlist-descr {color: #eee; font-size: 11px; padding: 10px; overflow: hidden; overflow-y: scroll; height: 164px; width: 290px;}
.playlist-img {display: inline-block; zoom: 1; *display: inline; vertical-align: middle; width: 72px; height: 72px; margin: 0 10px 0 0;}
.playlist-img img {display: block; width: 72px; height: 72px;}

.jp-playlist {overflow: hidden!important; height: 260px; margin-left: 310px; background: url(rnh/juke_elements.png) 0 -664px no-repeat; position: relative; width: 415px; }
.jp-playlist ul {margin: 0; padding: 0; list-style: none; height: 260px; overflow-y: auto!important; overflow-x: hidden!important; position: relative;  }
.jp-playlist ul li {border-bottom: 1px dotted #828282; padding: 10px 20px; position: relative; min-height: 37px; }
.jp-playlist ul li a {text-decoration: none; }
.jp-playlist ul li:hover {background: #f5f5f5;}
.jp-playlist ul li.jp-playlist-current {background: #ccdce2;}


.jp-free-media {position: absolute; right: 55px; top: 10px;display: none;}
.jp-free-media a {position: relative; display: none; z-index: 2; padding-top: 24px; background: url(rnh/juke_elements.png) 50% -1127px no-repeat; text-align: center; width: 23px;}
.jp-playlist-item {position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; right: 0; padding-right: 100px;}
.jp-title {display: block; font-size: 14px; font-weight: bold; color: #325b7a; margin: 0 0 2px;}
.jp-artist {display: block; font-size: 10px;}
.jp-album {display: block; font-size: 10px;}
.jp-buy {position: absolute; top: 10px; right: 20px; display: block; padding-top: 24px; background: url(rnh/juke_elements.png) 50% -1253px no-repeat; z-index: 2; text-align: center; width: 23px;}




/*bottom*/
.jp-bottom {height: 60px; background: url(rnh/juke_elements.png) 0 -60px no-repeat; position:absolute; top:320px; width: 725px;}

.jp-controls {margin: 8px 0 0 10px; padding: 0; list-style: none; overflow: hidden; float: left; height: 42px;}
.jp-controls li {float: left; margin: 0 3px 0 0;}
.jp-controls li a {display: block; width: 42px; height: 0; overflow: hidden; padding: 42px 0 0; overflow: hidden;}

.jp-play {background: url(rnh/juke_elements.png) 0 -144px no-repeat;}
.jp-pause {background: url(rnh/juke_elements.png) -42px -144px no-repeat;}
.jp-previous {background: url(rnh/juke_elements.png) -84px -144px no-repeat;}
.jp-next {background: url(rnh/juke_elements.png) -126px -144px no-repeat;}

.jp-play:hover {background-position: 0 -186px;}
.jp-pause:hover {background-position: -42px -186px;}
.jp-previous:hover {background-position: -84px -186px;}
.jp-next:hover {background-position: -126px -186px;}



.jp-progress { height: 24px; background: url(rnh/juke_elements.png) -295px -236px; position: relative; float: left; width: 430px; margin: 17px 0 0 10px; position: relative;}
.jp-seek-bar, .jp-play-bar {height: 24px; position: absolute; top: 0; left: 0; }
.jp-seek-bar {z-index: 10;}
.jp-play-bar {background: url(rnh/juke_elements.png) -295px -260px; z-index: 8;}

.jp-time-holder {line-height: 24px; padding: 0 10px 0 0; font-weight: bold; font-size: 10px; color: #fff; position: absolute; top: 0; right: 0; z-index: 9;}
.jp-time-holder div {display: inline;}

.jp-volume { overflow: hidden; margin: 15px 15px 0 0; float: right;}
.jp-mute-wrapper {margin: 0; padding: 0; list-style: none; float: left; position:relative; left:5px; z-index: 10;} 
.jp-mute-wrapper li {float: left;} 
.jp-mute-wrapper li a {display: block; width: 28px; height: 0; overflow: hidden!important; padding: 28px 0 0; }
.jp-mute {background: url(rnh/juke_elements.png) 0 -228px no-repeat;}
.jp-unmute {background: url(rnh/juke_elements.png) -28px -228px no-repeat;}
.jp-mute:hover {background-position: 0 -256px;}
.jp-unmute:hover {background-position: -28px -256px}

.jp-volume-bar {height: 15px; background: url(rnh/juke_elements.png) -665px -206px; width: 60px; float: left; margin: 6px 0 0 10px; }
.jp-volume-bar-value {background: url(rnh/juke_elements.png) -665px -221px no-repeat; height: 15px; }

.jp-popout {position: absolute; bottom: -15px; right: 0; z-index: 10; }
#jp-popout {display: block!important; padding-right: 20px; background-position: right -1044px; width: auto; float: right; font-weight: bold; color: #5d9ebf; text-decoration: none; height: 12px;}



.jp-no-solution { padding:25px; font-size:.8em; color:#fff; font-weight: bold; display:none; } 
.jp-no-solution a { color:#fff; } 
.jp-no-solution span { font-size:1em; display:block; text-align:center; font-weight:bold; }