/*
 * root element for scrollable
 */
.scrollable-horizontal
{  
	/* required settings */
	position:relative;
	overflow:hidden;	

	/* optionally floated, to be side by side with the navigational arrows */
	float:left;
}

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

/* 
 * root element for scrollable items 
 */
.scrollable-horizontal .items
{	
	/* must be absolutely positioned */
	position:absolute;
	/* must have very large space for width */	
	width:20000em;
}

.scrollable-vertical .items
{
	/* must be absolutely positioned */
	position:absolute;
	/* must have very large space for height */	
	height:20000em;	
}

/* a single item must be floated in horizontal scrolling.  */
.scrollable-horizontal .item
{
	float:left;
}

/*
 * .scrollable-horizontal/vertical has overflow:hidden so you must set its width and height
 * this element must not have margin or padding set (otherwise there will be some problems with IE7)
 *
#RootID
{
	width: ...px;
	height: ...px;
}
 
 *
 * this is the element you will style the most
 * width and height must be the same as root width and height
 *
#RootID .item
{
	width: ...px;
	height: ...px;

	...
}

 *
 * you may want to setup some decorations to the active item  
 *
#RootID .item.active
{ 
}
 */

/* -------------------------------- */

/* prev, next, prevPage and nextPage buttons */
.next {} .nextPage{} .prev {} .prevPage{}

/*
 * navigational arrows containers
 */
 
.scrollable-horizontal-controls
{  
	/* optionally floated, to be side by side with the navigational arrows */
	float:left;
}
.scrollable-vertical-controls
{  
}

/* disabled navigational button */
.arrow.disabled
{
	visibility:hidden;
}

/*
 * navigational arrows styling
 *
#RootID .arrow 
{	
	width:20px;
	height:20px;
	
	cursor:pointer;

	background:url('../Images/scrollable/arrowx.png') no-repeat;
	background:url('../Images/scrollable/arrowy.png') no-repeat;
}

#RootID .arrow.left			{ } 
#RootID .arrow.left:hover  	{ background-position:-20px 0; }
#RootID .arrow.left:active  { background-position:-40px 0; }

#RootID .arrow.right 		{ background-position: 0 -20px; }
#RootID .arrow.right:hover 	{ background-position:-20px -20px; }
#RootID .arrow.right:active { background-position:-40px -20px; } 

#RootID .arrow.up			{ }
#RootID .arrow.up:hover  	{ background-position:-20px 0;}
#RootID .arrow.up:active  	{ background-position:-40px 0; }

#RootID .arrow.down 		{ background-position: 0 -20px; }
#RootID .arrow.down:hover  	{ background-position:-20px -20px; }
#RootID .arrow.down:active 	{ background-position:-40px -20px; } 
 */

/* -------------------------------- */

/*
 * position and dimension of the navigator
 *
.navi
{ 
} 
 */

/* items inside navigator */ 
.navi a
{ 
    width:8px; 
    height:8px; 

    margin:3px; 
    
    display:block; 
    float:left; 

    background:url('scrollable/navigator.png');
	background-repeat: no-repeat;
} 
 
/* mouseover state */ 
.navi a:hover
{ 
    background-position:0 -8px;       
} 
 
/* active state (current page state) */ 
.navi a.active
{ 
    background-position:0 -16px;      
}