html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 100%;
}
.grid-container {
	display: -ms-grid;
	display: grid;
	min-height: 100%;
	font-family: 'Roboto Slab', serif;
	background-color: #b2d1ff;
	border: 2px black solid;
	-ms-grid-columns: 9.8rem 1fr 1fr;
	grid-template-columns: 9.8rem 1fr 1fr;
	-ms-grid-rows: auto auto 1fr 2.5em;
	grid-template-rows: auto auto 1fr 2.5em;
	grid-template-areas: "nav head head" "nav sec sec" "nav main asi" "nav foot foot";
}
header {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-area: head;
	border-bottom: 2px black solid;
}
section {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-area: sec;
	background-color: #b2d1ff;
}
main {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
	grid-area: main;
	background-color: #b2d1ff;
	padding-left: 2.7em;
	padding-right: 1.65em;
	text-align: justify;
	margin: 0;
}
aside {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
	grid-area: asi;
	background-color: #b2d1ff;
	padding-left: 1.65em;
	padding-right: 2.7em;
	text-align: justify;
	margin: 0;
}
nav {
	-ms-grid-row: 1;
	-ms-grid-row-span: 4;
	-ms-grid-column: 1;
	grid-area: nav;
	background-color: #000040;
	display: block;
	position: fixed;
	padding-right: 0.5em;
	height: 100%;
}
footer {
	-ms-grid-row: 4;
	-ms-grid-column: 2;
	-ms-grid-column-span: 2;
	grid-area: foot;
	background-color: #999;
	border-top: 2px black solid;
	/*border-right: 2px black solid;
        border-bottom: 2px black solid;*/
}
/* Nav Menu Starts Here */

/* reset our lists to remove bullet points and padding */

.mainmenu {
	list-style: none;
	margin: 0 0 0 -1.9rem;
	font-size: 0.9rem;
	font-weight: bold;
}
.submenu {
	list-style: none;
	margin: 0 0 0 -2.4rem;
	font-size: 0.9rem;
	font-weight: bold;
}
/* make ALL links (main and submenu) have padding and background color */

.mainmenu a {
	display: block;
	background-color: #000040;
	text-decoration: none;
	color: #fff;
	line-height: 2.0rem;
}
/* add hover behaviour */

.mainmenu a:hover {
	background-color: yellow;
	color: black;
}
/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
	display: block;
	max-height: 17em;
}
/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
	/*background-color: #0060bd;*/
	color: black;
	padding: 0 0.4em;
	background-color: #b2d1ff;
}
/* hover behaviour for links inside .submenu */

.submenu a:hover {
	background-color: yellow;
	color: black;
}
/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/

.submenu {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: all 0.5s ease-out;
}
/* Nav Menu Ends Here */

