#modulo { position:relative; width: 926px; height:510px; background: url(i/fondoMapaEU.jpg) no-repeat -6px 0px; border: solid 1px #aaa; overflow:hidden; margin: 1.2em;}
#leyenda, #mapa, .info, #pie, #crono { position:absolute;}

/* Options
---------------------------------------------------*/
#options { display:block; position:absolute; right: 0em; top: 0em; z-index:101;}
#options a { display:inline-block; padding:5px; background-color: #999;float:left; font-family: Arial; color:white; text-transform:uppercase;}
#options a.active, #options a:hover { background-color: #333; font-weight:bold; }

/* Mapa
---------------------------------------------------*/
#mapa { width:557px; height:510px; left: auto; right: 0;}
#tabla, #tabla * {box-sizing:border-box;}
#tabla { width:100%; height:100%; z-index:100; background-color:#f2f2f2; position:relative; display:none; font-family: 'Arial'; }
#tabla table {width: 100%;margin: 0;padding: 0;border-spacing: 0;height: 100%;}
#tabla table thead,
#tabla table tbody {display: block;width: 100%;float: left;}
#tabla table thead {height: 17%;padding-top: 5%;}
#tabla table tbody { overflow-y:auto; height: 88%;}
#tabla table tr {width:100%; display:block;}
#tabla table th, #tabla table td {width: 19.4%;float: left;}
#tabla table td {width: 20%;}
#tabla table td b {font-size: 0.8em; display:block; float:right}
#tabla table th {border-bottom: 1px solid #000;background-color: #e4e4e4;}
#tabla table thead th, #tabla table td { text-align: left; padding: .5em;border-right: 1px dotted #c3c3c3;}
#tabla table tbody tr:nth-child(odd) td { background-color: #fff;}

/* leyenda 
---------------------------------------------------*/
#leyenda {background: rgba(255,255,255,0.5);width: 380px;top: 0%;bottom: 0%;padding: 10px;box-sizing: border-box;-moz-box-sizing: border-box;}
#leyenda h2 {
    color: #333;
    font-family: RTVEfontB;
    font-size: 30px;
    display: inline-block;
    line-height: 120%;
    text-shadow: 1px 1px 2px #fff;
    border-bottom: solid 3px #333;
    margin-bottom: 30px;
}
#leyenda > ul > li {margin-bottom: 10px; transition:all 0.3s; -webkit-transition:all 0.3s;overflow: hidden;}
#leyenda > ul > li:hover {background: #ccc;}
#leyenda > ul > li.active:hover {background: none;}
#leyenda > ul > li a {color: #595959;font-family: RTVEfontsansR;font-size: 20px;line-height: 25px;padding-left: 30px;background: url('/css/rtve.noticias/rtve.noticias.especiales/elecciones-europeas-2014/i/sprite_mas_menos.png') no-repeat 0px 3px;display: inline-block;width: 100%;box-sizing: border-box;}
#leyenda > ul > li a:hover {text-decoration: none;}
#leyenda > ul > li.active a {background: url('/css/rtve.noticias/rtve.noticias.especiales/elecciones-europeas-2014/i/sprite_mas_menos.png') no-repeat 0px -21px;}
#leyenda > ul > li ul {height:0px; transition:all 0.3s; -webkit-transition:all 0.3s;}
#leyenda > ul > li.active ul {height: auto;}
#leyenda > ul > li.gobierno ul { overflow: hidden; width: 50%; float: left;}
#leyenda > ul > li.gobierno ul li { float: left; padding: 3px 0px; width: 100%;}
#leyenda > ul > li.gobierno ul li abbr {font-family: RTVEfontsansR; color: #9f9f9f; font-size: 14px; position: relative; line-height: 24px; height: 24px; display: inline-block; width: auto; padding-left: 25px;}
#leyenda > ul > li.gobierno ul li abbr:before { content: ''; display: block; background: #000; width: 20px; height: 20px; float: left; position: absolute; top: 2px; left: 0px; border-radius: 10px;}
#leyenda > ul > li.gobierno ul li.item0 abbr:before {background: #4b5091}
#leyenda > ul > li.gobierno ul li.item1 abbr:before {background: #db384f}
#leyenda > ul > li.gobierno ul li.item2 abbr:before {background: #fec051}
#leyenda > ul > li.gobierno ul li.item3 abbr:before {background: #1C95C4}
#leyenda > ul > li.gobierno ul li.item4 abbr:before {background: #BCB9B9}



