/*  ------------------------------------------- 
	Estilos generales para VeraTv
	-----------------------------------------------

			azul:		#222f66;
			naranja:	#dc9e09;

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

/*  genéricos
	------------------------------------------- */
	*{
		border:	0;
		padding: 0;
		margin: 0;
	}

	body{
		background: url("../assets/bgFooter.png") repeat-y center center #ebeff2;
		border-top:3px solid #ebb731;
		overflow: hidden;
	}

	h1, h2, h3, h4 {
		color: #222f66;
		font-family: "AMedium", Arial, sans-serif;
		font-weight: normal;
		margin:0.2em 0 0.5em;
		line-height:1.2em;
		text-rendering: optimizelegibility;
	}

	h1{	font-size: 35px;}
	h2{	font-size: 28px;}
	h3{	font-size: 16px;}
	h4{	font-size: 16px;}

	p, a, ul li{
		color: #444;
		line-height: 20px;
		font-size: 14px;
	}

	a{
		text-decoration: none;
	}

	a:hover{
		text-decoration:underline;
	}

	ul li{
		list-style-type: none;
	}
	
/*  clases genéricas
	------------------------------------------- */	
	.strong{ 
		font-family: "AMedium", Arial, sans-serif;
	}
	
	.verTodos{
		font-family: "AMedium", Arial, sans-serif;
		font-size: 16px;
		text-decoration: underline;
	}
	
	.verTodos:hover{
		text-decoration: none;
	}

	.button {
	    background: #4ec6c6;
	    box-shadow: none;
	    border: none !important;
	    border-radius: 3rem;
	    display: inline-block;
	    font-family: 'Montserrat', sans-serif;
	    font-size: 0.8rem !important;
	    font-weight: 900;
	    letter-spacing: 0.025rem;	    
	    margin: 1rem 0;
		padding: 0.5rem 1rem;
	    text-transform: uppercase; }

	.button:hover, .button:focus{
		border: none;
		background: #45afaf !important; }
	
/*  header
	------------------------------------------- */
	header {
		background: #fff;
		padding-bottom: 10px;
	}
	
	header div.row{
		position: relative;
	}
	
	/* 	header usr-login
		------------------------------------ */
	
		header #logoVeraTv h1 {
			margin: 0;
		}
	
		header #logoVeraTv h1 a {
			display: block;
			float: left;
		}
	
	/* 	header usr-login
		------------------------------------ */	
		header #usr-login {
			margin-top:4px;
			height:26px;
		}

		header #usr-login ul {
			margin: 0 0 10px;
		}
	
		header #usr-login ul li{
			margin:0 0 0 10px !important;
		}
	
		header #usr-login ul li.divider{
			background: url("../assets/top-bar-divider.png") no-repeat center center #fff;
			height: 22px;
			margin: 0 5px;
			width: 5px;		
		}	

/*  buscador
	------------------------------------------- */
	#buscador {
		padding-top:5px;
		margin:0;
		height:30px;
	}	
	
