@import url("type/typography.css");

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 */
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-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block; }
body {line-height: 1; }
ol, ul {list-style: none; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; }
table {border-collapse: collapse; border-spacing: 0; }
/* end reset */

body, html, pre{ -webkit-text-size-adjust: 100%; }
body { background:#e0dad0; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
em{ font-style:italic; }
code{ font-family:"Courier Prime";}




/* nav bar */
nav{
  position:fixed;
  background:#242100;
  color:white;
  padding:6px 0 0 0;
  min-width:900px;
  width:100%;
  z-index:100;
}

nav .links{
  overflow:auto;
  padding-bottom:4px;
  border-bottom:2px solid rgba(255,255,255, 0.2);
  width:900px;
  margin:0 auto;
}

nav h1{
  font:500 24px/28px "Avenir Next","Cabin";
  float:left;
  padding-left:25px;
  background:url("site/logo-mini.png") no-repeat;
}

nav h1 a:hover{ text-decoration:none; }

nav ul{
  margin-top:12px;
  font:600 12px/12px "Avenir Next","Cabin";
  float:right;
}

nav ul li{
  display:inline-block;
  margin-left:18px;
  text-transform:uppercase;
  letter-spacing:1px;
}



/* splash image */

.hero{
  color:white;
  background:#242100;
  padding:140px 0 90px 0;
  text-align:center;
  font:500 32px/36px "Avenir Next","Cabin";
  min-width:900px;
}

.hero p{
  margin:18px 0;
}

.hero p.small-print{
  color:#b6b5ab;
  font:100 24px/34px "Avenir Next","Cabin";
}


/* multi-column rows */

.section{
  margin:0 auto;
  width:900px;
  font:16px/23px "Alegreya";
}

.section h1{
  padding:20px 0;
  font:600 15px/28px "Avenir Next","Cabin";
  text-transform:uppercase;
  letter-spacing:1px;
}

.section p{
  width:270px;
  float:left;
  margin-bottom:24px;
}

.section p + p{
  margin-left:45px;
}

.section p a{
  font-style:italic;
  color:#b34c1e;
}

.section .illo{
  float:right;
  text-align:center;
  margin-bottom:12px;
  min-width:300px;
  /*margin-left:30px;*/
}

.section hr{
  border:0;
  height:2px;
  width:900px;
  background:white;
  margin:0 auto;
  clear:both;
}

.section hr.eof{
  background:transparent !important;
}


/* downloads section */

#downloads{
  background:#027ea0;
  color:white;
}

#downloads hr{
  background:rgba(255,255,255, 0.3);
}

#downloads .col{
  float:left;
  width:270px;
  margin-bottom:24px;
}

#downloads .col + .col{
  margin-left:45px;
}

#downloads .col .icon{
  position:absolute;
  width:62px;
  height:62px;
  background:url("site/downloads.png") no-repeat;
}
#downloads .col .docs.icon{background-position:-62px 0;}
#downloads .col .libs.icon{background-position:-124px 0;}
#downloads .col .repo.icon{background-position:0 -62px;}
#downloads .col .pypi.icon{background-position:-62px -62px;}
#downloads .col .mit.icon{background-position:-124px -62px;}

#downloads .col h2{
  font:400 22px/22px "Avenir Next","Cabin";
  padding:8px 0 0 72px;
}

#downloads .col h3{
  font:400 16px/28px "Avenir Next","Cabin";
  color:#aec7ce;
  margin:0 0 12px 72px;
}

#downloads .col p a{
  color:white;
  text-decoration:underline;
}

#downloads .tip-jar{
  font:italic 100 22px/22px "Alegreya";
  margin-top:24px;
  padding-bottom:24px;
  border-bottom:2px solid rgba(255,255,255, 0.3);
  text-align:center;
}

#downloads .tip-jar iframe{
  vertical-align:bottom;
}


/* examples section */

#code{
  position:relative;
}

#code h1{
  position:absolute;
  padding-bottom:2px;
  /*border-bottom:2px solid white;*/
  width:180px;
  color:#666;
}

#code aside{
  position:absolute;
  width:160px;
  top:58px;
  font:italic 16px/22px "Alegreya";
  color:#666;
}

#code .toc{
  padding:22px 0 36px 200px;
  overflow:auto;
}

#code .toc ul{
  padding-bottom:8px;
  border-bottom:2px solid white;
  overflow:auto;
  clear:left;
}

#code .toc ul li{
  float:left;
  margin-top:4px;
  font:600 16px/16px "Avenir Next","Cabin";
  width:100px;
  /*margin-left:50px;*/
}

#code .toc ul li + li{
  margin-left:90px;
}

#code .toc .scripts{
  float:left;
  width:100px;
  padding-top:8px;
}

#code .toc .scripts + .scripts{
  margin-left:90px;
}

