@charset "UTF-8";
@media all
{
	
	

h1, h2, h3, h4, h5 { text-transform:none;}
h1, #col1 h1, #col2 h1 { font-size:24px; text-transform:none; }
.csc-frame-frame1 p, .csc-frame-frame1 li {font-size:13px;}
.csc-frame-frame1 {min-height: 280px;}
.csc-frame-frame1 table.contenttable td {padding:1px 0;}
dd.csc-textpic-caption {border:none; color:#808080;font-size:13px;font-style:italic;line-height:17px;padding:5px 0px 0;}
.tx-w2sadbdetail-pi1 h2 {color:#D90000;}
.impressumLink {padding: 0 5px;}
td h1, #c132 h1 {margin-bottom:2px;}
table.contenttable tr.tr-even { background-color:transparent; }

.sidebar-sub-item {
padding-left: 20px;
}


/* Powermail */

.tx-powermail h3 { display: none; }

	/* Form */
span.powermail_mandatory {
	/* Color of mandatory error message */
	color: red;
}
fieldset.tx-powermail-pi1_fieldset {
	/* Fieldset */
	border: 1px solid #ccc;
	background-color: #f0f0f0;
	padding: 10px;
}
fieldset.tx-powermail-pi1_fieldset legend {
	/* legend of Fieldset */
	font-weight: bold;
	color: black;
}
fieldset.tx-powermail-pi1_fieldset label,
fieldset.tx-powermail-pi1_fieldset fieldset legend {
	/* label */
	display: block;
	width: 200px;
	float: left;
	font-weight: bold;
    color:#515151;
    white-space:normal;
}
fieldset.tx-powermail-pi1_fieldset input {
	margin-left:0;
}
fieldset.tx-powermail-pi1_fieldset input.powermail_text,
fieldset.tx-powermail-pi1_fieldset input.powermail_date,
fieldset.tx-powermail-pi1_fieldset input.powermail_datetime,
fieldset.tx-powermail-pi1_fieldset textarea.powermail_textarea,
fieldset.tx-powermail-pi1_fieldset input.powermail_captcha{
	/* Input and textarea */
	border:1px solid #ccc;
	background:#f8f8f8 none;
	-moz-box-shadow:0 0 5px #eee inset;
	-webkit-box-shadow:0 0 5px #eee inset;
    padding:2px;
	width:300px;
}
fieldset.tx-powermail-pi1_fieldset input.powermail_time,
fieldset.tx-powermail-pi1_fieldset input[type=time]{
    width:60px;
}


fieldset.tx-powermail-pi1_fieldset textarea:focus,
fieldset.tx-powermail-pi1_fieldset input:not([type="submit"]):focus {
	background:#fff none;
	border:1px solid #333;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
}
fieldset.tx-powermail-pi1_fieldset div.tx_powermail_pi1_fieldwrap_html_radio input.powermail_radio {
	/* Radiobuttons */
	margin: 3px 0;
}


div.tx_powermail_pi1_fieldwrap_html {
	/* DIV container arround every field */
	margin: 0 0 0.5em 0;
	clear:both;
}
fieldset.tx-powermail-pi1_fieldset input.powermail_submit {
	/* submit button */
	margin: 20px 0 10px 200px;
	font-weight: bold;
}
p.tx_powermail_pi1_fieldwrap_html_checkbox_title,
p.tx_powermail_pi1_fieldwrap_html_radio_title {
	margin: 0;
	padding: 0;
	font-weight: bold;
}
div.countryzone {
	margin: 10px 0 0 200px;
}
div.tx_powermail_pi1_fieldwrap_html label a,
div.tx_powermail_pi1_fieldwrap_html p a,
div.tx_powermail_pi1_fieldwrap_html fieldset legend.tx_powermail_pi1_fieldwrap_html_checkbox_title a,
div.tx_powermail_pi1_fieldwrap_html fieldset legend.tx_powermail_pi1_fieldwrap_html_radio_title a{
	/* Description */
	cursor: help;
	text-decoration: none;
}
div.tx_powermail_pi1_fieldwrap_html label a dfn,
div.tx_powermail_pi1_fieldwrap_html p a dfn,
div.tx_powermail_pi1_fieldwrap_html fieldset legend.tx_powermail_pi1_fieldwrap_html_checkbox_title a dfn,
div.tx_powermail_pi1_fieldwrap_html fieldset legend.tx_powermail_pi1_fieldwrap_html_radio_title a dfn{
	/* Description */
	display: none;
	text-decoration: none;
    position:absolute;
    z-index:1;
    width: auto;
    padding:3px 10px 5px 10px;
    background-color:#00559E;
    border:1px solid #00559E;
    font-size:11px;
    color:#fff;
    white-space: normal;
    /* CSS3 spicing for mozilla and webkit */
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;

    -moz-box-shadow:0 0 6px #ddd;
    -webkit-box-shadow:0 0 6px #ddd;
    box-shadow:0 0 6px #ddd;
}
div.tx_powermail_pi1_fieldwrap_html label a:hover dfn,
div.tx_powermail_pi1_fieldwrap_html p a:hover dfn,
div.tx_powermail_pi1_fieldwrap_html fieldset legend.tx_powermail_pi1_fieldwrap_html_checkbox_title a:hover dfn,
div.tx_powermail_pi1_fieldwrap_html fieldset legend.tx_powermail_pi1_fieldwrap_html_radio_title a:hover dfn{
	/* Description on mouseover */
	display: block;
}
div.tx_powermail_pi1_fieldwrap_html img.icon_info {
	/* Description icon */
	padding: 2px 2px 0 2px;
}
fieldset.tx-powermail-pi1_fieldset div.even {
}


	/* Confirmation */
td.powermail_all_td {
	padding: 3px 10px 3px 0;
}

	/* THX */
td.powermail_all p.bodytext {
	margin: 0;
}

fieldset.tx-powermail-pi1_fieldset fieldset {
	border: 0 none;
	padding: 0;
	margin: 0;
	position: relative;
}
fieldset.tx-powermail-pi1_fieldset fieldset legend {
	position: absolute;
	left: 0;
	padding: 0;
	margin: 0;
}
.powermail_mandatory {
	color: #f00;
}
.placeholder {
    color:#999;
}

.powermail_mandatory_helper{visibility:hidden;height:1px;position:absolute;}
fieldset.tx-powermail-pi1_fieldset .powermail_check_inner,
fieldset.tx-powermail-pi1_fieldset .powermail_radio_inner {
	margin-left: 200px;
	clear: both;
}
fieldset.tx-powermail-pi1_fieldset .powermail_check_inner label,
fieldset.tx-powermail-pi1_fieldset .powermail_radio_inner label {
	float: none;
	width: auto;
	display: inline;
	font-weight: normal;
	margin-left: 7px;
}
fieldset.tx-powermail-pi1_fieldset .powermail_check_inner label,
fieldset.tx-powermail-pi1_fieldset .powermail_radio_inner label {
display: block;
    float: right;
    font-weight: normal;
    margin-bottom: 10px;
    margin-left: 7px;
    margin-top: -18px;
    text-align: left;
    width: 272px;
}
    
fieldset.tx-powermail-pi1_fieldset .powermail_check_inner input,
fieldset.tx-powermail-pi1_fieldset .powermail_radio_inner input {
	float: left;
	position: relative;
	clear: left;
}

        /* Multiple JS */
div.fieldsets {
    clear: both;
}
div.powermail_multiple_js fieldset.tx-powermail-pi1_fieldset legend,
div.powermail_multiple_js fieldset.tx-powermail-pi1_fieldset.ui-tabs-hide{
    display:none;
}
div.powermail_multiple_js fieldset.tx-powermail-pi1_fieldset {
    padding-top:15px;
}
div.powermail_multiple_js fieldset.tx-powermail-pi1_fieldset fieldset legend {
    display:block;
}
ul.powermail_multiplejs_tabs {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.powermail_multiplejs_tabs li {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    list-style-type: none;
}
ul.powermail_multiplejs_tabs li a {
    display: block;
    padding: 5px 10px;
    color: #666;
    font-weight: bold;
    text-decoration: none;
    background: #E0E0E0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    outline: none;
}
ul.powermail_multiplejs_tabs li a.act {
    background: #F0F0F0;
    color: #333;
    padding:5px 10px 6px 10px;
    position:relative;
    margin-bottom:-1px
}

input.tx_powermail_pi1_submitmultiple_forward,
input.tx_powermail_pi1_submitmultiple_back {margin-top:1em;}

input.tx_powermail_pi1_submitmultiple_forward {
    float: right;
}

.powermail_multiple_php form > div.tx_powermail_pi1_fieldwrap_html_submit {
    display: inline;
    float: right;
    margin-top:1em;
}

/* error message */
.error {
	/* supply height to ensure consistent positioning for every browser */
	background-color:#FF0000;
	border:1px solid #FF0000;
	font-size:11px;
	color:#fff;
	padding:3px 10px 5px 10px;
	margin-left:-2px;
    z-index:10;
    text-align:left;
    height:auto;


	/* CSS3 spicing for mozilla and webkit */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;

	-moz-box-shadow:0 0 6px #ddd;
	-webkit-box-shadow:0 0 6px #ddd;
	box-shadow:0 0 6px #ddd;
}

.error p {
	margin: 0;
	padding: 0;
	font-weight: bold;
}

/* pure CSS arrow */
html:root .error em {
	display:block;
	width:0;
	height:0;
	border:10px solid;
	border-color:#FF0000 transparent transparent;

	/* positioning */
	position:absolute;
	bottom:-10px;
	left:5px;
	border-bottom:0 none;
}

/* For the details, see: http://flowplayer.org/tools/dateinput/index.html#skinning */

/* the input field */
.date {
	width: 237px !important;
}

/* calendar root element */
#calroot {
	/* place on top of other elements. set a higher value if nessessary */
	z-index:10000;
	
	margin-top:-1px;
	width:198px;
	padding:2px;
	background-color:#fff;
	font-size:11px;
	border:1px solid #ccc;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
	-moz-box-shadow: 0 0 15px #666;
	-webkit-box-shadow: 0 0 15px #666;
	box-shadow:0 0 15px #666;
}

/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {	
	padding:2px 0;
	height:22px;
} 

#caltitle {
	font-size:14px;
	color:#FA8800;	
	float:left;
	text-align:center;
	width:155px;
	line-height:20px;
	text-shadow:0 1px 0 #ddd;
}

#calnext, #calprev {
	display:block;
	width:20px;
	height:20px;
	background:transparent url(../img/prev.gif) no-repeat scroll center center;
	float:left;
	cursor:pointer;
}

#calnext {
	background-image:url(../img/next.gif);
	float:right;
}

