@charset "UTF-8";

/* ===== colors ================================================== */

.error,
.formfieldRedBold {
	font-weight: bold;
	color: #B00;
}

/* ===== base ================================================== */

html,
body {
	background-color: #393939;
	margin: 0;
	padding: 0;
	font: normal 12px Arial, Helvetica, sans-serif;
	color: #CCC;
	text-align: center;
}

a img { border: none; }

a {
	color: #C00;
	outline: none;
}

a:hover { color: #333; }

em,
strong { color: #C00; }

h3,
h4,
h5 { color: #333; }

h2 {
	font: normal 18px Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	color: #555;
}

h3 { font-size: 16px; }

h4 { font-size: 14px; }

h5 { font-size: 12px; }

/* ===== containers ================================================== */

#container {
	position: relative;
	width: 970px;
	margin: 20px auto;
	text-align: left;
}

#containerA {
	border: 8px solid #666;
	padding: 7px 7px 0;
}

#container1 {
	background: #474747 url('../images/header_bg.gif') no-repeat left top;
	height: 90px;
}

#container2 { padding-top: 7px; }

#container3 { height: 47px; }

#container4 {
	background-color: #202020;
	color: #999;
	height: 110px;
}

/* ===== header ================================================== */

#header h1 a {
	display: block;
	width: 318px;
	height: 90px;
	float: left;
}

/* ===== nav ================================================== */

#nav ul li { float: left; }

#nav ul li a {
	display: block;
	background: transparent url('../images/nav_matrix.gif') no-repeat left top;
	height: 90px;
}
/*
#nav ul li a.nav1 {
	background-position: left top;
	width: 124px;
}

#nav ul li a.nav2 {
	background-position: -124px top;
	width: 137px;
}

#nav ul li a.nav4 {
	background-position: -261px top;
	width: 184px;
}

#nav ul li a.nav5 {
	background-position: -445px top;
	width: 127px;
}

#nav ul li a.nav1:hover,
#nav ul li.on a.nav1 { background-position: left bottom; }

#nav ul li a.nav2:hover,
#nav ul li.on a.nav2 { background-position: -124px bottom; }

#nav ul li a.nav4:hover,
#nav ul li.on a.nav4 { background-position: -261px bottom; }

#nav ul li a.nav5:hover,
#nav ul li.on a.nav5 { background-position: -445px bottom; }
*/


#nav ul li a.nav1 {
	background-position: left top;
	width: 97px;
}

#nav ul li a.nav2 {
	background-position: -97px top;
	width: 112px;
}

#nav ul li a.nav3 {
	background-position: -209px top;
	width: 106px;
}

#nav ul li a.nav4 {
	background-position: -315px top;
	width: 158px;
}

#nav ul li a.nav5 {
	background-position: -473px top;
	width: 98px;
}

#nav ul li a.nav1:hover,
#nav ul li.on a.nav1 { background-position: left bottom; }

#nav ul li a.nav2:hover,
#nav ul li.on a.nav2 { background-position: -97px bottom; }

#nav ul li a.nav3:hover,
#nav ul li.on a.nav3 { background-position: -209px bottom; }

#nav ul li a.nav4:hover,
#nav ul li.on a.nav4 { background-position: -315px bottom; }

#nav ul li a.nav5:hover,
#nav ul li.on a.nav5 { background-position: -473px bottom; }



/* ===== index ================================================== */

#index {
	background-color: #FFF;
	color: #000;
}

.indexHtml {
	background: transparent url('../images/indexHtml_matrix.jpg') no-repeat left top;
	width: 466px;
	height: 260px;
	border-right: 8px solid #393939;
	float: left;
}

.indexHtml ul li a {
	display: block;
	height: 20px;
	margin-bottom: 1px;
}

#indexHtml_commercial { background-position: left -260px; }

#indexHtml_recodable { background-position: left bottom; }

a#btn_seeVideoToLearnMore {
	display: block;
	width: 130px;
	height: 30px;
	margin: 140px auto 0;
}

