.frame {
 overflow:hidden;
}
#centered {
 width:97.5%!important;
 margin:0 auto;
}
.frame img {
 border-radius:5px;
 opacity:.9;
}
.active {
 background:#fff;
 border-radius:7px;
}
.frame ul {
 list-style:none;
 margin:0;
 padding:0;
}
.frame ul li {
 float:left;
 padding:0;
 text-align:center;
 cursor:pointer;
 height:195px;
 width:195px;
 position:relative;
}
.frame ul li.active {
 color:#fff;
}
.scrollbar {
 margin:30px auto 0 auto;
 height:8px;
 background:#e1e1e1;
 line-height:0;
 width:70%;
 border-radius:5px;
 -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
 -webkit-box-shadow:inset 2px 1px 1px rgba(0,0,0,.25);
 box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
.scrollbar .handle {
 width:195px!important;
 height:100%;
 background:#cccccc;
 cursor:pointer;
 border-radius:5px;
 -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
 -webkit-box-shadow:inset 2px 1px 1px rgba(0,0,0,.25);
 box-shadow:inset 1px 1px 1px rgba(0,0,0,.25);
}
.scrollbar .handle .mousearea {
 position:absolute;
 top:-9px;
 left:0;
 width:100%;
 height:20px;
}
.pages {
 list-style:none;
 margin:20px 0;
 padding:0;
 text-align:center;
}
.pages li {
 display:inline-block;
 width:14px;
 height:14px;
 margin:0 4px;
 text-indent:-999px;
 border-radius:10px;
 cursor:pointer;
 overflow:hidden;
 background:#fff;
 box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.pages li:hover {
 background:#aaa;
}
.pages li.active {
 background:#666;
}
.controls {
 margin:0px 0;
 text-align:center;
}
.oneperframe {
 height:300px;
 line-height:300px;
}
.oneperframe ul li {
 width:1140px;
}
.oneperframe ul li.active {
 background:#333;
}
.effects {
 height:200px;
 line-height:200px;
 -webkit-perspective:800px;
 -ms-perspective:800px;
 perspective:800px;
 -webkit-perspective-origin:50% 50%;
 -ms-perspective-origin:50% 50%;
 perspective-origin:50% 50%;
 overflow-y:show;
}
.effects ul {
 -webkit-transform-style:preserve-3d;
 -ms-transform-style:preserve-3d;
 transform-style:preserve-3d;
}
.effects ul li {
 position:relative;
 margin:0 -20px;
 -webkit-transform:rotateY(60deg) scale(0.9);
 -ms-transform:rotateY(60deg) scale(0.9);
 transform:rotateY(60deg) scale(0.9);
 -webkit-transition:-webkit-transform 300ms ease-out;
 transition:transform 300ms ease-out;
}
.effects ul li.active {
 z-index:10;
 -webkit-transform:scale(1);
 -ms-transform:scale(1);
 transform:scale(1);
}
.effects ul li.active~li {
 -webkit-transform:rotateY(-60deg) scale(0.9);
 -ms-transform:rotateY(-60deg) scale(0.9);
 transform:rotateY(-60deg) scale(0.9);
}
