html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	overflow:hidden;
}

h1 {
	font-size:24px;
	margin:0 0 15px 0;
	font-family:'Gentium Basic', Georgia, serif;
	color:#444;
}

h2 {
	font-size:18px;
	margin:0 0 15px 0;
	font-family:'Gentium Basic', Georgia, serif;
	color:#444;
}

h3 {
	font-size:18px;
	margin:0 0 10px 0;
	font-family:'Gentium Basic', Georgia, serif;
	color:#444;
}

.content .reference {
	color:#666;
	font-size:10px;
	margin: 0 30px 30px 30px;
	height:14px;
}

#infoFrame {
	width: 280px;
	background:url(../img/header-back.jpg) no-repeat #f0ebdd;
	z-index: 1010;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	box-shadow: #000 0 2px 13px;
}

	#infoFrame header h1 {
		font-variant: small-caps;
		text-align: center;
		font-size: 35px;
		margin: 25px 50px 5px 50px;
		border-bottom: 1px solid #B0A696;
	}

	#infoFrame header h2 {
		text-align: center;
		font-size: 16px;
		margin-bottom: 26px;
	}
	
		#infoFrame header h1 a, #infoFrame header h2 a {
			color:inherit;
			text-decoration:none;
		}
	
	.infoFrame .reference {
		margin:0;
	}

.content strong, .content b {
	font-weight:bold;
}

#sliderContainer {
	position: absolute;
	left: 290px;
	right: 0px;
	top: 114px;
	z-index: 320;
	padding: 12px 35px;
	background: rgba(0, 0, 0, 0.56);
	box-sizing: border-box;
	height: 46px;
	box-shadow: 0 2px 9px rgba(14, 14, 14, 0.29);
}

#timeSlider {
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	padding: 1px;
	height: 8px;
	margin: 0 0 15px 0;
}

.timeRangeTable {
	text-align: center;
	color: #FFF;
	font-size: 10px;
	margin: -15px 0 0 0;
}

	.timeRangeTable td {
		padding:2px 0 0 0;
	}
	
#tsThumb {
	display:block;
	cursor:pointer;
	height:20px;
	background:#F5F5F5;
	width:10px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

	#tsThumb:hover {
		background:#FFF;
	}

#zoomControl {
	position: absolute;
	right: 20px;
	bottom: 20px;
	height: 150px;
	width: 40px;
	z-index: 3500;
	background: rgba(0, 0, 0, 0.56);
	box-shadow: 0 2px 9px rgba(14, 14, 14, 0.29);
	border-radius: 2px;
}

	#zoomControl .zoomBtn {
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		height: 22px;
		line-height: 22px;
		color: #FFF;
		position: absolute;
		left: 5px;
		right: 5px;
		text-align: center;
		cursor: pointer;
		font-weight: bold;
		font-size: 14px;
	}
	
		#zoomControl .zoomBtn:hover {
			background:rgba(255, 255, 255, 0.44);
			color:#fff;
		}

		#zoomControl .zoomBtn.zoomIn {
			top:5px;
		}
		
		#zoomControl .zoomBtn.zoomOut {
			bottom:5px;
		}
		
#zoomSlider {
	position:absolute;
	top:35px;
	bottom:35px;
	left:18px;
	width:1px;
	border-right:1px solid #ccc;
}

	.zoomLine {
		position:absolute;
		top:0;
		bottom:0;
		left:10px;
	}