#calprev.caldisabled, #calnext.caldisabled {
	visibility:hidden;	
}

/* year/month selector */
#caltitle select {
	font-size:10px;	
}

/* names of the days */
#caldays {
	height:18px;
	border-bottom:1px solid #ddd;
}

#caldays span {
	display:block;
	float:left;
	width:28px;
	text-align:center;
}

/* container for weeks */
#calweeks {
	background-color:#fff;
	margin-top:4px;
}

/* single week */
.calweek {
	clear:left;
	height:22px;
}

/* single day */
.calweek a {
	display:block;
	float:left;
	width:27px;
	height:20px;
	text-decoration:none;
	font-size:11px;
	margin-left:1px;
	text-align:center;
	line-height:20px;
	color:#666;
	-moz-border-radius:3px;
	-webkit-border-radius:3px; 		
} 

/* different states */
.calweek a:hover, .calfocus {
	background-color:#ddd;
}

/* sunday */
a.calsun {
	color:red;		
}

/* offmonth day */
a.caloff {
	color:#ccc;		
}

a.caloff:hover {
	background-color:rgb(245, 245, 250);		
}


/* unselecteble day */
a.caldisabled {
	background-color:#efefef !important;
	color:#ccc	!important;
	cursor:default;
}

/* current day */
#calcurrent {
	background-color:#498CE2;
	color:#fff;
}

