/*
available controllers:
	- whiteControllers
	- blackControllers
*/

/* the border

.audio3_html5Bg {
	position:relative;
}
*/

/*bottom div*/
.audio3_html5_bottom_div {
    /*border:1px solid #F00;*/
    position:fixed;
    z-index:1000;
}

/* the container */
.audio3_html5 {
    /*background:#0000CC;
    padding:5px;*/
}


.xaudioplaylist {
    display:none;
}

/* jquery ui styles */
.ui-slider-handle {
    position: absolute;
    z-index: 2;
    display: block;
    margin-left:-0.6em;
    cursor: default;
    outline: none;
}

.ui-slider-range {
    display:block;
    width:100%;
    height:100%;
    left:0;
    bottom: 0;
    border:0 none;
    position:absolute;
    z-index:1;
}

.ui-progressbar {
    /*height: 5px;*/
}
.ui-progressbar-value {
    height:100%;
}



/* whiteControllers */
.audio3_html5.whiteControllers {
    float: left;
    position: relative;
    font:11px Arial, Helvetica, sans-serif;
    color:#FFF;
}
.audio3_html5_bottom_div.whiteControllers .AudioCloseBut {
    width:19px;
    height:13px;
    position:absolute;
    margin-top:-13px;
    right:0;
    cursor:pointer;
    background:url(../img/player/closeButOFF.png) no-repeat;
}
.audio3_html5_bottom_div.whiteControllers .AudioCloseBut:hover {
    background:url(../img/player/closeButON.html) no-repeat;
}

.audio3_html5_bottom_div.whiteControllers .AudioOpenBut {
    width:21px;
    height:31px;
    position:absolute;
    cursor:pointer;
    background:url(../img/player/openButOFF.png) no-repeat;
}
.audio3_html5_bottom_div.whiteControllers .AudioOpenBut:hover {
    background:url(../img/player/openButON.html) no-repeat;
}

.audio3_html5.whiteControllers .AudioControls {
    clear: both;
    width: 100%;
}


/* rewind */
.audio3_html5.whiteControllers .AudioRewind {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 2px 8px 0px;
    width: 31px;
    height: 31px;
    /*background: url(../img/player/rewind-off.png) no-repeat;	*/
}
.audio3_html5.whiteControllers .AudioRewind:hover {
    /*background: url(../img/player/rewind-on.png) no-repeat;	*/
}

/* play */
.audio3_html5.whiteControllers .AudioPlay {
    float:left;
    cursor: pointer;
    display: block;
    /*margin:5px 3px 8px 0px;*/
    margin-top:5px;
    margin-right:3px;
    margin-bottom:8px;
    margin-left:0px;
    width: 25px;
    height: 25px;
    background: url(../img/player/play-off.png) no-repeat;
}
.audio3_html5.whiteControllers .AudioPlay:hover {
    background: url(../img/player/play-on.html) no-repeat;
}
/* pause */
.audio3_html5.whiteControllers .AudioPause {
    float:left;
    cursor: pointer;
    display: block;
    margin-top:5px;
    margin-right:3px;
    margin-bottom:8px;
    margin-left:0px;
    width: 25px;
    height: 25px;
    background: url(../img/player/pause-off.png) no-repeat;
}
.audio3_html5.whiteControllers .AudioPause:hover {
    background: url(../img/player/pause-on.html) no-repeat;
}
/* prev */
.audio3_html5.whiteControllers .AudioPrev {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 3px 8px 2px;
    width: 25px;
    height: 25px;
    background: url(../img/player/prev-off.png) no-repeat;
}
.audio3_html5.whiteControllers .AudioPrev:hover {
    background: url(../img/player/prev-on.html) no-repeat;
}
/* next */
.audio3_html5.whiteControllers .AudioNext {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 3px 8px 0px;
    width: 25px;
    height: 25px;
    background: url(../img/player/next-off.png) no-repeat;
}
.audio3_html5.whiteControllers .AudioNext:hover {
    background: url(../img/player/next-on.html) no-repeat;
}

/*shuffle */
.audio3_html5.whiteControllers .AudioShuffle {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 3px 8px 0px;
    width: 25px;
    height: 25px;
    background: url(../img/player/shuffle-off.png) no-repeat;
}
.audio3_html5.whiteControllers .AudioShuffle:hover {
    background: url(../img/player/shuffle-on.html) no-repeat;
}

.audio3_html5.whiteControllers .AudioShuffleON {
    background: url(../img/player/shuffle-on.html) no-repeat;
}

/* volume button Mute & UnMute*/
.audio3_html5.whiteControllers .VolumeButton {
    float:left;
    cursor: pointer;
    display: block;
    margin:12px 5px 8px 5px;
    width: 7px;
    height: 10px;
    background: url(../img/player/volume-off.png) no-repeat;
}
.audio3_html5.whiteControllers .VolumeButton:hover {
    background: url(../img/player/volume-on.html) no-repeat;
}

