/* Coverflow styles */

/***********************************************************************************
** Sliding panels
*/
#flow-wrapper {
	position: relative; /* do not change */
	overflow: hidden;   /* do not change */
	height: 324px;      /* 36px grid x 9 */
	width: 862px;       /* 864 including borders */
	border: 1px solid #999;
	background: #555;
}

#flow-content {
	width: 4040px;      /* 7 x 577 + extra 1px for border-right on .flow-frame-last */
	height: 324px;      /* 36px grid x 9 */
	left: 142px;        /* 36px grid x 4, minus 2 x 1px borders */
	position: absolute; /* do not change */
}

.flow-frame {
	height: 324px;
	width: 576px;
	border-left: 1px solid #999; /* make sure the width variable in coverflow.js includes the width of this border */
	background: #444; /* Not directly visible, but affects the appearance of inactive (faded) images */
	float: left;   /* do not change */
}

.flow-frame-last {
	border-right: 1px solid #999; /* make sure #flow-content width includes the width of this border */
}

/***********************************************************************************
** Sliding text
*/
#cover-text {
	text-align: justify;
	color: #333;
}

/***********************************************************************************
** Scrollbar
*/
#flow-buttons {
	padding: 9px 0;
}

#flow-left, #flow-right {
	cursor: pointer;
}

#flow-left {
	float: left;
}

#flow-right {
	float: right;
}

#flow-slider {
	background: #ddd url('../images/slider-bg.png') top left no-repeat;
	margin: 0 24px;
	position: relative;
}

#flow-slider-handle {
	width: 118px;
	height: 19px;
	position: absolute;
}