.carousel {
	width: 570px;
	margin: 20px 0;
	padding: 0 29px;
	position: relative;
	overflow: hidden;

	-webkit-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	user-select:none;
}

.carousel > .window {
	overflow: hidden;
	position: relative;
	height: 100px;
}

.window ul {
	list-style: none;
	margin: 0;
	width: 10000px;
	top: 0;
	left: 0;
	position: absolute;
}

.window li {
	float: left;
	margin: 0 0 0 3px;
}

.window li:first-child {
	margin: 0;
}

.window img {
	display: block;
}

.carousel > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 29px;
	height: 100px;
	background-color: #fff;
	background-color: rgba(255,255,255,.9);
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAAARCAYAAACCecGyAAABVklEQVR42uWXwUoCQRiA10BQGliQTobZLUyk9SCFBw/VQTCIfAJPQWDQ3RcIojdYEAQRMTp3iKiX8BB06x0UL9P/gXsZQte9zXj4mMOOy/99rLrjnZQOY/HV9hSr1toaopnXEUc+K4Rv1zsPtkVgZmbHIWkEAhx9tr2prPrpQo1si8DMzI4DLptGIEBHPjzjJrZHAFxwihMBeSUMBQ0uRDAYmL8VZoBAin2z2dUIgCOuZgQC3MnFOZtcjwC44owT8r4wMTa5HMFk4vUafqHfzPxuawTc+Sr4wut9Pac/blJbE+FdXHHGnQgR3VY1v3i5SjsfAUdxneP8319kcFo++Hm+3HU2Am444rrqZUkJw9uzPR4ZZyLgghNuOMZ9be40g/3ZuJW2PgIOuOCU5AB1XCsXp4/nytoIzI4DLklPkZAVwkalYN0pcjlzKCQ+RZoo2yJEM6/jD2dGREFlNP/eAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: 8px 39px;
	text-indent: -9999px;
}

.carousel > .next {
	left: auto;
	right: 0;
	background-position: -44px 39px;
}

.carousel > .disabled {
	opacity: 0.4;
	-moz-opacity: 0.4;
	filter:alpha(opacity=40);
}

.window-active li {
	opacity: 0.4;
	-webkit-transition: opacity 0.4s ease;
	-moz-transition: opacity 0.4s ease;
	-ms-transition: opacity 0.4s ease;
	-o-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;	
}

.window-active .active {
	opacity: 1;
}

#pager {
	display: block;
	position: relative;
	float: left;
	left: 50%;
	margin-top: 10px;
}

#pager ul {
	position: relative;
	float: left;
	left: -50%;
	font-size: 0;
	overflow: hidden;
}

#pager li {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 1px;
	list-style: none;
	background-color: #aaa;
	-webkit-transition: background-color 0.4s ease;
	-moz-transition: background-color 0.4s ease;
	-ms-transition: background-color 0.4s ease;
	-o-transition: background-color 0.4s ease;
	transition: background-color 0.4s ease;	
}

#pager li:hover {
	background-color: #ccc;
}

#pager .active {
	background-color: #cc6600;
}

#pager .active:hover {
	background-color: #ff6600;
}