#indexFlash {
	background: transparent url('../images/altimg.png') no-repeat left top;
	width: 466px;
	height: 260px;
	float: left;
}

/* ===== content ================================================== */

#content {
	background-color: #FFF;
	font: normal 12px "Myriad Pro", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	color: #000;
}

.bc-wrapper {
	padding: 20px 8px 20px 20px;
	overflow: hidden;
	*width: 500px;
}

.bc-wrapper object {
	outline: none;
}

.bc-wrapper .download-bc-video {
	display: block;
	margin: 10px auto 0 auto;
	clear: both;
	overflow: hidden;
	position: relative;
	width:500px;
}

.clear {clear: both;}

.float-left {float: left;}

.bc-wrapper .download-bc-video a {
    color: #FF0000;
    font-size: 14px;
	font-weight: bold;
	width: 148px;
	height: 28px; /* 40px - 12px padding */
	padding: 12px 0 0 0;
	display: block;
	text-align: center;
	border: solid 1px #EBEBEB;
	float: left;
	background-color: #FFFFFF;
}

.bc-wrapper .download-bc-video p {
	font-size: 11px;
	width: 318px;
	height: 18px; /* 40px - 10px padding */
	float: left;
	padding: 7px 2px 15px 10px;	
	margin: 0;
	background-color:#EBEBEB;
	float: left;
	display: block;
	overflow: hidden;
	border: solid 1px #EBEBEB;
	border-left: 0px;
	line-height: normal;
}

.bc-wrapper .download-bc-video.double p {
	height: 42px; 
	padding-top: 25px;
}

.bc-wrapper .download-bc-video.double div {overflow:hidden;border-top: solid 1px #EBEBEB;}

.bc-wrapper .download-bc-video.double a {
	clear: both;
	border-top: none;
	height: 37px; 
	padding: 3px 0 0 0;
}

.bc-wrapper .download-bc-video.double a span {
	text-decoration: none;
	font-size: 10px;
}

.bc-wrapper .download-bc-video p img {
	background: transparent url('../images/bg-right-click.png') no-repeat center;
	height: 27px;
	width: 20px;
	float: left;
	margin: 0 7px 0 0;
}

/* ===== selector ================================================== */

#selector ul li,
#selector ul li a {
	display: block;
	background: transparent url('../images/selector_matrix.gif') no-repeat left top;
	width: 235px;
	height: 50px;
	float: left;
}

#selector ul li#selector1,
#selector ul li#selector1 a { background-position: left top; }

#selector ul li#selector2,
#selector ul li#selector2 a { background-position: -235px top; }

#selector ul li#selector3,
#selector ul li#selector3 a { background-position: -470px top; }

#selector ul li#selector4,
#selector ul li#selector4 a { background-position: -705px top; }

#selector ul li#selector1 a:hover { background-position: left -50px; }

#selector ul li#selector2 a:hover { background-position: -235px -50px; }

#selector ul li#selector3 a:hover { background-position: -470px -50px; }

#selector ul li#selector1.on,
#selector ul li#selector1.on a { background-position: left bottom; }

#selector ul li#selector2.on,
#selector ul li#selector2.on a { background-position: -235px bottom; }

#selector ul li#selector3.on,
#selector ul li#selector3.on a { background-position: -470px bottom; }

#selector ul li#selector4.on { background-position: -705px bottom; }

/* ===== breadcrumb ================================================== */

#breadcrumb {
	background-color: #CCC;
	height: 17px;
	padding: 3px 20px 0;
	font: bold 10px Arial, Helvetica, sans-serif;
	color: #000;
}

#breadcrumb ul li {
	display: block;
	padding: 0 2em 0 0;
	float: left;
	white-space: nowrap;
}

#breadcrumb ul li.lit,
#breadcrumb ul li a { color: #B00; }

#breadcrumb ul li a:hover { text-decoration: none; }

/* ===== copy ================================================== */

#copy {
	background: transparent url('../images/copy_bg.gif') repeat-y left top;
	padding: 1em 20px;
	color: #000;
}

