.video-js {
  font-size:11px; /*davon hängen die em-Größen ab!*/
  background-color: #000; position: relative; padding: 0;
  vertical-align: middle;
}

/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
.video-js:-moz-full-screen { position: absolute; }

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0; margin: 0;
  height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
}
.video-js.vjs-fullscreen {
  position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
  _position: absolute; /* IE6 Full-window (underscore hack) */
}
.video-js:-webkit-full-screen {
  width: 100% !important; height: 100% !important;
}

/* Poster Styles */
.vjs-poster {
  margin: 0 auto; padding: 0; cursor: pointer;
  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  position: relative; width: 100%; max-height: 100%;
}

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* Individual tracks */
.video-js .vjs-text-track {
  display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (IE6) */
  background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
}
.video-js .vjs-subtitles { color: #fff; }
.video-js .vjs-captions { color: #fc6; }
.vjs-tt-cue { display: block; }

/* Fading sytles, used to fade control bar. */
.vjs-fade-in {visibility: visible !important; }

.vjs-fade-out {visibility: hidden !important;}


/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */

/* The default control bar. Created by bar.js */
.vjs-default-skin .vjs-controls {
  position: absolute;
  bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  left: 0; right: 0; /* 100% width of div */
  margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
  height: 2.5em; /* Including any margin you want above or below control items */
  background: #3B465F;

  visibility: hidden;
  opacity: 0.80;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
  filter: alpha(opacity=80);  
  
}

/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  position: relative; float: left;
  text-align: center; margin: 0; padding: 0;
  height: 100%;
}

.vjs-default-skin .vjs-control:focus {
  outline: 0;
/*  background-color: #555;*/
}

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-default-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }




/* Button Play/Pause  */
.vjs-default-skin .vjs-play-control { width: 2.5em; height:100%; cursor: pointer !important; float:left#;} 
/* Icons Play/Pause  */
.vjs-default-skin.vjs-paused .vjs-play-control div {width: 20px; height: 100%;  margin: 0 auto; background: url(ew72videojs.png) -40px center; }
.vjs-default-skin.vjs-playing .vjs-play-control div {width: 20px; height: 100%; margin: 0 auto; background: url(ew72videojs.png) -90px center;}


/* Rewind*/
.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px;  background: url(ew72videojs.png); margin: 0.5em auto 0;}



/* Buttons Volume/Mute */
.vjs-default-skin .vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right;}
/* Icons Volume/Mute */
.vjs-default-skin .vjs-mute-control div { width: 30px; height: 100%; background: url(ew72videojs.png) -435px center; margin:0 auto; }
.vjs-default-skin .vjs-mute-control.vjs-vol-0 div { background: url(ew72videojs.png) -285px center; }
.vjs-default-skin .vjs-mute-control.vjs-vol-1 div { background: url(ew72videojs.png) -335px center; }
.vjs-default-skin .vjs-mute-control.vjs-vol-2 div { background: url(ew72videojs.png) -385px center; }


.vjs-default-skin .vjs-volume-control { width: 8em; margin-right:1em; float: right; position:relative; }
.vjs-default-skin .vjs-volume-bar {
  position: relative; cursor: pointer !important;
  padding:0; margin:-4px 0 0 0; 
  height: 6px;
  top:1.25em;
  background: #3B465F;
  border: solid 1px white;
  
}
.vjs-default-skin .vjs-volume-level { 
  position: absolute; display: block; height: 6px; margin:0; padding: 0;
  left: 0; top: 0; background:white;
}

.vjs-default-skin .vjs-volume-handle {
  position: absolute;
  width: 0.5em; height: 1.5em;
  margin-top: -0.6em;
  left: 0; top: 0; /*Needed for IE6*/
  background:#3B465F;
  border:solid 1px white;
}

/* Progress */
.vjs-default-skin .vjs-progress-control { padding:0 0.5em; float:none; overflow-x:hidden; width:auto;}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  
  position: relative; cursor: pointer !important;
  padding:0; margin:-4px 0 0 0; /* Placement within the progress control item */
  height: 6px;
  top:1.25em;
  background:#3B465F;
  border: solid 1px white;

}
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
  position: absolute; display: block; height: 6px; margin:0; padding: 0;
  left: 0; top: 0; 
  
}

.vjs-default-skin .vjs-play-progress {
 
  background: transparent; 

}
.vjs-default-skin .vjs-load-progress {
  background:white ;
}

