@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 span {
  position: relative;
  border: 0.05rem solid #0009;
  border-style: solid; /* Chrome up to 61 #5 */
  display: inline-block;
  float: left;
  width: 0.6rem;
  height: 0.8rem;
  top: 0.5rem;
  margin-right: 0.5rem;
}
body > aside nav h3::after {
  position: relative;
  content: '\25bc';
  float: right;
  font-size: 10pt;
  top: 0.5rem;
}
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;
  margin-left: 1.5rem;
}

body > aside > nav > ul > li.active > ul > li::before {
  content: '';
  position: relative;
  border: 0.05rem solid #0009;
  border-style: solid; /* Chrome up to 61 #5 */
  display: inline-block;
  float: left;
  width: 0.6rem;
  height: 0.8rem;
  margin-right: 0.5rem;
}

body > aside > nav > ul > li.active > ul > li.active::before {
  content: '';
  position: relative;
  background-color: #0009;
  border: 0.05rem solid #0009;
  border-style: solid; /* Chrome up to 61 #5 */
  display: inline-block;
  float: left;
  width: 0.6rem;
  height: 0.8rem;
  margin-right: 0.5rem;
}

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;
}