body {
	font: 12px Arial, helvetica, sans-serif;
	background: #9999CC;
	margin:0;
	padding:0;
}
.nav {
	container-name: cont-nav;
	container-type: inline-size;
	background:#000000;
	width:200px;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	float:left;
	margin-top:0;
	margin-right:8px;
	color: #ffffff;
}
@container cont-nav {
	.nav-title {
		text-align: center;
		font-size:10cqw; 
  		padding: 4px;
	}
	.nav-index {
		margin: 6px;
	}
	.nav-index a {
		color: #ffffff;
		text-decoration: none;
	}
	.nav-index ul {
		margin:0;
		padding:0;
	}
	.nav-index ul li::before{
		content: "> ";
		font-size: 12px;
	}
	.nav-index ul li {
		margin:0;
		padding:0;
	}
	.nav-index ul li:hover {
		background:#666666;
	}
	.active {
		background:#999999;
	}
	.active:hover{
		background:#999999 !important;
	}
	.nav-dropdown-entry {
		
	}
	.nav-dropdown-content {
		display: none;
	}
	.nav-dropdown-content ul li::marker{
		content: "";
	}
	.nav-dropdown-content ul li::before{
		content: "> ";
		font-size: 12px;
	}
	.nav-dropdown-content ul li {
		margin-left: 16px;
	}
}
.wrapper {
	width: 80%;
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-left: 220px;
}
.area-contents {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(2, 320px);
	justify-content: center;
}
.area-contents .box {
	background: #CCCC66;
	border: #000000 1px solid;
	border-radius: 4px;
	padding: 6px;
	margin: 6px;
	width: 300px;
	display: inline;
	
}
.area-contents .box .header {
	font-weight: bold;
}
.area-contents .box .description {

}

.map-wrapper {
	border: #000000 1px solid;
	display: inline-block;
	background: #ffffff;
}

.map-content {
	padding: 10px;
	border-spacing: 1px;
	border-collapse: separate;
}

.map-content tr td {
	height: 16px;
	width: 16px;
	border: 0;
	background-color: #999999;
	padding: 0;
	font-size: 10px;
	text-align: center;
}

.map-wall {
	background-color: #000000 !important;
}
.map-floor {
	background-color: #339933 !important;
}
.map-bad {
	background-color: #cc0000 !important;
}
.map-door {
	background-color: #cc00cc !important;
}
.route-h {
	background-image: url(tiles/route-h.svg);
	background-size: contain;
}
.route-v {
	background-image: url(tiles/route-v.svg);
	background-size: contain;

}
.route-s-w {
	background-image: url(tiles/route-s-w.svg);
	background-size: contain;	
}
.route-s-e {
	background-image: url(tiles/route-n-e.svg);
	background-size: contain;	
}
.route-n-w {
	background-image: url(tiles/route-n-w.svg);
	background-size: contain;			
}
.route-n-e {
	background-image: url(tiles/route-n-e.svg);
	background-size: contain;	
}

.save::before {
	background-image: url(icons/save.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
	content: 'Save your game! ';
	padding-left: 20px;
	font-weight: bold;
}
.save {
	background:#FFCCCC;
	border: #FF0000 1px solid;
	width: 600px;
	padding: 6px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 4px;
}
.warning::before {
	background-image: url(icons/warning.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
	content: 'Warning! ';
	padding-left: 20px;
	font-weight: bold;
}
.warning {
	background:#FF8888;
	border: #FF0000 1px solid;
	width: 600px;
	padding: 6px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 4px;
}
.footer {
	font-size: 8px;
}