@charset "utf-8";

/* * 下面这些是 jScrollPane 运行所需的 CSS 样式。 * * 在你的站点中包含这个样式表，或者将下面的样式复制粘贴到你的样式表中 - 如果没有这些样式，jScrollPane 可能无法正常运行。 */
/* 容器样式 */
.jspContainer {
    overflow: hidden; /* 溢出隐藏 */
    position: relative; /* 相对定位 */
}

/* 滚动面板样式 */
.jspPane {
    position: absolute; /* 绝对定位 */
}

/* 垂直滚动条样式 */
.jspVerticalBar {
	background: transparent; /* 将滑动条的背景设置为透明 transparent  */
    border: 1px solid #93a5cf; /* 描边颜色选项 */
    position: absolute; /* 绝对定位 */
    top: 0;
    right: 0;
    width: 16px; /* 宽度 */
    height: calc(100% - 2px); /* 确保底部描边显示 */
	-moz-border-radius: 0px;/* 修改滑块的是否圆角 */
    -webkit-border-radius: 0px;/* 同上 */
    border-radius: 0px;/* 同上 */
}

.jspDrag {
    background: #93a5cf; /* 修改滑块的颜色 */
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
	height: calc(100% - 2px); /* 确保滑块不会滑出滚动条 */
    -moz-border-radius: 0px;/* 修改滑块的是否圆角 */
    -webkit-border-radius: 0px;/* 同上 */
    border-radius: 0px;/* 同上 */
}

/* 水平滚动条样式 */
.jspHorizontalBar {
    position: absolute; /* 绝对定位 */
    bottom: 0;
    left: 0;
    width: 100%; /* 宽度 */
    height: 14px; /* 高度 */
    background: #fbfbfb; /* 背景颜色 */
}

/* 滚动条内部元素样式 */
.jspVerticalBar *, .jspHorizontalBar * {
    margin: 0;
    padding: 0;
}

/* 滚动条箭头样式 */
.jspArrow {
    background: #50506d; /* 背景颜色 */
    text-indent: -20000px;
    display: block;
    cursor: pointer;
}

/* 禁用状态的滚动条箭头样式 */
.jspArrow.jspDisabled {
    cursor: default;
    background: #80808d; /* 背景颜色 */
}

/* 垂直滚动条箭头样式 */
.jspVerticalBar .jspArrow {
    height: 16px; /* 高度 */
}

/* 水平滚动条箭头样式 */
.jspHorizontalBar .jspArrow {
    width: 16px; /* 宽度 */
    float: left;
    height: 100%; /* 高度 */
}

/* 滚动条箭头在焦点状态下的样式 */
.jspVerticalBar .jspArrow:focus {
    outline: none; /* 焦点样式 */
}

/* 滚动条角落样式 */
.jspCorner {
    background: #eeeef4; /* 背景颜色 */
    float: left;
    height: 100%; /* 高度 */
}

/* 针对 IE6 的 CSS Hack 以解决 3 像素问题 */
* html .jspCorner {
    margin: 0 -3px 0 0; /* 边距 */
}