@font-face{
	font-family: san;
	src: url(sansation_light.woff);
}

@font-face{
	font-family: fontello;
	src: url(fontello.woff);
}

html
{
	box-sizing: border-box;
}
*, *:before, *:after
{
	box-sizing: inherit;
}

body
{
	font-family: Lato;
	background-color: #9B9382;
	margin: 0px;
	overflow: hidden;
}
.col
{
	float: left;
	height: 100%;
	width: 252px;
	background-color: #F6F0E6; /*was F5EDE0*/
	padding-top: 8px;
	overflow: hidden;
}

.top
{
	float: left;
	width: 252px;
	height: 64px;
}
	.top .top_title
	{
		float: left;
		width: 252px;
		font-size: 36px;
		text-align: left;
		padding-left: 6px;
	}
	.top .sub
	{
		float: left;
		width: 252px;
		font-size: 16px;
		text-align: left;
		padding-left: 8px;
		color: rgb(125,125,125);
	}
	.top .divider
	{
		float: left;
		margin-top: 0px;
		margin-left: 8px;
		width: 215px;
		border-top-style: solid;
		border-color: #BEBCA9;
		border-width: 1px;
		text-align: left;
	}

.metric
{
	float: left;
	width: 252px;
	height: 275px;
	margin-top: 12px;
	background-color: none;
}
	.metric .title
	{
		float: left;
		margin-left: 8px;
	}
	.metric .divider
	{
		float: left;
		width: 236px;
		margin-top: 1px;
		margin-left: 0px;
		margin-bottom: 1px;
		border-top-style: solid;
		border-color: #BEBCA9;
		border-width: 1px;
		text-align: center;
	}
	.metric label
	{
		float: left;
		width: 194px;
		height: 20px;
		margin-top: 4px;
		margin-left: 8px;
		margin-bottom: 4px;
		background-color: none;
		cursor: pointer;
	}
	.metric label span
	{
		text-align: left;
		display: block;
		height: 20px;
		border-style: solid;
		border-color: grey;
		border-width: 1px;
		border-radius: 2px;
		color: #AD986D;
		padding-left:4px;
		padding-top: 3px;
		line-height: 11px;
	}
	.metric label input
	{
		position: absolute;
		top: -20px;
	}
	.metric label input:checked + span
	{
		background-color: #AD986D;
		border-color: #AD986D;
		color: #FFFFFF;
	}
	.metric label input:hover + span
	{
		background-color: #CDB68A;
		border-color: #CDB68A;
		color: #FFFFFF;
	}
		.metric label #scheck0+span
		{
			color: #e74c3c;
		}
		.metric label #scheck0:checked + span
		{
			background-color: #e74c3c;
			border-color: #e74c3c;
			color: #ffffff;
		}
		.metric label #scheck0:hover + span
		{
			background-color: #e74c3c;
			border-color: #e74c3c;
			color: #ffffff;
		}
		.metric label #scheck1+span
		{
			color: #e67e22;
		}
		.metric label #scheck1:checked + span
		{
			background-color: #e67e22;
			border-color: #e67e22;
			color: #ffffff;
		}
		.metric label #scheck1:hover + span
		{
			background-color: #e67e22;
			border-color: #e67e22;
			color: #ffffff;
		}
		.metric label #scheck2+span
		{
			color: #f1c40f;
		}
		.metric label #scheck2:checked + span
		{
			background-color: #f1c40f;
			border-color: #f1c40f;
			color: #ffffff;
		}
		.metric label #scheck2:hover + span
		{
			background-color: #f1c40f;
			border-color: #f1c40f;
			color: #ffffff;
		}
		.metric label #scheck3+span
		{
			color: #2ecc71;
		}
		.metric label #scheck3:checked + span
		{
			background-color: #2ecc71;
			border-color: #2ecc71;
			color: #ffffff;
		}
		.metric label #scheck3:hover + span
		{
			background-color: #2ecc71;
			border-color: #2ecc71;
			color: #ffffff;
		}
		.metric label #scheck4+span
		{
			color: #1abc9c;
		}
		.metric label #scheck4:checked + span
		{
			background-color: #1abc9c;
			border-color: #1abc9c;
			color: #ffffff;
		}
		.metric label #scheck4:hover + span
		{
			background-color: #1abc9c;
			border-color: #1abc9c;
			color: #ffffff;
		}
		.metric label #scheck5+span
		{
			color: #3498db;
		}
		.metric label #scheck5:checked + span
		{
			background-color: #3498db;
			border-color: #3498db;
			color: #ffffff;
		}
		.metric label #scheck5:hover + span
		{
			background-color: #3498db;
			border-color: #3498db;
			color: #ffffff;
		}
		.metric label #scheck6+span
		{
			color: #9b59b6;
		}
		.metric label #scheck6:checked + span
		{
			background-color: #9b59b6;
			border-color: #9b59b6;
			color: #ffffff;
		}
		.metric label #scheck6:hover + span
		{
			background-color: #9b59b6;
			border-color: #9b59b6;
			color: #ffffff;
		}
		.metric label #scheck7+span
		{
			color: #34495e;
		}
		.metric label #scheck7:checked + span
		{
			background-color: #34495e;
			border-color: #34495e;
			color: #ffffff;
		}
		.metric label #scheck7:hover + span
		{
			background-color: #34495e;
			border-color: #34495e;
			color: #ffffff;
		}


