body{ font-family: Verdana; color: #666; font-size: 13px; background: #706E6F url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgDAAAiAwERAAIRAQMRAf/EAFIAAQEBAQAAAAAAAAAAAAAAAAABAgcBAQEAAAAAAAAAAAAAAAAAAAABEAEBAQEBAAAAAAAAAAAAAAAAEQEhYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A5NECAQCAQAFBAUEBYBAIBAICgAAAAsAgEAgEwAAAAAFgEAgEAgKAAAABAWAQCAQAAAAAFgEwCAQCYCgAAAgNQCAQCAQAAAAAFAgAHAAUAAAEBoAAAAAAAAAFAAABQQAAAAGgAAAAAAAAICgAAAUACaABAAaAAABAWAQCaBAICgAAAAQFmgkBZoJAUFAAAAgE0CaBNAgKAAAAAoAAAAAAAAAsAgEAgEBQAAAAIBAIBAICgAAAAQFgJAWAQAAAAAFgEAgEAgKAAAACwCAQCAQAAAAAFAgEwCAQAAFABAamATAJgEwCYAAAAACgAQAAAAAAAGgAAAQFAAAABYABAOATAAAAAAaAAABAUAAAAFQAAAAIAABNABQAAAAAUEAAngNAAAAgLAJoEAmgQFAAAAAmgQCAQCA0AACAoIooAAICgAAAgLAIBAIBAUAAAACAsAgEAgAAAAALAIBAIBAUAAAACAQFgJAICgAAAAsAgEAgEBQAAAAICwEgEBYAAAAACwCAQCAQAAAAAFmAQCATAJgKAAAACgAAAAAAAAAoAAAAKAAACA0AAAAAAAAACgAAAAAAAAAooAAAAAAAACgAAAoICwEBQOgoAAAAEAmgQCATQf/Z) repeat-x; } h1,h2,h3,h4,h5{ font-family: 'Kaushan Script', cursive; font-weight: lighter; color: #888; } p { font-size: 14px; line-height: 18px; } .font-verdana{ font-family: Verdana !important; } .font-kausan{ font-family: 'Kaushan Script', cursive !important; } .font-garamond{ font-family: 'EB Garamond', serif !important; } .font-comic{ font-family: 'Architects Daughter', cursive !important; text-transform: uppercase; } #creditos { color: #b6b6b6; font-size: 10px; position: absolute; width: 90%; text-align: center; bottom: 15px; margin: 0 auto; } #creditos a { color: #b6b6b6; } div.bttn{ display: inline-block; padding: 8px 16px; background-color: #ED7F25; color: #fff; text-align: center; font-family: Verdana; font-size: 20px; border-radius: 2px; box-shadow: 0 0 3px rgba(0,0,0,.5); cursor: pointer; vertical-align: text-bottom; top: 0; left: 0; font-family: 'Kaushan Script', cursive !important; } span.bttn{ color: #ED7F25; font-weight: bold; text-decoration: underline; cursor: pointer; } .contexto{ position: absolute; width: 400px; } .contexto .context-bg-top{ /*width: 457px;*/ height: 40px; /* margin-left: 57px;*/ /* background-image: url('../images/contexto-arriba.png');*/ } .contexto .context-bg-middle{ /* width: 457px;*/ /*margin: -10px 0 -10px 57px;*/ /* margin-left: 57px;*/ /* background-image: url('../images/contexto-medio.png');*/ } .contexto .context-bg-middle .content{ padding: 1px 30px; } .contexto .context-bg-bottom{ /* width: 514px;*/ height: 40px; /* background-image: url('../images/contexto-abajo.png');*/ } .contexto .bttns{ position: relative; margin: 20px -30px; } .bttns .jugar{ position: absolute; left: 137px; top: 0; padding: 0; width:126px; height: 46px; background-image: url('../images/bg-jugar-bttn.png'); background-repeat: no-repeat; background-size: cover; white-space: nowrap; overflow: hidden; text-indent: 200px; } #comentarios-titulo{ position: absolute; top: 60px; left: 380px; width: 400px; height: 266px; } .layer .contexto p{ font-size: 20px; line-height: 24px; text-align: center; } .layer .contexto .bttns{ height: 30px; text-align: center; } #main{ position: relative; width: 862px; height: 650px; margin: 20px auto 0; } #main .bg-top, #main .bg-middle, #main .bg-bottom{ position: absolute; background-repeat: no-repeat; z-index: -1; } #main .bg-top{ top: 0; left: 5px; width: 854px; height: 84px; background-image: url('../images/fondo-content-top-light.png'); } #main .bg-middle{ top: 84px; left: 5px; width: 854px; height: 455px; /* 514px;*/ background-image: url('../images/fondo-content-middle.jpg'); } #main .bg-bottom{ top:538px; /*598px; */ left: 0; width: 862px; height: 113px; background-image: url('../images/fondo-content-bottom-light.png'); } #main .menu-button{ position: absolute; right: 40px; width: 135px; height: 103px; background-image: url('../images/boton-menu.png'); background-repeat: no-repeat; background-size: cover; cursor: pointer; z-index: 100; top: 10px; } #main .main-title{ width: 400px; height: 107px; color: #fff; font-family: 'Kaushan Script', cursive; text-align: center; text-shadow: -1px 0 3px #4471b5, 0 1px 3px #4471b5, 1px 0 3px #4471b5, 0 -1px 3px #4471b5; margin-left: 35px; position: absolute; padding-top: 40px; z-index: 100; } #main .main-title .title a{ display: block; height: 35px; font-size: 24px; color: #fff; text-decoration: none; } #main .main-title .sub-title{ font-size: 70px; margin-top: -20px; } #main .seccion{ position: relative; margin-top: 20px; width: 100%; /* height: 460px; */ } #visor{ position: absolute; width: 800px; height: 460px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background-color: white; margin: 20px auto 0; top: 90px; left: 35px; } /* Cargando página */ #cargando-pagina{ margin: 100px auto 0 auto; } #cargando-pagina .viera{ width: 274px; height: 318px; margin: 0 auto 50px auto; background-image: url('../images/precarga_viera.png'); } #cargando-pagina .cargando{ width: 42px; height: 42px; margin: 0 auto 30px auto; background-image: url('../images/cargando-pagina.gif'); } #cargando-pagina .cargando-text{ width: 274px; margin: 0 auto; text-align: center; color: white; } /* Formulario */ input[type="text"], textarea{ border: 1px solid #999; border-radius: 2px; padding: 6px; width: 274px; font-family: arial; } textarea{ height: 120px; } input[type="text"].error, input[type="password"].error, textarea.error{ background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8yNy8xMVt8jfAAAAAfdEVYdFNvZnR3YXJlAE1hY3JvbWVkaWEgRmlyZXdvcmtzIDi1aNJ4AAAAQUlEQVQImU3LMQrCQAAAwTkRIbX/OP//C8FC0uQnyaZJkWKrYcU/PpVKzPiJR2w3WCtPdRhjN8YbC15w379Xs3ICwI8pwGjvbLwAAAAASUVORK5CYII="); background-repeat:repeat-x; background-position:bottom; } .form{ padding: 6px; } .form .field{ margin: 25px 0 0 0; } .form .field label{ display: block; } /* Menu */ .menu-root{ position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); } .menu-root .inner{ position: absolute; width: 800px; height: 600px; } .menu-root .inner .cerrar{ position: absolute; width: 24px; height: 24px; top: 20px; right: 20px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDEvMTYvMTMgs/pDAAACoElEQVRIib2WvU7bUBTH/04iYaq6kpMhA5UrECHqYAnZzoJkZeAZPFaoa0AgXoCBKXMS5LFDlkgZ/QYMjCiK+Vh8HUC2IgzyUEHFYHO72JXrOoG2yEfy4Otzzu8c+XxchlKKl4RhGAZAEUAJABMdUwABgJC+wgkzT4dhmCKAdwA+7OzsfBYE4SPLsu8B4Onp6eHm5sbp9XqXAL4D+EEpDWc6o5T+8UTRcwBWB4PB4Wg0OvZ9/56mxPf9+9FodDwYDA4BrEY2xUyfGZASgKqu63uO49hp57PEcRxb1/U9AFUApbmgCLJkGEYvDMPwtZBYwjAMDcPoAVhKw5KQAoCqYRhHfwtIi2EYR1FmhSwQ1+l0doMgCGKDyWRy5Xne7UuOPc+7nUwmV/F7EARBp9PZBcD9BgJQrFQq9el0eh0rW5ZlsSzbVBSlSQgZz4IQQsaKojRZlm1almXF59Pp9LpSqdTj4viVTb/fP0hF6QmCsAGg3Gg0FNu2z9IQ27bPGo2GAqAsCMKG53le8nu/3z+IswIAhud5wTTNk6xoZVmWAJRrtdp6MjNCyLhWq60DKMuyLGVlbZrmCc/zQtzkpVartZnVJ1HUpiiKEgBekiTZdd1z13XPJUmSAfCiKEqEEDPL1vf9+1artRlVMxba7fZWlmIy+shxWVXVZVVVlwGUJUmS5/0/Siltt9tbABYAYLHb7W7PU6aUUtd1LzRNq0dtUNA0re667sVLdt1udxvAYmHmbHpjKQF4fnx8fJinZNu2qWna19PT0ztVVT8BwHA4vCOEfBkOh99WVlbEWbaR72cgx2LIp7xpXg0bgYocx6299QjiOG4NyRFE8xqqNM81QfNafClYVdf1/X9Y5ft4zSpPwN78cpLbdWsuKAH87wvkT91YDQYqvXdUAAAAAElFTkSuQmCC'); background-repeat: no-repeat; cursor: pointer; z-index: 2; } .menu-root .inner .circulo{ position: absolute; top: 97px; left: 196.5px; width: 407px; height: 406px; background-image: url('../images/circulo.png'); background-repeat: no-repeat; } .menu-root .inner .personajes{ position: absolute; width: 355px; height: 475px; top: 0; left: 223.5px; overflow: hidden; } .menu-root .inner .personajes .viera{ position: absolute; bottom: 0px; left: 0px; width: 353px; height: 446px; background-image: url('../images/viera_y_clavijo.png'); background-repeat: no-repeat; z-index: 2; } .menu-root .inner .personajes .nieto{ position: absolute; bottom: 43px; right: 3px; width: 241px; height: 298px; background-image: url('../images/nieto.png'); background-repeat: no-repeat; z-index: 1; } .menu-root .inner .botones{ position: absolute; top: 20px; left: 123px; width: 638px; height: 526px; z-index: 10; } .menu-root .inner .botones .bocata{ position: absolute; top: 8px; right: 8px; width: 225px; height: 159px; background-image: url('../images/bocadillo.png'); background-repeat: no-repeat; } .menu-root .inner .botones .bocata .text{ position: absolute; top: 35px; width: 190px; height: 100px; text-align: center; color: black; font-size: 16px; } .menu-root .inner .botones .boton{ display: block; position: absolute; width: 129px; height: 127px; background-image: url('../images/boton-menu-transparente.png'); background-repeat: no-repeat; background-size: cover; text-decoration: none; color: black; } .menu-root .inner .botones .boton.quien-fue{ top: 221px; left: 0px; } .menu-root .inner .botones .boton.cuando{ top: 334px; left: 39px; } .menu-root .inner .botones .boton.tebeo{ top: 397px; left: 148px; } .menu-root .inner .botones .boton.trivial{ top: 397px; left: 276px; } .menu-root .inner .botones .boton.palabra-secreta{ top: 334px; left: 386px; } .menu-root .inner .botones .boton.fondos-escritorio{ top: 220px; left: 425px; } .menu-root .inner .botones .boton span{ display: block; text-align: center; margin-top: 42%; cursor: pointer; color: black; font-size: 17px; font-weight: bolder; } .menu-root .inner .botones .boton.quien-fue span, .menu-root .inner .botones .boton.palabra-secreta span{ margin-top: 35%; } /* Componente de comentarios */ .comments-root{ height: 100%; overflow: hidden; } .comments-root .form{ position: relative; z-index: 10; box-shadow: 0 1px 6px rgba(0,0,0,.5); } .comments-root .form .field{ margin: 5px 0; } .comments-root .form input[type="text"], .comments-root .form textarea{ font-size: 12px; width: 94%; } .comments-root .form textarea{ height: 30px; resize: none; } .comments-root .form .bttn{ padding: 4px 10px; } .comments-root .comments{ position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden; } .comments-root .comments .slide{ margin-right: 11px; } .comments-root .comments .slide .comment{ position: relative; padding: 8px 6px 20px 6px; border-bottom: 1px solid #ddd; border-top: 1px solid #fff; } .comments-root .comments .slide .comment:first-child{ border-top: none; } .comments-root .comments .slide .comment .usuario{ font-weight: bold; float: left; margin-right: 6px; } .comments-root .comments .slide .comment .fecha{ position: absolute; left: 6px; bottom: 2px; font-size: 10px; color: #aaa; } .comments-root .comments .slide .comment .puntuacion{ position: absolute; right: 6px; bottom: 2px; font-size: 10px; color: #aaa; } .comments-root .comments .slide .more-comments-bttn{ padding: 8px; text-align: center; cursor: pointer; background-color: #ED7F25; color: #fff; } .comments-root .comments .slide .msg{ padding: 8px; text-align: center; color: #999; } /* Slider */ .slider-container{ position: relative; overflow: hidden; } .slider-container.slider-overflow{ } .slider-container .slider-guide{ position: absolute; top:0px; right:0px; width:9px; height:100%; border-left:1px solid #a8a8a8; border-right:1px solid #a8a8a8; background-color:#fff; } .slider-container .slider-control{ position: absolute; top:0; left:0px; width:9px; height:30px; background-color:#a8a8a8; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAYAAAAx8TU7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAB90RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMDEvMTJgnMr1AAAAH0lEQVQImWOsqqr6z4AGGE+cOIEp+P8/hhgDI720AwBEIBdPj1Yo8gAAAABJRU5ErkJggg=="); background-position:center; background-repeat:no-repeat; cursor: pointer; box-shadow:0 2px 2px #555; border-top:1px solid #bbb; } /* Pantalla de resumen y comentarios */ .layer .detalles{ position: absolute; width: 360px; top: 50px; left: 20px; } .resumen-text{ margin: 20px auto; background-color: rgba(255,255,255,.85); padding: 20px; border-radius: 8px; } .layer.resumen .resumen-text .puntuacion{ margin: 30px 0; font-size: 38px; text-align: center; } .layer.resumen .resumen-text .frase{ text-align: center; font-size: 22px; } .layer.resumen .buttons{ text-align: center; } #comentarios{ position: absolute; top: 50px; right: 10px; width: 400px; height: 360px; background-color: rgba(255,255,255,.85); border-radius: 8px; overflow: hidden; } /* REDES SOCIALES */ /****** Contenedor de botones facebook, twitter y Google ********/ #caja-botones { position: fixed; top:207px; bottom: 30%; left: auto; z-index: 2000; width: 85px; height: 245px; background-color:#f7fcfd; border: 1px solid #ffffff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-bottom: 0; right: 15px; } #caja-botones h4{ font-size: 11px; margin: 4px 0 3px 0; padding: 0; text-align: center; color: #0d72fb; font-weight: normal; background: none; letter-spacing: 0em; } .boton-facebook { float: left; display: block; margin: 3px 0 2px 7px; padding: 0; width: 80px; height: 70px; } .boton-twitter { float: left; display: block; width: 80px; height: 70px; margin: 4px 0 2px 9px; padding: 0; } .boton-google { float:left; display: block; text-align: center; margin: 2px 0 0 7px; padding: 0; width: 70px; height: 65px; } /* Eventos */ #main .main-title .sub-title{ font-size: 60px; margin-top: -30px; } #eventos{ position: absolute; top: 0px; left: 65px; right: 65px; height: 371px; overflow: hidden; } .degradado-linea-temporal{ background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHCAgICAgICAgICD/2wBDAQcHBw0MDRgQEBgaFREVGiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICD/wAARCAFzAAoDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECCP/EABYQAQEBAAAAAAAAAAAAAAAAAAARAf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDooAFABYCQGoBAagEBQIDQE0GoACwCA1AIDQEBqAA0ADQEBYCwFABoAFABoAFABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAf/9k='); background-repeat: repeat-x; } #eventos .event-list{ position: absolute; width: 20000px; height: 371px; white-space: nowrap; } #eventos .event-list .event{ position: relative; width: 667px; height: 371px; float: left; white-space: normal; overflow: hidden; } #eventos .event-list .event .year{ height: 32px; margin-bottom: 32px; margin-left: 120px; border-bottom: 1px solid #ED8025; } #eventos .event-list .event .year span{ position: relative; top:-14px; left: -120px; padding: 0 12px 0 22px; font-size: 55px; font-family: 'EB Garamond', serif; color: #ED8025; } #eventos .event-list .event .imagen{ float: left; margin: 0 14px; width: 240px; height: 298px; text-align: center; } #eventos .event-list .event .imagen a{ display: inline-block; padding: 6px; background-color: #fff; border: 1px solid #bbb; text-decoration: none; max-width: 226px; max-height: 284px; } #eventos .event-list .event .imagen a img{ max-width: 226px; max-height: 284px; border: none; } #eventos .event-list .event .titulo{ margin-bottom: 10px; margin-right: 25px; font-family: 'Kaushan Script', cursive; font-size: 22px; } #eventos .event-list .event .contenido{ font-size: 13px; margin-right: 25px; } #eventos .event-list .event .contexto{ position: absolute; right: 25px; bottom: 10px; width: 365px; padding: 6px; font-size: 13px; background-color: #eff2cf; color: #666; border-radius: 6px; } #eventos .event-list .event .contexto .t{ font-size: 15px; font-weight: bold; margin-bottom: 6px; } #eventos .event-list .event .contexto ul{ margin: 4px 0; } #eventos .event-list .event .contexto a{ color: #888; } #visor .sombra-lateral{ position: absolute; width: 21px; height: 371px; top: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAFCAYAAAAzOX64AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAABJSURBVCiR7c4xCoAwFAPQV6viLb3/DcQquvxC6exSMPDIkiEJO+5woeBsHF1XJfZ34wmQQm7MWLA2tq6rJfYZeTJI/qNfZ5ijL5o2FGmU+rD2AAAAAElFTkSuQmCC'); background-repeat: repeat-y; z-index: 5; } #visor .left-shadow{ background-position: 0 0; left: 65px; } #visor .right-shadow{ background-position: -21px 0; right: 65px; } #visor .left, #visor .right{ position: absolute; top: 0px; width: 65px; height: 371px; cursor: pointer; background-image: url('../images/flechas-linea-temporal.jpg'); background-repeat: no-repeat; } #visor .left{ left: 0px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; background-position: -65px 0; } #visor .right{ right: 0px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; background-position: 0 0; } /* Linea de tiempo */ #linea-tiempo{ position: absolute; left: 0px; right: 0px; bottom: 0; height: 89px; -webkit-border-bottom-right-radius: 12px; -webkit-border-bottom-left-radius: 12px; -moz-border-radius-bottomright: 12px; -moz-border-radius-bottomleft: 12px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; background-color: #e1e1e1; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAVCAYAAACOuSR+AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAA3SURBVBiVY2RgYIhnQAMsDAwMf4kW/INN8Dc2wV+UCf6ggUriBbH6CKvfiQ86DEFmBgYGRqIEAUiLElbzH4/IAAAAAElFTkSuQmCC'); background-repeat: repeat-x; background-position: top; } #linea-tiempo .legend{ position: absolute; width: 40px; text-align: center; bottom: 0; font-size: 16px; font-family: 'EB Garamond', serif; } #linea-tiempo .tm{ position: relative; top: 25px; height: 30px; width: 8px; float: left; } #linea-tiempo .tm.destacado{ top: 20px; height: 40px; cursor: pointer; z-index: 2; } #linea-tiempo .tm .line{ width: 1px; height:100%; margin: 0 auto; background-color: #999; } #linea-tiempo .tm.current .line{ background-color: #f07813; } #linea-tiempo .tm.destacado .line{ width: 6px; border-radius: 3px; } #linea-tiempo .tm .label{ position: absolute; top: 100%; left: -58px; width: 119px; height: 90px; z-index: 3; background-image: url('../images/marca-tiempo.png'); background-repeat: no-repeat; font-family: 'EB Garamond', serif; } #linea-tiempo .tm .label span{ display: block; margin-top: 24px; margin-left: 6px; text-align: center; font-size: 32px; color: #fff; } #main .main-title{ padding-top: 30px; }