Webkit custom scroll bars

Webkit browsers such as Safari and Chrome support some superb CSS3 styling.
They are ( even thought I use firefox as my primary browser ) the most advanced browsers.

For a while now I have created custom scroll bars using a Javascript library called Mootools, other libraries such as jQuery and Prototype can do this too, but here is one easy way to do it with CSS alone;

here is the simple code, if you know CSS it will be self explanatory, else I have added some commenting

/* we are a webkit browser, lets style our scroll bar */
@media screen and (-webkit-min-device-pixel-ratio:0) {

	html{
		/* hide overall scrolling */
		overflow: auto;
	}
	body {
		/* absolute position our 'body' and allow for the width of the scroll bar */
		position: absolute;
		left: 0;
		top: 0;
		right: 10px;
		bottom: 0;
		padding-right: 10px;
		overflow-x: auto;
		overflow-y:scroll;
	}


	::-webkit-scrollbar {
		/* set the width of the scroll bar */
		width: 10px;
	}

	::-webkit-scrollbar-button:start:decrement, 
	::-webkit-scrollbar-button:end:increment {
		/* hide the arrows */
		display: block;
		height: 10px;
	}

	::-webkit-scrollbar-track-piece {
		/* set the style/colour of the scroll bar background */
		background: 
		-webkit-gradient(
			linear, 
			0 0, 
			100% 0, 
			from(rgba(0,0,0,0.2)), 
			to(rgba(0,0,0,0.12))
		);
		-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.35);
		-webkit-border-radius: 5px;
	}

	::-webkit-scrollbar-thumb:vertical{
		/* this is the acutal scrooll bar, set the colours here to match your site */
		/* I have used grey's (#464646 & #383838 & #cccccc) */
		background: 
		-webkit-gradient(
			linear, 
			0 0, 
			100% 0, 
			from(#464646),
			to(#383838)
			);
			-webkit-border-radius: 6px;
			border: 3px solid #cccccc;
			-webkit-background-clip: padding-box;
		}
		::-webkit-scrollbar-track-piece:horizontal{
			background: none;
			-webkit-box-shadow:none;
		}
		::-webkit-scrollbar:horizontal{
			height: 16px;
		}
		::-webkit-scrollbar-thumb:horizontal{
			height: 12px;
			-webkit-border-radius:12px;
			background: 
			-webkit-gradient(
				linear, 
				0 0, 
				0 100%, 
				from(rgba(0,0,0,0.1)), 
				to(rgba(0,0,0,0.25))
			);
			border: 6px solid transparent;
			-webkit-background-clip: padding-box;
			
		}
	}
}