@import url(../bower_components/normalize.css/normalize.css);
.highlight {
  margin-bottom: 7px; }

/**
 * Syntax highlighting styles
 */
.highlight {
  background: #fff; }
  .highlight .c {
    color: #998;
    font-style: italic; }
  .highlight .err {
    color: #a61717;
    background-color: #e3d2d2; }
  .highlight .k {
    font-weight: bold; }
  .highlight .o {
    font-weight: bold; }
  .highlight .cm {
    color: #998;
    font-style: italic; }
  .highlight .cp {
    color: #999;
    font-weight: bold; }
  .highlight .c1 {
    color: #998;
    font-style: italic; }
  .highlight .cs {
    color: #999;
    font-weight: bold;
    font-style: italic; }
  .highlight .gd {
    color: #000;
    background-color: #fdd; }
  .highlight .gd .x {
    color: #000;
    background-color: #faa; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gr {
    color: #a00; }
  .highlight .gh {
    color: #999; }
  .highlight .gi {
    color: #000;
    background-color: #dfd; }
  .highlight .gi .x {
    color: #000;
    background-color: #afa; }
  .highlight .go {
    color: #888; }
  .highlight .gp {
    color: #555; }
  .highlight .gs {
    font-weight: bold; }
  .highlight .gu {
    color: #aaa; }
  .highlight .gt {
    color: #a00; }
  .highlight .kc {
    font-weight: bold; }
  .highlight .kd {
    font-weight: bold; }
  .highlight .kp {
    font-weight: bold; }
  .highlight .kr {
    font-weight: bold; }
  .highlight .kt {
    color: #458;
    font-weight: bold; }
  .highlight .m {
    color: #099; }
  .highlight .s {
    color: #d14; }
  .highlight .na {
    color: #008080; }
  .highlight .nb {
    color: #0086B3; }
  .highlight .nc {
    color: #458;
    font-weight: bold; }
  .highlight .no {
    color: #008080; }
  .highlight .ni {
    color: #800080; }
  .highlight .ne {
    color: #900;
    font-weight: bold; }
  .highlight .nf {
    color: #900;
    font-weight: bold; }
  .highlight .nn {
    color: #555; }
  .highlight .nt {
    color: #000080; }
  .highlight .nv {
    color: #008080; }
  .highlight .ow {
    font-weight: bold; }
  .highlight .w {
    color: #bbb; }
  .highlight .mf {
    color: #099; }
  .highlight .mh {
    color: #099; }
  .highlight .mi {
    color: #099; }
  .highlight .mo {
    color: #099; }
  .highlight .sb {
    color: #d14; }
  .highlight .sc {
    color: #d14; }
  .highlight .sd {
    color: #d14; }
  .highlight .s2 {
    color: #d14; }
  .highlight .se {
    color: #d14; }
  .highlight .sh {
    color: #d14; }
  .highlight .si {
    color: #d14; }
  .highlight .sx {
    color: #d14; }
  .highlight .sr {
    color: #009926; }
  .highlight .s1 {
    color: #d14; }
  .highlight .ss {
    color: #990073; }
  .highlight .bp {
    color: #999; }
  .highlight .vc {
    color: #008080; }
  .highlight .vg {
    color: #008080; }
  .highlight .vi {
    color: #008080; }
  .highlight .il {
    color: #099; }

table.colophon-typography {
  border: 1px solid #DEEEFC;
  width: 100%; }
  table.colophon-typography tr td:first-child {
    width: 20%;
    min-width: 8em; }
  table.colophon-typography td {
    text-align: left;
    padding: 0.493em; }
  table.colophon-typography tr + tr td {
    border-top: 1px solid #DEEEFC; }

.swatch {
  display: inline-block;
  clear: both; }

.swatch + .swatch {
  padding-left: 28px; }

.swatch {
  color: #778797; }

.swatch-colour {
  width: 128px;
  height: 64px;
  border-radius: 3px; }

.colophon-colours {
  overflow: hidden; }

.swatch-meta {
  padding-top: 0.889em;
  font-size: 0.889em; }

.colour-forlorn {
  background-color: #22D389; }

.colour-high-sky-blue {
  background-color: #FF3C00; }

.colour-oceano {
  background-color: #DEEEFC; }

.colour-dusky-fog {
  background-color: #778797; }

.colour-charcoal {
  background-color: #222; }

.site-header {
  background-color: #FFF;
  border-bottom: 1px solid #f6f6f6;
  padding: 0.5em 2em; }

body {
  font-family: "adelle-sans", sans-serif;
  font-size: 16px;
  background-color: #FFF;
  color: #222; }

a:link, a:visited {
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #a2a2a2; }

.site-header a:link, .site-header a:visited {
  color: #222;
  border-bottom: none; }

.site-nav {
  border-bottom: 1px solid #c7e2fa;
  background-color: #DEEEFC; }

.site-nav a:link, .site-nav a:visited {
  color: #778797; }

.site-footer {
  color: #778797; }

pre {
  background-color: white;
  border: 1px solid #81bef4;
  padding: 16px;
  overflow: auto; }

/* layout */
ul.plain, .post-list {
  margin: 0;
  padding: 0;
  list-style: none; }

ul.plain li {
  list-style: none; }

nav ul {
  margin: 0;
  padding: 0; }
  nav ul li {
    display: inline-block;
    margin: 0; }
    nav ul li a {
      display: block;
      line-height: 32.437px; }

.site-nav, .menu {
  padding: 14px 0; }
  .site-nav li a, .menu li a {
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1.1px;
    font-size: 0.889em; }
  .site-nav li + li, .menu li + li {
    margin-left: 32px; }

.site-header {
  overflow: hidden;
  line-height: 36px; }

.site-title {
  float: left; }
  .site-title img {
    display: inline-block;
    vertical-align: middle; }
  .site-title h1 {
    display: inline-block;
    margin: 0; }

.network {
  float: right;
  line-height: 36px; }

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

.container {
  width: 800px;
  margin: 0 auto; }

.site-footer {
  padding-top: 21px; }

html, body {
  height: 100%; }

html {
  overflow-y: scroll; }

.tag a:link, .tag a:visited {
  font-size: 90%;
  color: #9FC2D6;
  text-decoration: none;
  background-color: #f0f0f0;
  border-radius: 0.25em;
  padding: 0 0.5em;
  margin: 0 0.25em;
  display: inline-block; }

figure {
  margin: 0;
  position: relative;
  display: inline-block; }
  figure figcaption {
    position: absolute;
    bottom: 1.266em;
    color: #222;
    right: 0;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0 1em; }
    figure figcaption p {
      margin: 0;
      color: #fff; }

/* typography */
p, li {
  line-height: 1.802em;
  font-family: "adelle-sans",sans-serif;
  font-style: normal;
  font-weight: 300; }

p {
  margin: 1.266em 0; }

li {
  margin: 16px 0; }

.site-footer {
  text-align: center;
  font-size: 0.889em; }

figcaption {
  font-family: "Times New Roman", serif; }
  figcaption p {
    margin-top: 0; }

.post-excerpt p {
  margin: 16px 0 8px; }
.post-excerpt p:first-child {
  margin: 8px 0; }

.no-excerpt {
  margin-bottom: 0; }

h1 {
  font-size: 1.602em; }

h2 {
  font-size: 1.424em; }

h3 {
  font-size: 1.266em; }

h4 {
  font-size: 1.125em; }

h1, h2, h3, h4 {
  margin: 32px 0 16px; }

.post-group, .post-title, .page-title {
  margin-top: 32px;
  line-height: 32px; }

.post-list-title {
  margin-bottom: 8px; }

.post-list li + li .post-list-title {
  margin-top: 48px; }

.post-group ~ .post-group {
  margin-top: 32px; }

.network a {
  height: 32px;
  width: 32px;
  background-color: #222;
  border-radius: 16px;
  margin: 0;
  text-align: center; }

.network a svg path {
  fill: #fff; }

.network li + li a {
  margin-left: 8px; }

.network li {
  vertical-align: middle; }
.network .github {
  height: 32px;
  background-position: -0px -0px; }
.network .rss {
  height: 32px;
  background-position: -40px -0px; }
.network .twitter {
  height: 32px;
  background-position: -80px 0px; }

blockquote {
  margin: 0;
  font-style: italic;
  padding: 0.493em 1.266em;
  margin-left: -1.266em;
  margin-right: -1.266em;
  background-color: #f8f8f8; }

.menu {
  display: none; }

@media (max-width: 820px) {
  body {
    font-size: 13px; }

  .container {
    width: 100%;
    margin: 0;
    padding: 0 13px; }

  .site-nav {
    display: none; }

  .site-header {
    padding: 0.5em 0px; }

  .menu {
    display: block; }

  h1, h2, h3, h4 {
    margin: 1.424em 0 1.125em; }

  .post-group, .post-title, .page-title {
    margin-top: 1.424em;
    line-height: 1.424em; }

  .menu {
    padding: 0.493em 0; }

  .swatch {
    display: block; }

  .swatch-colour {
    width: 100%; }

  .swatch + .swatch {
    padding-left: 0;
    margin-top: 1em; } }
html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

.site-header .site-nav ul:after, .site-header:after, .main:after, .clearfix:after, .clearfix {
  display: block;
  clear: both;
  content: ''; }

/*----- Menu Outline -----*/
.menu-wrap {
  width: 100%;
  background-color: #DEEEFC; }

.menu {
  background-color: #DEEEFC;
  border-bottom: 1px solid #c7e2fa; }

.menu a {
  transition: all linear 0.15s; }

.menu a:link, .menu a:visited {
  color: #778797; }

.menu .arrow {
  font-size: 8px;
  line-height: 100%; }

/*----- Top Level -----*/
.menu > ul > li {
  position: relative; }

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
  z-index: 1;
  opacity: 1; }

.sub-menu {
  position: absolute;
  top: 100%;
  left: -40%;
  z-index: -1;
  opacity: 0;
  transition: opacity linear 0.15s;
  background: #DEEEFC;
  border-left: 1px solid #c7e2fa;
  border-bottom: 1px solid #c7e2fa;
  border-right: 1px solid #c7e2fa; }

.sub-menu li {
  display: block; }

.sub-menu li + li {
  margin: 0; }

.sub-menu li a {
  padding: 8px 32px; }

.sub-menu li a:hover {
  background: #DEEEFC; }

.post img {
  max-width: 100%; }

.post-listing {
  margin: 0;
  padding: 0;
  list-style: none; }
  .post-listing .post:after {
    display: block;
    height: 2.566em;
    content: '';
    border-bottom: 1px solid #f0f0f0; }

.post .tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block; }
  .post .tags li {
    display: inline-block; }

.post-content ul {
  margin: 0 0 16px 0;
  padding: 0 0 0 1em;
  list-style: disc; }

.post-meta {
  color: #919191;
  font-size: 0.889em; }
  .post-meta a:link, .post-meta a:visited, .post-meta a:active, .post-meta a:focus {
    color: #919191;
    border-bottom: none; }

.js .pagination {
  text-align: center; }
  .js .pagination .next {
    border: 1px solid #222;
    padding: 0.5em;
    display: inline-block;
    position: relative;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    background-color: #fafafa; }
  .js .pagination .stopped #circleG {
    display: none; }
  .js .pagination .stopped .circleG {
    animation-play-state: paused; }
  .js .pagination .stopped {
    background-color: #fff; }
  .js .pagination #circleG {
    width: 37.333333333333336px;
    display: inline-block;
    margin-top: -2px; }
  .js .pagination .circleG {
    float: left;
    height: 4px;
    margin-left: 2px;
    width: 4px;
    -moz-animation-name: bounce_circleG;
    -moz-animation-duration: 0.3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-border-radius: 2px;
    -webkit-animation-name: bounce_circleG;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-border-radius: 2px;
    -ms-animation-name: bounce_circleG;
    -ms-animation-duration: 0.3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: normal;
    -ms-border-radius: 2px;
    -o-animation-name: bounce_circleG;
    -o-animation-duration: 0.3s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: normal;
    -o-border-radius: 2px;
    animation-name: bounce_circleG;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    border-radius: 2px; }
  .js .pagination #circleG_1 {
    -moz-animation-delay: 0.06s;
    -webkit-animation-delay: 0.06s;
    -ms-animation-delay: 0.06s;
    -o-animation-delay: 0.06s;
    animation-delay: 0.06s; }
  .js .pagination #circleG_2 {
    -moz-animation-delay: 0.14s;
    -webkit-animation-delay: 0.14s;
    -ms-animation-delay: 0.14s;
    -o-animation-delay: 0.14s;
    animation-delay: 0.14s; }
  .js .pagination #circleG_3 {
    -moz-animation-delay: 0.18;
    -webkit-animation-delay: 0.18s;
    -ms-animation-delay: 0.18s;
    -o-animation-delay: 0.18s;
    animation-delay: 0.18s; }
@-moz-keyframes bounce_circleG {
  50% {
    background-color: #222222; } }
@-webkit-keyframes bounce_circleG {
  50% {
    background-color: #222222; } }
@-ms-keyframes bounce_circleG {
  50% {
    background-color: #222222; } }
@-o-keyframes bounce_circleG {
  50% {
    background-color: #222222; } }
@keyframes bounce_circleG {
  50% {
    background-color: #222222; } }
#disqus_thread {
  margin-top: 2.027em; }

.link {
  padding-bottom: 16px; }
  .link a {
    display: inline-block; }
    .link a h2 {
      margin-bottom: 0; }