/* 
 * Hayward Presentation Layer
 *
 * Author	Oskar Krawczyk (o.krawczyk@keepthinking.it)
 * Version	1.0
 * 
 ======================================================================= */

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	background: #ECECEC url(../img/bodyBg.gif) 0 0 repeat-x;	
	color: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
}

h1, h2, h3, h4, h5, p, ul, ol, li { /* reset elements */
	margin: 0;
	padding: 0;
	list-style: none;
}

h2, h3 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-weight: normal;
}

h3 {
	color: #333333;
	margin: 0 0 16px 0;
}

h4 {
	font-size: .9em;
	color: #333333;
	border-bottom: solid 1px #C0C0B3;
	text-transform: uppercase;
	margin: 0 0 10px 0;
	padding: 8px 0 0 0;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
}

/* 
 ======================================================================= */
#wrapper {
	background: url(../img/shd-bg.png) 50% 0 no-repeat;
}

/* 
 ======================================================================= */
#container {
	padding: 0;
	width: 756px;
	position: relative;
	text-align: left;
	margin: 0 auto;
	background: #EFECD9 url(../img/bg.gif) -4px 0 repeat-y;
}


/* 
 ======================================================================= */
#branding { /* header */
	height: 150px;
	font-size: 1em;
	background: #F8F8F8;
	
	color: #333;
}

	#branding a {
		color: #333;
		text-decoration: underline;
	}

	#branding a:hover {
		text-decoration: none;
	}

	#branding h1 {
		
	}
	
	#branding img {
		border: none;
	}
	
	#branding h1 a { /* logo */	
		position: absolute;
		top: 8px;
		left: 10px;
		text-indent: -9000em;
		display: block;
		height: 58px;
		width: 148px;
		background: url(../img/logo.gif) 0 0 no-repeat;
	}
	
	#branding h2 {
		position: absolute;
		top: 1.1em;
		left: 246px;
		font-size: 2em;
	}

	
body #nav-start {
	margin: 20px 0 0 0;
	padding: 0 0 20px 0;
	height: 35px;
	text-align: center;
}

body #nav-start a {
	overflow: hidden;
	background: url(../img/nav-button-right.gif) 100% 100% no-repeat;
	display: inline;
	margin: 0;
	text-indent: 0;
	padding: 10px 12px 9px 0;
	position: relative;
		
}

body #nav-start a em {
	display: inline;
	font-size: 90%;
	padding: 9px 0 10px 12px;
	font-style: normal;
	background: url(../img/nav-button-left.gif) 0 0 no-repeat;
}


#current-page {
	background: #00729A;
	border-bottom: solid 2px #005472;
}

	#current-page h2 {
		color: #fff;
		padding: 3px 0 3px 15px;
		font-size: 1.8em;
		font-weight: normal;
	}
	

/* 
 ======================================================================= */
#navigation {
	width: 246px;
	float: left;
	font-size: 1.1em;
}

	#navigation a {
		display: block;
		padding: 4px 0 4px 8px;
		color: #fff;
	}

	#navigation li {

	}
	
	#navigation li span {
		display: block;
	}
	
	#navigation .main li span {
		background: url(../img/nav-lvl-0.gif) 100% 100% no-repeat;
		border-bottom: solid 1px #2F527F;
	}
	
	#navigation .sub li span {
		background: url(../img/nav-lvl-1.gif) 100% 100% no-repeat;
		border-bottom: solid 1px #4F5048;
	}
	
	#navigation li span a {
		background: url(../img/nav-lvl-1-arrow-closed.gif) 98% 50% no-repeat;
	}
	
	#navigation li span.active a {
		background: url(../img/nav-lvl-1-arrow-opened.gif) 98% 50% no-repeat;
	}
	
	#navigation li span.altItem a {
		background: none;
	}

	#navigation li ul {
		background: #D2D2C6;
	}
	
	#navigation li ul li {
		border-bottom: solid 1px #666666;
		background: url(../img/nav-lvl-2.gif) 100% 0 repeat-y;
	}
	
	#navigation li ul li a {
		color: #666;
		font-size: 1.0em;
	}
	
	#navigation li ul li.active,
	#navigation #timeline li ul li.active,
	#navigation #timeline li ul li span.active {
		border: solid 2px #000;
		margin-top: -1px;
		position: relative;
	}
	
	#navigation li ul li.active a,
	#navigation #timeline li ul li span.active a {
		background: #fff url(../img/nav-active.gif) 0 50% no-repeat;
		color: #181818;
		border: none;
	}
	
	#navigation #nav-inj-top-shd,
	#navigation #nav-inj-bottom-shd {
		display: block;
		height: 4px;
		position: absolute;
		left: 0;
		width: 100%;
		border: none;
	}
	
	#navigation #nav-inj-top-shd,
	#navigation #timeline li ul li.active #nav-inj-top-shd,
	#navigation #timeline li ul li span.active #nav-inj-top-shd {
		background: #fff url(../img/nav-active-top.gif) 0 0 no-repeat;
		top: 0;
	}
	
	#navigation #nav-inj-bottom-shd,
	#navigation #timeline li ul li.active #nav-inj-bottom-shd,
	#navigation #timeline li ul li span.active #nav-inj-bottom-shd {
		background: #fff url(../img/nav-active-bottom.gif) 0 0 no-repeat;
		bottom: 0;
	}
	
	
