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

/**************************************/
/* 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; }


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

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

/* section title in the upper left */
nav h1{
  margin:9px 0 9px 22px;
  float:left;
  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:110px;
  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;
  float:left;
  margin:9px 0;
  font-weight:bold;
}
nav h3.tt{
  font-family:"Courier Prime";
  margin-top:11px;
}

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

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

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

/* prev/next controls in the tutorial nav */
nav ul.chapter{
  /*background:red;*/
  position:absolute;
  list-style:none;
  left:400px;
  width:400px;
  overflow:auto;
}

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

nav ul.chapter li{
  float:right;
  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 */
}



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{
  max-width:600px;
  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;
  max-width:600px;
  margin: 45px 0 48px 215px;
  border-bottom:1px solid #666;
}
.article a{
  font-style:italic;
}

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


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


.article.ref > div:before{
  padding-top:15px;
  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.ref > div.commands:before{ content:"Commands"; }
.article.ref > div.types:before{ content:"Types"; }
.article.ref > div.compat:before{ content:"NodeBox Compatibility"; }

.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;
}

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

.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 .definition h1 span.args{
  font-weight:normal;
  /*font-family:Courier;*/
  color:#aaa;
}


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

.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 only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {

  nav{
    min-width:768px;
    max-width:823px;
  }

  nav ul.chapter {
    position:static;
    width:auto;
    padding-right:10px;
  }

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

  .article a:target + a + .definition:before,
  .article a:target + .definition:before{
    top:1px;
    font:36px/36px "Menlo";
  }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
  nav ul.siblings li a{
    font-weight:normal;
    font-size:15px;
  }
  div.media{
    position:relative;
    overflow:auto;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {

  /* make things a reasonable size (in tandem with the meta.viewport settings */
  body, html, pre{ -webkit-text-size-adjust: 100%; }

  /* typography redefs */
  .article p{ font-size:16px; line-height:23px;}
  .article h1 { margin: 30px 0 0 0; }
  .article h2 { margin: 30px 0 0 0; }
  .article.tut h2 { line-height:22px; }
  .article p code, .article li code { font-size:13px;}
  .double-dagger{ padding-left:36px; }
  .double-dagger:after{ left:0px; }


  /* Nav: Backlink & page title */
  nav{
    position:relative;
    display:block;
    min-width:inherit;
    overflow:auto;
    margin:auto;
  }

  nav h1{
    float:left;
    width:auto;
    margin:8px 0 ;
  }

  nav.tut{
    overflow:visible;
  }

  nav h3{
    float:right;
    margin:8px 0;
  }

  nav.ref .siblings{
    display:none;
  }

  nav h1:hover span{ opacity:1; }
  nav h1:hover:after{ opacity:0;}


  nav.ref ul.chapter{
    display:block; /* prev-next for ref sections */
  }

  /* Nav: Tutorial chapters */
  nav ul.chapter{
    background:#c0c0c0;
    height:36px;
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    clear:both;
    overflow:visible;
    margin:auto;
    padding:0 10px;
  }

  nav ul.chapter.hidden{
    height:0;
    display:block;
  }



  nav ul.chapter li a{
    text-transform:uppercase;
    font-size:14px;
    font-weight:bold;
    color:white;
  }

  nav ul.chapter li.prev a{
    padding:0;

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

  nav ul.chapter li:last-child{
    float:left;
  }
  nav ul.chapter li.current{
    /*float:none;*/
    position:absolute;
    top:-30px;
    right:0;
    margin:0;
  }

  nav.tut ul.chapter li.current{ display:none; }

  nav.tut ul.chapter li.current:before{
    content:"§";
  }
  nav.ref ul.chapter li.current:before{
    content:none;
  }
  nav ul.chapter li.current{
    color:#bb4200;
    font-weight:bold;
  }

  /* Nav: Reference sections */
  nav ul.siblings{
    float:left;
    list-style:none;
    padding-left:0;
    margin:10px 40px 20px 0;
  }

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

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

  nav ul.siblings li h3{
    float:none;
    font-weight:bold;
  }




  /* Article layout */

  .article.tut{
    margin-top:30px;
  }
  .article.ref{
   margin-top:30px;
  }

  .article{
    margin:0 6px;
    width:auto;
  }

  .article a[name]{
    display: block;
    position: relative;
    top: 0;
  }
  .article .definition .row p{
    max-width:none;
  }

  .definition:before{
    display:none;
  }

  .article.ref > div:before{
    padding:10px 0 8px 0;
    width:auto;
    display:block;
    border-top:1px solid #666;
    border-bottom:0;
    position:relative;
    left:auto;
    color:#bb4200;
  }

  .article.ref .blend-modes{
    /*overflow:auto;*/
    max-width:100%;
  }


  /* fit full-width images in the tutorials */
  div.media{
    position:relative;
    overflow:auto;
    margin:0;
  }

  div.media img{
    max-width:100%;
    height:auto;
  }

  /* fit side-by-side examples in ref & tut*/
  .article .example > span{
    max-width:36%;
    margin-right:8px;
  }
  .article .example > span img{
    max-width:100%;
    height:auto;
  }

   /* prev/next controls in the tutorial nav */
   footer{
     margin:0 6px;
   }

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

   footer ul.chapter li a{font: 16px "Cabin"; }


}