html, body{ height:100%; width:100%; padding:0px; margin:0px; }
body{ background-color:#2B313D; }
*{ color:white; font-family:Verdana; }
a{ color:orange; }

.PageLayout{ display:flex; flex-direction:row; width:100vw; height:100vh; }
.PageLayout a{ text-decoration: none; }


/*#############################################################*/
.PageLayout > main{ flex:1; display:flex; flex-direction:column; align-items:stretch; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.PageLayout > main > header {
	position:relative; z-index:200; box-sizing:border-box; height:40px; 
	display:flex; flex-direction:row; justify-content:left; align-items: center;
	background-color:#353945; box-shadow:0px 0px 2px 1px #00000049; }

.PageLayout > main > header > a:first-child{ margin-left:10px; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.PageLayout > main > section{ flex:1; position:relative; z-index:100; box-sizing:border-box; }


/*#############################################################*/
.PageLayout > nav{ position:relative; z-index:300; box-sizing:border-box; width:80px; border-radius: 0px 0px 0px 0px;
	display:flex; flex-direction:column;
	background-color:#F3663B; box-shadow:0px 0px 2px 1px #00000049; }

.PageLayout > nav > a{ color:#ffffff80; text-align:center; 
	box-sizing:border-box; padding:4px;  border-right:0px solid transparent;
	transition: all 0.15s ease-in;
}

.PageLayout > nav > a:hover{ border-right:6px solid white;  color:#ffffffff; }