/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section{display:block;}
audio, canvas, video{display:inline-block;*display:inline;*zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}
a{color:#a6a6a6;text-decoration:none;}
a:hover{color:#fff;}
a:focus{outline:thin dotted;}
a:hover, a:active{outline:0;}



ul, ol{margin:0;padding:0 0 0 0px;}


/* universal sly */
.slyWrap .controls{margin:20px 0 ;}

.controls{text-align:center;}

.sly{overflow:hidden;}
.sly > ul{list-style:none;margin:0;padding:0; width:100%}
.sly > ul li{position:relative;margin:0;padding:0;color:#fff;text-align:left;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:8px;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 .slyWrap{margin:3em 0;}

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

#horizontal .example2 .sly{height:200px;}
#horizontal .example2 .sly ul{height:100%;}
#horizontal .example2 .sly ul li{float:left;width:266px;height:100%;margin:0 1px 0 0; }
#horizontal .example2 .sly ul li img{width:282px;height:198px;border:solid 1px #ddd;}
#horizontal .example2 .sly ul li.active img{border:solid 1px #3366cc;}


#horizontal .example4 .sly ul li.active{opacity:1;}

/* Vertical examples */
#vertical .slyWrap{margin:0;width:300px;float:left;}

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



#vertical .example2{position:relative;}
#vertical .example2 .sly{width:283px;min-height:555px;}
#vertical .example2 .sly > div{padding:1em 1.5em;}
#vertical .example2 .scrollbar{position:absolute;top:0;left:285px;min-height:555px;}

/* Vertical example */
#infinite .controlbar{margin:2em 0 1.5em;}
#infinite .frameWrap{position:relative;min-height:590px;}
#infinite .frame{height:500px;margin-right:20px;overflow:hidden;border:1px solid #888;}
#infinite .frame ul{width:100%;margin:0;padding:0;list-style:none;}
#infinite .frame ul li{margin:0 0 5px 0;padding:0;height:200px;line-height:200px;font-size:30px;border-bottom:1px solid #aaa;
	background:#eee;color:#888;text-align:center;
}

#infinite .scrollbar{position:absolute;top:0;right:0;width:5px;min-height:498px;}
#infinite .scrollbar .handle{height:100px;width:100%;}