* {
	  box-sizing: border-box;
	}

	body {
	  font-family: Arial, Helvetica, sans-serif;
	}

	/* Style the header - bg= #777 */
	header {
	  background-color: #222;
	  padding: 2px;
	  text-align: center;
	  font-size: 15px;
	  color: white;
	}

	/* Container for flexboxes */
	section {
	  display: -webkit-flex;
	  display: flex;
	  flex-direction: column;
	}

	/* Style the navigation menu */
	nav {
	  -webkit-flex: 1;
	  -ms-flex: 1;
	  flex: 1;
	  text-align: center;
	  background: #ccc;
	  padding: 15px;
	}

	/* Style the table inside the menu */
	.nav-table {
	  boarder: 1px solid;
	  border-collapse: separate;
	  background-color: #aaa;
	  padding: 5;
	}

	/* Style the table inside the menu */
	.nav-th {
	  boarder: 1px solid;
	  background-color: #CCCCCC;
	  border-radius: 6px;
	  padding: 10px;
	}

	.nav-th a {
	  color: black;
	  padding: 10px;
	  text-decoration: none;
    }

	.nav-th a:hover {
	  background-color: #f1f1f1;
	}

	/* Style the list inside the menu NOT RELEVANT */
	nav ul {
	  list-style-type: none;
	  padding: 0;
	}

	/* Style the content */
	article {
	  -webkit-flex: 3;
	  -ms-flex: 3;
	  flex: 3;
	  background-color: #f1f1f1;
	  padding: 10px;
	}

	/* Style the footer */
	footer {
	  background-color: #777;
	  padding: 0px;
	  text-align: center;
	  color: white;
	}

	/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
	@media (max-width: 600px) {
	  section {
		-webkit-flex-direction: column;
		flex-direction: column;
	  }
	}