/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
#content-slider-wrapper {
	display: block;
	overflow: hidden;
	width: 963px;
	z-index: -1;
}
#content-slider {
	display: block;
	float: left;
    position: relative;
    overflow: hidden;
    width: 963px;
    height: 450px;
}
.prev-next-wrapper {
	border: 0;
	cursor: pointer;
	display: block;
	float: left;
	position: absolute;
	text-align: center;
	text-decoration: none;
	line-height: 402px;
	width: 60px;
	height: 402px;
	top: 0;
	z-index: 100;
	visibility: hidden;
}
.prev-next-wrapper:hover	{ border: 0; text-decoration: none; }
.prev-next-wrapper.left		{ background: /*rgba(255,255,255,0.25)*/ url(/2008/pix/pil_vanster.png) no-repeat center center; left: 0px;}
.prev-next-wrapper.right	{ background: /*rgba(255,255,255,0.25)*/ url(/2008/pix/pil_hoger.png) no-repeat center center; right: 0px;}
.prev-next-wrapper.disabled	{ opacity: 0.5; }

#content-slider ul,
#content-slider ul li {
	list-style: none;
	margin: 0;
}

/*
    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 width and height for the root element and
    not for this element.
*/
#content-slider .items {
    /* this cannot be too large */
    width: 20000em;
    position: absolute;
}

/*
    a single item. must be floated in horizontal scrolling.
    typically, this element is the one that *you* will style
    the most.
*/
#content-slider .items li {
	display: block;
    float: left;
    width: 963px;
    height: 450px;
    overflow: hidden;
}

/* you may want to setup some decorations to active the item */
#content-slider .items .active {}

/* Navigation styles */
ul.navi {
	display: block;
	list-style: none;
	text-align: center;
}

ul.navi li {
	background: transparent url(/2008/pix/navigator.png) no-repeat top left;
	cursor: pointer;
	display: inline-block;
	list-style: none;
	position: relative;
	margin: 4px 4px 0 0;
	padding: 0;
	width: 8px;
	height: 8px;
}
ul.navi li:hover { background-position:0 -8px; }
ul.navi li.active { background-position:0 -16px; }