/* Some lines are redudant. I just want to make sure its clear what is needed for a single instance.

/* Examples - Tiny Scrollbar */
#scrollbar1 {
	width: 100%;
	margin:0 auto;
	position:relative;
	padding:0 0 2% 0;
}
#scrollbar1 .viewport {
	width: 90%;
	height: 350px;
	overflow: hidden;
	position: relative;
	margin:0 auto;
}
#scrollbar1 .overview {
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
}
#scrollbar1 .scrollbar {
	background:#a5a5a5;
	position: absolute;
	background-position: 0 0;
	right:4%;
	width: 2px;
}
#scrollbar1 .track {
	background:#a5a5a5;
	height: 100%;
	width:2px;
	position: relative;
}
#scrollbar1 .thumb {
	background:#fff;
	height: 20px;
	width: 10px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: -4px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-o-border-radius:10px;
}
#scrollbar1 .thumb .end {
	
	overflow: hidden;
	height: 5px;
	width: 25px;
}
#scrollbar1 .disable {
	display: none;
}
.noSelect {
	user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#scrollbar2 {
	width: 251px;
	margin: 20px 0 10px;
}
#scrollbar2 .viewport {
	width: 236px;
	height: 125px;
	overflow: hidden;
	position: relative;
}
#scrollbar2 .overview {
	list-style: none;
	width: 1416px;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
}
#scrollbar2 .overview img {
	float: left;
}
#scrollbar2 .scrollbar {
	background: transparent url(../images/bg-scrollbar-track-x.png) no-repeat 0 0;
	position: relative;
	margin: 0 0 5px;
	clear: both;
	height: 15px;
}
#scrollbar2 .track {
	background: transparent url(../images/bg-scrollbar-trackend-x.png) no-repeat 100% 0;
	width: 100%;
	height: 15px;
	position: relative;
}
#scrollbar2 .thumb {
	background: transparent url(../images/train-scroll.png) no-repeat 100% 50%;
	height: 25px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -5px;
}
#scrollbar2 .thumb .end {
	background: transparent url(../images/bg-scrollbar-thumb-x.png) no-repeat 0 50%;
	overflow: hidden;
	height: 25px;
	width: 5px;
}
#scrollbar2 .disable {
	display: none;
}
.noSelect {
	user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#scrollbar3 {
	width: 320px;
	margin: 20px 0 10px;
}
#scrollbar3 .viewport {
	width: 300px;
	height: 300px;
	overflow: hidden;
	position: relative;
}
#scrollbar3 .overview {
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
}
#scrollbar3 .scrollbar {
	background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0;
	position: relative;
	background-position: 0 0;
	float: right;
	width: 15px;
}
#scrollbar3 .track {
	background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;
	height: 100%;
	width: 15px;
	position: relative;
}
#scrollbar3 .thumb {
	background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
	height: 20px;
	width: 25px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: -5px;
}
#scrollbar3 .thumb .end {
	background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
	overflow: hidden;
	height: 5px;
	width: 25px;
}
#scrollbar3 .disable {
	display: none;
}
.noSelect {
	user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#scrollbar4 {
	width: 520px;
	margin: 20px 0 10px;
}
#scrollbar4 .viewport {
	width: 500px;
	height: 200px;
	overflow: hidden;
	position: relative;
}
#scrollbar4 .overview {
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
}
#scrollbar4 .scrollbar {
	background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0;
	position: relative;
	background-position: 0 0;
	float: right;
	width: 15px;
}
#scrollbar4 .track {
	background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;
	height: 100%;
	width: 15px;
	position: relative;
}
#scrollbar4 .thumb {
	background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
	height: 20px;
	width: 25px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: -5px;
}
#scrollbar4 .thumb .end {
	background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
	overflow: hidden;
	height: 5px;
	width: 25px;
}
#scrollbar4 .disable {
	display: none;
}
.noSelect {
	user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#scrollbar5 {
	width: 520px;
	overflow: hidden;
	margin: 20px 0 10px;
}
#scrollbar5 .viewport {
	width: 500px;
	height: 200px;
	overflow: hidden;
	position: relative;
}
#scrollbar5 .overview {
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
}
#scrollbar5 .scrollbar {
	background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0;
	position: relative;
	background-position: 0 0;
	float: right;
	width: 15px;
}
#scrollbar5 .track {
	background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;
	height: 100%;
	width: 15px;
	position: relative;
}
#scrollbar5 .thumb {
	background: transparent url(../images/transition.jpg) no-repeat 50% 100%;
	height: 20px;
	width: 25px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: -5px;
}
#scrollbar5 .thumb .end {
	background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
	overflow: hidden;
	height: 5px;
	width: 25px;
}
#scrollbar5 .disable {
	display: none;
}
#scroll5text {
	display: none;
}
#scroll5text2 {
	display: none;
}
#scroll5text3 {
	display: none;
}
#scroll5load {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
#scroll5load2 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
#scroll5load3 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
#scroll5load4 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
	clear: left;
}
#scroll5load5 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
#scroll5load6 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
	clear: left;
}
#scroll5load6 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
#scrollbar5 .loadtext p {
	clear: both;
	margin: 0;
	padding: 20px 0 0;
}
.noSelect {
	user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#scrollbar6 {
	width: 520px;
	overflow: hidden;
	margin: 20px 0 10px;
}
#scrollbar6 .viewport {
	width: 500px;
	height: 200px;
	overflow: hidden;
	position: relative;
}
#scrollbar6 .overview {
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
}
#scrollbar6 .scrollbar {
	background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0;
	position: relative;
	background-position: 0 0;
	float: right;
	width: 15px;
}
#scrollbar6 .track {
	background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;
	height: 100%;
	width: 15px;
	position: relative;
}
#scrollbar6 .thumb {
	background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
	height: 20px;
	width: 25px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: -5px;
}
#scrollbar6 .thumb .end {
	background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0;
	overflow: hidden;
	height: 5px;
	width: 25px;
}
#scrollbar6 .disable {
	display: none;
}
#scrollbar6 .loadtext p {
	clear: both;
	margin: 0;
	padding: 20px 0 0;
}
.noSelect {
	user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
#scroll6load {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
#scroll6load2 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
#scroll6load3 {
	display: block;
	float: left;
	padding: 0 10px 0 0;
}
