html > body {
    background-color: #333;
}

body > header  {
    background-color: #555;
    box-sizing: border-box;
    color: #fff;
    overflow: auto;
    padding: 1rem;
    width: 100%;
}

body > header h1 {
    float: left;
}

body > header form {
    display: none;
    float: right;
}

body > header form input[type=checkbox] {
    margin-right: 0.25rem;
}

body > header form label {
    margin-right: 0.75rem;
}

body > div[role=main] {
    position: relative;
}

body > div[role=main] > h2 {
    color: #eee;
    padding: 1rem;
}

div.test {
    background-color: #f0eeec;
}

div.test--nobg {
    background-color: transparent;
}

.index {
    background-color: #f0eeec;
}

.index ol {
    margin: 0;
    padding: 0;
}

.index li {
    display: inline-block;
    margin: 1rem 0;
}

.index li a {
    display: block;
    margin-bottom: 0.5rem;
    text-decoration: underline;
}

.index li iframe {
    height: 225px;
    width: 400px;
}

.children-bottom > * {
   vertical-align: bottom;
}

.children-middle > * {
   vertical-align: middle;
}

.children-top > * {
   vertical-align: top;
}

/* grids */

.center_content {
  margin: 0 auto;
}

.box {
  background-color: white;
  text-align: center;
  padding: 16px 0;
  margin: 16px 0 0 0;
  height: calc(33vh - 16px);
}

.left_hand_nav {
  height: 100vh;
}
