@import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
@import url('/css/rtve.infografias/fukushima/animaciones.css');
#fukushima { padding: 0; font-family: 'Roboto', sans-serif; line-height: 150%;}
#fukushima .infografia-topmenu {position: relative; width: 100%; height: 600px; border-top: solid 1px #b8b8b8; border-bottom: solid 1px #b8b8b8;overflow: hidden;
background: url('/css/rtve.infografias/fukushima/i/line.jpg') no-repeat center 550px #fafafa;}
#fukushima .infografia-topmenu > ul {}
#fukushima .infografia-topmenu > ul > li {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;}

#fukushima .infografia-topmenu > ul > li .btnEscenario { position: absolute; top: 0; left: 0; height: 74px; width: 12.5%; padding: 1%; box-sizing: border-box; -moz-box-sizing: border-box; background: rgba(255, 255, 255, 0.5); z-index: 1;}
#fukushima .infografia-topmenu > ul > li .btnEscenario > span { background: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_00.jpg') no-repeat 0 0; width: 100%; height: 100%; display: block; border: solid 2px #bdbdbd; box-sizing: border-box; -moz-box-sizing: border-box;}


/* Thumbs */
#fukushima .infografia-topmenu > ul > li#escenario0 .btnEscenario {left: 0%}
#fukushima .infografia-topmenu > ul > li#escenario1 .btnEscenario {left: 12.5%}
#fukushima .infografia-topmenu > ul > li#escenario2 .btnEscenario {left: 25%}
#fukushima .infografia-topmenu > ul > li#escenario3 .btnEscenario {left: 37.5%}
#fukushima .infografia-topmenu > ul > li#escenario4 .btnEscenario {left: 50%}
#fukushima .infografia-topmenu > ul > li#escenario5 .btnEscenario {left: 62.5%}
#fukushima .infografia-topmenu > ul > li#escenario6 .btnEscenario {left: 75%}
#fukushima .infografia-topmenu > ul > li#escenario7 .btnEscenario {left: 87.5%}

#fukushima .infografia-topmenu > ul > li#escenario0 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_00_bw.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario1 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_01_bw.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario2 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_02_bw.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario3 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_03_bw.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario4 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_04_bw.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario5 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_05_bw.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario6 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_06_bw.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario7 .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_07_bw.jpg');}

#fukushima .infografia-topmenu > ul > li .bg {width: 100%; height: 513px;opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; -moztransition: all 0.3s; overflow: hidden; visibility: hidden;}
#fukushima .infografia-topmenu > ul > li .bg > span {}

#fukushima .infografia-topmenu > ul > li .intro { opacity: 0; position: absolute; top: auto; bottom: 88px; left: 0; right: auto; width: 50%; background: rgba(255,255,255,0.8); padding: 10px 20px; font-size: 14px; color: #489ab2;
transition: all 0.3s; -webkit-transition: all 0.3s; -moztransition: all 0.3s;}
#fukushima .infografia-topmenu > ul > li .intro h2 {font-size: 26px;line-height: 140%;font-weight: 100;padding-bottom: 10px;color: #E29C34;}
#fukushima .infografia-topmenu > ul > li .intro h2 strong {display: block;font-weight: 100;font-size: 28px;}
#fukushima .infografia-topmenu > ul > li .intro p {line-height: 140%; padding-bottom: 10px;}

#fukushima .infografia-topmenu > ul > li .points {}
#fukushima .infografia-topmenu > ul > li .points > li {position: absolute; top: 543px; left: 46px; width: 10px; height: 10px; background: #d7d7d7; border-radius: 8px; border: solid 3px #fafafa; cursor: pointer;z-index: 10;margin-left: 0px;}
#fukushima .infografia-topmenu > ul > li .points > li .date { position: absolute; top: -11px; left: -15px; padding-top: 30px; width: 40px; color: #e7e7e7; font-size: 11px; text-align: center;}

#fukushima .infografia-topmenu > ul > li .points > li.point_1   {left:  40px;margin-left: 6px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_2   {left:  85px;margin-left: 9px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_10  {left:  130px;margin-left: 12px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_12  {left:  175px;margin-left: 15px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_13  {left:  210px;margin-left: 18px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_14  {left:  255px;margin-left: 21px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_6   {left:  300px;margin-left: 24px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_7   {left:  345px;margin-left: 27px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_17  {left:  390px;margin-left: 30px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_15  {left:  435px;margin-left: 33px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_11  {left:  480px;margin-left: 33px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_18  {left:  525px;margin-left: 36px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_4   {left:  570px;margin-left: 39px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_16  {left:  615px;margin-left: 42px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_5   {left:  660px;margin-left: 45px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_19  {left:  705px;margin-left: 48px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_8   {left:  750px;margin-left: 51px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_9   {left:  795px;margin-left: 54px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_3   {left:  840px;margin-left: 57px;}