#copy ul,
#copy ol { margin-top: 1em; }

#copy li { margin-bottom: 1em; }

.sitemap ul li li { margin-bottom: 0; }

ol.faqs li { margin-bottom: 1em; }

ol.faqs li { margin-bottom: 1em; }

span.faqs_question {
	display: block;
	padding-top: 1em;
	padding-bottom: .75em;
	border-top: 1px solid #CCC;
}

span.faqs_answer { display: block; }

span.faqs_question strong.faqs_q,
span.faqs_answer strong.faqs_a {
	font-size: 18px;
	line-height: 0;
	color: #999;
}

ul.pdfs li {
	background: transparent url('../images/icon_pdf.gif') no-repeat left top;
	padding-top: 2px;
	padding-left: 20px;
}

ul.audio li {
	background: transparent url('../images/icon_itunes.gif') no-repeat left top;
	padding-left: 20px;
	padding-bottom: 2px;
}

ul.zips li {
	background: transparent url('../images/icon_zip.gif') no-repeat left top;
	padding-left: 20px;
	padding-bottom: 2px;
}
ul.excel li {
	background: transparent url('../images/icon_excel.gif') no-repeat left top;
	padding-left: 20px;
	padding-bottom: 2px;
}

.step1 img,
.step2 img,
.step3 img { margin-bottom: 1em; }

.step1 .cellName { }

.step1 .shortDescription {
	display: block;
	height: 115px;
}

.step3 .shortDescription {
	display: block;
	height: 6em; /*old: 55px*/
}

.step4 h3 { margin-bottom: 0; }

.step4 img { margin: 1em 0; }

/* ===== contentFooter ================================================== */

#contentFooter {
	background: transparent url('../images/contentFooter_bg.gif') no-repeat left top;
	height: 50px;
	clear: both;
}

/* ===== learnAbout_matrix ================================================== */

ul.learnAbout_matrix li { float: left; }

ul.learnAbout_matrix li a {
	display: block;
	background: transparent url('../images/learnAbout_matrix.gif') no-repeat left top;
	width: 236px;
	height: 47px;
}

ul#learnAbout_matrixA li a.learnAbout4,
ul#learnAbout_matrixB li a.learnAbout4 { width: 232px; }

ul#learnAbout_matrixA li a.learnAbout1 { background-position: left top; }

ul#learnAbout_matrixA li a.learnAbout2 { background-position: -236px top; }

ul#learnAbout_matrixA li a.learnAbout3 { background-position: -472px top; }

ul#learnAbout_matrixA li a.learnAbout4 { background-position: right top; }

ul#learnAbout_matrixA li a.learnAbout1:hover { background-position: left -47px; }

ul#learnAbout_matrixA li a.learnAbout2:hover { background-position: -236px -47px; }

ul#learnAbout_matrixA li a.learnAbout3:hover { background-position: -472px -47px; }

ul#learnAbout_matrixA li a.learnAbout4:hover { background-position: right -47px; }

ul#learnAbout_matrixB li a.learnAbout1 { background-position: left -94px; }

ul#learnAbout_matrixB li a.learnAbout2 { background-position: -236px -94px; }

ul#learnAbout_matrixB li a.learnAbout3 { background-position: -472px -94px; }

ul#learnAbout_matrixB li a.learnAbout4 { background-position: right -94px; }

ul#learnAbout_matrixB li a.learnAbout1:hover { background-position: left bottom; }

ul#learnAbout_matrixB li a.learnAbout2:hover { background-position: -236px bottom; }

ul#learnAbout_matrixB li a.learnAbout3:hover { background-position: -472px bottom; }

ul#learnAbout_matrixB li a.learnAbout4:hover { background-position: right bottom; }

/* ===== productbins_matrix ================================================== */

ul.productbins li { float: left; }

ul.productbins li a {
	display: block;
	background: transparent url('../images/productbins_matrix.jpg') no-repeat left top;
	width: 188px;
	height: 110px;
	margin-bottom: 7px;
}

