.mapeate { position: absolute; top: 0em; left: 0em; width: 100%; height: 100%; color: #222; background-color: #EFEFEF; overflow: hidden; } .mapeate, .mapeate h1, .mapeate h2, .mapeate h3, .mapeate h4, .mapeate h5, .mapeate h6 { font-size: 1em; } .mapeate, .mapeate input, .mapeate textarea, .mapeate button { font-family: "Roboto"; } .mapeate [data-visible=false] { display: none !important; } .mapeate a[href] { text-decoration: none; } .mapeate button, .mapeate [type=button], .mapeate [type=reset], .mapeate [type=submit], .mapeate [rol=button], .mapeate [type=text], .mapeate [type=number], .mapeate [type=date], .mapeate [type=datetime], .mapeate [type=time], .mapeate textarea { font-size: 1em; border: 0.1em solid #D50F0A; box-sizing: border-box; border-radius: 0.4em; box-shadow: 0em 0em 0.4em inset #D50F0A; transition-property: color,box-shadow,border-color; transition-duration: 1s; outline: none; } .mapeate button:hover, .mapeate [type=button]:hover, .mapeate [type=reset]:hover, .mapeate [type=submit]:hover, .mapeate [rol=button]:hover, .mapeate [type=text]:hover, .mapeate [type=number]:hover, .mapeate [type=date]:hover, .mapeate [type=datetime]:hover, .mapeate [type=time]:hover, .mapeate textarea:hover { transition-duration: 0.2s; } .mapeate button:hover, .mapeate button:focus, .mapeate [type=button]:hover, .mapeate [type=button]:focus, .mapeate [type=reset]:hover, .mapeate [type=reset]:focus, .mapeate [type=submit]:hover, .mapeate [type=submit]:focus, .mapeate [rol=button]:hover, .mapeate [rol=button]:focus, .mapeate [type=text]:hover, .mapeate [type=text]:focus, .mapeate [type=number]:hover, .mapeate [type=number]:focus, .mapeate [type=date]:hover, .mapeate [type=date]:focus, .mapeate [type=datetime]:hover, .mapeate [type=datetime]:focus, .mapeate [type=time]:hover, .mapeate [type=time]:focus, .mapeate textarea:hover, .mapeate textarea:focus { border-color: #0A0FD5; box-shadow: 0em 0em 0.4em inset #0A0FD5; } .mapeate button[disabled], .mapeate button[readonly], .mapeate [type=button][disabled], .mapeate [type=button][readonly], .mapeate [type=reset][disabled], .mapeate [type=reset][readonly], .mapeate [type=submit][disabled], .mapeate [type=submit][readonly], .mapeate [rol=button][disabled], .mapeate [rol=button][readonly], .mapeate [type=text][disabled], .mapeate [type=text][readonly], .mapeate [type=number][disabled], .mapeate [type=number][readonly], .mapeate [type=date][disabled], .mapeate [type=date][readonly], .mapeate [type=datetime][disabled], .mapeate [type=datetime][readonly], .mapeate [type=time][disabled], .mapeate [type=time][readonly], .mapeate textarea[disabled], .mapeate textarea[readonly] { color: #898989; border-color: #898989; box-shadow: 0em 0em 0.4em inset #898989; } .mapeate [type=text], .mapeate [type=number], .mapeate [type=date], .mapeate [type=datetime], .mapeate [type=time], .mapeate textarea { color: #222; } .mapeate button, .mapeate [type=button], .mapeate [type=reset], .mapeate [type=submit], .mapeate [rol=button] { color: #D50F0A; background-color: #EFEFEF; cursor: pointer; } .mapeate button:hover, .mapeate [type=button]:hover, .mapeate [type=reset]:hover, .mapeate [type=submit]:hover, .mapeate [rol=button]:hover { color: #0A0FD5; } .mapeate a[href]:not([rol=button], button, input, textarea, path, g, circle), .mapeate [onclick]:not([rol=button], button, input, textarea, path, g, circle), .mapeate [onmousedown]:not([rol=button], button, input, textarea, path, g, circle), .mapeate [onmouseup]:not([rol=button], button, input, textarea, path, g, circle) { color: #D50F0A; cursor: pointer; transition-property: color; transition-duration: 1s; } .mapeate a[href]:not([rol=button], button, input, textarea, path, g, circle):hover, .mapeate [onclick]:not([rol=button], button, input, textarea, path, g, circle):hover, .mapeate [onmousedown]:not([rol=button], button, input, textarea, path, g, circle):hover, .mapeate [onmouseup]:not([rol=button], button, input, textarea, path, g, circle):hover { color: #0A0FD5; transition-duration: 0.2s; } .mapeate a[href]:not([rol=button], button, input, textarea, path, g, circle)[disabled], .mapeate [onclick]:not([rol=button], button, input, textarea, path, g, circle)[disabled], .mapeate [onmousedown]:not([rol=button], button, input, textarea, path, g, circle)[disabled], .mapeate [onmouseup]:not([rol=button], button, input, textarea, path, g, circle)[disabled] { color: #898989; } .mapeate label[for] { padding: 0em .3em; color: #222; border: 0.1em solid #222; box-shadow: 0em 0em 0.4em inset #898989; } .mapeate [data-icon]::before { margin: 0em .4em; font-family: "FA5FS"; font-size: 1em; vertical-align: middle; } .mapeate nav ul { margin: 0em; padding: 0em; list-style-type: none; } .mapeate .entrada { display: inline-block; } .mapeate .entrada > input, .mapeate .entrada > textarea, .mapeate .entrada > button { width: 100%; height: 100%; } .mapeate .grupo { display: table; } .mapeate .grupo > * { display: table-cell; box-sizing: border-box; } .mapeate .grupo * { border-radius: 0em; } .mapeate .grupo > :first-child, .mapeate .grupo > :first-child button, .mapeate .grupo > :first-child input, .mapeate .grupo > :first-child textarea, .mapeate .grupo > :first-child label { border-top-left-radius: 0.4em; border-bottom-left-radius: 0.4em; } .mapeate .grupo > :last-child, .mapeate .grupo > :last-child button, .mapeate .grupo > :last-child input, .mapeate .grupo > :last-child textarea, .mapeate .grupo > :last-child label { border-top-right-radius: 0.4em; border-bottom-right-radius: 0.4em; } .mapeate .posicionador { display: none; position: absolute; top: 0em; right: 0em; margin: .5em; } .mapeate .posicionador button { position: absolute; top: 0em; right: 0em; width: 1em; height: 1em; } .mapeate .posicionador button span { display: none; } .mapeate .posicionador .arriba-izquierda { margin-right: 1em; border-radius: 1em .2em 0em .2em; } .mapeate .posicionador .arriba-derecha { border-radius: .2em 1em .2em 0em; } .mapeate .posicionador .abajo-izquierda { margin-right: 1em; margin-top: 1em; border-radius: .2em 0em .2em 1em; } .mapeate .posicionador .abajo-derecha { margin-top: 1em; border-radius: 0em .2em 1em .2em; } .mapeate .imagen { display: inline-block; } .mapeate .imagen span { display: inline-block; width: 100%; height: 100%; background-position: center center; background-size: cover; } .mapeate header, .mapeate main, .mapeate footer { position: absolute; left: 0em; width: 100%; } .mapeate header { top: 0em; height: 4em; z-index: 20; } .mapeate main { top: 4em; bottom: 1em; overflow: auto; z-index: 10; } .mapeate footer { bottom: 0em; height: 1em; z-index: 30; } .mapeate h1 { position: absolute; top: 0em; left: 0em; margin: 0.08em 0.1em; font-size: 3.2em; } .mapeate h1 span { vertical-align: middle; } .mapeate h1 img { width: auto; height: 1em; } .mapeate h1 img + span { display: none; } .mapeate h1 span + span { font-size: .85em; } .mapeate .menu-principal { position: absolute; left: 50%; bottom: 0em; width: 30em; margin-left: -15em; text-align: center; } .mapeate .menu-principal li { display: inline-block; margin: 0em 1em; } .mapeate[data-menu-principal-completo=false] .menu-principal { left: 55%; } .mapeate[data-menu-principal-completo=false] .menu-principal li { margin: 0em .2em; } .mapeate[data-menu-principal-completo=false] .menu-principal [data-icon]::before { font-size: 2em; margin: 0em; } .mapeate[data-menu-principal-completo=false] .menu-principal span + span { display: none; } .mapeate .menu-links { position: absolute; top: 0em; right: 0em; margin: .1em; } .mapeate .menu-links li { display: inline-block; width: 1em; height: 1em; margin: 0em .2em; font-size: 2em; text-align: center; border-radius: .5em; } .mapeate .menu-links li > a { vertical-align: top; } .mapeate .menu-links li [data-i18n] { display: none; } .mapeate .menu-links [data-icon]::before { margin: 0em; } .mapeate .menu-mapas { position: absolute; top: 50%; left: 50%; margin: -18em -18em; width: 36em; height: 36em; } .mapeate .menu-mapas legend { margin-top: 1em; font-size: 1.5em; font-weight: 900; } .mapeate .menu-mapas .buscador label { padding-right: .4em; font-weight: 900; } .mapeate .menu-mapas .buscador label::after { content: ":"; } .mapeate .menu-mapas .buscador .entrada { width: 100%; } .mapeate .menu-mapas .buscador [data-icon] + span { display: none; } .mapeate .menu-mapas .buscador, .mapeate .menu-mapas .buscador .entrada { width: 100%; } .mapeate .menu-mapas nav { position: absolute; top: 6em; bottom: 0em; width: 100%; overflow: auto; } .mapeate .menu-mapas nav > ul > li { display: block; position: relative; width: 100%; min-height: 8em; margin: .5em 0em; overflow: hidden; border-radius: 1em; } .mapeate .menu-mapas nav > ul > li ul { display: inline-block; width: 25em; } .mapeate .menu-mapas .imagen { position: absolute; width: 8em; height: 100%; margin-right: 1em; opacity: .4; transition-duration: 1s; transition-property: opacity; } .mapeate .menu-mapas .imagen ~ * { display: block; margin-left: 8.5em; } .mapeate .menu-mapas .imagen + span > span { display: block; margin-bottom: .5em; font-size: 1.3em; font-weight: 900; } .mapeate .menu-mapas li:hover .imagen { opacity: 1; transition-duration: 0.2s; } .mapeate .menu-mapas img { display: none; } .mapeate .menu-mapas [data-icon] + [data-i18n] { font-weight: 900; } .mapeate .menu-mapas [data-icon] + [data-i18n]::after { content: ":"; } .mapeate .licencias { display: block; width: 100%; margin: .1em 0em; font-size: .85em; font-weight: 900; text-align: center; } .mapeate .licencias img { width: auto; height: 1em; } .mapeate .juego { margin: 0em; padding: 0em; border: none; overflow: hidden; } .mapeate .juego fieldset { position: absolute; } .mapeate .juego > legend { display: none; } .mapeate .juego, .mapeate .juego .mapa, .mapeate .juego .mapa > div { position: absolute; top: 0em; left: 0em; width: 100%; height: 100%; } .mapeate .juego .mapa { margin: 0em; padding: 0em; border: none; z-index: 10; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .mapeate .juego .mapa legend, .mapeate .juego .mapa legend + p { display: none; } .mapeate .juego .mapa [data-habilitado=false], .mapeate .juego .mapa [data-acertado=false] { cursor: default; } .mapeate .juego .mapa [data-habilitado=false] title, .mapeate .juego .mapa [data-acertado=false] title { display: none; } .mapeate .juego .mapa [data-habilitado=true][data-acertado=false], .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] circle, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] polygon, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false] polyline { cursor: pointer; fill: #e27f7d; transition-property: fill; transition-duration: 1s; } .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover circle, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover polygon, .mapeate .juego .mapa [data-habilitado=true][data-acertado=false]:hover polyline { fill: #7d7fe2; transition-duration: 0.2s; } .mapeate .juego .mapa [data-habilitado=true][data-acertado=true], .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] path, .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] circle, .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] polygon, .mapeate .juego .mapa [data-habilitado=true][data-acertado=true] polyline { fill: #78b378; } .mapeate .juego .mapa [data-nivel-1=false][data-nivel-1-ocultable=true] .nivel-1 { display: none; } .mapeate .juego .mapa [data-nivel-2=false][data-nivel-2-ocultable=true] .nivel-2 { display: none; } .mapeate .juego .mapa [data-nivel-3=false][data-nivel-3-ocultable=true] .nivel-3 { display: none; } .mapeate .juego .mapa [data-nivel-4=false][data-nivel-4-ocultable=true] .nivel-4 { display: none; } .mapeate .juego svg { position: absolute; top: 50%; left: 50%; } .mapeate .juego .puntos, .mapeate .juego .elemento, .mapeate .juego .objetivos, .mapeate .juego .consola, .mapeate .juego .temporizador { width: 10em; padding: .5em; background-color: #EFEFEF; border: 0.1em solid #898989; border-radius: 0.4em; box-shadow: 0em 0em 0.4em inset #898989, 0.1em 0.1em 0.2em #222; } .mapeate .juego .puntos legend, .mapeate .juego .elemento legend, .mapeate .juego .objetivos legend, .mapeate .juego .consola legend, .mapeate .juego .temporizador legend { float: left; width: 10em; height: 1.2em; margin: .4em 0em; font-weight: 900; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .mapeate .juego .puntos legend + p, .mapeate .juego .elemento legend + p, .mapeate .juego .objetivos legend + p, .mapeate .juego .consola legend + p, .mapeate .juego .temporizador legend + p { display: none; clear: both; } .mapeate .juego .puntos legend, .mapeate .juego .elemento legend, .mapeate .juego .objetivos legend, .mapeate .juego .consola legend, .mapeate .juego .temporizador legend { cursor: move; } .mapeate .juego .puntos { height: 3.5em; margin: 1em .5em; z-index: 30; } .mapeate .juego .elemento { height: 5.5em; margin: 7em .5em; z-index: 20; } .mapeate .juego .consola { display: none; width: 20em; height: 7em; margin: 1em 13em; z-index: 50; } .mapeate .juego .consola section { width: 100%; height: 6em; margin-top: 2.5em; background-color: #222; color: #EFEFEF; font-family: "Roboto Mono"; font-size: .85em; } .mapeate .juego .temporizador { right: 0em; margin-top: 1em; margin-right: 1em; z-index: 60; } .mapeate .juego .temporizador legend { text-align: right; } .mapeate .juego .elemento section, .mapeate .juego .puntos section, .mapeate .juego .temporizador section { font-weight: 900; text-align: center; } .mapeate .juego .objetivos { margin: 15em .5em; z-index: 40; } .mapeate .juego .objetivos img { width: auto; height: 1em; margin: 0em .3em; vertical-align: middle; } .mapeate .juego .objetivos nav { width: 100%; max-height: 10em; overflow-x: hidden; overflow-y: auto; } .mapeate .juego .objetivos li { padding: .3em .2em; border-radius: 0em; } .mapeate .juego .objetivos ul > :first-child { border-radius: 0.4em 0.4em 0em 0em; } .mapeate .juego .objetivos ul > :last-child { border-radius: 0em 0em 0.4em 0.4em; } .mapeate .juego .objetivos [data-seleccionado=true], .mapeate .juego .objetivos [data-seleccionado=true]:hover { color: #770; border-color: #770; box-shadow: 0em 0em 0.4em inset #770; } .mapeate .juego .objetivos li[data-ok=true], .mapeate .juego .objetivos li[data-ok=true]:hover { color: #070; border-color: #070; box-shadow: 0em 0em 0.4em inset #070; } .mapeate .niveles label { display: inline-block; margin: .1em .2em; padding: .2em .2em; cursor: pointer; color: #222; border: 0.1em solid #898989; border-radius: .4em; opacity: .5; box-shadow: 0em 0em 0.4em inset #898989; transition-property: border-color,box-shadow,opacity; transition-duration: 1s; } .mapeate .niveles label:hover { transition-duration: 0.2s; box-shadow: 0em 0em 0.4em inset #222; } .mapeate .niveles label[data-seleccionado=true] { opacity: 1; } .mapeate .niveles label [data-i18n], .mapeate .niveles [type=checkbox], .mapeate .niveles .nivel { display: none; } .mapeate .niveles .elementos > span + span:before { content: "["; } .mapeate .niveles .elementos > span + span:after { content: "]"; } .mapeate .dialogo { z-index: 9000; } .mapeate .dialogo, .mapeate .dialogo .fondo { position: absolute; top: 0em; left: 0em; width: 100%; height: 100%; overflow: hidden; } .mapeate .dialogo .fondo { background-color: rgba(34, 34, 34, 0.8); z-index: 10; } .mapeate .dialogo fieldset { position: absolute; top: 50%; left: 50%; height: 20em; margin-top: -10em; margin-left: -16em; z-index: 20; width: 32em; padding: .5em; background-color: #EFEFEF; border: 0.1em solid #898989; border-radius: 0.4em; box-shadow: 0em 0em 0.4em inset #898989, 0.1em 0.1em 0.2em #222; } .mapeate .dialogo fieldset legend { float: left; width: 32em; height: 1.2em; margin: .4em 0em; font-weight: 900; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .mapeate .dialogo fieldset legend + p { display: none; clear: both; } .mapeate .dialogo section { position: absolute; top: 2em; left: 0em; right: 0em; bottom: 2em; margin: 1em; overflow: auto; } .mapeate .dialogo .grupo { position: absolute; bottom: 0em; left: 0em; width: 100%; margin-bottom: .5em; text-align: center; } .mapeate .resumen-fin-juego span[data-i18n] { font-weight: 900; } .mapeate .resumen-fin-juego span[data-i18n]::after { content: ":"; } [data-clase=global] { /* * Below are Cascading Style Sheet (CSS) definitions in use in this file, * which allow easily changing how countries are displayed. * * The styles are applied in the order in which they are defined (and re-defined) here in the preamble. */ /* * Circles around small countries and territories * * Change opacity to 1 to display all circles */ /* * Smaller circles around subnational territories: Australian external territories, Chinese SARs, Dutch special municipalities, and French DOMs (overseas regions/departments) [but not French COMs (overseas collectivities)] * * Change opacity to 1 to display all circles */ /* * Land * (all land, as opposed to water, should belong to this class; in order to modify the coastline for land pieces with no borders on them a special class "coastxx" has been added below) */ /* * Styles for coastlines of islands and continents with no borders on them * (all of them should also belong to the class "landxx" - to allow for all land to be modified at once by refining "landxx" style's definition further down) */ /* * Styles for territories without permanent population (the largest of which is Antarctica) * * Change opacity to 0 to hide all territories */ /* * Circles around small countries without permanent population * * Change opacity to 1 to display all circles */ /* * Styles for territories with limited or no recognition * (all of them - including Taiwan - are overlays (i.e. duplicate layers) over their "host" countries, and so not showing them doesn't leave any gaps on the map) * * Change opacity to 1 to display all territories */ /* * Smaller circles around small territories with limited or no recognition * * Change opacity to 1 to display all circles */ /* * Oceans, seas, and large lakes */ /* * Reserved class names: * * .eu - for members of European Union * .eaeu - for members of Eurasian Economic Union */ /* * Additional style rules * * The following are examples of colouring countries. * These can be substituted with custom styles to colour the countries on the map. * * Colour a few countries: * * .gb, .au, .nc * { * fill: #ff0000; * } * * Colour a few small-country circles (along with the countries): * * .ms, .ky * { * opacity: 1; * fill: #ff0000; * } * */ } [data-clase=global] .circlexx { opacity: 1; fill: #c0c0c0; stroke: #000000; stroke-width: 0.5; } [data-clase=global] .subxx { opacity: 1; fill: #c0c0c0; stroke: #000000; stroke-width: 0.3; } [data-clase=global] .landxx { fill: #c0c0c0; stroke: #ffffff; stroke-width: 0.5; fill-rule: evenodd; } [data-clase=global] .coastxx { stroke-width: 0.2; } [data-clase=global] .antxx { opacity: 1; fill: #c0c0c0; } [data-clase=global] .noxx { opacity: 0; fill: #c0c0c0; stroke: #000000; stroke-width: 0.5; } [data-clase=global] .limitxx { opacity: 0; fill: #c0c0c0; stroke: #ffffff; stroke-width: 0.2; fill-rule: evenodd; } [data-clase=global] .unxx { opacity: 0; fill: #c0c0c0; stroke: #000000; stroke-width: 0.3; } [data-clase=global] .oceanxx { opacity: 1; fill: #ffffff; stroke: #000000; stroke-width: 0.5; } [data-clase=espana] { /*#pr-10, #pr-21, #pr-06{ fill:#c83737; fill-opacity : 1; stroke:#787878; stroke-width : 0.60093313000000004; stroke-linecap : round; stroke-linejoin : round; stroke-miterlimit : 4; stroke-dasharray : none; stroke-opacity : 1; /* stroke-dashoffset : 0.12020000000000000; * / }*/ } [data-clase=espana] polygon, [data-clase=espana] path, [data-clase=espana] polyline { fill: #dce3d8; fill-opacity: 1; stroke: #787878; stroke-width: 0.60093313000000004; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none; stroke-opacity: 1; } [data-clase=espana] #rectcanarias { fill: none; fill-rule: evenodd; stroke: #000000; stroke-width: 0.94800001; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-opacity: 1; } [data-clase=espana] #gcanrias { fill: #dce3d8; fill-opacity: 1; } /*# sourceMappingURL=Mapeate.css.map */