/* today */
#caltoday {
	background-color:#333;
	color:#fff;
}

/* slider root element */
.slider { 
	background:#3C72E6 url(../img/h30.png) repeat-x 0 0; 
	height:9px; 
	position:relative; 
	cursor:pointer;
	border:1px solid #333;
	width:300px;
	float:left; 
	clear:right;
	margin-top:10px;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:inset 0 0 8px #000;
	box-shadow:inset 0 0 8px #000;
}

/* progress bar (enabled with progress: true) */
.progress {
	height:9px; 
	background-color:#C5FF00; 
	display:none;
	opacity:0.6;
}

/* drag handle */
.handle { 
	background:#fff url(../img/h30.png) repeat-x 0 0; 
	height:28px;
	width:28px;
	top:-12px;
	position:absolute; 
	display:block; 
	margin-top:1px;
	border:1px solid #000;
	cursor:move;
	-moz-box-shadow:0 0 6px #000;
	-webkit-box-shadow:0 0 6px #000;
	box-shadow:0 0 6px #000;
	-moz-border-radius:14px;
	-webkit-border-radius:14px; 
	border-radius:14px;
}

/* the input field */
fieldset.tx-powermail-pi1_fieldset input.powermail_text.range {
	float:left;
	margin:0 0 0 15px;
	padding:3px 0;
	text-align:center;
	width:50px;
}


