/*
VideoJS VimCSS Skin (http://videojs.com)
Version 2.0.0
*/

/* 
VideoJS Default Styles (http://videojs.com)
Version 2.0.2

REQUIRED STYLES (be careful overriding)
================================================================================ */
/* Box containing video, controls, and download links.
   Will be set to the width of the video element through JS
   If you want to add some kind of frame or special positioning, use another containing element, not video-js-box. */
.video-js-box { text-align: left; position: relative; margin: auto; padding: 0 !important; border: none !important; background: #000; z-index: 1000; }

/* Video Element */
video.video-js { background-color: #000; position: relative; padding: 0; cursor: pointer; }

.vjs-flash-fallback { display: block; }

/* Poster Overlay Style */
.video-js-box img.vjs-poster { display: block; position: absolute; width: 100%; height: 100%; top: 0; left:0; margin: auto; padding: 0; z-index: 1002; cursor: pointer; }
/* Subtiles Style */
.video-js-box .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; z-index: 1004; }

/* Fullscreen styles for main elements */
.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 2000; background: #000;}
.video-js-box.vjs-fullscreen video.video-js,
.video-js-box.vjs-fullscreen .vjs-flash-fallback { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; }
.video-js-box.vjs-fullscreen .vjs-logo { z-index: 2001; }
.video-js-box.vjs-fullscreen img.vjs-poster { z-index: 2002; }
.video-js-box.vjs-fullscreen .vjs-spinner { z-index: 2003; }
.video-js-box.vjs-fullscreen .vjs-controls { z-index: 2003; }
.video-js-box.vjs-fullscreen .vjs-menu { z-index: 2004; }
.video-js-box.vjs-fullscreen .vjs-infos { z-index: 2004; }
.video-js-box.vjs-fullscreen .vjs-preroll-control { z-index: 2004; }
.video-js-box.vjs-fullscreen .vjs-subtitles { z-index: 2004; }
.video-js-box.vjs-fullscreen .vjs-pub { z-index: 2005; }
.video-js-box.vjs-fullscreen .vjs-big-play-button { z-index: 2006; }
.video-js-box.vjs-fullscreen .vjs-logo img { max-width: 400px; max-height: 200px; }

/* Styles Loaded Check */
.vjs-styles-check { height: 5px; position: absolute; }
/* Controls Below Video */
.video-js-box.vjs-controls-below .vjs-controls { position: relative; opacity: 1; background-color: #000; }
.video-js-box.vjs-controls-below .vjs-subtitles { bottom: 75px; } /* Account for height of controls below video */

/* WEBZINE SKIN
================================================================================ */
.video-js-box .vjs-controls {
  position: absolute; margin: 0; opacity: 1;
  display: none; /* Start hidden */
  left: 0; right: 0; /* 100% width of video-js-box */ 
  width: 100%;
  bottom: 0px; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  height: 50px; /* Including any margin you want above or below control items */
  padding: 0; /* Controls are absolutely position, so no padding necessary */
  z-index: 1003; 
}

.video-js-box .vjs-controls > div {
  position: absolute;
  height: 30px; top: 10px; margin: 0; padding: 0; text-align: center; background: none;
  -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; 
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; 
}
/* Placement of Control Items */
.wmaker-css .vjs-controls > div.vjs-back-control       { right: 10px; left: 10px; }
.wmaker-css .vjs-controls > div.vjs-play-control       { width: 14px; left: 23px; }
.wmaker-css .vjs-controls > div.vjs-progress-control   { left: 50px; right: 105px; }
.wmaker-css .vjs-controls > div.vjs-cursor-control	   { width: 78px; left: 12.5px; }
.wmaker-css .vjs-controls > div.vjs-airplay-control    { width: 27px; right: 56px; }
.wmaker-css .vjs-controls > div.vjs-volume-control     { width: 36px; right: 56px; }
.wmaker-css .vjs-controls > div.vjs-fullscreen-control { width: 20px; right: 23px; }


/* Back */
.wmaker-css .vjs-controls .vjs-back-control { height: 30px; top: 10px; padding: 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; opacity: 0.9 }

/* Logo
-------------------------------------------------------------------------------- */
.wmaker-css .vjs-logo { position: absolute; z-index: 1001;}
.wmaker-css .vjs-logo img { max-width: 200px; max-height: 100px; }

/* Play/Pause
-------------------------------------------------------------------------------- */
.wmaker-css .vjs-controls .vjs-play-control { top: 17px; margin: 0; height: 16px; cursor: pointer !important; z-index: 1005;}

/* Progress
-------------------------------------------------------------------------------- */
.vjs-progress-control .vjs-progress-holder { height: 8px; margin-top: 11px; position: relative; padding: 0; overflow:hidden; cursor: pointer !important; z-index: 1006;}
.vjs-progress-holder div { position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0; }
.vjs-progress-control .vjs-play-progress { height: 8px; cursor: pointer !important; }
.vjs-progress-control .vjs-load-progress { height: 8px; cursor: pointer !important; }

/* Cursor 
-------------------------------------------------------------------------------- */
.wmaker-css .vjs-controls .vjs-cursor-control { height:35px; top:-14px; cursor: pointer !important; z-index: 1007;}

/* Time Display
-------------------------------------------------------------------------------- */
.wmaker-css .vjs-controls .vjs-cursor-control .vjs-time-control { font-size: 11px; font-family: Arial, sans-serif; width: 70px; left: 3px; top: 0px; position:absolute; }
.wmaker-css .vjs-controls .vjs-cursor-control .vjs-time-control span { line-height: 30px; /* Centering vertically */ }

/* Preroll
-------------------------------------------------------------------------------- */
div.vjs-preroll-control    { 
	display: none;
	position:absolute;
	width: 240px; right: 10px; height: 20px; bottom: 10px;
	border-radius: 3px;
	text-align: center;
	z-index: 1004;
}
.wmaker-css .vjs-preroll-control { font-size: 11px; font-family: Arial, sans-serif; }
.wmaker-css .vjs-preroll-control span { line-height: 20px; /* Centering vertically */ }

/* Volume
-------------------------------------------------------------------------------- */
.vjs-volume-control { cursor: pointer !important; }
.wmaker-css .vjs-volume-control div { height: 30px; margin-top: 10px; }

/* Airplay
-------------------------------------------------------------------------------- */
.vjs-airplay-control { cursor: pointer !important; }
.wmaker-css .vjs-airplay-control canvas { margin-top: 6px; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-fullscreen-control { cursor: pointer !important; }
.wmaker-css .vjs-fullscreen-control div { height:30px; margin-top: 10px;}

/* Infos
-------------------------------------------------------------------------------- */
div.vjs-infos {
	position: absolute; top: 0px; left:0px; z-index: 1004; right: 70px;
}

div.vjs-infos img.vjs-avatar { width:80px; height:80px; margin-top:10px; margin-left:10px; position:relative; }
div.vjs-infos div.vjs-infos-texts {display:inline-block; margin-left:10px; position:absolute;}
div.vjs-infos div.vjs-infos-texts div.vjs-titre { margin-top:13px; position:relative; font-size: 18px; font-family: Arial, sans-serif; border-radius:3px; -webkit-border-radius:3px; }
div.vjs-infos div.vjs-infos-texts div.vjs-auteur { margin-top:13px; position:relative;  font-size: 14px; font-family: Arial, sans-serif; }
div.vjs-infos div.vjs-infos-texts div.vjs-titre span { padding:3px 5px 3px 5px; }
div.vjs-infos div.vjs-infos-texts div.vjs-auteur span { padding:3px 5px 3px 5px; border-radius:3px; -webkit-border-radius:3px;   }

/* Pub
-------------------------------------------------------------------------------- */
div.vjs-pub {
	position: absolute; display: none; right: 10px; left: 10px; bottom: 50px; height: 75px; z-index: 1005; border-radius: 3px; -webkit-border-radius: 3px;
}

div.vjs-pub div.vjs-pub-left { position:absolute; top: 50%; left: 30px; margin-top: -6px; cursor:pointer; }
div.vjs-pub div.vjs-pub-right { position:absolute; top: 50%; right: 30px; margin-top: -6px; cursor:pointer; }
div.vjs-pub div.vjs-pub-texts { position:absolute; top: 10px; bottom: 10px; left: 50px; right: 50px; cursor:pointer; }
div.vjs-pub div.vjs-pub-texts .pubTitle { font-size: 17px; font-family: Arial, sans-serif; }
div.vjs-pub div.vjs-pub-texts .pubDesc { font-size: 12px; font-family: Arial, sans-serif; }
div.vjs-pub div.vjs-pub-texts .pubLink { font-size: 11px; font-family: Arial, sans-serif; }
div.vjs-pub div.vjs-pub-close { position:absolute; top: 5px; right: 5px; cursor:pointer; }

/* Menu
-------------------------------------------------------------------------------- */
div.vjs-menu {
	display:none;
	position: absolute; top: 0px; right:10px; width:50px; height:178px; cursor: pointer; z-index: 1004; 
}

div.vjs-menu div.vjs-twitter-control { width:50px; height:37px; position:relative; margin-top:10px; cursor:pointer; }
div.vjs-menu div.vjs-facebook-control { width:50px; height:37px; position:relative; margin-top:10px; cursor:pointer; }
/*div.vjs-menu div.vjs-google-control { width:50px; height:37px; position:relative; margin-top:10px; cursor:pointer; }*/
div.vjs-menu div.vjs-embed-control { width:50px; height:37px; position:relative; margin-top:10px; cursor:pointer; }

/* Big Play Button (at start)
---------------------------------------------------------*/
div.vjs-big-play-button {
  display: none; /* Start hidden */
  position: absolute; top: 50%; left: 50%; width: 50px; height: 35px; margin: -17px 0 0 -25px; text-align: center; cursor: pointer !important; z-index: 1006;
}
/* Spinner Styles
---------------------------------------------------------*/
.vjs-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 1003; }
.vjs-spinner div { display: none; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; }