BODY { position: relative; background: black; margin: 0; padding: 0; }

ul { padding: 0 1em; margin-left: 1em; }
li { margin: 1em 0; }

div#links {position: absolute; top: 101px; left: 0; width: 166px; font: 16px Times New Roman, serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFF; background: #444;
   border-right: 5px solid #505050;}
div#links p {display: block; text-align: center; font: bold 1em sans-serif; 
   padding: 5px 10px; margin: 0 0 1px; border-width: 0; 
   text-decoration: none; color: #FFF; background: #666;
   border-right: 5px solid #505050;}
div#links a#first { font: 1em Copperplate Gothic Light; }
div#links a#second { font: 1em Comic Sans MS; }
div#links a#third { font: bold 1.5em Coronet, Brush Script MT; }
div#links a#fourth { font: 1em Copperplate Gothic Light; }
div#links a#fifth { font: 1em Arial Rounded MT Bold; }
div#links a#graphics { font: 1em Arial Rounded MT Bold; }
div#links a:hover {color: #111; background: #AAA;
   border-right: 5px double white;}

div#links a span {display: none;}
div#links a:hover span {display: block;
   position: absolute; top: 280px; left: 0; width: 125px;
   padding: 5px; margin: 10px; z-index: 100;
   color: #AAA; background: black;
   font: 12px Verdana, serif; text-align: center;}


div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BBB; background: #222222; 
   font: 15px Verdana, serif; padding: 10px; 
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content A:link, A:visited { color: #55F; text-decoration: none; }
div#content A:hover { color: yellow; background: black; text-decoration: none; }

div#content div.project {
  border: 1px solid maroon;
  margin: 10px;
}
div#content div.blurb {
  border: 1px solid green;
  margin: 10px;
}
div#content div.project td {
   color: #BBB; background: #222222; 
   font: 15px Verdana, serif; padding: 10px; 
 }

div#content div.projectimage {
  float: right;
  margin: 0 0 15px 15px;
  text-align: center;
}

div.toc {
    color: #C03; 
    font-size: 1em; 
    font-weight: bold; 
    background: #333;
    text-align: center; 
    vertical-align: middle; 
    padding: 5px;
}

#update { font-size: .667em; }
H1 {  
      color: #C03; 
      font-weight: bold; 
      font-size: 1.5em; 
      text-align: center; 
      margin: 0; 
      padding: 15px 0 5px; 
      background: #333; 
      vertical-align: middle; 
}

H2 { 
  color: #C03;
  font-weight: bold;
}

.popupbox {
  position: relative;
  z-index: 0;
}

.popupbox a {
  text-decoration: none;
}

.popupbox:hover {
  background-color: transparent;
  z-index: 50;
}

.popupbox span.collapsed {
  position: absolute;
  border: 1px solid green;
  font-size: 1.2em;
  color: #55f;
  background: #000;
  padding: 2px 5px;
  width: 12em;
  text-align: center;
}

.popupbox span.expanded {
  position: absolute;
  bottom: 11px;
  left: 11px;
  margin: 0;
  width: 20em;
  border: 1px dashed gray;
  visibility: hidden;
  text-decoration: none;
}

.popupbox:hover span.expanded {
  visibility: visible;
  display: block;
  padding: 10px 10px;
  background: #111;
  color: #fff;
}

.popupbox:hover span.expanded strong {
  font-weight: bold;
  text-decoration: underline;
}

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;

  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;

  padding: 1rem;

  color: #C03;
  background: #333;

  cursor: pointer;

  border-radius: 7px;
  transition: all 0.25s ease-out;
}

.lbl-toggle:hover {
  color: #7C5A0B;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: none;
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  background: rgba(22, 22, 22, .2);
  border-bottom: 3px solid rgba(51, 51, 51, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  border-right: 3px solid rgba(51, 51, 51, .45);
  border-left: 3px solid rgba(51, 51, 51, .45);
  padding: .5rem 1rem;
}


div.logo {
  display: block;
  position: relative;
  vertical-align: middle; 
}

div.logo img {
  float: left;
  padding: 10px;
}

hr {
    color: #555;
    background-color: #555;
    height: 3px;
    border: 0;
    width: 80%;
}