/*
	Navbars
	========================================
*/

/* COMMON STYLES
   -------------------------------------------------- */

/* Base class and wrapper */
.navbar {
	overflow: visible;
	margin-bottom: var(--base-line-height);
}

/* Inner for background effects */
/* Gradient is applied to its own element because overflow visible is not honored by IE when filter is present */
.navbar-inner {
	min-height: var(--navbar-height);
	padding-left: 20px;
	padding-right: 20px;
	background-color: var(--navbar-background);
	background-image: linear-gradient(to bottom, var(--navbar-background-highlight), var(--navbar-background));
	border: 1px solid var(--navbar-border);
	border-radius: var(--base-border-radius);
	box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

.navbar-inner:before,
.navbar-inner:after {
	display: table;
	content: "";
	line-height: 0;
}

.navbar-inner:after {
	clear: both;
}

/* Set width to auto for default container */
.navbar .container {
	width: auto;
}

/* Override the default collapsed state */
.nav-collapse.collapse {
	height: auto;
	overflow: visible;
}

/* Brand: website or project name
   ----------------------------- */
.navbar .brand {
	float: left;
	display: block;
	/* Vertically center the text given var(--navbar-height) */
	padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 20px calc((var(--navbar-height) - var(--base-line-height)) / 2);
	margin-left: -20px; /* negative indent to left-align the text down the page */
	font-size: 20px;
	font-weight: 200;
	color: var(--navbar-brand-color);
	text-shadow: 0 1px 0 var(--navbar-background-highlight);
}

.navbar .brand:hover,
.navbar .brand:focus {
	text-decoration: none;
}

/* Plain text in topbar
   -------------------------- */
.navbar-text {
	margin-bottom: 0;
	line-height: var(--navbar-height);
	color: var(--navbar-text);
}

/* Janky solution for now to account for links outside the .nav
   -------------------------- */
.navbar-link {
	color: var(--navbar-link-color);
}

.navbar-link:hover,
.navbar-link:focus {
	color: var(--navbar-link-color-hover);
}

/* Dividers in navbar
   -------------------------- */
.navbar .divider-vertical {
	height: var(--navbar-height);
	margin: 0 9px;
	border-left: 1px solid var(--navbar-background);
	border-right: 1px solid var(--navbar-background-highlight);
}

/* Buttons in navbar
   -------------------------- */
.navbar .btn,
.navbar .btn-group {
	margin-top: calc((var(--navbar-height) - 30px) / 2);
}

.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn,
.navbar .input-prepend .btn-group,
.navbar .input-append .btn-group {
	margin-top: 0; /* then undo the margin here so we don't accidentally double it */
}

/* Navbar forms
   -------------------------- */
.navbar-form {
	margin-bottom: 0; /* remove default bottom margin */
}

.navbar-form:before,
.navbar-form:after {
	display: table;
	content: "";
	line-height: 0;
}

.navbar-form:after {
	clear: both;
}

.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
	margin-top: calc((var(--navbar-height) - 30px) / 2);
}

.navbar-form input,
.navbar-form select,
.navbar-form .btn {
	display: inline-block;
	margin-bottom: 0;
}

.navbar-form input[type="image"],
.navbar-form input[type="checkbox"],
.navbar-form input[type="radio"] {
	margin-top: 3px;
}

.navbar-form .input-append,
.navbar-form .input-prepend {
	margin-top: 5px;
	white-space: nowrap; /* prevent two items from separating within a .navbar-form that has .pull-left */
}

.navbar-form .input-append input,
.navbar-form .input-prepend input {
	margin-top: 0; /* remove the margin on top since it's on the parent */
}

/* Navbar search
   -------------------------- */
.navbar-search {
	position: relative;
	float: left;
	margin-top: calc((var(--navbar-height) - 30px) / 2);
	margin-bottom: 0;
}

.navbar-search .search-query {
	margin-bottom: 0;
	padding: 4px 14px;
	font-family: var(--sans-font-family);
	font-size: 13px;
	font-weight: normal;
	line-height: 1;
	border-radius: 15px; /* redeclare because of specificity of the type attribute */
}

