html, body {
	background-color: 	#ededed;
	font-family: 		"Karla", sans-serif;
	height: 			100%;
	overflow: 			hidden;
}

/* 0. Admin-specific */

a.siteid {
	font-size:			1.5em;
}

/* 1. Structure */

#site-navigation {
	position: 			absolute;
	top:				20px;
	left:				200px;
	right:				20px;
	height:				30px;
	text-align: 		right;
}

#site-main {
	position:			absolute;
	top:				60px;
	bottom:				0;
	left:				0;
	right:				0;
	min-width: 			750px;
}

#site-footer {
	position: 			fixed;
	bottom:				20px;
	left:				0;
	right:				0;
	width:				150px;
	margin:				0 auto;
	padding:			0;
	font-size:			9pt;
	text-align: 		center;
	opacity: 			0.3;
}

/* 1.1. Top navigation */
ul.inline-menu {
	padding:			0;
	margin:				0;
}
	ul.inline-menu li {
		font-size: 			10pt;
		display:			inline-block;
	}
	ul.inline-menu li:last-of-type {
		border-right:		0;
	}
	ul.inline-menu a {
		text-decoration: 	none;
		padding:			5px 15px;
		border:				1px solid transparent;
		border-radius: 		20px;
	}
	ul.inline-menu a:hover {
		border:				1px solid #333;
	}
	
/* 1.2. Header */

#site-header {
	border-top:			3px solid #333;
	height: 			60px;
	min-width: 			750px;
}
	#site-banner {
		line-height: 	1.8;
		background-color: 	#7cecec;
		padding:		5px 20px;
		height:			100%;
	}
		#site-banner h1 {
			display:		inline-block;
			border-bottom: 	1px solid #333;
			margin-bottom:	5px;
			font-size:		15pt;
		}
		#site-banner h2 {
			font-size:		10pt;
		}
	#banner-image {
		display:			none;
		width:				100%;
		height:				auto;
		max-height: 		150px;
		background-color: 	lime;
	}

/* 1.3. Site information */

#site-information {
	position: 			relative;
	color:				#333;
	padding:			20px 30px;
	line-height: 		1.5;
}
	#site-information h2 {
		font-size:			11pt;
	}

#hide-information {
	float: 				right;
	border-radius: 		0 0 5px 5px;
	border:				1px solid #aaa;
	border-top:			0;
	background-color: 	#eee;
	margin-top:			-1px;
	font-size:			10pt;
	color:				#555;
}
	#hide-information:hover {
		background-color:	#fff;
	}

/* 1.4. Tab navigation */

#tab-navigation {
	border-top:		1px solid #aaa;
	padding:			0 10px 0 30px;
}
	.tab {
		text-decoration: 	none;
		border:				1px solid #fff;
		background-color: 	rgba(255,255,255,0.3);
		padding:			7px 20px 7px 17px;
		display:			inline-block;
		border-radius: 		5px 5px 0 0 ;
		transition:			0.2s;
		margin:				10px 0 0 0;
		color:				#555;
		font-size:			10pt;
		margin-right:		5px;
	}
		.tab:hover {
			color: 				#333;
			background-color: 	#fff;
			transition:			0.2s;
		}
		.tab img {
			width:			15px;
			vertical-align: middle;
			margin:			0 7px 0 0;
			opacity: 		0.7;
		}

	.tab.active {
		color:				#333;
		background-color: 	#fff !important;
	}
	.tab.highlight {
		margin-left: 		5px;
		color:				#fff;
		background-color: 	#fb5a1a;
		border: 			1px solid #fb5a1a;
	}
	.tab.highlight:hover {
		background-color: 	#ff7f4d;
	}
	
.tab-frame {
	background-color: 		#fff;
	overflow:				hidden;
	position: 				absolute;
	top:					0;
	left:					0;
	right:					0;
	bottom:					0;
	height: 				auto;
}

