#main {
		position:relative;
		overflow:hidden;
		height: 380px;
		z-index:1;
	}
	
	/* root element for pages */
	#pages {
		position:absolute;
		height:20000em;
	}
	
	/* single page */
	.page {
		padding: 0px 20px 20px 5px;
		height: 360px;
		background: url('photoShadow.jpg') bottom right no-repeat;
		width:480px;
	}
	
	/* root element for horizontal scrollables */
	.scrollable {
		position:relative;
		overflow:hidden;
		width: 480px;
		height: 340px;
	}
	
	/* root element for scrollable items */
	.scrollable .items {
		width:20000em;
		position:absolute;
		clear:both;
	}
	
	/* single scrollable item */
	.item {
		float:left;
		cursor:pointer;
		width:480px;
		height:340px;
		margin-right:10px;
		position:relative;
	}
	
	.item .caption
	{
	    width:450px;
	    position:absolute;
	    left:0;
	    bottom:0;
	    padding:10px 15px 10px 15px;
	    background:#fff;
	    filter: alpha(opacity=80);
	    -moz-opacity: 0.8;
	    opacity: 0.8;   
	}
	
	.item .caption h3
	{
	    color:#cc0000;
	    font-family:"Trebuchet MS";
	    font-size:18px;
	    font-weight:bold;
	    padding:0;
	    margin:0;
	}
	
	.item .caption p
	{
	    color:#000;
	    font-family:"Trebuchet MS";
	    font-size:12px;
	    margin:0;
	    padding:0;
	}
	
	.item .caption p a:link,
	.item .caption p a:active,
	.item .caption p a:visited,
	.item .caption p a:hover
	{
	    color:#666666;
	    text-decoration:none;
	    font-weight:bold;
	}
	
	.item .caption p a:hover
	{
	    color:#cc0000;
	}
	
	/* main navigator */
	.navi_wrapper
	{
	    float:left;
	    padding-top:15px;
	    padding-bottom:15px;
	    width:170px;
	    position:relative;
	    z-index:100;
	}
	
	#main_navi {
		float:left;
		padding:0px !important;
		margin:0px !important;
	}
	
	#main_navi li {
		clear:both;
		color:#FFFFFF;
		font-size:12px;
		height:60px;
		list-style-type:none;
		padding:5px;
		width:160px;
		cursor:pointer;
		position:relative;
	}
	
	#main_navi li:hover {
		background:url('bgdHover.png') top left no-repeat;
	}
	
	#main_navi li.active {
		background:url('bgdActive.png') top left no-repeat;
	}
	
	#main div.navi {
		cursor:pointer;
	}
	
	#main_navi li .arrow
	{
	    display:none;
	}
	
	#main_navi li.active .arrow
	{
	    display:block;
	    background:url('arrow.png');
	    height:30px;
	    width:15px;
	    position:absolute;
	    top:20px;
	    right:-15px;
	    z-index:100;
	}
	
	


/* DEPRECATED FILE */

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

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:18px;
	height:18px;
	background:#cc0000;
	float:left;
	margin:43px 10px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -18px;		
}

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

/* next button uses another background image */
a.next, a.nextPage {
	background-image:#cc0000 url(../img/scrollable/arrow/right.png);
	clear:right;	
}



/*********** navigator ***********/


/* position and dimensions of the navigator */
.navi {
	height:20px;
	margin:auto;
	text-align:center;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	margin:3px;
	background:url('btnPage.png') 0 0 no-repeat;
	display:inline-block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}