/* Static navbar
   -------------------------- */
.navbar-static-top {
	position: static;
	margin-bottom: 0; /* remove 18px margin for default navbar */
}

.navbar-static-top .navbar-inner {
	border-radius: 0;
}

/* Fixed navbar
   -------------------------- */
/* Shared (top/bottom) styles */
.navbar-fixed-top,
.navbar-fixed-bottom {
	position: fixed;
	right: 0;
	left: 0;
	z-index: var(--zindex-fixed-navbar);
	margin-bottom: 0; /* remove 18px margin for default navbar */
}

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
	border-width: 0 0 1px;
}

.navbar-fixed-bottom .navbar-inner {
	border-width: 1px 0 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
	padding-left: 0;
	padding-right: 0;
	border-radius: 0;
}

/* Reset container width */
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
	width: calc((var(--grid-columns) * var(--grid-column-width)) + (var(--grid-gutter-width) * (var(--grid-columns) - 1)));
}

/* Fixed to top */
.navbar-fixed-top {
	top: 0;
}

.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
	box-shadow: 0 1px 10px rgba(0,0,0,.1);
}

/* Fixed to bottom */
.navbar-fixed-bottom {
	bottom: 0;
}

.navbar-fixed-bottom .navbar-inner {
	box-shadow: 0 -1px 10px rgba(0,0,0,.1);
}

/* NAVIGATION
   ---------- */
.navbar .nav {
	position: relative;
	left: 0;
	display: block;
	float: left;
	margin: 0 10px 0 0;
}

.navbar .nav.pull-right {
	float: right; /* redeclare due to specificity */
	margin-right: 0; /* remove margin on float right nav */
}

.navbar .nav > li {
	float: left;
}

/* Links */
.navbar .nav > li > a {
	float: none;
	/* Vertically center the text given var(--navbar-height) */
	padding: calc((var(--navbar-height) - var(--base-line-height)) / 2) 15px calc((var(--navbar-height) - var(--base-line-height)) / 2);
	color: var(--navbar-link-color);
	text-decoration: none;
	text-shadow: 0 1px 0 var(--navbar-background-highlight);
}

.navbar .nav .dropdown-toggle .caret {
	margin-top: 8px;
}

/* Hover/focus */
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
	background-color: var(--navbar-link-background-hover); /* "transparent" is default to differentiate :hover/:focus from .active */
	color: var(--navbar-link-color-hover);
	text-decoration: none;
}

/* Active nav items */
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
	color: var(--navbar-link-color-active);
	text-decoration: none;
	background-color: var(--navbar-link-background-active);
	box-shadow: inset 0 3px 8px rgba(0,0,0,.125);
}

/* Navbar button for toggling navbar items in responsive layouts */
.navbar .btn-navbar {
	display: none;
	float: right;
	padding: 7px 10px;
	margin-left: 5px;
	margin-right: 5px;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	background-color: #ededed;
	background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
	border-color: #e5e5e5 #e5e5e5 #bfbfbf;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}

.navbar .btn-navbar .icon-bar {
	display: block;
	width: 18px;
	height: 2px;
	background-color: #f5f5f5;
	border-radius: 1px;
	box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.btn-navbar .icon-bar + .icon-bar {
	margin-top: 3px;
}

/* Dropdown menus
   -------------- */
/* Menu position and menu carets */
.navbar .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: var(--dropdown-border);
	position: absolute;
	top: -7px;
	left: 9px;
}

.navbar .nav > li > .dropdown-menu:after {
	content: '';
	display: inline-block;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid var(--dropdown-background);
	position: absolute;
	top: -6px;
	left: 10px;
}

/* Menu position and menu caret support for dropups via extra dropup class */
.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
	border-top: 7px solid #ccc;
	border-top-color: var(--dropdown-border);
	border-bottom: 0;
	bottom: -7px;
	top: auto;
}

.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
	border-top: 6px solid var(--dropdown-background);
	border-bottom: 0;
	bottom: -6px;
	top: auto;
}

