* { margin: 0; padding: 0; border: none; }

body { margin: 20px; background-color: black; }

div#container { width: 932px; height: 5 px; margin: 0 auto; }

/* outmost wrapper element */
#scrollable {
	position: relative;
	width:120px;
	height: 538px;
	margin-left: 20px;
}

/* navigator */
div.navi-container {
	width:12px;
	position: absolute;
	top: 50%;
	left: 150px;
	
}
div.navi {
	width:12px;
}

/* items inside navigator */
div.navi span {
	display: block;
	width:12px;
	height:12px;
	margin-bottom: 6px;
	background:url(../images/skin/dots.png) 0 0 no-repeat;     
	cursor:pointer;
}

div.navi span:hover {
	background-position:0 -12px;      
}

div.navi span.active {
	background-position:0 -24px;     
} 

/* next / prev buttons */
a.prev, a.next {
	display:block;
	width:31px;
	height:31px;
	background-repeat:no-repeat;
}

a.prev {
	background:url(../js/scrollable/images/button-left.gif);		
}

a.prev:hover {
	background:url(../js/scrollable/images/button-left-over.gif);		
}

a.next {
	background:url(../js/scrollable/images/button-right.gif);		
}

a.next:hover {
	background:url(../js/scrollable/images/button-right-over.gif);		
}



/* container for the scrollable items */
div.items {	
	width:120px;
}

div.items-container {
	width: 120px;
	height: 538px;
	height: 700px;
	overflow: hidden;
}


/* single item */
div.items a {
	display: block;
	width: 120px;
	height: 180px;
	margin-bottom: 22px;
	cursor:pointer;
	/* for IE */
  	filter:alpha(opacity=40);
  	/* CSS3 standard */
  	opacity:0.4;
}

div.items a:hover {
	color:#999;	
	/* for IE */
  	filter:alpha(opacity=80);
  	/* CSS3 standard */
  	opacity:0.8;
  	cursor:hand;
}

div.items a.active {
	cursor:default;
	/* for IE */
  	filter:alpha(opacity=100);
  	/* CSS3 standard */
  	opacity:1.0;
}

div.button-container { position: relative; height: 15px; width: 120px; display: none; }
div.top-button, div.bottom-button { position: absolute; top: 0; left: 45px; width: 31px; height: 31px; z-index: 1000; }
div.top-button { top: -16px; }

ul.gallery { list-style: none; }
div#navigation { float: left; }
div#images { width: 722px; height: 538px; float: right; position: relative; overflow: hidden;}

div#img-gallery {
	display: absolute;
	top: 0;
	left: 0;
	z-index: 500;
}

div#overlay {
	height: 38px;
	/* for IE */
  	filter:alpha(opacity=60);
  	/* CSS3 standard */
  	opacity:0.6;
  	background-color: black;
  	position: absolute;
  	top: 500px;
  	left: 0;
  	width: 100%;
  	color: #CCC;
  	line-height: 38px;
  	text-indent: 10px;
  	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  	z-index: 1000;
}