/*
 * Mixins
 */
/*
 * Variables
 */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:600,400,400italic|Roboto+Mono);
/*
 * Components
 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

/*
 * Footer
 */
footer {
  text-align: center;
  padding: 3em 0; }

/*
 * Row and colum
 */
.row {
  margin-left: auto;
  margin-right: auto; }
  .row:after {
    content: "";
    display: table;
    clear: both; }
  .row .col {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    vertical-align: top;
    width: 100%; }
    .row .col.s1 {
      width: 8.3333333333%;
      margin-left: 0; }
    .row .col.s2 {
      width: 16.6666666667%;
      margin-left: 0; }
    .row .col.s3 {
      width: 25%;
      margin-left: 0; }
    .row .col.s4 {
      width: 33.3333333333%;
      margin-left: 0; }
    .row .col.s5 {
      width: 41.6666666667%;
      margin-left: 0; }
    .row .col.s6 {
      width: 50%;
      margin-left: 0; }
    .row .col.s7 {
      width: 58.3333333333%;
      margin-left: 0; }
    .row .col.s8 {
      width: 66.6666666667%;
      margin-left: 0; }
    .row .col.s9 {
      width: 75%;
      margin-left: 0; }
    .row .col.s10 {
      width: 83.3333333333%;
      margin-left: 0; }
    .row .col.s11 {
      width: 91.6666666667%;
      margin-left: 0; }
    .row .col.s12 {
      width: 100%;
      margin-left: 0; }
    .row .col.offset-s1 {
      margin-left: 8.3333333333%; }
    .row .col.offset-s2 {
      margin-left: 16.6666666667%; }
    .row .col.offset-s3 {
      margin-left: 25%; }
    .row .col.offset-s4 {
      margin-left: 33.3333333333%; }
    .row .col.offset-s5 {
      margin-left: 41.6666666667%; }
    .row .col.offset-s6 {
      margin-left: 50%; }
    .row .col.offset-s7 {
      margin-left: 58.3333333333%; }
    .row .col.offset-s8 {
      margin-left: 66.6666666667%; }
    .row .col.offset-s9 {
      margin-left: 75%; }
    .row .col.offset-s10 {
      margin-left: 83.3333333333%; }
    .row .col.offset-s11 {
      margin-left: 91.6666666667%; }
    .row .col.offset-s12 {
      margin-left: 100%; }
    @media only screen and (min-width: 600px) {
      .row .col.m1 {
        width: 8.3333333333%;
        margin-left: 0; }
      .row .col.m2 {
        width: 16.6666666667%;
        margin-left: 0; }
      .row .col.m3 {
        width: 25%;
        margin-left: 0; }
      .row .col.m4 {
        width: 33.3333333333%;
        margin-left: 0; }
      .row .col.m5 {
        width: 41.6666666667%;
        margin-left: 0; }
      .row .col.m6 {
        width: 50%;
        margin-left: 0; }
      .row .col.m7 {
        width: 58.3333333333%;
        margin-left: 0; }
      .row .col.m8 {
        width: 66.6666666667%;
        margin-left: 0; }
      .row .col.m9 {
        width: 75%;
        margin-left: 0; }
      .row .col.m10 {
        width: 83.3333333333%;
        margin-left: 0; }
      .row .col.m11 {
        width: 91.6666666667%;
        margin-left: 0; }
      .row .col.m12 {
        width: 100%;
        margin-left: 0; }
      .row .col.offset-m1 {
        margin-left: 8.3333333333%; }
      .row .col.offset-m2 {
        margin-left: 16.6666666667%; }
      .row .col.offset-m3 {
        margin-left: 25%; }
      .row .col.offset-m4 {
        margin-left: 33.3333333333%; }
      .row .col.offset-m5 {
        margin-left: 41.6666666667%; }
      .row .col.offset-m6 {
        margin-left: 50%; }
      .row .col.offset-m7 {
        margin-left: 58.3333333333%; }
      .row .col.offset-m8 {
        margin-left: 66.6666666667%; }
      .row .col.offset-m9 {
        margin-left: 75%; }
      .row .col.offset-m10 {
        margin-left: 83.3333333333%; }
      .row .col.offset-m11 {
        margin-left: 91.6666666667%; }
      .row .col.offset-m12 {
        margin-left: 100%; } }
    @media only screen and (min-width: 992px) {
      .row .col.l1 {
        width: 8.3333333333%;
        margin-left: 0; }
      .row .col.l2 {
        width: 16.6666666667%;
        margin-left: 0; }
      .row .col.l3 {
        width: 25%;
        margin-left: 0; }
      .row .col.l4 {
        width: 33.3333333333%;
        margin-left: 0; }
      .row .col.l5 {
        width: 41.6666666667%;
        margin-left: 0; }
      .row .col.l6 {
        width: 50%;
        margin-left: 0; }
      .row .col.l7 {
        width: 58.3333333333%;
        margin-left: 0; }
      .row .col.l8 {
        width: 66.6666666667%;
        margin-left: 0; }
      .row .col.l9 {
        width: 75%;
        margin-left: 0; }
      .row .col.l10 {
        width: 83.3333333333%;
        margin-left: 0; }
      .row .col.l11 {
        width: 91.6666666667%;
        margin-left: 0; }
      .row .col.l12 {
        width: 100%;
        margin-left: 0; }
      .row .col.offset-l1 {
        margin-left: 8.3333333333%; }
      .row .col.offset-l2 {
        margin-left: 16.6666666667%; }
      .row .col.offset-l3 {
        margin-left: 25%; }
      .row .col.offset-l4 {
        margin-left: 33.3333333333%; }
      .row .col.offset-l5 {
        margin-left: 41.6666666667%; }
      .row .col.offset-l6 {
        margin-left: 50%; }
      .row .col.offset-l7 {
        margin-left: 58.3333333333%; }
      .row .col.offset-l8 {
        margin-left: 66.6666666667%; }
      .row .col.offset-l9 {
        margin-left: 75%; }
      .row .col.offset-l10 {
        margin-left: 83.3333333333%; }
      .row .col.offset-l11 {
        margin-left: 91.6666666667%; }
      .row .col.offset-l12 {
        margin-left: 100%; } }

