/* INICIALIZANDO LA PANTALLA, MÁRGENES, PADDING, ETC... etc.. */
/* ---------------------------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}

body{overflow:scroll}

body, html{
	width:100%;
	height:100%;
}

/* -------------it--------------------------------------------------------------------------------------- */
/* FIN INICIALIZACION */


/* -------------------------------------- PANTALLA EMERGENTE PUBLICIDAD INDEX ------------------------- */

#publi_grande{
	z-index:6000;
	padding:15px;
	background-color:#fff;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:50%;
}

#liquido_grande{
	z-index:6000;
	padding:15px;
	background-color:#fff;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:50%;
}

#logos_grande{
	z-index:6000;
	padding:15px;
	background-color:#fff;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:50%;
}

#organigrama_grande{
	z-index:6000;
	padding:15px;
	background-color:#fff;
	cursor:pointer;
	position:absolute;
	top:50%;
	left:50%;
}

#transparencia{
	display: none;
	position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    z-index:5500;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

#foto_not_portada{	
	margin:10 0 10 0px;
	text-align:center;
}

/*----------------------------------------------------------------------------------------------------- */

/* APLICANDO ESTILO A LAS ETIQUETAS */
/* ---------------------------------------------------------------------------------------------------- */

/* Propiedades del body */
body {
	width:100%;
	height:100%;
	background-repeat:repeat-x;
	background-position:top;
	background-color:#fff;
	margin: 0px;
	float:center;
	text-align:center;
}

/* Propiedades para los párrafos */
p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#111;	
}

/* Los hipervínculos que haya  */
a{
	color:#023283;
	text-decoration:none;
}

/* Los hipervínculos visitados */
a:hover{
	color:#337f99;
	text-decoration:underline;
}

h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#CCC;
	font-style:bold;
	text-align:left;
	padding-left:10px;
}

h3{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-style:bold;
	color:#999;
	text-align:left;
}

ul{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#111;
	padding:0 0 0 25px;
}

/* Propiedades de las tablas */
table.clientes{
	/* border-collapse: collapse; */
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#111;
	text-align:left;
	padding:0px;
	margin:0px;
	width:580px;
}

table.clientes thead th{
	border: 1px solid #ccc;
	font-family:Arial, Helvetica, sans-serif;
	color:#ccc;
	background-color:#1f314d;
	padding:0 0 0 5px;
}

table.clientes tbody td{
	text-align:left;	
	vertical-align:middle;
	padding:7 7 7 0px;
}

table.clientes2{
	border: 1px solid #111;	
	padding:5px;
	margin:0px;
	width:285px;
	height:100px;
	background-color:#000;
}

table.clientes2 td{
	background-color:#CCC;
	padding:0 10 0 0px;
	margin:0px;
	vertical-align:middle;
}

table.nueva{
	background-color:#903;
	padding:0px;
	margin:0px;
}

table.eventos{	
	margin:0px;
	padding:0px;
	width:135px;
}

table.eventos td{	
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#00337f;
	padding:12 3px;
	width::135px;
}

*HTML table.eventos td{	
	padding:17 0 5 3px;
	p\adding:7 0 5 0px;
	width::135px;
}

table.eventos thead th{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#00337f;
	width:135px;	
	padding-top:8px;
	padding-right:3px;
	padding-bottom:3px;
	background-color:#999;
	background-repeat:no-repeat;
}

table.logo{
	border: 3px solid #7f99bf;	
}


table.contactos{	
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#111;
	text-align:left;
}

table.downloads{
	width:600px;
	font-family:Arial, Helvetica, sans-serif;
	padding:0px;
	margin:0px;
}

*HTML table.downloads{
	width:630px;
	w\idth:630px;
}

table.datasheets{
	width:580px;
}

*HTML table.datasheets{
	width:600px;
	w\idth:600px;
}

table.downloads thead th{
	width:610px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333;
	text-align:left;
	
}

table.downloads tbody td{
	padding:10 10 10 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333;	
	vertical-align:top;
}

table.datasheets tbody td{
	padding:10 10 10 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333;	
	vertical-align:top;
}

table.noticias_foto{
	width:580px;
	float:left;
}

table.noticias_foto td p{
	margin-left:auto;
	margin-right:auto;
}