/* ##### Kontaktformular ##### */

/* Label */
fieldset.tx-powermail-pi1_fieldset label {width:130px;text-align:right; margin:2px 5px 0 0;}
fieldset.tx-powermail-pi1_fieldset fieldset legend {width:130px;text-align:right; margin:2px 5px 0 0;}
fieldset.tx-powermail-pi1_fieldset fieldset legend { 
    margin: 0;
    padding: 0;
position:absolute; height: 20px;}
fieldset.tx-powermail-pi1_fieldset .powermail_check_inner, fieldset.tx-powermail-pi1_fieldset .powermail_radio_inner {
    clear: both;
    margin-left: 140px;
}
#powermaildiv_uid8 { }
/* Kurze Felder links */
#powermaildiv_uid21, #powermaildiv_uid27  {float:left; width:250px; clear:both;}
#uid21, #uid27, #uid13 {width:100px;}

/* Kurze Felder rechts */
#powermaildiv_uid22, #powermaildiv_uid28 {float:left; width:250px;}
#uid22, #uid28 {width:190px;}
#powermaildiv_uid22 label, #powermaildiv_uid28 label {width:40px;}
#powermaildiv_uid26 {margin-bottom:0;}

/* Zeitangabe bei Termin */
#uid17_msgCnt, #uid18_msgCnt {margin-left:152px;}

/* Allgemeine Breite der Felder */
fieldset.tx-powermail-pi1_fieldset_3 input.powermail_text, fieldset.tx-powermail-pi1_fieldset_3 textarea.powermail_textarea, fieldset.tx-powermail-pi1_fieldset_3 select.powermail_select {
width:350px;}

/* Schriftgrosse Textfeld */
.powermail_textarea {font-size:14px;}

/* Submit-Button */
fieldset.tx-powermail-pi1_fieldset input.powermail_submit {float:right;margin-right:12px;}

/* Info-Text */
.tx-powermail-pi1 a dfn  {background-color:#FFFFFF;border:1px solid #CCCCCC;float:left;font-style:normal;left:135px;position:relative;text-decoration:none;top:-21px;width:200px;text-align: left;padding:5px;}

#powermaildiv_uid13 .powermail_radio_inner  label {
width: 530px;
}
#powermaildiv_uid21 .powermail_check_inner  label {
width: 530px; margin-left: 20px; margin-top: -14px;
}
.csc-menu-3 li { font-weight: bold; line-height: 22px;}
/* ##### Kontaktformular Ende ##### */
#youtube_links .c33l .subcl {
    padding-left: 20px;
    padding-top: 4px;
}
#youtube_links {
 margin-left: -9px;
 margin-top: -10px;
 width: 672px;	
	
}
#youtube_box { padding: 0px; height: 380px; width: 658px; background-color: #000; margin-bottom:19px;}
#artistTitle { border-bottom: 1px solid #e7e7e7; padding-bottom: 25px;  }
#youtube_links .title { width: 206px; overflow: hidden; display: block;}
#youtube_links img { width: 206px; height: 154px; margin-top: -19px; }
#youtube_links .thumb { display: block; overflow: hidden; width: 206px; height: 116px; margin-top: 24px;}


