Google Docs Custom Scrollbars

HTML

<div class="scrollbar-container">
    <div class="inner">
        <p>Hi there! Nice scrollbar, isn't it? asd asdasldaskj dkaskdakskdjlaksllkd kjlaskjldkjlasjlkdkjlaskjdlkjal kjlaskjldkjlaskjdkjlaskjldjklajlkdkjslalksdlkj kasd askjdlasjkdkjljkalslkjdjkalsjkdlafhhalkfkjakj sad</p>
        <p>See <a href="http://stackoverflow.com/questions/7742143/how-are-scrollbars-in-new-google-docs-ui-styled-esp-the-arrow-buttons" target="_blank">this question at StackOverflow</a> for background info.</p>
    </div>
</div>

CSS

.scrollbar-container {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: 20px;

    border: 4px solid rgba(0, 0, 0, 0.2);
    overflow: auto;
    background-color: whiteSmoke;
}
.scrollbar-container .inner {
    height: 2011px;
    padding: 1em;
    background-color: white;
    font-family: sans-serif;
}

::-webkit-scrollbar {
    background: transparent;
    border: rgba(0, 0, 0, 0.2) solid;
}
::-webkit-scrollbar:vertical {
    border-width: 0 0 0 1px;
    width: 11px;
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* These rules are for scrollbar draggable panel */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3) inset;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
}

/* These rules are for buttons */
::-webkit-scrollbar-button:start{display:none}
::-webkit-scrollbar-button:end{display:block}

::-webkit-scrollbar-button:vertical:increment {
    background: no-repeat url("https://ssl.gstatic.com/docs/spreadsheets/waffle_sprite27.png") -21px 0;
    height:15px;
}
::-webkit-scrollbar-button:vertical:decrement {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: no-repeat url("https://ssl.gstatic.com/docs/spreadsheets/waffle_sprite27.png") -70px -62px;
    height: 16px;
}