/*
  Player Skin Designer for Video.js
  http://videojs.com

  To customize the player skin edit 
  the CSS below. Click "details" 
  below to add comments or questions.
  This file uses some SCSS. Learn more  
  at http://sass-lang.com/guide)

  This designer can be linked to at:
  http://codepen.io/heff/pen/EarCt/left/?editors=010
*/

.audio-skin{
      /* The base font size controls the size of everything, not just text.
     All dimensions use em-based sizes so that the scale along with the font size.
     Try increasing it to 15px and see what happens. */
    font-size: 13px;
    /* The main font color changes the ICON COLORS as well as the text */
    color: #fff;
    min-width: 100%;
    min-height: 39px;
}


/* The default color of control backgrounds is mostly black but with a little
   bit of blue so it can still be seen on all-black video frames, which are common. */

.audio-skin .vjs-control-bar{
    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0.1s, opacity 0.1s;
    -moz-transition: visibility 0.1s, opacity 0.1s;
    -o-transition: visibility 0.1s, opacity 0.1s;
    transition: visibility 0.1s, opacity 0.1s;

}

.audio-skin .vjs-big-play-button,
.audio-skin .vjs-menu-button .vjs-menu-content {
    /* IE8 - has no alpha support */
    background-color: #2B333F;
    /* Opacity: 1.0 = 100%, 0.0 = 0% */
    background-color: rgba(43, 51, 63, 0.7);
}

/* Slider - used for Volume bar and Progress bar */
.audio-skin .vjs-slider {
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);

}

/* The slider bar color is used for the progress bar and the volume bar
   (the first two can be removed after a fix that's coming) */
.audio-skin .vjs-volume-level,
.audio-skin .vjs-play-progress,
.audio-skin .vjs-slider-bar {
    background: #DDDDDD;
}

.audio-skin .vjs-current-time{
    display: block;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}


/* The main progress bar also has a bar that shows how much has been loaded. */
.audio-skin .vjs-load-progress {
    /* For IE8 we'll lighten the color */
    background: ligthen(#73859f, 25%);
    /* Otherwise we'll rely on stacked opacities */
    background: rgba(115, 133, 159, 0.5);
}

/* The load progress bar also has internal divs that represent
   smaller disconnected loaded time ranges */
.audio-skin .vjs-load-progress div {
    /* For IE8 we'll lighten the color */
    background: ligthen(#73859f, 50%);
    /* Otherwise we'll rely on stacked opacities */
    background: rgba(115, 133, 159, 0.75);
}
.player-skin .audio-skin .sample-audio-dimensions .vjs-controls-enabled .vjs-audio .vjs-workinghover .vjs-has-started .vjs-playing .vjs-user-inactive{
  visibility: visible;
  opacity: 1;
}