/* Caret should match text color on hover/focus */
.navbar .nav li.dropdown > a:hover .caret,
.navbar .nav li.dropdown > a:focus .caret {
	border-top-color: var(--navbar-link-color-hover);
	border-bottom-color: var(--navbar-link-color-hover);
}

/* 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: var(--navbar-link-background-active);
	color: var(--navbar-link-color-active);
}

.navbar .nav li.dropdown > .dropdown-toggle .caret {
	border-top-color: var(--navbar-link-color);
	border-bottom-color: var(--navbar-link-color);
}

.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: var(--navbar-link-color-active);
	border-bottom-color: var(--navbar-link-color-active);
}

/* Right aligned menus need alt position */
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
	left: auto;
	right: 0;
}

.navbar .pull-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.pull-right:before {
	left: auto;
	right: 12px;
}

.navbar .pull-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.pull-right:after {
	left: auto;
	right: 13px;
}

.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: -1px;
	border-radius: 6px 0 6px 6px;
}

/* Inverted navbar
   -------------------------- */
.navbar-inverse .navbar-inner {
	background-color: var(--navbar-inverse-background);
	background-image: linear-gradient(to bottom, var(--navbar-inverse-background-highlight), var(--navbar-inverse-background));
	border-color: var(--navbar-inverse-border);
}

.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
	color: var(--navbar-inverse-link-color);
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

.navbar-inverse .brand:hover,
.navbar-inverse .brand:focus,
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li > a:focus {
	color: var(--navbar-inverse-link-color-hover);
}

.navbar-inverse .brand {
	color: var(--navbar-inverse-brand-color);
}

.navbar-inverse .navbar-text {
	color: var(--navbar-inverse-text);
}

.navbar-inverse .nav > li > a:focus,
.navbar-inverse .nav > li > a:hover {
	background-color: var(--navbar-inverse-link-background-hover);
	color: var(--navbar-inverse-link-color-hover);
}

.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
	color: var(--navbar-inverse-link-color-active);
	background-color: var(--navbar-inverse-link-background-active);
}

/* Inline text links */
.navbar-inverse .navbar-link {
	color: var(--navbar-inverse-link-color);
}

.navbar-inverse .navbar-link:hover,
.navbar-inverse .navbar-link:focus {
	color: var(--navbar-inverse-link-color-hover);
}

/* Dividers in navbar */
.navbar-inverse .divider-vertical {
	border-left-color: var(--navbar-inverse-background);
	border-right-color: var(--navbar-inverse-background-highlight);
}

/* Dropdowns */
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
	background-color: var(--navbar-inverse-link-background-active);
	color: var(--navbar-inverse-link-color-active);
}

.navbar-inverse .nav li.dropdown > a:hover .caret,
.navbar-inverse .nav li.dropdown > a:focus .caret {
	border-top-color: var(--navbar-inverse-link-color-active);
	border-bottom-color: var(--navbar-inverse-link-color-active);
}

.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
	border-top-color: var(--navbar-inverse-link-color);
	border-bottom-color: var(--navbar-inverse-link-color);
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
	border-top-color: var(--navbar-inverse-link-color-active);
	border-bottom-color: var(--navbar-inverse-link-color-active);
}

/* Navbar search */
.navbar-inverse .navbar-search .search-query {
	color: var(--white);
	background-color: var(--navbar-inverse-search-background);
	border-color: var(--navbar-inverse-search-border);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15);
	transition: none;
}

.navbar-inverse .navbar-search .search-query::placeholder {
	color: var(--navbar-inverse-search-placeholder-color);
}

/* Focus states */
.navbar-inverse .navbar-search .search-query:focus,
.navbar-inverse .navbar-search .search-query.focused {
	padding: 5px 15px;
	color: var(--gray-dark);
	text-shadow: 0 1px 0 var(--white);
	background-color: var(--navbar-inverse-search-background-focus);
	border: 0;
	box-shadow: 0 0 3px rgba(0,0,0,.15);
	outline: 0;
}

/* Navbar collapse button */
.navbar-inverse .btn-navbar {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	background-color: #0c0c0c;
	background-image: linear-gradient(to bottom, #151515, #040404);
	border-color: #040404 #040404 #000000;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}