/* CSS Document */

.edu-scroll-wrapper-x{
margin-top: 10px;
	cursor: pointer;	
}

.edu-scroll-wrapper-y{
margin-top: 0px;
	margin-left: 10px;
	cursor: pointer;	
}

.edu-scroll-rail-x{
    height: 20px;
	overflow: visible;
		
}


.edu-scroll-rail-y{
     width: 20px;
	 overflow: visible;	
}

.edu-scroll-rail-y, .edu-scroll-rail-x{
    background-color: black;	
}

.edu-scroll-grabber-x{
	height: 20px;
	width: 20px;
	background-color: #777777;
}

.edu-scroll-grabber-y{
	height: 20px;
	width: 20px;
	background-color: #777777;
}

.edu-scroll-button-x-top{
  width: 20px;
  height: 20px;
  background-color: #666666;
  cursor: pointer;
}

.edu-scroll-button-x-bottom{
  width: 20px;
  height: 20px;
  background-color: #666666;
  cursor: pointer;	
}

.edu-scroll-button-y-top{
  width: 20px;
  height: 20px;
  background-color: #666666;
  cursor: pointer;	
}

.edu-scroll-button-y-bottom{
  width: 20px;
  height: 20px;
  background-color: #666666;
  cursor: pointer;	
}



.edu-scroll.gray .edu-scroll-button-x-top{
   background-image: url(assets/arrow.png);
   transform: rotate(0deg);	
   background-size: 100% 100%;
}

.edu-scroll.gray .edu-scroll-button-x-bottom{
   background-image: url(assets/arrow.png);
   transform: rotate(180deg);	
   background-size: 100% 100%;
}

.edu-scroll.gray .edu-scroll-button-y-top{
   background-image: url(assets/arrow.png);
   transform: rotate(90deg);	
   background-size: 100% 100%;
}

.edu-scroll.gray .edu-scroll-button-y-bottom{
   background-image: url(assets/arrow.png);
   transform: rotate(270deg);	
   background-size: 100% 100%;
}


.edu-scroll.gray .edu-scroll-grabber-x{
	background-image: url(assets/handle.png);
	background-size: 100% 100%;
}

.edu-scroll.gray .edu-scroll-grabber-y{
	background-image: url(assets/handle.png);
	background-size: 100% 100%;
}

.edu-scroll.gray .edu-scroll-rail-y, .edu-scroll.gray .edu-scroll-rail-x{
	background-color: #B2B2B2;
}



.edu-scroll.purpletheme .edu-scroll-button-x-top{
   background-image:url(assets/purpletheme/arrow-down.png);
   transform: rotate(90deg);	
   background-size: 60% 60%;
   background-position: center center;
   background-color: #99FFFF;
   background-repeat: no-repeat;
}

.edu-scroll.purpletheme .edu-scroll-button-x-bottom{
   background-image:url(assets/purpletheme/arrow-down.png);
   transform: rotate(270deg);	
   background-size: 60% 60%;
   background-position: center center;
   background-color: #99FFFF;
   background-repeat: no-repeat;
}

.edu-scroll.purpletheme .edu-scroll-button-y-top{
   background-image:url(assets/purpletheme/arrow-down.png);
   transform: rotate(180deg);	
   background-size: 60% 60%;
   background-position: center center;
   background-color: #99FFFF;
   background-repeat: no-repeat;
}

.edu-scroll.purpletheme .edu-scroll-button-y-bottom{
   background-image:url(assets/purpletheme/arrow-down.png);
   transform: rotate(0deg);	
   background-size: 60% 60%;
   background-position: center center;
   background-color: #99FFFF;
   background-repeat: no-repeat;
}

.edu-scroll.purpletheme .edu-scroll-button-x-top:hover{
   background-image:url(assets/purpletheme/arrow-down-on.png);
}

.edu-scroll.purpletheme .edu-scroll-button-x-bottom:hover{
   background-image:url(assets/purpletheme/arrow-down-on.png);
}

.edu-scroll.purpletheme .edu-scroll-button-y-top:hover{
   background-image:url(assets/purpletheme/arrow-down-on.png);
}

.edu-scroll.purpletheme .edu-scroll-button-y-bottom:hover{
   background-image:url(assets/purpletheme/arrow-down-on.png);
}

.edu-scroll.purpletheme .edu-scroll-grabber-x{
	background-image:url(assets/purpletheme/scroll-btn.png);
	background-size: 100% 100%;
	background-color: #99FFFF;
	transform: rotate(90deg);	
}

.edu-scroll.purpletheme .edu-scroll-grabber-y{
	background-image: url(assets/purpletheme/scroll-btn.png);
	background-size: 100% 100%;
	background-color: #99FFFF;
}

.edu-scroll.purpletheme .edu-scroll-rail-y, .edu-scroll.purpletheme .edu-scroll-rail-x{
	background-color: #99FFFF;
}



.edu-scroll.chillipepper .edu-scroll-button-x-top{
   background-image: url(assets/chillipepper/arrow.png);
   transform: rotate(0deg);	
   background-size: 100% 100%;
   background-color: transparent;
}

.edu-scroll.chillipepper .edu-scroll-button-x-bottom{
   background-image: url(assets/chillipepper/arrow.png);
   transform: rotate(180deg);	
   background-size: 100% 100%;
   background-color: transparent;
}

.edu-scroll.chillipepper .edu-scroll-button-y-top{
   background-image: url(assets/chillipepper/arrow.png);
   transform: rotate(90deg);	
   background-size: 100% 100%;
   background-color: transparent;
}

.edu-scroll.chillipepper .edu-scroll-button-y-bottom{
   background-image: url(assets/chillipepper/arrow.png);
   transform: rotate(270deg);	
   background-size: 100% 100%;
   background-color: transparent;
}


.edu-scroll.chillipepper .edu-scroll-grabber-x{
	background-color: #CC0000;
}

.edu-scroll.chillipepper .edu-scroll-grabber-y{
	background-color: #CC0000;
}

.edu-scroll.chillipepper .edu-scroll-rail-y, .edu-scroll.chillipepper .edu-scroll-rail-x{
	background-color: transparent;
}