.carousel-component { 
	position: relative;
	overflow: hidden;   /* causes the clipping */
	display: none; /* component turns it on when first item is rendered */
	height: 477px;
	background-image: url(../images/structure/bg_gallery.png);
	background-repeat: no-repeat;
	padding: 15px 0 0 15px;
	margin: 0;
}
				
.carousel-component ul.carousel-list { 
	width: 10000000px;
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.carousel-component .carousel-list li { 
	float: left;
	list-style: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 556px; /*550 + 2 + 2 + 1 + 1 */
}

.carousel-component .carousel-clip-region { 
	overflow: hidden; /* Secret to the clipping */
	margin: 0;
	position: relative; 
}

.carousel-component .carousel-list li a { 
	display: block;
	border: 0;
}

.carousel-component .carousel-list li a:hover { 

}

.carousel-component .carousel-list li.active a { 

}

.carousel-component .carousel-list li img { 
	display: block;
	border: 0;
}
									
.carousel-component .carousel-prev { 
	position: absolute;
	top: 30px;
	z-index: 3;
	cursor: pointer; 
	left: 30px; 
}

.carousel-component .carousel-next { 
	position: absolute;
	top: 30px;
	z-index: 3;
	cursor: pointer; 
	right: 100px; 
}

#indicator {
	margin: 5px 0 0 10px;
	padding: 0;
	font-size: 0.8em;
}