* {
	box-sizing: border-box;
}

html {
	background-color: skyblue;
	overflow-x: hidden;
	min-height: 90vh;
	min-width: 250px;
}
body {
	margin:0;
}

p {
	max-width: 666px;
	margin: 0 auto 1rem;
}

.centre {
	text-align: center;
}

#map {
	width: calc(80% - 10px);
	height: 80vh;
    float:left;
	
	@media screen and (max-width: 750px) {
		max-width: 60%
	}
}

.key {
	clear:both;
	margin: auto;
	border-collapse: collapse;
	padding:12px;
	text-align: left;
	
	
	caption {
		font-weight: bold;
	}
	tr td,
	tr th {
		border-style: solid;
		&:first-child {
			border-style: solid solid solid none;
		}
		&:last-child {
			border-style: solid none solid solid;
		}
	}
	tr:first-child td,
	tr:first-child th {
		border-style: none solid solid;
		&:first-child {
			border-style: none solid solid none;
		}
		&:last-child {
			border-style: none none solid solid;
		}
	}
	tr:last-child td,
	tr:last-child th {
		border-style: solid solid none;
		&:first-child {
			border-style: solid solid none none;
		}
		&:last-child {
			border-style: solid none none solid;
		}
	}


	.key-item {
		width:15px;
		height: 15px; 
		display:inline-block;
		border: 2px solid #f3f2f0;
		
		&.key__historic {
			background-color: rgb(145,146,246);
			&.key__traditional{
				background-color: rgb(144,84,184);
			}		
			&.key__ceremonial{
				background-color: rgb(87,190,148);
			}		
			&.key__ceremonial.key__traditional{
				background-color: rgb(89,155,111);
			}		
		}		
		&.key__traditional {
			background-color: rgb(247,146,144);
			&.key__ceremonial{
				background-color: rgb(148,190,86);
			}		
		}
		&.key__ceremonial{
			background-color: rgb(145,248,144);
		}
		
		&.key__vice {
			border: none;
			background-color: transparent;
			stroke:#000;
		}
	}
	.neither-domesday {
		background-color: rgb(245,239,192);
		min-width: 48px;
	}
	.traditional-domesday {
		background-color: rgb(249,119,74);
		min-width: 48px;
	}
	.historic-domesday{
		background-color: rgb(250,230,96);
		min-width: 48px;
	}
	.both-domesday{
		background-color: rgb(253,171,38);
		min-width: 48px;
	}		
}
.information {
	float: right;
	width: 20%;
	@media screen and (max-width: 750px) {
		width: calc(40% - 10px);
	}
	
	th {
		text-align:left;
		width:90px;
		vertical-align:top;
	}
}

.declaration {
	padding:20px;
	clear:both;
	font-size: 10px;
	width:100%;
}



.title {
	text-align: center;
	
	h1 {
		background:#7dc3df;
		color: #000;
		
		small {
			display: block;
			font-size: 12px;
		}
	}
}