/*  background
	------------------------------------------- */		
	
	.bg{ background: url("../assets/bg.png") repeat-y center center #1f356f; }	
	.interna{ background: url("../assets/bgBusqueda.png") repeat-y center center #1f356f; }
	
/*  nav
	------------------------------------------- */	
	.nav-container{
		float: left;
		width: 58.3333%;		
		min-height:35px;
	}
	
	nav {
		overflow: hidden;
	}
	
	nav ul {
		margin: 0;
		/*overflow: auto;*/
	}
	
	nav ul li {
		float: left;	
	}
	
		nav ul li.divider{
			background: url("../assets/top-bar-divider.png") no-repeat center center #fff;
			height: 32px;
			margin: 0 4px;
			width: 5px;
		}
	
	nav ul li label {
		color: #ebb731;
		font-family: 'AMedium', Arial;		
		font-size: 1.4em;
	}	

	nav ul li a {
		color: #182355;
		display: block;
		float: left;
		font-family: 'AMedium', Arial;
		font-size: 20px;		
		padding: 5px 10px;		
	}
	
		nav ul li.active a {
			color: #dc9e09;
		}
		
	/* 	nav - a hover
		------------------------------------ */
		nav ul li.with-dropdown:hover a {
			background: #182355;
			border-radius: 4px 4px 0 0;
			-moz-border-radius: 4px 4px 0 0;
			-webkit-border-radius: 4px 4px 0 0;		
			-o-border-radius: 4px 4px 0 0;		
			color: #fff;
			padding-bottom:10px;
		}

		nav ul li.with-dropdown:focus .dropdown,
		nav ul li.with-dropdown:hover .dropdown {
			display: block;
		}

		nav ul li.with-dropdown:hover .dropdown a {
			color: #fff;
		}	
		
	/* 	nav - submenu
		------------------------------------ */	
		nav ul li ul li a {
			font-size: 1em;
		}
		
		nav ul li.with-dropdown  ul.dropdown ul.dropdown-column li a {
			background: transparent !important;
			border-radius: 0;
			color: #fff;
			height:auto;			
		}		
		
		nav ul.dropdown {
			background: #182355;
			display: none;
			left: 0;
			margin: 35px 0 0;
			padding: 20px 0;
			position: absolute;
			right: 0;
			z-index: 1000;
		}
		
		nav ul.dropdown li {
			margin: 0;
			width: 100%;
		}
		
		nav ul.dropdown li a {
			padding: 0!important;
			margin: 0!important;
		}
		
		nav ul.dropdown a.verTodos {
			clear:both;
			display:block;
			margin: 10px 0 20px !important;
			color: #EBB731 !important;			
			display: block;
			font-size:1.3em;
			font-family: "AMedium", Arial;
			text-decoration: unerline;
			padding:0;
		}
	
		nav .dropdown-column {
			float: left;
			margin: 0;
			padding: 0 20px;
			width: 20%;			
		}
		
		nav .dropdown-column.last {
			border-left: 1px solid #364a7e;
			padding-left: 20px;
		}
		
		nav .dropdown-column.last img {
			margin: 10px 0;
		}
		
		nav .dropdown-column.last p {
			color:#fff;
			clear: both;
		}

		nav .dropdown-column.last ul {
			margin:0;
		}

		/*  Menú de videos
		------------------------------------------- */	

		ul.nav-videos {
			width:100%;
		}
		ul.nav-videos .nav-thumbs {
			width:80%;
		}			
		ul.nav-videos .nav-thumbs li {
			display: inline-block;
			float: left;
			margin-right: 10px;
			position: relative;
			width: 18% !important;
		}
		ul.nav-videos .nav-thumbs li label {
			height: 50px;
			font-size: 1.3em;
			display: table-cell;
			vertical-align: bottom;
			padding-bottom:10px;
		}			
		
		ul.nav-videos .last ul li {
			padding-bottom: 5px;
			border-bottom: 1px solid #364a7e;
			margin-bottom:5px;
		}

		nav .dropdown-column .thumb {
			background: none repeat scroll 0 0 #FFFFFF;
			border: 1px solid #D9D9D9;
			border-radius: 4px 4px 4px 4px;
			margin: 0 0 5px 0;
			padding:5px;
			overflow: auto;
			width: 100%;
			max-width: 138px;
			position:relative;
		}
		
		nav  .dropdown-column .thumb a {
			color: #444444 !important;
		}
		
		nav  .dropdown-column .thumb img {
			display: block;
			margin: 0 auto;
			width: 100%;
		}


/*  Section
	------------------------------------------- */
		section {
			min-height: 500px;
		}
		
		section#listadoVideos, section#listadoTransmisiones, section#messages {
			background-color: #F2F2F2;
		}

		section#reproduccion, section#reproduccionGrilla, section#reproduccionTransmision {
			background-color: #fff;
		}
		
		#modalSeccion section {		
			min-height: 0 !important;
		}
		
		
/*  Panel Style
	------------------------------------------- */
	.panel {
		background: none repeat scroll 0 0 #fff;
		border-radius: 4px;
		-moz-border-radius: 4px;	
		-webkit-border-radius: 4px;	
		padding: 10px 10px 5px;
		overflow: auto;			
	}
	
	.panel .side-nav {
		padding: 0;
	}
	
	.panel .side-nav li img {
		margin: 0 5px 2px 0;
	}
	
	.panel .panel-left,
	.panel .panel-right {
		float: left;
	}
	
	.panel .panel-left {
		width: 60%;
	}
	
	.panel .panel-right {
		padding-left: 10px;
		width: 40%;		
	}
	
	ul.side-nav  li {
	margin:0 0 2px 0;
	padding:0;
}
	
	.panel p {
		font-family: "AMedium", Arial;
		margin:5px 0 0 0;
	}
	
	.panel .panel-left img {
		width:100%;
	}
	
	#rep-sidebar .panel {
		margin:0 0 0.4em;
	}
	
	#rep-sidebar .block-grid li {
		padding-bottom:0;
	}
	
/*  Listado
	------------------------------------------- */
	ul.lista{
		margin: 10px;
	}
	
	ul.lista li{
		margin-bottom: 5px;
	}
		
	ul.lista li span.bullet{
		display: inline-block;
		background: url("../assets/bullets-sprite.png") -10px 0px no-repeat;
		height: 5px;
		width: 5px;
		vertical-align: top;
		margin-top: 8px;
		margin-right: 5px;			
	}
	