ul#productbins_matrixC li a { width: 313px; }

ul#productbins_matrixA li a.productbin1 { background-position: left top; }

ul#productbins_matrixA li a.productbin2 { background-position: -188px top; }

ul#productbins_matrixA li a.productbin3 { background-position: -376px top; }

ul#productbins_matrixA li a.productbin4 { background-position: -564px top; }

ul#productbins_matrixA li a.productbin5 { background-position: -752px top; }

ul#productbins_matrixA li a.productbin1:hover { background-position: left -110px; }

ul#productbins_matrixA li a.productbin2:hover { background-position: -188px -110px; }

ul#productbins_matrixA li a.productbin3:hover { background-position: -376px -110px; }

ul#productbins_matrixA li a.productbin4:hover { background-position: -564px -110px; }

ul#productbins_matrixA li a.productbin5:hover { background-position: -752px -110px; }


ul#productbins_matrixB li a.productbin1 { background-position: left -220px; }

ul#productbins_matrixB li a.productbin2 { background-position: -188px -220px; }

ul#productbins_matrixB li a.productbin3 { background-position: -376px -220px; }

ul#productbins_matrixB li a.productbin4 { background-position: -564px -220px; }

ul#productbins_matrixB li a.productbin5 { background-position: -752px -220px; }


ul#productbins_matrixB li a.productbin1:hover { background-position: left -330px; }

ul#productbins_matrixB li a.productbin2:hover { background-position: -188px -330px; }

ul#productbins_matrixB li a.productbin3:hover { background-position: -376px -330px; }

ul#productbins_matrixB li a.productbin4:hover { background-position: -564px -330px; }

ul#productbins_matrixB li a.productbin5:hover { background-position: -752px -330px; }


ul#productbins_matrixC li a.productbin1 { background-position: left -440px; }

ul#productbins_matrixC li a.productbin2 { background-position: -313px -440px; }

ul#productbins_matrixC li a.productbin3 { background-position: -626px -440px; }


ul#productbins_matrixC li a.productbin1:hover { background-position: left -550px; }

ul#productbins_matrixC li a.productbin2:hover { background-position: -313px -550px; }

ul#productbins_matrixC li a.productbin3:hover { background-position: -626px -550px; }


/* ===== footer ================================================== */

#footer {
	padding: 20px 0;
	font-size: 11px;
	color: #CCC;
	text-align: center;
}

#footer ul li {
	display: inline;
	background: transparent url('../images/icon_plus.gif') no-repeat left center;
	margin:0;
	padding: 0 .25em 0 1em;
}

#footer ul li.first {
	background: none;
	padding-left: .25em;
}

#footer ul li a { color: #CCC; }

#footer ul li a:hover { color: #FFF; }

/* ===== btns ================================================== */

a.btn_select {
	display: block;
	background: transparent url('../images/btn_select.gif') no-repeat left top;
	width: 75px;
	height: 16px;
}

a.btn_select:hover { background-position: left bottom; }

/* ===== cells ================================================== */

.cell_1_2,
.cell_1_4,
.cell_3_4,
.cell_1_3,
.cell_2_3,
.cell_1_5,
.cell_2_5,
.cell_3_5,
.cell_1_6 {
	padding: 0 20px 0 0;
	float: left;
}

.cell_1_2 { width: 430px; }

.cell_1_4 { width: 205px; }

.cell_3_4 { width: 655px; }

.cell_1_3 { width: 280px; }

.cell_2_3 { width: 580px; }

.cell_1_5 { width: 160px; }

.cell_2_5 { width: 340px; }

.cell_3_5 { width: 520px; }

.cell_1_6 { width: 130px; }

.cell_2_3_wrap {
	width: 600px;
	float: left;
}

.cell_1_3_reduced {
	width: 300px;
	float: left;
}

/* ===== tables ================================================== */

.table0 th { text-align: left; }

.table0 td {
	padding: 2em 0;
	border-top: 1px solid #CCC;
}

.table0 table th,
.table0 table td {
	padding: 1em 30px 0 0;
	border: none;
}