*HTML table.noticias_foto td{
	width:180px;
	w\idth:180px;
}

table.series_foto{
	width:580px;
	float:left;
}

table.series_foto td p{
	margin-left:auto;
	margin-right:auto;
}

*HTML table.series_foto td{
	width:180px;
	w\idth:180px;
}

table.lista_series{	
	width:585px;	
	float:left;
}

*HTML table.lista_series{
	width:580px;
	w\idth:580px;
}

/*table.lista_series thead{
	background-color:#1f314d;
	margin:0px;
	padding:0px;
}*/

/*table.lista_series thead th{
	padding:2px;
	color:#ccc;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
}*/

table.lista_series thead td{
	padding:3px;
	border:1px solid #ccc;
	text-align:center;
}

table.lista_series tbody td{
	padding:20px;
	border:1px solid #ccc;
	text-align:center;
}

table.mapa_web{	
	width:580px;	
}

table.noticias th{
	background-color:#1f314d;
	color:#ccc;
	padding-left:5px;
	border-bottom:1px solid #333;
}

table.eventos_centro{
	padding:0px;
	margin:0px;
}

table.eventos_centro th{
	background-color:#1f314d;
	color:#ccc;
	padding-left:5px;
	border-bottom:1px solid #333;
}

table.eventos_centro td{
	padding:10px;	
	vertical-align:top;
}


table.buscador th{
	background-color:#1f314d;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#ccc;
	padding-left:5px;
	border-bottom:1px solid #333;	
}

*HTML table.buscador th{
	margin-right:20px;
}

table.buscador{
	width:550px;
	float:left;
}

*HTML table.buscador{
	margin:0px;	
}

table.buscador td{
	padding-left:5px;
}

table.tabla_potencias{
	width:570px;	
}

*HTML table.tabla_potencias{
	width:560px;
}

table.tabla_potencias th{
	background-color:#0072cf;
	color:#ffffff;
	text-align:left;
	padding:5px;
}

table.equipos{
	width:585px;
}

*HTML table.equipos{
	width:580px;
	w\idth:580px;
}

table.equipos thead{
	color:#FFF;
}

table.equipos thead th{
	background-color:#0072cf;
	padding:2 6 2 6px;
	border:1px solid #afafaf;
}

table.equipos tbody td{
	padding:2 6 2 6px;
	border:1px solid #afafaf;
}

table.fotos{
	width:587px;
}

*HTML table.fotos{
	width:582px;
	w\idth:582px;
}

table.fotos thead{
	color:#FFF;
}

table.fotos thead th{
	background-color:#0072cf;
	padding:2 6 2 6px;
	border:1px solid #afafaf;
}

table.fotos td{
	padding:2 6 2 6px;
}


/* ---------------------------------------------------------------------------------------------------- */
/* FIN DE APLICANDO ESTILO A LAS ETIQUETAS */



/* MENÚS */
/* ---------------------------------------------------------------------------------------------------- */


#menu_principal{
	padding:0px;
	margin:0px;
	position:relative;
	top:-25px;
	left:7px;
	z-index:2;
	width:934px; /* Ancho del menú */	
	border-top:#dc291e 1px solid;
}

/* ---------------------------------------------------------------------------------------------------- */
/* FIN MENÚS */


/* CLASES E IDENTIFICADORES PARA LOS TITULOS, SUBTITULOS Y TITULARES */
/* ---------------------------------------------------------------------------------------------------- */

.titulo{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#F33;	
}

.titulo_peq{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#00337f;
}

.titular_noticias{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#00337f;
}

.subtitular{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#7f99bf;
}

.subtitular_index {
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#0072cf;
}
.subtitular_index a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#0072cf;
}

/*#subtitular_index{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#0072cf;
	margin-bottom:10px;
	margin-top:10px;
	text-align:left;
}



*HTML #subtitular_index{
	margin-left:14px;
	
}

*/
.titulo_menu{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#337f99;
	text-align:left;
	float:left;
	margin-bottom:10px;
	border-bottom:1px solid #F00;
	width:580px;	
}

*HTML .titulo_menu{
	width:580px;
}



.titulo_cliente{
	margin-top:10px;
	width:580px;
	height:22px;
	padding:11 0 0 12px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#333;
	background:url(../quienes_somos/Imagenes/cabecera_proy_ref_grande.jpg) no-repeat;
}