@media screen and (max-width: 748px) {
	.grid-container {
		display: -ms-grid;
		display: grid;
		grid-template-areas: "head" "sec" "main" "aside" "nav" "foot";
		-ms-grid-columns: 100%;
		grid-template-columns: 100%;
		-ms-grid-rows: auto auto auto auto auto auto;
		grid-template-rows: auto auto auto auto auto auto;
		font-family: 'Roboto Slab', serif;
	}
	main {
		-ms-grid-row: 3;
		-ms-grid-column: 2;
		grid-area: main;
		/*border-left: 2px black solid;
         border-right: 2px black solid;*/
		padding-left: 1.0em;
		padding-right: 1.0em;
		text-align: justify;
	}
	aside {
		grid-area: aside;
		/*border-left: 2px black solid;
         border-right: 2px black solid;*/
		padding-left: 1.0em;
		padding-right: 1.0em;
		text-align: justify;
	}
	nav {
		-ms-grid-row: 1;
		-ms-grid-row-span: 4;
		-ms-grid-column: 1;
		grid-area: nav;
		/*background-color: #a8c5f0;
	      display: block;*/
		position: relative;
		height: auto;
		/*border-left: 2px black solid;
         border-right: 2px black solid;*/
		text-align: center;
	}
	header {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-area: head;
		/*border-top: 2px black solid;
         border-left: 2px black solid;*/
	}
	section {
		-ms-grid-row: 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-area: sec;
		/*border-left: 2px black solid;
         border-right: 2px black solid;*/
		padding-left: 1.0em;
		padding-right: 1.0em;
		text-align: justify;
	}
	footer {
		-ms-grid-row: 4;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-area: foot;
		/*border-left: 2px black solid;
         border-right: 2px black solid;
         border-top: none;*/
	}
	p.sect {
		padding: 0 0.5rem 1.0em 0.5rem;
	}
	h1, h2, h3, h4, h5 {
		line-height: 1.2em;
	}
	header {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	section {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	main {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
	}
	nav {
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
	}
	footer {
		-ms-grid-row: 6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.grid-container {
		display: -ms-grid;
		display: grid;
		grid-template-areas: "head" "sec" "main" "aside" "nav" "foot";
		/*grid-template-columns: 8.0em 1fr;
		grid-template-rows: "nav head" "nav sec" "nav main" "nav aside" "nav foot";*/
		-ms-grid-columns: 100%;
		grid-template-columns: 100%;
		-ms-grid-rows: auto auto auto auto auto auto;
		grid-template-rows: auto auto auto auto auto auto;
		font-family: 'Roboto Slab', serif;
	}
	main {
		-ms-grid-row: 3;
		-ms-grid-column: 2;
		grid-area: main;
		/*border-left: 2px black solid;
         border-right: 2px black solid;*/
		padding-left: 1.0em;
		padding-right: 1.0em;
		text-align: justify;
	}
	aside {
		grid-area: aside;
		/*border-left: 2px black solid;
         border-right: 2px black solid;*/
		padding-left: 1.0em;
		padding-right: 1.0em;
		text-align: justify;
	}
	nav {
		-ms-grid-row: 1;
		-ms-grid-row-span: 4;
		-ms-grid-column: 1;
		grid-area: nav;
		display: block;
		position: relative;
		height: auto;
		/*max-width: 8em;*/
		padding-top: 0.2em;
		text-align: left;
	}
	header {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-area: head;
		/*border-top: 2px black solid;
         border-left: 2px black solid;*/
	}
	section {
		-ms-grid-row: 2;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-area: sec;
		/*border-left: 2px black solid;
         border-right: 2px black solid;*/
		padding-left: 1.0em;
		padding-right: 1.0em;
		text-align: justify;
	}
	footer {
		-ms-grid-row: 4;
		-ms-grid-column: 2;
		-ms-grid-column-span: 2;
		grid-area: foot;
		/*border-left: 2px black solid;
         border-right: 2px black solid;
         border-top: none;*/
	}
	@media screen and (max-width: 748px) {
		main {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
		}
		aside {
			-ms-grid-row: 4;
			-ms-grid-column: 1;
		}
		nav {
			-ms-grid-row: 5;
			-ms-grid-row-span: 1;
			-ms-grid-column: 1;
		}
		header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		section {
			-ms-grid-row: 2;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		footer {
			-ms-grid-row: 6;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		main {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
		}
		aside {
			-ms-grid-row: 4;
			-ms-grid-column: 1;
		}
		nav {
			-ms-grid-row: 5;
			-ms-grid-row-span: 1;
			-ms-grid-column: 1;
		}
		header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		section {
			-ms-grid-row: 2;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		footer {
			-ms-grid-row: 6;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 1024px) {
		main {
			-ms-grid-row: 3;
			-ms-grid-column: 1;
		}
		aside {
			-ms-grid-row: 4;
			-ms-grid-column: 1;
		}
		nav {
			-ms-grid-row: 5;
			-ms-grid-row-span: 1;
			-ms-grid-column: 1;
		}
		header {
			-ms-grid-row: 1;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		section {
			-ms-grid-row: 2;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
		footer {
			-ms-grid-row: 6;
			-ms-grid-column: 1;
			-ms-grid-column-span: 1;
		}
	}
	p.sect {
		padding: 0 0.5rem 1.0em 0.5rem;
	}
	h1, h2, h3, h4, h5 {
		line-height: 1.2em;
	}
	header {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	section {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	main {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
	}
	nav {
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
	}
	footer {
		-ms-grid-row: 6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	main {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
	}
	aside {
		-ms-grid-row: 4;
		-ms-grid-column: 1;
	}
	nav {
		-ms-grid-row: 5;
		-ms-grid-row-span: 1;
		-ms-grid-column: 1;
	}
	header {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	section {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
	footer {
		-ms-grid-row: 6;
		-ms-grid-column: 1;
		-ms-grid-column-span: 1;
	}
}
/* Nav Menu Starts Here */

/* reset our lists to remove bullet points and padding */

.mainmenu {
	list-style: none;
	margin: 0 0 0 -1.9rem;
	font-size: 0.9rem;
	font-weight: bold;
}
.submenu {
	list-style: none;
	margin: 0 0 0 -2.4rem;
	font-size: 0.9rem;
	font-weight: bold;
}
/* make ALL links (main and submenu) have padding and background color */

.mainmenu a {
	display: block;
	background-color: #000040;
	text-decoration: none;
	color: #fff;
	line-height: 2.0rem;
}
/* add hover behaviour */

.mainmenu a:hover {
	background-color: yellow;
	color: black;
}
/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
	display: block;
	max-height: 17em;
}
/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
	/*background-color: #0060bd;*/
	color: black;
	padding: 0 0.4em;
	background-color: #b2d1ff;
}
/* hover behaviour for links inside .submenu */

.submenu a:hover {
	background-color: yellow;
	color: black;
}
/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/

.submenu {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: all 0.5s ease-out;
}
/* Nav Menu Ends Here */

h1 {
	font-size: 1.8em;
	text-align: center;
	text-decoration: underline;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	color: black;
	/*padding-left: 1%;*/
}
h2 {
	font-size: 1.4em;
	color: black;
	margin-bottom: -0.6em;
	padding-bottom: 0;
}
h3 {
	font-size: 1.3em;
	color: black;
	text-decoration: underline;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: -0.6em;
}
h4 {
	font-size: 1.2em;
	color: black;
	text-decoration: underline;
	text-align: center;
	margin-top: 0.3rem;
	margin-bottom: 0.2em;
}
h5 {
	font-size: 0.8em;
	color: black;
	text-decoration: underline;
	text-align: center;
	margin-top: -0.5em;
}
p {
	font-size: 1.0rem;
}
p.cen {
	text-align: center;
}
p.indent {
	text-align: justify;
	width: 90%;
	margin: 0 auto;
	font-style: italic;
}
li {
	line-height: 1.0em;
	border-top: 1px white solid;
}
.lew {
	border: none;
	line-height: 1.5em;
}
ol {
	width: 85%;
	margin: 0 auto 0 0;
}
img {
	max-width: 100%;
	margin: 0 auto;
}
img.colin {
	max-width: 100%;
	margin: 1.0em auto 0 auto;
	border: #3a48d6 0.5em ridge;
}
img.header {
	width: 100%;
	display: block;
}
img.nav {
	width: 40px;
	margin: 0.5em auto 0 35%;
}
img.hall {
	border: 2px solid black;
}
table {
	margin-top: 1.0em;
	border: 6px white ridge;
	padding: 0.5em;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}
th, td {
	padding: 0.5em;
	border: 2px solid white;
	text-align: center;
}
th.cal {
	background-color: #fff;
	border: 2px solid white;
}
td {
	font-size: 0.9em;
}
td.pms {
	border: none;
	background-color: #000040;
	color: #fff;
}
td.cal {
	border: none;
	background-color: #000040;
	color: #fff;
	padding: 0.73em 0;
	border: 1px solid white;
}
td.cal1 {
	border: none;
	background-color: #000040;
	color: #fff;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}
hr {
	width: 92%;
	margin: 0 auto;
}
hr.short {
	width: 30%;
	margin: 1.5em auto;
	color: black;
}
.frame {
	border: 1px solid #000;
	/*outside border*/
	padding: 4.6% 4.6% 1.5% 4.6%;
	/* creates whitespace between border & content */
	background-color: #bbb;
	text-align: center;
	margin: 0 1.0em;
	color: black;
	max-width: 100%;
}
.frame1 {
	/*border: 1px solid #000; /*outside border*/
	/*padding: 1.5%; /* creates whitespace between border & content */
	/*background-color: #fff;*/
	width: 40%;
	text-align: center;
	margin: 0.5em auto;
	color: black;
}
.text {
	text-align: center;
}