div.ruler {width: 150px; height: 1px; margin: 0px 5px; background-color: #eeeeee;}
div.contents {z-index: 4; width: 160px; height: 50px;}
h2.contents {font-family: "Lexend", "Sans Serif"; font-size: 16px; width: 140px; height: 50px; line-height: 50px; text-align: right; margin: 0px; color: #eeeeee; text-shadow: none; padding: 0px 10px;}
div.contents:hover h2.contents {background-color: #3465a4;}
div.subcontents {overflow: hidden; opacity: 0; width: 0px; z-index: 5; position: absolute; top: 0px; left: 155px; background-image: url('Dark Noise Pattern.png'); transition: opacity 0.3s;}
div.contents:hover div.subcontents {width: auto; box-shadow: 0px 0px 10px #000000; opacity: 1;}
h2.subcontents {font-family: "Lexend", "Sans Serif"; font-size: 16px; width: 140px; padding: 10px; color: #eeeeee; white-space: nowrap; margin: 0px; text-shadow: none; text-decoration: none;}
h2.subcontents:hover {background-color: #3465a4;}
a {text-decoration: none;}
@media only screen and (min-width: 992px) {
	*.container {
    width: 100%;
		height: 100%;
		display: grid;
		grid-template-areas: "menu content" "menu footer";
		grid-template-columns: 160px auto;
		grid-template-rows: auto 30px;
  }
  *.container div.menu {
		grid-area: menu;
	}
  	*.container div.content {
		grid-area: content;
	}
		*.container div.footer {
    	grid-area: footer;
	}
  	div#menuButton {display: none;}
	img#menuIcon {display: none;}
	div#menuBar {z-index: 3; padding-top: auto; padding-bottom: auto; position: fixed; top: 0px; left: 0px; width: 160px; height: 100%; background-image: url('Dark Noise Pattern.png'); box-shadow: 0px 0px 10px #000000; transition: left 0.5s;}
	div#menuBar:hover {left: 0px;}
	div#menuBar:hover img#menuIcon {background-color: #3465a4;}
}
@media only screen and (max-width: 991px) {
  *.container {
		width: 100%;
		height: 100%;
		display: grid; grid-template-areas: "menu" "content" "footer";
		grid-template-rows: 0px auto 30px;
	}
	*.container div.menu {
    	grid-area: menu;
	}
	*.container div.content {
		grid-area: content;
	}
	*.container div.footer {
    	grid-area: footer;
	}
	h2.contents {text-align: left}
	div#menuButton {width: 50px; height: 50px; position: absolute; top: 317px;	left: 0px; background-image: url('MenuButtonBG.png');}
	img#menuIcon {position: absolute; top: 0px; left: 0px; background-color: #eeeeee; margin: 0px; transition: background-color 0.2s;}
	div#menuBar {z-index: 3; padding-top: auto; padding-bottom: auto; position: fixed; top: -317px; left: 0px; width: 160px; height: 317px; background-image: url('Dark Noise Pattern.png'); transition: top 0.5s;}
	div#menuBar:hover {top: 0px; box-shadow: 0px 0px 10px #000000;}
	div#menuBar:hover img#menuIcon {background-color: #3465a4;}
	div.subcontents {display: none;}
}
/* Tricks for alignment of content - needs updating to CSS {display: grid;} */
table {border-width: 0px; border-spacing: 0px; background-color: transparent; padding: 0px; margin: 0px;}
table.toAlignContent {width: 100%; height: 100%;}
table.toAlignContent tr td {width: 100%; height: 100%; vertical-align: middle;}
tr {border-width: 0px; padding: 0px; margin: 0px;}
td {border-width: 0px; padding: 0px; margin: 0px;}
iframe {background-color: #ffffff; display: block;}
div.toAlignContent {width: 100%; height: 100%; display: table;}
div.hr {width: 100%; height: 1px; background-color: #333333; margin: 5px auto;}