#fecha{
	float:right;
	color:#1146A8;
}
/* Para los títulos de los apartados */
#titulo_apartado{
	float:right;
}

#titulo_producto{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#1f314d;
	
}

#subtitulo_producto{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#0072cf;
}

/* ---------------------------------------------------------------------------------------------------- */
/*  FIN CLASES E IDENTIFICADORES PARA LOS TITULOS, SUBTITULOS Y TITULARES */





/* CONTENEDOR PRINCIPAL */
/* ---------------------------------------------------------------------------------------------------- */

#contenedor{
	width:935px;
	margin:0 auto;
}


/* ---------------------------------------------------------------------------------------------------- */
/*  FIN CONTENEDOR PRINCIPAL */


/* OTROS */
/* ---------------------------------------------------------------------------------------------------- */

#flecha{
	float:right;
	padding:10 0 10 0px;	
}

*HTML #flecha{
	padding-right:5 0 5 0px;
}

#errores{
	width:540px;
	height:30px;
	background-color:#eee;
	border-color:#333;
	border-style:solid;
	border-width:1px;
	float: left;
	text-align:left;
	margin-left:15px;
}
/* ---------------------------------------------------------------------------------------------------- */
/*  FIN OTROS */


/* CABECERA */
/* ---------------------------------------------------------------------------------------------------- */


/* PARTE SUPERIOR */

/* Inicializar para no tener problemas con el margin o paddin */

margin:0px;
padding:0px;

#cabecera_superior{
	width: 935px;
	height:50px;
	color:#00317e;
	margin-bottom:40px;
}

*HTML #cabecera_superior{
	margin-bottom:0px;
}

#cabecera_superior p{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:9px;
	color:#00337f;
	float:left;	
}

*HTML #cabecera_superior p{
	padding:0px;
	p\adding:0px;
}

#cabecera_superior_buscador{
	float:right;
	padding:0px;
}

/* PARTE CENTRAL */

#cabecera_medio{
	position:relative;
	top:0px;
	width:935px;	
	padding:0px;
	margin:0 auto;
}

*HTML #cabecera_medio{
	position:relative;
	top:0px;
	width:935px;	
	padding:0px;
	margin:0 auto;
}

div#cabecera_medio{
	clear:both;
}

#cabecera_medio2{
	position:relative;
	top:0px;
	left:0px;
	width:935px;
	height:180px;
	
}

*HTML #cabecera_medio2{
	position:relative;
	top:0px;
	left:0px;
	width:935px;
	height:180px;
}

div#cabecera_medio2{
	clear:both;
}

#cabecera_medio p{
	padding-top:8px;
}

#boton_mapa_web{
	position:relative;
	top:-10px;
	float:left;
	padding-top:0px;
}

*HTML #boton_mapa_web{
	position:relative;
	top:-12px;
}

#banderas{
	position:relative;
	top:-20px;
	margin-top:7px;
	margin-bottom:5px;
	float:right;
}

*HTML #banderas{
	position:relative;
	top:-20px;
}


#menu_contenedor{
	position:relative;
	top:-23px;
	left:2px;
	width:935px;
	float:left;
	z-index:5000;
	padding:0px;
}

*HTML #menu_contenedor{
	position:relative;
	top:-27px;
	width:935px;
	float:left;
	z-index:5000;
	padding:0px;
	margin:0 auto;
}

div#menu_contenedor{
	clear:both;
}

#cabecera_postal{
	display:block;
	margin:0 auto;
}

#cabecera_postal2{
	display:block;
	margin:0 auto;
}

#contenedor_postal{
	width:890px;
	margin:0 auto;
}

/* ---------------------------------------------------------------------------------- */
/* FIN CABECERA */







/* LA CAJA DONDE VA A IR EL CONTENIDO PRINCIPAL. SE DIVIDIRÁ EN IZQUIERDA, CENTRO Y DERECHA */
/* ---------------------------------------------------------------------------------------------------- */

#contenido{
	width: 940px;
	margin:0;
	padding:0px;
	float:left;
}

#contenido_aviso_legal{
	padding:0px;
	margin:0px;
}

