/* CSS Document */

/* Header */
header { height: 48px; background: linen }

/* Navigation */
nav { 	background-color: darkslategrey; 
		position: relative; 
		padding: 10px 0px 0px 0px; }
nav a:visited { color: linen; }

nav a.mobile_menu {
	width: 32px; height: 32px;
	background: url(../images/icon_menu.svg) no-repeat 0 0;
	background-size: contain;
	position: absolute; top: 22px; left: 50%; margin-left: -16px;
	display: none;  }

nav ul { 	list-style: none; 
			margin: 0px; 
			padding: 0px; }
			
nav ul::after { content: ""; 
				display: block; 
				clear: both; }

nav ul li:hover { background-color: teal; }

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

nav ul li a { 	display: inline-block; 
				color: whitesmoke; 
				padding: 8px 15px; 
				vertical-align: top; 
				text-decoration: none; 
				width: 110px; 
				position: relative; }
nav ul li a:hover { background-color: teal; }

nav ul ul { display: none; 
			position: absolute; 
			top: 100%; 
			background-color: cadetblue; }
			
nav ul ul li { position: relative; }

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

/* top level */
nav > ul { padding-left: 15px; }
nav > ul > li { float: left; }
nav > ul > li > a { padding: 10px 10px 12px 15px; width: auto; }

/* Media Queries */

@media screen and (max-width: 1000px) { 
	}

@media screen and (min-width: 626px) { 

/* show arrows for dropdowns */
	nav li.dropdown > a {
    background-image:url('../images/arrow-down.png');
    background-position:right 20px;
    background-repeat:no-repeat; }
    
	nav li li.dropper > a {
    background-image:url('../images/arrow-right.png');
    background-position:right 16px;
    padding-right: 16px;
    background-repeat:no-repeat; }
	}

nav li.droppy > a {
    border-top:solid 1px silver;
    margin:0 10px; }

nav li.dropper > a {
    border-top:solid 1px silver;
    margin:0 10px; }
    
nav li.droppest > a {
    border-top:solid 1px silver;
    margin:0 10px; }

@media screen and (max-width: 825px) { 
	header { height: 50px; } 
	}

@media screen and (max-width: 760px) {	
	header { height: auto; min-height: 48px; }

	/* Navigation */
	nav > ul { padding-left: 10px; } 
	}

@media screen and (max-width: 625px) {
	header { height: auto; min-height: 50px; }

	nav {	padding: 50px 15px 20px 15px;
			background-color: darkslategrey;
			height: 0px;
			overflow: hidden; }
			
	nav a.mobile_menu { display: block; }
	
	nav ul, nav ul ul, nav ul ul ul { display: block; position: static; }
	
	nav > ul { padding: 0px; }
	
	nav > ul > li { float: none; margin-top: 25px; }
	
	nav ul li:hover { background: none; }
	
	nav ul li a {
		display: block;
		margin: 8px 10px 8px 10px;
		padding: 6px 15px 6px 2px;
		border-top: 1px solid gray;
		width: auto; }

	nav ul li a:hover { background-color: cadetblue; }
	
	nav ul ul { background: none; }	
	
	nav ul ul li a { margin-left: 30px; }
	
	nav ul ul ul li a { margin-left: 60px; }
	
	nav li.droppy > a {
	padding: 10px 0px 5px 15px; }
	
	nav li.dropper > a {
	padding: 15px 0px 5px 15px; }
	
	nav li.droppest > a {
	padding: 10px 0px 5px 30px; }
    }

@media screen and (max-width: 425px) {

	header { min-height: 50px; }
	
/* Nav */
nav { padding-top: 30px; }
nav a.mobile_menu { left: auto; right: 40px; top: 8px; margin-left: 0px; }
}