// =============================================================================
// Primary Navigation for screens < 980px
// =============================================================================

.main-navigation {
	.clearfix;
	width: 100%;
	margin: 0 auto;

	.menu {
		list-style: none;
		margin: 0;
	}

	.menu-item {
		float: none;
		width: 100%;
		margin: 8px 0;
	}

	.menu-item > a {
		display: block;
		padding: 14px 20px;
		color: #c6c6c6;
	}

	.menu-item > a:hover,
	.menu-item > a:focus,
	.current-menu-item > a,
	.current-menu-ancestor > a {
		background: darken(@grayDarker, 5%);
		color: #ececec;
	}

	.menu-list-container,
	.search-form,
	.sep {
		display: none;
	}
}

/* Toggle button */
#menu-toggle {
	display: block;
	width: 100%;
	padding: 15px 0;
	margin: 0;
	#font > .alternative(21, bold, 1.5);
	#gradient > .vertical(#555, #444);
	box-shadow: 0 1px 0 fade(@white, 10%);
	border-bottom: 1px solid #050505;
	color: @white;
	cursor: pointer;
	text-align: center;

	&:hover {
		background: @grayDark;
	}

	&:active,
	&:focus {
		background: @grayDarker;
	}
}

// =============================================================================
// Primary Navigation for screens > 980px
// =============================================================================

@media screen and (min-width: 980px) {
	.main-navigation {
		position: relative;
		width: @siteWidth;
		margin: 0 auto;
		padding: 0 @gutterWidth 0 (@gutterWidth - 15px); // 15px is the padding-left on .menu-item a {}

		ul {
			.no-list-style();
		}

		.menu-list-container,
		.search-form {
			display: block !important;
		}

		// Reset the styling created by the small navigation
		// If the viewport is made bigger while the small navigation was open,
		// the container would still the same size without this
		.menu-list-container {
			overflow: visible !important;
			height: auto;
		}

		// Each item in the navigation
		.menu-item {
			position: relative;
			float: left;
			width: auto;
			margin: 0;
			background: @topbarBackground ~"url(images/topbar.png)" repeat;

			> a {
				display: inline-block;
				padding: 21px 15px;
				#font > .alternative(15, bold, normal);
				text-shadow: 1px 1px 0 @grayDarker;
				color: #ccc;
				.transition(all 150ms);
			}
		}

		.menu-item > a:hover,
		.current-menu-item > a,
		.current-menu-ancestor > a {
			background-color: #444;
			#gradient > .vertical(fade(@white, 0%), fade(@white, 20%));
			color: #ececec;
		}

		// Level two
		.sub-menu {
			display: none;
			position: absolute;
			z-index: 500;
			top: 100%;
			left: 0;
			background: @topbarBackground ~"url(images/topbar.png)" repeat;
			box-shadow: 1px 2px 2px fade(@black, 30%);
			border-radius: 0 0 5px 5px;

			.menu-item {
				float: none;
				background: none;
			}

			.menu-item > a {
				display: block;
				width: 180px;
				padding: 18px 14px;
				border-top: 1px solid #3a3a3a;
				border-bottom: 1px solid #262627;
				.font-size(14);
			}

			.menu-item:first-of-type > a {
				border-top: none;
			}

			.menu-item:last-of-type > a {
				border-bottom: none;
			}

			// Level n
			.sub-menu {
				top: 0;
				left: 100%;
			}
		}

		// Display the sub menus on hover
		.menu-item:hover > ul {
			display: block;
		}

		// Separator
		.sep {
			display: inline;
			color: #808080;
		}

		.sub-menu .sep,
		.menu-item:last-of-type .sep {
			display: none;
		}
	}

	/* Hide toggle button */
	#menu-toggle {
		display: none;
	}
} // Media query: min-width 980px;

/* No JS: show the menu */
.no-js .main-navigation .menu-list-container,
.no-js .main-navigation .search-form {
	display: block !important;
}

.no-js #menu-toggle {
	visibility: hidden;
}

// =============================================================================
// Secondary Navigation
// =============================================================================

.secondary-navigation {
	#gradient > .vertical(fade(@white, 20%), fade(@white, 53%));
	border-radius: 5px 5px 0 0;

	.no-rgba & {
		background-color: #f8fafb;
	}

	ul {
		.no-list-style();
	}

	.menu {
		.clearfix();
		margin-left: @smallGutterWidth;
	}

	.menu-item {
		position: relative;
		float: left;
		.font-size(14);
	}

	a {
		display: inline-block;
		padding: 4px 20px;
		line-height: 3.5;
		color: darken(@gray, 5%);
		text-transform: uppercase;

		&:hover {
			background-color: @white;
			background-color: fade(@white, 53%);
			color: @linkColorHover;
		}
	}

	.current-menu-item > a,
	.current-menu-ancestor > a {
		font-weight: bold;
		color: @grayDarker;
	}

	// Separator
	.sep {
		color: @grayLight;
	}

	.sub-menu .sep,
	.menu-item:last-of-type .sep {
		display: none;
	}

	// Level two
	.sub-menu {
		display: none;
		position: absolute;
		z-index: 500;
		top: 100%;
		left: 0;
		box-shadow: 1px 1px 2px fade(@black, 15%);

		a {
			display: block;
			width: 180px;
			padding: 8px 10px;
			border-bottom: 1px solid darken(@grayLighter, 6%);
			.font-size(14);
			line-height: 2.2;
			background: @grayLighter;
			text-transform: none;
			white-space: normal;

			&:hover {
				background: darken(@grayLighter, 5%);
			}
		}

		.menu-item:last-of-type > a {
			border-bottom: none;
		}
	}

	// Display the sub menu on hover
	.menu-item:hover > ul {
		display: block;
	}

	// Level n
	.sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}
}