/*	Modal 	
	------------------------------------------- */
	.reveal-modal{
		border: 2px solid orange;
		border: none;
		background: #1f1f1f !important; }

	.reveal-modal h3{
		color: white !important;
		font-family: "Roboto",sans-serif !important; }		    

	.reveal-modal p{
		color: white;
	}	

	.message-box{
		display: block !important;
	}

	#register-ok, #register-error, #register-warning{
		border: none !important;
		padding: 10px 0 10px 40px;
	}

	#register-warning {	background: url(../assets/message-warning.png) top 15px left no-repeat !important ; }	
	#register-error {	background: url(../assets/msg-error.png) top 15px left no-repeat !important ; }

	.reveal-modal{
		z-index: 99999!important;
	}
	.content {
		overflow: auto;		
	}
	
	[data-section=""] > section.active > .content{
		border: 1px solid #001e65;
	}
	
	.modal section{
		padding-top: 0;
	}
	
	.modal section p.title{
		background: #e5e9f0 !important;
		border-radius: 3px 3px 0 0;
		font-family: "AMedium", Arial, sans-serif;
		border-bottom: 1px solid #001e65 !important;
	}
	
	.modal section p.title a{
		padding: 7px 20px !important;
	}
	
	.modal section p.title:hover {
		background: #e5e9f0 !important;				
	}
	
	.modal section p.title a {
		color: #9098b4 !important;
		font-size: 18px !important;		
	}

	.modal section p.title a:hover {
		text-decoration: none;
	}
	
	.modal section.active p.title {
		background: #001867!important;
		border: none !important;
	}

	.modal section.active p.title a {
		color: #fff !important;
		font-size: 18px !important;		
	}
	
	.modal p {
		font-size: 16px !important;	
	}	

	.modal section p.subtitle {
		font-family: 'AMedium', Arial, sans-serif;
		font-size: 20px !important;
		color: #001867;
	}
	
	.section-container.auto > section > .title, .section-container.auto > .section > .title{
		margin-right: 10px;
	}
	
	
	/* */
	
	div.boxPrecio {		 
		background: #ffc53d; /* Old browsers */
		background: -moz-linear-gradient(top, #ffc53d 0%, #eb9601 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc53d), color-stop(100%,#eb9601)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #ffc53d 0%,#eb9601 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #ffc53d 0%,#eb9601 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #ffc53d 0%,#eb9601 100%); /* IE10+ */
		background: linear-gradient(to bottom, #ffc53d 0%,#eb9601 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc53d', endColorstr='#eb9601',GradientType=0 ); /* IE6-9 */
		border-radius:10px;
		-moz-border-radius: 10px;
		-webkit-border-radius:10px;
		padding:10px 0;
		margin-bottom: 10px;
		font-family:'AMedium', Arial;
		max-width:250px;
		overflow: auto;
	}
	
	.boxPrecio .columns {
		padding:0;
		margin:0;
	}
	
	.boxPrecio .moneda {
		margin-right: 5px;
		padding-top:10px;
		float:left;
	}

	.boxPrecio .precio {
		font-size:50px;
		line-height: 50px;
		color:#fff;	
		float:left;
	}
	
	.boxPrecio .left {
		margin-left: 4px;
	}
	
	.boxPrecio .decimal {
		font-size:24px;
		color:#fff;	
		/*float:left;*/
	}
	
	.boxPrecio .periodo {
		font-size:16px;
		color:#333;	
		/*float:left;*/
	}
	
/*	Generica (interna)
	------------------------------------------- */
	#generica{
		padding: 20px 0;
	}
	
	#generica a{
		color: #222F66;
		text-decoration: underline;			
	}
	
	
/*	tiempo  en thumbs
	------------------------------------------- */
.time {
	font-family: 'AMedium', Arial;
    background-color: #000;
    border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
    color: #FFFFFF;
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    opacity: 0.7;
    padding: 0 2px;
	z-index:10;
	position:absolute;
	bottom:3px;
	right:3px;
}

.wrapThumb{
	position: relative;
	display: block;
}

/*	modales
	------------------------------------------- */
/*
.reveal-modal {
    padding: 20px;
    top: 0;
}

.reveal-modal p.lead {
    font-size: 1.4em;
    line-height: 1.6em;
	margin:0;
	padding:0;
}

.reveal-modal .panel h3 {
    font-family: 'AMedium', Arial;
	font-size: 1.5em;
	color: #222F66;	
	margin:0;
	padding:0;
}
*/
	
	
/*	publicidad
	------------------------------------------- */
	#publicidad{
		background: #f8f8f8;
	}
	
	#publicidad .comboPublicidad{
		margin: 10px 0;
	}
	
	
/*  Pagination
	------------------------------------------- */
	ul.pagination{
		margin: 20px 0;
	}
		
	ul.pagination li a{
		color: #444;
		font-size: 16px;
	}	
	
