/*************************************/
/***** Banner With Multiple Items ****/
/*************************************/

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.slider {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 900px;
	height:360px;
	padding: 0px;
}

.slider-nav a.next,
.slider-nav a.prev {
	position: absolute;
	width: 27px;
	height: 27px;
	top: 167px;
	z-index: 99;
	cursor: pointer;
	text-indent: -8888px;
}
.slider-nav .prev {
	background: url(../images/carousel_arrows.png) no-repeat;
	background-position: 0px 0px;
	left: 0px;
}
.slider-nav .next {
	background: url(../images/carousel_arrows.png) no-repeat;
	background-position: 0px -27px;
	right: 0px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.slider .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div.group-items {
	float: left;
	width: 840px;
	margin: 0px 30px;
}

div.group-items div.single-item {
	width: 190px; 
	float: left; 
	text-align: center;
	padding: 0px 10px;
}

div.group-items span.title {
	color: #450927;
	font-family: georgia;
	font-size: 16px;
	line-height: 36px;
  font-style: italic;
  font-weight: normal;
}

div.group-items span.price {
	color: #b44242;
	font-family: georgia;
	font-size: 20px;
	line-height: 36px;
  font-style: italic;
  font-weight: normal;
  display: block;
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 6px;
  margin-bottom: 14px;
}

div.single-item a.buy-now {
	display: block;
	color: #f5f5f5;
	text-decoration: none;
	background: url(../images/read_more_button.png) no-repeat;
	line-height: 28px;
	width: 100px;
	height: 28px;
	text-align: center;
	font-weight: bold;
	margin: 0px auto;
}

/* active item */
.slider .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.slider {
	float:left;	
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}