html {
    background: #aaa;
    font-family: sans-serif;
    height: 100%;
}

body {
    background: #f6f6f6;
    display: block;
    margin: 1em auto;
    border: 4px outset #000;
}

.nav {
    display: block;
    margin: 1em auto;
}

.nav > a {
    margin: 1em;
}

.main {
    margin: 16px;
}

.section {
    background: #e1e1e1;
    border: 4px #000 inset;
    border-radius: 2px;
    padding: 12px;
    margin: 0 0 16px 0;
}

#map { height: 400px; }

.toilet-attribute {
    margin: 0 0 3px 0;
}
.item-section {
    margin: 12px 0 0 0;
    border: 4px inset #aaa;
    padding: 8px;
}

#list-controller {
    padding: 16px;
    background: #bdffa4;
    border: 4px #000 outset;
}

#changelog-container, .changelog {
    padding: 8px 16px;
    margin: 8px;
    background: #ffd2a4;
    border: 4px #000 outset;
}

 .changelog  {
    background: #d2ffa4;
 }

.explain {
  padding: 3px;
  text-decoration: underline;
  font-style: italic;
  color: rgba(0, 0, 0, 0.75);
  text-decoration-style: dotted;
  cursor: help;
}

@media screen and (max-width: 800px) {
    body {
        width: 100%;
    };
}

@media screen and (min-width: 800px) {
    body {
        width: 800px;
    };
}