.scrollBar .bar {                   /* the top arrow but influences the height of the horizontal bar and therefore the compulsory padding at bottom */
	width:8px;                     /* 20px */
	height:8px;                    /* 20px */
}

.scrollBar .button{                /* top and bottom arrows */
	width:8px;                     /* 20px */
	height:8px;                    /* 20px */
	background-color:black; 
	outline:none;
	background-position:top center;
	background-repeat:no-repeat;
}

.scrollBar .button.topButton{      /* the top arrow */
	background-image:url(./images/scrollers/up-scroll.gif);
}

.scrollBar .button.bottomButton{   /* the bottom arrow */
	background-image:url(./images/scrollers/down-scroll.gif);
}

.scrollBar .button.leftButton{
	background-image:url(./images/scrollers/left-scroll.gif);
}

.scrollBar .button.rightButton{
	background-image:url(./images/scrollers/right-scroll.gif);
}

.scrollBar .button.active{         /* top and bottom arrows WHEN ACTIVE */
	background-position:bottom center ;
}

.scrollBar .knob{                  /* the dragger - what is this height supposed to represent? */ 
	height:8px;                    /* 20px */
}

.scrollBar .knobHorizontalTip{
	width:1px;                     /* 12px */
	position:absolute;
	background-position:left center;
	background-repeat:no-repeat;
}

.scrollBar .active .knobHorizontalTip{
	background-position:right center;
}

.scrollBar .leftTip{
	left:0;
	background-image:url(./images/scrollers/draggerh-tip.gif);
}

.scrollBar .rightTip{
	right:0;
	background-image:url(./images/scrollers/draggerh-tip.gif);
}

.scrollBar  .knobHorizontalFill{
	background-color:black;
	background-position:top center;
	background-repeat:repeat-x;
	background-image:url(./images/scrollers/draggerh.gif);
	margin:0 1px;                    /* 12px */
}

.scrollBar .active .knobHorizontalFill{
	background-position:bottom center;
}

.scrollBar .knobVerticalTip{         /* two individual images serving extensions to the dragger - rounded tips eg */
	height:1px;                      /* 12px */
	background-position:top center;
	background-repeat:no-repeat;
}

.scrollBar .active .knobVerticalTip{ /* the above two individual images WHEN ACTIVE */
	background-position:bottom center;
}

.scrollBar .knobVerticalFill{        /* the dragger BOTH ACTIVE AND INACTIVE */
	background-color:black;
	background-position:left center;
	background-repeat:repeat-y;
	background-image:url(./images/scrollers/draggerv.gif);
	position:absolute;
	bottom:1px;                       /* 12px */
	top:1px;                          /* 12px */
}

.scrollBar .active .knobVerticalFill{ /* the dragger WHEN ACTIVE */
	background-position:right center;
}

.scrollBar .topTip{                   /* top extension BOTH ACTIVE AND INACTIVE */
	background-image:url(./images/scrollers/draggerv-tip.gif);
}

.scrollBar .bottomTip{                /* bottom extension BOTH ACTIVE AND INACTIVE */
	position:absolute;
	bottom:0;
	background-image:url(./images/scrollers/draggerv-tip.gif);
}

.scrollBar .knob.active{              /* dragger and its extensions when active */
	border:none;
}

.scrollBar .corner{                   /* only present when two scrollbars intersect */
	background:black url('images/scrollers/dragger-intersection.gif') center center no-repeat;
}