/**************************************/
/*              CAROUSELS               */
/**************************************/

.carousel {
	width:760px;
	height:360px;
	margin:20px auto;
}

.slides {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:760px;
	height:360px;
}

/* remove the list styles, width : item width * total items */	
.slides ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;	
	width:4450px;			
}

/* width of the item, in this case I put 250x250x gif */
.slides li {
	width:760px;
	height:360px;	
	float:left;
	padding: 0 5px;
}

/* Styling for prev and next buttons */

.buttons a {
	display:block; 
	width:75px; 
	height:75px;
	text-indent:-999em;
	float:left;
	outline:0;
}

a.next {
	position: absolute;
	right: 0;
	top: 200px;
	z-index: 100;
}

a.prev {
	position: absolute;
	left: 0;
	top: 200px;
	z-index: 100;
}

a.prev { background:url("/img/gb_prev.gif") left top no-repeat }
a.prev:hover { background:url("/img/gb_prev.gif") -75px top no-repeat }
a.prev:active { background:url("/img/gb_prev.gif") -150px top no-repeat }
a.next { background:url("/img/gb_next.gif") left top no-repeat }
a.next:hover { background:url("/img/gb_next.gif") -75px top no-repeat }
a.next:active { background:url("/img/gb_next.gif") -150px no-repeat }