html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { background: #122230 url('../images/white-wave.png?1346812038'); color: white; font-family: "ff-karbid-slab-web-pro", "Helvetica Neue", sans-serif; }
body.light { background: white url('../images/white-wave-over-light.png?1347034741'); color: #444; }
body.light header a.logo { background-image: url('../images/logo-green.png?1347034521'); opacity: 0.5; }

#wrapper { margin: auto; padding: 40px 40px; max-width: 1020px; width: 100%; }

a { border-bottom: 1px solid rgba(110, 150, 186, 0.2); color: #6e96ba; padding: 0 2px; margin: 0 -2px; text-decoration: none; }
a:hover, a:focus, a:active { background: #6e96ba; border-color: transparent; color: white; }
a.button { background: #71c271; border: 0; color: white; display: inline-block; font-weight: bold; padding: 6px 10px; }
a.button:hover, a.button:focus, a.button:active { background: #45a145; }

.weak { font-weight: normal; opacity: 0.4; }

strong { font-weight: bold; }

em { font-style: italic; }

img, embed, iframe { max-width: 100%; }

p { font-size: 28px; line-height: 40px; font-weight: 300; margin: 0 0 40px; }

a.back { background: white; border: 1px solid rgba(0, 0, 0, 0.1); color: #777; display: block; font-size: 12px; line-height: 12px; position: absolute; top: 15px; left: -10px; padding: 15px 30px 12px 40px; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; -ms-border-radius: 0 3px 3px 0; -o-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1); -webkit-transition: all 0.07s ease-in-out; -moz-transition: all 0.07s ease-in-out; -o-transition: all 0.07s ease-in-out; transition: all 0.07s ease-in-out; }
a.back:hover, a.back:focus, a.back:active { left: -5px; }

/* Typography
------------------------------ */
p, ol, ul, label { margin: 0 0 40px; }

ol ol, ol ul, ul ol, ul ul { margin: 0 0 0 60px; }

h1, h2, h3, h4, h5, h6 { font-weight: bold; text-rendering: optimizelegibility; }
h1 .weak, h2 .weak, h3 .weak, h4 .weak, h5 .weak, h6 .weak { font-size: 70%; opacity: 0.65; padding: 0 10px; }

h1 { font-size: 50px; line-height: 80px; }

h2 { font-size: 40px; line-height: 80px; }
h2.subtitle { color: #888; font-size: 18px; font-weight: normal; line-height: 40px; margin-top: -40px; padding: 20px 0; }

h3 { font-size: 30px; line-height: 66px; }

h4 { font-size: 22px; line-height: 40px; margin: 0 0 20px; }

h5 { font-size: 20px; line-height: 40px; }

h6 { font-size: 18px; line-height: 40px; }

header { margin: 40px 0; *zoom: 1; }
header:before, header:after { display: table; content: ""; }
header:after { clear: both; }
header h1 { float: left; font-size: 66px; line-height: 80px; font-weight: bold; max-width: 78%; }
header a.logo { background-image: url('../images/logo-flat.png?1346812133'); -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; border-color: transparent; display: inline-block; margin: 0 0 0 20px; position: relative; top: -26px; opacity: 0.2; width: 120px; height: 120px; text-indent: -9999px; }
header a.logo:hover, header a.logo:focus, header a.logo:active { background-color: transparent; opacity: 0.6; }

#availability { margin: 60px 0 80px; text-align: center; }
#availability a { color: #71c271; font-size: 28px; line-height: 40px; padding: 5px; }
#availability a:hover, #availability a:focus, #availability a:active { background: #71c271; color: white; }

#best-work { margin: 0 auto 40px; text-align: center; max-width: 612px; width: 100%; }
#best-work h2 { border-bottom: 1px solid rgba(110, 150, 186, 0.2); color: rgba(255, 255, 255, 0.8); font-size: 20px; line-height: 40px; }
#best-work h2:before, #best-work h2:after { content: "\2605"; opacity: 0.2; padding: 0 10px; }
#best-work li a { border-color: transparent; display: block; font-size: 28px; line-height: 80px; padding: 5px 10px; *zoom: 1; }
#best-work li a:before, #best-work li a:after { display: table; content: ""; }
#best-work li a:after { clear: both; }
#best-work li a h3 { color: #dddddd; float: left; font-weight: bold; line-height: 80px; }
#best-work li a .meta { color: rgba(255, 255, 255, 0.3); float: right; font-size: 18px; line-height: 80px; }

#me-myself-and-i { margin: 80px 0 160px; *zoom: 1; }
#me-myself-and-i:before, #me-myself-and-i:after { display: table; content: ""; }
#me-myself-and-i:after { clear: both; }
#me-myself-and-i #manifesto { float: left; padding: 0 20px; width: 50%; }
#me-myself-and-i #experiments { float: right; padding: 0 20px; width: 50%; }
#me-myself-and-i h2 { border-bottom: 1px solid rgba(110, 150, 186, 0.2); color: rgba(255, 255, 255, 0.8); font-size: 22px; line-height: 40px; font-weight: bold; }
#me-myself-and-i li { font-size: 18px; line-height: 40px; font-weight: 400; }

#email-me { font-size: 16px; text-align: center; }
#email-me a { padding: 5px; }

#article p, #article li { font-size: 20px; line-height: 38px; }
#article.highlight-first p:first-child { font-size: 24px; line-height: 40px; }
#article blockquote { position: relative; }
#article blockquote:before { content: "\201C"; color: #ddd; font-size: 100px; line-height: 100px; position: absolute; top: -15px; left: -25px; z-index: 1; }
#article blockquote p { font-size: 32px; line-height: 40px; font-style: italic; position: relative; z-index: 10; }

body.long-title header h1 { font-size: 50px; }

body.start section { margin: 80px 0; }
body.start p, body.start li { font-size: 17px; line-height: 26px; font-weight: 300; margin: 0 0 20px; }
body.start p#action, body.start li#action { text-align: center; }
body.start p#action a, body.start li#action a { font-size: 30px; line-height: 30px; padding: 24px 20px 18px; }

@media screen and (max-width: 700px) { #wrapper { padding: 20px 20px; }
  header { margin: 0 0 40px; text-align: center; }
  header h1 { float: none; font-size: 32px; line-height: 40px; max-width: 100%; }
  header a.logo { margin: 10px 0; }
  p { font-size: 22px; }
  #availability a { font-size: 20px; }
  #best-work li a { font-size: 20px; }
  #best-work li a .meta { font-size: 13px; }
  #me-myself-and-i #manifesto, #me-myself-and-i #experiments { float: none; margin: 0 0 40px; padding: 0; width: 100%; }
  #me-myself-and-i #manifesto h2 .weak, #me-myself-and-i #experiments h2 .weak { display: none; }
  #article p, #article li { font-size: 18px; line-height: 36px; } }
@media screen and (max-width: 320px) { a.back { top: 15px; left: -10px; padding: 15px 10px 12px 20px; }
  #article p, #article li { font-size: 16px; line-height: 24px; } }