#code .toc .scripts li{
  font:500 14px/22px "Avenir Next","Cabin";
  color:#666;
}

#code .toc .scripts li:hover{
  color:black;
  cursor:pointer;
  text-decoration:underline;
}

#code .toc .scripts + ul{
  padding-top:32px;
}


#example{
  overflow:auto;
  padding-bottom:32px;
}

#example.hidden{
  display:none;
}

#example .info{
  width:180px;
  float:left;
}

#example .info p{
  margin:0;
  float:none;
  width:auto;
  font:italic 100 16px/20px "Alegreya";
  margin-top:8px;
  color:#666;
}


#example h2{
  padding-bottom:6px;
  border-bottom:2px solid white;
  font:600 16px/16px "Avenir Next","Cabin";
}

#example h2 a{
  float:right;
  color:rgba(0,0,0,.1);
  font:600 16px/16px "Avenir Next","Cabin";
  margin-left:4px;
}

#example h2 a[href]{
  color:rgba(0,0,0,.3);
}

#example h2 a[href]:hover{
  color:black;
  text-decoration:none;
}

#example .viewer{
  margin-left:200px;

}

#example .viewer h2{
  font:italic 100 16px/16px "Alegreya";
  color:#706e65;
  margin-bottom:8px;
}

#example .viewer h2 span{
  color:#706e65;
}


/* Code */
pre {
  font:13px/17px "Courier Prime";
  /*background:#edede6;*/
  background:#f2efeb;
  /*border: 1px solid #d3d3ba;*/
  color: #555;
  padding: 2px 5px 2px 5px;
  margin: 10px 0 8px 0;
}

/* Syntax colors */
.kw{   color: #366789; font-weight:bold;}
.red{  color: #bb4200; font-weight:bold;}
.str{  color: #366789; }
.s{    color: #555;}
.grey{ color: #8a8a69;}

pre .s{ font-weight:bold;}
/* pygments */

/* Keyword.Constant */       .kc { color: #366789; /*font-weight: bold*/ }
/* Comment */                .c { color: #8a8a69; font-style: italic }
/* Literal.Number.Float */   .mf { color: #366789 }
/* Name.Namespace */         .nn { color: #bb4200; font-weight: bold }
/* Keyword */                .k { color: #7e882c; font-weight: bold }
/* Name.Class */             .nc { color: #bb4200; font-weight: bold }
/* Literal.Number.Integer */ .mi { color: #366789 }
/* Keyword.Namespace */      .kn { color: #7e882c; font-weight: bold }
/* Name.Function */          .nf { color: #bb4200 }
/* Literal.String */         .s { color: #366789 }
/* Name.Builtin.Pseudo */    .bp { color: #7e882c }
/* Operator */               .o { color: #666666 }
/* Operator.Word */          .ow { color: #7e882c; font-weight: bold }
/* Name.Builtin */           .nb { color: #7e882c }
/* Literal.String.Doc */     .sd { color: #366789; font-style: italic }
/* Literal.String.Escape */  .se { color: #BB6622; font-weight: bold }
/* Literal.String.Interpol */.si { color: #BB4200;}



















/* acknowledgements footer */

#thanks{
  margin:0 auto;
  background:#242100;
  color:white;
  overflow:auto;
  padding-bottom:8px;
}

#thanks p a{
  color:inherit;
  text-decoration:underline;
}

#thanks ul{
  margin:.5em 0;
}
#thanks li{
  font-style:italic;
  color:rgba(255,255,255, 0.8);
  margin:.5em 0
}
#thanks li a{
  color:white;
  text-decoration:underline;
}

#thanks p{
  width:410px;
  margin:0;
  float:none;
}

#thanks p + p{
  text-indent:1.5em;
}

#thanks .col{
  float:left;
  width:420px;
  margin-bottom:16px;
}

#thanks .col + .col{
  margin-left:60px;
}

#thanks hr{
  margin:6px 0;
  background:rgba(255,255,255, 0.5);
}



#thanks .see-also{
  width:410px;
  margin:12px 0;
}

#thanks .see-also .icon{
  position:absolute;
  width:32px;
  height:32px;
  background:url("site/see-also.png") no-repeat;
}
#thanks .see-also .gl.icon{background-position:-32px 0;}
#thanks .see-also .drawbot.icon{background-position:0 -32px;}
#thanks .see-also .p5.icon{background-position:-32px -32px;}

#thanks .see-also h2{
  /*font:400 22px/22px "Avenir Next","Cabin";*/
  font:italic 22px/24px "Alegreya";
  padding:4px 0 0 42px;
}

#thanks .see-also p{
  float:none;
  margin:8px 0 0 42px;
  width:325px;
}

#thanks footer{
  font-style:italic;
  float:right;
}