@import url(http://fonts.googleapis.com/css?family=Roboto);

#infografia-petroleo{position:relative;}
#infografia-petroleo .library{width:100%;position:relative;display:block;}
#infografia-petroleo .aGraph{display:inline-block;float:left;width:100%;}
#infografia-petroleo svg{overflow:visible;position:relative;}

#infografia-petroleo .aGraph{width:100%;position:relative;float:right;}
#infografia-petroleo .aGraph path{stroke:steelblue;stroke-width:2;fill:none;}
#infografia-petroleo .graphBrent{float:right;z-index:1;}
#infografia-petroleo .aGraph .brent path{stroke:#8d1f76;}
#infografia-petroleo .aGraph .gasolina path{stroke:#ae4446;}
#infografia-petroleo .aGraph .gasoleo path{stroke:#7baf4a;}

#infografia-petroleo .aGraph .x.axis line{stroke:transparent;stroke-opacity:1;stroke-width:20px;}
#infografia-petroleo .aGraph .x.axis line:hover{stroke:#E3E3E3;}
#infografia-petroleo .aGraph .x.axis g:last-child line{stroke-width:1px;}
#infografia-petroleo .aGraph .x.axis path{display:block;stroke:#d3d3d3;}
#infografia-petroleo .aGraph .y.axis line,#infografia-petroleo  .y.axis path{stroke:#d3d3d3;}

#infografia-petroleo .brent + g .circle01{stroke:#8d1f76;;stroke-width:2px;fill:transparent;}
#infografia-petroleo .gasoleo + g .circle01{stroke:#ae4446;stroke-width:2px;fill:transparent;}
#infografia-petroleo .circle02{stroke:#7caf48;stroke-width:2px;fill:transparent;}

#infografia-petroleo .brent + g .desc01{text-anchor:start !important;-ms-transform:-ms-rotate(0deg) -ms-translate(-30px,3px);/* IE 9 */
    -webkit-transform:-webkit-rotate(0deg) -webkit-translate(-30px,3px);/* Chrome, Safari, Opera */
    transform:rotate(0deg) translate(-30px,3px);fill:#8d1f76;}

#infografia-petroleo .x.axis g:first-child line,#infografia-petroleo .x.axis g:last-child line{stroke-width:4px;}
#infografia-petroleo .desc02{text-anchor:start !important;fill:#7baf4a;}
#infografia-petroleo .desc01,#infografia-petroleo .desc02{text-anchor:start !important;-ms-transform:-ms-rotate(0deg) -ms-translate(-30px,3px);/* IE 9 */
    -webkit-transform:-webkit-rotate(0deg) -webkit-translate(-30px,3px);/* Chrome, Safari, Opera */
    transform:rotate(0deg) translate(-30px,3px);}


#infografia-petroleo .x.axis text{-ms-transform:rotate(-90deg) translate(-2px,-9px);/* IE 9 */  -sand-transform:rotate(-90deg) translate(-2px,-9px);-webkit-transform:-webkit-rotate(-90deg) -webkit-translate(-2px,-9px);/* Chrome, Safari, Opera */    transform:rotate(-90deg) translate(-2px,-9px);text-anchor:end !important;font-family:'Roboto', sans-serif;font-size:14px;fill:#888;}
#infografia-petroleo .xbrent{background:#000;}
#infografia-petroleo .tick text{fill:#888;}
#infografia-petroleo .ybarril .tick text{fill:#222;}
#infografia-petroleo .axis{shape-rendering:crispEdges;}
#infografia-petroleo path.line{fill:none;stroke:#666;stroke-width:1.5px;}

/*menu superior*/
#infografia-petroleo #botonera, #infografia-petroleo .rangoPetroleo{float:left;display:inline-block;padding-bottom:2em;width:50%;}
#infografia-petroleo #botonera{text-align:left;}
#infografia-petroleo .rangoPetroleo{text-align:right;}
#infografia-petroleo #botonera li{display:inline;}
#infografia-petroleo #botonera span{padding:0.1em 0.5em;margin:0 0.2em;display:inline-block;border:1px solid #f6821f;color:#f6821f;}
#infografia-petroleo #botonera span:hover,#infografia-petroleo #botonera li.active span{background:#f6821f;color:white;cursor:pointer;}
#infografia-petroleo h3{padding-bottom:1em;}



