/**
 * Reset ==============================================================
 * Based on http://meyerweb.com/eric/tools/css/reset
 */

html,
body,

/* Structures */
div,
span,
applet,
object,
iframe,

/* Text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,

/* Lists */
dl,
dt,
dd,
ol,
ul,
li,

/* Forms */
fieldset,
form,
input,
select,
textarea,
label,
legend,

/* Tables */
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin:0px;
  padding:0px;
  border:0px;
  outline:0px;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  line-height:inherit;
  }

ol,
ul,
.item-list ul,
.item-list ul li {
  list-style:none;
  }

blockquote,
q { quotes:none; }

blockquote:before,
blockquote:after,
q:before, q:after {
  content:'';
  content:none;
  }

/* remember to define focus styles! */
:focus { outline:0px; }

/* remember to highlight inserts somehow! */
ins { text-decoration:none; }
del { text-decoration:line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse:collapse;
  border-spacing:0px;
  }

/**
 * Font reset =========================================================
 *
 * Specifically targets form elements which browsers oftentimes give
 * special treatment.
 */
input,
select,
textarea,
body { font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; }

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #606060; font-style: italic } /* Comment */
.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */
.highlight .k { color: #208090;  } /* Keyword */
.highlight .o { color: #303030 } /* Operator */
.highlight .cm { color: #606060; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #507090 } /* Comment.Preproc */
.highlight .c1 { color: #606060; font-style: italic } /* Comment.Single */
.highlight .cs { color: #c00000; ; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080;  } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #c65d09;  } /* Generic.Prompt */
.highlight .gs {  } /* Generic.Strong */
.highlight .gu { color: #800080;  } /* Generic.Subheading */
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
.highlight .kc { color: #D24400;  } /* Keyword.Constant */
.highlight .nx { color: #388091;  } /* Normal Text */
.highlight .kd { color: #208090;  } /* Keyword.Declaration */
.highlight .kn { color: #208090;  } /* Keyword.Namespace */
.highlight .kp { color: #0080f0;  } /* Keyword.Pseudo */
.highlight .kr { color: #208090;  } /* Keyword.Reserved */
.highlight .kt { color: #6060f0;  } /* Keyword.Type */
.highlight .m { color: #6000E0;  } /* Literal.Number */
.highlight .s { background-color: #e0e0ff } /* Literal.String */
.highlight .na { color: #000070 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #e090e0;  } /* Name.Class */
.highlight .no { color: #50e0d0;  } /* Name.Constant */
.highlight .nd { color: #505050;  } /* Name.Decorator */
.highlight .ni { color: #800000 } /* Name.Entity */
.highlight .ne { color: #F00000;  } /* Name.Exception */
.highlight .nf { color: #50e0d0;  } /* Name.Function */
.highlight .nl { color: #907000;  } /* Name.Label */
.highlight .nn { color: #0e84b5;  } /* Name.Namespace */
.highlight .nt { color: #007000 } /* Name.Tag */
.highlight .nv { color: #003060 } /* Name.Variable */
.highlight .ow { color: #000000;  } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #6000E0;  } /* Literal.Number.Float */
.highlight .mh { color: #005080;  } /* Literal.Number.Hex */
.highlight .mi { color: #6060f0;  } /* Literal.Number.Integer */
.highlight .mo { color: #4000E0;  } /* Literal.Number.Oct */
.highlight .sb { background-color: #e0e0ff } /* Literal.String.Backtick */
.highlight .sc { color: #8080F0 } /* Literal.String.Char */
.highlight .sd { color: #D04020 } /* Literal.String.Doc */
.highlight .s1,
.highlight .s2 { color: #3d67a1 } /* Literal.String.Double */
.highlight .p { color: #444;  } /* Normal Text */
.highlight .se { color: #606060; ; background-color: #e0e0ff } /* Literal.String.Escape */
.highlight .sh { background-color: #e0e0ff } /* Literal.String.Heredoc */
.highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */
.highlight .sx { color: #f08080; background-color: #e0e0ff } /* Literal.String.Other */
.highlight .sr { color: #000000; background-color: #e0e0ff } /* Literal.String.Regex */
.highlight .ss { color: #f0c080 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #c0c0f0 } /* Name.Variable.Class */
.highlight .vg { color: #f08040 } /* Name.Variable.Global */
.highlight .vi { color: #a0a0f0 } /* Name.Variable.Instance */
.highlight .il { color: #6060f0;  } /* Literal.Number.Integer.Long */

@font-face {
  font-family:DroidSans;
  src:url('fonts/DroidSans.woff') format('woff');
  }

@font-face {
  font-family:DroidSans;
  font-weight:bold;
  src:url('fonts/DroidSansBold.woff') format('woff');
  }

html { overflow-y:scroll; }

body {
  background:#fff;
  color:#444;
  font:normal 14px/20px Helvetica,Arial,sans-serif;
  padding:100px 0px;
  transition:background-color .5s;
  -moz-transition:background-color .5s;
  -webkit-transition:background-color .5s;
  }

.limiter {
  width:920px;
  margin:0px auto;
  }

.clip { overflow:hidden; }
.hidden { display:none; }
.invisible {
  width:1px;
  height:1px;
  margin:-1px 0px 0px -1px;
  text-indent:-9999px;
  overflow:hidden;
  }

a {
  color:#000;
  text-decoration:none;
  }

a.title:hover,
a:hover .title,
.prose a:hover {
  color:#d40;
  text-decoration:underline;
  }

.prose a { text-decoration:underline; }

h1, h2, h3, h4, h5, h6 { font:normal 18px/20px DroidSans,Helvetica,Arial,sans-serif; }

pre,
code { font:normal 12px/20px "Droid Sans Mono","Andale Mono",monospace; }

input,
.meta,
.title,
.byline,
small { font-family:DroidSans,Helvetica,Arial,sans-serif; }

small {
  color:#888;
  display:block;
  font-size:12px;
  }

hr {
  border:0px;
  border-bottom:1px solid #ccc;
  }

img { display:block; }

/* Dark variant */
body.searching,
body.dark { background:#000; }

body.searching small,
body.dark small { color:#aaa; }

#exhibit .wax-legends a,
#exhibit .wax-tooltip a,
body.searching,
body.searching a,
body.searching .page-title,
body.dark,
body.dark a,
body.dark .page-title,
body.dark .prose h1,
body.dark .prose h2,
body.dark .prose h3,
body.dark .prose h4,
body.dark .prose h5,
body.dark .prose h6 { color:#fff; }

/* Branding header */
.branding {
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  z-index:1001;
  background:url(img/sprite.png) 50% 0px no-repeat;
  color:#ccc;
  font:14px/20px DroidSans,Helvetica,Arial,sans-serif;
  box-shadow:rgba(0,0,0,0.25) 0px 0px 10px;
  }

.branding a { color:#fff; }

.branding .limiter {
  position:relative;
  height:60px;
  padding:0px 20px;
  }

.branding .logo {
  display:block;
  width:60px;
  height:60px;
  text-indent:-999px;
  overflow:hidden;
  margin:0px auto;
  }

.branding .title {
  position:absolute;
  left:10px;
  bottom:0px;
  }

.branding .menu {
  position:absolute;
  bottom:0px;
  right:20px;
  padding-right:50px;
  }

.branding #search {
  position:absolute;
  right:0px;
  top:23px;
  }

.branding ul {
  padding:23px 0px 13px;
  height:24px;
  }

.branding li {
  float:left;
  height:24px;
  padding-right:1px;
  }

.branding li a {
  float:left;
  padding:2px 10px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  transition:background-color .2s;
  -moz-transition:background-color .2s;
  -webkit-transition:background-color .2s;
  }

.branding .icon {
  float:left;
  margin-right:2px;
  }

.branding .n0 a { opacity:.95; }
.branding .n1 a { opacity:.9; }
.branding .n2 a { opacity:.8; }

.branding li.nav a:hover {
  background:#444;
  color:#fff;
  opacity:1;
  }

.branding li.active a,
.branding li.active a:hover {
  background:#aaa;
  box-shadow:#aaa 0px 0px 18px 2px;
  opacity:1;
  }

/* Icons */
.icon {
  display:block;
  width:20px;
  height:20px;
  background:url(img/sprite.png) 20px 20px no-repeat;
  text-indent:-9999px;
  overflow:hidden;
  }

.icon.about    { background-position:0px -70px; }
.icon.projects { background-position:-20px -70px; }
.icon.team     { background-position:-40px -70px; }
.icon.blog     { background-position:-60px -70px; }
.icon.play     { background-position:-140px -70px; }
.icon.pause    { background-position:-160px -90px; }
.icon.search   { background-position:-180px -70px; }
.icon.close    { background-position:-200px -70px; }
.icon.prev     { background-position:-80px -90px; }
.icon.next     { background-position:-100px -90px; }

/* Page title */
.page-title {
  color:#000;
  font-size:36px;
  line-height:40px;
  letter-spacing:-1px;
  margin:0px 0px 20px;
  }

.page-title small {
  font-size:18px;
  line-height:20px;
  letter-spacing:0px;
  }

/* Fullscreen map */
.map-fullscreen {
  background:#fff;
  width:auto !important;
  height:auto !important;
  position:fixed !important;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  }

/* Fullscreen image */
.image-fullscreen,
.image-fullscreen .mask {
  background:#000 50% 50% no-repeat;
  position:fixed;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  height:1000px;
  }

.image-fullscreen .mask { background:url(img/mask-right.png) 50% 50% no-repeat; }
.image-fullscreen .mask.left { background-image:url(img/mask-left.png) }

/* About page */
.about { position:relative; }

.about .prose {
  width:536px;
  margin:0px 0px 40px;
  }

.about .sidebar {
  float:left;
  width:152px;
  margin-right:40px;
  }

.about .widebar {
  width:344px;
  position:fixed;
  left:50%;
  top:100px;
  margin-left:116px;
  }

.about .widebar a {
  margin:0px 0px 20px;
  padding:0px 0px 0px 104px;
  position:relative;
  }

.about .widebar .title {
  display:block;
  position:absolute;
  top:0px;
  bottom:1px;
  left:0px;
  width:64px;
  padding:10px 30px 10px 10px;
  background:#000;
  border-radius:3px 0px 0px 3px;
  -moz-border-radius:3px 0px 0px 3px;
  -webkit-border-radius:3px 0px 0px 3px;
  }

.about .widebar .thumb {
  width:79px;
  height:79px;
  float:left;
  margin:0px 1px 1px 0px;
  box-shadow:inset rgba(0,0,0,.75) 0px 0px 10px;
  -moz-box-shadow:inset rgba(0,0,0,.75) 0px 0px 10px;
  -webkit-box-shadow:inset rgba(0,0,0,.75) 0px 0px 10px;
  }

.about .widebar .l .thumb { width:239px; }
.about .widebar .s .thumb { width:39px; height:39px; }

.sidebar h2 {
  color:#000;
  padding:0px 0px 9px;
  margin:0px 0px 10px;
  border-bottom:1px solid #ccc;
  }

body.dark .sidebar h2 { color:#fff; }

.sidebar ul,
.sidebar p { margin:0px 0px 10px; }

/* Project page */
body.exhibit #whitepaper,
body.follow #whitepaper,
#follow,
#exhibit,
#exhibit #image,
#exhibit #map {
  z-index:-1;
  opacity:0;
  transition:z-index .5s, opacity .5s;
  -moz-transition:z-index .5s, opacity .5s;
  -webkit-transition:z-index .5s, opacity .5s;
  }

#exhibit.map #map,
#exhibit.image #image,
body.whitepaper #whitepaper,
body.follow #follow,
body.exhibit #exhibit {
  z-index:100;
  opacity:1;
  }

#follow,
#whitepaper {
  position:absolute;
  top:100px;
  left:50%;
  margin-left:-460px;
  width:600px;
  padding-bottom:100px;
  }

/* todo smooth follow <-> whitepaper transition */
body.exhibit #whitepaper,
body.follow #whitepaper,
#follow { display:none; }
body.follow #follow,
#whitepaper { display:block; }

#whitepaper > img,
#whitepaper > p img {
  outline:1px solid #ccc;
  max-width:100%;
  }

.summary {
  position:fixed;
  z-index:101;
  top:80px;
  left:50%;

  margin-left:160px;
  width:280px;
  background:#fff;
  padding:20px;
  }

  body.exhibit .summary { box-shadow:rgba(0,0,0,0.25) 0px 0px 10px 2px; }
  body.whitepaper .summary { box-shadow:none; }

.switcher {
  position:relative;
  height:20px;
  float:left;
  text-align:center;
  background:#ccc;
  margin:0px 0px 20px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  box-shadow:inset rgba(0,0,0,0.25) 0px 0px 5px;
  }

.switcher a {
  color:#fff;
  display:block;
  }

.switcher li {
  position:relative;
  z-index:1;
  float:left;
  height:20px;
  width:80px;
  }

.switcher li.highlight {
  position:absolute;
  left:0px;
  top:0px;
  z-index:0;
  background:#222;
  transition:left .1s;
  -moz-transition:left .1s;
  -webkit-transition:left .1s;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  }

.ew li.follow,
.wf li.exhibit,
.ef li.whitepaper { display:none; }
body.exhibit    .ewf li.highlight,
body.exhibit    .ew  li.highlight,
body.exhibit    .ef  li.highlight,
body.whitepaper .wf  li.highlight { left:0px; }
body.whitepaper .ewf li.highlight,
body.whitepaper .ew  li.highlight,
body.follow     .ef  li.highlight,
body.follow     .wf  li.highlight { left:80px; }
body.follow     .ewf li.highlight { left:160px; }

/* Exhibit steps */
.summary .steps { display:none; }
body.exhibit .summary .steps { display:block; }
body.exhibit .summary .description { display:none; }
body.exhibit .summary .force { display:block; }

.steps li a {
  cursor:pointer;
  display:block;
  color:#ccc;
  height:20px;
  margin:0px 0px 10px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis; /* Webkit only atm */
  transition:color .25s;
  -moz-transition:color .25s;
  -webkit-transition:color .25s;
  }

.steps a:hover { color:#000; }

.steps a.active {
  color:#444;
  height:auto;
  min-height:40px;
  overflow:visible;
  white-space:normal;
  }

/* Project/follow */
#follow .follow {
  padding:15px 0px 0px 320px;
  position:relative;
  height:75px;
  }

#follow .graph {
  position:absolute;
  left:0px;
  top:0px;
  }

#follow .follow .title { font-size:18px; }

#follow h3 { margin:0px 0px 10px; }

#follow .follow,
#follow ul { margin:0px 0px 20px; }

#follow li {
  position:relative;
  border-top:1px solid #ccc;
  padding:9px 0px 10px;
  min-height:40px;
  }

#follow .quote { color:#444; }
#follow .blog li { padding-left:50px; }
#follow .blog li .thumb { position:absolute; left:0px; top:9px; }

/* Next/Prev pager */
.pager a {
  position:fixed;
  top:50%;
  z-index:101;
  margin-top:-30px;
  padding:20px 5px;
  height:20px;
  width:20px;
  display:block;
  text-indent:-9999px;
  overflow:hidden;
  transition:background-color .2s;
  -moz-transition:background-color .2s;
  -webkit-transition:background-color .2s;
  }

body.exhibit .pager a {
  background-color:#fff;
  box-shadow:rgba(0,0,0,0.25) 0px 0px 10px;
  }

.pager a.prev {
  left:0%;
  border-radius:0px 3px 3px 0px;
  }

.pager a.next {
  right:0%;
  border-radius:3px 0px 0px 3px;
  }

.pager a,
body.dark .pager a:hover { background-color:#eee; }

.pager a:hover,
body.dark .pager a,
body.exhibit .pager a:hover { background-color:#000; }

.pager .icon.prev,
body.dark .pager a:hover .icon.prev { background-position:-80px -90px; }
.pager .icon.next,
body.dark .pager a:hover .icon.next { background-position:-100px -90px; }
body.dark .pager .icon.prev,
.pager a:hover .icon.prev { background-position:-80px -70px; }
body.dark .pager .icon.next,
.pager a:hover .icon.next { background-position:-100px -70px; }

/* Prose */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 { color:#000; }

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose p,
.prose ul,
.prose ol,
.prose hr,
.prose img,
.prose blockquote,
.prose pre,
.prose table,
.prose iframe,
.prose object,
.prose .ts-map {
  display:block;
  margin:0px 0px 20px;
  }

.prose table { display:table; }

/* Block quotes */
.prose blockquote {
  font-style:italic;
  padding:0px 0px 0px 20px;
  color:#888;
  }

.prose blockquote em { font-style:normal; }

.prose blockquote a { color:#666; }

/* Special sauce */
pre {
  color:#888;
  overflow:auto;
  padding:0px 20px;
  transition:background-color .2s, color .2s;
  -moz-transition:background-color .2s, color .2s;
  -webkit-transition:background-color .2s, color .2s;
  }

pre:hover {
  background-color:#eee;
  color:#444;
  }

pre::-webkit-scrollbar {
  height:8px;
  width:8px;
  background:#fff;
  border-radius:2px;
  }
pre::-webkit-scrollbar-thumb {
  border-radius:2px;
  background:#fff;
  }
pre::-webkit-scrollbar-thumb:vertical { height:25px; }
pre::-webkit-scrollbar-thumb:horizontal { width:25px; }
pre:hover::-webkit-scrollbar { background:#eee; }
pre:hover::-webkit-scrollbar-thumb { background:#666; }

table { width:100%; }
table th,
table td {
  text-align:left;
  padding:5px 10px 4px 0px;
  border-bottom:1px solid #ccc;
  }

/* Cite */
.prose cite { display:block; font-size:12px; }
.prose cite,
.prose cite a { color:#888; }
.prose img + cite { margin-top:-20px; }

.prose .ts-map { z-index:0; }

.prose .cols { margin:0px -40px 20px 0px; }

.prose ul li,
.prose ol li { margin-left:20px; }
.prose ul li { list-style:disc; }
.prose ol li { list-style:decimal; }

.prose > h1,
.prose > h2 {
  font-size:28px;
  line-height:30px;
  margin:0px 0px 10px;
  }

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 { max-width:85%; }

.list { width:960px; }
.list > li {
  float:left;
  margin:0px 40px 0px 0px;
  width:280px;
  }

.list a {
  padding:9px 0px 10px;
  border-top:1px solid #ccc;
  min-height:40px;
  }

.list .last a { border:0px; }

.list a,
.list span { display:block; }

.list .title,
.list small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  }

.list .description { font-size:12px; }

.featured a {
  border:0px;
  padding:0px;
  min-height:280px;
  }

.featured .thumb { margin:0px 0px 10px; }

/* Team */
.limiter.team { position:relative; }
.limiter.team p {
  width:440px;
  margin:0px 0px 40px;
  }

ul.grid {
  width:960px;
  margin:0px auto;
  }

ul.grid li {
  width:200px;
  margin:0px 40px 20px 0px;
  height:40px;
  float:left;
  }

ul.grid a {
  position:relative;
  padding:0px 0px 0px 50px;
  height:40px;
  display:block;
  }

ul.grid span { display:block; }

ul.grid .thumb {
  background-color:#000;
  position:absolute;
  left:0px;
  top:0px;
  }

#profile {
  width:344px;
  margin:0px 0px 0px auto;
  position:relative;
  z-index:100;
  }

#profile.left { margin:0px auto 0px 0px; }

#profile h3,
#profile ul { margin:0px 0px 20px; }

#profile li {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }

/* Thumbnail sizes */
.thumb {
  overflow:hidden;
  text-indent:-999px;
  display:block;
  background:#fff 50% 50% no-repeat;
  }

.thumb.article,
.thumb.team {
  width:40px;
  height:40px;
  box-shadow:inset rgba(0,0,0,.25) 0px 0px 10px;
  -moz-box-shadow:inset rgba(0,0,0,.25) 0px 0px 10px;
  -webkit-box-shadow:inset rgba(0,0,0,.25) 0px 0px 10px;
  }

.thumb.project {
  height:200px;
  width:280px;
  box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  -moz-box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  -webkit-box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  }

/* Blog */
small.date {
  text-transform:uppercase;
  font-size:10px;
  text-align:right;
  }

div.heroes { background:url(img/dots.png) 556px 0% repeat-y; }

ul.heroes {
  width:384px;
  height:600px;
  padding:0px 0px 0px 576px;
  margin:0px -20px;
  position:relative;
  }

.heroes li .thumb {
  width:344px;
  height:120px;
  margin:0px 0px 10px;
  box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  -moz-box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  -webkit-box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  }

.heroes li a {
  display:block;
  min-height:150px;
  padding:0px 20px 10px;
  }

.heroes li > * { display:block }

.heroes li .title,
.heroes li small {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  }

.heroes .hero .title,
.heroes .hero .subtitle {
  display:block;
  overflow:visible;
  white-space:normal;
  max-width:85%;
  }

.heroes .hero .title {
  font-size:28px;
  line-height:30px;
  margin:0px 0px 10px;
  }

.heroes .hero .subtitle {
  color:#888;
  font-size:18px;
  line-height:20px;
  margin:0px 0px 20px;
  }

.heroes li.hero .thumb {
  width:536px;
  height:320px;
  margin:0px 0px 10px;
  }

.heroes li.hero {
  width:576px;
  height:540px;
  position:absolute;
  padding:0px;
  border:0px;
  left:0px;
  }

.postgrid {
  margin:0px -20px;
  background:url(img/dots-3.png) 50% 0% repeat-y;
  }

.postgrid .thumb {
  width:152px;
  height:100px;
  margin:0px 0px 10px;
  box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  -moz-box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  -webkit-box-shadow:inset rgba(0,0,0,.25) 0px 0px 40px;
  }

.postgrid li {
  float:left;
  width:192px;
  height:300px;
  }

.postgrid a {
  position:relative;
  padding:17px 20px 20px;
  border-top:3px solid #ccc;
  width:152px;
  height:260px;
  float:left;
  overflow:hidden;
  }

.postgrid .title,
.postgrid .date { display:block; }

.postgrid .date {
  position:absolute;
  right:20px;
  bottom:10px;
  background:#fff;
  }

.postgrid .label {
  background:#444;
  color:#fff;
  border-top:3px solid #333;
  padding:17px 20px 20px 40px;
  width:132px;
  height:auto;
  }

.postgrid .label small { color:#ccc; }

.postgrid .text .title {
  font-size:18px;
  margin:10px 0px;
  }

.more {
  margin:20px 0px;
  text-align:right;
  }

.more a {
  padding:5px 15px;
  background:#444;
  color:#fff;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  }


/* Single post */
.post { position:relative; }
.post .prose {
  background:url(img/dots.png) 0% 0% repeat-y;
  margin:0px auto;
  padding:0px 20px;
  width:536px;
  }

.post .subtitle { color:#888; }

.post .content h1,
.post .content h2 {
  line-height:20px;
  font-size:20px;
  }

.post .content img {
  max-width: 100%;
  border: 1px solid #CFCFCF;
  display: block;
  margin: 0 auto;
  }

.post .byline {
  border-top:1px solid #ccc;
  margin:20px 0px 0px;
  padding:19px 0px 0px;
  font-size:12px;
  color:#888;
  }

.post .meta {
  position:fixed;
  right:50%;
  top:100px;
  margin-right:308px;
  width:152px;
  }

.post .author { position:relative; }
.post .author.withimage { padding-left:50px; }

.post .author .thumb {
  position:absolute;
  left:0px;
  top:0px;
  }

.post .tags {
  margin:10px 0px 0px;
  border-top:1px solid #ccc;
  padding:9px 0px 0px;
  }

/* Project ad */
.post .project {
  display:block;
  margin:20px 0px 0px;
  font-size:12px;
  padding:10px;
  background:#eee;
  }

.post .project .view {
  display:block;
  text-align:right;
  margin:10px 0px 0px;
  }

/* Follow sidebar */
.post .follow {
  width:152px;
  position:absolute;
  right:0px;
  top:0px;
  }

.follow > .title {
  display:block;
  margin:0px 0px 10px;
  }

.follow .tweets {
  position:relative;
  border-top:1px solid #ccc;
  padding-top:19px;
  margin:10px 0px 0px;
  width:156px;
  opacity:0;
  transition:opacity .5s;
  -moz-transition:opacity .5s;
  -webkit-transition:opacity .5s;
  }

.follow .tweets.loaded { opacity:1; }

.follow .tweet {
  width:48px;
  height:48px;
  margin:0px 4px 4px 0px;
  float:left;
  position:relative;
  }

.follow .tweet .thumb {
  width:48px;
  height:48px;
  }

.follow .tweet .caret {
  display:none;
  position:absolute;
  right:45px;
  top:10px;
  width:10px;
  height:20px;
  background:url(img/sprite.png) -130px -90px no-repeat;
  }

.follow .tweet .popup {
  display:none;
  position:absolute;
  right:55px;
  top:-5px;
  width:180px;
  padding:5px 20px 5px 10px;
  background:#000;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

.follow a.tweet * { color:#fff; }

.follow .tweet:hover { z-index:1; }
.follow .tweet:hover .caret,
.follow .tweet:hover .popup { display:block; }

.follow .graph,
.follow .mask {
  position:relative;
  margin:0px 0px 10px;
  width:150px;
  height:150px;
  background:#eee;
  }

.follow .mask {
  background:url(img/sprite.png) 0px -120px no-repeat;
  position:absolute;
  left:0px;
  top:0px;
  }

.follow .maxed .mask { background-position:-150px -120px; }

.follow .ones,
.follow .fives,
.follow .tens {
  height:0px;
  width:0px;
  background:#444;
  display:block;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  transition:height .5s;
  -moz-transition:height .5s;
  -webkit-transition:height .5s;
  }

.follow .tens { width:auto; }
.follow .tens-1 { height:15px; }
.follow .tens-2 { height:30px; }
.follow .tens-3 { height:45px; }
.follow .tens-4 { height:60px; }
.follow .tens-5 { height:75px; }
.follow .tens-6 { height:90px; }
.follow .tens-7 { height:105px; }
.follow .tens-8 { height:120px; }
.follow .tens-9 { height:135px; }
.maxed .tens,
.follow .tens-10 { height:150px; }
.follow .ones-1 { width:15px; height:15px; }
.follow .ones-2 { width:30px; height:15px; }
.follow .ones-3 { width:45px; height:15px; }
.follow .ones-4 { width:60px; height:15px; }
.follow .ones-5 { width:75px; height:15px; }
.follow .ones-6 { width:90px; height:15px; }
.follow .ones-7 { width:105px; height:15px; }
.follow .ones-8 { width:120px; height:15px; }
.follow .ones-9 { width:135px; height:15px; }

.follow .graph.bar,
.follow .graph.bar .mask { width:300px; height:75px; }
.follow .graph.bar .mask { background-position: -300px -120px; }
.follow .maxed.bar .mask { background-position: -300px -195px; }

.follow .bar .ones,
.follow .bar .fives {
  float:left;
  transition:width .5s;
  -moz-transition:width .5s;
  -webkit-transition:width .5s;
  }

.follow .fives { height:75px; }
.follow .fives-1 { width:15px; }
.follow .fives-2 { width:30px; }
.follow .fives-3 { width:45px; }
.follow .fives-4 { width:60px; }
.follow .fives-5 { width:75px; }
.follow .fives-6 { width:90px; }
.follow .fives-7 { width:105px; }
.follow .fives-8 { width:120px; }
.follow .fives-9 { width:135px; }
.follow .fives-10 { width:150px; }
.follow .fives-11 { width:165px; }
.follow .fives-12 { width:180px; }
.follow .fives-13 { width:195px; }
.follow .fives-14 { width:210px; }
.follow .fives-15 { width:225px; }
.follow .fives-16 { width:240px; }
.follow .fives-17 { width:255px; }
.follow .fives-18 { width:270px; }
.follow .fives-19 { width:285px; }
.maxed .fives,
.follow .fives-20 { width:300px; }

.follow .bar .ones-1 { width:15px; height:15px; }
.follow .bar .ones-2 { width:15px; height:30px; }
.follow .bar .ones-3 { width:15px; height:45px; }
.follow .bar .ones-4 { width:15px; height:60px; }
.follow .bar .ones-5 { width:15px; height:75px; }

/* Tooltips */
.wax-tooltip h1,
.wax-tooltip h2,
.wax-tooltip h3,
.wax-tooltip h4,
.wax-tooltip h5,
.wax-tooltip h6 { font-weight:bold; font-size:14px; }
.wax-tooltip img { width:100%; }

body.exhibit #exhibit .wax-legends,
body.exhibit #exhibit .wax-tooltip {
  font:normal 10px/15px DroidSans,Helvetica,Arial,sans-serif;
  box-shadow:rgba(0,0,0,0.25) 0px 0px 10px;
  background:#000;
  color:#fff;
  position:fixed;
  z-index:101;
  top:80px;
  right:50%;

  margin-right:260px;
  width:180px;
  padding:20px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  }

/* Map loop player */
#player {
  width:920px;
  height:30px;
  padding:0px 20px;
  position:fixed;
  top:60px;
  left:50%;
  margin-left:-480px;
  background:#fff;
  z-index:100;
  box-shadow:rgba(0,0,0,0.25) 0px 0px 10px;
  -moz-box-shadow:rgba(0,0,0,0.25) 0px 0px 10px;
  -webkit-box-shadow:rgba(0,0,0,0.25) 0px 0px 10px;
  border-radius:0px 0px 3px 3px;
  -moz-border-radius:0px 0px 3px 3px;
  -webkit-border-radius:0px 0px 3px 3px;
  }

#player small {
  position:absolute;
  right:20px;
  top:5px;
  }

#player .play,
#player .pause { display:none; }
#player.playing .pause { display:block; }
#player.paused .play { display:block; }

#player a { opacity:.5; }
#player a:hover { opacity:1; }

#player a.prev,
#player a.next {
  position:absolute;
  left:100px;
  top:0px;
  padding:5px 9px 5px 10px;
  border-right:1px solid #ccc;
  }

#player a.next { left:140px; }

#player .playpause {
  position:absolute;
  left:0px;
  top:0px;
  font-size:12px;
  display:block;
  width:40px;
  padding:5px 19px 5px 40px;
  border-right:1px solid #ccc;
  transition:background .2s, color .2s, opacity .2s;
  -moz-transition:background .2s, color .2s, opacity .2s;
  -webkit-transition:background .2s, color .2s, opacity .2s;
  border-radius:0px 0px 0px 3px;
  -moz-border-radius:0px 0px 0px 3px;
  -webkit-border-radius:0px 0px 0px 3px;
  }

  #player .playpause .icon {
    position:absolute;
    left:15px;
    top:5px;
    }

  #player.paused .playpause {
    opacity:1;
    background:#d40;
    color:#fff;
    }

#player .playbar {
  position:absolute;
  top:5px;
  left:200px;
  width:200px;
  height:6px;
  margin:7px 0px;
  background:#ccc;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  }

#player .playbar div {
  position:absolute;
  left:0px;
  top:0px;
  height:6px;
  width:20px;
  background:#444;
  border-radius:2px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  transition:left .5s;
  -moz-transition:left .5s;
  -webkit-transition:left .5s;
  }

#player .playbar .progress-0 { left:0px; }
#player .playbar .progress-1 { left:20px; }
#player .playbar .progress-2 { left:40px; }
#player .playbar .progress-3 { left:60px; }
#player .playbar .progress-4 { left:80px; }
#player .playbar .progress-5 { left:100px; }
#player .playbar .progress-6 { left:120px; }
#player .playbar .progress-7 { left:140px; }
#player .playbar .progress-8 { left:160px; }
#player .playbar .progress-9 { left:180px; }

#poster .wax-tooltip {
  font:normal 12px/20px DroidSans,Helvetica,Arial,sans-serif;
  display:block;
  position:fixed;
  top:60px;
  left:50%;
  z-index:101;
  width:460px;
  padding:5px 0px;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#fff;
  }

/* 404 */
.error { position:relative; }
.error .page-title,
.error .prose { width:344px; }

/* Search */
#search {
  overflow:hidden;
  border:1px solid #444;
  padding:0px;
  height:22px;
  width:38px;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  transition:width .2s;
  -moz-transition:width .2s;
  -webkit-transition:width .2s;
  }

#search .waiting { display:block; }
body.searching #search .waiting { display:none;}
body .searching { display:none; }
body.searching .searching { display:block; }

#search .icon { margin:0px; }

#search a {
  position:absolute;
  right:-1px;
  top:-1px;
  }

body.searching #search a { background-color:#444; }

#search .searching .icon {
  position:absolute;
  left:5px;
  top:1px;
  }

#search .searching input {
  position:absolute;
  left:30px;
  top:1px;
  width:240px;
  color:#fff;
  }

body.searching #search {
  width:320px;
  background:#000;
  }

#search-results {
  display:none;
  position:relative;
  }

#search-results div {
  display:none;
  position:relative;
  padding:19px 0px 20px 192px;
  border-top:1px solid #444;
  }

#search-results div.empty {
  text-align:center;
  padding-left:0px;
  font-size:18px;
  }

#search-results div.active { display:block; }

#search-results div .label {
  display:block;
  position:absolute;
  font-size:18px;
  left:0px;
  }

#search-results li {
  position:relative;
  margin:0px 0px 10px;
  }

#search-results li .date {
  position:absolute;
  text-align:right;
  width:70px;
  left:-80px;
  top:0px;
  }

body.searching > div { display:none; }
body.searching > div.branding,
body.searching > div#search-results { display:block; }