/**
 * Main NGS navigation CSS
 */

 /* main nav for wide display */
 header > .centering > nav#main {
 	display: inline-block;
 	position: relative;
 	
 	/* total - title width - title & nav padding */
 	width: calc( 100% - 400px );
 	
 	text-align: right;
 	font-size: 0px; /* collapse spacing */
 	
 	transition: all 0.2s linear 0s;
 }

 	/* nav collapsed */
 	header.collapsed > .centering > nav#main {
 		vertical-align: top;
 		margin-top: 12px;
 	}
 	
 	/* nav menu list item */
 	header > .centering > nav#main > ul > li {
 		display: inline-block;
		padding: 35px 0px 35px 0px;
		
		font-family: 'marcellusregular';
	 	font-size: 23px;
	 	font-variant: small-caps;
	 	white-space: nowrap;
		
		transition: padding 0.1s ease 0s;
 	}
	
		/* browser-specific adjustments */
		/* header.is-browser-chrome > .centering > nav#main > ul > li {
			font-size: 25px;
		}
	
	 	/* header collapsed: nav menu list item */
	 	header.collapsed > .centering > nav#main > ul > li {
	 		display: inline-block;
			padding: 2px 0px 10px 0px;
	 	}
 	
 		/* nav menu list item link */
 		header > .centering > nav#main > ul > li > a {
 			display: inline-block;
 			padding: 0px 15px 0px 15px;
 			color: rgb(0,110,110);
 			text-decoration: none;
 		}
		
			/* nav menu list item link when header collapsed */
			header.collapsed > .centering > nav#main > ul > li > a {
				color: rgb(204,255,204);
			}
		
			/* top nav menu list item link when menu open */
			header:not(.is-mobile) > .centering > nav#main > ul > li:hover > a,
			header.is-mobile > .centering > nav#main > ul > li.mobile-tapped > a {
				color: rgb(0,25,75);
			}
			
				/* top nav menu list item link when menu open and header collapsed */
				header.collapsed:not(.is-mobile) > .centering > nav#main > ul > li:hover > a,
				header.collapsed.is-mobile > .centering > nav#main > ul > li.mobile-tapped > a {
					color: white;
				}
		
		/* nav flyouts */
		header > .centering > nav#main > ul > li > nav {
			position: absolute;
			padding: 0px 15px 15px 15px;
			opacity: 0;
			z-index: -100;
			
			/* max-height: 0px; */
			margin-top: -125vh;
			margin-left: -10px;
			opacity: 0;
			
			/* background-color: white; */
			background: white;
			font-variant: normal;
			
			box-shadow: 10px 20px 20px rgba(0,0,0,.15);
			border-bottom: 10px solid rgb(84,187,194);
			
			transition: max-height 0.2s ease .125s, margin 0.2s ease .125s, opacity 0.2s ease 0s, z-index 0s linear 0.125s;
		}
			
			/* show nav flyout */
			header:not(.is-mobile) > .centering > nav#main > ul > li:hover > nav,
			header.is-mobile > .centering > nav#main > ul > li.mobile-tapped > nav {
				margin-top: 25px;
				opacity: 1;
				z-index: 101;
				
				transition: max-height 0.2s ease 0s, margin 0.2s ease 0s, opacity 0.2s ease .125s, z-index 0s linear 0.2s;
			}
			
			/* apply properties to clipped shadow */
			div.clippedShadow {
				
			}
			
				/* nav flyout when header collapsed */
				header.collapsed:not(.is-mobile) > .centering > nav#main > ul > li:hover > nav,
				header.collapsed.is-mobile > .centering > nav#main > ul > li.mobile-tapped > nav {
					margin-top: 13px;
					border-bottom: 5px solid rgb(84,187,194);
				}
				
					/* nav column */
					header > .centering > nav#main > ul > li > nav > section {
						display: inline-block;
						vertical-align: top;
					}
				
						/* nav submenu block */
						header > .centering > nav#main > ul > li > nav > section > ul {
							display: block;
							vertical-align: top;
							padding: 10px;
						}
							
							/* nav submenu block item */
							header > .centering > nav#main > ul > li > nav > section > ul > li {
								text-align: left;
								margin-bottom: 3px;
								
								font-family: 'latoregular';
								font-size: 16px;
								color: rgba(0,0,0,.75);
								line-height: 1.35;
								font-weight: bold;
							}
							
								/* embolden first item */
								header > .centering > nav#main > ul > li > nav > section > ul > li:not(.not-header):first-of-type {
									/* font-family: 'latobold'; */
								}
							
								/* nav submenu block item link */
								header > .centering > nav#main > ul > li > nav > section > ul > li > a {							
									color: rgb(0,150,150);
									font-weight: normal;
									text-decoration: none;
								}
								
									/* hover submenu block item link */
									header:not(.is-mobile) > .centering > nav#main > ul > li > nav > section > ul > li > a:hover {
										color: rgb(0,75,110);
									}
									
								/* flyout nav link metadata */
								header > .centering > nav#main > ul > li > nav > section > ul > li > figure {
									display: block;
									margin: -1px 0px 10px 0px;
									
									font-family: 'latolight';
									font-size: 11px;
									color: rgba(0,0,0,.45);
									font-weight: normal;
								}
							
							
/* per-menu customizations */

	/* products flyout */
	header > .centering > nav#main > ul > li#products > nav {
		/* margin-left: -210px; */
	}
				
	/* ordering flyout */
	header > .centering > nav#main > ul > li#ordering > nav {
		
	}		
				
	/* ideas flyout */
	header > .centering > nav#main > ul > li#ideas > nav {
		/* margin-left: -210px; */
	}
				
	/* contact flyout */
	header > .centering > nav#main > ul > li#contact > nav {
		
	}