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 {
	position: fixed;
	left: 0px;
	right: 20px;
	background: linear-gradient( rgba( 20, 55, 109, 1 ) 0%, rgba( 20, 55, 109, 0.9 ) 20%, rgba( 20, 55, 109, 0 ) 100% );
	grid-area: mast;
	display: grid;
	grid-template-areas: 
		"nav"
		"logo"; 
	margin: 0;
	padding: 3px;
	width: 100%;
	z-index: 5;

	.logo {
		grid-area: logo;
		max-height: initial;
	}

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

	.nav {
		grid-area: nav;
		list-style: none;
		display: flex;
		gap; 0.3rem;

		li {
			background: gold;

			a {
				display: block;
				padding: 0.2rem 0.4rem;
			}
		}
	}

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



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



hull {
	border: 1px dotted darkgray;
	grid-area: hull;
	display: grid;
	grid-template-areas: 
		"top"
		"above"
		"component"
		"below"
		"bottom"; 
	margin: 0;
}



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









main {
	border: 1px solid pink;
	grid-area: component;
	display: flex;
	flex-flow: row nowrap;
	gap: 1.0rem;
	justify-content: space-evenly;

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

	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;  */
}



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



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



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