/*------------------------------------*\
	$Nav - nav.less
\*------------------------------------*/
///**
// * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
// * When used on an `ol` or `ul`, this class throws the list into horizontal mode
// * e.g.:
// *
//   <ul class="es-nav">
//		<li><a href=#>Home</a></li>
//		<li><a href=#>About</a></li>
//		<li><a href=#>Portfolio</a></li>
//		<li><a href=#>Contact</a></li>
//   </ul>
// *
// */
.es-nav {
	list-style: none;
	margin-left: 0;
	//.clearfix();
	> li,
	> li > a {
		display: inline-block;
		.ie7-inline-block();
	}

///**
// * `.es-nav-stacked` extends `.es-nav` and throws the list into vertical mode, e.g.:
// *
//   <ul class="es-nav es-nav-stacked">
//       <li><a href=#>Home</a></li>
//       <li><a href=#>About</a></li>
//       <li><a href=#>Portfolio</a></li>
//       <li><a href=#>Contact</a></li>
//   </ul>
// *
// */
	&.es-nav-stacked {
		> li {
			display: list-item;
			> a {
				display: block;
			}
		}
	}
	&.es-nav-spacing {
		> li {
			// margin-bottom: 10px;
			padding-top: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid @esBorder;
		}
	}
}//es-nav


// Right aligned menus need alt position
// .navbar .pull-right > li > .dropdown-menu,
.es-nav > li > .dropdown-menu.pull-right {
  left: auto;
  right: 0;
  &:before {
	left: auto;
	right: 12px;
  }
  &:after {
	left: auto;
	right: 13px;
  }
  .dropdown-menu {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: -1px;
	.border-radius(6px 0 6px 6px);
  }
}


// Filter
// ----------------
.es-nav-filter {
	position: relative;
	> li {
		// background: #ddd;
		a {
			text-decoration: none;
			display: block;
			padding: 3px 10px;
			font-weight: bold;
			&:hover {
				background: none;
				color: inherit;
				text-decoration: underline;
			}
		}
		&.active {
			a {
				color: @gray;
			}
		}
		&.divider-vertical {
			border-left: 1px solid lighten(@grayLight, 4%);
			border-right: 1px solid white;
			height: 16px;
			position: relative;
			top: 4px;
		}
	}
}


// TABS AND PILLS custom nav-pills
// -------------

// Common styles
.nav-pills > li > a {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px; // keeps the overall height an even number
}

// PILLS
// -----

// Links rendered as pills
.nav-pills > li > a {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-top: 2px;
  margin-bottom: 2px;

  .border-radius(2px);
  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, @btnTextShadowNone);
  border: 1px solid @btnBorder;
  border-bottom-color: darken(@btnBorder, 10%);
}

// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
  // color: @gray;
  // background-color: @grayLighter;
  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, @btnTextShadowNone);
  border: 1px solid @btnBorder;
  border-bottom-color: darken(@btnBorder, 10%);
  // font-weight: bold;
  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}


//Nav step with number
.nav-step {
	li {
		> a {
			margin-right: 1px;
		}
		+ li {
			> a {
				position: relative;
				&:before, &:after {
					content: "";
					position: absolute;
					border-color: transparent;
					border-style: solid;
					display: inline-block;
				}
				&:before {
					z-index: 2;
					top: 6px;
					left: -3px;
					border-width: 6px 0 6px 8px;
					border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) @btnBorder;
				}
				&:after {
					z-index: 3;
					top: 6px;
					left: -4px;
					border-width: 6px 0 6px 8px;
					border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #f2f2f2;
				}
			}//a
		}
	&:last-child {
		> a {
			&:before, &:after {
				display: none;
			}
		}
		}
	}
}


.es-nav-alphabets {
	text-align: center;
	margin: 10px 0 20px;
	.es-desp {
		display: inline;
		margin-right: 5px;
	}
	.es-nav {
		display: inline;
		> li {
			> a {
				margin-right: 5px;
			}
		}
	}
}

// Dropdown menus
// --------------

// Menu position and menu carets
.navbar .es-nav > li > .dropdown-menu {
	&:before {
		content: '';
		display: inline-block;
		border-left:   7px solid transparent;
		border-right:  7px solid transparent;
		border-bottom: 7px solid #ccc;
		border-bottom-color: @dropdownBorder;
		position: absolute;
		top: -7px;
		left: 9px;
	}
	&:after {
		content: '';
		display: inline-block;
		border-left:   6px solid transparent;
		border-right:  6px solid transparent;
		border-bottom: 6px solid @dropdownBackground;
		position: absolute;
		top: -6px;
		left: 10px;
	}
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .es-nav > li > .dropdown-menu {
	&:before {
		border-top: 7px solid #ccc;
		border-top-color: @dropdownBorder;
		border-bottom: 0;
		bottom: -7px;
		top: auto;
	}
	&:after {
		border-top: 6px solid @dropdownBackground;
		border-bottom: 0;
		bottom: -6px;
		top: auto;
	}
}

// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
	background-color: @navbarLinkBackgroundActive;
	color: @navbarLinkColorActive;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
	border-top-color: @navbarLinkColor;
	border-bottom-color: @navbarLinkColor;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
	border-top-color: @navbarLinkColorActive;
	border-bottom-color: @navbarLinkColorActive;
}

// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .es-nav > li > .dropdown-menu.pull-right {
	left: auto;
	right: 0;
	&:before {
		left: auto;
		right: 12px;
	}
	&:after {
		left: auto;
		right: 13px;
	}
	.dropdown-menu {
		left: auto;
		right: 100%;
		margin-left: 0;
		margin-right: -1px;
		.border-radius(6px 0 6px 6px);
	}
}