/*
用法:
載入本CSS檔
<link href="/css/yldu_scrollbar.css" rel="stylesheet">
加入類別
 class=""

YScrollbar1 : 黑色圓角
YScrollbar2 : 紅色圓角
YScrollbar3 : 細黑線
YScrollbar4 : 粗黑線
YScrollbar5 : 藍色
YScrollbar6 : 橘色
YScrollbar7 : 藍色漸層
YScrollbar8 : 黑色
YScrollbar9 : 橘色
YScrollbar10 : 灰色
YScrollbar11 : 藍色區塊
YScrollbar12 : 紅色
YScrollbar13 : 紅色
YScrollbar14 : 灰色漸層
YScrollbar15 : 綠色
YScrollbar16 : 藍色漸層
*/

/* YScrollbar1 : 基本*/

#YScrollbar1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#YScrollbar1::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#YScrollbar1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

/* YScrollbar2 */

#YScrollbar2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#YScrollbar2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#YScrollbar2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/* YScrollbar3 */

#YScrollbar3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#YScrollbar3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#YScrollbar3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}

/* YScrollbar4 */

#YScrollbar4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#YScrollbar4::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar4::-webkit-scrollbar-thumb
{
	background-color: #000000;
	border: 2px solid #555555;
}

/* YScrollbar5 */

#YScrollbar5::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#YScrollbar5::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar5::-webkit-scrollbar-thumb
{
	background-color: #0ae;
	
	background-image: -webkit-gradient(linear, 0 0, 0 100%,
	                   color-stop(.5, rgba(255, 255, 255, .2)),
					   color-stop(.5, transparent), to(transparent));
}

/* YScrollbar6 */

#YScrollbar6::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#YScrollbar6::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar6::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(45deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}

/* YScrollbar7 */

#YScrollbar7::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#YScrollbar7::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar7::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.44, rgb(122,153,217)),
									   color-stop(0.72, rgb(73,125,189)),
									   color-stop(0.86, rgb(28,58,148)));
}

/* YScrollbar8 */

#YScrollbar8::-webkit-scrollbar-track
{
	border: 1px solid black;
	background-color: #F5F5F5;
}

#YScrollbar8::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar8::-webkit-scrollbar-thumb
{
	background-color: #000000;	
}

/* YScrollbar9 */

#YScrollbar9::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#YScrollbar9::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar9::-webkit-scrollbar-thumb
{
	background-color: #F90;	
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(255, 255, 255, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, .2) 50%,
											  rgba(255, 255, 255, .2) 75%,
											  transparent 75%,
											  transparent)
}


/* YScrollbar10 */

#YScrollbar10::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#YScrollbar10::-webkit-scrollbar
{
	width: 10px;
	height:10px;
	background-color: #F5F5F5;
}

#YScrollbar10::-webkit-scrollbar-thumb
{
	background-color: #AAA;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, .2) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(0, 0, 0, .2) 50%,
											  rgba(0, 0, 0, .2) 75%,
											  transparent 75%,
											  transparent)
}

/* YScrollbar11 */

#YScrollbar11::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#YScrollbar11::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar11::-webkit-scrollbar-thumb
{
	background-color: #3366FF;
	border-radius: 10px;
	background-image: -webkit-linear-gradient(0deg,
	                                          rgba(255, 255, 255, 0.5) 25%,
											  transparent 25%,
											  transparent 50%,
											  rgba(255, 255, 255, 0.5) 50%,
											  rgba(255, 255, 255, 0.5) 75%,
											  transparent 75%,
											  transparent)
}

/* YScrollbar12 */

#YScrollbar12::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #444444;
}

#YScrollbar12::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#YScrollbar12::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/* YScrollbar13 */

#YScrollbar13::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	border-radius: 10px;
	background-color: #CCCCCC;
}

#YScrollbar13::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#YScrollbar13::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #D62929;
	background-image: -webkit-linear-gradient(90deg,
											  transparent,
											  rgba(0, 0, 0, 0.4) 50%,
											  transparent,
											  transparent)
}

/* YScrollbar14 */

#YScrollbar14::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
	background-color: #CCCCCC;
}

#YScrollbar14::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar14::-webkit-scrollbar-thumb
{
	background-color: #FFF;
	background-image: -webkit-linear-gradient(90deg,
	                                          rgba(0, 0, 0, 1) 0%,
											  rgba(0, 0, 0, 1) 25%,
											  transparent 100%,
											  rgba(0, 0, 0, 1) 75%,
											  transparent)
}

/* YScrollbar15 */

#YScrollbar15::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#YScrollbar15::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar15::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-gradient(linear,
									   40% 0%,
									   75% 84%,
									   from(#4D9C41),
									   to(#19911D),
									   color-stop(.6,#54DE5D))
}

/* YScrollbar16 */

#YScrollbar16::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#YScrollbar16::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#YScrollbar16::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #FFF;
	background-image: -webkit-linear-gradient(top,
											  #e4f5fc 0%,
											  #bfe8f9 50%,
											  #9fd8ef 51%,
											  #2ab0ed 100%);
}