/* NOTE:
 * Grid layout stuff starts at line 138.


/*--------------------------------------------------------------
CSS Main Styles
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 1em 0;
	padding-bottom: 0;
}

p {
	margin: 0;
	padding: 1em 0;
}

hr {
	background: black;
}

th {
	font-weight: bold;
}

td {
	font-weight: normal;
}

em {
  font-style: italic;
}

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
.parent {
	background: #ededed;
}

/* generic styles for each section */
.header,
.main-content,
.footer {
	padding: 1em 2em;
}

.header {
	background: #2185C5;
	color: white;
}

.header hr { /* seperate color hr tags for the header so it contrasts better */
	position: relative;
	top: 5px;
	border: none;
	height: 1px;
	background: white;
}

.main-content img {
	margin-top: 8px;
  width: auto;
}

.main-content {
	background: white;
}

.main-content table, th, td { /* styles for the table on fees page */
	 border: 1px solid black;
	 border-collapse: collapse;
	 font-weight: normal:;
}


.footer {
	padding: 1em;
	background: #3E454C;
	color: white;
	overflow: hidden;
}


.footer a {
	color: white;
}

.footer a:hover,
.footer a:focus {
	border-bottom: 1px solid white;
}

.footer img {
	float: right;
	padding: 20px 5px;
	height: auto;
	width: auto;
	}

.aside {
	text-align: left;
}

/*Nav Bar*/
body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  margin: 1px;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2185C5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color: black;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color:  white;
	opacity: 0.5;
  color: black;
}

.dropdown-content a:hover {
	background-color:  white;
	opacity: 0.5;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.teachers {
	width: 220px;
	height: 260px;

}


/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	.parent {
		max-width: 50em;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@media screen and (min-width: 600px) { /* Media query for checking the users screen size so it can decide which css grid layout is best */
	@supports (display: grid) {

		.parent {
			display: grid;
			grid-template-columns: 1fr repeat(3, minmax(auto, 10em)) 1fr; /* CSS Grid used to resize the webpage for the best user experience */
			grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
		}

		.header,
		.footer,
		.main-content { /* to stretch the sections from left to right */
			grid-column: 1 / -1;
		}

	}
}


@media screen and (max-width: 600px) { /* media query for resizing the navigation bar drop down into a expandable menu */
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon { /* Styles for the menu icon */
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) { /* media query for resizing the navigation bar drop down into a expandable menu */
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a { /* Styles for the links in the menu */
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}