/*** visual styling on small screens  is at the bottom of this page ***/

/*** visual styling on normal screens ***/

	/* small screen "menu" button */
	#menu-toggle {
		display: block;
		padding: .5em .67em 0;
		min-height: 36px;		
	}

	/* main container */
	nav {
		background: #ebb6b8;
		position: relative;
		font-family: "Arsenal", sans-serif;
		font-size: 1.2em;
		font-size: 1.2rem;
		z-index: 1;
	}
	/* resize starts at smallest and changes as screen gets larger - set value to 100% for small screens */
	nav.content-container {
		width: 100%;
	}

	/* global nav text styling */
	nav a {
		color: #1f3d7c;
		text-decoration: none;
	}
		nav a:visited {
			color: #1f3d7c;
			text-decoration: none;
		}	
		nav a:hover {
			color: #2574f8;
			text-decoration: none;
		}	
		nav a:focus {
			color: #1f3d7c;
			text-decoration: none;
		}
	
	/* expanding nav section containers */
	nav ul {
		margin: 0;
		background: #ebb6b8;
		padding: 0 1em;
		list-style: none;
	}

	/* specific for text on main first level nav items */	
	nav ul li a {
		padding: .5em .67em 0;
	}

	/* specific for nav items with images instead of text */
	nav ul li a.nav-image-link {
		padding: .33em 0 0;
	}	
	
	/* specific for second level expanded nav sections */
	nav ul ul {
		padding: .25em 0 .5em;
	}	
	/* specific to text for second level expanded nav sections */	
	nav ul ul li a {
		padding: .5em 1em 0;
		line-height: 1em;
	}
	
	/* specific for third level expanded nav sections */
	nav ul ul ul {
		padding: .25em 0 .5em;
	}	
	
	/* make width adjustments here - requires class assignment in HTML to match */
	nav ul ul ul.narrowest {
		min-width: 9em;
	}
	nav ul ul ul.narrower {
		min-width: 10em;
	}
	nav ul ul ul.narrow {
		min-width: 11em;
	}
	nav ul ul ul.normal {
		min-width: 12em;
	}
	nav ul ul ul.wide {
		min-width: 13em;
	}
	nav ul ul ul.wider {
		min-width: 14em;
	}
	nav ul ul ul.widest {
		min-width: 18em;
	}
	
		
/*** funtionality and layout ***/
/***    edit with care!      ***/

	nav ul ul {
		display: none;
	} 

	nav ul li:hover > ul {
		display: block;
	}

	nav ul {
		position: relative;
		display: inline-table;
	}

	nav ul:after {
		content: ""; 
		clear: both; 
		display: block;
	}
		
	nav ul li {
		float: left;
	}

	nav ul li a {
		display: block; 
	}

	nav ul ul {
		position: absolute; 
		top: 100%;
	}

	nav ul ul li {
		float: none; 
		position: relative;
	}

	nav ul ul ul {
		position: absolute; 
		left: 100%; 
		top:0;
	}

	/* this makes sure the image links don't break everything with their fixed height */
	nav ul li {
		min-height: 36px;
	}
	
	
/* media queries */


/* over ~672px	*/
@media only screen and (min-width: 45em) 
{ 
	#mq {
		font-family: 'over_672';
	}	
	
	nav.content-container {
		width: 90%;
	}
	
}
/* over ~720px	*/
@media only screen and (min-width: 45em) 
{ 
	#mq {
		font-family: 'over_720';
	}	
}

/*** small screen only changes applied here ***/

/* under ~720px	*/
@media only screen and (max-width: 45em) 
{ 
	/*** visual styling on small screens ***/
/* specific for nav items with images instead of text */
	nav ul li a.nav-image-link {
		width: 10%;
	}

	/* specific to text for second level expanded nav sections */	
	nav ul ul {
		padding-left: 1.5em;
	}
	
	/* specific to text for third level expanded nav sections */	
	nav ul ul ul {
		padding-left: 1.5em;
	}
	nav ul ul li a {
		line-height: 1.125em;
	}	
	
	/*** funtionality and layout ***/
	/***    edit with care!      ***/
	nav ul li {
		position: relative;
		width: 100%;
	}
	nav ul ul {
		position: relative; 
		padding-left: 1.5em;
	}	
	nav ul ul ul {
		position: relative;
		left: 0;
		padding-left: 1.5em;
	}	
}