html, body {
  height: 100%;
  color: #6e6e6e;
  background-color: #f0f0f0;
  font-family: HelveticaNeue, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased; }

h1 {
  color: #3d3d3d;
  font-size: 30px;
  font-family: HelveticaNeue-CondensedBold, "Helvetica Neue Condensed Bold", Helvetica, sans-serif;
  text-transform: uppercase; }

p {
  line-height: 1.2em; }

a {
  color: #9e3e09; }

pre {
  padding: 0 20px;
  margin-bottom: 20px;
  overflow-x: auto; }

pre, pre code {
  background-color: black !important; }

header {
  position: relative;
  margin: 0;
  height: 600px;
  background: url(../images/header.jpg) repeat-x;
  background-size: auto 100%; }
  header #info {
    position: absolute;
    bottom: 40px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.7em;
    text-align: center; }
    header #info p {
      margin: 0 40px; }
    header #info strong {
      color: white;
      font-weight: 700; }
    header #info a {
      color: #e56442;
      text-decoration: none; }
    header #info a:hover {
      border-bottom: 2px dotted #e56442; }
    header #info .amp {
      position: relative;
      top: 5px;
      left: -4px;
      font-family: 'Bonbon', cursive;
      font-size: 1.5em;
      font-style: none; }
  header #tweet {
    position: absolute;
    width: 550px;
    height: 110px;
    right: 80px;
    top: 80px;
    text-align: left; }
    header #tweet img {
      position: absolute;
      z-index: 1; }
    header #tweet .bubble {
      position: absolute;
      top: 15px;
      left: 80px;
      padding: 10px;
      padding-left: 40px;
      width: 400px;
      background-color: white;
      border-radius: 10px; }
      header #tweet .bubble a {
        text-decoration: none; }
      header #tweet .bubble .name, header #tweet .bubble .screen_name {
        font-weight: bold; }
      header #tweet .bubble .screen_name {
        text-decoration: underline; }
      header #tweet .bubble .name {
        color: black; }

ul {
  padding: 10px;
  padding-left: 30px;
  font-size: 13px;
  color: #5e5e5e;
  background-color: #e9e9e9;
  border-radius: 5px; }
  ul li {
    padding: 5px;
    list-style: circle; }

em {
  font-style: italic; }

#page {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto; }

#content {
  clear: both;
  margin: 20px; }

a.permalink {
  color: inherit;
  text-decoration: none; }

article {
  margin-bottom: 70px; }
  article time {
    padding: 10px;
    display: block;
    color: #222;
    font-size: 13px;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; }
  article time, article p {
    margin-bottom: 20px; }
  article.dev time {
    text-align: right;
    background-color: #e1dfdd; }
  article.design time {
    background-color: #cacfd3; }
  article img {
    width: 97%;
    border: 10px solid white;
    box-shadow: 1px 1px 5px 2px rgba(221, 221, 221, 0.46);
    -webkit-box-shadow: 1px 1px 5px 2px rgba(221, 221, 221, 0.46);
    -moz-box-shadow: 1px 1px 5px 2px rgba(221, 221, 221, 0.46); }
  article .more img {
    position: relative;
    top: 3px;
    left: -5px;
    width: auto;
    border: 0; }

.fold {
  display: none; }

.more {
  padding: 10px;
  border-top: 1px dashed #e8e8e8;
  font-weight: bold; }

#fullscreen {
  position: absolute;
  width: auto;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  z-index: 1000;
  overflow: auto;
  -webkit-box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.2);
  box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.2); }
  #fullscreen .close {
    position: fixed;
    top: 20px;
    left: -10px; }
  #fullscreen .fold {
    display: block; }
  #fullscreen .more {
    display: none; }

#flowed-content {
  margin: 20px; }
  #flowed-content .container {
    float: left;
    width: 50%; }
  #flowed-content section {
    padding: 20px; }
    #flowed-content section.dev {
      border-right: 1px solid #d4d4d4; }
      #flowed-content section.dev time {
        margin-right: -20px;
        padding-right: 30px;
        background: #e1dfdd url(../images/angles-left.png) no-repeat right center; }
    #flowed-content section.design {
      position: relative;
      left: -1px;
      border-left: 1px solid #e9e9e9; }
      #flowed-content section.design time {
        margin-left: -20px;
        padding-left: 30px;
        background: #cacfd3 url(../images/angles-right.png) no-repeat left center; }

@media screen and (max-width: 374px) {
  header img {
    width: 100%; } }
@media screen and (max-width: 740px) {
  #tweet {
    display: none; } }
@media screen and (max-width: 800px) {
  #page {
    left: 0 !important;
    overflow: auto !important; }

  #content {
    display: block !important; }

  #flowed-content, #fullscreen {
    display: none; } }
@media screen and (min-width: 800px) {
  #info {
    display: table;
    padding: 20px 40px; }
    #info .content {
      display: table-cell;
      width: 50%; } }

/*# sourceMappingURL=site.css.map */