/* styles for views/shared/header */

#header-navbar {
  min-width: 320px;
  height:92px;
  margin-bottom: 0;
  background-color:#f9f9f9;
  background-image:-moz-linear-gradient(top, #fff, #f2f2f2);
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f2f2f2));
  background-image:-webkit-linear-gradient(top, #fff, #f2f2f2);
  background-image:-o-linear-gradient(top, #fff, #f2f2f2);
  background-image:linear-gradient(to bottom, #fff, #f2f2f2);
  background-repeat:repeat-x;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFF2F2F2', GradientType=0);
  border-bottom:1px solid #d4d4d4;
  -webkit-box-shadow:0 1px 5px rgba(0,0,0,0.3);
  -moz-box-shadow:0 1px 5px rgba(0,0,0,0.3);
  box-shadow:0 1px 5px rgba(0,0,0,0.3);

  .navbar-header {
    height: 5.5em;
    padding-top: 0.5em;
    float: none;

    /* The main logo image for the Blacklight instance */
    .navbar-brand {
      width: 205px;
      background:transparent asset_url($header_logo_image) no-repeat top left;
      display: inline-block;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      padding-right:0;
      margin-left: 0;
      margin-right:20px;
      padding-left: 0;
      height: 74px;
    }

    #user-util-collapse {
      padding-right:0;

      #user-util-links {
        font-size: 12px;
        text-align: right;
        height: 42px;

        #util-links-nologin, #user-nav-btn {
          display: inline-block;
          vertical-align: super;
        }

        #user-nav-btn {
          vertical-align: top;
          padding-top: 6px;
        }

        ul.dropdown-menu {
          text-align: left;
          font-size: 12px;

          > li > a:hover {
            color:#FFFFFF;
            background-color: #0081C2;
            background-image: linear-gradient(to bottom, #0088CC, #0077B3);
            background-repeat: repeat-x;
          }

        }

        #header-search {
          display: inline-block;
          padding: 0.4em 0 0 0.7em;

          input {
            padding: 0 0 0 4px;
            width: 120px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            height: 20px;
          }

          .submit-search-text {
            display: none;
          }

          .tt-menu {
            min-width: 120px;

            .tt-suggestion {
              font-size: 12px;
            }

          }

        }

      }

    }

    #nav_collapse_button {
      padding: 7px 8px 4px 5px;
      border-color: #DDDDDD;

      .glyphicon-search {
        display: inline-block;
        position: relative;
        -moz-opacity: 0.6;
        opacity: 0.6;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        top:0px;
      }

      #icon-bar-wrapper {
        display: inline-block;

        .icon-bar {
          background-color: #888888;
        }

      }

    }

    #header_main_nav {
      float: right;
      margin-bottom: 0;
      padding-top: .2em;
    }

    .navbar .nav {
      margin: 0;

      > li > a {
        padding: 10px 60px 10px 0;
        background-color: inherit;
        color: #777777;

        &:hover {
          color: #333333;
        }

      }

      > li.last_nav > a {
        padding: 10px 0;
      }

      > li.dropdown > a.active  {
        background-color: inherit;
        box-shadow: none;
        color: #333333;
      }

      li.dropdown.open > .dropdown-toggle,
      li.dropdown.active > .dropdown-toggle,
      li.dropdown.open.active > .dropdown-toggle {
        background-color: inherit;
      }

      li.dropdown .dropdown-menu {
        margin: 0;

        > li > a:hover {
          color:#FFFFFF;
          background-color: $dropdown-hover-background;
          background-image: linear-gradient(to bottom, $dropdown-hover-background-gradient-start, $dropdown-hover-background-gradient-end);
          background-repeat: repeat-x;
        }

      }

      /* display nav dropdown menus on hover */
      li.dropdown:hover .dropdown-menu {
        display: block;
      }

    }

  }

}


/* styles for expanded nav */

.navbar-collapse.in.collapse, .navbar-collapse.collapsing {
  background-color: #f2f2f2;
  @include rounded-corners(0 0 5px 5px);
  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid $light_gray;
  border-left: 1px solid $light_gray;
  border-right: 1px solid $light_gray;
  /* float: right; */
  padding-right: 5px !important;
  position: relative;
  left: 7px;
  top: 9px;
  width: 98%;
  z-index: 20;
}

.navbar-collapse {

  .btn {
    padding: 0 6px;
  }

  .nav > li {
    float: left;
  }

}


/* responsive styles */

/* greater than Portrait tablet (iPad) to landscape and desktop */
@media (min-width: 768px) and (max-width: 991px) {

  #header-navbar {

    .navbar-header {

      .navbar .nav > li > a {
        padding: 10px 40px 10px 0;
      }

      .navbar .nav > li.last_nav > a {
        padding: 10px 0;
      }

    }

  }

}

/* Landscape phone to portrait tablet (iPad) */
@media (max-width: 767px) {

  #header-navbar {

    .navbar-header {

      #user-util-collapse {

        #user-util-links {

          #header-search {
            float:none;
            width:30%;

            input {
              width:100%;
            }

          }

        }

      }

      .navbar .nav {

        > li.dropdown > a.active  {
          color: #777777;
        }

        /* don't display nav dropdown menus on hover */
        li.dropdown:hover .dropdown-menu {
          display: none;
        }

      }

    }

  }

}

/* Landscape phones and down */
@media (max-width: 480px) {

  #header-navbar {

    .navbar-header {

      #user-util-collapse {
          width:93%;

        #user-util-links {

          #util-links-nologin {
            display: block;
          }

          #header-search {
            float:none;
            width:43%;

            input {
              width:100%;
            }

          }

        }

        #header_main_nav {
          padding-top:13px;
        }

        .navbar .nav {
          text-align: right;

          > li, li.last_nav {
            float: none;

            > a {
              padding: 4px 0;
            }

          }

        }

      }

    }

  }

}