/* Progress */
.progress {
	overflow: hidden;
	height: 18px;
	background-color: #f7f7f7;
	background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-image: linear-gradient(top, #f5f5f5, #f9f9f9);
}
.progress .bar {
	width: 0%;
	height: 18px;
	float: left;
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5eb95e;
	background-repeat: repeat-x;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
    background-image: linear-gradient(top, #62c462, #57a957);
}
/* universal sly */
.slyWrap .controls { margin: 20px 0 ; }

.controls { text-align: center; }

.sly { overflow: hidden; }
.sly > ul { list-style: none; margin: 0; padding: 0; }
.sly > ul li { position: relative; margin: 0; padding: 0;  text-align: center; cursor: pointer; }
.sly > ul li.active { background: #fff; color: #4DBCE9;
	-webkit-box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
	-moz-box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
	-o-box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
	box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
}

.pages { list-style: none; margin: 20px 0; padding: 0; text-align: center; }
.pages li { display: inline-block; width: 11px; height: 11px; margin: 0 2px; text-indent: -999px; background: #fff; border-radius: 10px; cursor: pointer;
	overflow: hidden; border: 1px solid #aaa;
}
.pages li:hover { background: #eee; }
.pages li.active { background: #999; border-color: #888; box-shadow: inset 0 0 0 2px #eee; }

.scrollbar { background: #808080; border-radius: 4px; border: 2px solid #808080; border-top-color: #666; line-height: 0; }
.scrollbar .handle { border-radius: 4px; background: #fff; cursor: pointer; line-height: 0;
	-webkit-box-shadow: 0 1px 0 #555;
	-moz-box-shadow: 0 1px 0 #555;
	-o-box-shadow: 0 1px 0 #555;
	box-shadow: 0 1px 0 #555;
}
/* Horizontal examples */
.horizontal {  height:25px;}
.horizontal .slyWrap { /*margin: 3em 0;*/ }
.horizontal .slyWrap .disabled { visibility:hidden; }

.horizontal .scrollbar { margin: 1em 0; height: 5px; display:none; }
.horizontal .scrollbar .handle { width: 100px; height: 100%; }

.horizontal .sly { height: 25px;  margin-left:156px;  width:784px;  text-align:right; }
.horizontal .sly ul { height: 25px; }
.horizontal .sly ul li {display:table-cell;   height: 100%; margin: 0 1px 0 0;  line-height: 25px; }
.horizontal .sly ul li {}
.horizontal .sly ul li a {height:25px;}
.horizontal .sly ul li.active { background: #0094AE; color: #ffffff; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }


/* Vertical examples */
.vertical .slyWrap { margin: 1em 0; width: 470px; float: left; }

.vertical .scrollbar { width: 5px; }
.vertical .scrollbar .handle { height: 100px; width: 100%; }

.vertical { position: relative; }
.vertical .sly { width: 445px; height: 500px; border: 1px solid #aaa; }
.vertical .sly ul { width: 100%; height: 100%; overflow: hidden; }
.vertical .sly ul li { height: 80px; margin: 0 0 1px 0; font-size: 40px; line-height: 80px; }
.vertical .scrollbar { position: absolute; top: 0; right: 10px; height: 500px; }