html, body { height: 100%; }
body { background-color: #fff; }

#wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -240px; }
.main { margin-bottom: 40px; }
@media (max-width: 767px) { .main { padding: 20px; margin: 0; width: auto; } }
@media (max-width: 560px) { .main { padding: 15px; margin: 0; width: auto; } }
@media (max-width: 560px) { 
  .notes_index .container { padding: 10px 0 15px 0; margin: 0; }
  .notes_index .main { padding-top: 20px; } 
  .notes_tags .container { padding: 10px 0 15px 0; margin: 0; }
  .notes_tags .main { padding-top: 20px; } 
}

#header { border-bottom: 1px solid #F3F3F3; height: 200px; width: 100%; }
#header .dark-logo { background: url(/images/figure53_dark_swoops.png) no-repeat center center; display: block; height: 140px; margin: 25px auto 0 auto; width: 140px; -webkit-transition: 0.25s ease-out; }
#header .dark-logo:hover { transform: rotate(180deg); -webkit-transform: rotate(180deg); transition-duration: 0.65s; -webkit-transition-duration: 0.65s; transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; }
#header .light-logo { background: url(/images/figure53_light_swoops.png) no-repeat center center; display: block; height: 140px; margin: 25px auto 0 auto; width: 140px; -webkit-transition: 0.25s ease-out; }
#header .light-logo:hover { transform: rotate(180deg); -webkit-transform: rotate(180deg); transition-duration: 0.65s; -webkit-transition-duration: 0.65s; transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #header .dark-logo { background-image: url(/images/figure53_dark_swoops@2x.png); background-size: 140px 140px; } }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #header .light-logo { background-image: url(/images/figure53_light_swoops@2x.png); background-size: 140px 140px; } }

.feed, .paging { font-size: 18px; padding: 10px 0 10px 95px; }

#push { height: 240px; }
#footer { background-color: #252525; height: 240px; margin: 0; padding: 0; text-align: left; }
#footer .about { padding: 20px; text-align: left; }
#footer .about h3 { color: #54534F; color: rgba(255, 255, 255, 0.4); font-family: "ff-din-web-1", "ff-din-web-2", 'Helvetica Neue', Helvetica, sans-serif; font-size: 28px; }
#footer .about p { color: #d8d8d8; font-family: "ff-din-web-1", "ff-din-web-2", 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; line-height: 1.6; }
#footer .footerlogo { background: #252525 url(/images/f53-logo-light.png) no-repeat center center; display: block; width: 230px; height: 70px; text-indent: -9999px; margin: 0 20px 0 20px; }
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #footer .footerlogo { background-image: url(/images/f53-logo-light@2x.png); background-size: 230px 70px; } }
@media (max-width: 767px) {
  #footer { height: auto; }
  #footer .container { width: auto; }
  #footer .about h3 { font-size: 24px; }
  #footer .footerlogo { padding: 0; margin: 25px 0 0 0; }
}
@media (max-width: 560px) {
  #footer .about { padding: 15px; }
  #footer .about h3 { font-size: 20px; }
  #footer .about p { font-size: 16px; }
}

h1 { color: #000; font-family: "ff-din-web-1", "ff-din-web-2", 'Helvetica Neue', Helvetica, sans-serif; font-size: 36px; font-weight: bold; margin: 0; padding: 0; text-align: center; }
@media (max-width: 560px) { h1 { font-size: 32px; } }
@media (max-width: 320px) { h1 { font-size: 28px; } }

.avatar { -moz-border-radius: 31px; -webkit-border-radius: 31px; border-radius: 31px; height: 62px; width: 62px; }

/* Post styles */
.byline { color: #B3B3B3; font-family: "ff-din-web-1", "ff-din-web-2", 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; margin-bottom: 30px; text-align: center; }
.post { font-family: "garvis-pro-1","garvis-pro-2",serif; }
.post h1, .post h2, .post h3, .post h4, .post h5, .post h6 { font-family: "ff-din-web-1", "ff-din-web-2", 'Helvetica Neue', Helvetica, sans-serif; font-weight: bold; margin: 0 0 10px 0; }
.post h1 { margin-bottom: 10px; }
.post h2 { font-size: 28px; }
.post h3 { font-size: 22px; }
.post h4 { font-size: 18px; }
.post p { font-size: 20px; line-height: 1.5; margin-bottom: 1em; }
.post blockquote { font-size: 20px; line-height: 1.5; margin-bottom: 1em; }
.post img .centered { margin: 0 auto; display: block; }
.post li { font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
.post header { height: auto; }
#author { border-top: 1px solid #F3F3F3; margin: 0 auto; padding-top: 10px; max-width: 440px; }
#author p { color: #333; font-family: "ff-din-web-1", "ff-din-web-2", 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; margin-left: 72px; overflow: hidden; padding-top: 5px; }
#author .avatar { float: left; }
#author .separator { color:#B3B3B3; }
#author a { color:#B3B3B3; }
#author a:hover { color:#005580; }
@media (max-width: 767px) { 
  .post p { font-size: 18px; } 
  .post blockquote { font-size: 18px; }
  .post li { font-size: 16px; } 
  #author p { font-size: 16px; } 
  }
@media (max-width: 560px) { 
  .post p { font-size: 16px; }
  .post blockquote { font-size: 16px; }
  .post footer p { font-size: 16px; }
  }
@media (max-width: 320px) { 
  #author .separator { display: none; } 
}

.centered-tweet { margin: 0 20%; }
@media (max-width: 767px) { 
  .centered-tweet { margin: 0 18%; }
}
@media (max-width: 560px) { 
  .centered-tweet { margin: 0 0; } 
}

/* Posts listing */
.posts ul { margin: 0; padding: 0; }
.posts h1 { margin-bottom: 20px; }
.posts li { border-bottom: 1px solid #f3f3f3; display: block; margin: 0; padding: 20px 10px; overflow: hidden; -webkit-transition: 0.25s; }
/* .posts li:last-child { border-bottom: none; } */
.posts li:hover { background-color: #FAFAFA; }
.posts li .avatar { float: left; margin: 0 0 0 10px; }
.posts h2 { font-size: 28px; margin: 0; padding: 0; }
.posts li div { margin-left: 87px; overflow: hidden; }
.posts li div p { color: #333; font-size: 16px; margin: 0; }
.posts li div p a { color: #888; }
@media (max-width: 560px) { .posts h2 { font-size: 24px; } }
@media (max-width: 320px) { .posts h2 { font-size: 20px; } }

/* Tags */
.tagged h1 em { color: #999; font-weight: normal; }

/* Other */
.note-from-the-editor { background-color:#ddd; padding: 13px 14px 13px 14px; font-size:16px !important; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.quote { background-color:#ddd; margin-bottom: 1em; padding: 13px 14px 13px 14px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.quote-mono { background-color:#eee; padding: 13px 14px 13px 14px; font-family: 'Courier', serif; font-size:16px !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.image-with-breathing-room { padding-top: 0px; padding-bottom: 10px; padding-right: 15%; padding-left: 15%; width: 70%; }
 @media (max-width: 560px) { .image-with-breathing-room { padding-right: 5%; padding-left: 5%; width: 90%; } }