body { background: #FFFEFE; font-family: "Source Sans Pro", sans-serif; }

a { color: #759fbf; }

code { color: inherit; }

code, pre { font-family: "Menlo","Monaco","Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important; font-size: 12px !important; }

img { max-width: none; }

::selection { background: #759fbf; color: white; }

.sidebar { margin-top: 30px; margin-right: 30px; position: fixed; width: 300px; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .sidebar { position: static !important; } }
@media only screen and (max-device-width: 480px) { .sidebar { position: static !important; } }
.main { position: absolute; top: 30px; right: 0; left: 300px; }

.sidebar-logo h1 { display: inline-block; background: #759fbf url("../img/bg.png"); margin: 0; }
.sidebar-logo h1 a { display: block; padding: 25px 35px; color: white; font-weight: 400; font-size: 42px; }
.sidebar-logo h1 a:hover { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); text-decoration: none; }

.sidebar-about { padding: 30px 30px 0 30px; line-height: 26px; font-size: 18px; }

.sidebar-nav { padding: 0 0 0 30px; }
.sidebar-nav ul.main-nav { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.sidebar-nav ul.main-nav li a { font-weight: 500; text-transform: uppercase; color: inherit; font-size: 18px; }
.sidebar-nav ul.main-nav li a.active { color: #759fbf; }
.sidebar-nav ul.main-nav li a.active:before { content: '>'; }
.sidebar-nav ul.contact-nav { font-size: 16px; margin-bottom: 30px; }
.sidebar-nav ul.contact-nav li { margin-bottom: 5px; }
.sidebar-nav ul.contact-nav li a { color: #999; }

.blog { max-width: 540px; margin-left: 80px; margin-right: 30px; right: 0; overflow: hidden; }

.talks h3 { margin-top: 0; margin-bottom: 1em; font-size: 20px; text-transform: uppercase; font-weight: 600; line-height: 1em; }

.post { margin-bottom: 60px; }
.post:last-child { margin-bottom: 30px; }
.post * { line-height: 23px; }

.post-date { font-size: 14px; color: #aaa; }

.post-title { margin: 0 0 0.5em 0; }
.post-title a { color: #759fbf; font-size: 24px; font-weight: 600; }

.post-body p { color: #101B23; }
.post-body img { max-width: 100%; }
.post-body ul li, .post-body ol li { margin-bottom: 0.5em; }
.post-body blockquote p { font-weight: normal !important; }
.post-body * { margin-bottom: 1.33em; font-size: 16px; }
.post-body *:last-child { margin-bottom: 0; }

.projects { padding-left: 20px; margin: -5px 0 0 -5px; }

.project { padding: 5px 0px 20px 5px; clear: both; }
.project h3 { padding: 0; margin: 0; line-height: normal; }

.project-info { overflow: hidden; white-space: normal; background: #eee; -webkit-box-shadow: 0px 0px 5px #888; box-shadow: 0px 0px 5px #888; width: 250px; height: 394px; padding: 20px; float: left; margin-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.project-info .project-logo { padding-bottom: 5px; }
.project-info .project-download { padding-top: 10px; margin-bottom: 0; }

.project-screenshots { margin-left: 270px; height: 394px; vertical-align: top; }

.project-screenshots-scroll { width: 100%; height: auto; max-height: 100%; overflow: auto; white-space: nowrap; outline: none !important; }
.project-screenshots-scroll .jspVerticalBar { visibility: hidden; }
.project-screenshots-scroll .jspHorizontalBar, .project-screenshots-scroll .jspTrack { background: rgba(117, 159, 191, 0.2); }
.project-screenshots-scroll .jspHorizontalBar { height: 8px; }
.project-screenshots-scroll .jspDrag { background: rgba(72, 120, 157, 0.7); }

.project-screenshot, .project-block { white-space: normal; vertical-align: top; display: inline-block; background: #eee; border: 0; width: 250px; height: 394px; margin-right: 10px; }
.project-screenshot:last-child, .project-block:last-child { margin-right: 30px; }
.project-screenshot.nexus4, .project-block.nexus4 { width: 264px !important; }

.project-block { padding: 20px; font-size: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.project-block hr { border-bottom: 1px solid #d1d1d1; margin: 20px 0; }
.project-block blockquote { padding: 0; font-size: 28px; line-height: normal; font-family: serif; }
.project-block blockquote a { color: inherit; }
.project-block blockquote a:hover { text-decoration: none; }
.project-block blockquote small { padding-top: 10px; line-height: normal; font-size: 16px; }

.project-video { background: black; width: 560px; padding: 0; }

.github { font-size: 24px; text-align: center; margin: 30px 0; line-height: normal; }

.retired-projects { padding-bottom: 15px; }

.retired-project { margin-bottom: 20px; }
.retired-project h4 { margin-bottom: 5px; }
.retired-project p { font-size: 16px; }

.firesheep-downloads { display: table; width: 100%; height: 100%; }
.firesheep-downloads div { display: table-cell; vertical-align: bottom; }
.firesheep-downloads img { margin-bottom: 15px; }
.firesheep-downloads p { font-size: 24px; line-height: normal; margin: 0; }
.firesheep-downloads p strong { font-size: 48px; }

.page-title { margin: 0 0 20px 0; line-height: normal; font-size: 28px; }

.dl-archives { font-size: 16px; margin-top: 0; }
.dl-archives dt { width: 100px; text-align: left; font-weight: 600; }
.dl-archives dd { margin-left: 110px; margin-bottom: 20px; }

.dl-talks { font-size: 18px; margin-top: 0; }
.dl-talks dt a { font-weight: 600; }
.dl-talks dd { margin-left: 0; margin-bottom: 20px; }

.bottom-buttons { margin-bottom: 60px; }

.nav { margin-bottom: 20px; }

.nav-projects { margin-left: 20px; }
.nav-projects > li > a { font-size: 16px; }

@media (max-width: 768px) { .blog { margin-left: 30px; }
  .dl-archives dt { float: left; }
  .dl-archives dd { margin-left: 0; } }
@media (max-width: 480px) { .sidebar { position: inherit; width: 100%; margin: 0 0 30px 0; padding-bottom: 30px; border-bottom: 1px solid #ccc; }
  .sidebar-logo { text-align: center; }
  .sidebar-logo h1 { display: inline-block; width: 100%; }
  .main { position: inherit; }
  .projects { text-align: center; padding-right: 20px; }
  .project { height: inherit; }
  .project-info { float: none; width: 100%; height: inherit; }
  .project-screenshots { margin-left: 0; height: inherit; }
  .project-screenshots-scroll { width: inherit; white-space: inherit; overflow: inherit; }
  .project-block, .project-block:last-child { margin-right: 0 !important; }
  .project-info, .project-block, .project-screenshot { margin-bottom: 10px; margin-right: 0 !important; }
  .project-screenshot.nexus4, .project-block.nexus4 { height: auto; } }