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

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


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

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

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





/***************************************/
/* ToC Layout */
#ref{ margin-top:40px; margin-bottom:0;}
#lib{ padding-bottom:20px; }
#ref .section{ min-height:180px; }
#lib .section{ min-height:150px; }
#tut .section{ min-height:150px; }

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

h1{
  position:absolute;
  width:120px;
  margin-left:14px;
}

.sections{
  padding-left:215px;
  min-width:300px;
  overflow:auto;
}


/* the column-of-links used repeatedly in each third of the page */
.section{
  float:left;
  width:135px;
  /*margin-right:15px;*/
  position:relative;
}

.section a{
  font-style:italic;
}

.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 li a+a:before{
  /* draw slashes between reference links on the same line */
  content:" / ";
  color:#888;
  font-weight:bold;
}

/***************************************/
/* overlapping command/type/compat-specific ul's in each section column */
.section ul{
  list-style-type:none;
  padding:0;
  float:left;
}

/* class names should be monospaced */
.section ul.types a{
  font:13px/22px "Courier Prime";
}
.section ul.types li{
  max-height:18px;
}

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

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

#ref .sections ul{
  position:absolute;
  pointer-events:none;
  opacity:0;
  /*-webkit-transition: opacity .333s;*/
  background:white;
}

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


/***************************************/
/* the Commands/Types/Etc. toggle */
ul.filter{
  position:absolute;
  left:14px;
  margin-top:30px;
  font:12px/19px "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;
}


.sidebar{
  font-style:italic;
  font-size:14px;
  line-height:18px;
  position:absolute;
  top:63px;
  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{
  color:#888;
  /*font: 14px/20px "Cabin";*/
  font:italic 16px/22px "chaparral-pro", "Alegreya";
  padding:7px 0 0 215px;
  border:0;
}

footer a{
  color:#888;
}

footer:hover a{
  color:#555;
}


/***************************************/
/* 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{
  position:relative;
  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 homepage (from the ToC) */
nav h1 a{ color:black; }
nav h1 span{opacity:1; -webkit-transition:opacity .333s;}
nav h1:hover span{ opacity:0; }



nav h1 a{ color:inherit; }
nav h1:after{
  content:".io";
  position:absolute;
  pointer-events:none;
  left:84px;
  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;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
  .section{
    width:130px;
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
  body, html, pre{
    -webkit-text-size-adjust: 100%;
    /*font-size:15px;*/
  }

  /* row layout */
  #ref{ margin-top:0px; margin-bottom:0;}
  #lib{ padding-bottom:20px; }
  #ref .section{ min-height:190px; }
  #lib .section{ min-height:150px; }
  #tut .section{ min-height:150px; }



  body.commands,
  body.types,
  body.compat{
    -webkit-text-size-adjust: 100%;
  }

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

  nav h1{
    width:60%;
    margin:8px 0 12px 0;
  }
  nav h1:hover span{ opacity:1; }

  nav.link.tut h3{
    position:absolute;
    left:6px;
    top:120px;
  }


  #tut h1, #lib h1, #ref h1{
    position:static;
    float:left;
    margin:16px 0;
    width:100px;
  }
  #ref h1{ margin-bottom:0;}

  ul.filter{
    position:static;
    float:left;
    clear:left;
    font:14px/26px "Cabin";
    color:#888;
    padding-left:0;
    list-style:none;
    width:auto;
    left:auto;
    margin:0;
  }

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

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


  .sidebar{
    display:none;
  }

  .sections{
    padding:0;
    float:left;
  }

  #ref .sections{
    /*padding-top:0;*/
  }

  .sections .section{
    width:100px;
    margin-left:1px;
    /*width:96px;
    margin-left:5px;*/
  }

  footer{
    padding:7px 0 0 0;
    -webkit-text-size-adjust: 100%;
  }

  footer br{
    /*display:none;*/
  }