@charset "UTF-8";

#container-infografia-italia, 
#container-infografia-italia * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/** Contenedor infografia **/
#container-infografia-italia { width:100%; height:828px; display:block; background: url(i/backInfo.jpg) no-repeat center center #f2f2f2; position: relative; overflow:hidden;}

/** Contenedor infografia **/
#container-infografia-italia > .header { display:block; background: #fff; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 2px 2px rgba(0,0,0,.2);-o-box-shadow: 0 2px 2px rgba(0,0,0,.2);-ms-box-shadow: 0 2px 2px rgba(0,0,0,.2);box-shadow: 0 2px 2px rgba(0,0,0,.2);}
/** --- Cabecera --- **/
#container-infografia-italia > .header > h1 { font-family: 'RTVEFontR'; color: #333; font-size: 3em; line-height: 1em; padding: 1em 0em 0 2em; background: url(i/italyFlag.png) no-repeat 0 1em; margin-left: .5em; display: block;}
/** --- texto explicativo --- **/
#container-infografia-italia > .header > .descripcion-data    {
    width: 100%;
    font-family: RTVEFontR;
    font-size: 11pt;
    line-height: 1.4em;
    color: #333;
    padding:0em 1em .5em;
}
/** Navegacion **/
#container-infografia-italia .navigation {
    display:block; width:100%; height: 110px; background:url(i/backNav.jpg) no-repeat center center transparent;

}
#container-infografia-italia .navigation > .timeline { display:block; width:100%; height:100%; background:url(i/backTimeline.gif) repeat-x left center transparent; }
/** --- línea de tiempo (años) --- **/
#container-infografia-italia .timeline > .year                  {
    display: inline-block; 
    width: 9.09090909%;
    text-align: center;
    margin-top: 0em;
    padding-top: 3.7em;
}
#container-infografia-italia .timeline > .year > a              {
  position:relative;
  height:100%; display: block;
  margin-top: 35px; color:#999;
  font-family:RTVEFontR;
  font-size:10pt;
  text-decoration: none;
  line-height: 25px;
}
#container-infografia-italia .timeline > .year:hover > a  { color:#333; }
#container-infografia-italia .timeline > .year:hover > .tipoGobierno  { opacity:1;}
#container-infografia-italia .timeline > .year.active > a {
    font-family: RTVEFontB; 
    font-size: 1.7em;
    color:#333;
}
#container-infografia-italia .timeline > .year > a:before               {
    content:''; width:18px; height:16px; display:block; position:relative; 
    background: url(i/timelineBtns.png) no-repeat 0 -16px transparent;
    left:0%; margin:-24px auto 5px auto;
}
#container-infografia-italia .timeline > .year > a:hover:before                 {
    background-position: 0 -32px;
}
#container-infografia-italia .timeline > .year.active > a:before ,
#container-infografia-italia .timeline > .year.active > a:hover:before              {
    background-position: 0 0;
}

#container-infografia-italia .timeline > .year > span           { }
#container-infografia-italia .timeline > .year > .tipoGobierno  {
    overflow: hidden;
    width: 20px;
    height: 20px;
    display: block;
    text-indent: -1000%;
    margin: 0 auto;
    margin-top: -80%;
    background-image: url(i/tipoGobiernoIcons.png);
    opacity:.3;
}
#container-infografia-italia .timeline > .year.intro > .tipoGobierno  {
    background: url(i/ico_home.png) no-repeat;
}
#container-infografia-italia .timeline > .year.active > .tipoGobierno       { opacity:1; }
#container-infografia-italia .timeline > .year.elecciones > .tipoGobierno   { background-position: 0 0; }
#container-infografia-italia .timeline > .year.cambio > .tipoGobierno       { background-position: 0 -20px;}


