$appbar-img-path:           		'../../assets/images/' !default;

$gray-base:              #000 !default;
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$component-active-color:    #fff !default;
$component-active-bg:       $brand-primary !default;
$line-height-base:        1.428571429 !default; // 20/14
$dropdown-link-color:            $gray-dark !default;
$dropdown-link-hover-bg:         #f5f5f5 !default;
$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
$dropdown-link-active-color:     $component-active-color !default;
$dropdown-link-active-bg:        $component-active-bg !default;

$header-bg-color:                                               		#2b3643 !default;
$header-hor-menu-bg-color:                                              $header-bg-color;
$header-top-menu-dropdown-dark-header-bg-color:							lighten($header-hor-menu-bg-color, 2%);
$header-top-menu-dropdown-dark-bg-color: 								lighten($header-hor-menu-bg-color, 10%);
$header-top-menu-dropdown-dark-item-border-color:						lighten($header-top-menu-dropdown-dark-bg-color, 6%);
$header-top-menu-dropdown-dark-item-icon-color:							lighten($header-top-menu-dropdown-dark-header-bg-color, 45%);
$header-top-menu-dropdown-dark-item-bg-color-on-hover:					lighten($header-top-menu-dropdown-dark-bg-color, 4%);
$header-top-menu-dropdown-dark-default-menu-divider:					$header-top-menu-dropdown-dark-item-border-color;

a div.logo-default {
  background-image: url(#{$appbar-img-path}logo.png);
  background-size: cover;
  width: 44px;
  height: 44px;
}

a div.img-circle {
  background-image: url(#{$appbar-img-path}avatar.png);
  background-size: cover;
  width: 29px;
  height: 29px;
  margin-top: -5px;
}

.dropdown-menu {
  li > a {
    display: block;
    padding: 8px 16px;
    clear: both;
    font-weight: normal;
    line-height: $line-height-base;
    color: $dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines

    // Hover/Focus state
    &:hover,
    &:focus {
      text-decoration: none;
      color: $dropdown-link-hover-color;
      background-color: $dropdown-link-hover-bg;
    }
  }

  // Active state
  .active > a {
    &,
    &:hover,
    &:focus {
      color: $dropdown-link-active-color;
      text-decoration: none;
      outline: 0;
      background-color: $dropdown-link-active-bg;
    }
  }
}

.page-header.navbar {
  .top-menu {
    .navbar-nav {
      > li.dropdown-dark {
        .dropdown-menu {
          &.dropdown-menu-default,
          .dropdown-menu-list {
            :not(li) > li {
              a {
                color: lighten($header-top-menu-dropdown-dark-header-bg-color, 55%);
                border-bottom: 1px solid $header-top-menu-dropdown-dark-item-border-color !important;

                > i {
                  color: $header-top-menu-dropdown-dark-item-icon-color;
                }

                &:hover {
                  background: $header-top-menu-dropdown-dark-item-bg-color-on-hover;
                }
              }
            }
          }

          &.dropdown-menu-default {
            :not(li) > li {
              a {
                border-bottom: 0 !important;
              }

              &.divider {
                background: $header-top-menu-dropdown-dark-default-menu-divider;
              }
            }
          }
        }
      }
    }
  }
}