body {
  margin: 0;
  padding: 0;
  font: 14pt/130% 'Source Sans Pro', sans-serif;
  color: #999999;
  background-color: #141414;
}
h1 { font-size: 130%; }
h2 { font-size: 115%; }
h3 { font-size: 110%; }
h4 { font-size: 100%; }
h5 { font-size: 95%; }
h6 { font-size: 90%; }
h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0.5em 0;
}
a {
  color: #268BD2;
  text-decoration: none;
}
a:hover, a:focus {
  color: #CB4B16;
  transition: color 250ms ease;
  transition: background-color 250ms ease;
}
input {
  font: inherit;
}

  table {
    display: inline-block;
    position: relative;
    margin: 0.5em 2em 0.5em 0;
    padding: 0;
    border-collapse: collapse;
    font: 12pt/120% 'Input Mono', 'Source Code Pro', Consolas, monospace;
    vertical-align: top;
  }
    tr.heading {
      color: #FFFFFF;
      background-color: #444444;
    }
    .fixie tr.heading {
      position: fixed;
    }
    tr:nth-child(even) {
      background-color: #252525;
    }
    td, th {
      margin: 0;
      padding: 1px 5px;
      border-left: solid 1px #FFFFFF;
      border-right: solid 1px #FFFFFF;
    }
    td:first-child, th:first-child {
      border-left: none;
    }
    td:last-child, th:last-child {
      border-right: none;
    }
    td[colspan] {
      text-align: center;
      background-color: #FFEECC;
    }
    td ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    [data-tt] {
      display: inline-block;
      position: relative;
    }
    [data-tt]:after {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9999;
      content: attr( data-tt );
      margin: 1em 0 0 0;
      padding: 0.25em 1em;
      visibility: hidden;
      border-radius: 2px;
      white-space: nowrap;
      color: #FFFFFF;
      background-color: rgba( 0, 0, 0, 0.8 );
      box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.5 );
      opacity: 0;
      transition: opacity 500ms ease;
    }
    [data-tt]:hover:after, [data-tt]:focus:after {
      visibility: visible;
      opacity: 1;
    }

    .center {
      text-align: center;
    }
    .right {
      text-align: right;
    }
    .extended {
      color: #586E75;
    }


.error {
  font-weight: bold;
  color: #CC0000;
}

.hovering {
  box-shadow: 0 1px 10px rgba( 92, 92, 92, 0.5 );
}

.vci li, .vci a {
  font: 13pt/120% 'Input Mono', 'Source Code Pro', Consolas, monospace;
}

#main {
  margin: 0;
  padding: 0 1em;
  border: none;
}
#extra {
  position: absolute;
  bottom: 0;
  margin: 0.5em 2em;
  padding: 0;
  font-size: 70%;
  color: #93A1A1;
  background-color: transparent;
}
  #extra p {
    margin: 0;
  }

#nav {
  position: relative;
  margin: 0;
  padding: 0.1em 0;
  /* border: solid 0.1em #FFFFFF20; */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-content: space-evenly;
  color: #EEEEEE;
  background-color: transparent;
}
  #nav a {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0.35em 1em;
    white-space: nowrap;
    transition: background-color 200ms ease;
    color: #CCCCCC;
  }
  #nav a:hover, #nav a:focus {
    color: #FFFFFF;
    background-color: #CB4B16A0;
  }
  #nav div {
    position: relative;
    margin: 0.2em 0.5em;
    padding: 0;
    border: solid 0.1em #FFFFFF20;
    overflow: hidden;
  }
  #nav h1 {
    position: absolute;
    top: -0.5em;
    left: 0.25em;
    font-size: 120%;
    font-weight: bold;
    letter-spacing: 0.4em;
    font-variant: small-caps;
    color: #FFFFFF20;
  }
  #nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #nav li {
    display: inline-block; /* makes all elements the same height */
    margin: 0;
    padding: 0;
  }

#hzfrm {
  position: absolute;
  margin: 0;
  padding: 0.25em 0.5em;
  background-color: rgba( 8, 38, 42, 0.85 );
}

@media only screen and ( min-resolution: 120dpi ),
       only screen and ( max-width: 720px ) {
  body {
    font-size: 18pt;
  }
}