/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  color: inherit; }

body {
  font-family:  sans-serif; }

h1 {
  display: none; }

nav {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 4rem; }
  nav ul li a,
  nav ul li span {
    padding: 0.25rem;
    border: solid 1px;
    background-color: white;
    display: inline-block;
    font-family: "hk"; }
  nav ul .title {
    padding: 0.25rem 0 0.25rem 0;
    text-transform: uppercase;
    background-color: blue;
    color: white; }
  nav ul li:not(:last-of-type) {
    border-bottom: solid 0; }
  nav ul li:hover {
    cursor: pointer; }
  nav ul li:hover a,
  nav ul li:hover span,
  nav ul li.active a,
  nav ul li.active span {
    background-color: yellow; }
  nav ul li.in::after,
  nav ul li.bl::after {
    color: red;
    display: inline-block;
    padding: 0.25rem;
    border: solid 1px red;
    border-radius: 2rem;
    margin: 0 0 0 0.25rem;
    position: absolute;
    font-family: "ocrpbi"; }
  nav ul li.bl::after {
    content: "B"; }
  nav ul li.in::after {
    content: "I"; }

body {
  display: flex;
  flex-wrap: wrap; }

iframe {
  width: 40%;
  height: 100vh;
  display: block; }

pre {
  background-color: #eeee;
  padding: 0 0 0 4rem;
  width: 60%;
  overflow: scroll; }
  pre #maincode .high:hover,
  pre #maincode .high.active,
  pre #maincode .active {
    background-color: yellow;
    display: inline-block; }
    pre #maincode .high:hover .hljs-comment,
    pre #maincode .high.active .hljs-comment,
    pre #maincode .active .hljs-comment {
      display: inline-block; }
  pre #maincode .high:hover {
    cursor: pointer; }
  pre #maincode .hljs-tag, pre #maincode .hljs-subst {
    color: blue;
    font-family: "hk"; }
    pre #maincode .hljs-tag .hljs-attr, pre #maincode .hljs-subst .hljs-attr {
      color: red; }
    pre #maincode .hljs-tag .hljs-string, pre #maincode .hljs-subst .hljs-string {
      color: green; }
  pre #maincode .hljs-comment, pre #maincode .hljs-deletion, pre #maincode .hljs-meta {
    font-family: serif;
    font-style: italic;
    color: #595959; }
    #maincode span[data-id="doctype"] .hljs-meta{
    	color: blue;
    	font-style: normal;
    }