@charset "UTF-8";
/* CSS Document */

#sliderContainer {
	position:absolute;
	width:253px;
	height:522px;
	margin:0 auto;
	z-index:1000;
	right:0;
	top:0;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

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

	/* required settings */
	position:absolute;
	top:5px;
	right:0;
	overflow:hidden;
	width:253px;
	height:522px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	top:0;
	left:0;
	clear:both;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
	width:1200px;
	
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:0;
	background:none;
	padding:0;
	border:none;
	width: 253px;
	height:522px;
}

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


/* ----------------------------------------------------------------------------------- */
/* ------------------ these style control the navigational arrows  ------------------- */
/* ----------------------------------------------------------------------------------- */


/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	float:left;
	margin-top:125px; /*controls vertical position of arrow buttons */
	cursor:pointer;
	font-size:1px;
}

/* right arrow */
a.right 		    { position:absolute; top:42px; right:3px; z-index:10000; background-position:0 0; clear:right; margin-right: 0;  background:url(../images/slider/arrow-right.png) no-repeat; width:34px; height:68px;}
a.right:hover 	    { background-position:-34px 0; }
a.right:active  	{ background-position:-34px 0; }


/* left arrow */
a.left				{ position:absolute; top:39px; right:212px; z-index:10000; background-position:0 0; margin-left: 0; background:url(../images/slider/arrow-left.png) no-repeat; width:37px; height:68px; } 
a.left:hover  		{ background-position:-37px 0; }
a.left:active  	    { background-position:-37px 0; }

/* up and down */
/*a.up, a.down		{  
	float: none;
	margin: 10px 50px;
}*/

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

/* down */
/*a.down 			{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	    { background-position:-60px -30px; } */ 


/* ----------------------------------------------------------------------------------- */
/* -------- these style control the navigational circles below the images ------------ */
/* ----------------------------------------------------------------------------------- */


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

.navi {
    height: 20px;
    width: 100px;
	position:absolute;
	top: 512px;
	right:55px;
	z-index:10000;
}

.navi a {
	background:url(../images/slider/nav-empty.png) no-repeat;
    display: block;
    float: left;
    font-size:1px;
    height:20px;
    margin: 3px;
    width: 10px;
	color: #295C72;
	outline: medium none;
}
.navi a:hover {
	background:url(../images/slider/nav-fill.png) no-repeat; 
}

.navi a.active {
    background:url(../images/slider/nav-fill.png) no-repeat;
}