/* ---------------------------------------------------------------------------------------------------- */
/*  FIN DE LA CAJA DONDE IRÁ EL CONTENIDO PRINCIPAL. QUE SE DIVIDE EN IZQUIERDA, CENTRO Y DERECHA */






/* CONTENIDO DE LA IZQUIERDA. NOTICIAS Y SUBMENUS */
/* ---------------------------------------------------------------------------------------------------- */

#izquierda{	
	width:160px;
	padding:0px;
	margin-top:5px;
	float:left;
}

#izquierda{
	width:170px;
}

#izquierda p{
	text-align:left;
	padding:0 5 0 0px;
	margin:0px;
}

*HTML izquierda p{
	padding-left:3px;
}

/* Código para el ancho de la caja de la izquierda en Internet Explorer */

/* La caja que contiene la cabecera de título de la izquierda. La primera */
#cabecera_izq{
	background-color:#ddd;
	padding:0px;
	margin:0px;
}

/* El párrafo que contiene el título */
#cabecera_izq p{
	padding-top:0px;
	padding-right:10px;
	padding-bottom:0px;
	padding-left:13px;
}

*HTML #cabecera_izq p{
	padding:0 8 0 12px;
	p\adding:0 8 0 12px;
}

/* La caja que contiene el contenido en el margen izquierdo */
#contenido_izq{
	background-color:#ddd;
	padding:3 10 0 15px;
}

*HTML #contenido_izq{
	padding:8 8 0 12px;
	p\adding:0px;
}

#logos_calidad{
	float:left;
	padding-left:15px;
}

*HTML #logos_calidad{
	padding-left:0px;
	p\adding-left:0px;
}

#furia{	
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#00337f;	
	float:left;
	padding:5 0 0 5px;
}

#furia_portada{
	width:580px;	
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#00337f;	
	float:left;
	padding:5 0 0 5px;
	text-align:left;
}

*HMTL #furia_portada{
	width:570px;
	w\idth:570px;
}

/* ---------------------------------------------------------------------------------------------------- */
/* FIN DEL CONTENIDO DE LA IZQUIERDA. NOTICIAS Y SUBMENUS. */



/* ---------------------------------------------------------------------------------------------------- */
/* CONTENIDO DEL CENTRO DONDE VA LA ANIMACION Y NOTICIAS CON FOTOS */ 

/* La caja donde irá el contenido del centro */
#centro{
	width:580px;
	padding:0x;
	float:left;
	margin: 4px 23px 0;
}

*HTML #centro{
	width:580px;
	margin:7 21 0 21px;
}

#centro p{
	text-align:left;
	padding:0px;
}

/* Esta caja define donde va a ir la animación flash, es la que contiene la animación flash de la página principal */
/* Parte superior de la parte central */

#animacion_flash{	
	padding:0px;
	margin-left:2px;
	width:580px;
	height:250px;	
}

#animacion_flash2{
	position:relative;
	top:0px;
	left:0px;
	width:580px;
	height:250px;
	z-index:3000;
}


*HTML #animacion_flash{	
	padding:0px;
	margin-left:0px;
	width:580px;
	height:250px;
}

*HTML #animacion_flash2{	
	padding:0px;
	margin-left:-3px;
	width:580px;
	height:250px;
}

#fotos{
	width:580px;
	height:250px;
	background-color:#999;
}

/*
#lugar1{
	height:250px;
	z-index:1001;	
}

*HTML #lugar1{
	height:250px;
	z-index:1001;	
}

#lugar2{
	height:250px;
	position:relative;
	z-index:1000;
	top:-250px;
}

*HTML #lugar2{
	position:relative;
	height:250px;
	top:-254px;
	z-index:1000;
	float:left;
}

*/
#texto_animacion_flash{
	position:relative;
	top:10px;
	width:580px;
	float:left;
	padding: 7px 0 10px 5px;
}

*HTML #texto_animacion_flash{
	position:relative;
	top:10px;
	padding: 7px 0 30px 5px;	
	float:left;
}

#contenido_centro_sup{	
    margin: 0;
    padding: 0;
}

/* FIN parte superior parte central */


/* La caja definida por esta sentencia es la que contiene a las cajas de contenido que hay debajo de la animación flash en la página de inicio. Aquí definimos el estilo de los párrafos */
#contenido_centro_inf{
	position:relative;
	top:15px;
	width:585px;
	padding:15 0 0 0px;
	margin:0px;
	float:left;	
}

