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

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

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

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


body, table, td, input, select, option, textarea {
  /*font: 16px/22px "Alegreya";*/
  font: 16px/22px "chaparral-pro", "Alegreya";
  font-variant-numeric: oldstyle-nums;
}


main, header h1{
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 10px;
}

h1, h3 { font: bold 18px "Cabin"; }
h3 { margin-top: 15px; }
h2 { font: bold 14px "Cabin"; line-height: 1.5em; 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:13px;}
.message { font: bold 14px "Cabin"; line-height: 18px; }
div#title h1 { line-height: 0.8em; margin: 0; padding: 0; font-size: 50px; letter-spacing: -3px; }

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

/* Links */
a { color: #bb4200; text-decoration: none; }
a:hover { text-decoration: underline; }
a[name]{
  display: block;
  position: relative;
  top: -45px;
  visibility: hidden;
}

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


/***************************************/
/* ToC Layout */
header + a{ margin-top:40px; margin-bottom:0; }

/* basic styles for each third's row */
#commands,#tutorials,#lib,#types,footer{
  overflow:auto;
  padding-bottom:20px;
  border-top:1px solid #666;
  position:relative;
}

h1{
  position:absolute;
  width:120px;
}

.sections{
  padding-left:215px;
  min-width:300px;
  overflow:auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 135px);
  grid-gap: .25rem;
}


/* the column-of-links used repeatedly in each third of the page */
.section a{
  font-style:italic;
}

#tutorials .section a{
  font-style: normal;
}

.section h2{
  padding-top:1px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
  font-weight:700;
  color:#888;
}

.section h2 a{
  color:#888;
  font-style:normal;
}

.section h2 a:hover{
  color:black;
  text-decoration:none;
}

.section ul{
  list-style-type:none;
  padding:0 0 20px 0;
}

.section ul li a+a:before{
  /* draw slashes between reference links on the same line */
  content:" / ";
  color:#888;
  font-weight:bold;
}


/* class names should be monospaced */
#types .section ul li:not(.collection) a{
  font:14px/20px "Courier Prime";
}

#commands .section ul.commands{
  /* deal with safari leaving clipped bits exposed when the `commands' group is hidden */
  padding-left:3px;
  margin-left:-3px;
}


.section.entropy ul.types li:last-child a,
.section.canvas ul.types li:last-child a{
  /*font:italic 16px/22px "Alegreya";*/
  font:italic 16px/22px "chaparral-pro", "Alegreya";
  text-transform:lowercase;
}


li.compat a{
  color:#1f96b5;
}

li.cmm, li.cm{
  position:relative;
}

li.cm:before{
  content:"•";
  font-weight:bold;
  position:absolute;
  left:-11px;
  width:10px;
  text-align:center;
  color:#a99;
}
li.cmm:before{
  content:"°";
  font-weight:bold;
  position:absolute;
  margin-top:3px;
  left:-11px;
  width:10px;
  text-align:center;
  color:#988;
}

.section ul li.others{
  position:relative;
  font-style:italic;
  color:#666;
}

.section ul li.others:hover{
  text-decoration:underline;
  cursor:pointer;
}

body.commands #commands .sections ul li.compat{ display:none }
body.commands #commands nav aside.compat{ display:none }
body.compat #commands .sections ul li.commands{ display:none }
body.compat #commands nav aside.commands{ display:none }

body.commands #commands .sections ul.commands,
body.types #commands .sections ul.types,
body.compat #commands .sections ul.compat{
  opacity:1;
  pointer-events:auto;
}


/***************************************/
/* the Commands/Types/Etc. toggle */

nav{
  position: absolute;
  width:180px;
  padding: 46px 0 0 0;
}

ul.filter{
  margin-bottom:1em;
  font:12px/17px "Cabin";
  color:#888;
  padding-left:0;
  list-style:none;
  width:200px;
}

.filter li{
  color:#666;
  display:inline-block;
}

.filter li+li{
  margin-left:9px;
  position:relative;
}

