win8 style scrollbar

win8_scrollbar.css

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    scrollbar{
    -moz-appearance: none !important;
    background: rgb(220,224,228) !important;
    }

    scrollbarbutton{
    -moz-appearance: none !important;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFLSURBVDhPtZK/SgNBEIcXNEEh2EgQ7nZm9i/KNioniFpY+A52gpUPIIIgKIhvYGtjbeVT2KmNRCsfwMLa6IVzNrcSJGhi4Qd3cDPz/ZhdTvwbm0JMeoBdj7gXQmim8ngURdGwAPsGqWuRSiflMRFNpfbvFIVoWIkHLL85bSrPD4d8GMSTkSGFEA0H+SEL3SgaolcOekkhPQ1wKqWcTuPfiem89tGXbIGeFeIO17Yt4FMKKS3BWTu0W0mrWciyWZPDOQ+81zJ2TJZtpbbg9Te4dh97jlTPAFxorefqbhBNJ/HSk6rPC9CJQt0cMA+wYvohuvJKV+xchXZoifjic5ZRZvHBEq0lZwhPtOQAbtMmFQBkwjk3w1JpER9Vnq+m2R9RSi3yce6c4o2lz/sBmvDaZtl6mhmJI1rme7hhB+L3xOBCxifKf/5DhxHiEzOwVIdXYPWPAAAAAElFTkSuQmCC) no-repeat left center transparent!important;
    width:16px!important;
    height:20px!important;
    margin-left:0!important;
    padding:0!important;
    border:none!important;
    }
    scrollbarbutton:hover,scrollbarbutton:active{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEISURBVDhPtY7BSgJhFIUHISvIhSFErnoBRUGh3iDatG4lvkNBi8C2LnuJVj6DIIJKCD1CbVzE0CKKFKaZv+/amWLMiQw68PHfufecO9f7V0VRtAO7+lxNBEswhFuoqf07EShD10nUA6hr/LPwVzD3PqJfojeCfdmWC0MV+sq4MAw7cK1PW3IDB7InFQTBIcOhjFOCV7zbvu/nqNvUz/Mtzo3xHis2PznD8ATTvU2pZzyXsCGLedbgPF6Cd0LdtL6dvQl3NrAwtKyn7KforcMZvMj7wFOw7VtqvMEFfAvHwpZlfgqvyhStmad45E2cnSY8tsQueaLei087gtQ/L0pLGrx5tf4qz3sHv/VDvkuqs6IAAAAASUVORK5CYII=) no-repeat left center rgb(185,185,185)!important;
    }
    scrollbar[orient="vertical"] scrollbarbutton[type="increment"]{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFHSURBVDhPtVHPK0RRFL4ZvzULTZoZvXvOuT/Mq7d9JSxM/AvYWCsRZcFO2fgnrPw7kjKShb2S1EgsLNTzXd0I02SSr069c/q+75zvPvVnJEky4omWvfdDcfQblLxIs1qtjikiGnckt45oN8/zgUjohpJh3nAsdyLCKq2kZTQF6sUy72RZNhiJP7ACsRVZtyyPU8YWWutJldfro5b4pmFdMHkOl3QyaSrV75k3nchD4FrNbV+rTagDpfogWrOI0YBrMLFEe9/iBM6WF9NOg5j5Hv12ptTnIkO0hEtagQCTJ5gcpmmlzMzD+N7/2CxyhUtWo+wr4DoH4tl7HDEF+mOb6CPMXmPES5gtRnpnYOMsiKchjmeDkqJhgpgvUAuR1h04cQbkk/DSoRyZc/wyvGMPMMZMYzu2yjXE83HcGxBHvNYutv8Bpd4A4DNUBNdLowsAAAAASUVORK5CYII=) no-repeat left center transparent!important;
    }
    scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:hover,scrollbar[orient="vertical"] scrollbarbutton[type="increment"]:active{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAANCAYAAACgu+4kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEmSURBVDhPpZG9SgNREIU3WJjIGrVIkQh2kkLBaJV3SJX3sPMBRAJCCOIrpBILWxtbTZqgdnmAxSKw3Vb7f/1mMyuYf/GDw9ydOWf2smv9G2PMlud5FX3cGHJ7kpXDfpIkL9SGztaSpmkdPaCqPJRZEKL3IAhO1bMU3/eP8b7yQkP2UG5gc0ikEcfxiCVn6p2DcB3Pm3gFcjW5wTZ60p7Rm5xr5gd6J8wGapPwMypnQw5Vhn2U3+QjDMNmNgTCF4yGWRLwP1KOdDyFho3pNl9CGWNsoxb6lJ4QRdE95UBjv2FQJNjJlxCcoC85C7TvKLbaF+M4TgnjDYqnsWyRhHuu6+6qbTUESnyHa0KpLKB2KavfPAtL5O9coivCO9r+O4QLelyAZX0DfPVGJQ0LgEQAAAAASUVORK5CYII=) no-repeat left center rgb(185,185,185)!important;
    }
    scrollbar[orient="horizontal"] scrollbarbutton{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFeSURBVDhPhZI7SgRBEIZnF98PEGVZZ6e7+jnOMoIgKgiewszUyAsYCIJoYOARTAXByAuYu4IYaGZiIngBQVBWxr9nesHBVr9kHn/VX1XdFf3DUN5qTWVZNi2EmMF3s/odoNvpzBlO50bIVyvlm+H8ijE26+U6cBvTjJ+mUhULSheG6F5zvgqpUUV8wwUrzg8NiX6qVGE5v7NCLHu5Tp7nIyi9b4QL1oWGs2Jszct1VqJoGGX34PzhnNHGg02SdS/XsdaOGka7cHx3zqjyhPcNL/+ggR63NYkqWMgXzdiW14I0Ui530MqnT3hGwqbXwsRxPKEZHQyGxfk/YgaM9QflHJwfoT1UKoe+/fU4B+Amxy1jx2irSGV5rDcqSZa8HKbdbk+i0kmZVF3ctSXKvRzGLRxW48ythr/AHkwWvRwGKzKP4S+tkH0sX6GILtzWejlMC5W6RHHK0oTwjKKo+QUPJ1MhinJs5AAAAABJRU5ErkJggg==) no-repeat top center transparent!important;
    width:20px!important;
    height:16px!important;
    }
    scrollbar[orient="horizontal"] scrollbarbutton:hover,scrollbar[orient="horizontal"] scrollbarbutton:active{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEqSURBVDhPfZK9SsRAFIXdRd31Z0G0WfENFARRQfAp7Gyt9gUsBGHRwsJHsBUEK1/AXgVjoZ0pbCSmDQhCkknGb8IJMuzgB4c72XPO3BB26j+stdNosa7rAXMJdWVNQmgF3aDvqqp+jDH3WZYty/bhpj7BK2YDhdeiKHY4dhT5gx/7ZVmeUTAKv3Deku2DP8vqU9SEGe7mXdk+URTNYJ5wY6Gb37h5T7YPRo/bjlHuwjx/UN6X7YPfIXhEqA1/oUPZk6gw4hUqFT7RgewwSZLMUxqj9su8M7Zlh4njuEfwvN3EeGZT+HO2EJgjeKGOKz3leb4pO0yapgsELyk3Jd7ygfO67DDk3B/uumkApUc2bcgOQ25I6Q4Zt42tt8yB7DCU3KZVtOamtbb7C1lxSqjtD3WzAAAAAElFTkSuQmCC) no-repeat top center rgb(185,185,185)!important;
    }
    scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]{    
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFeSURBVDhPfZK9SgNBEMePxIhfhQoajtztfOwaJUVADrEQvEewEltbBQsFLSwtfQwrn0MEIYpY+AQpFEQiahG0OWdzYxHv4q+5sL/M7cx/LvAAwIQxZq7Vas2EYTg1OPwPR7RtDT47pD4b6HIMu3JczW0JURRNsjHHFvBriThjwK5F3FI9khoBHEnRR5NtJs8OYmNdXTlJktTY4IkD/PRFjHhjjU1UlyODj8tNpxbpvUmDm64llFXV5fjULMC5FH37maToiqjRVl2Oc25BgriU9jItuvPRqy4it8xyHF/8Fkhyj5LmvOphkiSoSUtnjrivb+9QFK2pHiZN0zEZ+lCW2FvO471FxJHxVmXjBw7xbZldJr/v2fCGugIVefO+JNPLF0cPiNGmumH8wpz/s2x50DPSk3waO6qLSAuppPAqfWfy8b1QDHt+FtVF2vX6tAwGK8aEzLwoR5Xc/CUIfgB4W1RHTJ53ywAAAABJRU5ErkJggg==) no-repeat top center transparent!important;
    }
    scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:hover,scrollbar[orient="horizontal"] scrollbarbutton[type="increment"]:active{
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEQSURBVDhPfZG/asJQHEaDRtHqYAotOPkGhSKlQ6F9BCdxda3QoQUdHDv2MTr1OUQotFIcfAIHCyKWpkOw5E/PDZ9DzKUfHHKT8/0Scq9jkiRJBTyow1H68L9Q6sZx/AkBLLnvQ1E6H0pVGMKOYhJF0ZJ1R9oeeiVKD+CbIa5vcCltj4ZG8KOhVy5taXsolCmO4VtDUziXtodehf94gl8NTeBM2h7f908YeDEDygw86XyQDQae0yrhCws4ls4GX6L8SCFQ2ezYhXQ2eBd5D1uV38G+vfgi8g6+VP6AK+ls8AXkAPZvnsO1dDZ4c2CmvD/lVRiGPel8KNzARuU15VuWrnQ+lGrQgiacUi5IHcRx/gD/vkZiD3GlrwAAAABJRU5ErkJggg==) no-repeat top center rgb(185,185,185)!important;
    }
    thumb {
    -moz-appearance: none !important;
    background: rgb(120,200,230) !important;
    background: rgb(185,185,185) !important;
    border:none!important;
    padding:0!important;
    width:16px!important;
    min-width:16px!important;
    max-width:16px!important;
    margin-right:0px!important;
    }
    scrollbar[orient="horizontal"]{
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    }

    thumb:hover,thumb:active{
    -moz-appearance: none !important;
    background-color: rgb(155,200,234) !important;
    }
    
    scrollbar[orient="vertical"] {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    padding:0 0 0 1px!important;
    }
    scrollbar[orient="horizontal"] {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding:1px 0 0 0!important;
    }