#leyenda > ul > li.gobierno ul.coaliciones {}
#leyenda > ul > li.gobierno ul.coaliciones li {text-align: center;}
#leyenda > ul > li.gobierno ul.coaliciones li a { background: #FFF;padding: 3px;border: solid 2px #545454;border-radius: 8px;text-align: center;font-size: 16px;width: auto;line-height: 120%;}
#leyenda > ul > li.gobierno ul.coaliciones li#coalicion a {border-color: #ab89dd;width: 152px;}
#leyenda > ul > li.gobierno ul.coaliciones li#coalicion a:hover,
#leyenda > ul > li.gobierno ul.coaliciones li#coalicion.active a {background: #ab89dd; color: #fff}
#leyenda > ul > li.gobierno ul.coaliciones li#otrasCoaliciones a:hover,
#leyenda > ul > li.gobierno ul.coaliciones li#otrasCoaliciones.active a {background: #545454; color: #fff}

#leyenda > ul > li.escanios ul { overflow: hidden; width: 100%; margin-left: -6px;}
#leyenda > ul > li.escanios ul li { float: left; padding: 8px 0px; width: 9%;}
#leyenda > ul > li.escanios ul li span {font-family: RTVEfontsansR; color: #9f9f9f; font-size: 14px; position: relative; line-height: 24px; height: 24px; display: inline-block; width: 100%; padding-left: 0px;text-align: center;}
#leyenda > ul > li.escanios ul li span:before { content: ''; display: block; background: #fff; width: 20px; height: 20px; border-radius: 10px; margin: 0 auto; border: solid 1px #B1B1B1; box-sizing: border-box;-moz-box-sizing: border-box;}
#leyenda > ul > li.escanios ul li span:after { content: ''; display: block; background: #FF8D75;  width: 18px; height:18px; border-radius: 10px; margin: 0 auto; margin-top: -43px;box-sizing: border-box;-moz-box-sizing: border-box;}
#leyenda > ul > li.escanios ul li.item0 span:after {opacity: 0}
#leyenda > ul > li.escanios ul li.item1 span:after {opacity: 0.1}
#leyenda > ul > li.escanios ul li.item2 span:after {opacity: 0.2}
#leyenda > ul > li.escanios ul li.item3 span:after {opacity: 0.3}
#leyenda > ul > li.escanios ul li.item4 span:after {opacity: 0.4}
#leyenda > ul > li.escanios ul li.item5 span:after {opacity: 0.5}
#leyenda > ul > li.escanios ul li.item6 span:after {opacity: 0.6}
#leyenda > ul > li.escanios ul li.item7 span:after {opacity: 0.7}
#leyenda > ul > li.escanios ul li.item8 span:after {opacity: 0.8}
#leyenda > ul > li.escanios ul li.item9 span:after {opacity: 0.9}
#leyenda > ul > li.escanios ul li.item10 span:after {opacity: 1}

#leyenda > ul > li.paro ul { overflow: hidden; width: 100%; margin-left: -15px;}
#leyenda > ul > li.paro ul li { float: left; padding: 8px 0px; width: 14%;}
#leyenda > ul > li.paro ul li span {font-family: RTVEfontsansR; color: #9f9f9f; font-size: 14px; position: relative; line-height: 24px; height: 24px; display: inline-block; width: 100%; padding-left: 0px;text-align: center;}
#leyenda > ul > li.paro ul li span:before { content: ''; display: block; background: #fff; width: 20px; height: 20px; border-radius: 10px; margin: 0 auto;border: solid 1px #B1B1B1; box-sizing: border-box;-moz-box-sizing: border-box;}
#leyenda > ul > li.paro ul li span:after { content: ''; display: block; background: #8BCCE0; width: 18px; height:18px; border-radius: 10px; margin: 0 auto; margin-top: -43px;box-sizing: border-box;-moz-box-sizing: border-box;}
#leyenda > ul > li.paro ul li.item0 span:after {opacity: 0}
#leyenda > ul > li.paro ul li.item1 span:after {opacity: 0.17}
#leyenda > ul > li.paro ul li.item2 span:after {opacity: 0.35}
#leyenda > ul > li.paro ul li.item3 span:after {opacity: 0.5}
#leyenda > ul > li.paro ul li.item4 span:after {opacity: 0.67}
#leyenda > ul > li.paro ul li.item5 span:after {opacity: 0.85}
#leyenda > ul > li.paro ul li.item6 span:after {opacity: 1}