/** Contenido Slide Intro **/
#container-infografia-italia .content-data.slide.intro .texto{ width: 35%;float: left;margin-right: 5%;font-size: 12px;font-family: arial;line-height: 100%;}
#container-infografia-italia .content-data.slide.intro .texto p {margin:0 0 10px 35px;line-height: 160%;background: rgba(206,200,174,0.2);
padding: 8px;}
#container-infografia-italia .content-data.slide.intro .texto p:first-child {margin:60px 0 10px 35px;}
#container-infografia-italia .content-data.slide.intro .texto p:first-child:first-letter {font-size: 30px;color:#000; font-family: RTVEfontB;}
#container-infografia-italia .content-data.slide.intro .texto p strong {font-family:RTVEfontB; font-size: 16px;color:#900;}
#container-infografia-italia .content-data.slide.intro img {margin-top: 80px;}
/** Contenido del slide **/
#container-infografia-italia .slide { display:block; width:100%; position:relative; }
#container-infografia-italia .content-data {
    float: left;
    height: 650px;
}

/** Contenedor Coalicion  **/
#container-infografia-italia .content-data div.coalicion { background: white; position: relative; width: 25%; box-shadow: 2px 2px 0px rgba(0,0,0,.1); margin-top: 80px;}

#container-infografia-italia .content-data div.coalicion.rojo span.nombre-coalicion   { border-color:#bc343e; color: #bc343e; }
#container-infografia-italia .content-data div.coalicion.verde span.nombre-coalicion  { border-color:#1c7c1c; color: #1c7c1c; }
#container-infografia-italia .content-data div.coalicion.azul span.nombre-coalicion   { border-color:#30b9be; color: #30b9be; }
#container-infografia-italia .content-data div.coalicion.negro span.nombre-coalicion  { border-color:#333; color: #333; }
#container-infografia-italia .content-data div.coalicion.naranja span.nombre-coalicion  { border-color:#f90; color: #f90; }
#container-infografia-italia .content-data div.coalicion.rosa span.nombre-coalicion  { border-color:#f6c; color: #f6c; }

#container-infografia-italia .content-data div.coalicion span.nombre-foto   { color: #666; font-size: 8pt; padding-top: 7px; font-weight: bold;}
#container-infografia-italia .content-data div.coalicion.izquierda span.nombre-foto { padding-left: 50px; float: left; }
#container-infografia-italia .content-data div.coalicion.derecha span.nombre-foto { padding-right: 50px; float: right; }
#container-infografia-italia .content-data div.coalicion span.nombre-foto ~ ul {padding-top:5% !important; }

#container-infografia-italia .content-data div.coalicion.izquierda  { left: 3%; float: left; clear: left;}
#container-infografia-italia .content-data div.coalicion.derecha    { right: 3%; float: right; clear:right;}

#container-infografia-italia .content-data div.coalicion img.coalicion { 
    background: transparent; display:block;
    width: 70px; height: 70px; border:3px solid white; border:none \9; position: absolute; top: -5em; z-index: 2;
    border-radius: 25em; 
    -webkit-border-radius: 25em; -moz-border-radius: 25em; -o-border-radius: 25em; -ms-border-radius: 25em;
    -webkit-box-shadow:  0 4px 8px rgba(0,0,0,.3); -moz-box-shadow:  0 4px 8px rgba(0,0,0,.3); -o-box-shadow:  0 4px 8px rgba(0,0,0,.3); -ms-box-shadow:  0 4px 8px rgba(0,0,0,.3); box-shadow:  0 4px 8px rgba(0,0,0,.3);
    -webkit-filter: saturate(0%); -moz-filter: saturate(0%); -o-filter: saturate(0%); -ms-filter: saturate(0%); filter: saturate(0%);
}
#container-infografia-italia .content-data div.coalicion.izquierda img.coalicion { left: -2em; }
#container-infografia-italia .content-data div.coalicion.derecha img.coalicion { right: -2em; }
#container-infografia-italia .content-data div.coalicion span.nombre-coalicion {
    width: 117%;
    border-bottom: 2px solid #333;
    display: block;
    font-family: RTVEFontR;
    font-size: 1.6em;
    line-height: 1.2em;
    position: absolute;
    z-index: 1;
    color: #333;
}
#container-infografia-italia .content-data div.coalicion.derecha span.porcentaje-coalicion{ font-size:20pt; position: absolute; bottom: 115%; right: 105%;}
#container-infografia-italia .content-data div.coalicion.izquierda span.porcentaje-coalicion{ font-size:20pt; position: absolute; bottom: 115%; left: 105%;}
/*#container-infografia-italia .content-data div.coalicion.izquierda span.nombre-coalicion {border-color:#1c7c1c;}*/
#container-infografia-italia .content-data div.coalicion.izquierda span.nombre-coalicion { bottom: 100%; left: -17%; text-align: right; /*color: #1c7c1c;*/ padding-left: 96px;}
/*#container-infografia-italia .content-data div.coalicion.derecha span.nombre-coalicion {border-color:#bc343e;}*/
#container-infografia-italia .content-data div.coalicion.derecha span.nombre-coalicion { bottom: 100%; text-align: left; /*color: #bc343e;*/ padding-right: 100px;}

