PWI Custom Scrollbars

dabblet.css

/**
 * PWI Custom Scrollbars
 */
#chatWindow {
	width: 352px;
	height: 262px;
	background: url('http://aster.ohmydays.net/pw/images/chatwindow.png');
}
#chatMessages {
	position: absolute;
	width: 352px;
	height: 217px;
	top: 8px;
	left: 8px;
	overflow: auto;
	text-shadow: 1px 1px black;
}
.chat { width: 100px; height: 300px; padding: 20px; color: yellow }


.customScroll::-webkit-scrollbar { width: 13px;}
.customScroll::-webkit-scrollbar-button { 
	height: 13px;
	width: 13px;
	display: block;
	background-image: url('http://aster.ohmydays.net/pw/images/scrollbar.png');
}
.customScroll::-webkit-scrollbar-button:vertical:start:increment { display: none;; }
.customScroll::-webkit-scrollbar-button:vertical:end:decrement { display: none; }

.customScroll::-webkit-scrollbar-button:vertical:start:decrement { background-position: 0px -30px; }
.customScroll::-webkit-scrollbar-button:vertical:end:increment { background-position: 0px -47px; }
.customScroll::-webkit-scrollbar-button:vertical:decrement:active {  }
.customScroll::-webkit-scrollbar-button:vertical:increment:active {  }
.customScroll::-webkit-scrollbar-track { background-image: url('http://aster.ohmydays.net/pw/images/scrollbar.png'); background-position: 0px -63px; background-repeat: no-repeat; }
/*.customScroll::-webkit-scrollbar-thumb:vertical { background: url('http://aster.ohmydays.net/pw/images/thumb.png') no-repeat bottom; height 28px;}  scroll bars sucks*/
.customScroll::-webkit-scrollbar-thumb:vertical { 
	background: #082a37;
	background: -webkit-linear-gradient(top, #25b3a2, #082a37 3%, #082a37 97%,#25b3a2);*/
	background-image: rgba(255,0,0,0.5);
	border-radius: 8px;
	margin: 2px;
	-webkit-box-shadow: inset 0 0 4px 1px #25b3a2;
}

dabblet.html

<div id="chatWindow">
  <div id="chatMessages" class="customScroll">
    <div class="chat">Hi</div>
  </div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}