/* General styles */
body{
	font-size:75%;
	font-family: arial, sans-serif;
	color: #444;
	
}
a, a:visited,a:link{
	color:#25688F;
	text-decoration:none;
}
	a:hover{
		color:#1C7AB3;
	}

h1{
	font-family: Cambria;
/*	font-style:italic;*/
}

.logo a{
	width:312px;
	height:85px;
	display:block;
	position:fixed;
	left:30px;
	top:20px;
	z-index:10;
	padding-top:80px;
	background:url(../images/logo2.png) 0 0 no-repeat;
}
	.logo a span{
		background:rgba(0,0,0,0.3);
		width:140px;
		text-align:center;
		margin-left:110px;
		margin-top:5px;
		padding:5px;
		color:#fff;
		display:block;
	}

/* hover areas for auto scrolling */
.direction{
    position:fixed;
    width:50px;
    height:100%;
	z-index:50;
	.left{left:0; top:0;}
	.right{right:0; top:0;}
	}
/* important timeline styles */
.timeline{
	overflow:hidden;
}
	.timeline > div{
		float:left;
		height:100%;
		overflow:hidden;
		position:relative;
	}
		.timeline .content{
			height:100%;
		}
			.timeline .periodimage{
				width:100%;
				position:absolute;
			}
		.timeline .loading{
			width:1180px;
			padding-left:100px;
			line-height:500px;
			color:#CCC;
			font-size:5em;
			border-left:1px solid #CCC;
		}

/* navigation */
.nav{
	font-family: calibri;
	font-size:1.3em;
	background:#888;
	margin:0 -20px 0px -20px;
	padding:12px 0;
	text-align:center;
	position:relative;
}
	.nav ul{
		margin:0 auto;
		width:100%;
		overflow:hidden;
	}
.nav li{
	display:inline;
	line-height:1.1em;
}
	.nav .next, .nav .prev{
		display:block;
		position:absolute;
		top:-15px;
		width:73px;
		height:73px;
	}
		.nav .next{
			right:80px;
			background:url(../images/nav_arrow_right.png) 0 0 no-repeat;
		}
		.nav .prev{
			left:80px;
			background:url(../images/nav_arrow_left.png) 0 0 no-repeat;
		}
		.nav .next:hover, .nav .prev:hover{
			background-position:0 -73px;
		}
		
	.nav a{
		font-weight:bold;
		color:white;
		text-decoration:none;
		line-height:1em;
		padding:0 10px;
		outline:none;
	}
	
	.nav li.selected a, .nav a:hover{
		color:#C6F9FF;
	
		
	}

	.nav li.selected a{
	
		font-size:1.5em;}

		
.yearindicator2{
	font-family: calibri;
	background-color:transparent;
	height:20%;
	width:650px;
	text-align:left;
	color:#000;
	position:absolute;
	left:29%;
	bottom:5%;
	padding:6px 0;
	font-size:125%;
	line-height:110%;
	z-index:2;

}

.yearindicator2 h2{
	font-family:cambria;
	font-size:125%;
line-height:110%;
}

.yearindicator2 .blue{
	color:#222;
	font-family:cambria;
	font-weight:bold;
	font-size:100%;
}


.yearindicator3{
	font-family: calibri;
/*	font-style:italic;*/
	background-color:transparent;
height:50px;
	width:650px;
	text-align:left;
	color:#fff;
	position:absolute;
	margin-left:50px;
	bottom:100px;
	padding:6px 0;
		font-size:125%;
	line-height:110%;
	z-index:2;

}

.yearindicator3 h2{
	font-family:cambria;
	font-size:3em;
	color:#ccc;
line-height:110%;
}

.yearindicator3 .blue{
	color:#f8f8f8;
	font-family:cambria;
	font-weight:bold;
	font-size:1em;
}


/* year item layout and content*/
.years{
	position:relative;
	z-index:2;
	overflow:hidden;
	padding:180px 40px 40px 0;
}
	
li.intro h1{
			color:#000;
			font-size:3em;
			line-height:1em;
			margin-bottom: 10px;
			}
			li.intro p.intro{
				color:#0096A7;
				font-size:1.4em;
				line-height:1.2em;
			}
		
	.years li{
		float:left;
		width:170px;
		overflow:hidden;
		margin-left:40px;
		border:1px solid #E8E8E8;
		padding:10px;
		background:white;
		background:rgba(255,255,255,0.9);
		-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
		line-height:1em;
		
	}
	
	
	.years li.intro{
		font-family:calibri,sans-serif;
		padding:15px 15px 15px 30px ;
		width:420px;
		margin-left:15px;
		padding-right:430px;
		margin-right:20px;
		border:0;
		position:relative;
		border:0px !important;
		border-color:transparent !important;
		box-shadow: none !important;
		background:transparent !important;
		
	}
	
	
		.years li.wide{
			width:260px;
		}
		.years h2, .overlay h2{
			font-family: Cambria;
		/*	font-style:italic; */
			font-size:1.3em;
			line-height:1em;
			font-weight:bold;
			padding: 0.3em 0 0.3em;
			margin-bottom:5px;
			color: #555;
		}
		.years img, .overlay img{
			border:1px solid #7C8B96;
			background:#fff;
			margin-bottom:10px;
		}
			.overlay img.left{
				float:left;
				margin-right:20px;
			}
		.years p, .overlay p{
			padding:0 0 10px 0;
			line-height: 1.3em;
			font-size: 105%;
		}
		
		.overlay h3{
		font-family: Cambria;
		font-size:1.5em;
		color:#0096A7;
		}
		
		.overlay p{
	
		font-size:1.2em;
		}
		
		.years p{
		font-size:1.4em;
		line-height:1em;
		font-weight:bold;
		font-family: Cambria;
		margin-bottom:5px;
		color: #0096A7;
		}
		
		.years p em{
			display:block;
			padding-bottom:10px;
			font-size:1.6em;
			line-height:1.1em;
			font-weight:bold;
			font-family: Times, Times New Roman, serif;
		}
		.years .magnify, .years .video{
			position:relative;
			display:block;
		}
			.years .magnify span, .years .video span{
				position:absolute;
				width:27px;
				height:26px;
				z-index:2;
				left:8px;
				bottom:20px;
			}
			.years .magnify span{
				background: url(../images/icon_magnify.png) 0px -26px no-repeat;
			}
			.years .video span{
				background: url(../images/icon_play.png) 0px -26px no-repeat;
			}
			.years a:hover span{
				background-position:0 0px;
			}


			
			
