@charset "utf-8";

.banner {
	position:relative;
	margin:0px auto;
	width:252px;
	height:116px;
}
.scrollable {
	/* required settings */
	position:relative;
	margin:0px auto;
	overflow:hidden;
	width: 252px;
	height:96px;
}

.scrollable .items {
	/* this cannot be too large */
	height:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:0px;
	cursor:pointer;
	width: 252px;
    height:96px;
	
	/*-moz-border-radius:4px;*/
	/*-webkit-border-radius:4px;*/
}

/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
}

/* position and dimensions of the navigator */ 
.navi {
	position:relative;
	margin-top:4px ;
	height:15px;
	float:right;
}

/* items inside navigator */
.navi a {
	float:left;
	margin:1px !important;
	display:block;
	font-size:1px;
}
.navi a div {
	width:18px;
    height:15px;
    background:url(../img/nav.gif) no-repeat ;
}
	 
.navi a div.seq0 {background-position:0px 0;}
.navi a div.seq1 {background-position:-18px 0;}
.navi a div.seq2 {background-position:-36px 0;}
.navi a div.seq3 {background-position:-54px 0;}
.navi a div.seq4 {background-position:-72px 0;}

/* mouseover state */
.navi a:hover div.seq0, .navi a.active div.seq0 {background-position:0px -15px;}
.navi a:hover div.seq1, .navi a.active div.seq1 {background-position:-18px -15px;}
.navi a:hover div.seq2, .navi a.active div.seq2 {background-position:-36px -15px;}
.navi a:hover div.seq3, .navi a.active div.seq3 {background-position:-54px -15px;}
.navi a:hover div.seq4, .navi a.active div.seq4 {background-position:-72px -15px;}