main.css

html {
  height: 100%;
}

body {
  font-family: fiftyShadesMock;
  height: 100%;
  margin: 0;
  padding: 0;
}

.outercontainer {
  min-height: 100%;
  position: relative;
}

@font-face {
  font-family: fiftyShadesMock;
  src: url(/fonts/texgyreschola.otf);
}

div.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 120px;
}

#banner {
  float: left;
  width: 316px;
  height: 163px;
}

#sitetitle {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 10px;
  margin-top: 5px;
}

#pagetitle {
  padding-top: 163px;
  margin-top: -50pt;
  padding-left: 316px; /* Account for banner */
  margin-left: 15px; /* and provide a margin */
}

#pagetitle h2 {
  font-size: 15pt;
}

.clear {
  clear: both;
}

a.title {
  text-align: right;
  text-decoration: none;
}

h1 {
  font-family: fiftyShadesMock;
  line-height: 1;
  margin: 0px;
  text-align: right;
  font-size: 40pt;
}

article {
  position: absolute;
  top: 165px;
  bottom: 70px;
  width: 90%;
  margin-left: 5%;
  margin-right: auto;
  padding-bottom: 60px;
  overflow: auto;
}

/* TODO: content w/ custom scrollbar */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  text-align: center
}

nav {
  display: inline-block;
  padding: 0;
  list-style-type: none;
}

nav li {
  float: left;
  list-style-type: none;
}

nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
}

.here a:after {
  content: " (you are here!)"
}

nav li.lastnav a {
  border-right: none
}

#lightswitch {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 8pt;
  height: 8pt;
}

.externallinks dt {
    float:left;
    clear: left;
    display: list-item;
    margin-left:20px;
}
.externallinks dd {
    font-style: italic;
    margin-left: 0.5em;
    float:left;
/*    padding-top:2px;*/
}

.externallinks dd:not(.emptydd):before {
    content: " - "
}

article div {
    float: top;
    clear: left;
    padding-top: 0.5em;
}