#infografia-petroleo .rangoPetroleo > select{margin-right:0.5em;border-color:#f6821f;padding:0.1em 0.5em;}
#infografia-petroleo .aGraph + span{width:calc(100% - 5.9rem);display:block;padding:0.5em;text-align:center;float:left;margin-left:3em;position:relative;z-index:1;}
#infografia-petroleo #ejecutarRango{padding:0.4em;background:#f6821f;display:inline-block;cursor:pointer;}
#infografia-petroleo .linea{height:100px;width:1px;background:black;stroke:#666;stroke-width:1.5px;stroke:#000;stroke-opacity:0.1;stroke-width:20px;fill:#000;}
/*leyenda*/
#infografia-petroleo .leyenda{display:inline-block;float:left;width:100%;margin-top:1em;}
#infografia-petroleo .leyenda > li{display:inline-block;float:left;text-align:left;padding:1em;}
#infografia-petroleo .leyenda .ley_brend{width:30%;margin-right:3.3%;}
#infografia-petroleo .leyenda .ley_barri{width:66.66%;}
#infografia-petroleo .leyenda .ley_barri > span{width:50%;}
#infografia-petroleo .leyenda .ley_barri > p{width:50%;float:left;padding-left:6.25rem;}
#infografia-petroleo .leyenda > .ley_fuent{width:100%;padding:1em 0;}
#infografia-petroleo .leyenda span{width:100%;display:inline-block;float:left;padding-bottom:0.5em;}
#infografia-petroleo .leyenda span:before{content:'';display:inline-block;width:3em;height:1em;margin-right:5%;}
#infografia-petroleo .leyenda .ley_brend span:before{background:#8D1F76;}
#infografia-petroleo .leyenda .ley_brend p{padding-left:6.25rem;}
#infografia-petroleo .leyenda .ley_barri .tit_95:before{background:#AE4446;}
#infografia-petroleo .leyenda .ley_barri .tit_au:before{background:#7CAF48;}

#infografia-petroleo .leyenda .BoxNota{width:50%;float:right;padding-left: 6.25rem;}
#infografia-petroleo .leyenda .BoxNota span{font-weight:400;}
#infografia-petroleo .leyenda .BoxNota span:before{display:none;}
/**/

#infografia-petroleo .arrow-top{padding-left:1em;}
#infografia-petroleo .arrow-top,#infografia-petroleo .arrow-down1,#infografia-petroleo .arrow-down2{display:inline-block;padding-right:1em;line-height:2;}

#infografia-petroleo .arrow-top > span,#infografia-petroleo .arrow-down1 > span,#infografia-petroleo .arrow-down2 > span{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;display:inline-block;margin-right:0.2em;}
#infografia-petroleo .arrow-top > span{border-bottom:9px solid #8d1f76;}
#infografia-petroleo .arrow-down1 > span{border-top:9px solid #AE4446;}
#infografia-petroleo .arrow-down2 > span{border-top:9px solid #7caf48;}



#facebox{position:absolute;width:100%;z-index:1000;background:rgba(0,0,0,0.3);height:100%;top:0;left:0;}
.popup_layer .chapeaxu{box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-o-box-shadow:0px 0px 10px rgba(0,0,0,0.5);
-ms-box-shadow:0px 0px 10px rgba(0,0,0,0.5);}
.progFile .general{width:96%;}
#facebox .footer{position:absolute;right:0;top:0;}
.popup_layer{margin-top:25%;}
#infografia-petroleo table{display:none !important;}
.no-js table{display:block !important;}

.aviso{display:none;}
.aviso.active{top:0;display:block;position:absolute;width:70%;left:15%;text-align:left;font-size:200%;line-height:2;box-shadow:0px 0px 10px rgba(0,0,0,0.5);-webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.5);-moz-box-shadow:0px 0px 10px rgba(0,0,0,0.5);-o-box-shadow:0px 0px 10px rgba(0,0,0,0.5);-ms-box-shadow:0px 0px 10px rgba(0,0,0,0.5);padding:1em;box-sizing:border-box;-moz-box-sizing:border-box;background:#F0EFEF;color:rgb(76,76,76);}
.cerrar{width:1em;height:1em;background:url('/css/rtve.commons/i/parrilla/icoClose.png') no-repeat left top;position:absolute;display:block;top:0.2em;right:0.2em;border-radius:10em;cursor:pointer;}

/*fonts*/
#infografia-petroleo h3{text-align:center;font-size:200%;line-height:2;}
#infografia-petroleo #botonera, #infografia-petroleo .rangoPetroleo{font-size:90%;}
#infografia-petroleo #ejecutarRango, #infografia-petroleo .aGraph + span, #infografia-petroleo .rangoPetroleo > select, #infografia-petroleo #botonera span{font-size:140%;}
#infografia-petroleo #currentEvolucion{top:-1.05rem;}
#infografia-petroleo .leyenda > .ley_fuent p, #infografia-petroleo .leyenda span, #infografia-petroleo .leyenda p{font-size:150%;}
#infografia-petroleo .rangoPetroleo > span{font-size:160%;}
#infografia-petroleo text{font-size:14px;}
#infografia-petroleo .leyenda span{font-weight:500;}
#infografia-petroleo #ejecutarRango, #infografia-petroleo .leyenda li > span{text-transform:uppercase;}
#infografia-petroleo .leyenda span,#infografia-petroleo .rangoPetroleo > span,  #infografia-petroleo .leyenda p{color:#7e7e7e;}
#infografia-petroleo .rangoPetroleo > select{color:#f6821f;}
#infografia-petroleo #ejecutarRango{color:#fff;}
#infografia-petroleo #botonera span{line-height:1.4;}


/*colours*/
#infografia-petroleo .aGraph + span, #infografia-petroleo .leyenda li{background:#e3e3e3;}
#infografia-petroleo .leyenda li:last-child{background:none;}
#infografia-petroleo text{fill:#ae4446;}