@import url('http://www.rtve.es/css/tipografias.css');
body,html,*{ 
	margin:0; padding:0; list-style:none; font:12pt/1em RTVEFontR;
	box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box;
}
.elipse {  
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  word-wrap: normal;
}
/*.Scontainer{ 
	position: absolute;width: 100%;height: 100%;
	overflow: hidden; text-align: left;
}*/
#header			{/** Cabecera **/ width:100%;  position:relative; z-index:20;float:left; clear:both; background-color:#aaa; height:100px; background-image:url('i/headerBack.jpg'); background-repeat:no-repeat; background-position:top right; box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .3);}
#main-content	{/** Descripci?n y enlace a la web **/ background-color:white; padding:.7em; height: 19%;}
#points-content	{/** Eventos **/ height:90%;}
#social-content	{/** Comentarios **/ padding: 0em; height: auto;}

#header h1		{ width:100%; height:100%; text-indent:-1000px; overflow:hidden; float:left;}
#header .menu	{ position: absolute; float:left; bottom:0; width:100%; background-color:#333; height:auto;}
#header .menu a 	{ float:right; padding: .2em; color:white; text-decoration:none;}

#main-content h2				{ font-size: 1.6em;font-family: RTVEFontB;line-height: 1.2em; display:block; float: left;}
#main-content #infoContent	{ font: .8em/1.2em Arial; color: #777; float: left; padding: .7em 0;}
#main-content #infoBtn		{ 
	font: .7em/1.2em Arial; color: white; display:block; 
	padding: .2em .5em; float: right;
	background: #3b3b3b; /* Old browsers */ background: -moz-linear-gradient(top, #9b9b9b, #3b3b3b); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9b9b9b), color-stop(100%, #3b3b3b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #9b9b9b, #3b3b3b); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #9b9b9b, #3b3b3b); /* Opera11.10+ */ background: -ms-linear-gradient(top, #9b9b9b, #3b3b3b); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9b9b9b', endColorstr='#3b3b3b',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #9b9b9b, #3b3b3b); /* W3C */
	border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
	text-shadow: 0 -1px 1px black; -webkit-text-shadow: 0 -1px 1px black; -moz-text-shadow: 0 -1px 1px black; -o-text-shadow: 0 -1px 1px black; -ms-text-shadow: 0 -1px 1px black;
	font-weight: normal;
	cursor: pointer;
}
#main-content .ui-link{ font-family:Arial; color:#a30b3d; float: right; font-weight: bold; font-size: .75em; text-decoration: none; position: absolute; bottom: 5%; right: 2%; display: block;}
#main-content .ui-link img{display:inline-block !important;}

#social-content object{height:100% !important;}

/* #Menu
================================================== */
.menu , #footer { 
    width:100%;float: left !important; position:relative; z-index:20;
    background: black; /* Old browsers */ background: -moz-linear-gradient(top, #666666, black); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #666666), color-stop(100%, black)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #666666, black); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #666666, black); /* Opera11.10+ */ background: -ms-linear-gradient(top, #666666, black); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='black',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #666666, black); /* W3C */ 
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); -o-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3); 
}
.menu	{ display:none; }
.menu a 	{ display:inline-block; color:white; position:relative; text-decoration:none;padding:.4em !important;padding-left:24px !important;font-size: 1.2em;}
.menu a:before	{ content:''; position:absolute; height:100%;top:0;left:4px;width:20px;background-image:url("./i/menuIcons.png"); background-repeat:no-repeat;background-color:transparent;z-index:10;}
.menu a[href*="main"]:before		{ background-position:left center;}
.menu a[href*="start"]:before	{ background-position:-20px center;}
.menu a[href*="social"]:before	{ background-position:-42px center;}
.menu a.active{
	background: #FF154D;color: white;
	box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5); -o-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5); -ms-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.5);
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3); -o-text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3);
}
/* #Points
================================================== */
#points-content ul	{ float:left; width:100%;}
#points-content ul >li		{ 
	float:left; width:100%;border-top:1px solid #d5d5d5; border-bottom:1px solid #f2f2f2; padding: .5em .7em;
	background: #c3c3c3; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2, #c3c3c3); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2e2e2), color-stop(100%, #c3c3c3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e2e2e2, #c3c3c3); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e2e2e2, #c3c3c3); /* Opera11.10+ */ background: -ms-linear-gradient(top, #e2e2e2, #c3c3c3); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#c3c3c3',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #e2e2e2, #c3c3c3); /* W3C */
	animation:eventAnim 1s ease-out; -webkit-animation:eventAnim 1s ease-out; -moz-animation:eventAnim 1s ease-out; -o-animation:eventAnim 1s ease-out;
}
#points-content ul >li:nth-child(even){background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #f2f2f2, #e2e2e2); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f2f2), color-stop(100%, #e2e2e2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f2f2f2, #e2e2e2); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f2f2f2, #e2e2e2); /* Opera11.10+ */ background: -ms-linear-gradient(top, #f2f2f2, #e2e2e2); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #f2f2f2, #e2e2e2); /* W3C */}
#points-content ul >li>a	{ 
	float: left;width: 100%;text-decoration: none;
	background-image: url(i/itemContentIconSmall.png);background-repeat: no-repeat;background-position: right center;
	padding-left: 105px;
	position: relative;
	min-height: 76px;
}
#points-content ul >li>a>span	{ font-family:Arial; background-color:transparent; float: left; width: 100%; clear: both; padding-right: 25px;}
#points-content ul >li>a>img	{ width:94px;height:72px; border: 3px solid white; box-shadow:0px 2px 5px rgba(0,0,0,.5); position: absolute; left: 0; top: 0;}
#points-content ul >li>a>.t_comienzo 	{ color:white; background-color: #a30b3d; padding: .2em .4em .2em 1.8em; border-radius:4px;font-size: .8em;font-weight: bold; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 1px 1px 0px rgba(255,255,255,.3);text-shadow: 1px 1px 1px rgba(0,0,0,.5); width: auto; background-image: url("i/timeIcon.png"); background-repeat: no-repeat; background-position: .3em center;}
#points-content ul >li>a>.titulo		{ color:#333; font-weight:bold; margin: .4em 0; font-size: .9em;}
#points-content ul >li>a>.descripcion	{ color:#585858; font-size: .75em; margin-bottom: .5em;}

