/**
 * Always use a CSS compressor, because the CSS for complex scrollbars can be
 * quite verbose.
 *
 * HTML structure utilized in this scrollbar:
 * <div class="jssb-y">
 *     <div class="jssb-y-track">
 *         <div class="jssb-y-track-mid"></div>
 *         <div class="jssb-y-track-end"></div>
 *         <div class="jssb-y-thumb"></div>
 *     </div>
 * </div>
 */
/* Default state without jsScrollbars enabled */
/* Older browsers and browsers without javascript get this */

.jssb-content {
  overflow: auto;
  /* Fill height of container */
  
  height: 100%;
}
/* Enable jsScrollbars in capable browsers */

.jssb-applied > .jssb-content {
  overflow: hidden;
  /* We'll use positioning to size the content, so reset height to auto */
  
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* Shrink the content a little to make room for the scrollbars */
/* Vertical scrollbar is on the left */

.jssb-scrollx .jssb-content {
  bottom: 16px;
}

/* Hide scrollbars by default */

.jssb-x, .jssb-y {
  display: none;
}
/* Show scrollbars when needed */

.jssb-scrollx .jssb-x, .jssb-scrolly .jssb-y {
  display: block;
}
/**
 * HORIZONTAL SCROLLBAR
 */
/* Set horizontal scrollbar position and size in the container */

.jssb-x {
  position: absolute;
  /* 0 pixels from the bottom and each side */
  
  bottom: 0;
  left: 0;
  right: 0;
  /* The thumbs are taller, but the track is only 4px */
  
  height: 4px;
}
/* Set horizontal scrollbar position when vertical scrollbar is present */
/* It needs to shorten up some to make room for the vertical scrollbar */

.jssb-scrolly .jssb-x {
  left: 10px;
}
/* Load in image sprite into all the scrollbar elements */

.jssb-x-thumb, .jssb-x-track, .jssb-x-track-mid, .jssb-x-track-end {
  /*background: url(//drh.img.digitalriver.com/DRHM/Storefront/Site/razerusa/cm/images/private_store/jsscrollbar/min-scrollbar-x.png) no-repeat 0 0;*/
  position: absolute;
  /* Expand to fill available height */
  
  top: 0;
  bottom: 0;
}
/* Left track cap */

.jssb-x-track {
  left: 0;
  right: 0;
}
/* Tiled mid-section */

.jssb-x-track .jssb-x-track-mid {
  background-position: 0 -4px;
  background-repeat: repeat-x;
  left: 14px;
  right: 14px;
}
/* Right track end cap */

.jssb-x-track-end {
  background-position: right -8px;
  right: 0;
  width: 14px;
}
/* Thumb element position */
/* This is going to be a fixed width, so no need for other thumb sections */

.jssb-x-thumb {
  background-position: 0 -24px;
  /* The track is only 4px, so this needs a height and to be repositioned */
  
  height: 12px;
  /*top: -4px;*/
  /* Fixed thumb width */
  
  width: 53px;
}
/* Thumb click state */

.jssb-x-thumb-click {
  background-position: 0 -36px;
}
/**
 * VERTICAL SCROLLBAR
 */
/* Set vertical scrollbar position and size in the container */

.jssb-y {
  position: absolute;
  /* 0 pixels from the left, top and bottom */
  
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
}
/* Set vertical scrollbar position when horizontal scrollbar is present */
/* It needs to shorten up some to make room for the horizontal scrollbar */

.jssb-scrollx .jssb-y {
  bottom: 10px;
}
/* Load in image sprite into all the scrollbar elements */

.jssb-y-thumb, .jssb-y-track, .jssb-y-track-mid, .jssb-y-track-end {
  /*background: url(//drh.img.digitalriver.com/DRHM/Storefront/Site/razerusa/cm/images/private_store/jsscrollbar/min-scrollbar-y.png) no-repeat 0 0;*/
  position: absolute;
  /* Expand to fill available width */
  
  left: 0;
  right: 0;
}
/* Top track cap */

.jssb-y-track {
  top: 0;
  bottom: 0;
}
/* Tiled mid-section */

.jssb-y-track .jssb-y-track-mid {
  background-position: -4px 0;
  background-repeat: repeat-y;
  top: 14px;
  bottom: 14px;
}
/* Bottom track end cap */

.jssb-y-track-end {
  background-position: -8px bottom;
  bottom: 0;
  height: 14px;
}
/* Thumb element position */
/* This is going to be a fixed height, so no need for other thumb sections */

.jssb-y-thumb {
  background-position: -24px 0;
  /* The track is only 4px, so this needs a width and to be repositioned */
  
  width: 12px;
  /*left: -4px;*/
  /* Fixed thumb height */
  
  /*height: 53px;*/
}
/* Thumb click state */

.jssb-y-thumb-click {
  background-position: -36px 0;
}

/* Custom */
.jssb-y-up {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  font-size: 0px;
}
.jssb-y-track {
  width: 10px; 
  position: absolute;
  top: 20px;
  background-color: #000;
}
.jssb-y-thumb {
  position: absolute;
  width: 10px;
  background-color: #fff;
}
.jssb-y-down {
  position: absolute;
  width: 10px; 
  height: 10px;
  background-color: #fff;
  font-size: 0;
}