/*

plugin website : http://mediaelementjs.com/

*/

/* ------------------------------------------------------------------------ */
/* $CONTENTS
/* ------------------------------------------------------------------------ */

/*

    01. $CONTENTS
    02. $TRANSPARENT
    03. $BLACK ( #000 )
    04. $WHITE ( #FFF )
    05. $LIGHT GREY ( #A8A8A8 )
    06. $BLUE ( #70C7F4 )
    07. $GREEN ( #85C028 )
    08. $YELLOW ( #F9BA00 )
    09. $TURQUOISE ( #5BCCCA )
    10. $ORANGE ( #F39F4B )
    11. $BACKGROUND IMAGES

*/

/* ------------------------------------------------------------------------ */
/* $TRANSPARENT
/* ------------------------------------------------------------------------ */

.mejs-container button 

{ background-color: transparent; }

/* ------------------------------------------------------------------------ */
/* $BLACK ( #000 )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* embeded videos like ( youtube - vimeo ) */
.mejs-embed, .mejs-embed body,

/* main container */
.mejs-container

{ background-color: #000; }

/* total time */
.mejs-controls .mejs-time-rail .mejs-time-total,

/* volume total */
.mejs-horizontal-volume-slider .mejs-horizontal-volume-total

{ background-color: rgba(0, 0, 0, 0.1); }

/* ready ( loaded time ) bar */
.mejs-controls .mejs-time-rail .mejs-time-loaded 

{ background-color: rgba(0, 0, 0, 0.15); }

/* ------------------------------------------------------------------------ */
/* $WHITE ( #FFF )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* big paly button */
.mejs-overlay-button,

/* loader button */
.mejs-overlay-loading,

/* controls */
.mejs-controls,

/* sourcechooser list */
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul

{ background-color: #FFF!important; }

/* ------------------------------------------ */
/* $COLOR
/* ------------------------------------------ */

/* error link */
.me-cannotplay a,

/* tooltip bottom pointer */
.mejs-controls .mejs-time-rail .mejs-time-float,

/* sourcechooser menu */
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label

 { color: #FFF;  }

/* ------------------------------------------ */
/* $BORDERS
/* ------------------------------------------ */

/* sourcechooser menu pointer */
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector:after

{ border-color: #FFF transparent transparent transparent; } 

/* ------------------------------------------------------------------------ */
/* $LIGHT GREY ( #A8A8A8 )
/* ------------------------------------------------------------------------ */


/* ------------------------------------------ */
/* $COLOR
/* ------------------------------------------ */

/* time */
.mejs-time span,

/* sourcechooser menu item */
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li

{ color: #A8A8A8; }

/* ------------------------------------------------------------------------ */
/* $BLUE ( #70C7F4 )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* current time bar ( represent watched period ) */
.mejs-blue .mejs-controls .mejs-time-rail .mejs-time-current,

/* adjust current time */
.mejs-blue .mejs-controls .mejs-time-rail .mejs-time-handle,

/* current volume */
.mejs-blue .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,

/* timer tooltip */
.mejs-blue .mejs-controls .mejs-time-rail .mejs-time-float,

/* sourcechooser menu */
.mejs-blue .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-blue .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label

{ background-color: #70C7F4; }

/* ------------------------------------------ */
/* $BORDERS
/* ------------------------------------------ */

/* tooltip bottom pointer */
.mejs-blue .mejs-controls .mejs-time-rail .mejs-time-float-corner 

{  border-color: #70C7F4 transparent transparent transparent; }

/* ------------------------------------------------------------------------ */
/* $DARK ( #444 )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* current time bar ( represent watched period ) */
.mejs-dark .mejs-controls .mejs-time-rail .mejs-time-current,

/* adjust current time */
.mejs-dark .mejs-controls .mejs-time-rail .mejs-time-handle,

/* current volume */
.mejs-dark .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,

/* timer tooltip */
.mejs-dark .mejs-controls .mejs-time-rail .mejs-time-float,

/* sourcechooser menu */
.mejs-dark .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-dark .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label

{ background-color: #444; }

.mejs-dark .mejs-controls .mejs-time-rail .mejs-time-float-corner 

{  border-color: #444 transparent transparent transparent; }

/* ------------------------------------------------------------------------ */
/* $GREEN ( #85C028 )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* current time bar ( represent watched period ) */
.mejs-green .mejs-controls .mejs-time-rail .mejs-time-current,

/* adjust current time */
.mejs-green .mejs-controls .mejs-time-rail .mejs-time-handle,

/* current volume */
.mejs-green .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,

/* timer tooltip */
.mejs-green .mejs-controls .mejs-time-rail .mejs-time-float,

/* sourcechooser menu */
.mejs-green .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-green .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label

{ background-color: #85C028; }

/* ------------------------------------------ */
/* $BORDERS
/* ------------------------------------------ */

/* tooltip bottom pointer */
.mejs-green .mejs-controls .mejs-time-rail .mejs-time-float-corner 

{  border-color: #85C028 transparent transparent transparent; }

/* ------------------------------------------------------------------------ */
/* $YELLOW ( #F9BA00 )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* current time bar ( represent watched period ) */
.mejs-yellow .mejs-controls .mejs-time-rail .mejs-time-current,

/* adjust current time */
.mejs-yellow .mejs-controls .mejs-time-rail .mejs-time-handle,

/* current volume */
.mejs-yellow .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,

/* timer tooltip */
.mejs-yellow .mejs-controls .mejs-time-rail .mejs-time-float,

/* sourcechooser menu */
.mejs-yellow .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-yellow .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label

{ background-color: #F9BA00; }

/* ------------------------------------------ */
/* $BORDERS
/* ------------------------------------------ */

/* tooltip bottom pointer */
.mejs-yellow .mejs-controls .mejs-time-rail .mejs-time-float-corner 

{  border-color: #F9BA00 transparent transparent transparent; }

/* ------------------------------------------------------------------------ */
/* $TURQUOISE ( #5BCCCA )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* current time bar ( represent watched period ) */
.mejs-turquoise .mejs-controls .mejs-time-rail .mejs-time-current,

/* adjust current time */
.mejs-turquoise .mejs-controls .mejs-time-rail .mejs-time-handle,

/* current volume */
.mejs-turquoise .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,

/* timer tooltip */
.mejs-turquoise .mejs-controls .mejs-time-rail .mejs-time-float,

/* sourcechooser menu */
.mejs-turquoise .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-turquoise .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label

{ background-color: #5BCCCA; }

/* ------------------------------------------ */
/* $BORDERS
/* ------------------------------------------ */

/* tooltip bottom pointer */
.mejs-turquoise .mejs-controls .mejs-time-rail .mejs-time-float-corner 

{  border-color: #5BCCCA transparent transparent transparent; }

/* ------------------------------------------------------------------------ */
/* $ORANGE ( #F39F4B )
/* ------------------------------------------------------------------------ */

/* ------------------------------------------ */
/* $BACKGROUND
/* ------------------------------------------ */

/* current time bar ( represent watched period ) */
.mejs-orange .mejs-controls .mejs-time-rail .mejs-time-current,

/* adjust current time */
.mejs-orange .mejs-controls .mejs-time-rail .mejs-time-handle,

/* current volume */
.mejs-orange .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,

/* timer tooltip */
.mejs-orange .mejs-controls .mejs-time-rail .mejs-time-float,

/* sourcechooser menu */
.mejs-orange .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input:checked + label,
.mejs-orange .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li:hover label

{ background-color: #F39F4B; }

/* ------------------------------------------ */
/* $BORDERS
/* ------------------------------------------ */

/* tooltip bottom pointer */
.mejs-orange .mejs-controls .mejs-time-rail .mejs-time-float-corner 

{  border-color: #F39F4B transparent transparent transparent; }

/* ------------------------------------------------------------------------ */
/* $BACKGROUND IMAGES
/* ------------------------------------------------------------------------ */

/* loader button */
.mejs-overlay-loading span { background-image: url(../../img/mediaelement/spinner-grey.gif)!important; }

/* big play button */
.mejs-overlay-button { background-image: url(../../img/mediaelement/play-grey.png)!important; }

/* controls buttons */
.mejs-button button { background-image: url(../../img/mediaelement/controls-grey.png)!important; }