/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 950px ; 
	height: 531px;
	
}

/*
	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;
	clear:both;

}

.items div {
	float:left;
	display: inline;
}

/* single scrollable item 
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}*/

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


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

/* prev, next, prevPage and nextPage buttons */
a.browse {
	z-index: 1000;
	background:url(../img/arrows.png) no-repeat;
	display:block;
	width:35px;
	height:35px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ position:absolute; right:10px; top:300px; background-position: -35px 0;}
a.right:hover 		{ background-position:-35px 0; }
a.right:active 	{ background-position:-35px 0; } 


/* left */
a.left				{ position:absolute; left:10px; top:300px; background-position: 0 0;} 
a.left:hover  		{ background-position:0 0; }
a.left:active  	{ background-position:0 0; }



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



/* VERTICAL SECTION 01 */


/* root element for scrollable */
#scrollable-v {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
#scrollable-v .items-v {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* VERTICAL SECTION 02 */


/* root element for scrollable */
#scrollable-two {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
#scrollable-two .items-two {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-two {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-two {position:absolute; bottom:5px; left:100px; z-index: 997;}




/* VERTICAL SECTION 03 */


/* root element for scrollable */
#scrollable-three {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
#scrollable-three .items-three {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-three {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-three {position:absolute; bottom:5px; left:100px; z-index: 997;}




/* VERTICAL SECTION 04 */


/* root element for scrollable */
#scrollable-four {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
#scrollable-four .items-four {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-four {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-four {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* VERTICAL SECTION 05 */


/* root element for scrollable */
#scrollable-five {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:51px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
#scrollable-five .items-five {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-five {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-five {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* PROMOTE */


/* root element for scrollable */
.scrollable-promote {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote .items-promote {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-promote {position:absolute; bottom:5px; left:100px; z-index: 997;}




/* PROMOTE five */

/* root element for scrollable */
.scrollable-promote-one {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-one .items-promote-one {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-one {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-promote-one {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* PROMOTE two */


/* root element for scrollable */
.scrollable-promote-two {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-two .items-promote-two {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-two {position:absolute; top:95px; left:100px; z-index: 997;}
.controller-down-promote-two {position:absolute; bottom:5px; left:100px; z-index: 997;}


/* PROMOTE three */


/* root element for scrollable */
.scrollable-promote-three {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-three .items-promote-three {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-three {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-promote-three {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* PROMOTE four */


/* root element for scrollable */
.scrollable-promote-four {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-four .items-promote-four {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-four {position:absolute; top:95px; left:100px; z-index: 997;}
.controller-down-promote-four {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* PROMOTE five */

/* root element for scrollable */
.scrollable-promote-five {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-five .items-promote-five {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-five {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-promote-five {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* PROMOTE six */


/* root element for scrollable */
.scrollable-promote-six {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:95px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 420px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-six .items-promote-six {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-six {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-promote-six {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* PROMOTE seven */


/* root element for scrollable */
.scrollable-promote-seven {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-seven .items-promote-seven {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-seven {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-promote-seven {position:absolute; bottom:5px; left:100px; z-index: 997;}



/* PROMOTE eight */


/* root element for scrollable */
.scrollable-promote-eight {

	/* required settings */
position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-eight .items-promote-eight {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-eight {position:absolute; top:70px; left:100px; z-index: 997;}
.controller-down-promote-eight {position:absolute; bottom:5px; left:100px; z-index: 997;}




/* PROMOTE four */


/* root element for scrollable */
.scrollable-promote-nine {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-nine .items-promote-nine {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-nine {position:absolute; top:95px; left:100px; z-index: 997;}
.controller-down-promote-nine {position:absolute; bottom:5px; left:100px; z-index: 997;}





/* PROMOTE five */

/* root element for scrollable */
.scrollable-promote-ten {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-ten .items-promote-ten {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-ten {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-promote-ten {position:absolute; bottom:5px; left:100px; z-index: 997;}




/* PROMOTE five */

/* root element for scrollable */
.scrollable-promote-eleven {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:70px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 448px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-promote-eleven .items-promote-eleven {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-promote-eleven {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-promote-eleven {position:absolute; bottom:5px; left:100px; z-index: 997;}









/* SUPPORT one */

/* root element for scrollable */
.scrollable-support-one {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-support-one .items-support-one {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-support-one {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-support-one {position:absolute; bottom:5px; left:100px; z-index: 997;}











/* SUPPORT two */

/* root element for scrollable */
.scrollable-support-two {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-support-two .items-support-two {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-support-two {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-support-two {position:absolute; bottom:5px; left:100px; z-index: 997;}

/* SUPPORT three */

/* root element for scrollable */
.scrollable-support-three {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-support-three .items-support-three {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-support-three {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-support-three {position:absolute; bottom:5px; left:100px; z-index: 997;}

/* SUPPORT four */

/* root element for scrollable */
.scrollable-support-four {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-support-four .items-support-four {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-support-four {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-support-four {position:absolute; bottom:5px; left:100px; z-index: 997;}

/* SUPPORT five */

/* root element for scrollable */
.scrollable-support-five {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-support-five .items-support-five {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-support-five {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-support-five {position:absolute; bottom:5px; left:100px; z-index: 997;}

/* SUPPORT six */

/* root element for scrollable */
.scrollable-support-six {

	/* required settings */
	position:relative;
	overflow:hidden;
	top:45px;
	left: 15px;
	/* vertical scrollables have typically larger height than width but not now */
	height: 462px;
	width: 225px;
}

/* root element for scrollable items */
.scrollable-support-six .items-support-six {
	position:absolute;
	/* this time we have very large space for the height */
	height:20000em;
}

.controller-up-support-six {position:absolute; top:56px; left:100px; z-index: 997;}
.controller-down-support-six {position:absolute; bottom:5px; left:100px; z-index: 997;}







/* GENERIC SCROLL CONTROL ITEMS */

a.browse-v {	
	background:url(../img/vert_arrows.png) no-repeat;
	display:block;
	width:35px;
	height:35px;
	cursor:pointer;
	font-size:1px;
}


/* up */
a.up 				{ background-position: -35px 0;}
a.up:hover 		{ background-position:-35px -35px !important; }
a.up:active 	{ background-position:-35px -35px !important; } 


/* down */
a.down				{background-position: 0 0;} 
a.down:hover  		{ background-position:0 -35px !important; }
a.down:active  	{ background-position:0 -35px !important; }