OSX/iOS CSS Scrollbars

Custom (webkit) CSS Scrollbars to match the OSX (10.7+) & iOS style

HTML

<meta name="viewport" content="width=device-width">

<div class="scroll">
<div class="master">
    <header>
    
        <h1>OSX/iOS CSS Scrollbars</h1>
    
    </header>
    
    <article>
        <section>
            
        </section>
        
        
    </article>
    
    <footer>
        
        
    </footer>
</div>
</div>

CSS

html {font-size: 87.5%;}

body {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    
    min-height: 416px;
    
    font: 1em/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #f2f1f0;
    overflow: hidden;
    
    box-shadow: inset rgba(0,0,0,0.2) 0 0 6px;
}

div.scroll {
    position: absolute;
    top: 0; bottom: 0; height: 100%;
    left: 0; right: 2px;  width: auto;
    overflow: scroll;
}

div.master {
    width: 80%; max-width: 1000px; min-width: 458px;
    margin: 43px auto;
    padding: 12px;
    padding-right: 3px;
}

@media screen and (max-width: 480px) {
    div.master { width: auto; min-width: 200px; padding-right: 4px;}
    div.scroll {right: 3px;}
    div.scroll::-webkit-scrollbar {width: 5px;}
}

header {
    position: fixed; z-index: 999;
    top: 0; left: -40px; right: -40px;
    width: auto; height: 22px;
    margin: 0; padding: 10px 50px;
    
    font-size: 18px; line-height: 22px;
    
    color: #fff; text-shadow: rgba(0,0,0,0.35) 0 -1px 1px;
    background: rgba(0,156,255,0.9);
    border-bottom: 1px solid rgba(0,0,0,0.15);
    box-shadow: rgba(0,0,0,0.3) 0 1px 4px,
                rgba(0,0,0,0.2) 0 0 2px,
          inset rgba(255,255,255,0.6) 0 10px 40px,
          inset rgba(255,255,255,0.05) 0 22px 0;
}

header h1 {text-align: center;}
article {
    position: relative;
    height: 1000px;
    
    background: white;
    
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.2) 0 1px 6px, rgba(0,0,0,0.4) 0 0 1px;

}

footer {
    position: fixed;
    bottom: 0; left: -40px; right: -40px;
    width: auto; min-height: 22px;
    margin: 0; padding: 10px 50px;
    
    font-size: 18px; line-height: 22px;
    
    background: rgba(50,50,50,0.9);
    border-top: 1px solid rgba(0,0,0,0.1);
    box-shadow: rgba(0,0,0,0.3) 0 0 4px,
                rgba(0,0,0,0.2) 0 0 2px,
          inset rgba(0,0,0,0.1) 0 -10px 40px;
}