body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{ margin: 0; padding: 0;}
table{ border-collapse: collapse; border-spacing: 0;}
fieldset, img{ border: 0; max-width: 100%;}
address, caption, cite, code, dfn, var{ font-style: normal; font-weight: normal;}
ol, ul{ list-style: none;}
caption, th{ text-align: left;}
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal;}
q:before, q:after{ content: '';}
abbr, acronym{ border: 0;}

/*

14  242424
29  4a4a4a
48  7a7a7a
71  b5b5b5
86  dbdbdb
93  ededed
96  f5f5f5

*/

html{ font-size: 20px; height: 100%; overflow-y: scroll;}
body{ background: white; font: 1em/1.5 'Brandon Grotesque', 'Open Sans', Arial, sans-serif; color: #4a4a4a; margin: 0 auto; padding: 3em 5em 5em 10em; position: relative; width: 43em;}
a{ border-bottom: 2px solid #ededed; color: #db4e44; cursor: pointer; text-decoration: none;}
a:visited{ color: #93a1a1;}
a:hover{ border-bottom-color: #db4e44;}
img{ max-width: 100%;}

.post-introduction,
.post-content,
.ideas p,
.item h3,
.item p,
.item ul{ font-family: 'Open Sans', 'Brandon Grotesque', Arial, sans-serif;}
.post-content h2,
.post-content h3{ font-family: 'Brandon Grotesque', 'Open Sans', Arial, sans-serif;}

.header{ height: 6rem; margin-bottom: 3rem; position: relative;}
.logo{ border-bottom: none; display: block; height: 6rem; left: -8rem; position: absolute; top: 0;}
.logo img{ display: block; height: 6rem; width: 6rem;}
.nav{ font-size: 1.3125rem; line-height: 2rem; padding: 2rem 0;}
.nav li{ display: inline; margin-right: 2rem;}
.nav a{ color: #93a1a1;}
.nav a:hover{ color: #4a4a4a;}
.nav .here a{ border-bottom: none; color: #4a4a4a;}
.icons{ position: absolute; right: 0; text-align: right; top: 2rem;}
.icons li{ display: inline;}
.icons a{ border-bottom: none; color: #93a1a1; display: inline-block; float: left; font-size: 1.3125rem; height: 2rem; line-height: 2rem; text-align: center; width: 2rem;}
  .icons a:hover{ color: #4a4a4a;}
  .icons .twitter:hover{ color: #55acee;}
  .icons .github:hover{ color: #333;}
  .icons .soundcloud:hover{ color: #f50;}
  .icons .hn:hover{ color: #f60;}
  .icons .rss:hover{ color: #ea7c31;}
  .icons .contact:hover{ color: #e75a4d;}
.icons .icon-hn{ font-size: 1rem; left: 1px; position: relative; top: -3px;}
.icons .icon-gmail{ font-size: 1rem; left: -2px; position: relative; top: -2px;}

.hey,
.title{ font-size: 1.8125rem; line-height: 1.25; margin: 3rem 0 2rem;}
.hey strong,
.title strong{ color: #242424;}
.hey span,
.hey a{ color: #db4e44;}

.gallery,
.footer{ color: #b5b5b5; margin-top: 3rem;}
.gallery li{ display: inline-block; height: 4rem; line-height: 4rem; margin-right: 2rem; vertical-align: middle;}
.gallery img{ vertical-align: middle;}
.clients img{ height: 4rem;}
.clients .microsoft img{ height: 2.5rem;}
.clients .sony img{ height: 1.5rem;}
.skills p{ margin-bottom: 1rem;}
.skills li{ margin-right: 1rem;}
.skills img{ height: 3rem;}
.skills .jquery img{ height: 1.5rem;}
.skills .wordpress img{ height: 2rem;}
.footer a{ color: #b5b5b5;}
.footer a:hover{ color: #4a4a4a;}

.controls{ height: 1.625rem; margin: 2rem 0 1rem;}
.controls ul{ float: left; margin-right: 2rem;}
.controls li{ display: inline;}
.controls a{ border: 2px solid #ededed; color: #93a1a1; display: inline-block; float: left; font-size: 0.875rem; height: 1.5rem; line-height: 1.5rem; margin-right: -2px; padding: 0 0.75rem; position: relative;}
  .controls a:hover{ border-color: #93a1a1; color: #7a7a7a; z-index: 1;}
  .controls .on,
  .controls .on:hover{ background: #4a4a4a; border-color: #4a4a4a; color: white; z-index: 2;}
.controls li:first-child a{ border-bottom-left-radius: 3px; border-top-left-radius: 3px;}
.controls li:last-child a{ border-bottom-right-radius: 3px; border-top-right-radius: 3px;}
.controls .introductions li a{ border-radius: 3px;}

.list{ position: relative;}

.year,
.season{ background: white; border-top: 2px solid #93a1a1; display: block; font-size: 0.875rem; letter-spacing: 0.07em; line-height: 1.625rem; margin-top: 0.5rem; padding-right: 45rem; position: absolute; right: 0; text-transform: uppercase; width: 3rem;}
.year{ color: #93a1a1; padding-right: 50rem;}
.articles hr{ border: none; height: 2rem;}
.season-win{ border-top-color: #a9caf1; color: #a9caf1;}
.season-spr{ border-top-color: #c1ea95; color: #c1ea95;}
.season-sum{ border-top-color: #fbd596; color: #fbd596;}
.season-aut{ border-top-color: #c8af99; color: #c8af99;}
.affix.year, .affix.season{ left: 50%; margin-left: -24rem; position: fixed; top: -1rem;}
.affix.year{ margin-left: -29rem;}

.post{ margin-bottom: 1.5rem; position: relative;}
.post-star{ height: 16px; left: -1.5rem; position: absolute; top: 0.4rem; width: 16px;}
.post-info{ color: #dbdbdb; float: right; font-size: 0.875rem; margin: 0.2rem 0 0 2em; text-align: right;}
.post-date, .post-category{ display: block;}
.post-title{ font-size: 1.5rem; line-height: 1.125;}
.post-title a{ border-bottom: none; color: #4a4a4a;}
.post-title a:visited{ color: #93a1a1;}
.post-title a:hover{ color: #db4e44;}
.post-introduction{ color: #93a1a1; font-size: 0.875rem; margin-top: 0.25em;}
.recommended.post .post-title{ font-weight: bold;}
.compact.post .post-category{ display: none;}
.compact.post .post-introduction{ display: none;}

.articles .post:hover .post-info,
.single .post-info:hover{ color: #242424;}

.single{ margin-top: 3rem; position: relative;}
.single .post-title{ color: #242424; font-size: 2rem; font-weight: bold; line-height: 1.125;}
.single .post-introduction{ font-size: 1.125rem; margin: 1rem 0 3rem;}
.single .post-info,
.post-back{ font-size: 0.875rem; line-height: 1.5rem; position: absolute; right: 45rem; text-align: right; width: 8rem;}
.single .post-info{ margin: 1px 0 0;}
.post-back a{ color: #dbdbdb;}
.post-back a:hover{ color: #4a4a4a;}
.post-back span{ font-size: 11px; margin-right: 2px;}

.post-content{ color: #242424;}
.post-content h2{ font-size: 1.8125rem; font-weight: bold; line-height: 1.125; margin-top: 2em;}
.post-content h3,
.subtitle{ color: #839496; font-size: 1.5rem; font-weight: bold; line-height: 1.125; margin-top: 1em; padding-top: 1em;}
.post-content p{ margin: 1em 0;}
.post-content ul,
.post-content ol{ margin: 1em 0 1em 1.5em;}
.post-content figure{ margin: 2em; text-align: center;}
.post-content figcaption{ color: #93a1a1; font-size: 0.8125rem; margin-top: 1em;}
.post-content ul li{ position:relative;}
.post-content ul li:before{ color: #93a1a1; content: '*'; left: -1.25rem; position: absolute; top: 4px;}
.post-content blockquote{ border-left: 4px solid #db4e44; color: #7a7a7a; font-style: italic; margin: 2rem 0; padding: 0 2rem;}
.post-content blockquote p{ margin: 0;}
.post-content table{ font-size: 0.875rem; width: 100%;}
.post-content th,
.post-content td{ border: 1px solid #dbdbdb; padding: 0.5rem;}
.post-content th{ background: #f5f5f5; color: #7a7a7a;}
.post-content td{ background: #fafafa;}
.post-content .empty{ background: none; border: none;}
.post-content pre,
.post-content code,
.ideas code{ background: #eee8d5; color: #586e75; font-size: 0.8125rem; padding: 1px 4px 2px;}
.post-content code,
.ideas code{ position: relative; top: -2px;}
.post-content pre{ padding: 1rem;}

.favorites-list{ display: none;}

.item{ border-top: 2px solid #ededed; min-height: 220px; padding: 2rem 0 2rem 240px; position: relative;}
.item:after{ clear: both; content: ''; display: block;}
.item span{ color: #93a1a1; font-size: 1.5rem; font-weight: bold; line-height: 1.125; margin-right: 2rem; position: absolute; right: 100%; text-align: right; top: 2rem;}
.item img{ float: left; left: 0; max-width: 220px; position: absolute; top: 2rem;}
.item h2{ color: #242424; font-size: 1.5rem; font-weight: bold; line-height: 1.125;}
.item h3{ color: #93a1a1; font-size: 0.875rem; margin-top: 0.25em;}
.item p{ font-size: 0.875rem; margin-top: 1em;}
.item ul{ font-size: 0.875rem; list-style: outside disc; margin: 1em 2em;}

.ideas p{ margin: 1em 0;}

.tabs{ padding: 2rem 0;}
.tabs li{ display: inline;}
.tabs a{ display: inline-block; vertical-align: top;}

.tooltip{ display: block; font-size: 0.75rem; opacity: 0; position: absolute; visibility: visible;}
.tooltip.in{ opacity: 1;}
.tooltip.top{ margin-top: -2px; padding: 0.25rem 0;}
.tooltip-inner{ background-color: #4a4a4a; border-radius: 4px; color: white; max-width: 200px; padding: 2px 7px; text-align: center; text-decoration: none;}
.tooltip-arrow{ display: none;}

.logo{ z-index: 1986;}
.tooltip{ z-index: 200;}
.post{ z-index: 100;}

a,
.post-info{ transition: 50ms ease-out; transition-property: border-color, color;}
.tooltip{ transition: opacity 125ms ease-out;}

@media (max-width: 1159px) {
  html{ font-size: 16px;}
}

@media (max-width: 929px) {
  body{ padding: 2rem 1rem 5rem; margin: 0; width: auto;}
  .header{ height: auto; text-align: center;}
  .logo{ display: inline-block; position: static;}
  .nav{ display: block; padding: 1rem 0; text-align: center;}
  .nav li{ margin: 0 1rem;}
  .nav li:first-child{ display: none;}
  .icons{ margin: 2rem 0; position: static; text-align: center;}
  .icons a{ float: none; font-size: 1.5rem; height: auto; margin: 0; width: auto;}
  .icons .icon-hn{ font-size: 20px;}
  .icons .icon-gmail{ font-size: 20px;}
  .gallery ul{ text-align: center;}
  .gallery li{ display: inline-block; margin: 0.5rem 1rem 0;}
  .clients li{ height: 4rem; line-height: 4rem;}
  .skills li{ margin: 0.5rem 0.5rem 0;}
  .controls{ height: auto; text-align: center;}
  .controls ul{ display: inline-block; float: none; margin: 0 1rem 1rem;}
  .year,
  .season,
  .affix.year,
  .affix.season{ margin: 0; padding: 0; position: static; width: auto;}
  .articles hr{ display: none;}
  .post-star{ left: 0;}
  .recommended .post-title{ text-indent: 1.5rem;}
  .single{ margin-top: 2rem;}
  .single .post-introduction{ margin-bottom: 1rem;}
  .single .post-info, .post-back{ margin-bottom: 1rem; position: static; text-align: left; width: auto;}
  .single .post-info{ float: none;}
  .single .post-date, .single .post-category{ display: inline;}
  .single .post-category{ float: right;}
  .post-content pre{ white-space: pre-wrap;}
  .item{ padding-left: 0;}
  .item span{ display: block; float: right; margin: 0; position: static;}
  .item h3{ font-size: 1rem;}
  .item img{ display: block; float: none; margin-top: 1rem; max-width: none; position: static; width: 100%;}
  .item p,
  .item ul{ font-size: 1rem;}
}