.audio3_html5.whiteControllers .VolumeButtonMuted {
    background: url(../img/player/volumeMute-off.html) no-repeat;
}
.audio3_html5.whiteControllers .VolumeButtonMuted:hover {
    background: url(../img/player/volumeMute-on.html) no-repeat;
}

/* volume slider */
.audio3_html5.whiteControllers .VolumeSlider {
    float:left;
    cursor: pointer;
    display: block;
    width:35px;
    height:4px;
    margin:15px 5px 5px 0px;
    /*background: #fff000;*/
}

.audio3_html5.whiteControllers .VolumeSlider .ui-slider-handle {
    display:none;
}

.audio3_html5.whiteControllers .VolumeSlider .ui-slider-handle.ui-state-hover {
    /*background: #fff000;*/
}

.audio3_html5.whiteControllers .VolumeSlider .ui-slider-range {
    position:relative;
    height:4px;
    /*background: #00F; blue*/
}


/* timer */
.audio3_html5.whiteControllers .AudioTimer {
    float:left;
    display: block;
    margin:10px 5px 8px 5px;
    font-weight: normal;
}

/* buffer */
.audio3_html5.whiteControllers .AudioBuffer {
    /*float:left;*/
    clear:both;
    cursor: pointer;
    display: block;
    height: 4px;
    /*width:100%;*/
    margin:5px 5px 5px 5px;
}
.audio3_html5.whiteControllers .AudioBuffer .ui-widget-content {  }
.audio3_html5.whiteControllers .AudioBuffer .ui-widget-header { /*background:#93C; mauve*/ }


/* seek */
.audio3_html5.whiteControllers .AudioSeek {
    clear:both;
    cursor: pointer;
    position:relative;
    /*width:100%;*/
    height:4px;
    margin:-9px 5px 5px 5px;
    /*margin-top:-9px; margin:5px 0px 5px 0px; (AudioBuffer) + height:4px;*/
}

.audio3_html5.whiteControllers .AudioSeek .ui-slider-handle {
    display:none;
}

.audio3_html5.whiteControllers .AudioSeek .ui-slider-handle.ui-state-hover {
    /*background: #fff000;*/
}

.audio3_html5.whiteControllers .AudioSeek .ui-slider-range {
    height:4px;
}



/*song Author & Title*/
.audio3_html5.whiteControllers .songAuthorTitle {
    position:relative;
    float:left;
    display: block;
    overflow:hidden;
    height:14px;
    margin:3px 5px 5px 5px;
    font-weight: normal;
}

.audio3_html5.whiteControllers .songAuthorTitleInside {
    position: absolute;
    white-space: nowrap;
}



/* playlist */
.audio3_html5.whiteControllers .thumbsHolderWrapper {
    position:absolute;
    height:100%;
    margin-top:0px;
    overflow:hidden;
}
.audio3_html5.whiteControllers .thumbsHolderVisibleWrapper {
    position:absolute;
    height:100%;
    overflow:hidden;
}
.audio3_html5.whiteControllers .thumbsHolder {
    position:absolute;
    text-align:left;
}
/* thumbsOFF */
.audio3_html5.whiteControllers .thumbsHolder_ThumbOFF {
    display:block;
    height:30px;
    cursor: pointer;
    background:#000;
    overflow:hidden;
    border-bottom:1px solid #ff0000;
    line-height:2.5em;
}
.audio3_html5.whiteControllers .thumbsHolder_ThumbOFF  .padding {
    padding:2px 10px 10px 10px;
}


/*  scroller start */
.audio3_html5.whiteControllers .slider-vertical {
    display:none;
    position:absolute;
    width:9px;
}

.audio3_html5.whiteControllers .slider-vertical.ui-slider { position: relative;}
.audio3_html5.whiteControllers .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 9px; height: 16px; cursor: pointer; background:url(../img/player/scrollerFaceOFF.html) 0 0 no-repeat; }
.audio3_html5.whiteControllers .slider-vertical.ui-slider .ui-slider-handle:hover {  background:url(../img/player/scrollerFaceON.html) 0 0 no-repeat; }
.audio3_html5.whiteControllers .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; }


.audio3_html5.whiteControllers .slider-vertical.ui-slider-vertical { width: 9px; height: 100px; }
.audio3_html5.whiteControllers .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -16px;; border: 0; }
.audio3_html5.whiteControllers .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.audio3_html5.whiteControllers .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.audio3_html5.whiteControllers .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; }


/* Component containers
----------------------------------*/
.audio3_html5.whiteControllers .slider-vertical.ui-widget-content { /*background: #ff7800;*/}
.audio3_html5.whiteControllers .slider-vertical .ui-widget-header { /*background: #24ff00;*/ }


