/*
        ~ dPlayer.css ~ 

    Style definitions for dPlayer: HTML5 dynamic Audio-file Player;

    Includes Style Configuration for KBSlider / KBSliderX Range-Slider
    ( See Bottom and Note Style vs Function Settings when customizing )

*/

* {
    margin:     0 ;
    padding:    0 ;
}
body {
    background-color: transparent ;
}
header {
    background-color:rgba(33, 33, 33, 0.9) ;
    font: 14px/1.3 Arial,sans-serif;
    margin-bottom: 10px     ;
    position:relative       ;
    display:block           ;
    color:#fff              ;
}
header h2{
    font-size:   22px       ;
    margin:       0px auto  ;
    padding:     10px 0     ;
    width:       80%        ;
    text-align:  center     ;
}
header a, a:visited {
    text-decoration: none     ;
    color:           #fcfcfc  ;
}

#debugger { ; }

.centerbox {
    margin: 0 auto 0                ;
    width: 350px                    ;
    background-color: transparent   ;
    height: 100%                    ;
}
.RightText {
    text-align: right               ;
}
.player {
    background: transparent url("dPlayer.png") no-repeat scroll center top;
    height: 180px               ;
    position: relative          ;
    width: 350px                ;
    z-index: 2                  ;
}
.title, .album, .subtitle {
    font-family: verdana        ;
    left: 10px                  ;
    position: absolute          ;

    -moz-user-select: none      ;
    -webkit-user-select: none   ;
    -ms-user-select: none       ;
}
.title {
    color: #FFFFFF      ;
    font-size: 14px     ;
    font-weight: bold   ;
    top: 6px            ;
    white-space: nowrap ;
    max-width: 331px    ;
    overflow: hidden    ;
}
.subtitle {
    font-style: italic  ;
    color: #EEEEEE      ;
    font-size: 12px     ;
    top: 28px           ;
    max-width: 335px    ;
    overflow: hidden    ;
}
.album {
    color: #EEEEEE      ;
    font-size: 12px     ;
    top: 44px           ;
}
.pl {
    background: transparent url("dPlayer.png") no-repeat scroll -264px -194px;
    cursor: pointer    ;
    height: 40px       ;
    left: 285px        ;
    position: absolute ;
    top: 110px         ;
    width: 45px        ;
}
.pl:hover {
    top: 111px ;
}
.cover {
    background: transparent url(CoverThumb.jpg) no-repeat scroll center top;
    border-radius:  5px 5px 5px 5px;
    height:         94px    ;
    left:           10px    ;
    position:       absolute;
    top:            71px    ;
    width:          94px    ;
}
#splash{ 
    border: none ;
    border-radius:  5px 5px 5px 5px;    
    height: 100% ;
    width:  100% ;
}
.controls {
    cursor:   pointer  ;
    height:    25px    ;
    left:     150px    ;
    position: absolute ;
    top:       72px    ;
    width:    180px    ;
}
.toggles { 
    cursor:     pointer  ;
    height:      23px    ;
    left:       160px    ;
    position:   absolute ;
    top:        105px    ;
    width:      100px    ;
}

.controls .play, .controls .pause, .controls .prev, .controls .rew, .controls .fwd {
    background: transparent url("dPlayer.png") no-repeat scroll 0 0;
    float:  left        ;
    height: 100%        ;
    width:   45px       ;
}

.toggles .mp3on, .toggles .mp3off, .toggles .wavon, .toggles .wavoff {
    background: transparent url("dPlayer.png") no-repeat scroll 0 0;
    float:  left       ;
    height: 100%       ;
    width:   48px      ;
}

.toggles .mp3on  {
    background-position: -54px -212px  ;
}
.toggles .mp3off {
    background-position: -101px -212px ;
}
.toggles .wavon  {
    background-position: -148px -212px ;
}
.toggles .wavoff {
    background-position: -197px -212px ;
}


.controls .play {
    background-position: -8px -187px   ;
}
.controls .pause {
    background-position: -8px -214px   ;
    display: none;
}
.controls .prev {
    background-position: -53px -187px  ;
}
.controls .rew {
    background-position: -98px -187px  ;
}
.controls .fwd {
    background-position: -143px -187px ;
}


.controls .play:hover {
    background-position: -9px -186px   ;
}
.controls .pause:hover {
    background-position: -9px -213px   ;
}
.controls .prev:hover {
    background-position: -54px -186px  ;
}
.controls .rew:hover {
    background-position: -99px -186px  ;
}
.controls .fwd:hover {
    background-position: -144px -186px ;
}

.controls .visible, .toggle .visible {
    display: block       ;
}

#volume {
    height:       8px    ;
    left:       150px    ;
    position:   absolute ;
    top:        135px    ;
    width:      116px    ;
}
#songbar{
    display:    inherit     ;
    position:   absolute    ;
    height:     15px        ;
    top:        153px       ;
    left:       150px       ;
    width:      181px       ;
    cursor:     pointer     ;
}
.mp3list, .wavlist {
    background-color: #333333;
    border-radius: 0px 0px 5px 5px;
    list-style-type: none   ;
    margin: -10px 0 0 2px   ;
    padding-bottom: 10px    ;
    padding-top: 15px       ;
    padding-right: 15px     ;
    position: relative      ;
    width: 316px            ;
    z-index: 1              ;
}
.mp3list li, .wavlist li {
    color: #EEEEEE          ;
    cursor: pointer         ;
    margin: 0 0 5px 15px    ;
}
.mp3list li.active, .wavlist li.active {
    font-weight: bold       ;
    color:#FFFFCC           ;
}

  /*\--------------------------------\*-*-*/
 /***\ -  S L I D E R - S T Y L E  -  \* */
/*-*-*\--------------------------------\*/ 

div#volume .progbox{
  border-radius:  2px 2px 2px 2px;
}  
div#volume .progbox:focus { outline: 0; }

div#volume .progbar{
  height: 8px ;
  border-radius:  2px 0 0 3px ;
  background: transparent url("dPlayer.png") no-repeat scroll 0px -240px ;
}
div#volume .dragframe{  
  text-align: center ;
  min-height: 13px   ;
  min-width:  13px   ;
  background: url("Loud.png"); 
  background-size: cover ;     
  top: -2px          ;
}
div#volume .dragbtn{
  padding: 3px    ;
  color: #fff     ;
}


div#songbar .progbox{
    display:    inherit  ; 
    height:     100%     ;
    width:      100%     ;
}  
div#songbar .progbox:focus { outline: 0; }

div#songbar .progbar{
    display:    inherit     ;
    background: transparent url("dPlayer.png") no-repeat scroll 0px -240px;
    height:     15px        ;
    position:   absolute    ;
    top:        0           ;
    left:       0           ;
    border-radius:  2px 2px 2px 2px ;     
}
div#songbar .dragframe{  
    display: none   ;
}
div#songbar .dragbtn{
    display: none   ;
}

  /*\---------------------------------------\*-*-*/
 /***\  -  S L I D E R - F U N C T I O N  -  \* */
/*-*-*\---------------------------------------\*/


.KBSlider{
  display: inherit ;
}

.progbox{
  position: absolute  ;
  width: 100%         ;
  z-index: 7          ;
  /*top: 10px ;*/
} 

.progbar{
  z-index:      8  ;
}

.dragframe{  
  position: absolute     ; 
  background-size: cover ;  
  z-index: 10            ;
}

.dragbtn{  
  display: inline ;  
  cursor: pointer ;  
  z-index: 9      ;
}


.hidden { display: none ; }
.fbDump { display: none ; }