/* elements */
body {
  background-color: #edf1f3;
  color: #222;
}

a:link {
  color: #336699;
  text-decoration: none;
}

a:visited {
  color: #660000;
  text-decoration: none;
}

a:hover {
  color: #336699;
  text-decoration: underline;
}

dl dt {
  font-size: 15px;
}

dd {
  margin: 0 0 2em 0;
}

h1 {
  font-size: 26px;
}

h2 .post {
  font-size: 24px;
}

h3 .post {
  font-size: 22px;
}

hgroup h1 {
  font-size: 32px;
}

footer {
  border-top: 1px solid #222;
}


nav {
  padding-top: 1em;
}


/* classes */

.header {
  padding-top: 1em;
}

.intro {
  color: #666;
  font-size: 20pt;
  margin-bottom: 24pt;
}

.post {
  font-family: 'Times New Roman', 'Georgia', serif;
  font-size: 13pt;
  padding-bottom: 1em;
}

.post p {
  margin-bottom: 1.2em;
}

.post .signoff {
  font-size: 12pt;
  font-style: italic;
  text-align: right;
}

.post .title {
  font-size: 32pt;
}

.units-container h1 {
  padding-bottom: .2em;
}

/* responsive */
@media only screen and (max-width: 767px) {
  .units-container {
    padding: 0 20px 0 20px;
  }
}

@media only screen and (min-width: 768px) {
  .units-container {
    padding: 0 15%;
  }
}

@media only screen and (min-width: 1024px) {
  .units-container {
    padding: 0 30%;
  }
}