body * { 
	padding: 0;
	margin: 0; }

#system-message-container {
	position: absolute; }



/*--  PAGE GRID STRUCTURE  --*/
site {
	display: grid;
	grid-template-areas: 
		"mast"
		"skybox"
		"hull"
		"keel"
		"debug"; 
	margin: 10px 20px;
}



mast {
	border: 1px dotted darkgray;
	background: #ADA;
	grid-area: mast;
	display: grid;
	grid-template-areas: 
		"logo locations phone"
		"logo nav nav"; 
	margin: 0;
	padding: 3px;

	.logo {
		grid-area: logo;
		max-height: 120px;
	}

	.logo img {
		height: 100px;
	}
 
	.locations {
		grid-area: locations;
	}

	.phone {
		grid-area: phone;
		text-align: center;
	/*	padding: 0.4rem 1.0rem;  */
	}
}

mast::before {
	content: "Mast"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }



skybox {
	border: 1px dotted orange;
	grid-area: skybox;
	display: flex;
	flex-flow: column;
	margin: 0;
}

skybox::before {
	content: "Skybox"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }



hull {
	border: 2px solid darkgray;
	grid-area: hull;
	display: grid;
	grid-template-areas: 
		"top"
		"above"
		"core"
		"below"
		"bottom"; 
	margin:3px; ;
}

hull::before {
	content: "Hull"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }



keel {
	border: 1px dotted darkgray;
	grid-area: keel;
	display: flex;
	margin: 0;
}

keel::before {
	content: "Keel"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }



core {
	border: 0.5px solid green; 
	display: flex;
	flex-flow: column;
	flex: auto; }

core::before {
	content: "Core"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }







	side {
		border: 1px solid green;
		display: flex;
		flex-flow: column;
	}








top {
	border: 1px dotted cyan;
	grid-area: top;
	display: flex;
	flex-flow: row wrap;
/*	margin: 0;  */
}

top::before {
	content: "Top"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }



above {
	border: 1px dotted cyan;
	grid-area: above;
	display: flex;
	flex-flow: row wrap;
/*	margin: 0;  */
}

above::before {
	content: "Above"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }



below {
	border: 1px dotted cyan;
	grid-area: below;
	display: flex;
	flex-flow: row wrap;
/*	margin: 0;  */
}

below::before {
	content: "Below"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }



bottom {
	border: 1px dotted cyan;
	grid-area: bottom;
	display: flex;
	flex-flow: row wrap;
/*	margin: 0;  */
}

bottom::before {
	content: "Bottom"; 
	display: block;
	background: black;
	color: white;
	font-size: 0.4rem; 
	top: -0.2rem; }