#leyenda > ul > li.evolucion ul { overflow: hidden; width: 100%;margin: 0 auto;}
#leyenda > ul > li.evolucion ul li { float: left; padding: 8px 0px; width: 6%;}
#leyenda > ul > li.evolucion ul li span {font-family: RTVEfontsansR; color: #9f9f9f; font-size: 14px; position: relative; line-height: 24px; height: 24px; display: inline-block; width: 100%; padding-left: 0px;text-align: center;}
#leyenda > ul > li.evolucion ul li span:before { content: ''; display: block; background: #fff; width: 20px; height: 20px; border-radius: 10px; margin: 0 auto; border: solid 1px #B1B1B1; box-sizing: border-box;-moz-box-sizing: border-box;}
#leyenda > ul > li.evolucion ul li span:after { content: ''; display: block; width: 18px; height: 18px; border-radius: 10px; margin: 0 auto; margin-top: -43px; box-sizing: border-box;-moz-box-sizing: border-box;}
#leyenda > ul > li.evolucion ul li.item0 span:after {opacity: 1; background: #EF6074}
#leyenda > ul > li.evolucion ul li.item1 span:after {opacity: 0.8;background: #EF6074}
#leyenda > ul > li.evolucion ul li.item2 span:after {opacity: 0.6;background: #EF6074}
#leyenda > ul > li.evolucion ul li.item3 span:after {opacity: 0.4;background: #EF6074}
#leyenda > ul > li.evolucion ul li.item4 span:after {opacity: 0.2;background: #EF6074}
#leyenda > ul > li.evolucion ul li.item5 span:after {opacity: 1; background: #fff}
#leyenda > ul > li.evolucion ul li.item6 span:after {opacity: 0.1;background: #97C350}
#leyenda > ul > li.evolucion ul li.item7 span:after {opacity: 0.2;background: #97C350}
#leyenda > ul > li.evolucion ul li.item8 span:after {opacity: 0.3;background: #97C350}
#leyenda > ul > li.evolucion ul li.item9 span:after {opacity: 0.4;background: #97C350}
#leyenda > ul > li.evolucion ul li.item10 span:after {opacity: 0.5;background: #97C350}
#leyenda > ul > li.evolucion ul li.item11 span:after {opacity: 0.6;background: #97C350}
#leyenda > ul > li.evolucion ul li.item12 span:after {opacity: 0.7;background: #97C350}
#leyenda > ul > li.evolucion ul li.item13 span:after {opacity: 0.8;background: #97C350}
#leyenda > ul > li.evolucion ul li.item14 span:after {opacity: 0.9;background: #97C350}
#leyenda > ul > li.evolucion ul li.item15 span:after {opacity: 1;background: #97C350}

#leyenda > ul > li.evolucion p {display: none;}
#leyenda > ul > li.evolucion.active p {display: block;}


/* Caja de datos
---------------------------------------------------*/
.info {width: 200px; box-sizing:border-box; -moz-box-sizing:border-box; padding: 10px; background: rgba(255,255,255,0.8); box-shadow: 5px 5px 20px 0px #B6B6B6;top: 50px;left: auto;right: -300px; transition: all 0.3s;}
.info.active {right: 0px;}
.info > div {
    width: 100%;
    float: left;
    font-size: 12px;
    line-height: 120%;
    color: #6D6D6D;
    padding-bottom: 7px;
}
.info > div .tit {
    font-family: RTVEfontB;
    font-size: 14px;
}
.info > div .dat, .info .anio .year{
    color: #DA384F;
    padding-top: 0px;
    font-family: RTVEfontB;
    font-size: 16px;
    padding-top: 2px;
}
.info > div .inf {
    font-size: 10px;
}
.info .flag {
    float: left;
    width: 15%;
    text-align: center;
    line-height: 26px;
    padding-bottom: 0;
}
.info .flag img {
    padding-top: 5px;
}
.info .pais {
    float: left;
    width: 85%;
    font-family: RTVEfontR;
    color: #9a9a9a;
    font-size: 26px;
    line-height: 26px;
    padding-bottom: 0;
}
.info .cerrar {
    margin-top: -38px;
    text-align: right;
}
.info .cerrar a {
    color: #ddd;
    padding: 7px 10px;
    display: inline-block;
    font-family: RTVEfontR;
    text-transform: lowercase;
    font-size: 16px;
    background: #4f4f4f;
    margin-right: -10px;
}
/* Tooltip
---------------------------------------------------*/
#tooltip { position:absolute; height:15px; width:auto; top:0px; left:0px;display:none; margin:0; padding-bottom:7px; color:#FFF; background:url(/css/informativos/crisisDeuda/mapa/css/i/fTooltip.png) no-repeat bottom center;}
#tooltip p { background:url(/css/informativos/crisisDeuda/mapa/css/i/tooltipIzq.png) no-repeat left top; padding:0 0 6px 5px;}
#tooltip p span { background:url(/css/informativos/crisisDeuda/mapa/css/i/tooltipDch.png) no-repeat right top; padding:0 5px 5px 0;}

    
/* Pie
---------------------------------------------------*/
#pie { top:100%; margin-top:-25px; left:365px; color:#999;}

/* Ajustes Accesibilidad
---------------------------------------------------*/
#modulo.no-js {height: auto;background: none; border: none;}
.no-js #leyenda,
.no-js #mapa,
.no-js #tooltip {display: none;}
.no-js .info {position: relative; width: 50%; float: left; right: auto; top: auto;height: 400px;}
.no-js .info .cerrar {display: none;}