/* #Detalle de evento
================================================== */
#detalle_evento { 
	background:url(http://subtlepatterns.com/patterns/white_texture.png) #F2F2F2; 
	overflow: hidden; z-index:0; opacity: 0; position:absolute; top:0; left: -100%;
	-webkit-transition: left 0.3s ease-out, opacity 0.5s linear;
	-moz-transition: left 0.3s ease-out, opacity 0.5s linear;
	-o-transition: left 0.3s linear, opacity 0.5s linear;
	-ms-transition: left 0.3s ease-out, opacity 0.5s linear;
	transition: left 0.3s ease-out, opacity 0.5s linear;
}
#detalle_evento.hidden{top:0;}
#detalle_evento.show{opacity: 1;position:absolute;top:100px;left:0; z-index:20; height: 99%;}
#detalle_evento #wrapper	{ height: 90%; width:100%; float: left; position: relative;}
#detalle_evento #wrapper .container {width:100% !important; height: 100%; overflow-y: auto; display: block;}
#detalle_evento.show video, #detalle_evento.show object{display:block;}
#detalle_evento .menu{display:block;}
#detalle_evento .menu{background: white !important;}
#detalle_evento .menu a{color:black;font-size: 12pt;float: right;}
#detalle_evento .menu a:before{background-image:url("./i/arrowLeft.png");}
#detalle_evento em {color: #83072F;font-family: arial;font-weight: bold;}

/** Contenido detalle **/
.container .news.bg01.comp h2{font-size:1em; line-height: 1em;}
.container .news.bg01.comp .chapeaux p{font-family:Arial !important; font-size:.7em !important}
/** Cerrar **/
span.closeDesc {padding: 0 15px 0 15px !important;float:right; clear:both; background: url("i/arrowLeft.png") 0 50% no-repeat;font-weight:bold;position: absolute;top: 0;right: 0;}
span.closeDesc a {text-decoration:none;font-size: 10pt;}