#top{
	/*background-color: red;*/
	width:100%;
	height: calc(100% - 30px);
	overflow: scroll;
	overflow-x: hidden;
}


.rank
{
	float: left;
	width: 252px;
	margin-top: 12px;
	height: calc(100% - 399px);
	overflow: hidden;
	position: relative;
}
	.rank .title
	{
		float: left;
		width: 72px;
		margin-left: 8px;
	}
	.rank .divider
	{
		float: left;
		width: 236px;
		margin-top: 1px;
		margin-left: 0px;
		margin-bottom: 4px;
		border-top-style: solid;
		border-color: #BEBCA9;
		border-width: 1px;
		text-align: center;
	}
	.rank .ind
	{
		float: left;
		width: 96px;
		height: 22px;
		margin-left: 6px;
	}
		.rank .ind div
		{
			float: left;
			width: 8px;
			height: 16px;
			margin-left: 2px;
			margin-top: 4px;
			margin-right: 2px;
		}
		.rank .ind div span
		{
			float: left;
			width: 8px;
			height: 16px;
			border-style: solid;
			border-width: 1px;
			border-color: grey;
		}
		.rank .ind input
		{
			position: absolute;
			top: -20px;
		}
			.rank .ind .bo0 input:checked + span
			{
				background-color: #e74c3c;
				border-color: #e74c3c;
			}
			.rank .ind .bo1 input:checked + span
			{
				background-color: #e67e22;
				border-color: #e67e22;
			}
			.rank .ind .bo2 input:checked + span
			{
				background-color: #f1c40f;
				border-color: #f1c40f;
			}
			.rank .ind .bo3 input:checked + span
			{
				background-color: #2ecc71;
				border-color: #2ecc71;
			}
			.rank .ind .bo4 input:checked + span
			{
				background-color: #1abc9c;
				border-color: #1abc9c;
			}
			.rank .ind .bo5 input:checked + span
			{
				background-color: #3498db;
				border-color: #3498db;
			}
			.rank .ind .bo6 input:checked + span
			{
				background-color: #9b59b6;
				border-color: #9b59b6;
			}
			.rank .ind .bo7 input:checked + span
			{
				background-color: #34495e;
				border-color: #34495e;
			}
	.rank .item
	{
		float: left;
		width: 252px;
		height: 22px;
		margin-bottom: 1px;
		background-color: #F6F0E6;
		cursor: pointer;
	}
	.rank .name
	{
		float: left;
		width: 180px;
		margin-left: 8px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 15px;
		color: #444444;
	}
	.rank img
	{
		float: left;
		width: 32px;
		height: 22px;
		margin-left: 15px;
		border-style: solid;
		border-color: black;
		border-width: 1px;
	}