html {
  line-height: 1.5;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #202020;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px; }

a {
  text-decoration: none;
  color: #229963; }
  a:hover, a:focus {
    color: #5fdba3;
    text-decoration: none; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
  color: #202020; }
  h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus, h4 a:hover, h4 a:focus, h5 a:hover, h5 a:focus, h6 a:hover, h6 a:focus {
    color: #606060; }

h1 {
  font-size: 2rem;
  margin: 1rem 0 0.8rem 0; }

h2 {
  font-size: 1.75rem;
  margin: 0.875rem 0 0.7rem 0; }

h3 {
  font-size: 1.5rem;
  margin: 0.75rem 0 0.6rem 0; }

h4 {
  font-size: 1.25rem;
  margin: 0.625rem 0 0.5rem 0; }

h5 {
  font-size: 1.15rem;
  margin: 0.575rem 0 0.46rem 0; }

h6 {
  font-size: 1rem;
  margin: 0.5rem 0 0.4rem 0; }

p {
  margin: 1.2em 0; }

pre, code {
  font-family: "Roboto Mono", "Courier New", monospace;
  color: #525252;
  background-color: #f8f8f8;
  font-size: 12px; }

code {
  color: #e96900;
  border-radius: 2px;
  white-space: nowrap; }

pre {
  overflow: auto;
  display: block;
  padding: 1em;
  margin: 0 0 1em;
  line-height: 1.3875;
  word-break: break-all;
  word-wrap: break-word;
  border-radius: 0;
  font-weight: normal; }

pre code {
  background: transparent;
  white-space: pre;
  overflow: auto;
  word-wrap: normal;
  color: #525252; }
  pre code span {
    word-break: break-all; }

/*
 * Pages
 */
.table {
  display: table; }

.table-cell {
  display: table-cell; }

.table-middle {
  vertical-align: middle; }

.cover {
  background-color: #f5f5f5;
  position: fixed;
  text-align: center;
  width: 100%;
  min-height: 400px;
  padding: 30px 15px 20px;
  z-index: 1; }
  @media only screen and (min-width: 600px) {
    .cover {
      background-position: center;
      padding: 30px; } }
  @media only screen and (min-width: 992px) {
    .cover {
      height: 100vh;
      position: initial;
      width: 100%; } }

.cover-card {
  color: #202020;
  padding: 0 30px; }
  @media only screen and (min-width: 992px) {
    .cover-card {
      text-align: right;
      margin: 0 auto;
      padding: 0 0px 80px; } }

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none; }
  .nav-list .nav-item {
    display: inline-block;
    *display: inline;
    zoom: 1; }
    .nav-list .nav-item:after {
      content: '|'; }
    .nav-list .nav-item:last-child:after {
      content: ''; }
    .nav-list .nav-item a {
      margin-top: 1em;
      font-size: 85%;
      color: #8d7edc; }
      .nav-list .nav-item a:hover, .nav-list .nav-item a:focus {
        color: #bfb6eb; }

/*
 * Post listing
 */
.post-listing {
  background-color: #fff;
  position: absolute;
  top: 400px;
  z-index: 233;
  width: 100%;
  padding: 20px 20px 0; }
  @media only screen and (min-width: 600px) {
    .post-listing {
      padding: 50px 30px 0; } }
  @media only screen and (min-width: 992px) {
    .post-listing {
      height: 100vh;
      overflow-y: scroll;
      position: initial;
      top: 0; } }

/*
 * Posts
 */
section.post {
  margin-bottom: 60px;
  /*
   * Ensure gap after a post with text too short to reach past floating image
   */ }
  section.post:after {
    content: "";
    display: table;
    clear: both; }

.post-meta {
  font-size: 13px;
  font-weight: bold; }
  .post-meta .post-date {
    color: #8d7edc; }

/*
 * Remove scrollbar from right column
 */
body {
  margin: 0; }

/*
 * Post navigation
 */
a.previous {
  margin-right: 1em; }

a.next {
  margin-left: 1em; }

/*
 * Images and captions on screenshot page
 */
figure.screenshot {
  margin-bottom: 40px; }
  figure.screenshot figcaption {
    text-align: center; }
  figure.screenshot img {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto; }

/*
 * Images and tables in a post or on a page
 */
.page img, .post img {
  float: left;
  margin-right: 10px; }
.page table, .post table {
  width: auto;
  border-collapse: collapse; }
.page table, .page td, .page th, .post table, .post td, .post th {
  border: 1px solid #aaa; }
.page td, .page th, .post td, .post th {
  padding: 5px 10px; }
.page th, .post th {
  background-color: #eee; }

/*
 * Lists
 */
ul {
  clear: both; }