@media screen and (max-width: 480px){
	/*** M?vil **/
	/*body {background-color:red;}*/
	
	#header,#main-content,#points-content,#social-content{width:100%; float:left;}
	#header			{/** Cabecera **/ height:120px; background-image:url('i/headerBackMobile.jpg');}
	#main-content	{
    height: auto;
/** Descripci?n y enlace a la web **/;
}
	#points-content	{/** Eventos **/}
	#social-content	{/** Comentarios **/}
	#main-content .ui-link	{ position: inherit; bottom: inherit; right: inherit;}
	#header .menu	{ display:block; }
	#main-content h2	{ width:75%;}
	
	#points-content ul >li>a>.descripcion	{ display:none;}
	
	/*.cn-slide{
		position: absolute !important;
		left: -100%;
		top:0px;
		width: 100% !important;
		float:none !important;
		opacity: 0;
		-webkit-transition: left 0.3s ease-out, opacity 0.4s linear;
		-moz-transition: left 0.3s ease-out, opacity 0.4s linear;
		-o-transition: left 0.3s linear, opacity 0.4s linear;
		-ms-transition: left 0.3s ease-out, opacity 0.4s linear;
		transition: left 0.3s ease-out, opacity 0.4s linear;
		z-index:10;
	}
	.cn-slide.mytarget{
		left: 0;
		opacity: 1;
		top:100px;
	}*/
	.cn-slide{ opacity: 0; position:absolute; top:0; left: -100%; z-index:0; }
	.cn-slide.mytarget{ opacity: 1; float:left; position: inherit; left:0; z-index:10;}
	
	.Scontainer	{float:left; display:block; height:100%; width:100%; position:relative;}
	.Scontainer #main-content.mytarget  + #points-content{ float:left; opacity: 1; left:0; position: inherit; z-index:10;}
	
	#social-content	object{height:100%;}
	#detalle_evento.show {top: 86px;	}
}
@media screen and (min-width: 481px) and (max-width:768px){
	/*** Tablet **/
	.Scontainer{overflow:hidden;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
	/*body {background-color:green;}*/
	#header,#main-content{width:100%; float:left;}
	#points-content,#social-content{width:50%; float:left;}
	#header			{/** Cabecera **/}
	#main-content	{/** Descripci?n y enlace a la web **/ position: relative;}
	#points-content	{ height: 70%; position:relative;}
	#points-content:before{content:''; position:absolute; top:0; left:0; background-image:-webkit-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0)); display:block; width:100%; height:10px;z-index:19;}
	#points-content:after{content:''; position:absolute; bottom:0; left:0; background-image:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1)); display:block; width:100%; height:10px;z-index:19;}
	#points-content ul{  overflow-y: scroll;   box-shadow: inset 0 5px 5px black;  height: 100%;}
	#social-content	{/** Comentarios **/ height:70%;}
	
	#header .menu	{display:none;}
	
	#points-content ul >li>a>.t_comienzo	{}
	#points-content ul >li>a>.descripcion	{  
		text-overflow: ellipsis; overflow: hidden;
		width: 100%;white-space: nowrap;word-wrap: normal;
	}
}
@media screen and (min-width:769px){
	/*** Desktop **/
	/*body {background-color:blue;}*/
	.Scontainer{overflow:hidden;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
	#header	{width:100%; float:left;}
	#main-content, #points-content{width:60%; display:inline-block; float:left;}
	#social-content{width: 39.9%; display: inline-block; float:none;height: 89%;}
	#header			{/** Cabecera **/}
	#main-content	{/** Descripci?n y enlace a la web **/ position: relative;}
	#points-content	{/** Eventos **/}
	#social-content	{/** Comentarios **/}
	#header .menu	{display:none;}
	#detalle_evento.show { width: 60%; }
	#points-content	{ height: 70%; position:relative;}
	#points-content:before{content:''; position:absolute; top:0; left:0; background-image:-webkit-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0)); display:block; width:100%; height:10px;z-index:19;}
	#points-content:after{content:''; position:absolute; bottom:0; left:0; background-image:-webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1)); display:block; width:100%; height:10px;z-index:19;}
	#points-content ul{  overflow-y: scroll;   box-shadow: inset 0 5px 5px black;  height: 100%;}
}

/* #animations
================================================== */

@keyframes eventAnim {
	/*0% {left:-100%; opacity:0}
	100%{left:0; opacity:1}*/
	0%{ transform: translate3d(-100%,0,0);opacity:0;}
	100%{ transform: translate3d(0%,0,0);opacity:1;}
}

@-webkit-keyframes eventAnim {
	/*0% {left:-100%; opacity:0}
	100%{left:0; opacity:1}*/
	0%{ -webkit-transform: translate3d(-100%,0,0);opacity:0;}
	100%{ -webkit-transform: translate3d(0%,0,0);opacity:1;}
}

@-moz-keyframes eventAnim {
	0% {left:-100%; opacity:0}
	100%{left:0; opacity:1}
}

@-o-keyframes eventAnim {
	0% {left:-100%; opacity:0}
	100%{left:0; opacity:1}
}

@keyframes Enter {
	0%{ transform: translate3d(-100%,0,0);opacity:0;}
	100%{ transform: translate3d(0%,0,0);opacity:1;}
}
@keyframes Out {
	0%{transform: translate3d(0%,0,0);opacity:1;}
	100%{ transform: translate3d(-100%,0,0);opacity:0;}
}

@-webkit-keyframes Enter {
	0%{ -webkit-transform: translate3d(-100%,0,0);opacity:0;}
	100%{ -webkit-transform: translate3d(0%,0,0);opacity:1;}
}
@-webkit-keyframes Out {
	0%{ -webkit-transform: translate3d(0%,0,0);opacity:1;}
	100%{ -webkit-transform: translate3d(-100%,0,0);opacity:0;}
}
@-moz-keyframes Enter {
	0%{ -moz-transform: translate3d(-100%,0,0);opacity:0;}
	100%{ -moz-transform: translate3d(0%,0,0);opacity:1;}
}
@-moz-keyframes Out {
	0%{ -moz-transform: translate3d(0%,0,0);opacity:1;}
	100%{ -moz-transform: translate3d(-100%,0,0);opacity:0;}
}
@-o-keyframes Enter {
	0%{ -o-transform: translate3d(-100%,0,0);opacity:0;}
	100%{ -o-transform: translate3d(0%,0,0);opacity:1;}
}
@-o-keyframes Out {
	0%{ -o-transform: translate3d(0%,0,0);opacity:1;}
	100%{ -o-transform: translate3d(-100%,0,0);opacity:0;}
}
