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

/* # Nav
================================================== */
.nav {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
}
.nav > .pull-none { float: none; }
.nav > .pull-left { float: left; }
.nav > .pull-right { float: right; }
.nav > li > a {
  color: $color-dark-gray;
  display: block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
}
.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
  color: $color-dark-gray;
  text-decoration: none;
}
.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: 20px;
  padding: 10px 15px;
}
.nav > li + .nav-header { margin-top: 10px; }
.nav-list {
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
}
.nav-list > li > a,
.nav-list .nav-header {
  margin-left: -15px;
  margin-right: -15px;
}
.nav-list > li > a {
  color: $color-dark-gray;
  font-weight: bold;
  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 $color-haze; }
.nav-tabs > li,
.nav-pills > li { float: left; }
.nav-tabs > li > a {
  border-bottom: 3px solid $color-transparent;
  margin-right: 20px;
  padding-bottom: 10px;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:active,
.nav-tabs > li > a:focus { border-bottom-color: $color-haze; }
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:active,
.nav-tabs > .active > a:focus {
  border-bottom-color: $color-primary;
  color: $color-primary;
}
.nav-tabs .open a.dropdown-toggle { background: $color-transparent; }
.nav-pills > li > a {
  background: $color-light-haze;
  border-radius: 2px;
  color: $color-dark-gray;
  margin-right: 3px;
  padding: 10px 10px 9px 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; }
.nav-stacked > li > a { margin-right: 0; }
.nav-tabs.nav-stacked { border-bottom: 0; }
.nav-tabs.nav-stacked > li > a {
  background: $color-light-haze;
  border-bottom: 0;
  color: $color-dark-gray;
  padding: 12px 10px 10px 10px;
}
.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;
  z-index: 2;
}
.nav-tabs.nav-stacked > li > a:active,
.nav-tabs.nav-stacked > .active > a {
  background: $color-primary;
  color: $color-white;
}
.nav-pills.nav-stacked > li > a {
  margin-bottom: 3px;
  padding: 12px 10px 10px 10px;
}
.nav-pills.nav-stacked > li:last-child > a { margin-bottom: 0; }
.nav-tabs .dropdown-toggle,
.nav-pills .dropdown-toggle { margin-bottom: -1px; }
.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;
  color: $color-black;
}

/* # 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; }

/* # 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-tabs { border-width: 0.5px; }
}