.more-views{ position:relative}
/* Frame */
.more-views .frame {height: 90px; overflow: hidden; max-width:100%}
.more-views .frame ul { list-style: none; margin: 0; padding: 0; height: 100%; font-size: 1px; color:#fff}
.more-views .frame ul li { float: left; width: 90px; height: 100%; margin: 0 8px 0 0; padding: 0; /*background: #333; color: #ddd; */text-align: center; cursor: pointer;border: 1px solid #ededed; }
.more-views .frame ul li.active { /*color: #fff; background: #a03232; */}
.more-views .frame ul li a img{ width:100%; color:#fff}

/* Scrollbar */
.more-views .scrollbar { margin: 0 0 1em 0; height: 2px; background: #ccc; line-height: 0; }
.more-views .scrollbar .handle { width: 90px; height: 100%; background: #292a33; cursor: pointer; }
.more-views .scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; }

/* Pages */
.more-views .pages { list-style: none; margin: 20px 0; padding: 0; text-align: center; }
.more-views .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); }
.more-views .pages li:hover { background: #aaa; }
.more-views .pages li.active { background: #666; }

/* Controls */
.btn-prev{
position: absolute;
left: -18px;
top: 25px;
z-index: 1;
height: 40px;
display: block;
width: 20px;
background: url('/skin/frontend/default/images/arrow/left.png') 50% 0 no-repeat;
cursor: pointer;
border:none
}
.btn-next{
position: absolute;
right: -18px;
top: 25px;
z-index: 1;
height: 40px;
display: block;
width: 20px;
background: url('/skin/frontend/default/images/arrow/right.png') 50% 0 no-repeat;
cursor: pointer;
border:none
}