.period50{

	background: #f1f1f1 ;
}
	.period50 .periodimage{
		
		height:900px;
		background: url(../images/backgrounds/KBL49.png) 80px 0px fixed no-repeat;
	}

.period60{
	background: #000;
}
	.period60 .periodimage{
		height:900px;
		background: url(../images/backgrounds/KBL60b.png) 0px 0px fixed no-repeat;
	}
.period70{
	background: #777;
}
	.period70 .periodimage{
		height:900px;
		background: url(../images/backgrounds/KBL70b.png) -50px 0px fixed no-repeat;
	}
.period80{
	background: #222;
}
	.period80 .periodimage{
		height:900px;
		background: url(../images/backgrounds/KBL80b.png) -50px 0px fixed no-repeat;
	}

.period90{
	background: #000;
}
	.period90 .periodimage{
		height:900px;
		background: url(../images/backgrounds/KBL90.png) 50px 0px fixed no-repeat;
	}
.period2000{
	background: #555;
}
	.period2000 .periodimage{
		height:900px;
		background: url(../images/backgrounds/KBL2000.png) 0px 0px fixed no-repeat;
	}

.period2010{
	background: #000;
}
	.period2010 .periodimage{
		height:900px;
		background: url(../images/backgrounds/KBL2010b.png) 0px 0px fixed no-repeat;
	}
	
.periodnow{
	background: #266CA0;
}
	.periodnow .periodimage{
		height:900px;

		background: url(../images/backgrounds/KBLnow.png) 700px 0px fixed no-repeat;
	}
	
	
	
/* overlay lightbox*/
#exposeMask{
	z-index:9000 !important;
	position:fixed !important; /* vital for IE */
}
.overlay {
	margin-top:-30px;
	z-index:10000;
	display:none;
	background-color:white;
	padding:11px;
	max-width: 630px;
}
	.overlay .close{
		width:30px;
		height:30px;
		display:block;
		right:-17px;
		top:-14px;
		position:absolute;
		z-index:10000;
		cursor:pointer;
		background:url(../images/icon_close.png) 0 0 no-repeat;
	}


/* footer */
footer {
	font-family: arial,sans-serif;
	position:fixed;
	z-index:4;
	bottom:0;
	width:99%;
	padding:0 10px 0px 10px;
	border-bottom:1px solid #CCC;
	
}
/* Footer footer */
.footer-footer {
	font-family: arial, sans-serif;
	font-style: normal;
	color: #777;
	font-size:0.9em;
}
	.footer-footer ul {
		
	}
		.footer-footer li {
			list-style-type:none;
			float: left;
			padding: 0 0.71em;
			margin: 0 0 0.36em;
			border-right: 1px dotted #b2b2b2;
		}
			.footer-footer li:first-child {
				padding: 0 0.71em 0 0;
			}

			.footer-footer .sitebytbx{
				border:0;
			}
				.footer-footer .sitebytbx a {
					display: block;
					padding-right:10px;
					width: 100px;
					height: 15px;
					background: url(../images/footer_sitebytbx.png) no-repeat top left;
					text-indent: -9999px;
				}
					.footer-footer .sitebytbx a:hover {
						background-position: bottom left;
					}
			
			.footer-footer .social, .footer-footer .chph {
				border: none;
				padding: 0;
				margin: 0;
			}
				.footer-footer .social{
					position:fixed;
					top:10px;
					right: 152px;
					margin-left:20px;
				}
				
				.footer-footer .chph{
					margin-right:20px;
					float:right;
					width:200px;
					color:#666;
				}
					.footer-footer .chph a{
						display:block;
						width:157px;
						color:inherit;
						background:url("../images/logo_chph.png") 0 50% no-repeat;
						padding: 5px 0 5px 56px
					}
			.footer-footer .feedback{
				border:0;
			}
				.footer-footer .feedback a {
					display: block;
					background: url(../images/footer_feedback_bg.png) no-repeat top left;
					width: 64px;
					height: 16px;
					padding: 0 0 0 25px;
					color: #fff;
					font-weight: bold;
					line-height:17px;
				}
				.footer-footer .feedback a:hover {
					background-position: bottom left;
				}
			
	.footer-footer .secondary-links {
		clear: left;
		padding: 10px 0 0 0;
		overflow:hidden;
	}
		.footer-footer .secondary-links li {
			margin: 0;
		}