/* NAVIGATION BAR
-------------------------------------------------- */

/* Sets the width of the to 100% and add a shadow along the bottom */
#navbar {
	width: 100%;
	background-color: #2196F3;
	box-shadow: 2px 2px 5px #888888;
}
/* Removes all list styles (no bullet points), displays all items inline. Add a
padding of 20% to the left to give the same indent as the page content */
#navbar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
	padding-left: 20%;
	display: inline;
}
/* Aligns all list items int a single row */
#navbar li {
    display: inline-block;
}
/* On hover, change the background colour for the link to a lighetr blue */
#navbar li:hover {
    background-color: #1565C0;
}
/* Sets text colour for each link to white, adds padding around the text, removes
decoration (no underline) and aligns the text central */
#navbar li a {
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 20px 16px;
    text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
}
/* Sets the active link to a darker blue */
.active {
	background-color: #1565C0;
}
/* Styles the button that appears at smaller screen widths to show the navigation menu.
Display none by default, sets the widht and height as a small square, setup margin
and paddings so it's got space around it and so the border has a gap between the
inner image and itself. Make the border white with rounded corners */
#_burger_menu {
	display: none;
	width: 35px;
	height: 35px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	padding: 10px;
	padding-top: 7px;
	border: 1px solid #FFFFFF;
	border-radius: 5px;
}
/* On hover, make the cursor a pointer (so the user knows it can be clicked) */
#_burger_menu:hover {
	cursor: pointer;
}


/* RESIZING RULES
-------------------------------------------------- */

/* When the width is below 700px, it is too small to show the navigation as a bar.
Show the burger menu toggle button and hide the bar. Restyle the list so that
they are aligned to the left, on top of each other, with padding and margins
between them  */
@media (max-width: 700px) {
    #_burger_menu {
		display: block;
	}
	#navbar {
		overflow: hidden;
	}
	#navbar ul {
		display: none;
		padding-left: 0px;
	}
	#navbar li {
    	display: block;
	}
	#navbar li a {
    	display: block;
    	text-align: left;
    	padding: 0px;
		padding-top: 8px;
		padding-bottom: 8px;
		padding-left: 30px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

/* Some navbar styles were found here: */
/* https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_dividers */