*HTML #contenido_centro_inf{
	position:relative;
	top:0px;
	width:585px;
	padding:0 0 0 0px;
	margin:0px;
	float:center;
margin-top:-5px;	
}

#contenido_centro_inf p{
	text-align:left;
	padding:0px;
	margin:0 0 5 0px;
}

*HTML #contenido_centro_inf p{
	text-align:left;
	padding:0px;
	margin:0 0  0px;

}

/* La caja que contiene la cabecera de los títulos del contenido que va debajo de la animación flash en la principal. La primera */
#cabecera_centro{
	width:190px;
	height:40px;
	background-image:url(../Imagenes/cajas%20titulo/caja_cabecera.jpg);
	background-repeat:no-repeat;
	margin-left:auto;
	margin-right:auto;
	padding-left:11px;
	padding-top:5px;
}

/* La caja que contiene la cabecera de los títulos del contenido que va debajo de la animación flash en la principal. La primera */
#imagen_cabecera_centro{
	width:180px;	
	margin:0px;
	background-image:url(../Imagenes/cajas%20titulo/imagen_centro.jpg);
	background-repeat:no-repeat;
	padding-top:10px;
	float:left;
}

/* La caja que contiene la información de debajo de la animación flash en la caja principal. La primera (la de la izquierda) */
#contenido_centro_inf01{
	width:180px;
	height:70px;
	background-image:url(../Imagenes/cajas%20titulo/caja_abajo.jpg);
	background-repeat:no-repeat;
	float:left;
	padding-left:15px;
	padding-top:7px;
}

/* FIN parte inferior de la parte central */

#contenido_centro_sup_logo{
	padding-left:0px;
	padding-bottom:20px;
	float:left;
}

*HTML #contenido_centro_sup_logo{
	padding-bottom:0px;
	p\adding-bottom:0px;
}

#contenido_centro_sup_texto{
	padding:0px;
	margin:0px;
	float:right;
	width:120px;
}

*HTML #contenido_centro_sup_texto{
	width:80px;
	w\idth:80px;
}

#contenido_der_centro_texto_titular{
	font-family:Arial, Helvetica, sans-serif;
	color:#00337f;
	font-size:11px;
	font-style:bold;
}

*HTML #ap_busqueda{
	width:580px;
	margin:0px;
}


/* ---------------------------------------------------------------------------------------------------- */
/*  FIN DEL CONTENIDO DEL CENTRO DONDE VA LA ANIMACIÓN Y NOTICIAS CON FOTOS */








/* CONTENIDO DERECHA */
/* ---------------------------------------------------------------------------------------------------- */

#derecha{
	padding:0px;
	margin:4 0 0 0px;
	float:right;	
}

#derecha p{
	padding:0px;
	margin:0px;
}

/* ---------------------------------------------------------------------------------------------------- */
/*  FIN CONTENIDO DERECHA */









/* PIE DE PÁGINA */
/* ---------------------------------------------------------------------------------- */

#pie{
	float:left;
	width:935px;
	height:10px;
	margin-top:15px;
	margin-bottom:0px;
	margin-left:0px;
	/* background-color:#999; */
}

*HTML #pie{
	height:5px;
	h\eight:5px;
	padding-top:0px;
	p\adding-top:0px;
	padding-bottom:0px;
	p\adding-bottom:0px;
	margin-top:15px;
	m\argin-top:15px;
}

/* Los párrafos que van dentro de la caja del pie de página */

#pie p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	padding:3 0 0 0px;
	margin-bottom:0px;
	margin-right:5px;
	color:#333;
	float:right;
}

*HTML #pie p{
	padding-bottom:0px;
	p\adding-bottom:0px;
	padding-top:3px;
	p\adding-top:3px;
	margin-bottom:3px;
	m\argin-bottom:3px;
}

#logos {
	padding-left:0px;
	margin-left:0px;
	float:left;
	width:180px;
	text-align:left;
}


/* ---------------------------------------------------------------------------------- */
/* FIN PIE DE PÁGINA */

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

/* Video Element */
video.video-js { 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 {  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: block; /* Start hidden */
  left: 0; right: 0; /* 100% width of video-js-box */ 
  width: 565px;
  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: block; /* 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: block; 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); }