body {
		margin:				0px;
		padding:		0px;
		font-size:		85%;
		font-family: Helvetica, "Century Gothic", "MS Sans Serif", Arial, sans-serif;
		color: black;
		background-color:		#ffffcc;
		height:	100%;
		}

h1 {font-size:						20pt;
		text-align: 				center;
		color: 								Navy;
		background-color:		skyblue;
		font-weight:				700;
		padding:						5pt
		}

h2 {font-size:				16pt;
		text-align: 				center;
		color: 								Navy;
		background-color:		skyblue;
		font-weight:				700;
		padding:						3pt
		}

h3 {font-size:		14pt;
		text-align: 		center;
		color: 				Navy;
		background-color: skyblue;
		color: 				Black;
		font-weight:		600;
		padding:		2pt
		}

h4 {		font-size:		12pt;
		text-align: 		left;
		color: 				Black;
		font-weight:		800;
		}

h5 {
		text-align:				center;
		font-size:		12pt;
		color: 				Black;
		font-weight:		800;
		}

.tiny {		font-size:		7pt;
		font-weight:		300;
		text-align:		justify;
		padding:		0 40px 0 40px;
		}
		
p {		font-size:		12pt;
		text-align: 		left;
		color:						Black;
		font-weight:		300;
		}

a:link { color: #000099; }
a:visited { color: #990099; }
a:active { color: #000099; }

.menucolour {
		background-color: Navy;
		}

.menu {
	padding:10px;
	background-color: Navy; 
	top:0px;
	min-height: calc( 100vh - 20px );
	}

.content {
	padding:10px;
	flex-grow:2;
	}

.button {
	width: 90px;
	border: 2px outset #404040;
	padding: 0px 0px 2px 5px;
	margin: 2px 0px 2px 0px;
	text-shadow:2px 2px 1px #000;
	background-color:				rgb(120,120,120);
	}

.selected {
	background-color:				#444;
	}

.buttontext {
	font:				10pt Arial;
	color:		white;
	}

.indentbutton {
	margin:		2px 0px 2px 10px;
	width: 		80px;
	}

.displayitem {
	font-size: 12pt;
	border-width:				 1px;
	border-color:				 #d3d3d3;
	border-style:				 solid;
	border-radius:				7px;
	}

td {
	vertical-align:					top;
	}

img {
	max-width: 100%;
	height: auto;
}

.notice {
	font-size:	11pt;
	margin:			0 10px 0 10px;
	}


.flex-container {
	display: flex;
	flex-direction: row;
	min-height: 100vh;
}

@media screen and (orientation:portrait)
{
	.flex-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	}
	.flex-container > div {
	width: calc( 100% - 20px );
	}
	.button {
	width: 70px;
	text-align: center;
	border: 2px outset #404040;
	padding: 0px 0px 2px 0px;
	}
	.indentbutton {
	margin: 2px 0px 2px 0px;
	width: 70px;
	text-align: left;
	background-color:				#444;
	}
	.menu {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	min-height: 20px;
	}
	.content {
	flex-grow: 0;
	min-width: calc( 100vw - 20px );
	}
}