#youtube_box { padding: 0px; height: 380px; width: 658px; background-color: #000; margin-bottom:19px;}
#artistTitle { border-bottom: 1px solid #e7e7e7; padding-bottom: 18px; margin-bottom:19px; }
#youtube_links .title { width: 188px; overflow: hidden; display: block;}
#youtube_links img { width: 188px; height: 141px; margin-top: -18px; }
#youtube_links .thumb { display: block; overflow: hidden; width: 188px; height: 104px; margin-top: 18px;}



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

.tube-css .vjs-controls {
  opacity: 1; color: #000;
  height: 24px;
  bottom: 0;
  background-color: #ccc;
  background: #fcfcfc -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#d0d0d0)) left top;
  background: #fcfcfc -moz-linear-gradient(top,  #fcfcfc,  #d0d0d0) left top;
}

.tube-css { margin-bottom: 15px; }

.tube-css .vjs-controls > div {
  height: 23px; margin: 0; background: none; top: 0;
  border: 1px solid #b1b1b1; border-left-color: #eee;
  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}

/* Placement of Control Items */
.tube-css .vjs-controls > div.vjs-play-control       { width: 25px; left: 0; }
.tube-css .vjs-controls > div.vjs-progress-control   { left: 102px; right: 83px; }
.tube-css .vjs-controls > div.vjs-time-control       { width: 75px; left: 27px; }
.tube-css .vjs-controls > div.vjs-volume-control     { width: 50px; right: 30px; }
.tube-css .vjs-controls > div.vjs-fullscreen-control { width: 30px; right: 0; }

/* Removing borders on time & progress to join them */
.tube-css .vjs-controls > div.vjs-progress-control { border-left: none; }
.tube-css .vjs-controls > div.vjs-time-control { border-right: none; }


