/* SCROLLABLE */

.scrollable { /* required settings */
	position: relative;
	overflow:hidden;
	width: 100%;
	height: 100%;
}

.scrollable .root { /* required settings */
	position: relative;
	overflow: hidden;
}

/*
	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.
*/
.scrollable .items { /* this cannot be too large */
	width: 20000em;
	position: absolute;
}
.scrollable .page {
	float: left;
	position: relative;
	height: 100%;
}
.scrollable .item {
	float: left;
	position: relative;
	width: 100%;
}
.scrollable .media_content {
	position: absolute;
	top: 10px;
	left: 10px;
	bottom: 10px;
	right: 10px;
}

/* single scrollable item */

/* active item */
.scrollable .active {
	position: relative;
	cursor: default;
}

.scrollable .root {
	/*float: left;*/
}

/* prev, next, prevPage and nextPage buttons */
.scrollable a.browse {
	background: url(/base/images/scrollable/hori_large.png) no-repeat;
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	cursor: pointer;
	font-size: 1px;
	z-index: 9999;
}

/* right */
.scrollable a.next {
	background-position: 0 -30px;
	right: 12px;
}

.scrollable a.next:hover {
	background-position: -30px -30px;
}

.scrollable a.next:active {
	background-position: -60px -30px;
}

/* left */
.scrollable a.prev {
	left: 12px;
}

.scrollable a.prev:hover {
	background-position: -30px 0;
}

.scrollable a.prev:active {
	background-position: -60px 0;
}

/* up and down */
.scrollable a.up,a.down {
	background: url(/base/images/scrollable/vert_large.png) no-repeat;
	float: none;
	margin: 10px 50px;
}

/* up */
.scrollable a.up:hover {
	background-position: -30px 0;
}

.scrollable a.up:active {
	background-position: -60px 0;
}

/* down */
.scrollable a.down {
	background-position: 0 -30px;
}

.scrollable a.down:hover {
	background-position: -30px -30px;
}

.scrollable a.down:active {
	background-position: -60px -30px;
}

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

/* position and dimensions of the navigator */
.scrollable .navi {
	float: right;
	height: 20px;
	margin-top: 10px;
}

/* items inside navigator */
.scrollable .navi a {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px 4px;
	background: url(/base/images/scrollable/navigator.png) 0 0 no-repeat;
	display: block;
	cursor: pointer;
	font-size: 1px;
}

/* mouseover state */
.scrollable .navi a:hover {
	background-position: 0 -8px;
}

/* active state (current page state) */
.scrollable .navi a.active {
	background-position: 0 -16px;
}