@font-face {
  font-family: Open Sans;
  src: url(/OpenSans-Regular.ttf);
}

* {
  margin: 0;
  padding: 0;

  font-family: Open Sans;
}

body {
  background: #F5F8F7;
  margin: 0;
  color: #041E47;
}

a {
  color: #255CB3;
}

p {
  margin-bottom: 10px;
}

code {
  background-color: #fffaeb;
}

ul {
  margin-bottom: 10px;
}

ul li {
  margin-left: 30px;
}

.publication-date {
  display: block;
  font-size: 12px;
  margin-bottom: 20px;
}

pre {
  margin-top: 10px;
  margin-bottom: 10px;
}

h1, h2 {
  margin-top: 15px;
  margin-bottom: 5px;
}

#main {
  max-width: 760px;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
}

#blog {
  max-width: 760px;
  margin: 10px auto;
}

#content {
  max-width: 550px;
  order: 1;
}

#sidebar {
  order: 2;
  width: 25%;
  min-width: 210px;
  margin-top: 200px;
}

#nav {
  width: 100%;
  background: #FF994E;
  text-decoration: none;
}

#nav a {
  display: block;
  max-width: 800px;
  margin: auto;
  text-decoration: none;
  color: #041E47;
}

#blog-name {
  line-height: 60px;
  margin-left: 15px;
  font-size: 40px;
}

#blog-subtitle {
  line-height: 30px;
  margin-left: 15px;
  padding-bottom: 10px;
  font-size: 16px;
}

#footer {
  margin-top: 50px;
  text-align: center;
  width: 100%;
}

@media (min-width: 800px) {
  body {
    margin: 0;
  }

  #main {
    flex-direction: row;
  }

  #sidebar {
    margin-top: 20px;
    margin-left: 20px;
  }
}

/* syntax highlighting */
.CodeRay {
  background-color: #fffaeb;
  color: #414546;
  margin: 10px 0;
}
.CodeRay pre{margin:0}
span.CodeRay{white-space:pre;border:0;padding:2px}
table.CodeRay{border-collapse:collapse;width:100%;padding:2px}
table.CodeRay td{padding:2px 4px;vertical-align:top}
.CodeRay .line-numbers{background-color:#F5F8F7;color:#808080;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.CodeRay .line-numbers a{background-color:#F5F8F7;color:#808080;text-decoration:none}
.CodeRay .line-numbers a:target{color:#00f}
.CodeRay .line-numbers .highlighted{color:#f00}
.CodeRay .line-numbers .highlighted a{color:#f00}
.CodeRay span.line-numbers{padding:0 4px}
.CodeRay .line{display:block;float:left;width:100%}
.CodeRay .code{width:100%}
.CodeRay .debug{color:#fff;background:#00f}
.CodeRay .annotation{color:#007}
.CodeRay .attribute-name{color:#b48}
.CodeRay .attribute-value{color:#700}
.CodeRay .binary{color:#509}
.CodeRay .char .content{color:#d20}
.CodeRay .char .delimiter{color:#710}
.CodeRay .char{color:#d20}
.CodeRay .class{color:#2f9609;font-weight:bold}
.CodeRay .class-variable{color:#369}
.CodeRay .color{color:#0a0}
.CodeRay .comment{color:#777}
.CodeRay .comment .char{color:#444}
.CodeRay .comment .delimiter{color:#444}
.CodeRay .complex{color:#a08}
.CodeRay .constant{color:#036;font-weight:bold}
.CodeRay .decorator{color:#b0b}
.CodeRay .definition{color:#099;font-weight:bold}
.CodeRay .delimiter{color:#000}
.CodeRay .directive{color:#088;font-weight:bold}
.CodeRay .doc{color:#970}
.CodeRay .doc-string{color:#d42;font-weight:bold}
.CodeRay .doctype{color:#34b}
.CodeRay .entity{color:#800;font-weight:bold}
.CodeRay .error{color:#f00;background-color:#faa}
.CodeRay .escape{color:#666}
.CodeRay .exception{color:#c00;font-weight:bold}
.CodeRay .float{color:#60e}
.CodeRay .function{color:#06b;font-weight:bold}
.CodeRay .global-variable{color:#d70}
.CodeRay .hex{color:#02b}
.CodeRay .imaginary{color:#f00}
.CodeRay .include{color:#b44;font-weight:bold}
.CodeRay .inline{background-color:rgba(0,0,0,0.07);color:#000}
.CodeRay .inline-delimiter{font-weight:bold;color:#666}
.CodeRay .instance-variable{color:#33b}
.CodeRay .integer{color:#00d}
.CodeRay .key .char{color:#60f}
.CodeRay .key .delimiter{color:#404}
.CodeRay .key{color:#606}
.CodeRay .keyword{color:#080;font-weight:bold}
.CodeRay .label{color:#970;font-weight:bold}
.CodeRay .local-variable{color:#963}
.CodeRay .namespace{color:#707;font-weight:bold}
.CodeRay .octal{color:#40e}
.CodeRay .operator,.CodeRay .predefined{color:#369;font-weight:bold}
.CodeRay .predefined-constant{color:#069}
.CodeRay .predefined-type{color:#0a5;font-weight:bold}
.CodeRay .preprocessor{color:#579}
.CodeRay .pseudo-class{color:#00c;font-weight:bold}
.CodeRay .regexp .content{color:#808}
.CodeRay .regexp .delimiter{color:#404}
.CodeRay .regexp .modifier{color:#c2c}
.CodeRay .regexp{background-color:rgba(255,0,255,0.06)}
.CodeRay .reserved{color:#080;font-weight:bold}
.CodeRay .shell .content{color:#2b2}
.CodeRay .shell .delimiter{color:#161}
.CodeRay .shell{background-color:rgba(0,255,0,0.06)}
.CodeRay .string .char{color:#b0b}
.CodeRay .string .content{color:#d20}
.CodeRay .string .delimiter{color:#710}
.CodeRay .string .modifier{color:#e40}
.CodeRay .string{background-color:rgba(255,0,0,0.05)}
.CodeRay .symbol .content{color:#a60}
.CodeRay .symbol .delimiter{color:#630}
.CodeRay .symbol{color:#a60}
.CodeRay .tag{color:#070}
.CodeRay .type{color:#339;font-weight:bold}
.CodeRay .value{color:#088}
.CodeRay .variable{color:#037}
.CodeRay .insert{background:rgba(0,255,0,0.12)}
.CodeRay .delete{background:rgba(255,0,0,0.12)}
.CodeRay .change{color:#bbf;background:#007}
.CodeRay .head{color:#f8f;background:#505}
.CodeRay .head .filename{color:#fff}
.CodeRay .delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
.CodeRay .insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.CodeRay .insert .insert{color:#0c0;background:transparent;font-weight:bold}
.CodeRay .delete .delete{color:#c00;background:transparent;font-weight:bold}
.CodeRay .change .change{color:#88f}
.CodeRay .head .head{color:#f4f}