.table0 table tr.hdr th {
	font-size: 1.25em;
	padding-top: 0;
	margin-top: 0;
	color: #555;
}

/* ===== default ================================================== */

.tiny { font-size: 10px; }

.lower { text-transform: none; }

.upper { text-transform: uppercase; }

.right {
	margin: 0 0 1em 1em;
	float: right;
}

.left {
	margin: 0 1em 1em 0;
	float: left;
}

.clear { clear: both; }

.clear_space {
	margin: 0 0 1em;
	clear: both;
}

.reduced,
h1,
#nav ul,
.indexHtml ul,
#selector ul,
#breadcrumb ul,
ol.faqs,
ul.pdfs,
ul.audio,
ul.zips,
ul.excel,
ul.learnAbout_matrix,
ul.productbins,
#footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}

.hide,
h1 a span,
#nav ul li a span,
.indexHtml ul li a span,
.indexHtml p,
a#btn_seeVideoToLearnMore span,
#selector ul li span,
a.btn_select span,
ul.learnAbout_matrix li a span,
ul.productbins li a span { display: none; }

/* 
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; line-height: 0 !important; margin: 0; padding: 0 !important; border: none !important;  }

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

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

/* Poster Overlay Style */
.video-js-box img.vjs-poster { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; 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; }

/* Fullscreen styles for main elements */
.video-js-box.vjs-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
.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: 1000; }
.video-js-box.vjs-fullscreen img.vjs-poster { z-index: 1001; }
.video-js-box.vjs-fullscreen .vjs-spinner { z-index: 1001; }
.video-js-box.vjs-fullscreen .vjs-controls { z-index: 1003; }
.video-js-box.vjs-fullscreen .vjs-big-play-button { z-index: 1004; }
.video-js-box.vjs-fullscreen .vjs-subtitles { z-index: 1004; }

/* 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 */

/* DEFAULT SKIN (override in another file)
================================================================================
Using all CSS to draw the controls. Images could be used if desired.
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. */

/* Controls Layout 
  Using absolute positioning to position controls */
.video-js-box .vjs-controls {
  position: absolute; margin: 0; opacity: 0.85; color: #fff;
  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: 35px; /* Including any margin you want above or below control items */
  padding: 0; /* Controls are absolutely position, so no padding necessary */
}

.video-js-box .vjs-controls > div { /* Direct div children of control bar */
  position: absolute; /* Use top, bottom, left, and right to specifically position the control. */
  text-align: center; margin: 0; padding: 0;
  height: 25px; /* Default height of individual controls */
  top: 5px; /* Top margin to put space between video and controls when controls are below */

  /* CSS Background Gradients 
     Using to give the aqua-ish look. */
  /* Default */ background-color: #0B151A;
  /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
  /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;

  /* CSS Curved Corners */
  border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;

  /* CSS Shadows */
  box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; -moz-box-shadow: 1px 1px 2px #000;
}

/* Placement of Control Items 
   - Left side of pogress bar, use left & width
   - Rigth side of progress bar, use right & width
   - Expand with the video (like progress bar) use left & right */
.vjs-controls > div.vjs-play-control       { left: 5px;   width: 25px;  }
.vjs-controls > div.vjs-progress-control   { left: 35px;  right: 165px; } /* Using left & right so it expands with the width of the video */
.vjs-controls > div.vjs-time-control       { width: 75px; right: 90px;  } /* Time control and progress bar are combined to look like one */
.vjs-controls > div.vjs-volume-control     { width: 50px; right: 35px;  }
.vjs-controls > div.vjs-fullscreen-control { width: 25px; right: 5px;   }

/* Removing curved corners on progress control and time control to join them. */
.vjs-controls > div.vjs-progress-control {
  border-top-right-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0;
  border-bottom-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;
}
.vjs-controls > div.vjs-time-control { 
  border-top-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0;
  border-bottom-left-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;
}