/* 
 ======================================================================= */
#timeline {

}

	#timeline .timelineParent {
		background: url(../img/gradient-mask-1.png);
	}
	
	#timeline .materialSection {
		background: #D2460A url(none);
		padding: 4px 0;
		margin: 0;
		color: #fff;
		font-size: .9em;
		text-indent: 8px;
	}
	
	#timeline .timelineParent .minorMaterials {
		font-size: 90%;
	}
	
	

	#timeline .timelineParent a {
		color: #fff;
		font-size: 90%;
		position: relative;
	}

	#timeline .timelineParent a .relObjNum {
		position: absolute;
		top: 4px;
		right: 27px;
		font-style: normal;
		background: url(../img/object-info.gif) 100% 50% no-repeat;
		padding: 0 13px 0 0;
	}
	
	#timeline a .relObjNum.objActive {
		background: url(../img/object-info-2.gif) 100% 50% no-repeat;
		color: #940404;
	}
	
	#timeline .timelineParent ul a .relObjNum {
		right: 5px;
	}

	#navigation #timeline .timelineParent span {
		background: none;
		border: none;
	}

	#navigation #timeline .timelineParent ul {
		border: none;
	}

	#navigation #timeline .timelineParent ul li {
		background: #95995E;
		font-size: 110%;
	}
	
	#navigation #timeline .timelineParent ul li li {
		font-size: 90%;
	}

	#navigation #timeline .timelineParent ul li {
		border: none;
		padding: 0;
	}
	
	
	#navigation #timeline .tp_1 {
		background-color: #466CB3;
		border: none;
	}

	#navigation #timeline .tp_1 a {
		border-bottom: solid 1px #807F81;
	}

	#navigation #timeline .tp_1 ul a {
		color: #333333;				
	}

		#navigation #timeline .tp_1 ul li {
			background-color: #A1B0C4;
		}

			#navigation #timeline .tp_1 ul li li {
				background-color: #C2CFDF;
			}

			#navigation #timeline .tp_1 ul li li a {
				padding: 4px 0 4px 15px;				
			}
	

	#navigation #timeline .tp_2 {
		background-color: #55B42D;
		border: none;
	}

	#navigation #timeline .tp_2 a {
		border-bottom: solid 1px #807F81;
	}

	#navigation #timeline .tp_2 ul a {
		color: #333333;				
	}

		#navigation #timeline .tp_2 ul li {
			background-color: #A7BE8F;
		}

			#navigation #timeline .tp_2 ul li li {
				background-color: #CDE3C2;
			}

			#navigation #timeline .tp_2 ul li li a {
				padding: 4px 0 4px 15px;				
			}
			
			
	#navigation #timeline .tp_3 {
		background-color: #9948E0;
		border: none;
	}

	#navigation #timeline .tp_3 a {
		border-bottom: solid 1px #807F81;
	}

	#navigation #timeline .tp_3 ul a {
		color: #333333;				
	}

		#navigation #timeline .tp_3 ul li {
			background-color: #CDB7D0;
		}

			#navigation #timeline .tp_3 ul li li {
				background-color: #E9E0F9;
			}

			#navigation #timeline .tp_3 ul li li a {
				padding: 4px 0 4px 15px;				
			}

	#navigation #timeline .tp_4 {
		background-color: #DA4418;
		border: none;
	}

	#navigation #timeline .tp_4 a {
		border-bottom: solid 1px #807F81;
	}

	#navigation #timeline .tp_4 ul a {
		color: #333333;				
	}

		#navigation #timeline .tp_4 ul li {
			background-color: #DB8976;
		}

			#navigation #timeline .tp_4 ul li li {
				background-color: #EAC7C1;
			}

			#navigation #timeline .tp_4 ul li li a {
				padding: 4px 0 4px 15px;				
			}


	#navigation #timeline .tp_5 {
		background-color: #B29658;
		border: none;
	}

	#navigation #timeline .tp_5 a {
		border-bottom: solid 1px #807F81;
	}

	#navigation #timeline .tp_5 ul a {
		color: #333333;				
	}

		#navigation #timeline .tp_5 ul li {
			background-color: #BFA97E;
		}

			#navigation #timeline .tp_5 ul li li {
				background-color: #D6C9B1;
			}

			#navigation #timeline .tp_5 ul li li a {
				padding: 4px 0 4px 15px;				
			}


	#navigation #timeline .tp_6 {
		background-color: #B5B5B5;
		border: none;
	}

	#navigation #timeline .tp_6 a {
		border-bottom: solid 1px #807F81;
	}

	#navigation #timeline .tp_6 ul a {
		color: #333333;				
	}

		#navigation #timeline .tp_6 ul li {
			background-color: #D2D2C6;
		}

			#navigation #timeline .tp_6 ul li li {
				background-color: #EEE0C4;
			}

			#navigation #timeline .tp_6 ul li li a {
				padding: 4px 0 4px 15px;				
			}

