/**
 * TrackpadScrollEmulator
 * Version: 1.0.1
 * Author: Jonathan Nicol @f6design
 * https://github.com/jnicol/trackpad-scroll-emulator
 */

 .tse-scrollable {
  position: relative;
  width: 200px; /* Default value. Overwite this if you want. */
  height: 300px; /* Default value. Overwite this if you want. */
  overflow: hidden;
  }
  .tse-scrollable .tse-scroll-content {
    overflow: hidden;
    overflow-y: scroll;
    }
    /* No longer using ::scrollbar too, since it breaks Chrome 25 */
    .tse-scrollable .tse-scroll-content::-webkit-scrollbar {
      width: 0;
      height: 0;
      }
.tse-scrollbar {
  z-index: 99;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 11px;
  }
  .tse-scrollbar .drag-handle {
    position: absolute;
    right: 2px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    min-height: 11px;
    width: 7px;
    opacity: 0.7;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    background: #6c6e71;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    }
  .tse-scrollbar:hover .drag-handle {
    /* When hovered, remove all transitions from drag handle */
    opacity: 0.7;
    -webkit-transition: opacity 0 linear;
    -moz-transition: opacity 0 linear;
    -o-transition: opacity 0 linear;
    -ms-transition: opacity 0 linear;
    transition: opacity 0 linear;
    }
    .tse-scrollbar .drag-handle.visible {
      opacity: 0.7;
      }
/* Used when testing the scrollbar width */
/* No longer using ::scrollbar too, since it breaks Chrome 25 */
.scrollbar-width-tester::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* Horizontal scroller */
.tse-scrollable.horizontal .tse-scroll-content {
  overflow-x: scroll;
  overflow-y: hidden;
  }
  .tse-scrollable.horizontal .tse-scroll-content::-webkit-scrollbar,
  .tse-scrollable.horizontal .tse-scroll-content::scrollbar {
    width: auto;
    height: 0;
    }
.tse-scrollable.horizontal .tse-scrollbar {
  top: auto;
  left: 0;
  width: auto;
  height: 11px;
  }
  .tse-scrollable.horizontal .tse-scrollbar .drag-handle {
    right: auto;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto;
    }
	 
	 
/* TSE on catalog page */
/**
 * TrackpadScrollEmulator
 * Version: 1.0.1
 * Author: Jonathan Nicol @f6design
 * https://github.com/jnicol/trackpad-scroll-emulator
 */

 .tse-scrollable {
  position: relative;
  width: 200px; /* Default value. Overwite this if you want. */
  height: 300px; /* Default value. Overwite this if you want. */
  overflow: hidden;
  }
  .tse-scrollable .tse-scroll-content {
    overflow: hidden;
    overflow-y: scroll;
    }
    /* No longer using ::scrollbar too, since it breaks Chrome 25 */
    .tse-scrollable .tse-scroll-content::-webkit-scrollbar {
      width: 0;
      height: 0;
      }
.tse-scrollbar {
  z-index: 99;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 11px;
  }
  .tse-scrollbar .drag-handle {
    position: absolute;
    right: 2px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    min-height: 11px;
    width: 7px;
    opacity: 0.7;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    background: #6c6e71;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    }
  .tse-scrollbar:hover .drag-handle {
    /* When hovered, remove all transitions from drag handle */
    opacity: 0.7;
    -webkit-transition: opacity 0 linear;
    -moz-transition: opacity 0 linear;
    -o-transition: opacity 0 linear;
    -ms-transition: opacity 0 linear;
    transition: opacity 0 linear;
    }
    .tse-scrollbar .drag-handle.visible {
      opacity: 0.7;
      }
/* Used when testing the scrollbar width */
/* No longer using ::scrollbar too, since it breaks Chrome 25 */
.scrollbar-width-tester::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* Horizontal scroller */
.tse-scrollable.horizontal .tse-scroll-content {
  overflow-x: scroll;
  overflow-y: hidden;
  }
  .tse-scrollable.horizontal .tse-scroll-content::-webkit-scrollbar,
  .tse-scrollable.horizontal .tse-scroll-content::scrollbar {
    width: auto;
    height: 0;
    }
.tse-scrollable.horizontal .tse-scrollbar {
  top: auto;
  left: 0;
  width: auto;
  height: 11px;
  }
  .tse-scrollable.horizontal .tse-scrollbar .drag-handle {
    right: auto;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto;
    }
	 
	 
/* TSE on catalog page */
#contentBox {
  width: 100%;
  height: 100px;
}
.tse-scrollable__contentBox .drag-handle {
  opacity: 1 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important;
}
.tse-scrollable {
  position: relative;
}
.tse-content {
  padding: 0 50px;
  width: auto
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
}
.tse-content .categoryItem {
  overflow: hidden;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: auto;
  min-width: 100px;
  height: 100px;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
  vertical-align: top;
  text-align: center;
}
.tse-content .categoryItem a {
  text-decoration: none;
  display: block;
}
.tse-content .categoryItem img {
  width: auto;
  max-width: 200px;
  height: auto;
  max-height: 100px;
}
.hover-scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  background-color: rgba(255,255,255,0.9);
  background-image: url(/temp/img/contentScroll/contentScroll_arrows.png);
  background-repeat: no-repeat;
  opacity: 0.95;
  cursor: pointer;
}
.hover-scroll:hover { opacity: 1; }
.hover-scroll_left { left: 0; background-position: left center; }
.hover-scroll_right { right: 0; background-position: -50px center; }
.tse-scrollbar { height: 0 !important; }