.tab-content {
	height: 				100%;
	border-top:				1px solid #eee;
	border-bottom:			1px solid #eee;
    float:					left;
    left:					0px;
    position:				absolute;
    right:					0;
}

/* 1.5. Menus */

.tab-frame nav {
}
	.tab-frame nav h3 {
		background-color: #fff;
		font-size:		11pt;
		padding:		5px 10px;
		border-top:		1px solid rgba(0,0,0,0.1);
		margin-bottom:	3px;
	}
	.tab-frame nav label, .tab-frame nav a, .tab-frame nav h4 {
		font-size:		9.5pt;
	}
	.tab-frame nav li {
		padding:		3px 10px;
	}
	.tab-frame nav li li {
		padding:		3px 0px;
	}
	.tab-frame nav ul + h3 {
		margin-top:		10px;
	}
	.tab-frame nav ul + h4 {
		margin-top:		5px;
	}

.filter-window {
	position: 			absolute;
	z-index: 			2;
    float:				left;
    display:			block;
    width: 				150px;
    left:				-150px;
    height: 			100%;
    overflow:			hidden;
    font-size: 			10pt;
    background: 		#fff;
    border-top:			1px solid #ddd;
    border-right:		1px solid #ddd;
}
	.filter-window input {
		max-width: 		110px;
		border:			1px solid #ddd;
	}
	.filter-window select {
		display:		block;
		min-width: 		110px;
	}
	.filter-window .button {
			background-color: transparent;
			border:			1px solid #555;
			font-size:		10pt;
			margin:			10px;
			position:		absolute;
			bottom:			0;
			left:			0;
			right:			0;
			top:			auto;
		}

.filter-menu-toggle, .navigation-menu-toggle {
	cursor: 			pointer;
	position: 			absolute;
	width:				50px;
	background-color: 	#fff;
	font-size: 			9pt;
	color:				#555;
	padding:			5px 10px 10px 10px;
	box-shadow: 		0px 3px 3px rgba(0,0,	0,0.1);
	text-decoration: none;
}
	.filter-menu-toggle img, .navigation-menu-toggle img {
		width:				30px;
		height:				30px;
	}


.filter-menu-toggle {
	left:				0px;
	top:				0;
	border-radius: 		0 0 5px 0;
	line-height:		1;
	text-align: 		center;
}

.filter-menu {
	line-height: 		1.5;
	overflow-y: 		auto;
	overflow-x:			hidden;
	position:			absolute;
	top:				0px;
	left:				0;
	right:				0;
	bottom:				45px;
	padding-bottom:		10px;
}

.navigation-menu-toggle {
	right:				0;
	border-radius: 		0 0 0 5px;
}

.map-navigation {
	position: 			absolute;
	z-index: 			2;
	top:				0;
	right:				-200px;
	bottom:				0;
	width:				200px;
    border-top:			1px solid #ddd;
    border-left:		1px solid #ddd;
	overflow-y: 		auto;
	overflow-x:			hidden;
	font-size:			10pt;
}
	.map-navigation li {
	}
	.map-navigation h4 {
		padding:			5px 0;
		border-top:			1px solid #eee;
	}

.showlegend, .zoomin, .density {
	width:				14px;
	height:				14px;
	margin-left:		5px;
	float:				right;
	background-size: 	contain;
}
.showlegend {
	background-image: 	url('../img/paper.svg');
}
.zoomin {
	background-image: 	url('../img/location-2.svg');
}
.density {
	background-image: 	url('../img/density.svg');
}


/* 1.6. Map view */

	#map-canvas {
		background-image: 	url('../dft_img/loading-map.gif');
		background-size: 	cover;
		background-position: center center;
	}
	#map-canvas::before{
		content:		"Loading map ...";
		display:		block;
		position: 		absolute;
		margin:			auto;
		top:			0;
		left:			0;
		right:			0;
		bottom:			0;
		width: 			10em;
		height:			1em;
		text-align: 	center;
		font-size: 		1.5em;
		color: 			#fff;
	}