/*  footer
	------------------------------------------- */	
	footer{
		background: url("../assets/bgFooter.png") repeat-y center center #ebeff2;

	}
	
	footer p{
		font-family:"AMedium", Arial;
		font-size: 12px;
		margin-top: 20px;
	}
	
	footer a{
		color: #132b69;
		font-size: 12px;
		text-decoration: underline;
	}
	
	footer a:hover{
		text-decoration: none;
	}
	
	footer ul{
		margin: 0 !important;
	}
		
	footer div.ayudaVera{
		background: #e8eaef;
		padding-bottom: 15px;
	}

	footer div.ayudaVera p{
		color: #132b69;
		font-family: AMedium;			
		font-size: 18px;
		margin-bottom: 0;
		text-align: right;
	}

/*  Responsive embeds
	------------------------------------------- */	
	.embed-container {
		position: relative;
		padding-bottom: 56.25%; /* 16/9 ratio */
		padding-top: 30px; /* IE6 workaround*/
		height: 0;
		overflow: hidden;
	}

	.embed-container iframe,
	.embed-container object,
	.embed-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}	
	
	
/*  Mensajes genéricos y error
	------------------------------------------- */	
	#messages {
		background: none repeat scroll 0 0 #FFFFFF;
		padding: 50px 0 100px 0;
	}
	#register-ok {
		background-image:url(../assets/message-ok.gif);
	}
	#register-error {
		background-image:url(../assets/message-error.gif);
	}
	#register-warning {
		background-image:url(../assets/message-warning.gif);
	}
	#register-ok,#register-error,#register-warning {
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		border-radius:4px;
		background-position:30px 24px;
		background-repeat:no-repeat;
		border:1px solid #ddd;
	}
	.message-box {
		padding: 22px 0 20px 80px;
	}
	#register-error h3 {
		color:#CC0000;
		font-size: 1.4em;
		margin:0;
		padding:0;
	}
	#register-ok h3 {
		color:#40711b;
		font-size: 1.4em;
		margin:0;
		padding:0;
	}
	#register-ok p,
	#register-error p,
	#register-warning p {
		margin-top:6px;
	}

	
	/*  tipos de contenido
	------------------------------------------- */
	
	div.type-canal {
		background: url("../assets/type-canal.png") no-repeat top right transparent;
		float:right;
		height:78px;
		width: 78px;
		z-index:10;
		position:absolute;
		top:-4px;
		right:-4px;		
	}
		
	div.type-video {
		background: url("../assets/type-video.png") no-repeat top right transparent;
		float:right;
		height: 78px;
		width: 78px;
		z-index:10;
		position:absolute;
		top:-4px;
		right:-4px;
	}

	div.type-transmision {
		background: url("../assets/type-transmision.png") no-repeat top right transparent;
		float:right;
		height: 78px;
		width: 78px;
		z-index:10;
		position:absolute;
		top:-4px;
		right:-4px;
	}	

	div.type-offline {
		background: url("../assets/type-offline.png") no-repeat top right transparent;
		float:right;
		height: 78px;
		width: 78px;
		z-index:10;
		position:absolute;
		top:-4px;
		right:-4px;		
	}	

	div.transmision-ahora {
		background: url("../assets/transmision-ahora.png") no-repeat top right transparent;
		float:right;
		height: 85px;
		width: 85px;
		z-index:10;
		position:absolute;
		top:-4px;
		right:-4px;
	}	

	div.muy-pronto {
		background: url("../assets/muy-pronto.png") no-repeat top right transparent;
		float:right;
		height: 85px;
		width: 85px;
		z-index:10;
		position:absolute;
		top:-4px;
		right:-4px;
	}		

	
	/*  tipos de contenido
	------------------------------------------- */
	
	.social-list .has-tip {
		border-bottom: none;
		color: #333333;
		cursor: pointer;
		font-weight: normal;
		font-family:'AMedium', Arial;
	}
	
	.tooltip {
		background: #182355;
	}
	.tooltip > .nub {
		border-color: transparent transparent #182355 transparent;
	}	
	
		/* Guía de programación */
	
	#guiaProgramacion {
		background-color:#d9d9d9;
	}
	#listadoTienda {
		min-height: 550px;
	}
	#listadoTienda .thumb {
	overflow: auto;
	}
	
	
	/* Estilos que ajustan anchos de modales 
	---------------------------------------------------------------------------------------------- */
	
    .reveal-modal.tiny {
		  margin-left: -15%;
		  width: 30%;
	  }
    .reveal-modal.small {
		  margin-left: -20%;
		  width: 40%; 
	  }
    .reveal-modal.medium {
		  margin-left: -30%;
		  width: 60%; 
	  }
    .reveal-modal.large {
		  margin-left: -35%;
		  width: 70%; 
	  }
    .reveal-modal.xlarge {
		  margin-left: -47.5%;
		  width: 95%; 
	  }