
/* style block defining vertical scrollbar */
@set my-v-scrollbar
{
	//:root { background:red; }/* background of the scrollbar itself */
	.prev 
	{ 
		border:1px solid #AAA; 
		foreground-image:url( sb-v-scroll-prev.png ); 
		foreground-position:50% 50%;
		foreground-repeat:no-repeat; 
	}
	.next 
	{ 
		border:1px solid #AAA; 
		foreground-image:url( sb-v-scroll-next.png ); 
		foreground-position:50% 50%;
		foreground-repeat:no-repeat; 
	}
	.base, .next-page, .prev-page 
	{ 
		background-image:url( sb-scroll-back.png ); 
		background-position:5px 5px 5px 5px; /*left top right bottom offsets*/
		background-repeat:expand; 
	}
	.slider 
	{ 
		background-color: #FFF;
		border:1px solid #AAA; 
		foreground-image:url( sb-scroll-slider.png ); 
		foreground-position:50% 50%;
		foreground-repeat:no-repeat; 
	}
	.next:disabled, .slider:disabled, 
	.prev:disabled  { height:0; border:none; foreground-image:none; }
	.base:disabled
	{
		background-image:url( sb-scroll-base.png ); 
		background-repeat:repeat; 
		background-position:0 0 0 0;
	}
	.next:hover,   .slider:hover, 
	.prev:hover     { background-color: #EEE; }
	.next:active,  .slider:active, 
	.prev:active    { background-color: #EEE; }
	.base { width: 15px; } /* explicit declaration of its width */
	.corner { background-color: transparent; }
}

/* style block defining horizontal scrollbar */
@set my-h-scrollbar
{
	.prev 
	{ 
		border:1px solid #AAA; 
		foreground-image:url( sb-h-scroll-prev.png ); 
		foreground-position:50% 50%;
		foreground-repeat:no-repeat;
		width:system-scrollbar-width;
	}
	.next 
	{ 
		border:1px solid #AAA; 
		foreground-image:url( sb-h-scroll-next.png ); 
		foreground-position:50% 50%;
		foreground-repeat:no-repeat; 
		width:system-scrollbar-width;
	}
	.next-page, .prev-page, .base 
	{ 
		background-image:url( sb-scroll-back.png ); 
		background-position:5px 5px 5px 5px; /*left top right bottom offsets*/
		background-repeat:expand; 
	}
	.slider 
	{ 
		border:1px solid #AAA; 
		foreground-image:url( sb-scroll-slider.png ); 
		foreground-position:50% 50%;
		foreground-repeat:no-repeat; 
	}
	.next:disabled, .slider:disabled, 
	.prev:disabled  { foreground-image:none; border:none; foreground-image:none; width:0; }
	.base:disabled
	{
		background-image:url( sb-scroll-base.png ); 
		background-repeat:repeat; 
		background-position:0 0 0 0;
	}  
	.next:hover,   .slider:hover, 
	.prev:hover     { background-color: #EEE; }
	.next:active,  .slider:active, 
	.prev:active    { background-color: #FFF; }
	.base { height: 15px; } /* explicit declaration of its height */
}