/* Frame */
.frame {
	margin: 0 0 20px 0;
	overflow: hidden;
}

.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.frame ul li {
	float: left;
	height: 100%;
	margin: 0 1px 0 0;
	padding: 0;
	background: #DDD;
	color: #333;
	text-align: center;
	cursor: pointer !important;
}

.frm-4 { height: 183px; line-height: 183px; }
.frm-4 ul li { width: 244px; }

.frm-6 { height: 122px; line-height: 122px; }
.frm-6 ul li { width: 163px; }

.frm-8 { height: 92px; line-height: 92px; }
.frm-8 ul li { width: 122px; }

.frame ul li img{
	width:100%;
}

.frame ul li.active {
	color: #fff;
	background: #a03232;
}

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

/* Pages */
.pages {
	list-style: none;
	margin: 0 0 12px 0;
	padding: 0;
	text-align: center;
	vertical-align: top;
}
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 5px;
	
	white-space:nowrap;
	text-indent: 100%;

	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	
	cursor: pointer;
	overflow: hidden;
	background: #ECECEC;
	
	behavior: url(/PIE.htc);
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}

/* Controls */

.controls {
	text-align: center;
	vertical-align: top;
	margin: 0 0 12px 0;
	}

.controls button{
	background:#FFF;
	color:#999;
	
	display: inline-block;
	width: 40px;
	height: 24px;
	margin: 0px;
	text-align:center;
	
	border: 1px solid #CCC;

	border-radius:2px;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;

	transition: background 0.2s, color 0.2s;
		
	cursor: pointer;
	overflow: hidden;

	behavior: url(/PIE.htc);
}

.controls button:hover{
	background:#F96;
	border: 1px solid #EB941D;
	color:#FFF;
}