.vjs-default-skin div.vjs-seek-handle {
  position: absolute;
  width: 0.5em; height: 1.5em;
  margin-top: -0.6em;
  left: 0; top: 0; /*Needed for IE6*/
  background:#3B465F;
  border:solid 1px white;
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-time-controls {
  float:left;
  height: 100%; width: 3em; color:white;
  font-size: 1.2em; line-height: 2.2em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
}

.vjs-default-skin .vjs-current-time { }

.vjs-default-skin .vjs-duration { display: none; }
.vjs-default-skin .vjs-remaining-time { display: none; }
.vjs-time-divider { display:none; }
.vjs-default-skin .vjs-time-control { font-size: 1em; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-default-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }


.vjs-secondary-controls { float: right;}
/* Button Fullscreen */
.vjs-default-skin .vjs-fullscreen-control { width:2.5em; cursor: pointer !important; float: right; margin: 0 0.5em}
/* Icons Fullscreen */
.vjs-default-skin .vjs-fullscreen-control div { width: 20px; height: 100%; background: url(ew72videojs.png) -140px center; margin:0 auto; }
.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control div { background:url(ew72videojs.png) -190px center;  }


/* Big Play Button (at start)*/
.vjs-default-skin .vjs-big-play-button {
  display: block; /* Start hidden */ z-index: 2;
  position: absolute; top: 50%; left: 50%; text-align: center; vertical-align: center; cursor: pointer !important;
  
  background: #454545;

}

.vjs-default-skin div.vjs-big-play-button:hover {

}

.vjs-default-skin div.vjs-big-play-button span {
  position: absolute; top: 50%; left: 50%;
  display: block; width: 70px; height: 70px;
  margin: -35px 0 0 -35px; /* Using negative margin to center image. */
  background:  #3B465F url(ew72videojs.png) -715px center no-repeat;
  opacity: 0.80;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
  filter: alpha(opacity=80);
  
  
}

/* Loading Spinner
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-loading-spinner {
  display: none;
  position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
  margin: -28px 0 0 -28px;
  -webkit-animation-name: rotatethis;
  -webkit-animation-duration:1s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotatethis;
  -moz-animation-duration:1s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotatethis {
  0% {-webkit-transform:scale(0.6) rotate(0deg); }
  12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
  12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
  25% {-webkit-transform:scale(0.6) rotate(45deg); }
  25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
  37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
  37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
  50% {-webkit-transform:scale(0.6) rotate(135deg);}
  50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
  62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
  62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
  75% {-webkit-transform:scale(0.6) rotate(225deg);}
  75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
  87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
  87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
  100% {-webkit-transform:scale(0.6) rotate(315deg);}
}

@-moz-keyframes rotatethis {
  0% {-moz-transform:scale(0.6) rotate(0deg);}
  12.5% {-moz-transform:scale(0.6) rotate(0deg);}
  12.51% {-moz-transform:scale(0.6) rotate(45deg);}
  25% {-moz-transform:scale(0.6) rotate(45deg);}
  25.01% {-moz-transform:scale(0.6) rotate(90deg);}
  37.5% {-moz-transform:scale(0.6) rotate(90deg);}
  37.51% {-moz-transform:scale(0.6) rotate(135deg);}
  50% {-moz-transform:scale(0.6) rotate(135deg);}
  50.01% {-moz-transform:scale(0.6) rotate(180deg);}
  62.5% {-moz-transform:scale(0.6) rotate(180deg);}
  62.51% {-moz-transform:scale(0.6) rotate(225deg);}
  75% {-moz-transform:scale(0.6) rotate(225deg);}
  75.01% {-moz-transform:scale(0.6) rotate(270deg);}
  87.5% {-moz-transform:scale(0.6) rotate(270deg);}
  87.51% {-moz-transform:scale(0.6) rotate(315deg);}
  100% {-moz-transform:scale(0.6) rotate(315deg);}
}
/* Each circle */
div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
  border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }

  
/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
  float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
  border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

}
/* Button Icon */
.vjs-default-skin .vjs-menu-button div { background: url(ew72videojs.png) 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button ul {
  display: none; /* Start hidden. Hover will show. */
  opacity: 0.8;
  padding: 0; margin: 0;
  position: absolute; width: 10em; bottom: 2em; max-height: 15em;
  left: -3.5em; /* Width of menu - width of button / 2 */
  background-color: #111;
  border: 2px solid lime;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
  overflow: auto;
}

.vjs-default-skin .vjs-menu-button:focus ul,
.vjs-default-skin .vjs-menu-button:hover ul { display: block; list-style: none; }
.vjs-default-skin .vjs-menu-button ul li { list-style: none; margin: 0; padding: 0.3em 0 0.3em 20px; line-height: 1.4em; font-size: 1.2em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; }
.vjs-default-skin .vjs-menu-button ul li.vjs-selected { text-decoration: underline; background: url(ew72videojs.png) -125px -50px no-repeat; }
.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0;

  color: #fff; font-weight: bold;

  cursor: default;

  background: #4d4d4d;
  background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
  background: -webkit-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -o-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
  background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
}

/* Subtitles Button */
.vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }
.vjs-default-skin .vjs-chapters-button div { background-position: -100px -75px; }
.vjs-default-skin .vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }