/*This code is used to set up a default navigation bar*/

/*Makes dealing with element sizes easier*/
*{
	box-sizing:border-box;
}

/*Determines how the navigation bar is set up*/
.navbar {
	border: 1px solid #333;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;
	/*position: absolute;*/
	width: 100%;
	height: 100%;
}

/*Determine how navigation elements are set*/
.navElem{
	float: left;
}


/*Determine how links inside toolbars are set and dropdowns are set up*/
/*(Icons act up if I set as .navElem instead of li)*/
li a, .dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

/*Determines what happens when the user hovers over a navigation bar element*/
.navElem a:hover, .dropdown:hover .dropbtn {
	background-color:  #555;
}

/*Define dropdown*/
li.dropdown {
	display: inline;
}

/*Determine how the dropdown box looks like*/
.dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	padding: 0px;
	z-index: 1;
	width: 185px;
}

/*Determines what the dropdown links look like*/
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

/*Determines what happens when the user hovers over a dropdown link*/
.dropdown-content a:hover{background-color: #555;}

/*Makes the menu dropdown*/
.dropdown:hover .dropdown-content {display: block;}

/*Sets color for active tab*/
.active {background-color: #514689;}

/*Used to contain the navigation bar*/
.navContainer, .navFiller{
	position:fixed;
	width: 100%;
	top: 0;
	left: 0;
	height: 2.75em;
	z-index: 1000;
}

/*Used to help webpage account for the size of the toolbar.*/
.navFiller{
	position:static;
	z-index: 90;
}

/*Make text on navigation none by default so icons load first for mobile*/
.navText{display: none;}

/*Used to change what is shown on the navigation bar.*/
@media only screen and (min-width: 600px)
{
	.navText{display: inline-block;}
	.navIcon{display: none;}
}