/** initial setup **/
.nano { position:relative; width:100%; height:100%; overflow:hidden; }
.nano .content        { position:absolute; top:0; right:0; bottom:0; left:0; overflow: scroll; overflow-x: hidden; }
.nano .content:focus { outline:thin dotted; }
.nano .content::-webkit-scrollbar          { visibility: hidden; }
.has-scrollbar .content::-webkit-scrollbar { visibility: visible; }
.nano > .pane { position:absolute; width:6px; top:0; right:0; bottom:0; background:rgba(0,0,0,.25);  border-radius:3px; visibility:hidden\9; opacity:.01; 
  -webkit-transition    :.2s;
  -moz-transition       :.2s;
  -o-transition         :.2s;
  transition            :.2s;
  -moz-border-radius    :3px;
  -webkit-border-radius :3px;  
 
}
.nano > .pane > .slider { position:relative; margin:0; background:rgba(0,0,0,.5); border-radius:2px;
  -moz-border-radius    :2px;
  -webkit-border-radius :2px;
}
.nano:hover > .pane, .pane.active, .pane.flashed { visibility:visible\9; opacity:0.99; }

/* setting */

.nano .content {}
.nano .pane    { background: #EDEDED; width:6px; margin:3px; right: 1px; }
.nano .slider  { background: #111; }