/* Table of Contents
==================================================
# Nav
# Tab
# Colors
# Media Queries */

/* # Nav
================================================== */
.nav {
  border-color: $color-haze !important;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
}
.nav > li > a {
  display: block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.nav-header {
  background: $color-primary;
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  color: $color-white;
  display: block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  padding: 14px 15px 13px 15px;
}
.nav-list { margin-bottom: 0; }
.nav-list > li > a { padding: 13px 15px 11px 15px; }
.nav-list > li > a:hover,
.nav-list > li > a:focus { background: $color-haze; }
.nav-list > li > a:active,
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:active,
.nav-list > .active > a:focus {
  background: $color-light-haze;
  color: $color-primary;
}
.nav-list > .divider {
  background: $color-light-haze;
  height: 1px;
  margin: 10px 0;
  overflow: hidden;
}
.nav-tabs:before,
.nav-pills:before,
.nav-tabs:after,
.nav-pills:after {
  content: "";
  display: table;
  line-height: 0;
}
.nav-tabs:after,
.nav-pills:after { clear: both; }
.nav-tabs {
  border-bottom: 1px solid;
  border-color: inherit;
}
.nav-tabs > li,
.nav-pills > li {
  border-color: inherit;
  float: left;
}
.nav-tabs > li { margin-right: 20px; }
.nav-tabs > li:last-child { margin: 0; }
.nav-tabs > li > a {
  background: $color-transparent;
  border-bottom: 4px solid $color-transparent;
  padding-bottom: 10px;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:active,
.nav-tabs > li > a:focus { border-color: inherit; }
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:active,
.nav-tabs > .active > a:focus { border-color: $color-primary; }
.nav-tabs .open a.dropdown-toggle { background: $color-transparent; }
.nav-pills > li > a {
  background: $color-light-haze;
  border-radius: 2px;
  margin-right: 3px;
  padding: 10px 10px 8px 10px;
}
.nav-pills > li > a:hover,
.nav-pills > li > a:active,
.nav-pills > li > a:focus { background: $color-haze; }
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:active,
.nav-pills > .active > a:focus {
  background: $color-primary;
  color: $color-white;
}
.nav-stacked > li {
  float: none;
  margin: 0;
}
.nav-tabs.nav-stacked { border: 0; }
.nav-tabs.nav-stacked > li > a,
.nav-pills.nav-stacked > li > a { padding: 12px 10px 10px 10px; }
.nav-tabs.nav-stacked > li > a {
  background: $color-light-haze;
  border: 0;
}
.nav-tabs.nav-stacked > li:first-child > a {
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
}
.nav-tabs.nav-stacked > li:last-child > a {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
.nav-tabs.nav-stacked > li > a:hover,
.nav-tabs.nav-stacked > li > a:focus { background: $color-haze; }
.nav-tabs.nav-stacked > li > a:active,
.nav-tabs.nav-stacked > .active > a {
  background: $color-primary;
  color: $color-white;
}
.nav-pills.nav-stacked > li { margin-bottom: 3px; }
.nav-pills.nav-stacked > li:last-child { margin-bottom: 0; }
.nav-tabs .dropdown-toggle { margin-top: -1px; }
.nav-pills .dropdown-toggle { padding: 9px 10px 8px 10px; }
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:active,
.nav > li.dropdown.open.active > a:focus { background: $color-haze; }

/* # Tab
================================================== */
.tabbable { *zoom: 1; }
.tabbable:before,
.tabbable:after {
  content: "";
  display: table;
  line-height: 0;
}
.tabbable:after { clear: both; }
.tab-content { overflow: auto; }
.tab-content > .tab-pane,
.pill-content > .pill-pane { display: none; }
.tab-content > .active,
.pill-content > .active { display: block; }
.tabs-below > .nav-tabs > li > a { border-radius: 0 0 2px 2px; }
.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li { float: none; }
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  margin-bottom: 3px;
  margin-right: 0;
  min-width: 50px;
}
.tabs-left > .nav-tabs {
  float: left;
  margin-right: 19px;
}
.tabs-left > .nav-tabs > li > a { border-radius: 2px 0 0 2px; }
.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
}
.tabs-right > .nav-tabs > li > a { border-radius: 0 2px 2px 0; }

/* # Colors
================================================== */
.nav-dark {
  border-color: $color-dark-black !important;
  color: $color-white;
}
.nav-light { border-color: $color-dark-haze !important; }
.nav-dark.nav-list > li > a:hover,
.nav-dark.nav-list > li > a:focus,
.nav-dark.nav-list > li > a:active,
.nav-dark.nav-list > .active > a,
.nav-dark.nav-list > .active > a:hover,
.nav-dark.nav-list > .active > a:active,
.nav-dark.nav-list > .active > a:focus,
.nav-dark.nav-pills > li > a,
.nav-dark.nav-tabs.nav-stacked > li > a,
.nav-dark.nav-tabs .open .dropdown-toggle,
.nav-dark.nav-pills .open .dropdown-toggle,
.nav-dark > li.dropdown.open.active > a:hover,
.nav-dark > li.dropdown.open.active > a:active,
.nav-dark > li.dropdown.open.active > a:focus  { background: $color-light-black; }
.nav-dark.nav-list > .divider,
.nav-dark.nav-pills > li > a:hover,
.nav-dark.nav-pills > li > a:active,
.nav-dark.nav-pills > li > a:focus,
.nav-dark.nav-tabs.nav-stacked > li > a:hover,
.nav-dark.nav-tabs.nav-stacked > li > a:focus { background: $color-dark-black; }
.nav-light.nav-list > li > a:hover,
.nav-light.nav-list > li > a:focus,
.nav-light.nav-list > li > a:active,
.nav-light.nav-list > .active > a,
.nav-light.nav-list > .active > a:hover,
.nav-light.nav-list > .active > a:active,
.nav-light.nav-list > .active > a:focus,
.nav-light.nav-pills > li > a,
.nav-light.nav-tabs.nav-stacked > li > a,
.nav-light.nav-tabs .open .dropdown-toggle,
.nav-light.nav-pills .open .dropdown-toggle,
.nav-light > li.dropdown.open.active > a:hover,
.nav-light > li.dropdown.open.active > a:active,
.nav-light > li.dropdown.open.active > a:focus,
.nav-light.nav-list > .divider,
.nav-light.nav-pills > li > a:hover,
.nav-light.nav-pills > li > a:active,
.nav-light.nav-pills > li > a:focus,
.nav-light.nav-tabs.nav-stacked > li > a:hover,
.nav-light.nav-tabs.nav-stacked > li > a:focus  { background: $color-dark-haze; }

/* # Media Queries
================================================== */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  .nav-list > .divider { height: 0.5px; }
  .nav-tabs { border-width: 0.5px; }
}