/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-play-control { cursor: pointer !important; }
/* Play Icon */
.vjs-play-control span { display: block; font-size: 0; line-height: 0; }
.vjs-paused .vjs-play-control span {
  width: 0; height: 0; margin: 8px 0 0 8px;
  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  border-left: 10px solid #fff; /* Width & Color of play icon */
  /* Height of play icon is total top & bottom border widths. Color is transparent. */
  border-top: 5px solid rgba(0,0,0,0); border-bottom: 5px solid rgba(0,0,0,0);
}
.vjs-playing .vjs-play-control span {
  width: 3px; height: 10px; margin: 8px auto 0;
  /* Drawing the pause bars with borders */
  border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff;
}

/* Progress
-------------------------------------------------------------------------------- */
.vjs-progress-holder { /* Box containing play and load progresses */
  position: relative; padding: 0; overflow:hidden; cursor: pointer !important;
  height: 9px; border: 1px solid #777;
  margin: 7px 1px 0 5px; /* Placement within the progress control item */
  border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.vjs-progress-holder div { /* Progress Bars */
  position: absolute; display: block; width: 0; height: 9px; margin: 0; padding: 0;
  border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
}
.vjs-play-progress {
  /* CSS Gradient */
  /* Default */ background: #fff;
  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
  /* Firefox */ background: -moz-linear-gradient(top,  #fff,  #777);
}
.vjs-load-progress {
  opacity: 0.8;
  /* CSS Gradient */
  /* Default */ background-color: #555;
  /* Webkit  */ background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#aaa));
  /* Firefox */ background: -moz-linear-gradient(top,  #555,  #aaa);
}

/* Time Display
-------------------------------------------------------------------------------- */
.vjs-controls .vjs-time-control { font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
.vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ }

/* Volume
-------------------------------------------------------------------------------- */
.vjs-volume-control { cursor: pointer !important; }
.vjs-volume-control div { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; }
/* Drawing the volume icon using 6 span elements */
.vjs-volume-control div span { /* Individual volume bars */
  float: left; padding: 0;
  margin: 0 2px 0 0; /* Space between */
  width: 5px; height: 0px; /* Total height is height + bottom border */
  border-bottom: 18px solid #555; /* Default (off) color and height of visible portion */
}
.vjs-volume-control div span.vjs-volume-level-on { border-color: #fff; /* Volume on bar color */ }
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.vjs-volume-control div span:nth-child(1) { border-bottom-width: 2px; height: 16px; }
.vjs-volume-control div span:nth-child(2) { border-bottom-width: 4px; height: 14px; }
.vjs-volume-control div span:nth-child(3) { border-bottom-width: 7px; height: 11px; }
.vjs-volume-control div span:nth-child(4) { border-bottom-width: 10px; height: 8px; }
.vjs-volume-control div span:nth-child(5) { border-bottom-width: 14px; height: 4px; }
.vjs-volume-control div span:nth-child(6) { margin-right: 0; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-fullscreen-control { cursor: pointer !important; }
.vjs-fullscreen-control div {
  padding: 0; text-align: left; vertical-align: top; cursor: pointer !important; 
  margin: 5px 0 0 5px; /* Placement within the fullscreen control item */
  width: 20px; height: 20px;
}
/* Drawing the fullscreen icon using 4 span elements */
.vjs-fullscreen-control div span { float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
.vjs-fullscreen-control div span:nth-child(1) { /* Top-left triangle */
  margin-right: 3px; /* Space between top-left and top-right */
  margin-bottom: 3px; /* Space between top-left and bottom-left */
  border-top: 6px solid #fff; /* Height and color */
  border-right: 6px solid rgba(0,0,0,0);  /* Width */
}
.vjs-fullscreen-control div span:nth-child(2) { border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen-control div span:nth-child(3) { clear: both; margin: 0 3px 0 0; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen-control div span:nth-child(4) { border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
/* Icon when video is in fullscreen mode */
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid rgba(0,0,0,0); }
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid rgba(0,0,0,0); }

/* Download Links - Used for browsers that don't support any video.
---------------------------------------------------------*/
.vjs-no-video { font-size: small; line-height: 1.5; }

/* Big Play Button (at start)
---------------------------------------------------------*/
div.vjs-big-play-button {
  display: none; /* Start hidden */ z-index: 2;
  position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
  border: 3px solid #fff; opacity: 0.9;
  border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
  
  /* CSS Background Gradients */
  /* Default */ background-color: #0B151A;
  /* Webkit  */ background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 40px;
  /* Firefox */ background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 40px;

  /* CSS Shadows */
  box-shadow: 4px 4px 8px #000; -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000;
}
div.vjs-big-play-button:hover {
  box-shadow: 0px 0px 80px #fff; -webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff;
}

div.vjs-big-play-button span {
  display: block; font-size: 0; line-height: 0;
  width: 0; height: 0; margin: 20px 0 0 23px;
  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */

  border-left: 40px solid #fff; /* Width & Color of play icon */
  /* Height of play icon is total top & bottom border widths. Color is transparent. */
  border-top: 20px solid rgba(0,0,0,0); border-bottom: 20px solid rgba(0,0,0,0);
}

/* Spinner Styles
---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; z-index: 1; margin: -50px 0 0 -50px;
  /* Scaling makes the circles look smoother. */
  transform: scale(0.5); -webkit-transform:scale(0.5); -moz-transform:scale(0.5);
}
/* Spinner circles */
.vjs-spinner div { position:absolute; left: 40px; top: 40px; width: 20px; height: 20px; background: #fff;
  border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
  border: 1px solid #ccc; /* Added border so can be visible on white backgrounds */
}
/* Each circle */
.vjs-spinner div:nth-child(1) { opacity: 0.12; transform: rotate(000deg) translate(0, -40px) scale(0.1); -webkit-transform: rotate(000deg) translate(0, -40px) scale(0.1); -moz-transform: rotate(000deg) translate(0, -40px) scale(0.1); }
.vjs-spinner div:nth-child(2) { opacity: 0.25; transform: rotate(045deg) translate(0, -40px) scale(0.2); -webkit-transform: rotate(045deg) translate(0, -40px) scale(0.2); -moz-transform: rotate(045deg) translate(0, -40px) scale(0.2); }
.vjs-spinner div:nth-child(3) { opacity: 0.37; transform: rotate(090deg) translate(0, -40px) scale(0.4); -webkit-transform: rotate(090deg) translate(0, -40px) scale(0.4); -moz-transform: rotate(090deg) translate(0, -40px) scale(0.4); }
.vjs-spinner div:nth-child(4) { opacity: 0.50; transform: rotate(135deg) translate(0, -40px) scale(0.6); -webkit-transform: rotate(135deg) translate(0, -40px) scale(0.6); -moz-transform: rotate(135deg) translate(0, -40px) scale(0.6); }
.vjs-spinner div:nth-child(5) { opacity: 0.62; transform: rotate(180deg) translate(0, -40px) scale(0.8); -webkit-transform: rotate(180deg) translate(0, -40px) scale(0.8); -moz-transform: rotate(180deg) translate(0, -40px) scale(0.8); }
.vjs-spinner div:nth-child(6) { opacity: 0.75; transform: rotate(225deg) translate(0, -40px) scale(1.0); -webkit-transform: rotate(225deg) translate(0, -40px) scale(1.0); -moz-transform: rotate(225deg) translate(0, -40px) scale(1.0); }
.vjs-spinner div:nth-child(7) { opacity: 0.87; transform: rotate(270deg) translate(0, -40px) scale(1.1); -webkit-transform: rotate(270deg) translate(0, -40px) scale(1.1); -moz-transform: rotate(270deg) translate(0, -40px) scale(1.1); }
.vjs-spinner div:nth-child(8) { opacity: 1.00; transform: rotate(315deg) translate(0, -40px) scale(1.3); -webkit-transform: rotate(315deg) translate(0, -40px) scale(1.3); -moz-transform: rotate(315deg) translate(0, -40px) scale(1.3); }