#fukushima .infografia-topmenu > ul > li .points > li .infobox {opacity: 0; visibility: hidden;transition: all 0.3s; -webkit-transition: all 0.3s; -moztransition: all 0.3s;
width: 400px; height: auto; position: absolute; bottom: 30px; left: -195px; background: #fff; padding: 15px; box-sizing: border-box; border: solid 1px #CACACA;z-index: 1; margin-bottom: 20px}
#fukushima .infografia-topmenu > ul > li .points > li .infobox * {opacity: 0; visibility: hidden;}
#fukushima .infografia-topmenu > ul > li .points > li .infobox p {font-size: 14px; line-height: 120%; padding-bottom: 10px; color: #489ab2;}
#fukushima .infografia-topmenu > ul > li .points > li .infobox .more { background: url('/css/rtve.infografias/fukushima/i/leermas.png') no-repeat left center ; color: #777; padding-left: 30px; margin: 5px 0px; display: inline-block; font-size: 14px; width: auto; height: 30px; line-height: 30px;}
#fukushima .infografia-topmenu > ul > li .points > li .infobox .media { width: 100%; margin-bottom: 6px;}
#fukushima .infografia-topmenu > ul > li .points > li .infobox .media img { width: 100%;}
#fukushima .infografia-topmenu > ul > li .points > li .infobox .media .VideoContainer{ z-index: 1001; position: relative;}

#fukushima .infografia-topmenu > ul > li .points > li .infobox .close {display: block; width: 26px; height: 26px; background: url('/css/rtve.infografias/fukushima/i/cerrar.png') no-repeat left top; position: absolute; top:-13px; right: -13px; left: auto }
#fukushima .infografia-topmenu > ul > li .points > li .infobox .pointer {background: url('/css/rtve.infografias/fukushima/i/pointer.png') no-repeat center 0;
display: block;
width: 60px;
height: 30px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -30px;} 
/* hover */
#fukushima .infografia-topmenu > ul > li .btnEscenario:hover > span {border-color: #4196B3;filter: none;-webkit-filter: grayscale(0%);}
#fukushima .infografia-topmenu > ul > li .points > li:hover .date,
#fukushima .infografia-topmenu > ul > li.active .points > li .date {color:#489ab2;}

#fukushima .infografia-topmenu > ul > li#escenario0 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_00.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario1 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_01.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario2 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_02.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario3 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_03.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario4 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_04.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario5 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_05.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario6 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_06.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario7 .btnEscenario:hover span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_07.jpg');}

/* active */
#fukushima .infografia-topmenu > ul > li.active {}
#fukushima .infografia-topmenu > ul > li.active .bg {opacity: 1;visibility: visible;}
#fukushima .infografia-topmenu > ul > li.active .btnEscenario > span {border-color: #4196B3;filter: none;-webkit-filter: grayscale(0%);}
#fukushima .infografia-topmenu > ul > li.active .points > li {box-shadow: 0px 0px 0px 3px #d7d7d7;}
#fukushima .infografia-topmenu > ul > li.active .points > li.active {box-shadow: 0px 0px 0px 3px #489ab2;}
#fukushima .infografia-topmenu > ul > li.active .points > li.active .infobox { opacity: 1;visibility: visible; z-index: 150;}
#fukushima .infografia-topmenu > ul > li.active .points > li.active .infobox * {opacity: 1; visibility: visible;}
#fukushima .infografia-topmenu > ul > li.active .intro { opacity: 1; }

#fukushima .infografia-topmenu > ul > li#escenario0.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_00.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario1.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_01.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario2.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_02.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario3.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_03.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario4.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_04.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario5.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_05.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario6.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_06.jpg');}
#fukushima .infografia-topmenu > ul > li#escenario7.active .btnEscenario span { background-image: url('/css/rtve.infografias/fukushima/i/thumbs/escenario_07.jpg');}

#fukushima .infografia-topmenu > ul > li .points > li.point_1 .infobox {left: -40px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_1 .infobox .pointer {left: 45px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_2 .infobox {left: -90px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_2 .infobox .pointer {left: 94px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_3 .infobox {left: -350px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_3 .infobox .pointer {left: 372px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_10 .infobox {left: -110px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_10 .infobox .pointer {left: 115px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_11 .infobox {left: -260px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_11 .infobox .pointer {left: 264px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_12 .infobox {left: -180px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_12 .infobox .pointer {left: 184px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_13 .infobox {left: -140px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_13 .infobox .pointer {left: 145px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_19 .infobox {left: -230px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_19 .infobox .pointer {left: 235px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_8 .infobox {left: -280px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_8 .infobox .pointer {left: 285px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_9 .infobox {left: -330px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_9 .infobox .pointer {left: 335px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_3 .infobox {left: -366px;}
#fukushima .infografia-topmenu > ul > li .points > li.point_4 .infobox .pointer {left: 145px;}