/* Scroll Bar Master Styling Starts Here */
/* All comments can be freely removed from the css */

#mycustomscroll {
/* Typical fixed height and fixed width example */
border: thin solid #143F60;
width: 175px;
height: 400px;
overflow: auto;

/* IE overflow fix, position must be relative or absolute*/
position: relative;
background-color: white;
margin: 0.3em auto;
padding: 10px;
}

/*  scrollgeneric is used for corrective styling of elements, and should not be modified or removed */ 
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbar {
width: 17px;
background: #5EC0A7 url('../images/scrollbar.png') -51px 0px repeat-y;
/* do not forget to put colors for backgrounds for before image(s) can load , this is more important for
the scrollbar itself than the scrollbase, as user can live without an image on the base but cannot see
any scrollbar when images cannot load. */
}

.vscrollerbarbeg {
/* height of this element is normally auto set to fit the scrollbase, to cover the base... */
height: 15px !important;
/* ...unless we force the size using an !important decleration */
/* forcing would not be required if Webkit-Safari did not have a background-repeat bug*/
/* this may be fixed by the time Safari 3.0 is released. */
width: 17px;
background: url('../images/scrollbar.png') -17px 0px no-repeat;
}

.vscrollerbarend {
/* height of this element should be set */
height: 15px;
width: 17px;
background: url('../images/scrollbar.png') -17px -19px no-repeat;
}

.vscrollerbase {
width: 17px;
background: #D4F6F2 url('../images/scrollbar.png') 0px 0px repeat-y;
}

.vscrollerbasebeg {
/* height of this element is auto set to fit the scrollbase, to cover the base */
/* this element can be used to place a faux top arrow image */
width: 17px;
height: 15px !important; /*Again, the safari fix, normally this line is not needed.*/
background: url('../images/scrollbar.png') -34px 0px no-repeat;
}

.vscrollerbaseend {
/* height of this element should be set */
/* this element can be used to place a faux bottom arrow image */
height: 15px;
width: 17px;
background: url('../images/scrollbar.png') -34px -19px no-repeat;
}

/* do not forget to give horizontal scrollbars some color properties even if you don't plan on using them */
.hscrollerbase {
/* Horziontal scrollbar's base body */ 
height: 17px;
background: #D7EBDF url('../images/hscrollbar.png') 0px -51px repeat-x;
}

.hscrollerbasebeg {
/* Horizontal scrollbar's left-cap */
/* This may be used for holding the left arrow */
background: url('../images/hscrollbar.png') 0px -17px no-repeat;
height: 17px;
/* width of this element is normally auto set by the script to fit the scrollbase, to cover the base... */
width: 15px !important; /* Safari BG repeat fix */
}

.hscrollerbaseend {
/* Horizontal scrollbar's right-cap */
/* This may be used for holding the right arrow */
height: 17px;
width: 15px;
background: url('../images/hscrollbar.png') -19px -17px no-repeat;
}

.hscrollerbar {
height: 17px; 
background: #99CBCB url('../images/hscrollbar.png') 0px 0px repeat-x;
}

.hscrollerbarbeg {
/* Left image holder for horizontal scrollbar */
background: url('../images/hscrollbar.png') 0px -34px no-repeat;
height: 17px;
/* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering
engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top
image to repeat on certain sizes. In this style, we do not need our script to strech the
vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */
width: 15px !important;
}

.hscrollerbarend {
/* Right image holder for horizontal scrollbar */
background: url('../images/hscrollbar.png') -19px -34px no-repeat;
height: 17px;
width: 15px;
}

.vscrollerbar, .hscrollerbar {
/* paddings of these elements will decide how far the scrollbar will stop in both ends, and are not actually
used for styling, and are set to 0 by the script, here we will set them the size of our faux arrows */
padding: 17px;
z-index: 2;
}

/* properties for scroller jog box, just in case */
.scrollerjogbox {
/* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */
background: #4E727C url('../images/corner.png') 0px 0px;
width: 17px;
height: 17px;
top: auto; left: auto;
bottom: 0px; right: 0px;
}

/* Scroll Bar Master Styling Ends Here */