html {
  font-size:         12pt;
  background-color:  #013347;
  line-height:       1.5em;
  width: 100%;
}

h1 {
  font-family:  "ratio-display-1", sans-serif;
  color:        #013347;
}

a {
  color: #013388;
}

a:visited {
  color: #516388;
}

body {
  margin: 0;
  padding: 0;
}

body > header {
  margin:            0;
  border-right:      1px solid #A9B5CC;
  font-family:       "ratio-display-1", sans-serif;
  border-bottom:      1px solid #A9B5CC;
  background-color:  #F1EEE6;
  height:            3.5em;
}

body > header .header {
  max-width: 800px;
  xwidth: 80%;
  display: block;
  margin: 0 auto;
}


body > header a,
body > header a:visited {
  color:            #013347;
  text-decoration:  none;
}

body > header h1 {
  font-size:      3em;
  margin-top:     0.9em;
  margin-bottom:  0.8em;
  float: left;
  margin: 0;
  padding: 0;
  margin-top:5px;
}

body > header h1 a.blog-title {
  color: #bbb;
}

body > header nav {
  text-align:  left;
  font-size:   2em;
  margin: 0;
  padding: 0;
  height: 3.5em;
  float: right;
  padding-top: 0.5em;
}

body > header nav a,
body > header nav a:visited {
  color: #013347;
}

body > header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body > header nav li {
  margin-bottom: 0.2em;
  display: inline;
}

body > div {
  border-right:      1px solid #A9B5CC;
  background-color:  white;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 175em;
}

article > div.content {
  font-family: "Helvetica Neue", sans-serif;
  background: #FFF;
  padding-top: 3em;
  max-width: 800px;
  display: block;
  margin: 0 auto;
  width: 80%;
  padding: 0;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 1em;
}

article > header {
  background-color: #013347;
  padding-top: 4em;
  padding-bottom: 0em;
}

article > header > div {
  background-color: #013347;
  padding-top: 4em;
  padding-bottom: 1em;
  display:        block;
  margin:         0 auto;
  max-width: 800px;
  width: 80%;
}

article > header h1 {
  font-family:    "ff-tisa-web-pro-1", serif;
  font-size:      3em;
  margin-bottom:  0.2em;
  color:          white;
  margin-top:     -0.2em;
}

article div.date {
  font-size: 14px;
  color: #bbb;
  font-family: "Helvetica Neue", sans-serif;
}

article h2 {
  font-family: "Helvetica Neue", sans-serif;
  display:     block;
  margin:      auto;
  font-size:   1.4em;
  color:       #a61300;
  margin-top:  1.5em;
  margin-bottom:  1em;
}

article h3 {
  font-family: "Helvetica Neue", sans-serif;
  display:     block;
  margin:      auto;
  font-size:   1.4em;
  color:       #a61300;
  margin-top:  2em;
  margin-bottom:  1em;
}

article p {
  -webkit-hyphens: auto;
  margin-top: 1.0em;
  margin-bottom: 1.0em;
  min-width: 10%;
}

article p + p {
  text-indent: 0
}

article p code {
  line-height: 0.9em;
}

article pre {
  font-family: "Menlo", "Consolas", monospace;
  font-size:     0.9em;
  padding-left: 1em;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  background-color: #F4F4F4;
  margin-left: 0px;
  margin-right: 0px;
}

article pre code {
  font-family: "Menlo", "Consolas", monospace;
}

article pre.prettyprint {
  font-size:     0.9em;
  padding-left: 1em;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  background-color: #F4F4F4;
  border: none;
  margin-left: 0px;
  margin-right: 0px;
}

article pre.prettyprint code {
  font-family: "Menlo", "Consolas", monospace;
}

article footer {
  color:          #356386;
  font-weight:    bold;
  margin-top:     1em;
  margin-bottom:  3em;
  font-size:      1.8em;
  font-family:    "ff-tisa-web-pro-1";
  border-top:     1px solid #013347;
}

article ul, article ol {
  margin-top: 0;
  margin-bottom: 1.5em;
}

article ul p,
article ol p {
  margin-top: 0;
}

article img {
  float: right;
  margin-left: 10px;
}

article img.nofloat {
  float: none;
  display: block;
  margin: 0 auto;
  max-width: 600px;
}

article > div#disqus_thread {
  display:        block;
  margin:         0 auto;
  max-width: 800px;
  width: 80%;
}

body > div nav {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 2em;
  font-family: "open-sans-1", sans-serif;
}

body > div nav > header {
  margin-bottom: 3em;
  text-decoration: underline;
}

body > div nav .year {
  clear: both;
}

body > div nav .year h2 {
  font-family:    "ff-tisa-web-pro-1";
  font-size: 2em;
  display: block;
  float: left;
  width: 100px;
}

body > div nav .year .months {
  float: left;
  padding-top: 5px;
}

body > div nav .year .months .month {
  font-family:    "ff-tisa-web-pro-1";
  margin-bottom: 1.5em;
}

body > div nav .year .months .month .name {
  font-weight: bold;
}

@media only screen and (max-width: 800px) {
  body > header .header {
    padding-left: 5%;
    padding-right: 5%;
  }

  body > div nav .year h2 {
    float: none;
  }

  body > div nav .year .months {
    float: none;
  }

  body > div nav {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media only screen and (max-device-width: 480px) {
  body { 
    font-size: 0.9em;
  }

  body > div nav .year h2 {
    font-size: 2em;
    width: 100%;
    margin-bottom: 10px;
  }

  body > header .header {
    width: 90%;
  }

  article > header > div {
    width: 90%;
  }

  article > div.content {
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
  }

  article pre,
  article pre.prettyprint {
    font-size: 0.9em;
  }

  article img {
    width: 100%;
  }
}