/* Play/Pause
-------------------------------------------------------------------------------- */
.tube-css .vjs-play-control { margin-left: 0; border-left-color: #b1b1b1; }
.tube-css.vjs-paused  .vjs-play-control span { border-left-color: #333; border-top-width: 7px; border-left-width: 13px; border-bottom-width: 7px; margin: 5px 0 0 7px; }
.tube-css.vjs-playing .vjs-play-control span { height: 14px; margin: 5px auto 0; border-left: 4px solid #333; border-right: 4px solid #333; }
.tube-css.vjs-paused  .vjs-play-control:hover span { border-left-color: #CF1A1A; }
.tube-css.vjs-playing .vjs-play-control:hover span { border-left-color: #CF1A1A; border-right-color: #CF1A1A; }

/* Time Display
-------------------------------------------------------------------------------- */
.tube-css .vjs-controls .vjs-time-control { font-size: 11px; }
.tube-css .vjs-controls .vjs-time-control span { line-height: 25px; /* Centering vertically */ }

/* Progress
-------------------------------------------------------------------------------- */
.tube-css .vjs-progress-holder {
  margin-right: 10px;
  background-color: #b1b1b1;
  background: #b1b1b1 -webkit-gradient(linear, left top, left bottom, from(#b1b1b1), to(#cacaca)) left top;
  background: #b1b1b1 -moz-linear-gradient(top,  #b1b1b1,  #cacaca) left top;
  border-color: #CACACA; border-bottom-color: #eaeaea;
  border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;
}
.tube-css .vjs-progress-control .vjs-load-progress { background: #C89191; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.tube-css .vjs-progress-control .vjs-play-progress { background: #f33; background: -webkit-gradient(linear, left top, left bottom, from(#f33), to(#CF1A1A)); background: -moz-linear-gradient(top,  #f33,  #CF1A1A); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }

/* Volume
-------------------------------------------------------------------------------- */
.tube-css .vjs-volume-control div { padding: 3px 0 0 0; }
.tube-css .vjs-volume-control div span { border-bottom-color: #ccc; }
/* Volume icon color */ 
.tube-css .vjs-volume-control div span.vjs-volume-level-on { border-color: #333; }
/* Volume icon hovering color */
.tube-css .vjs-volume-control:hover div span.vjs-volume-level-on { border-color: #CF1A1A; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.tube-css .vjs-fullscreen-control div { margin: 4px 0 0 8px; }
/* Fullscreen icon color */
.tube-css .vjs-fullscreen-control div span:nth-child(3), .tube-css .vjs-fullscreen-control div span:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) {
  border-bottom-color: #333;
} 
.tube-css .vjs-fullscreen-control div span:nth-child(1), .tube-css .vjs-fullscreen-control div span:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) {
  border-top-color: #333;
}
/* Fullscreen icon hovering color */
.tube-css .vjs-fullscreen-control:hover div span:nth-child(3), .tube-css .vjs-fullscreen-control:hover div span:nth-child(4), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(1), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(2) {
  border-bottom-color: #CF1A1A;
} 
.tube-css .vjs-fullscreen-control:hover div span:nth-child(1), .tube-css .vjs-fullscreen-control:hover div span:nth-child(2), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(3), .tube-css.vjs-fullscreen .vjs-fullscreen-control:hover div span:nth-child(4) {
  border-top-color: #CF1A1A;
}

/* Big Play Button (at start)
---------------------------------------------------------*/
.tube-css div.vjs-big-play-button {
  width: 84px; height: 58px; margin: -29px 0 0 -42px;
  border: 2px solid #ccc; opacity: 0.9;
  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
  
  /* CSS Background Gradients */
  /* Default */ background-color: #333;
  /* Webkit  */ background: #000 -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)) left 29px;
  /* Firefox */ background: #000 -moz-linear-gradient(top,  #000,  #333) left 29px;

  /* CSS Shadows */
  box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}
.tube-css div.vjs-big-play-button:hover {
  opacity: 1;
}
.tube-css div.vjs-big-play-button span {
  margin: 11px 0 0 26px;
  /* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
  border-left: 36px solid #fff; /* Width & Color of play icon */
  /* Height of play icon is total top & bottom border widths. Color is transparent. */
  border-top: 18px solid rgba(0,0,0,0); border-bottom: 18px solid rgba(0,0,0,0);
} 
                                                                                                                                                                                                                            
  /*
VideoJS Default Styles (http://videojs.com)
Version GENERATED_AT_BUILD
*/

/*
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
   that will hold the video tag or object tag for other playback methods.
   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.

   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
   Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
  background-color: #000; position: relative; padding: 0;

  /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
  font-size: 10px;

  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */ /*This works in Safari but not Firefox.*/
}

/* 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; /* Needed to make sure things hide in older browsers too. */
  opacity: 1 !important;

  -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
  -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
  -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
  -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
  transition: visibility 0s linear 0s, opacity 0.3s linear;
}
.vjs-fade-out {
  visibility: hidden !important;
  opacity: 0 !important;

  -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
  transition: visibility 0s linear 1.5s,opacity 1.5s linear;
}

/* 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-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.6em; /* Including any margin you want above or below control items */
  color: #fff; border-top: 1px solid #404040;

  /* CSS Gradient */
  /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
  background: #242424; /* Old browsers */
  background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
  /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
  background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */

  /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
  /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
  visibility: hidden;
  opacity: 0;
}

/* General styles for individual controls. */
.vjs-control {
  position: relative; float: left;
  text-align: center; margin: 0; padding: 0;
  height: 2.6em; width: 2.6em;
}

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

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


/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-play-control { width: 5em; cursor: pointer !important; }
/* Play Icon */
.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png'); margin: 0.5em auto 0; }
.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('video-js.png') -25px 0; margin: 0.5em auto 0; }

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

/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-mute-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-mute-control div { width: 22px; height: 16px; background: url('video-js.png') -75px -25px; margin: 0.5em auto 0; }
.vjs-mute-control.vjs-vol-0 div { background: url('video-js.png') 0 -25px; }
.vjs-mute-control.vjs-vol-1 div { background: url('video-js.png') -25px -25px; }
.vjs-mute-control.vjs-vol-2 div { background: url('video-js.png') -50px -25px; }


.vjs-volume-control { width: 5em; float: right; }
.vjs-volume-bar {
  position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;

  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #666;
  background: -moz-linear-gradient(top, #333, #666);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
  background: -webkit-linear-gradient(top, #333, #666);
  background: -o-linear-gradient(top, #333, #666);
  background: -ms-linear-gradient(top, #333, #666);
  background: linear-gradient(top, #333, #666);
}
.vjs-volume-level {
  position: absolute; top: 0; left: 0; height: 0.6em;

  -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;

  background: #fff;
  background: -moz-linear-gradient(top, #fff, #ccc);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
  background: -webkit-linear-gradient(top, #fff, #ccc);
  background: -o-linear-gradient(top, #fff, #ccc);
  background: -ms-linear-gradient(top, #fff, #ccc);
  background: linear-gradient(top, #fff, #ccc);
}
.vjs-volume-handle {
  position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
  border: 1px solid #fff;
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;
}

/* Progress
-------------------------------------------------------------------------------- */
div.vjs-progress-control {
  position: absolute;
  left: 4.8em; right: 4.8em; /* Leave room for time displays. */
  height: 1.0em; width: auto;
  top: -1.3em; /* Set above the rest of the controls. And leave room for 2px of borders (progress bottom and controls top). */
  border-bottom: 1px solid #1F1F1F;
  border-top: 1px solid #222;

  /* CSS Gradient */
  background: #333;
  background: -moz-linear-gradient(top, #222, #333);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
  background: -webkit-linear-gradient(top, #222, #333);
  background: -o-linear-gradient(top, #333, #222);
  background: -ms-linear-gradient(top, #333, #222);
  background: linear-gradient(top, #333, #222);


  /* 1px top shadow */
/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-progress-holder {
  position: relative; cursor: pointer !important; /*overflow: hidden;*/
  padding: 0; margin: 0; /* Placement within the progress control item */
  height: 1.0em;
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;

  /* CSS Gradient */
  background: #111;
  background: -moz-linear-gradient(top, #111, #262626);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
  background: -webkit-linear-gradient(top, #111, #262626);
  background: -o-linear-gradient(top, #111, #262626);
  background: -ms-linear-gradient(top, #111, #262626);
  background: linear-gradient(top, #111, #262626);
}
.vjs-progress-holder .vjs-play-progress,
.vjs-progress-holder .vjs-load-progress { /* Progress Bars */
  position: absolute; display: block; height: 1.0em; margin: 0; padding: 0;
  left: 0; top: 0; /*Needed for IE6*/
  -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em;

  /*width: 0;*/
}

.vjs-play-progress {
  /* CSS Gradient. */
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
  background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
  background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
  background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
  background: linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);

  background: #efefef;
  background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
  background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
  background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
  background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f1f1f1',GradientType=0 );
  background: linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
}
.vjs-load-progress {
  opacity: 0.8;

  /* CSS Gradient */
  background: #666;
  background: -moz-linear-gradient(top, #666, #333);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
  background: -webkit-linear-gradient(top, #666, #333);
  background: -o-linear-gradient(top, #666, #333);
  background: -ms-linear-gradient(top, #666, #333);
  background: linear-gradient(top, #666, #333);
}

div.vjs-seek-handle {
  position: absolute;
  width: 16px; height: 16px; /* Match img pixles */
  margin-top: -0.3em;
  left: 0; top: 0; /*Needed for IE6*/

  background: url('video-js.png') 0 -50px;
  /* CSS Curved Corners. Needed to make shadows curved. */
  -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
  /* CSS Shadows */
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}
/* Time Display
-------------------------------------------------------------------------------- */
.vjs-time-controls {
  position: absolute;
  right: 0;
  height: 1.0em; width: 4.8em;
  top: -1.3em;
  border-bottom: 1px solid #1F1F1F;
  border-top: 1px solid #222;
  background-color: #333;

  font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;

  background: #333;
  background: -moz-linear-gradient(top, #222, #333);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
  background: -webkit-linear-gradient(top, #222, #333);
  background: -o-linear-gradient(top, #333, #222);
  background: -ms-linear-gradient(top, #333, #222);
  background: linear-gradient(top, #333, #222);

  /* 1px top shadow */
/*  -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
}

.vjs-current-time { left: 0; }

.vjs-duration { right: 0; display: none; }
.vjs-remaining-time { right: 0; }

.vjs-time-divider { display:none; }

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

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-secondary-controls { float: right; }

.vjs-fullscreen-control { width: 3.8em; cursor: pointer !important; float: right; }
.vjs-fullscreen-control div { width: 16px; height: 16px; background: url('video-js.png') -50px 0; margin: 0.5em auto 0; }

.vjs-fullscreen .vjs-fullscreen-control div { background: url('video-js.png') -75px 0; }


/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-big-play-button {
  display: block; /* Start hidden */ z-index: 2;
  position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -42px 0 0 -42px; text-align: center; vertical-align: center; cursor: pointer !important;
  border: 0.2em solid #fff; opacity: 0.95;
  -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;

  background: #454545;
  background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
  background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
  background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
  background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
  background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);

  /* CSS Shadows */
  -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
}

div.vjs-big-play-button:hover {
  -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
}

div.vjs-big-play-button span {
  position: absolute; top: 50%; left: 50%;
  display: block; width: 35px; height: 42px;
  margin: -20px 0 0 -15px; /* Using negative margin to center image. */
  background: url('video-js.png') -100px 0;
}

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

  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%);
}
/* Button Icon */
.vjs-menu-button div { background: url('video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }

/* Button Pop-up Menu */
.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 #333;
  -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-menu-button:focus ul,
.vjs-menu-button:hover ul { display: block; list-style: none; }
.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-menu-button ul li.vjs-selected { text-decoration: underline; background: url('video-js.png') -125px -50px no-repeat; }
.vjs-menu-button ul li:focus,
.vjs-menu-button ul li:hover,
.vjs-menu-button ul li.vjs-selected:focus,
.vjs-menu-button ul li.vjs-selected:hover { background-color: #ccc; color: #111; outline: 0; }
.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-captions-button div { background-position: -25px -75px; }
.vjs-chapters-button div { background-position: -100px -75px; }
.vjs-chapters-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }      

.vjs-no-video { display: none; }

.video-list .item { margin-top: 10px; margin-right: 10px; float: left; border: 1px solid grey; display: table-cell; text-align: center;}
.video-list .active { }	
.html5videoplayer h2 { padding-top: 10px; }
/*close media all (DO NOT DELETE)*/
}

.tx-pagebrowse ol li, .tx-pagebrowse ul li, 
.tx-pagebrowse li { list-style-image: none; background: none; }

.tx-sfbooks-pi1-listrow { margin-top: 10px; }
#catList {margin-top: 10px; padding: 10px; border: 1px solid #DDDDDD;background-color: #fff; display: none; z-index: 100; position: absolute;"
}
#catList a {
width: 200px;	
}

.tx-sfbooks-pi1-searchbox-sword {
	border-radius: 6px;
	height: 20px;
  
}

.tx-sfbooks-pi1-searchbox td {
	padding-left:0px;
}

#tx_cookies {
    position: fixed;
    bottom: 0px;
    top: initial;
    z-index: 300;
    border-top: 4px solid #808080;

     width: 100%;
}


#tx_cookies h3 {
font-size: 1em;
}

#tx_cookies p {
font-size: 0.8em;
}

#tx_cookies  #tx_cookies_inner {

        padding: 20px;
}


#tx_cookies  #tx_cookies_inner {

        padding: 20px;
}

#tx_cookies #tx_cookies_close {

    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 99;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background-color: #ff7300;

}
#tx_cookies #tx_cookies_accept button, #tx_cookies #tx_cookies_accept input[type="submit"] {

    border: 0;
    background-color: #ff7300;
    cursor: pointer;
    padding: 2px 10px;
    color: #fff;
        border-radius: 6px;
}