body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #444;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3; }

.container {
  background-color: #fff; }

.clearfix {
  clear: both; }

a {
  color: #444;
  text-decoration: underline; }

blockquote {
  border-left: 2px solid #444;
  padding-left: 1em; }

/*
pre {
  font-size: 1.2em;
}*/
nav {
  background: #f3f3f3; }

nav, footer {
  padding: 1.5em; }

nav header, footer {
  text-align: center; }

h1 {
  font-weight: lighter;
  font-size: 1.9em;
  margin: 0em;
  color: #000; }

nav ul {
  margin: .75em 0 0 0;
  padding: 0;
  list-style: none;
  text-align: center; }

nav ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 18%; }

nav ul li a {
  height: 26px;
  width: 26px;
  background-repeat: no-repeat;
  text-indent: -9000em;
  line-height: 100%;
  display: inline-block;
  content: ""; }

nav ul li a.twitter {
  background-image: url('/img/css/sprites.png');
  background-position: -13px -7px; }

nav ul li a.github {
  background-image: url('/img/css/sprites.png');
  background-position: -13px -163px; }

nav ul li a.rss {
  background-image: url('/img/css/sprites.png');
  background-position: -13px -215px; }

nav ul li a.search {
  background-image: url('/img/css/sprites.png');
  background-position: -13px -267px; }

nav ul li a.about {
  background-image: url('/img/css/sprites.png');
  background-position: -13px -316px; }

nav div.search-form {
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  max-height: 0;
  opacity: 0; }

nav div.search-form.on {
  margin-top: -1.7em;
  margin-bottom: .7em;
  max-height: 1em;
  opacity: 1; }

nav div.search-form input[type="search"] {
  width: 80%;
  border: 1px solid #444;
  font-size: 1.1em;
  line-height: 1.2em;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }

article header {
  margin: 1.5em; }

article header h2 {
  border-left: .25em solid #333;
  margin: 1em 0 .5em -.5em;
  padding-left: .5em; }

article header h2 a {
  text-decoration: none; }

article header em {
  padding-left: .5em;
  color: #888; }

article section {
  margin: 1.5em;
  overflow: auto; }

article.About img {
  float: right;
  margin: 0 1em 1em 1em; }

nav.pagination {
  background-color: #fff;
  margin: 0; }

nav.pagination a {
  display: inline-block;
  font-weight: bold;
  width: 49%; }

nav.pagination a.prev {
  float: left;
  text-align: left; }

nav.pagination a.next {
  float: right;
  text-align: right; }

pre {
  font-family: 'Source Code Pro', Consolas, Monaco, Menlo, Consolas, monospace;
  font-size: 1.2em;
  color: #777; }

.tri-down, .tri-up {
  position: relative;
  background: #f3f3f3; }

.tri-down {
  margin-bottom: 2em;
  border-bottom: 1px solid #999; }

.tri-up {
  margin-top: 2em;
  border-top: 1px solid #999; }

.tri-down:before, .tri-down:after, .tri-up:before, .tri-up:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent; }

.tri-down:before, .tri-down:after {
  border-bottom: 0; }

.tri-up:before, .tri-up:after {
  border-top: 0; }

.tri-down:before {
  bottom: -20px;
  left: 70px;
  border-top-color: #777;
  border-width: 20px; }

.tri-up:before {
  top: -20px;
  left: 70px;
  border-bottom-color: #777;
  border-width: 20px; }

.tri-down:after {
  bottom: -19px;
  left: 71px;
  border-top-color: #f3f3f3;
  border-width: 19px; }

.tri-up:after {
  top: -19px;
  left: 71px;
  border-bottom-color: #f3f3f3;
  border-width: 19px; }

@media (max-width: 450px) {
  article.About img {
    /*text-align: center;*/
    float: none; } }

@media (min-width: 768px) {
  nav {
    height: 5em; }
  nav.pagination {
    height: 2em; }
  nav header {
    float: left;
    margin: 2.5em 0 0 3em; }
  nav ul {
    width: 400px;
    float: right;
    margin: 2.8em 1.8em 0 0; }
  div.search-form {
    position: absolute;
    bottom: 1.5em;
    right: 4.5em;
    width: 350px; }
  div.search-form.on {
    bottom: 2em; }
  section#content {
    margin: 3em; } }