/* Corner radius */
.audio3_html5.whiteControllers .slider-vertical.ui-corner-all {}

/* Interaction states
----------------------------------
.audio3_html5.whiteControllers .slider-vertical.ui-state-default {background: #000000; }
.audio3_html5.whiteControllers .slider-vertical.ui-state-hover { background: #FFF000;  }
*/
/*  scroller end */


.audio3_html5.whiteControllers .cancelDiv {
    display:none;
    width:0px;
    height:0px;
    padding:0;
    margin:0;
}
.audio3_html5.whiteControllers .cancelThumbsHolderWrapper {
    display:none;
    opacity:0;
    margin-top:-20px;
}










/* blackControllers */
.audio3_html5.blackControllers {
    float: left;
    position: relative;
    font:11px Arial, Helvetica, sans-serif;
    color:#FFF;
}
.audio3_html5_bottom_div.blackControllers .AudioCloseBut {
    width:19px;
    height:13px;
    position:absolute;
    margin-top:-13px;
    right:0;
    cursor:pointer;
    background:url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/closeButOFF.html) no-repeat;
}
.audio3_html5_bottom_div.blackControllers .AudioCloseBut:hover {
    background:url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/closeButON.html) no-repeat;
}

.audio3_html5_bottom_div.blackControllers .AudioOpenBut {
    width:21px;
    height:31px;
    position:absolute;
    cursor:pointer;
    background:url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/openButOFF.html) no-repeat;
}
.audio3_html5_bottom_div.blackControllers .AudioOpenBut:hover {
    background:url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/openButON.html) no-repeat;
}


.audio3_html5.blackControllers .AudioControls {
    clear: both;
    width: 100%;
}


/* rewind */
.audio3_html5.blackControllers .AudioRewind {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 2px 8px 0px;
    width: 31px;
    height: 31px;
    /*background: url(https://www.audioplayerhtml5.com/sticky/controllers/blackControllers/rewind-off.png) no-repeat;	*/
}
.audio3_html5.blackControllers .AudioRewind:hover {
    /*background: url(https://www.audioplayerhtml5.com/sticky/controllers/blackControllers/rewind-on.png) no-repeat;	*/
}

/* play */
.audio3_html5.blackControllers .AudioPlay {
    float:left;
    cursor: pointer;
    display: block;
    margin-top:5px;
    margin-right:3px;
    margin-bottom:8px;
    margin-left:0px;
    width: 25px;
    height: 25px;
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/play-off.html) no-repeat;
}
.audio3_html5.blackControllers .AudioPlay:hover {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/play-on.html) no-repeat;
}
/* pause */
.audio3_html5.blackControllers .AudioPause {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 3px 8px 0px;
    width: 25px;
    height: 25px;
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/pause-off.html) no-repeat;
}
.audio3_html5.blackControllers .AudioPause:hover {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/pause-on.html) no-repeat;
}
/* prev */
.audio3_html5.blackControllers .AudioPrev {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 3px 8px 2px;
    width: 25px;
    height: 25px;
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/prev-off.html) no-repeat;
}
.audio3_html5.blackControllers .AudioPrev:hover {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/prev-on.html) no-repeat;
}
/* next */
.audio3_html5.blackControllers .AudioNext {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 3px 8px 0px;
    width: 25px;
    height: 25px;
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/next-off.html) no-repeat;
}
.audio3_html5.blackControllers .AudioNext:hover {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/next-on.html) no-repeat;
}

/*shuffle */
.audio3_html5.blackControllers .AudioShuffle {
    float:left;
    cursor: pointer;
    display: block;
    margin:5px 3px 8px 0px;
    width: 25px;
    height: 25px;
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/shuffle-off.html) no-repeat;
}
.audio3_html5.blackControllers .AudioShuffle:hover {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/shuffle-on.html) no-repeat;
}

.audio3_html5.blackControllers .AudioShuffleON {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/shuffle-on.html) no-repeat;
}

/* volume button Mute & UnMute*/
.audio3_html5.blackControllers .VolumeButton {
    float:left;
    cursor: pointer;
    display: block;
    margin:12px 5px 8px 5px;
    width: 7px;
    height: 10px;
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/volume-off.html) no-repeat;
}
.audio3_html5.blackControllers .VolumeButton:hover {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/volume-on.html) no-repeat;
}

.audio3_html5.blackControllers .VolumeButtonMuted {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/volumeMute-off.html) no-repeat;
}
.audio3_html5.blackControllers .VolumeButtonMuted:hover {
    background: url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/volumeMute-on.html) no-repeat;
}

/* volume slider */
.audio3_html5.blackControllers .VolumeSlider {
    float:left;
    cursor: pointer;
    display: block;
    width:35px;
    height:4px;
    margin:15px 5px 5px 0px;
}

.audio3_html5.blackControllers .VolumeSlider .ui-slider-handle {
    display:none;
}

