/* 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:url(/sitefiles/timeline/scrollable/arrow/left.png) no-repeat;
	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:url(/sitefiles/timeline/scrollable/arrow/right.png);
	clear:right;	
}



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


/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:10px;
	height:10px;
	float:left;
	margin:3px;
	background: url(/sitefiles/timeline/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

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

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


	
	div#wrapper {
width: 80%;
background-color:#666666;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
	}
	
	
	/* main vertical scroll-AREA FOR IMAGE */
	#main {
		position:relative;
		overflow:hidden;
		height: 279px;
		width:654px;
		border-right: 1px solid #333;
	}
	
	/* root element for pages */
	#pages {
		position:absolute;
		height:279px;
	}
	
	/* single page-BACKGROUND */
	.page {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-10-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page00 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-00-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page90 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-90-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page80 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-80-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page70 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-70-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page60 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-60-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page50 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-50-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page40 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-40-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	.page30 {
		padding:10px;
		height: 279px;
		background-image:url(/sitefiles/timeline/kpc-30-bkg.jpg);
		background-position:left;
		width:635px;
	}
	
	/* root element for horizontal scrollables */
	.scrollable {
		position:relative;
		overflow:hidden;
		width: 635px;
		height: 279px;
	}
	
	/* root element for scrollable items */
	.scrollable .items {
		width:20000em;
		position:absolute;
		clear:both;
	}
	
	/* single scrollable item */
	.item {
		float:left;
		cursor:pointer;
		width:800px;
		height:279px;
		padding:0px;
	}
	
	#year li {
		clear:both;
		float:left;
		color:#000;
		font-family:Arial, Helvetica, sans-serif;
		font-size:14px;
		list-style-type:none;
		width:350px;
		cursor:pointer;
	}
	
	.subitem{
		float:left;
		width:420px;
		height:279px;
		padding:0px;
	}
	
	.link{
		float:left;
		cursor:pointer;
		width:200px;
		height:300px;
		padding:0px;
	}
	/* main navigator-TABBED NAVIGATOR ON LEFT */
	#main_navi {
		float:left;
		padding:0px !important;
		margin:0px !important;
	}
	
	#main_navi li {
		background-image: url(/sitefiles/timeline/tab-up.png);
		border-bottom:1px solid #666;
		clear:both;
		color:#FFFFFF;
		font-family:Arial, Helvetica, sans-serif;
		font-size:24px;
		height:26px;
		list-style-type:none;
		padding:2px 0px 2px 10px ;
		width:135px;
		cursor:pointer;
	}
	
	#main_navi li:hover {
		background-image:url(/sitefiles/timeline/tab-over.png);
	}
	
	#main_navi li.active {
		background-image:url(/sitefiles/timeline/tab-down.png);
		font-family:Arial, Helvetica, sans-serif;
		font-size:24px;
	}
	
	#main_navi img {
		float:left;
		margin-right:10px;
	}
	
	#main_navi strong {
		display:block;
	}
	
	/* dot nav */
	#main div.navi {
		margin-left:5px;
		cursor:pointer;
	}
	
	.clearheader{
		clear:both;
		float:left;
		width:420px;
		font:Arial, Helvetica, sans-serif;
		font-size:24px;
		font-weight:bold;
		color:#d71920;
		padding:0;
		margin:0px;
	}
	
	.clearfloats{
		clear:both;
		float:left;
		font:Arial, Helvetica, sans-serif;
		font-size:12px;
		line-height:14px;
		width:420px;
		padding:8px 5px 2px 5px;
		margin:0px;
	}
	
	.clearfloatsindent{
		clear:both;
		float:left;
		font:Arial, Helvetica, sans-serif;
		font-size:12px;
		width:420px;
		padding:5px 5px 2px 15px;
		margin:0px;
	}
	.clearlink{
		clear:both;
		float:left;
		font:Arial, Helvetica, sans-serif;
		font-size:24px;
		font-weight:bold;
		color:#F00;
		padding-left:5px;
		margin:0px;
	}
	
	.clearlinkindent{
		clear:both;
		float:left;
		font:Arial, Helvetica, sans-serif;
		font-size:24px;
		font-weight:bold;
		color:#F00;
		padding-left:15px;
		margin:0px;
	}
	
	#item_image{
		clear:both;
		float:right;
	}
	
	
	/* the overlayed element */
	.simple_overlay {
		
		/* must be initially hidden */
		display:none;
		
		/* place overlay on top of other elements */
		z-index:10000;
	
		/* styling */
		background-color:#f1f2f2;
		
		width:675px;	
		min-height:200px;
		border:4px solid #666;
	}
	
	/* close button positioned on upper right corner */
	.simple_overlay .close {
		background-image: url(/sitefiles/timeline/close.png);
		position:absolute;
		right:-15px;
		top:-15px;
		cursor:pointer;
		height:35px;
		width:35px;
	}
	
	.simple_overlay img{
			margin:10px;
			height:300px;
	}
	
	/* styling for elements inside overlay */
		.details {
			position:absolute;
			top:5px;
			right:15px;
			font:Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
			width:350px;
			margin: 10px;
		}
		
		/* h3 styling for elements inside overlay */
		.details h3 {
			color:#333333;
			font-size:18px;
			padding-top:0px;
		}
		
		#timefooter {
		float:left;
		background-image:url(/sitefiles/timeline/footer-gradient.png);
		color:#333;
		width:800px;
		min-height:20px;
		margin-top:0px;
		
		}
		#timefooter p {
		
		font-family:Arial, Helvetica, sans-serif;
		color:#FFF;
		font-size:12px;
		list-style-type:none;
		width:780px;
		padding:5px 10px;
		margin:0px;
		}