* {
  margin: 0;
  padding: 0;
}

html, body { width: 100%; height: 100%; }

body { background-color: #FFF; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

h1 { margin-bottom: 1em; }
p { margin: 1em 0; }

a         { color: #00a; }
a:hover   { color: #000; }
a:visited { color: #a0a; }

/*>=----------------------------------------------------------=<*
 * Site
 *>=----------------------------------------------------------=<*/

.header {
  text-align: center;
  background-color: black;
}

ul.tabs {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: block;
  text-align: center;
}

ul.tabs li {
  display: inline-block;
  background: black;
  margin: 0.5em;
  margin-top: 0;
}

ul.tabs li a {
  color: white;
  text-decoration: none;
  padding: 0.5em 1em;
  font-weight: bold;
  display: block;
}

#mobile-banner {
  display: none;
}

.site {
  font-size: 115%;
  text-align: justify;
  width: 42em;
  margin: 1em auto 2em;
  line-height: 1.5em;
}

h1 {
  font-size: 24pt;
  padding-top: 2em;
  margin-bottom: 0;
  font-family: Georgia, serif;
  text-align: center;
}

h2.subtitle {
  text-align: center;
  font-family: Georgia, serif;
  padding-top: 1em;
  margin-bottom: 0;
}

hr {
  margin: 2em 25%;
}

/*>=----------------------------------------------------------=<*
 * Navigation
 *>=----------------------------------------------------------=<*/

.navigation {
  padding: 0 2em;
  margin-bottom: 1em;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  color: #999;
}

.navigation:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.navigation.bottom {
  margin-top: 1em;
  padding: 0 1em;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  background: #ddd;
}

.navigation .previous {
  float: left;
}

.navigation .next {
  float: right;
}

.navigation a {
  font-weight: normal;
}

/*>=----------------------------------------------------------=<*
 * Post index
 *>=----------------------------------------------------------=<*/

#home .introduction {
  border-bottom: 4px double black;
  padding: 0.5em 2em;
  font-size: 16pt;
}

#home .introduction p:first-child {
  font-weight: bold;
}

#home .conclusion {
  border-top: 4px double black;
  padding: 0.5em 2em;
  font-size: 16pt;
}

.badge.desktop {
  float: right;
  margin-left: 1em;
  margin-right: -3em;
}

.badge.mobile {
  display: none;
}

.posts {
  list-style-type: none;
  margin-bottom: 2em;
}

.posts li {
  margin-top: 1em;
  line-height: 1.75em;
}

.posts li h2 {
  font-family: Georgia, serif;
  font-size: 150%;
  color: black;
}

.posts li p {
  color: #555;
  font-style: italic;
  margin-left: 2em;
}

.posts .blurb {
  border: none;
  margin: 0em 2em;
}

/*>=----------------------------------------------------------=<*
 * Post formatting
 *>=----------------------------------------------------------=<*/

.chapter {
  color: #777;
}

.chapter:after {
  content: ". ";
  color: #777;
}

.audio {
  margin: 2em auto;
  text-align: center;
}

.audio audio {
  margin: 0;
  padding: 0;
}

.audio p {
  margin: 0;
  padding: 0;
}

.blurb {
  margin: 2em 2em 0 2em;
  color: #777;
  font-family: Tahoma, Geneva, sans-serif;
  font-style: italic;
  font-size: 0.9em;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.blurb p {
  margin: 1em;
}

.post {
  padding: 1em 0 0 0;
}

.post p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 16pt;
  line-height: 1.5em;
  text-indent: 2em;
}

.post p:first-child {
  text-indent: 0;
}

.post hr + p {
  text-indent: 0;
}

/* standard */
.post pre {
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .4em;
}

.post ul, .post ol {
  margin-left: 1.35em;
}

.post code {
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .2em;
}

.post pre code {
  border: none;
}

/* terminal */
.post pre.terminal {
  border: 1px solid #000;
  background-color: #333;
  color: #FFF;
}

.post pre.terminal code {
  background-color: #333;
}

.illustration {
  text-align: center;
  margin: 1em;
}

.figure {
  width: 100%;
  text-align: center;
  margin: 1em 0;
}

.illustration.right {
  float: right;
  margin-right: 0;
}

.illustration.left {
  float: left;
  margin-left: 0;
}

.illustration img {
  display: block;
}

.figure img {
  display: block;
  margin: 0 auto;
}

.the-end {
  text-align: center;
  margin-top: 4em;
  margin-bottom: 4em;
}

.figure a.action {
  display: inline-block;
  width: 4em;
  margin: 0 0.5em;
  padding: 0.5em 1em;
  background-color: #559;
  border: 1px solid black;
  border-bottom: none;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

p.caption {
  font-style: italic;
  color: #777;
  text-indent: 0;
  margin: 1em 0;
  padding: 0;
  font-size: 12pt;
  text-align: center;
}

.illustration .mobile, .figure .mobile {
  display: none;
}

canvas {
  display: block;
  margin: 0 auto;
  border: 1px solid black;
  width: 400px;
  height: 400px;
}

body.about .site {
  width: 32em;
  font-size: 16pt;
}

body.about h2 {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0.25em 0;
}

/* license */
.license-container {
  border-top: 1px solid black;
  background: #ccc;
  padding: 1em;
}

.license {
  width: 20em;
  text-align: center;
  margin: 1em auto;
  font-size: 10pt;
  color: #555;
  font-family: Tahoma, Geneva, sans-serif;
}