.audio3_html5.blackControllers .VolumeSlider .ui-slider-handle.ui-state-hover {
    /*background: #fff000;*/
}

.audio3_html5.blackControllers .VolumeSlider .ui-slider-range {
    position:relative;
    height:4px;
}


/* timer */
.audio3_html5.blackControllers .AudioTimer {
    float:left;
    display: block;
    margin:10px 5px 8px 5px;
    font-weight: normal;
}




/* buffer */
.audio3_html5.blackControllers .AudioBuffer {
    /*float:left;*/
    clear:both;
    cursor: pointer;
    display: block;
    height: 4px;
    /*width:100%;*/
    margin:5px 5px 5px 5px;
}
.audio3_html5.blackControllers .AudioBuffer .ui-widget-content {  }
.audio3_html5.blackControllers .AudioBuffer .ui-widget-header { /*background:#93C; mauve*/ }


/* seek */
.audio3_html5.blackControllers .AudioSeek {
    clear:both;
    cursor: pointer;
    position:relative;
    /*width:100%;*/
    height:4px;
    margin:-9px 5px 5px 5px;
    /*margin-top:-9px; margin:5px 0px 5px 0px; (AudioBuffer) + height:4px;*/
}

.audio3_html5.blackControllers .AudioSeek .ui-slider-handle {
    display:none;
}

.audio3_html5.blackControllers .AudioSeek .ui-slider-handle.ui-state-hover {
    /*background: #fff000;*/
}

.audio3_html5.blackControllers .AudioSeek .ui-slider-range {
    height:4px;
    /*background: #00F; blue*/
}



/*song Author & Title*/
.audio3_html5.blackControllers .songAuthorTitle {
    position:relative;
    float:left;
    display: block;
    overflow:hidden;
    height:14px;
    margin:3px 5px 5px 5px;
    font-weight: normal;
}
.audio3_html5.blackControllers .songAuthorTitleInside {
    position: absolute;
    white-space: nowrap;
}



/* playlist */
.audio3_html5.blackControllers .thumbsHolderWrapper {
    position:absolute;
    height:100%;
    margin-top:0px;
    overflow:hidden;
}
.audio3_html5.blackControllers .thumbsHolderVisibleWrapper {
    position:absolute;
    height:100%;
    overflow:hidden;
}
.audio3_html5.blackControllers .thumbsHolder {
    position:absolute;
    text-align:left;
}
/* thumbsOFF */
.audio3_html5.blackControllers .thumbsHolder_ThumbOFF {
    display:block;
    height:30px;
    cursor: pointer;
    background:#000;
    overflow:hidden;
    border-bottom:1px solid #ff0000;
    line-height:2.5em;
}
.audio3_html5.blackControllers .thumbsHolder_ThumbOFF  .padding {
    padding:2px 10px 10px 10px;
}


/*  scroller start */
.audio3_html5.blackControllers .slider-vertical {
    display:none;
    position:absolute;
    width:9px;
}

.audio3_html5.blackControllers .slider-vertical.ui-slider { position: relative;}
.audio3_html5.blackControllers .slider-vertical.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 9px; height: 16px; cursor: pointer; background:url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/scrollerFaceOFF.html) 0 0 no-repeat; }
.audio3_html5.blackControllers .slider-vertical.ui-slider .ui-slider-handle:hover {  background:url(../../www.audioplayerhtml5.com/sticky/controllers/blackControllers/scrollerFaceON.html) 0 0 no-repeat; }
.audio3_html5.blackControllers .slider-vertical.ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; }


.audio3_html5.blackControllers .slider-vertical.ui-slider-vertical { width: 9px; height: 100px; }
.audio3_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-handle { left: 0px; margin-left: 0px; margin-bottom: -16px;; border: 0; }
.audio3_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.audio3_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.audio3_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-range-max { top: 0; }


/* Component containers
----------------------------------*/
.audio3_html5.blackControllers .slider-vertical.ui-widget-content { /*background: #ff7800;*/}
.audio3_html5.blackControllers .slider-vertical .ui-widget-header { /*background: #24ff00;*/ }


/* Corner radius */
.audio3_html5.blackControllers .slider-vertical.ui-corner-all {}


.audio3_html5.blackControllers .cancelDiv {
    display:none;
    width:0px;
    height:0px;
    padding:0;
    margin:0;
}

.audio3_html5.blackControllers .cancelThumbsHolderWrapper {
    display:none;
    opacity:0;
    margin-top:-20px;
}








/* Interaction states
----------------------------------
.audio3_html5.giant .slider-vertical.ui-state-default {background: #000000; }
.audio3_html5.giant .slider-vertical.ui-state-hover { background: #FFF000;  }
*/
/*  scroller end */

.hideElement {
    display:none;
}

.clearBoth {
    clear: both;
}