/** initial setup **/ .nano { position: relative; width: 100%; height: 100%; } .nano .content { position: absolute; overflow: scroll; overflow-x: hidden; padding: 15px 0; top: 0; right: -34px; left: 0; bottom: 0; left: 0; outline: none } @media screen and (max-device-width:1024px) { .nano .content { right: -17px; } } .nano .pane { background: #bfbfbf; position: absolute; width: 10px; right: 0; top: 0; bottom: 0; visibility: hidden\9; /* Target only IE7 and IE8 with this hack */ opacity: .01; -webkit-transition: .2s; -moz-transition: .2s; -o-transition: .2s; transition: .2s; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .nano .pane .slider { background: #9d9d9d; position: relative; margin: 0 1px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .nano:hover .pane, .pane.active, .pane.flashed { visibility: visible\9; /* Target only IE7 and IE8 with this hack */ opacity: 0.99; }