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

html,body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust:100%;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/**************************************/
/* TYPOGRAPHY */


/*body, table, td, input, select, option, textarea { font: 17px/25px "Zapfino";}*/
body, table, td, input, select, option, textarea { font:17px/25px "chaparral-pro", "Alegreya";}

h1, h3 { font: bold 18px "Cabin"; }
h3 { margin-top: 15px; }
h2 { font: bold 14px/22px "Cabin"; margin-top: 15px; }
pre { font-size: 12px; font-family:"Courier Prime"; line-height: 19px; overflow:auto;}
code { font-family:"Courier Prime"; letter-spacing:0; line-height: 16px;}
code.box{ padding:0 4px;}
p code, li code{ font-size:15px; }
.argvals{width:100%; padding:2px 4px; border-top:1px solid #d3d3ba;}
.argvals tr > td:first-child{text-align:right; width:100px;}
.argvals td{font-style:italic;}
.argvals td code{ font-style:normal; font-size:15px; font-weight:bold; color:#444;}
.argvals td code.kw{color: #366789; font-weight:bold;}
.message { font: bold 15px "Cabin"; line-height: 18px; }

/***************************************/
/* GLOBAL STYLING */

/* Paragraphs */
p { margin: 10px 0 10px 0; }

/* Tables */
table { color: #333; }
th { text-align: left; }
td { vertical-align: top; padding: 0 10px 2px 0; margin: 0;}

/* Links */
a { color: #bb4200; text-decoration: none; }
a:hover { text-decoration: underline; }
a img { border: 0 }

/* Images */
img { border: 0; }

/* Lists */
ul { margin: 0px; padding-left: 20px; }
ul li { }

/* Line */
hr { height: 0px; border: 0; border-bottom: 1px solid #ccc; margin: 5px 0 0px 0; padding: 0px; }

/* Forms */
input, select { width: 120px; margin: 0 5px 0 0; }
/*input, select, textarea { border: 1px solid #999; }
input:focus, select:focus, textarea:focus { border: 1px solid rgb(0,128,255); }*/
input { padding: 1px 2px 1px 2px; }
input[type="file"], input[type="checkbox"] { width: auto; }
textarea { width: 100%; height: 200px; margin-bottom: 5px; padding: 3px; }
iframe { border: 0; }

/* Code */
/*pre { margin: 0; font-family:"Source Code Pro", "Courier Prime"; font-weight:600;}*/
pre { margin: 0; font-family:"Courier Prime"; }
pre { background:#edede6; border: 1px solid #d3d3ba; color: #555; padding: 2px 5px 2px 5px; }
ul+pre { margin-top: 10px; }
td pre { margin-top: 5px; margin-bottom: 5px; }
pre+pre { margin-top: 5px;}
pre { margin: 10px 0 10px 0; }
code.box { background:#edede6; color:#665; border: 1px solid #d3d3ba;}

/* Syntax colors */
.kw{   color: #366789; font-weight:bold;}
.red{  color: #bb4200; font-weight:bold;}
.str{  color: #366789; }
.off, .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;}
/* Error */                  /*.err { border: 1px solid #FF0000 }*/


/* defaults */

/* Keyword.Constant */       /*.kc { color: #008000; font-weight: bold } */
/* Comment */                /*.c { color: #408080; font-style: italic } */
/* Literal.Number.Float */   /*.mf { color: #666666 } */
/* Error */                  /*.err { border: 1px solid #FF0000 } */
/* Name.Namespace */         /*.nn { color: #0000FF; font-weight: bold } */
/* Keyword */                /*.k { color: #008000; font-weight: bold } */
/* Name.Class */             /*.nc { color: #0000FF; font-weight: bold } */
/* Literal.Number.Integer */ /*.mi { color: #666666 } */
/* Keyword.Namespace */      /*.kn { color: #008000; font-weight: bold } */
/* Name.Function */          /*.nf { color: #0000FF } */
/* Literal.String */         /*.s { color: #BA2121 } */
/* Name.Builtin.Pseudo */    /*.bp { color: #008000 } */
/* Operator */               /*.o { color: #666666 } */
/* Operator.Word */          /*.ow { color: #AA22FF; font-weight: bold } */
/* Name.Builtin */           /*.nb { color: #008000 } */
/* Literal.String.Doc */     /*.sd { color: #BA2121; font-style: italic } */
/* Literal.String.Escape */  /*.se { color: #BB6622; font-weight: bold } */

/* Comment.Multiline */           /*.cm { color: #408080; font-style: italic } */
/* Comment.Preproc */             /*.cp { color: #BC7A00 } */
/* Comment.Single */              /*.c1 { color: #408080; font-style: italic } */
/* Comment.Special */             /*.cs { color: #408080; font-style: italic } */
/* Generic.Deleted */             /*.gd { color: #A00000 } */
/* Generic.Emph */                /*.ge { font-style: italic } */
/* Generic.Error */               /*.gr { color: #FF0000 } */
/* Generic.Heading */             /*.gh { color: #000080; font-weight: bold } */
/* Generic.Inserted */            /*.gi { color: #00A000 } */
/* Generic.Output */              /*.go { color: #888888 } */
/* Generic.Prompt */              /*.gp { color: #000080; font-weight: bold } */
/* Generic.Strong */              /*.gs { font-weight: bold } */
/* Generic.Subheading */          /*.gu { color: #800080; font-weight: bold } */
/* Generic.Traceback */           /*.gt { color: #0044DD } */
/* Keyword.Declaration */         /*.kd { color: #008000; font-weight: bold } */
/* Keyword.Pseudo */              /*.kp { color: #008000 } */
/* Keyword.Reserved */            /*.kr { color: #008000; font-weight: bold } */
/* Keyword.Type */                /*.kt { color: #B00040 } */
/* Literal.Number */              /*.m { color: #666666 } */
/* Name.Attribute */              /*.na { color: #7D9029 } */
/* Name.Constant */               /*.no { color: #880000 } */
/* Name.Decorator */              /*.nd { color: #AA22FF } */
/* Name.Entity */                 /*.ni { color: #999999; font-weight: bold } */
/* Name.Exception */              /*.ne { color: #D2413A; font-weight: bold } */
/* Name.Label */                  /*.nl { color: #A0A000 } */
/* Name.Tag */                    /*.nt { color: #008000; font-weight: bold } */
/* Name.Variable */               /*.nv { color: #19177C } */
/* Text.Whitespace */             /*.w { color: #bbbbbb } */
/* Literal.Number.Hex */          /*.mh { color: #666666 } */
/* Literal.Number.Oct */          /*.mo { color: #666666 } */
/* Literal.String.Backtick */     /*.sb { color: #BA2121 } */
/* Literal.String.Char */         /*.sc { color: #BA2121 } */
/* Literal.String.Double */       /*.s2 { color: #BA2121 } */
/* Literal.String.Heredoc */      /*.sh { color: #BA2121 } */
/* Literal.String.Other */        /*.sx { color: #008000 } */
/* Literal.String.Regex */        /*.sr { color: #BB6688 } */
/* Literal.String.Single */       /*.s1 { color: #BA2121 } */
/* Literal.String.Symbol */       /*.ss { color: #19177C } */
/* Name.Variable.Class */         /*.vc { color: #19177C } */
/* Name.Variable.Global */        /*.vg { color: #19177C } */
/* Name.Variable.Instance */      /*.vi { color: #19177C } */
/* Literal.Number.Integer.Long */ /*.il { color: #666666 } */
/*.hll { background-color: #ffffcc }*/









/***************************************/
/* Old NodeBox styles (really just used in the libs pages now) */
.orange_box { background: #bb4200; color: white; font-size: 85%; font-weight: bold; padding: 2px 4px 2px 4px; margin: 0 5px 0 0; }
.grey_box { background: #666; color: white; font-size: 85%; font-weight: bold; padding: 2px 4px 2px 4px; margin: 0 5px 0 0; }
.header_image { display: none; }
.big_text { font-size: 160%; line-height: 1.1em; }
.small_text { font-size: 80%; }
.image_border img, table span.image_border img, .border { border: 1px solid #888; }
.transparency_grid img{ background:url("ref/transparency-grid.png"); }

.double-dagger { font-style:italic; position:relative;}
.double-dagger:after{
  content:"‡";
  font:italic 24px/24px Georgia;
  position:absolute;
  left:-20px;
  top:1px;
  color:#bb4200;
}

/***************************************/
/* EXTERNAL LINKS */
a[href^="http"] {
    padding-right: 12px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKxJREFUeNpi/P//P8OZM2cYkIHYzNz/DFgAC7qA2IbO/wwyagyvvHMZ0Q1gQlf8KqCckeHJLYgmbCaLTc1ClWBhZvijZoThDLjJr7KnMYIwWKGtH8M7LVdGoWu7/yPbwILuLmSFLIc3QcS3Tv6PYjIIgBSy3L/BAFf45y/Dq/TJjAy/v4FpFMUgE/8oajCAFIIVIXsaW9CBNDBouTLgDWeMEMECGEExSCwACDAAZEhL5BSQ7NkAAAAASUVORK5CYII=);
    background-position: right !important;
    background-repeat: no-repeat;
}
a.noexternal { background-image:none !important; padding-right: 0; }





main{
  width: 100%;
  max-width: 1024px;
  /*min-width: 850px;*/
  margin: 0 auto;
  padding: 0 10px;
}

header{
 /*padding: 0 10px;*/
}

header nav{
  max-width: 1024px;
  /*min-width: 850px;*/
  margin: 0 auto;
  padding: 0 10px 0 225px;
}


main.tut{
  max-width: 905px;
}

main.tut header nav{
  max-width: 905px;
}

/***************************************/
/* NAV BAR */



header{
  position:fixed;
  width:100%;
  top:0;
  left:0;
  background:rgba(255,255,255,0.9);
  height: 40px;
  overflow:visible;
  z-index:10;
}

nav{
  position:relative;
  top:0;
  left:0;
  overflow:visible;
  padding-left: 220px;
  display: flex;
  justify-content: space-between;
}

/* section title in the upper left */
nav h1{
  position: absolute;
  left: 10px;
  margin:9px 0 9px 0;
  width:200px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
nav h1 a:hover{ text-decoration:none; }

/* the backlink to the ToC (from a Section page) */
nav h1 a{ color:inherit; }
nav h1:after{
  content:"Manual";
  position:absolute;
  pointer-events:none;
  left:88px;
  opacity:0;
  z-index:10;
  -webkit-transition:opacity .333s;
}
nav{color:#555; }
nav h1{-webkit-transition:color .333s;}
nav h1 span{-webkit-transition:opacity .333s;}
nav h1:hover{color:black;}
nav h1:hover span{ opacity:0; }
nav h1:hover:after{ opacity:1; color:black; }

/* the active section in the refs siblings-bar or just the orange page title text */
nav h3{
  color:#bb4200;
  margin:9px 0;
  font-weight:bold;
  white-space: nowrap;
}
nav h3.tt{
  font-family:"Courier Prime";
  margin-top:11px;
}

/* special handling for the section-based nav in ref pages */
nav ul.siblings{
  list-style:none;
  padding-left:0;
  display: flex;
  white-space: nowrap;
}

nav ul.siblings li{
  margin:9px 9px 9px 0;
}

nav ul.siblings li a{
  font-weight:normal;
}

/* prev/next controls in the tutorial nav */
nav ul.chapter{
  list-style:none;
  padding: 0;
  display: flex;
  white-space: nowrap;
}

nav ul.chapter.hidden{
  display:none;
}

nav ul.chapter li{
  margin:9px 0 9px 6px;
}

nav ul.chapter li.current:before{
  content:"Chapter ";
}

nav ul.chapter li.prev a{
  padding-left:20px; /* a bit more hover area */
}

nav.ref ul.chapter{
  display:none; /* only displayed on small-screens */
}

ul.chapter a.stepper{
  display: none;
}

nav li{
  font: 18px "Cabin";
  margin-bottom:1px;
}
nav li a{ color:#bbb; font-weight:bold;}
nav .chapter li a{ color:#bbb; font-weight:normal;}
nav li a:hover{
  text-decoration:none;
  color:#bb4200;
}


footer{
  margin: 0 0 48px 215px;
}


footer ul.chapter{
  list-style:none;
  width:auto;
  margin:0;
  padding:0;
  overflow:auto;
  border-top:1px solid #666;
  border-bottom:1px solid #666;
  margin-bottom:55px;
}

/*footer ul.chapter.hidden{display:none; }*/
footer ul.chapter li{margin:9px 0; line-height:18px;}
footer ul.chapter li a{font: 18px "Cabin"; }
footer ul.chapter li.current{display:none; }
footer ul.chapter li.next{float:right; }
footer ul.chapter li.prev{float:left; }




/***************************************/
/* ARTICLE PAGE */


.article{
  position:relative;
  margin: 40px 0 48px 0;
  border-bottom:1px solid #666;
  padding-left: 215px;
}
.article a{
  font-style:italic;
}

.article a[name]{
  display: block;
  position: relative;
  top: -40px;
  visibility: hidden;
}



.article .definition{
  position:relative;
  border-top:1px solid #666;
  margin-bottom: 2em;
}


.article a:first-child + .definition{
   border-top: 1px solid #666;
}

.article.ref{
  padding-left: 0;
  display: flex;
}


.article.ref aside{
  min-width: 200px;
  margin: 0 15px 0 0 ;
}

.article.ref aside .groups{
  position: sticky;
  top: 40px;
  border-top:1px solid #666;
  padding-top: 5px;
}

.article.ref aside h3{
  font:800 12px/18px "Cabin";
  text-transform:uppercase;
  letter-spacing: 1px;
  color: #666;
}

.article.ref aside menu{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.article.ref aside a.type{
  font:15px/20px "Courier Prime";
}

.article.ref aside a.compat{
  color: #1f96b5;
}

.article.ref aside a.active{
  font-weight: bold;
}



.article .classic{
  display:none;
  padding-top:4px;
  width:200px;
  text-indent:1px;
  border-top:1px solid #666;
  position:absolute;
  font:800 12px/18px "Cabin";
  text-transform:uppercase;
  letter-spacing:1px;
  left:-200px;
}

.article .classic + div>.definition{
  border-color:#ccc;
}


.article a:target + a + .definition:before,
.article a:target + .definition:before{
  content:"→";
  left:-30px;
  top:-1px;
  font:36px/36px "Monaco";
  position:absolute;
  width:42px;
  height:36px;
  color:#bb4200;
}

.article .definition{ /*original .definition....*/
  position:relative;
}

.article{
  -webkit-font-feature-settings:"onum" 1;
}

.article.tut{
  margin-top:80px;
  border-bottom:none;
}

.article h2{
  color:#555;
  margin-top: 2em;
}

.article.ref h2{
  font-size:16px;
  font-weight:normal;
}

.article.ref h1 + h2{
  margin-top: 0;
}
.article.tut h2{
  font: bold 14px/14px "Cabin";
  text-transform:uppercase;
  letter-spacing:1px;
  margin:44px 0 11px 0;
}

.article.tut h2 code{
  text-transform:none;
}

.article.tut h1{
  font: bold 24px/28px "Cabin";
  margin:44px 0 11px 0;
}

.article.ref h1{
  font:bold 18px "Courier Prime";
  margin:12px 0;
}

.article.ref section h4{
  border-top: 3px double black;
  padding: 1em 0;
  margin: 0;
  font: bold 20px/28px "Cabin";
  text-transform:uppercase;
  letter-spacing:.1em;
}

.article.ref .sections section:first-child h4{
  border-top: 1px solid black;
}

.article.tut > *{
  max-width: 690px;
}

.article.ref .definition h1 span.args{
  font-weight:normal;
  /*font-family:Courier;*/
  color:#aaa;
}


.article.tut ul{
  padding-left:30px;
  list-style-type:none;
  position: relative;
}

.article.tut ul li:before{
  content:"• ";
  /*margin:0 4px 0 12px;*/
  position:absolute;
  left:14px;
}

.article .example{
  overflow:auto;
  margin-bottom:12px;
}
.article .example > pre{
  display:block;
  margin:0;
}
.article .example > span{
  float:left;
}

.article .example > span img{
  /*float:left;*/
  margin:0 10px 0 0;
}
.article .definition .example > span img{
  border: 1px solid #888;
}



.article .defs-row{
  margin-bottom:32px;
}

.article .def-box{
  background:#f5f5f3;
  border:1px solid #d3d3ba;
  margin:0 0 14px 0;
}

.article .def-box pre{
  margin:0;
  border:0;
  border-bottom:1px solid #d3d3ba;
}
.article .def-box p{
  margin:4px 5px 2px 5px;
  color:#3e3e06;
  font-style:italic;
}

.article .def-box p ~ p{
  margin-top:6px;
}
.article .def-box p ~ pre{
  background:inherit;
  border:0;
  margin-top:4px;
}
div.media{
  margin-left:-58px;
}

.blend-modes{
  overflow:hidden;
  width:580px;
}

.blend-modes .mode{
  float:left;
  margin:0 12px 20px 0;
  font: 12px "Courier Prime";
  background:url("ref/transparency-grid.png");
  border:1px solid black;
  position:relative;
}
.blend-modes .mode > div.label{
  position:absolute;
  background:none;
  top:127px;
  left:0;
}

.blend-modes .mode > div{
  background:url("ref/blend-modes.png");
  width:125px;
  height:125px;
  overflow:hidden;
}

.blend-modes .mode .normal{background-position:-0px 0;}
.blend-modes .mode .copy{background-position:-125px 0;}
.blend-modes .mode .xor{background-position:-250px 0;}
.blend-modes .mode .multiply{background-position:-375px 0;}
.blend-modes .mode .screen{background-position:-500px 0;}
.blend-modes .mode .overlay{background-position:-625px 0;}
.blend-modes .mode .darken{background-position:-750px 0;}
.blend-modes .mode .lighten{background-position:-875px 0;}
.blend-modes .mode .difference{background-position:-1000px 0;}
.blend-modes .mode .exclusion{background-position:-1125px 0;}
.blend-modes .mode .color-dodge{background-position:-1250px 0;}
.blend-modes .mode .color-burn{background-position:-1375px 0;}
.blend-modes .mode .soft-light{background-position:-1500px 0;}
.blend-modes .mode .hard-light{background-position:-1625px 0;}
.blend-modes .mode .hue{background-position:-1750px 0;}
.blend-modes .mode .saturation{background-position:-1875px 0;}
.blend-modes .mode .color{background-position:-2000px 0;}
.blend-modes .mode .luminosity{background-position:-2125px 0;}
.blend-modes .mode .source-in{background-position:-2250px 0;}
.blend-modes .mode .source-out{background-position:-2375px 0;}
.blend-modes .mode .source-atop{background-position:-2500px 0;}
.blend-modes .mode .plus-darker{background-position:-2625px 0;}
.blend-modes .mode .plus-lighter{background-position:-2750px 0;}
.blend-modes .mode .destination-over{background-position:-2875px 0;}
.blend-modes .mode .destination-in{background-position:-3000px 0;}
.blend-modes .mode .destination-out{background-position:-3125px 0;}
.blend-modes .mode .destination-atop{background-position:-3250px 0;}
.blend-modes .mode .clear{background-position:-3375px 0;}


@media (min-width: 1024px){
  body, table, td, input, select, option, textarea { font:19px/27px "chaparral-pro", "Alegreya";}
  pre{ font-size:14px; line-height:21px; }
  p code, li code{ font-size:16px; }
  h1, h3, nav li { font: bold 20px "Cabin"; }
  .message { font: bold 18px "Cabin"; }
  .article.tut h1{ font-size: 26px; margin: 66px 0 22px 0}
  .article.tut h2{ font-size:16px; letter-spacing: .1em; margin: 66px 0 22px 0}

  nav h1:after{ left:98px; } /* the rollover text */
  nav ul.chapter li{ margin-left: 10px; }

  header{ height: 44px; }
  .article{ margin-top:44px; }
  .article a[name]{ top: -44px; }
  .article.ref aside .groups{ top: 44px; }
  .article.ref h2{ font-size:19px; }
  .article.ref aside menu li a.type{
    font-size: 16px;
  }

}

@media (max-width: 840px){
  header{
    background: white;
  }

  nav ul.siblings li:not(.active){
    display: none;
  }
}


@media (max-width: 640px){

  .article.ref {
    flex-direction: column;
  }

  .article.ref aside menu{
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
  }

  .article.ref aside section{
    border-top: 1px dotted #999;
    display: flex;
  }

  .article.ref aside section:first-child{
    border: 0;
  }

  .article.ref aside h3{
    margin-top: 10px;
    flex-basis: 215px;
    flex-shrink: 0;
  }

  .article.ref aside menu li::after{
    content: "/";
    margin: 0 2px;
    color: #aaa;
  }

  .article.ref aside menu li:last-child::after{
    content: "";
  }

  .article.ref aside menu li a.active{
    font-weight:inherit
  }

  .article.ref .sections section:first-child h4{
    border-top: 3px double black;
  }


  nav.tut{ padding-left:180px; }
  nav.tut h1{ width:160px }
  nav.tut .chapter a:not(.stepper){display: none}
  nav.tut .chapter a.stepper{display: inline}

  .article.tut .media{
    margin: 0;
  }

  .article.tut img{
    max-width: 100%;
    height: auto;
  }

  .tut footer{
    margin: 0;
  }

  .article.tut{
    padding: 0;
  }
}