#page-nav.chapterColourId_1 {
	border-bottom: solid 2px #466CB3;
}

#page-nav.chapterColourId_2 {
	border-bottom: solid 2px #55B42D;
}

#page-nav.chapterColourId_3 {
	border-bottom: solid 2px #9948E0;
}

#page-nav.chapterColourId_4 {
	border-bottom: solid 2px #DA4418;
}

#page-nav.chapterColourId_5 {
	border-bottom: solid 2px #B29658;
}

.objectInfo_1 {
	background-color: #A1B0C4;
}

.objectInfo_2 {
	background-color: #B7E3B5;
}

.objectInfo_3 {
	background-color: #D6C1D5;
}

.objectInfo_4 {
	background-color: #E49685;
}

.objectInfo_5 {
	background-color: #EEE0C4;
}


/* 
 ======================================================================= */
#expeditions {
	
}
	
	#navigation #expeditions li {
		background-image: none;
		border-bottom: solid 1px #565256;
		overflow: hidden;
		width: 246px;
	}
	
	#navigation #expeditions li a {
		background: url(../img/gradient-mask.png);
		color: #fff;
	}
	
	#expeditions strong,
	#expeditions em {
		color: #fff;
		display: block;
		font-style: normal;
		font-weight: normal;
	}
	
	#expeditions strong {
		font-size: 95%;
	}
	
	#expeditions em {
		font-size: 115%;
	}
	


/* 
 ======================================================================= */
#page-nav {
	background: #C0C0B3 url(../img/page-nav-bg.gif) 50% 50% no-repeat;
	overflow: hidden;
	height: 100%;
	padding: 0 5px;
}

	#page-nav li {
		width: 235px;
	}

	#page-nav li a {
		color: #333333;
		font-family: "Trebuchet MS", Arial, sans-serif;
		font-size: 1.3em;
		padding: 9px 0;	
		display: block;
	}

	#page-nav .pageNavPrev {
		float: left;
		text-align: left;
	}

		#page-nav .pageNavPrev a {
			padding-left: 25px;
			background: url(../img/page-nav-prev.gif) 0 50% no-repeat;
		}

	#page-nav .pageNavNext {
		float: right;
		text-align: right;
	}

		#page-nav .pageNavNext a {
			padding-right: 25px;
			background: url(../img/page-nav-next.gif) 100% 50% no-repeat;
		}

	#page-nav li a:hover {
		color: #716B5D;
	}

#objects-info {
	background-image: url(../img/object-info.gif);
	background-repeat: no-repeat;
	background-position: 5px 50%;
	position: relative;
	padding: 2px 0 2px 20px;
	font-size: 95%;
}

#objects-info .back {
	position: absolute;
	right: 5px;
	top: 2px;
}

	#objects-info strong {
		text-transform: uppercase;
	}

	#objects-info li {
		display: inline;
	}


/* 
 ======================================================================= */
#article-nav {
	height: 30px;
}

	#article-nav li {
		float: left;
	}

	#article-nav li a {
		border: solid 1px #C0C0B3;
		text-transform: uppercase;
		font-size: .9em;
		outline: none;
		padding: 0 4px;
		float: left;
		margin: 0 5px 0 0;
	}

	#article-nav li.active a {
		background: #C0C0B3;
	
	}


/* 
 ======================================================================= */
#main {
	background: url(../img/main-bg.gif) 0 0 repeat-x;
	float: left;
	width: 510px;
	padding: 0 0 30px 0;
}

.simpleArticle {
	margin: 10px 0 0 0;
}

	.simpleArticle h3 {
		line-height: 100%;
	}

.advancedArticle {
	overflow: hidden;
	height: 100%;
}

	.advancedArticle h3 {
		text-align: center;
		margin: 0 0 3px 0;
	}

	.advancedArticle h3 em {
		display: block;
		margin: 0;
		font-size: .6em;
		font-style: normal;
	}
	
	.advancedArticle #quote {
		text-align: center;
		font-size: 110%;
		font-family: "Trebuchet MS", Arial, sans-serif;
		margin: 0 0 15px 0;
		color: #2A2A2A;
	}