/* 1.7. List view */

.list-view {
	background-color: 	#fff;
	overflow: 			auto;	
}

.list-view .tab-content {
	height:				auto !important;
	min-height:			100%;
}

.list-navigation {
	margin:				20px 30px 20px 80px;
}
	.list-navigation span {
		margin-bottom:		10px;
		font-size:			10pt;
	}

#data-table tr:hover {
	background: #cccccc;
}

.list-table {
	clear:				both;
	margin:				20px 30px 20px 80px;
	font-size:			9pt;
	width:				calc(100vw - 120px);
}
	.list-table th {
		background-color: #eee;
		padding:		5px;
		border-right: 		1px solid #ddd;
	}
	.list-table th:last-of-type{
		border-right:		1px solid #eee;
	}
	.list-table td {
		border-bottom: 		1px solid #eee;
		border-left: 		1px solid #eee;
		padding:			5px;
		min-width: 			30px;
	}
	.list-table td:last-of-type{
		border-right:		1px solid #eee;
	}

/* 1.7. Chart view */

.chart-view {
	background-color: 	#eee;
}

#chart-setting > ol {
	display:			table;
	width:				100%;
	min-width:			800px;
}
	#chart-setting > ol > li {
		padding:			30px 30px 80px 30px;
		background-color: 	#f4f4f4;
		display:			table-cell;
		transition:			0.2s;
		border-right:		1px solid #eee;
		width:				33.33%;
		box-shadow: 		inset 0px -30px 20px -20px #eee;
	}
	#chart-setting > ol > li:hover {
		background-color: 	#fff;
	}
	#chart-setting li li {
		display:		block;
	}
	#chart-setting h2 {
		font-size:		16pt;
		margin-bottom:	20px;
	}
	#chart-setting h3, #chart-setting div {
		font-size:		11pt;
		margin:			10px 0;
	}
	#chart-setting select, #chart-setting input[type="text"], #chart-setting input[type="button"] {
		width:			15em;
	}
	
	#chart-types li {
		padding:		5px 0;
	}
	#chart-types input[type="radio"] {
		margin-right:	10px;
	}

/* 1.8. Help view */

.help-view {
	background-color: 	#e4f3ea;
	padding:			20px 30px;
}



/* 1.9. Add view */

.addpoint-view {
	background-color: 	#ecd6eb;
}


/* 2. Elements */

.button {
	text-decoration: 	none;
	padding:			5px 10px;
	border-radius: 		5px;
	transition:			0.2s;
}
.button:hover {
	transition:			0.2s;
}
	.button.positive {
		background-color: 	#5ACC56;
		border-bottom:		1px solid #46AD42;
		color: 				#fff;
	}
		.button.positive:hover {
			background-color: 	#5be356;
		}
	.button.neutral {
		background-color: 	#eee;
		border-bottom:		1px solid #bbb;
		color: 				#555;
	}
		.button.neutral:hover {
			background-color:	#f5f5f5;
		}
	.button.negative {
		background-color: 	#fb5a1a;
		border-bottom:		1px solid #BF4C1F;
		color: 				#fff;
	}
		.button.negative:hover {
			background-color: 	#ff8a5d;
		}

.button2 {
	text-decoration: 	none;
	padding:			2px 10px;
	border-radius: 		2px;
	transition:			0.2s;
}
.button2:hover {
	transition:			0.2s;
}

hr {
	background-color: 	rgba(0,0,0,0.1);
	border:				0;
	height:				1px;
}

a {
	transition:			0.3s;
}

.left {
	float:				left;
	margin-right:		20px;
}

.right {
	float:				right;
	margin-left:		20px;
	text-align: 		right;
}

/* 3. Typography */

body {
	font-size:			11pt;
}

a {
	color:				inherit;
}