@charset 'UTF-8'; @import 'normalize.css'; @import 'main.css'; @import 'MarkerCluster.css' @import 'MarkerCluster.Default.css' :root { --icon-menu-on: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 8.467 8.467' height='32' width='32' fill='#fff'%3E%3Cpath d='M.21 5.263Q0 4.77 0 4.233q0-.537.21-1.025.212-.492.563-.843.356-.356.843-.567.492-.21 1.03-.21H5.82q.537 0 1.025.21.492.211.843.567.356.351.567.843.21.488.21 1.025 0 .538-.21 1.03-.211.488-.567.843-.35.351-.843.562-.488.211-1.025.211H2.646q-.538 0-1.03-.21-.487-.212-.843-.563-.351-.355-.562-.843zm4.788.922q.393.165.823.165.43 0 .818-.165.393-.17.678-.455.286-.285.45-.674.17-.393.17-.823 0-.43-.17-.818-.164-.393-.45-.678-.285-.285-.678-.45-.388-.17-.818-.17-.43 0-.823.17-.389.165-.674.45-.285.285-.455.678-.165.388-.165.818 0 .43.165.823.17.389.455.674.285.285.674.455z'/%3E%3C/svg%3E"); } @font-face { font-family: 'Amatic SC'; font-style: bold; font-weight: 700; src: local("Amatic SC"), local("AmaticSC"), url(/assets/fonts/Amatic_SC_700.woff2) format("woff2"), url(/assets/fonts/Amatic_SC_700.woff) format("woff"), url('/assets/fonts/Amatic_SC_700.ttf') format('truetype'); } @font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; src: local("Spectral"), local("Spectral Thin"), url(/assets/fonts/Spectral_300.woff2) format("woff2"), url(/assets/fonts/Spectral_300.woff) format("woff"), url('/assets/fonts/Spectral_300.ttf') format('truetype'); } body { margin: 0; font-family: 'Spectral'; font-size: 1em; } body > header > h1 { background: var(--icon-menu-on) left top no-repeat; margin: -0.1rem 0 -0.1rem 2rem; font-size: 2rem; } body > header > h1 span { line-height: 2rem; } h1, h2, h3, h4, h5, h6 { font-family: 'Amatic SC', sans-serif; font-weight: bold; } body > aside { z-index: 1000; } body > aside > nav > ul h3 { font-size: 1.6rem; position: relative; max-width: 100%; } body > aside > nav > ul h3 span { position: relative; border: 0.4rem solid #0009; border-style: solid; /* Chrome up to 61 #5 */ display: inline-block; float: right; width: 0.5rem; height: 0.5rem; top: 0.4rem; border-radius: 50%; } body > aside > nav > ul h3 span.selected { border-color: #fff0; background-color: #0009; } body > aside > nav > ul > li ul { display: none; } body > aside > nav > ul > li.active ul { display: block; } body > aside > nav > ul > li.active li.active { text-align: right; } li.on-map { font-weight: bold; } .marker.popup h3 { font-size: 1.6rem; } .marker.popup .change { border-top: 4px solid; padding-top: 0.2rem; } #b-toggle { position: absolute; top: 0; left: 0; padding: 1rem; } /** * Wallonie#Demain **/ #map { background: url(/assets/svg/wallonie-demain-logo.svg) center center/50% no-repeat fixed, #800000; background: #800000; color: #000000; } body > header { background-color: #008080; color: #000000; } body > header > h1 a:link span:first-child { padding-left: 10rem; color: transparent; } body > aside { background-color: #67736280; color: #791515; /*color: #8A580E;*/ } /* in order */ body > aside nav > ul > li#c-6 { background-color: #FF9200; } body > aside nav > ul > li#c-11 { background-color: #FFEB00; } body > aside nav > ul > li#c-10 { background-color: #7CFB80; } body > aside nav > ul > li#c-15 { background-color: #02ACCC; } body > aside nav > ul > li#c-7 { background-color: #97C000; } body > aside nav > ul > li#c-3 { background-color: #C6B117; } body > aside nav > ul > li#c-2 { background-color: #7E8A0E; } body > aside nav > ul > li#c-13 { background-color: #677362; } body > aside nav > ul > li#c-9 { background-color: #D3A9B5; } /* c-0 is non-existent, used as fallback */ .marker.popup .change.c-0 { border-color: #FFEB00; } .marker.popup .change.c-6 { border-color: #FF9200; } .marker.popup .change.c-11 { border-color: #FFEB00; } .marker.popup .change.c-10 { border-color: #7CFB80; } .marker.popup .change.c-15 { border-color: #02ACCC; } .marker.popup .change.c-7 { border-color: #97C000; } .marker.popup .change.c-3 { border-color: #C6B117; } .marker.popup .change.c-2 { border-color: #7E8A0E; } .marker.popup .change.c-13 { border-color: #677362; } .marker.popup .change.c-9 { border-color: #D3A9B5; } /** * Attribution **/ #attribution { width: 1.8rem; height: 2.4rem; background: #008080; border-radius: 50%; } #attribution h1 { margin: 0; text-align:center; line-height: 1.8; } #attribution.expanded { background: #cdd9c8c0; width: 20rem; height: auto; padding: 1rem; border-radius: 0; }