html {
	min-height:100%;
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	font-family: sans-serif;
	margin: 0;
	min-height:100%;
	padding:0;
}

header {
	background-color: black;
	color:red;
	padding: 1em;
	flex-shrink: 0;
}

.PageContainer{
	flex-grow: 1;
	position: relative;
}

.PageContent{
	height: 100%;
	position: relative;
}

.PageBG {
	position: absolute;
	width:100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.PageBGGradient {
	background-image: linear-gradient(-45deg, rgba(0,0,0,.2), rgba(0,0,0,0.5));
}

.PageFooter {
	padding: 1em;
	flex-shrink: 0;
	background-color: #444;
	color: white;
}

.PageSticky {
    position: sticky;
	top: 0;
	left:0;
	z-index: 99
}

.PageMenu {
	display: flex;
	font-size: 110%;
	z-index: 1;
    background-color: #333;
	/*    background-color: rgba(255,255,255, 0.8); */
    color: white;
    text-align: left;
    width: 100%;
}

@media (max-width: 600px) {
	.PageMenuItem {
		font-size: 100%;
	}
}

.PageMenuItem {
	background-color: black;
	border-right: solid grey 1px;
	flex-grow: 0;
	float: left;
	height: 1em;
    color: white;
    padding: .75rem .75rem;
    vertical-align: bottom;
}

.PageMenuItem:last-child {
	border-right: none;
}

.PageMenuItem:hover {
	background-color: #444;
}

.PageMenu a{
	text-decoration: none;
}

.PageMenu a:hover{
	text-decoration: none;
	color: yellow;
}

.PageMenuTitle {
    color: #FF8800;
}

.PageMenuFiller {
	flex-grow: 1;
}

.PageMenuFiller:hover {
	background-color: black;
}