#zoomThumb {
	display:block;
	cursor:pointer;
	height:10px;
	background:#FFF;
	width:20px;
	margin-left:-8px;
	border-radius:2px;
}

	#menu {
	}
	
		#menu a {
			height: 41px;
			display: block;
			box-sizing: border-box;
			font-family: Georgia, serif;
			font-size: 15px;
			color: #313131;
			margin: 0 7px;
			cursor: pointer;
		}
			
			#menu a:hover {
				color:#B36B00;
				background: rgba(255, 255, 255, 0.52);
			}
			
			#menu a.selected {
				height: 43px;
				background: url(../img/menu-selected.png) no-repeat;
				margin-right: -12px;
				margin-left: -4px;
				margin-bottom: -1px;
				margin-top: -1px;
				border: none;
			}
			
		#menu a .label {
			padding: 10px 0 0 68px;
			background-repeat:no-repeat;
			background-position: 22px 14px;
		}
			
			#menu a.selected .label {
				padding: 11px 0 0 79px;
				background-position: 33px 15px;
			}
				
			#menu a.homes .label {
				background-image: url(../img/menu-icon-house.png);
			}
			
			#menu a.stories .label {
				background-image: url(../img/menu-icon-story.png);
			}
			
			#menu a.media .label {
				background-image: url(../img/menu-icon-audio.png);
			}
			
		.topmenu {
			position: absolute;
			z-index: 5100;
			left: 316px;
			top: 20px;
			box-shadow: 0 2px 9px rgba(14, 14, 14, 0.29);
			background:#fff;
			border-radius: 2px;
			width: 400px;
		}
		
			.topmenu .searchbox {
				float:left;
			}
			
			.topmenu .toolbar {
				float:left;
			}
			
				.topmenu .toolbar a {
					display: block;
					float:left;
					padding: 7px 10px;
					cursor: pointer;
					color: #313131;
					border-left: 1px solid #CCC;
				}
				
					.topmenu .toolbar a:hover {
						color: #B36B00;
						background: #F5F5F5;
					}
		
			.searchbox input#searchBox {
				border-radius: 2px;
				border: none;
				padding: 7px;
				width: 152px;
				outline: none;
			}
			
		.searchbox #searchResults {
			position:absolute;
			top:29px;
			left:0;
			right:0;
			border-bottom-left-radius:2px;
			border-bottom-right-radius:2px;
			background:#fff;
			box-shadow: 0 2px 9px rgba(14, 14, 14, 0.29);
			overflow:hidden;
		}
			
			.searchbox #searchResults.fixed {
				overflow-y:scroll;
			}
		
			.searchbox #searchResults a {
				display:block;
				color:#333;
				font-weight:bold;
				text-decoration:none;
				padding: 10px 10px 11px 30px;
				cursor: pointer;
				background-repeat: no-repeat;
				background-position: 9px 11px;
				border-top:1px solid #CCC;
			}

				.searchbox #searchResults a.type_f {
					background-image:url(../img/selectedHome.gif);
				}

				.searchbox #searchResults a.type_s {
					background-image:url(../img/story-icon.png);
				}

				.searchbox #searchResults a.type_a {
					background-image:url(../img/media-icon.png);
				}
				
				.searchbox #searchResults a .info {
					font-weight: normal;
					font-style: italic;
					right: 15px;
					top: 11px;
					color: #777;
					padding-left: 10px;
				}

			.searchbox #searchResults a:first-child {
				border:none;
			}
			
			.searchbox #searchResults a.selected, .searchbox #searchResults a:hover {
				background-color:#F7F7F7;
			}
			
	#toolbar .rightMenu {
		position:absolute;
		right:20px;
	}
	
		#toolbar .rightMenu a {
			display:block;
			height:27px;
			float:left;
			margin-left:4px;
			text-decoration:none !important;
		}
			
			#toolbar .rightMenu a .label {
				float:left;
				line-height:26px;
				height:27px;
				background-image:url(../img/btn-back.png);
				background-repeat:repeat-x;
				background-position:center top;
				color:#fff;
				padding:0 8px;
			}
			
				#toolbar .rightMenu a:hover .label {
					color:#00C;
				}
				
	.infoFrame .left {
		background: #FFF;
		margin: 0 -2px 10px;
		border-radius: 1px;
		box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.75);
		padding: 15px;
		position: absolute;
		top: 241px;
		bottom: 0px;
		right: 0;
		left: 0;
		overflow: hidden;
	}
	
		#selectedFarm {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 49px;
			background: #FFF;
			box-shadow:0 1px 3px rgba(109, 109, 109, 0.25);
			box-sizing: border-box;
			padding: 15px;
		}
	
		#selectedFarm h2.selectedFarm {
			font-size:20px;
			font-variant:small-caps;
			margin-bottom:0;
		}
		
		#selectedFarm .alterName {
			font-family: Georgia;
			font-style: italic;
			color: #888;
			display: none;
		}
		
		.altername #selectedFarm {
			height:64px;
		}
		
		.altername #selectedFarm .alterName {
			display:block;
		}
		
		#selectedFarm .farmInfoLink {
			position: absolute;
			display: block;
			top: 0;
			right: 0;
			bottom: 0;
			width: 40px;
			border-left: 1px solid #DBD4D4;
			font-size: 38px;
			font-family: 'Gentium Basic', Georgia, serif;
			text-align: center;
			line-height: 65px;
			color: #666;
			cursor: pointer;
		}
		
			#selectedFarm .farmInfoLink:hover {
				background:#E07500;
				color:#fff;
			}
	
	#info-area {
		position: absolute;
		top: 60px;
		bottom: 5px;
		overflow: hidden;
		left: 15px;
		right: 15px;
	}
	
		.altername #info-area {
			top: 75px;
		}
		
	.infoFrame .left .dataList, .infoFrame .left .imageList {
	}
	
		.dataList h3 {
			font-size: 14px;
			font-weight: bold;
		}
	
		.dataList .listContent {
			margin-bottom: 25px;
		}
	
		.dataList .listContent .item {
			color:#333;
			display:block;
			padding:5px 4px;
			text-decoration:none;
			border-bottom:1px solid #ccc;
			cursor:pointer;
		}

			.dataList .listContent .item:first-child {
				border-top:1px solid #ccc;
			}

				#peoplesList.dataList .listContent .item {
					cursor:default;
				}
				
			.dataList .listContent .item:hover {
				background:#E07500;
				color:#fff;
				border-radius:3px;
			}
			
				#peoplesList.dataList .listContent .item:hover {
					background: none;
					color: #333;
					border-radius: 0;
				}

		.dataList .listContent .item .name {
			float:left;
			width:80%;
		}

		.dataList .listContent .item .born {
			float:right;
			width:20%;
		}

		.imageList .listContent .item {
			display:block;
			float:left;
			margin:0 10px 10px 0;
			padding:1px;
			border:1px solid #999;
			width:98px;
			height:60px;
			background-position:center;
			background-repeat:no-repeat;
		}
		
	#welcomeInfo {
		position: absolute;
	}
	
		#welcomeInfo .content.info {
			line-height: 1.8em;
			font-size: 13px;
			font-family: Georgia, Times New Roman, serif;
			padding-bottom: 10px;
			margin-top: 50px;
			padding-right: 15px;
		}
	
	.window .info-panel {
		background: #F7F7F7;
		padding: 15px;
		border-radius: 2px;
		float: left;
		margin: 10px 15px 5px 0;
		border: 1px solid #DCDCDC;
		box-shadow: 0px 1px 2px #ECECEC;
		width: 273px;
	}
	
		.window .info-panel.last {
			margin-right:0;
		}
	
		.window .info-panel p {
			text-indent:0 !important;
		}
		
	.mapContainer {
		height:100%;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		/*
		left:301px;
		*/
	}
	
		#sliderPos {
			font-family:'Gentium Basic', Georgia, serif;
			position:absolute;
			bottom:30px;
			left:-30px;
			width:60px;
			text-align:center;
			z-index:9999;
			font-size:34px;
			color:#fff;
			text-shadow:0px 1px 5px #000, 0px 0px 7px #000, 0px 0px 7px #000;
		}
		
		#mapOverlay {
			position:absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}
		
			#mapOverlay .overlay {
				position:absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background: rgba(245, 234, 215, 0.39);
				z-index: 1000;
			}
		
			#mapOverlay .window {
				position: absolute;
				overflow: hidden;
				bottom: 20px;
				left: 316px;
				top: 70px;
				width: 705px;
				background: #FFF;
				z-index: 4000;
				border-radius: 2px;
				box-shadow: 0 2px 9px rgba(14, 14, 14, 0.5);
			}
			
				#mapOverlay #intro.window {
					width:auto;
					right:20px;
					top:20px;
					bottom: auto;
				}
			
			#intro .cover {
				width:100%;
				height:220px;
				background-image: url(../img/cover-back.png);
				background-position:center center;
				background-repeat:no-repeat;
				background-size: cover !important;
				position: relative;
				border-bottom: 1px solid rgba(102, 102, 102, 0.28)
			}
				
				#intro .cover .cover-title {
					position:absolute;
					width: 200px;
					height: 220px;
					left: 50%;
					top: 50%;
					margin-left: -100px;
					margin-top:-115px;
				}
					
					#intro .cover .cover-title .logo {
						background: url(../img/sagnakort-logo.png) center center no-repeat;
						width:200px;
						height:198px;
						top: -20px;
						position:absolute;
					}
					
					#intro .cover .cover-title h1 {
						font-variant: small-caps;
						text-align: center;
						font-size: 38px;
						border-bottom: 1px solid #B0A696;
						position: absolute;
						left: 0;
						right: 0;
						top: 130px;
					}
			
					#intro .cover .cover-title h2 {
						text-align: center;
						font-size: 17px;
						position:absolute;
						left: 0;
						right: 0;
						top: 180px;
					}
					
			#mapOverlay .content {
				position:absolute;
				top: 44px;
				left: 2px;
				right: 0px;
				bottom: 0px;
				overflow: auto;
			}
			
				#mapOverlay .window.story .content {
				}
				
				#intro .content {
					position: static;
				}
							
				#mapOverlay .window.audio {
					width:400px;
					bottom: 20px;
				}
				
				#mapOverlay .window.minimized {
					top: auto;
					height: 107px;
				}
				
				#mapOverlay .window.audio .mediaContainer {
					position:absolute;
					left:0;
					right:0;
					bottom:0;
					padding:15px;
					background-color:#f7f7f7;
					border-top:#cccccc 1px solid;
					border-bottom-left-radius:4px;
					border-bottom-right-radius:4px;
				}
				
					#mapOverlay .window.audio .mediaContainer audio {
						width: 100%;
						display: block;
					}
					
					.playerControls {
						height:31px;
						position: relative;
					}
					
					.playerControls .seekBar {
						height:5px;
						position:absolute;
						top:2px;
						left:0;
						right:0;
						background:#eae8e8;
					}
					
					.playerControls .playBar {
						height:9px;
						position: absolute;
						top: 0;
						background:#e07500;
					}
					
					.playerControls .timeLabel {
						position: absolute;
						top: 18px;
						left: 30px;
					}
					
					.playerControls .playBtn {
						width:12px;
						height:11px;
						background-position:center;
						background-repeat:no-repeat;
						background-image:url(../img/playIcon.png);
						top:19px;
						position: absolute;
						cursor: pointer;
					}
					
						.playerControls .playBtn.playing {
							background-image:url(../img/pauseIcon.png);
						}
					
				#mapOverlay .window.audio .content {
					bottom:62px;
				}
				
			#mapOverlay .content .text {
				margin:20px 30px;
			}
						
					#intro .content .text {
						margin:30px;
					}

			#mapOverlay .windowTop {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 44px;
				background: #F7F7F7 url(../img/window-head-back.jpg) no-repeat center;
				box-sizing: border-box;
				box-shadow: 0 1px 3px rgba(109, 109, 109, 0.2);
				z-index: 10;
			}
			
				#mapOverlay .title h2 {
					margin: 9px 15px 0 30px;
					font-variant: small-caps;
					font-size: 24px;
				}
				
			#mapOverlay .buttons {
				position:absolute;
				top:8px;
				right:8px;
				z-index:99;
			}
			
				#mapOverlay .buttons a.button {
					margin-left:7px;
					padding:0;
					height:28px;
					width:28px;
				}
				
				#mapOverlay .buttons a.button .icon {
					background-repeat: no-repeat;
					background-position: center;
					width:28px;
					height:28px;
				}
					
					#mapOverlay .buttons a.button.minimize .icon {
						background-image: url(../img/window-icon-minimize.png);
					}
					
					#mapOverlay .buttons a.button.close .icon {
						background-image: url(../img/window-icon-close.png);
					}
				
			#mapOverlay .text {
				line-height:1.8em;
				font-size:13px;
				font-family: Georgia, Times New Roman, serif;
			}
			
			#mapOverlay .text p {
				text-indent:25px;
			}	
			
				#mapOverlay .text p a {
					color:#91672B;
					text-decoration: none;
				}
	
				#mapOverlay .text p:first-child, #mapOverlay .text p.no-indent {
					text-indent:0;
				}
			
			#mapOverlay .text em, #mapOverlay .text i {
				font-style:italic;
			}
			
			#mapOverlay .text img {
				float:right;
				margin:0 0 10px 10px;
			}
			
			#mapOverlay .text blockquote {
				margin:8px 0 8px 35px;
				font-style:italic;
			}
	
				a.button {
					font-family: Arial, Helvetica, sans-serif;
					font-size: 11px;
					line-height:15px;
					text-indent: 0 !important;
					text-decoration:none !important;
					border-top: 1px solid #8a7642;
					background: #91672b;
					background: -webkit-gradient(linear, left top, left bottom, from(#ad8b5c), to(#91672b));
					background: -webkit-linear-gradient(top, #ad8b5c, #91672b);
					background: -moz-linear-gradient(top, #ad8b5c, #91672b);
					background: -ms-linear-gradient(top, #ad8b5c, #91672b);
					background: -o-linear-gradient(top, #ad8b5c, #91672b);
					padding: 6px 11px;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					-webkit-box-shadow: #000 0 1px 0;
					-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
					box-shadow: rgba(0, 0, 0, 0.22) 0 1px 1px;
					text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px;
					color: #FFF !important;
					display: inline-block;
					cursor:pointer;
   				}
   				
   					a.button:hover {
   						background:#91672b;
   					}
			
	#map_canvas {
		height:100%;
	}

.mapLabel {
	display:block;
	position: relative;
	left: -50%;
	top: -25px;
	color:#ffffff;
	text-shadow:1px 1px 1px #000;
	font-weight:bold;
	text-align:center;
}

#yearsMenuMobile {
	display:none;
}

.infoWindowContent {
	color: #91672b !important;
	font-weight: bold !important;
	font-size: 12px !important;
}