/* ==========================================================================
   Page styles
   ========================================================================== */

/* 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; background: #4DBCE9; color: #fff; 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; }
#vertical .scrollbar {
    width: 7px;
}
.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;
}
#vertical .scrollbar .handle {
    height: 100px;
    width: 100%;
}


/* Vertical examples */


#vertical .example2 { position: relative; }
#vertical .example2 .sly { width:100%; margin-left: 25px; height: 500px; border: 1px solid #aaa; background: #fff; }
#vertical .example2 .sly > div { padding: 1em 1.5em; }
#vertical .example2 .scrollbar { position: absolute; top: 0; left: 10px; height: 500px; }




/* ==========================================================================
   Non-semantic helper classes
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Floats */
.fleft { float: left; }
.fright { float: right; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* PrettyPrint styles */
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}
.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}

@media only screen and (max-width:40em) {
	#vertical .example2 .sly {
    width: 90%;
    margin-left: 25px;
    height: 500px;
    border: 1px solid #aaa;
    background: #fff;
}
	}