.option
{
	position: absolute;
	top: -1400px;
	left: 200px;
	width: 202px;
	height: 365px;
	background-color: #F6F0E6;
	padding-left: 4px;
	padding-top: 4px;
	border: 1px solid grey;
	border-radius: 4px;
	opacity: 0.97;
	z-index: 20;
}
	.option label
	{
		margin-bottom: 2px;
		background-color: #FFFAF0;
		border: 1px solid grey;
		border-radius: 2px;
		float: left;
		width: 192px;
	}
	.option label span
	{
		text-align:center;
		padding:3px 0px;
		display:block;
	}
	.option label input
	{
		position:absolute;
		top:-2000px;
	}
	.option label input:checked + span
	{
		background-color: #70944D;
		border-color: #70944D;
		color: #FFFFFF;
	}
	.option label input:hover + span
	{
		background-color: #70944D;
		border-color: #70944D;
		color: #FFFFFF;
	}
	.option select
	{
		border-width: 1px;
		border-style: solid;
		border-color: grey;
		margin-bottom: 4px;
		width: 160px;
		border-radius: 2px;
	}
	.option #opt_scale
	{
		border-width: 1px;
		border-style: solid;
		border-color: grey;
		margin-bottom: 2px;
		width: 148px;
		padding-left: 2px;
		border-radius: 2px;
	}
	.option #opt_exp
	{
		border-width: 1px;
		border-style: solid;
		border-color: grey;
		margin-bottom: 2px;
		width: 159px;
		padding-left: 2px;
		border-radius: 2px;
	}
	.option .opt_color
	{
		border-width: 1px;
		border-style: solid;
		border-color: grey;
		margin-bottom: 2px;
		width: 139px;
		padding-left: 2px;
		border-radius: 2px;
	}
	.option #opt_color0
	{
	}
	.option #opt_color1
	{
		margin-left: 53px;
	}
	.option #opt_color2
	{
		margin-left: 53px;
	}
	.option #opt_color3
	{
		margin-left: 53px;
	}
	.option #opt_color4
	{
		margin-left: 53px;
	}
	.option #opt_color5
	{
		margin-left: 53px;
	}
	.option #opt_color6
	{
		margin-left: 53px;
	}
	.option #opt_color7
	{
		margin-left: 53px;
	}
.col #opt_on_lab
{
	position: absolute;
	height: 15px;
	width: 15px;
	top: 375px;
	left: 220px;
	cursor: pointer;
	z-index: 1;
}
	.col #opt_on_img:after
	{
		font-family: 'fontello';
		font-size: 15px;
		content: '\e800';
	}
	.col #opt_on_img:hover
	{
		color: #70944D;
	}
	.col #opt_on_img:active
	{
		color: #70944D;
	}
	.col #opt_on:checked + #opt_on_img
	{
		color: #70944D;
	}

	.col #opt_on
	{
		position: absolute;
		top: -1000px;
	}

.bottom
{
	position: absolute;
	height: 32px;
	width: 252px;
	/*top: calc(100% - 32px);*/
	bottom: 0px;
	background-color: #F6F0E6;
	z-index: 10;
}
	.bottom #about
	{
		width: 74px;
		height: 28px;
		border-style: solid;
		border-color: grey;
		border-width: 1px;
		background-color: #F6F0E6;
		border-radius: 2px;
		float: left;
		color: #444444;
		margin-left: 4px;
		margin-right: 4px;
		font-size: 20px;
		text-align: center;
	}
	.bottom #about:hover
	{
		background-color: #70944D;
		border-color: #70944D;
		color: #ffffff;
	}