.hasRelatedObjects {
	width: 490px;
}

	.hasRelatedObjects .mainContainer {
		width: 350px;
		float: left;
	}


	.hasRelatedObjects .relatedObjects {
		width: 120px;
		float: right;
	}

	.relatedObjects .objects li {
		margin: 0 0 20px 0;
		font-size: .9em;
	}

	.relatedObjects .objects img {
		border: solid 1px #ccc;
		background: #fff;
		padding: 4px;
		display: block;
	}

	#content .relatedObjects .objects p {
		font-style: italic;
		color: #7C7B73;
		padding: 0;
		margin: 3px 0;
		line-height: 120%;
	}

.more {
	padding: 3px 14px 3px 0;
	background: url(../img/more-arrow.gif) 100% 50% no-repeat;
}

.relatedLinks {
	
}

	.relatedLinks a {
		color: #333;
		font: .9em;
	}

.objectSingle {
	width: 490px;
}

	#content .objectSingle h3 {
		margin: 0 0 15px 0;
		font-size: 145%;
		line-height: 140%;
	}

.objectSingle .mainContainer {
	width: 265px;
	float: right;
	overflow: hidden;
}

.objectSingle .sideContainer {
	width: 210px;
	float: left;
}

.sideContainer {
	
}

	.sideContainer h4 {
		padding: 25px 0 0 0;
	}

.mainImage {
	
}

	.mainImage .image {
		position: relative;
	}
	
	.mainImage .image .zoom {
		position: absolute;
		top: 15px;
		left: 15px;
		height: 18px;
		width: 18px;
		display: block;
		text-indent: -9000em;
		background: url(../img/lens.gif);
	}
	
	.mainImage .image img {
		border: solid 1px #ccc;
		background: #fff;
		padding: 4px;
		display: block;
		
	}

	.mainImage .caption {
		margin: 2px 0;
	}

	.mainImage .copyright {
		font-size: .9em;
		line-height: 120%;
	}
	
.moreImages {
	
}

	.moreImages li {
		float: left;
		font-size: 95%;
	}

	.moreImages img {
		border: solid 1px #ccc;
		background: #fff;
		padding: 2px;
		margin: 0 2px 0 0;
		display: block;
	}


.relatedFloat {
	width: 152px;
	float: right;
	margin: 0 0 10px 10px;
}


/* 
 ======================================================================= */
#object-pages {
	border-bottom: solid 1px #C0C0B3;
	margin: 0 0 10px 0;
}

	#object-pages li {
		display: inline;
		font-weight: bold;
	}
	
	#object-pages li.selected a {
		color: #666666;
	}
	
	

/* 
 ======================================================================= */
#interactive-map {
	overflow: hidden;
	width: 510px;
	height: 340px;
	padding: 0;
	margin: 0;
	background: url(../img/map-dummy.jpg);
}

	#interactive-map img {
		display: block;
		padding: 0;
		margin: 0;
		border: none;
	}


#intro-image {
	text-align: center;
	margin: 15px 0 0 0;
}

#intro-image ul {
	text-align: left;
	font-style: italic;
	font-size: 95%;
	color: #888;
	margin: 5px 0 0 10px;
}


/* 
 ======================================================================= */
#content {
	margin: 10px;
	float: left;
	line-height: 150%;
}

#content p {
	margin: 2px 0 9px 0;
}

#content h3 {
	font-size: 2em;
	line-height: 110%;
	
}


/* 
 ======================================================================= */
#page-info {
	width: 100%;
	height: 108px;
	font-size: 1.2em;
	background: #00729A;
	border-top: solid 2px #005472;
	color: #fff;
	clear: both;
	position: relative;
}

	#page-info li {
		display: inline;
	}

	#page-info .links {
		position: relative;
		top: -15px;
		margin: 0 8px 0 0;
	}

	#page-info .links a {
		color: #fff;
		text-decoration: underline;
		font-size: .9em;
	}
	
	#page-info .links a:hover {
		text-decoration: none;
	}

	#page-info img {
		border: none;
	}

	#nmm-logo {
		position: absolute;
		right: 0;
		top: 0;
	}

	#page-info-shadow {
		height: 20px;
		position: absolute;
		top: -22px;
		width: 100%;
		background: url(../img/page-info-shadow.png) 0 0 repeat-x;
	}
	
	#page-bottom-shadow {
		height: 9px;
		width: 776px;
		margin: 0 auto;
		background: url(../img/shd-bottom.gif) 0 0 repeat-x;
	}
	

.fixFx {
	clear: both;
	overflow: hidden;
	height: 0;
	
}