/** -- partidos de la coalicion  --- **/
#container-infografia-italia .content-data ul           {
    background: white;
    overflow:hidden;
    padding: 1.5em 1.5em 1em;
    padding-top: 10%;
    display: block;
    /*float: left;*/
    width: 100%;
}
#container-infografia-italia .content-data li.partido   {
    float: left;
    display: block;
    width: 100%;
    font-family: RTVEFontR;
    font-size: 10pt;
    line-height: 1em;
    padding: .2em 0;
    color: #666;
}
#container-infografia-italia .content-data li.partido:first-child {
    font-family: RTVEFontB;
    font-size: 11pt;
    color: #333;
}
#container-infografia-italia .content-data li.partido > .nombre-partido     {
    float: left;
 
    max-width: 75%;
}
#container-infografia-italia .content-data li.partido > .porcentaje-partido {
    float: right;
 }

/** Canvas RaphaelJS **/
/** --- arco --- **/
#container-infografia-italia .canvas-data         {
    height: 420px;
    margin-top: 40%;
    width: 420px;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -20%;
    z-index: 10;
}

#container-infografia-italia .canvas-data tspan {font-size:14px; font-family:RTVEFontB;}
#container-infografia-italia .canvas-data span {font-size:18px; font-family:RTVEFontB; text-align:center; width:100%; float:left;}
#container-infografia-italia .canvas-data.senado, 
#container-infografia-italia .canvas-data.congreso  { height:210px; left: 48%;  margin-top: 30%; }

#container-infografia-italia .canvas-data.senado ~ .canvas-data.congreso,
#container-infografia-italia .canvas-data.congreso ~ .canvas-data.senado { margin-top: 60%;}

#container-infografia-italia .canvas-data img        {
    height: 290px;
    width: 290px;
    display: block;
    position: absolute;
    left: 66px; 
    top: 66px;
    z-index: 10;
}
/** --- parlamento --- 
#container-infografia-italia .content-data .canvas-parlamento   {
    height: 200px;
    width: 33%;
    display: block;
    background: #333;
    position: absolute;
    left:0;
    bottom: 0;
}
**/


/** Footer --- **/
#container-infografia-italia .footer    { display: block; width: 100%; background-color: #333; color:#f2f2f2; text-align: center;}
/** FIX 2013 **/
#container-infografia-italia .content-data:last-child div.coalicion.derecha.naranja {margin-top: 80px;}
#container-infografia-italia .content-data:last-child .porcentaje-partido {display: none}
#container-infografia-italia > .header > .descripcion-data .sondeos{
    float: left; width: 100%; text-align: center;
font-size: 20px; font-weight: bold;margin: 10px;
}