/* HTML 5 VIDEO */
/*
	cor: 			ec9b2a
	bg				353033
*/

.video-js-box { text-align: center; position: relative; margin:0px auto; margin-top:40px;overflow:hidden; width:100%;} 

video.video-js { background-color: #f9f9f9; position: relative; }

.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.vjs-controls {
  list-style: none; position: absolute; margin: 0; border: none; color: #b6b6b6;
  display: none; 
  left: 0; right: 0; 
  height: 30px; 
  padding-left: 40px; /* Width of play button + margin */
  padding-right: 167px; /* Width of all the controls to the right of the progress control + margins */
  padding-bottom: 0;
  background-color: #353033;
}


/* Controls styles when below the video */
.video-js-box.vjs-controls-below .vjs-controls {  }

.vjs-controls > li { /* Direct li children of control bar */
  position: absolute; list-style: none; float: left; padding: 0; text-align: center;
  height: 12px; /* Default height of individual controls */
  margin: 2px 0 0 0; /* Top margin to put space between video and controls when controls are below */
  color:#b4b4b4;
}

/* Placement of Control Items */
.vjs-controls > li.vjs-play-control  { width: 6px; left: 7px; }
.vjs-controls > li.vjs-play-control.vjs-pause { width: 5px; left: 15px; }
.vjs-controls > li.vjs-progress-control   { width: 100%; position: relative; margin:0;}
.vjs-controls > li.vjs-time-control       { width: 64px; right: 63px; text-align:center;}
.vjs-controls > li.vjs-volume-control     { width: 28px; right: 15px; }
.vjs-controls > li.vjs-fullscreen-control { width: 0/*11px*/; right: 0/*15px*/; }

/* Removing curves on progress control and time control to join them. */
.vjs-controls > li.vjs-progress-control {
  border-left:1px solid #505050;
  border-right:1px solid #505050;
  height:6px;
  padding:12px 0;
  margin:0;
}
.vjs-controls > li.vjs-time-control { 
	padding:9px 20px;
	margin:0px;
}

/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-play-control { cursor: pointer !important; }
.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
.vjs-play-control.vjs-play span {
  width: 0; height: 0; margin: 6px 0 0 10px;
  border-left: 7px solid #b4b4b4;
  border-top: 7px solid rgba(0,0,0,0); border-bottom: 7px solid rgba(0,0,0,0);
}
.vjs-play-control.vjs-play span:hover,
.vjs-play-control.vjs-play span:active{ border-left: 7px solid #f0f0f0; }

.vjs-play-control.vjs-pause span {
  width: 4px; height: 12px; margin: 7px auto 10px; margin-left:0px;
  border-top: 0px; border-left: 3px solid #b4b4b4; border-bottom: 0px; border-right: 3px solid #b4b4b4;
}

.vjs-play-control.vjs-pause span:hover,
.vjs-play-control.vjs-pause span:active{ border-color: #f0f0f0; }


/* Progress
-------------------------------------------------------------------------------- */
.vjs-progress-holder { /* Box containing play and load progresses */
  background-color:#000000;
  position: relative; list-style: none; padding: 0; overflow:hidden; cursor: pointer !important;
  height: 6px; 
  margin:0 20px;
  padding: 0; /* Placement within the progress control item */
}
.vjs-progress-holder li { /* Progress Bars */
  height: 6px; position: absolute; display: block; width: 0; 
}
.vjs-play-progress {
  /* Default */ background-color: #ec9b2a;
  /* Firefox  background: -moz-linear-gradient(top,  #00AEAA,  #00AEAA);*/
}
.vjs-load-progress {
  /* Default */ background-color: #b4b4b4;
  /* Firefox  background: -moz-linear-gradient(top,  #b4b4b4,  #b4b4b4);*/
}

/* Time Display
-------------------------------------------------------------------------------- */
.vjs-controls .vjs-time-control { border-right:1px solid #505050; font-size: 10px; line-height: 1; font-weight: normal; font-family: 'Trebuchet MS'; }
.vjs-controls .vjs-time-control span { line-height: 12px; /* Centering vertically */ }

/* Volume
-------------------------------------------------------------------------------- */
.vjs-volume-control { cursor: pointer !important; width:0px; }
.vjs-volume-control ul { list-style: none; display: block; margin: 7px 0px 0 0px; padding: 0px 0 0 0; }
/* Drawing the volume icon using 6 li elements */
.vjs-volume-control ul li { /* Individual volume bars */
  list-style: none; float: left; padding: 0;
  margin: 0px 2px 0px 0; /* Space between */
  width: 3px; height: 12px; /* Total height is height + bottom border */
  border-bottom: 12px solid #000000; /* Default (off) color and height of visible portion */
}
.vjs-volume-control ul li.vjs-volume-level-on { border-color: #b4b4b4; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 10px; }
.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 8px; }
.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 6px; height: 6px; }
.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 8px; height: 4px; }
.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 10px; height: 2px; }
.vjs-volume-control ul li:nth-child(6) { margin-right: 0; margin-top:-12px;}
.vjs-volume-control ul li:hover{border-color: #f0f0f0;}

/* Download Links - Used for browsers that don't support any video.
-------------------------------------------------------------------------------- */
.video{ background-color: #f9f9f9; border: 1px solid #878787; margin:20px auto; width:544px; }
.novideoplayer{ display:none; }
.video-js-box { overflow: visible; margin:0px;}
.video-js{ width:544px; height:306px; }