p {
	margin: 0;
}	
#graph {
	position: relative;
	width: 1000px;
	height: 680px;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
}
.feature {
	position: absolute; 
	bottom: 0;
	border-style: solid;
	border-width: 1px;
	margin: -1px;
	background-color: lightgrey;
}
.scale {
	position: absolute;
	top: 155px;
	left: 10px;
}	
.circle {
	width: 40px;
	z-index: 2;
	position: absolute;
	animation-iteration-count: infinite;
}
h2 {
	margin: 2px;
}
.info {
	display: none;
	position: absolute;
	width: 170px;
	padding: 2px;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	border-color: gray;
	background-color: lightgray;
}
.info p {
	font-size: 12px;
}
#c1:hover + #i1, #c2:hover + #i2, #c3:hover + #i3, #c4:hover + #i4, #c5:hover + #i5 {
	display: block;
}
#document {
	width: 630px;
	height: 100%;
	margin: 4px auto 0 auto;
	padding-top: 7px;
	line-height: 1.6;
	background-color: white;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	text-align: center;
}
#document::first-line {
	font-weight: bold;
	line-height: 2.6;
}
button {
	position: fixed;
	bottom: 3px;
	left: 940px;
}
.map {
	position: absolute;
	width: 200px;
	height: 150px;
	margin: 10px;
	z-index: 1;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	background-size: 200px 150px;
	animation: fadein 0.4s;
}
.map a {
	color: black;
}
@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.c {
	width: 25px;
	height: 30px;
	position: absolute;
	background-image: url('circle2.png');
	background-size: 100% 70%;
	background-repeat: no-repeat;
}
.c p {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 9;
}
#tar {
	top: 85px;
	left: 60px;
}
#crater {
	top: 20px;
	right: 60px;
}
#cliffs {
	top: 70px;
	right: 35px;
}
#trench {
	animation-name: life;
	animation-iteration-count: infinite;
	height: 100%;
	float: right;
}
.caption {
	text-align-last: center;
	margin: 10px 0 0 0;
	font-size: 11px;
}