div#scrollBar {

	display: block; /* initially display:none; to hide from incapable */
	float: right;

}

div#scrollContainer {

	float: left;
	height: 507px;
	overflow: hidden;
	position: relative;
	width: 383px;

}

div#scrollBar {

	font-size: 1px; /* so no gap or misplacement due to image vertical alignment */
	height: 507px;
	left: 0;
	position: relative;
	top: 0;
	width: 11px;

}

div#scrollUp {

	left: 0;
	position:relative;
	top: 0;

}  

div#scrollDown {

	left: 0;
	position: absolute;
	bottom: 0;

}

div#track {

	background-color: #ffffff;
	left: 0;
	height: 507px;
	position: absolute;
	top: 0;
	width: 11px;

}

div#dragBar {

	/*background: #7d7e80 url(../images/dragBar.jpg) center no-repeat;*/
	background: #e81d0a url(../images/dragBar.gif) center no-repeat;
	height: 59px;
	left: 0;
	position: absolute;
	top: 0;
	width: 11px;

}  

/* for safari, to prevent selection problem  */
div#scrollBar, div#track, div#dragBar, div#scrollUp, div#scrollDown {

	-moz-user-select: none;
	-khtml-user-select: none;

}

/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div#scrollBar img {

	display: block; 

}