.filter li+li:before{
  content:" / ";
  color:#589;
  position:absolute;
  left:-9px;
  font-weight:normal;
}

.filter li:hover{
  text-decoration:underline;
  cursor:pointer;
  color:black;
}

.filter li.active{
  font-weight:bold;
  pointer-events:none;
  color:#333;
}

.filter li.active:hover{
  text-decoration:none;
}

nav aside{
  font-style:italic;
  font-size:14px;
  line-height:18px;
  color:#888;
}

nav aside a{
  color:#555;
}

nav aside p{
  margin: 0 0 1em 0;
}

.sidebar{
  font-style:italic;
  font-size:14px;
  line-height:18px;
  position:absolute;
  top:46px;
  margin:0 0 0 14px;
  padding:0;
  width:180px;
  color:#888;
}

.sidebar div{
  position:absolute;
  opacity:0;
  pointer-events:none;
  /*-webkit-transition:opacity .333s;*/
}

.sidebar p{
  margin:0 0 8px 0;
  width:165px;
}

.sidebar a{
  color:#555;
}

body.commands .sidebar .commands,
body.types .sidebar .types,
body.compat .sidebar .compat{
  opacity:1;
  pointer-events:auto;
}

/***************************************/
/* acknowledgements */
footer{
  margin: 2em 0 4em 0;
  color:#888;
  border-top: 1px dotted #666;
  font-style: italic;
  padding-top: .5em;
  margin-left:215px;
}

footer a{
  color:#888;
}

footer:hover a{
  color:#555;
}


/***************************************/
/* NAV BAR */
header{
  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 */
header h1{
  position:relative;
  margin: 9px auto;
  /*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;
}
header h1 a:hover{ text-decoration:none; }

/* the backlink to the homepage (from the ToC) */
header h1 a{ color:black; }
header h1 span{opacity:1; -webkit-transition:opacity .333s;}
header h1:hover span{ opacity:0; }



header h1 a{ color:inherit; }
header h1:after{
  content:".io";
  position:absolute;
  pointer-events:none;
  left:94px;
  opacity:0;
  z-index:10;
  -webkit-transition:opacity .333s;
}
/*header{color:#555; }*/
header h1{-webkit-transition:color .333s;}
header h1 span{-webkit-transition:opacity .333s;}
header h1:hover{color:black;}
header h1:hover span{ opacity:0; }
header h1:hover:after{ opacity:1; color:black; }


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

@media (max-width : 640px){
  .toc h1{
    position: static;
  }

  .toc nav{
    position: static;
    padding: 0;
    width: auto;
    max-width: 300px;
  }

  .toc nav br{
    display: none;
  }

  .toc .sections{
    padding-left: 0;
    justify-content: space-between;
  }

  .toc .sections .section{
    width: auto;
  }

  .toc .sections .section ul{
    padding: 0;
  }

  footer.toc{
    border-top: 1px dotted #666;
    margin-top: 0;
    padding: 1.5em 0 0 0;
  }
}

@media (min-width : 1024px){

  main, header h1{
    /*max-width: 1020px;*/
  }

  header h1:after{
    left:103px;
  }

  body, table, td, input, select, option, textarea, footer {
    font: 18px/27px "chaparral-pro", "Alegreya";
  }

  header + a{
    margin-top: 43px;
  }


  .toc .sections{
    grid-template-columns: repeat(auto-fill, 150px);
    grid-gap: .5rem;
  }

  h1, h3 { font: bold 20px "Cabin"; }

  .section h2 { font: bold 14px "Cabin"; line-height: 1.5em; margin-top: 16px; }

  nav ul.filter{
    font:15px/33px "Cabin";
    margin: 0;
  }

  nav aside{
    font-size: 16px;
    line-height: 20px;
    margin-top: 7px;
  }

  #types li{
    line-height: 24px;
  }

  #types .section ul li:not(.collection) a{
    font:15px/22px "Courier Prime";
  }


  footer{
    border-top: 1px dotted #666;
    font-style: italic;
    padding-left: 0;
    margin-left:215px;
  }
}