div.bottom-half{
	width: 50%;
	float:left;
	text-align: center;
	border-top: 1px solid rgba(0,0,0,0.1);
	line-height: 32px;
	transition: .2s linear background-color, .2s linear color;
}

div.bottom-half:hover{
	cursor:pointer;
	background-color: #F2E9D8;
	color: #70944D;

}
.map
{
	float: left;
	height: 100%;
	width: calc(100% - 252px);
	background-color: #F2E9D8;
	padding: 0;
	text-align: left;
}
.tooltip
{
	position: absolute;
	width: 512px;
	/*height: 28px;*/
	padding: 4px;
	background: white; /*was #F6F0E6*/
	border-style: solid;
	border-width: 1px;
	border-color: #212c17;
	border-radius: 4px;
	text-align: left;
	z-index: 50;
}
	.tooltip img
	{
		float: right;
		border-style: solid;
		border-width: 0px;
		border-color: #444444;
		border-radius: 1px;
		margin-bottom: 8px;
		margin-top: 50px;
		width: 164px;
		height: 164px;
		cursor: pointer;
	}
	.tooltip #title
	{
		cursor: pointer;
		float: left;
		width: 502px;
		/*font-family: Georgia, serif;*/
		font-size: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #444444;
	}
		.tooltip #title:hover
		{
			color: #70944D;
		}
	.tooltip #sub
	{
		float: left;
		width: 311px;
		font-size: 14px;
		margin-left: 16px;
		margin-top: 0px;
		margin-bottom: 0px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/*color: #444444;*/
	}
	.tooltip #datawrap
	{
		float: left;
		width: 327;
		margin-bottom: 4px;
		padding-top: 12px;
	}
	.tooltip .h1
	{
		float: left;
		width: 127;
		margin-top: 0px;
		font-size: 14px;
		margin-bottom: 2px;
		border-width: 1px;
		border-bottom-style: solid;
		text-align: center;
		border-color: #444444;
	}
	.tooltip .h2
	{
		float: left;
		width: 49;
		margin-top: 0px;
		font-size: 14px;
		margin-bottom: 2px;
		border-width: 1px;
		border-bottom-style: solid;
		border-left-style: solid;
		text-align: center;
		border-color: #444444;
	}
	.tooltip .c1
	{
		float: left;
		width: 127;
		margin-top: 0px;
		font-size: 13px;
		margin-bottom: 2px;
	}
	.tooltip .c2
	{
		float: left;
		width: 50;
		margin-top: 0px;
		font-size: 13px;
		text-align: center;
		overflow: hidden;
		margin-bottom: 2px;
	}
	.tooltip #desc
	{
		margin-top: 0px;
		font-family: Georgia, serif;
		font-size: 12px;
		clear: both;
		padding-top: 10px;
	}
.mode_grey
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: -100%;
	top: -100%;
	background: grey;
	opacity: 0.25;
	z-index: 500;
}
.mode_con
{
	position: absolute;
	width: calc(100% - 100px);
	height: calc(100% - 100px);
	padding: 4px;
	left: -100%;
	top: -100%;
	background: #212c17;
	z-index: 510;
}
.mode_main
{
	float: left;
	width: 100%;
	height: 100%;
	background: white;
	z-index: 1000;
}

.circle
{
	cursor: pointer;
}

.title
{
	font-size: 18px;
}

span.wiki-link-text{
	font-size: 12px;
	padding-left: 10px;
}

.feature
{
	fill: none;
	stroke: grey;
	stroke-width: 1px;
	stroke-linejoin: round;
}
.mesh
{
	fill: none;
	stroke: lightgrey;
	stroke-width: 2px;
	stroke-linejoin: round;
}

.fa-about:before
{
	font-family: 'fontello';
	font-size: 22px;
	content: '\e802';
}

.fa-twitter:before
{
	font-family: 'fontello';
	font-size: 22px;
	content: '\e801';
}