body {background:#E9E9E9; color:#011545; width:100%; margin:0 auto; min-width:320px; font-family:Andale Mono, monospace;} #bodycont{ background:white; width:100%; max-width:970px; margin:0 auto; border:solid lightblue 0px;} header {background:white; width:100%; min-width:320px; max-width:970px; border-bottom:solid black 0px; /* height:85px; */ } header img {} header nav {height:20px; width:100%; text-align:center; display:inline-block;} header #line{background:darkred; width:100%; height:60px; position:relative; clear:both; background: rgb(203,96,179); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjY2I2MGIzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYWQxMjgzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RlNDdhYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(45deg, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } .nextline{width:99%; height:20px; text-align:right; font-weight:bold; color:white; position:relative; clear:both; padding-right:10px; background: rgb(203,96,179); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjY2I2MGIzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYWQxMjgzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RlNDdhYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(45deg, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ } .nextline a{color:white; text-decoration:none;} .nextline a:hover{color:lightgrey;} #lang{color:#0334A5; position:relative; clear:both; font-size:13px; text-align:center; border-bottom:1px solid grey;} #lang a{color:#0334A5; font-weight:bold; text-decoration:none;} #lang a:hover{color:#BE3F9F;} .centerator{width:100%; text-align:center;} .rightator{width:100%; text-align:right;} .leftator{width:100%; text-align:left;} #title{background:white; width:100%; display:inline-block; margin:10px 0px 10px 0px; text-align:center;} #title a {width:100%; color:black; text-decoration:none; float:center; font-size:1.5em; text-align:center; margin-right:10px;} #title img{display:inline-block; width:20%;} #backhead{background:white; width:100%; height:100px;} #menu{background:white; display:inline-block; color:lightblue; font-variant: small-caps;} #menu a{color:#0334A5; font-family:Andale Mono, monospace; display:inline-block; border-left:solid white 2px; padding:0px 10px 0px 10px; text-decoration:none; font-weight:bold;} #menu a:hover{color:#BE3F9F;} #mainsec {height:400px; width:100%; margin-top:50px} footer {font-family:Times, serif; clear:both; border-top:solid black 2px; background:#0334A5; height:350px; width:100%;} #footer {margin:100px auto 100px auto; width:100%; text-align:center; color:white; max-width:500px;} #legal {color:#155AFB; font-size:12px;} #marqueea {width:98%; height:500px; position:relative; bottom:5px; right:5px; background:#F5F5F5;} #newsright{width:100%;} #marqueea a{text-decoration:none;} #content {width: 100%; height:100%; display:inline-block; /* max-width:730px; */margin:0px 10px 10px 10px;} #content nav{width:100%; text-align:center;} #contitle{ background:#F5F5F5;font-size:1.5em; display:inline-block; font-variant: small-caps; width:94%; max-width:; color:#0334A5; text-align:center; clear:both; padding:5px 2px 5px 2px; } #way {width:80%; height:90px; background:#E9E9E9; display:inline-block; margin-top:10px;} #way2 {width:468px; height:60px; background:#E9E9E9; display:inline-block; margin:10px 0px 10px 0px;} #way3 {width:160px; height:600px; background:#E9E9E9; display:inline-block; margin-top:10px;} #datacont {width:70%; padding:15px; float:left;} #mright{width:25%; float:right;} #newsimg{width:99%; margin-bottom:10px; display:inline-block;} #navleft{background:#E9E9E9; display:inline-block; float:left; text-align:left; width:202px; height:100%; margin:0px 0px 10px 10px; padding:5px;} /* #content aside {width:160px; height:600px; background:#E9E9E9; display:inline-block;} */ #marquee1{display:none;/* cuando quiera usar las marquesinas css http://vagabundia.blogspot.com/2012/08/marquee-con-css3.html */} #marquee2{display:none;} .stars{color:#0334A5; font-size:1.5em; position:absolute; bottom:3px; right:3px;} #nextpage{display:inline-block; vertical-align:bottom; line-height:50px;} #nextpage:hover {color:#0334A5;} .contio:hover {color:#0334A5;} #video{width:100%; height:300px;} #news{text-align:left; white-space: pre-wrap; font-family:Times; display:block;} #news h1{font-size:2em; color:#0337B0;} .imbox{width:100%; position:relative; display:inline-block; margin-top:20px; margin-bottom:20px;} #imboxleft{width:55%; float:left;} #imboxright{width:40%; float:right; margin-left:5%;} #imboxleft .imboxtitle h3{font-size:0.5em; margin:10px 0px 10px 0px;} #imboxright .imboxtitle h3{font-size:0.5em; margin:10px 0px 10px 0px;} #urlshare{display:inline-block; width:90%; height:auto;} .newimg{width:100%;} .cornleft{position:absolute; top:0px; left:0px; width:55%; height:10%;} .cornright{position:absolute; bottom:0px; right:0px; width:55%; height:10%;} .ribbon{position:absolute; top:0px; right:10px; width:30px;} .imboxtitle{width:100%; height:35%; font-weight:bold; font-size:2em; font-variant: small-caps; position:absolute; bottom:0px; left:0px; z-index:20;} .imboxtitle h3{display:inline-block; position:relative; margin:25px 0px 25px 0px;} .curtain{width:100%; height:35%; background:white; opacity: 0.7; filter:Alpha(opacity=70); position:absolute; bottom:0px; left:0px; z-index:10;} .imbox :hover ~.curtain {height:100%; opacity: 0.4; filter:Alpha(opacity=20);} .curtain :hover {height:100%; opacity: 0.4; filter:Alpha(opacity=20);} .numart{color:black; position:absolute; top:25px; right:10px; font-size:15px; display:inline-block;} #curt{ width:237px; height:150px; position:absolute; z-index:5; margin:-5px 0px 0px -5px; background: -moz-linear-gradient(top, rgba(255,255,255,1) 2%, rgba(255,255,255,0.99) 3%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,rgba(255,255,255,1)), color-stop(3%,rgba(255,255,255,0.99)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,255,255,0.99) 3%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,255,255,0.99) 3%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 2%,rgba(255,255,255,0.99) 3%,rgba(255,255,255,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,1) 2%,rgba(255,255,255,0.99) 3%,rgba(255,255,255,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } /*MENU ARBOL LEFT*/ div#contenedor { width: 95%; margin: 20px auto;} div#contenedor a { color: #000; text-decoration: none; } ul#menu_arbol{list-style-type: none;} ul#menu_arbol ul { list-style-type: none; background: url(linea_vertical.gif) repeat-y; } ul#menu_arbol li { padding: 0 10px; background: url(nodo.gif) no-repeat; } ul#menu_arbol ul { margin-left: -10px; } /*MENU ARBOL LEFT* /*menuleft hide n show*/ .boton {cursor:pointer;} #boton1, #boton2, #boton3, #boton4, #boton5, #boton6, #boton7, #boton8, #boton9, #boton10, #boton11, #boton12, #boton13, #boton14, #boton15{display:none;} .licont1, .licont2, .licont3, .licont4, .licont5, .licont6, .licont7, .licont8, .licont9, .licont10, .licont11, .licont12, .licont13, .licont14, .licont15{display:none;} #boton1:checked ~ .licont1{display:block;} #boton2:checked ~ .licont2{display:block;} #boton3:checked ~ .licont3{display:block;} #boton4:checked ~ .licont4{display:block;} #boton5:checked ~ .licont5{display:block;} #boton6:checked ~ .licont6{display:block;} #boton7:checked ~ .licont7{display:block;} #boton8:checked ~ .licont8{display:block;} #boton9:checked ~ .licont9{display:block;} #boton10:checked ~ .licont10{display:block;} #boton11:checked ~ .licont11{display:block;} #boton12:checked ~ .licont12{display:block;} #boton13:checked ~ .licont13{display:block;} #boton14:checked ~ .licont14{display:block;} #boton15:checked ~ .licont15{display:block;} /*menuleft hide n show*/ .opart{display:inline-block; vertical-align:top; text-align:left; color:#0000EE; width:98%; position:relative; float:left; margin:10px 2px 0px 2px; padding:0px 0px 0px 0px; font-size:13px; } .opart h3{display:inline-block; font-variant: small-caps; background:#626262; width:100%; font-size:17px; text-align:center; color:#fff; position:relative; margin:0px;} .opart h3 b {} .opart b {font-weight:100;} .opart :hover{color:#BE3F9F;} .minimg{display:table-cell; width:50px; height:50px; position:relative; float:left; margin:5% 5px 5% 0px; border:1px solid lightgrey; border-top-left-radius: 4px; -moz-top-radius-topleft: 4px; border-top-right-radius: 4px; -moz-top-radius-topright: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; } @media screen and (min-width: 890px){ /* #video{width:100%;} */ /*ADAPTA SLIDER*/ @-webkit-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } @-moz-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } @keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } #slideshow {width:640px; height:310px;} #slideshow .container {width:640px; height:310px;} #slideshow img{width:640px; height:310px;} /*ADAPTA SLIDER*/ } @media screen and (max-width: 890px){ #backhead{height:150px;} #content aside{display:none;} #datacont {width:100%;} /*ADAPTA SLIDER*/ @-webkit-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } @-moz-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } @keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 640px; } } #slideshow {width:640px; height:310px;} #slideshow .container {width:640px; height:310px;} #slideshow img{width:640px; height:310px;} /*ADAPTA SLIDER*/ } @media screen and (max-width: 650px){ /* width: 300px; */ #navleft {width:35%;} #content {width:55%;} #way2 {background:blue; width:234px; height:60px;} /*ADAPTA SLIDER*/ /*TIMELINE ORANGE*/ @-webkit-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 400px; } } @-moz-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 400px; } } @keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 400px; } } #slideshow {width:400px; height:194px;} #slideshow .container {width:400px; height:194px;} #slideshow img{width:400px; height:194px;} /*ADAPTA SLIDER*/ } @media screen and (max-width: 440px){ #navleft {display:none;} #content {width:95%;} #way2 {background:green; width:234px; height:60px;} /*ADAPTA SLIDER*/ /*TIMELINE ORANGE*/ @-webkit-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 200px; } } @-moz-keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 200px; } } @keyframes timeliner { 0%, 25%, 50%, 75%, 100% { width: 0; } 20%, 45%, 70%, 90% { width: 200px; } } #slideshow {width:200px; height:97px;} #slideshow .container {width:200px; height:97px;} #slideshow img{width:200px; height:97px;} /*ADAPTA SLIDER*/ } @media screen and (max-width: 360px){ #navleft {display:none;} #content {width:95%;} #way2 {background:green; width:234px; height:60px;} } /* colores */ /* SLIDE SHOW DE GRAFICAS CENTRALES */ .slider{display:inline-block;} figure { display: inline-block; } a:hover, a:focus { border-bottom: 1px dashed #bc9d88; } #slideshow { position: relative; /* width:640px; ORIG height: 310px; ORIG */ padding: 15px; border: 1px solid #ddd; margin: 0 auto 2em; background: #FFF; background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD); -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2); -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2); box-shadow: 0 0 3px rgba(0,0,0, 0.2); } /* AGREGADO POR MI #slideshow img{width:300px; height:150px;}*/ /* AGREGADO POR MI */ #slideshow:before, #slideshow:after { position: absolute; display:block; bottom:16px; width: 50%; height: 20px; content: " "; background: rgba(0,0,0,0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7); -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7); box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7); z-index: -10; } #slideshow:before { left:0; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); } #slideshow:after { right:0; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); } #slideshow .commands { position: absolute; top: 45%; padding: 5px 13px; border-bottom:0; font-family: 'Amaranth', Arial, Verdana, sans-serif; font-size: 1.3em; color: #aaa; text-decoration:none; background-color: #eee; background-image: -webkit-linear-gradient(#fff,#ddd); background-image: -moz-linear-gradient(#fff,#ddd); background-image: -ms-linear-gradient(#fff,#ddd); background-image: -o-linear-gradient(#fff,#ddd); background-image: linear-gradient(#fff,#ddd); text-shadow: 0 0 1px #aaa; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } #slideshow .commands:after { position: absolute; bottom: 65px; left:-18px; content: attr(title); width: 50px; padding: 12px; background: #fff; font-family: Georgia, Times, serif; font-size: 14px; text-align:center; text-shadow: 0 0 0; opacity: 0; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4); -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4); box-shadow: 1px 1px 4px rgba(0,0,0,0.4); -webkit-transition: opacity 0.7s, bottom 0.7s; -moz-transition: opacity 0.7s, bottom 0.7s; transition: opacity 0.7s, bottom 0.7s; } #slideshow .commands:before { position: absolute; bottom: 55px; left: 13px; content: " "; width: 1px; height: 1px; border-top: 10px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; z-index:100; opacity: 0; -webkit-transition: opacity 0.7s, bottom 0.7s; -moz-transition: opacity 0.7s, bottom 0.7s; transition: opacity 0.7s, bottom 0.7s; } #slideshow .commands:hover:before { bottom: 35px; opacity: 1; } #slideshow .commands:hover:after { bottom: 45px; opacity: 1; } #slideshow .commands:focus { outline: 0; -webkit-transform: translate(1px, 2px); -moz-transform: translate(1px, 2px); -ms-transform: translate(1px, 2px); -o-transform: translate(1px, 2px); transform: translate(1px, 2px); } #slideshow .commands:active { -webkit-transform: translate(0, 1px); -moz-transform: translate(0, 1px); -ms-transform: translate(0, 1px); -o-transform: translate(0, 1px); transform: translate(0, 1px); } #slideshow .prev { left: -48px; } #slideshow .next { right: -48px; } #slideshow .prev, #slideshow .next { display:none; } #slideshow .prev, #slideshow .next { display:none; } #slideshow .commands1 { display: block; } /* play/pause commands */ .play_commands { position: absolute; width: 22px; height: 22px; top: 25px; right: 25px; z-index: 10; text-indent: -9999px; border:0 none; opacity: 0; -webkit-transition: opacity 1s, right 1s; -moz-transition: opacity 1s, right 1s; transition: opacity 1s, right 1s; } .play { right: 55px; cursor: default; } .pause:hover { border:0 none; } .play_commands:focus { outline:0; } #slideshow:hover .pause, #sl_play:target ~ #slideshow:hover .pause, .play_commands:focus { opacity: 1; } .sl_command:target ~ #slideshow:hover .pause, #sl_pause:target ~ #slideshow:hover .pause { opacity: 0; } .pause:after, .pause:before { position: absolute; display: block; content: " "; top:0; width:38%; height: 22px; background: #fff; background: rgba(255,255,255,0.5); } .pause:after { right:0; } .pause:before { left:0; } .play { width: 1px; height: 1px; border-top: 10px solid transparent; border-left: 20px solid #fff; border-left: 20px solid rgba(255,255,255,0.5); border-bottom: 10px solid transparent; opacity: 0; } .play:hover, .play:focus { border-bottom: 10px solid transparent; } #slideshow .container { position:relative; /* EL QUE HE PUESTO YO width:300px; height:150px;*/ /* EL QUE HE PUESTO YO */ /* width: 640px; ORIG height: 310px; ORIG */ overflow: hidden; } /* timeline base */ #slideshow .container:after { position:absolute; bottom: 0; left:0; content: " "; background: #999; /* EL QUE HE PUESTO YO el color naranja es este #CA6D29*/ width:100%; /* EL QUE HE PUESTO YO */ /* width: 100%; ORIG */ height: 1px; } @-webkit-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @-moz-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } #slideshow .slider { position: absolute; left:0; top:0; width: 400%; height: 310px; -webkit-animation: slider 32s infinite; -moz-animation: slider 32s infinite; animation: slider 32s infinite; } .sl_i:target ~ #slideshow .slider { -webkit-transition: left 1s; -moz-transition: left 1s; transition: left 1s; } .sl_command:target ~ #slideshow .slider { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; } #slideshow .c_slider { position: absolute; left:0; top:0; width: 400%; height: 310px; background: url(ejemplo/img/dummy-640x310-1.jpg) 0 0 no-repeat, url(ejemplo/img/dummy-640x310-2.jpg) 640px 0 no-repeat, url(ejemplo/img/dummy-640x310-3.jpg) 1280px 0 no-repeat, url(ejemplo/img/dummy-640x310-4.jpg) 1920px 0 no-repeat; } .sl_i:target ~ #slideshow .c_slider { -webkit-transition: background 1s; -moz-transition: background 1s; transition: background 1s; } #slideshow figure { position:relative; padding:0; margin:0; } @-webkit-keyframes figurer { 0%, 25%, 50%, 75%, 100% { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } @-moz-keyframes figurer { 0%, 25%, 50%, 75%, 100% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } @keyframes figurer { 0%, 25%, 50%, 75%, 100% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } #slideshow figure:after { position: absolute; display:block; content: " "; top:0; left:0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; -webkit-animation: figurer 32s infinite; -moz-animation: figurer 32s infinite; animation: figurer 32s infinite; } @-webkit-keyframes figcaptionner { 0%, 25%, 50%, 75%, 100% { bottom: -55px; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; } } @-moz-keyframes figcaptionner { 0%, 25%, 50%, 75%, 100% { bottom: -55px; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; } } @keyframes figcaptionner { 0%, 25%, 50%, 75%, 100% { bottom: -55px; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; } } #slideshow figcaption { position:absolute; padding: 20px 20px; margin:0; left:0; right:0; bottom: 5px; text-align:center; letter-spacing: 0.05em; word-spacing: 0.05em; font-family: Georgia, Times, serif; background: #000; background: rgba(255,255,255,0.7); border-top: 1px solid rgb(225,225,225); color: #555; text-shadow: -1px -1px 0 rgba(255,255,255,0.3); -webkit-animation: figcaptionner 32s infinite; -moz-animation: figcaptionner 32s infinite; animation: figcaptionner 32s infinite; } /*AQUI ESTABAN LOS TIMELINER NARANJA QUE HE METIDO EN ADAPTATIVE*/ #timeline { position: absolute; background: #999; bottom: 15px; left: 15px; height: 1px; background: rgb(214,98,13); background: rgba(214,98,13,.8); width: 0; -webkit-animation: timeliner 32s infinite; -moz-animation: timeliner 32s infinite; animation: timeliner 32s infinite; } /* dots styles */ .dots_commands { position: relative; top: 32px; padding:0; margin:0; text-align:center; } .dots_commands li { display:inline; padding:0; margin:0; list-style:none; } .dots_commands a { position: relative; display:inline-block; height:8px; width: 8px; margin: 0 5px; text-indent: -9999px; background: #fff; border-bottom:0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; z-index:25; } .dots_commands li + li a { z-index:10; } @-moz-keyframes dotser { 0%, 100% { opacity: 1; left: 0; } 20% { opacity: 1; left: 0; } 22% { opacity: 0; left: 0; } 23% { opacity: 0; left: 18px; } 25% { opacity: 1; left: 18px; } 45% { opacity: 1; left: 18px; } 47% { opacity: 0; left: 18px; } 48% { opacity: 0; left: 36px; } 50% { opacity: 1; left: 36px; } 70% { opacity: 1; left: 36px; } 72% { opacity: 0; left: 36px; } 73% { opacity: 0; left: 54px; } 75% { opacity: 1; left: 54px; } 95% { opacity: 1; left: 54px; } 97% { opacity: 0; left: 54px; } 98% { opacity: 0; left: 0; } } @-webkit-keyframes dotser { 0%, 100% { opacity: 1; left: 0; } 20% { opacity: 1; left: 0; } 22% { opacity: 0; left: 0; } 23% { opacity: 0; left: 18px; } 25% { opacity: 1; left: 18px; } 45% { opacity: 1; left: 18px; } 47% { opacity: 0; left: 18px; } 48% { opacity: 0; left: 36px; } 50% { opacity: 1; left: 36px; } 70% { opacity: 1; left: 36px; } 72% { opacity: 0; left: 36px; } 73% { opacity: 0; left: 54px; } 75% { opacity: 1; left: 54px; } 95% { opacity: 1; left: 54px; } 97% { opacity: 0; left: 54px; } 98% { opacity: 0; left: 0; } } @keyframes dotser { 0%, 100% { opacity: 1; left: 0; } 20% { opacity: 1; left: 0; } 22% { opacity: 0; left: 0; } 23% { opacity: 0; left: 18px; } 25% { opacity: 1; left: 18px; } 45% { opacity: 1; left: 18px; } 47% { opacity: 0; left: 18px; } 48% { opacity: 0; left: 36px; } 50% { opacity: 1; left: 36px; } 70% { opacity: 1; left: 36px; } 72% { opacity: 0; left: 36px; } 73% { opacity: 0; left: 54px; } 75% { opacity: 1; left: 54px; } 95% { opacity: 1; left: 54px; } 97% { opacity: 0; left: 54px; } 98% { opacity: 0; left: 0; } } .dots_commands li:first-child a:after, .dots_commands li:first-child a:before { position: absolute; top: 0; left: 0; content: " "; width: 8px; height: 8px; background: #bd9b83; z-index:20; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset; } .dots_commands li:first-child a:after { -webkit-animation: dotser 32s infinite; /* webkit can't animate pseudo-element =_= :L: */ -moz-animation: dotser 32s infinite; /* thanks moz ! :D */ animation: dotser 32s infinite; } .dots_commands li:first-child a:before { display:none; } /* need a stop ! */ /* actions when target ! */ .sl_command { display: none; } .sl_command:target ~ #slideshow .slider, .sl_command:target ~ #slideshow figure:after, .sl_command:target ~ #slideshow figcaption, .sl_command:target ~ #slideshow #timeline, .sl_command:target ~ #slideshow .dots_commands li:first-child a:after { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } #sl_play:target ~ #slideshow .slider, #sl_play:target ~ #slideshow figure:after, #sl_play:target ~ #slideshow figcaption, #sl_play:target ~ #slideshow #timeline, #sl_play:target ~ #slideshow .dots_commands li:first-child a:after { -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; } .sl_command:target ~ #slideshow .pause { opacity:0; } .sl_command:target ~ #slideshow .play { opacity:1; right: 25px; cursor: pointer; } #sl_play:target ~ #slideshow .pause { opacity:0; } #sl_play:target ~ #slideshow .play { opacity:0; right: 55px; cursor: default;} .sl_i:target ~ #slideshow .slider { visibility: hidden } .sl_i:target ~ #slideshow .slider figcaption { visibility: hidden } .sl_i:target ~ #slideshow .dots_commands li:first-child a:after { display:none; } .sl_i:target ~ #slideshow .dots_commands li:first-child a:before { display:block; }} #sl_i1:target ~ #slideshow .commands { display: none; } #sl_i1:target ~ #slideshow .commands1 { display: block; } #sl_i1:target ~ #slideshow .c_slider { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; } #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before { left:0; } #sl_i2:target ~ #slideshow .commands { display: none; } #sl_i2:target ~ #slideshow .commands2 { display: block; } #sl_i2:target ~ #slideshow .c_slider { background-position: -640px 0, 0 0, 640px 0, 1280px 0; } #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before { left:18px; } #sl_i3:target ~ #slideshow .commands { display: none; } #sl_i3:target ~ #slideshow .commands3 { display: block; } #sl_i3:target ~ #slideshow .c_slider { background-position: -1280px 0, -640px 0, 0 0, 640px 0; } #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before { left:36px; } #sl_i4:target ~ #slideshow .commands { display: none; } #sl_i4:target ~ #slideshow .commands4 { display: block; } #sl_i4:target ~ #slideshow .c_slider { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; } #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before { left:54px; } /* SLIDE SHOW DE GRAFICAS CENTRALES */