@import 'css/master/settings/settings';

//BSD & Header V5 Specific Overrides

.bsd {
  #navV5 {
    clear: both;
    margin-top: 10px;
    float: left;
  }
  .tagline {
    line-height: 25px;
    font-size: 14px;
    font-weight: lighter;
  }

  #headerInnerWrap {
    &.headerV5 {
      font-weight: $fontWeightSemiBold;
      &.nav_with_tb {
        #headerSearchBlock {
          margin: 0;
        }
        #hContext_bsd {
          margin: 0;
          position: absolute;
          top: 35%;
          right: 0;
        }
        #header .brandLogo {
          margin: 0;
          bottom: 0;
          width: 170px;

          &.tierOne_logo {
            width: 90px;
            height: 90px;

            #logo {
              display: block;

              > img {
                max-width: 90px;
                max-height: 90px;
              }
            }
          }

          &.square_logo {
            width: 100px;

            img {
              width: 90px;
              height: 90px;
              margin-top: -20px;
              top: 0;
            }
          }
        }
      }
      #cartItems {
        background-color: $red;
        border-radius: 14px;
        color: $white;
        padding: 2px 4px;
        position: absolute;
        top: -6px;
      }
      #predictSearchFlyout .overlayObj {
        width: 587px;
      }
    }
    #header {
      min-height: 80px;
    }
    &.nav_with_tb #headerCart {
      top: 0;
      margin-left: 0;
    }
  }
  .headerV5 {
    #logo {
      display: inline-block;
      position: relative;
      > img {
        position: absolute;
        top: 25%;
        left: 0;
        width: initial;
        height: initial;
      }
    }
    .nav-container {
      background: none;
    }
    #sitenav.fixed_nav li.nav {
      &:first-child a.nav_a1 {
        margin-left: 0;
      }
      a.nav_a1 {
        padding: 0 14px 0 0;
        margin: 0 0 0 14px;
      }
      &:last-child a.nav_a1 {
        border: 0 none;
        padding: 0;
      }
    }

    //Override for BSD Custom Catalog with 10 NavMenus
    #sitenav.fixed_nav li:first-child:nth-last-child(10) h2 > a,
    #sitenav.fixed_nav li:first-child:nth-last-child(10) ~ li h2 > a,
    #sitenav.fixed_nav li.nav a.nav_a1 {
      padding: 0 6px 0 0;
      margin: 0 0 0 6px;
    }

    #navV5 .custom .interior_menu .custom_cat_list {
      display: inline-block;
      float: left;
      line-height: 2;
      width: 29%;
      margin: 0 2%;
    }

    //FIX for Coremedia pages
    #headerSearchBlock #searchBox td {
      vertical-align: middle;
    }

    #searchBox .big_a {
      background: none;
    }
    #hContext_bsd {
      li {
        padding-left: 5px;
      }
      #cartItems {
        position: absolute;
        top: 0;
        left: 41px;
        min-width: 20px;
        width: auto;
        height: 20px;
        color: $white;
        text-align: center;
        line-height: 20px;
        background-image: none;
      }
      #cartStatus {
        margin-left: 5px;
      }
    }

    #hQuickLinks_bsd {
      > li >a {
        background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/us/bsd/headerv5-icons.png) no-repeat 0 0;
        padding-top: 25px;
        font-weight: bold;
      }
      .account_icon {
        background-position: 30px 1px;
      }
      .orders_icon {
        background-position: 5px -47px;
      }
      .quickEntry_icon {
        background-position: 30px -97px;
      }
      .lists_icon {
        background-position: 19px -143px;
      }
      .cart_icon {
        background-position: 2px -190px;
      }
    }
  }
  #headerWrapper {
    background: 0;
  }
  #header {
    #cartHeader {
      height: 33px;
    }
    .section {
      padding-bottom: 6px;
    }
  }
  #cartMessage {
    display: block;
  }
  #hCart_trigger {
    display: block;
  }
  #hCart {
    float: right;
    margin: 6px 6px 0 0;
    width: 298px;
    #currentShiptoFlyout {
      top: 77px;
      padding: 6px;
    }
    #cartFlyout {
      top: 77px;
    }
  }
  #cartHeader {
    height: 32px;
    padding-bottom: 0;
    width: auto;
  }
  #headerCurrentShiptoID {
    margin-left: 18px;
  }
  #headerCartActions {
    width: 100%;
  }
  #myOfficeBtn.nav_bar .arrow {
    background: 0 none;
    padding: 0;
    &:before {
      bottom: -3px;
      right: -3px;
    }
  }
}
#globalNavV5_bsd {
  float: left;
  height: 24px;
  padding: 0 15px 0 0;
  width: 948px;
  .nav-container {
    float: left;
    clear: left;
    left: 0;
    margin: 0;
    height: 34px;
    padding-bottom: 3px;
    position: relative;
    width: 948px;
    z-index: 1;
    background: none;
    overflow: visible;
    border: 0;
    h2 {
      font-weight: normal;
    }
  }
  .nav {
    float: left;
    clear: none;
    padding: 0;
    height: 34px;
    cursor: pointer;
    overflow: visible;
    background: none;
    border: 0;
  }
  &.nav_a1 {
    font-weight: normal;
  }
  .globalNav_left {
    position: absolute;
    z-index: 999;
    ul {
      padding: 3px;
      float: left;
      li {
        float: left;
        color: $gray;
        font-size: 12px;
        margin-left: 16px;
        &#headerHelp {
          padding-top: 0;
        }
      }
    }
  }
  #headerHelp {
    padding-top: 0;
  }
  .globalNav_right {
    float: right;
    .caret {
      position: absolute;
      width: 22px;
      height: 12px;
      left: 50%;
      margin-left: -11px;
      z-index: 99999;
      background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/headermodal-caret.png) no-repeat 0 -10px;
      top: 15px;
      &.help {
        z-index: 860;
      }
      &.stores {
        z-index: 91;
      }
    }
    #logIn_bsd {
      padding-top: 5px;
      li {
        color: $black;
        float: left;
        margin-left: 20px;
        position: relative;
      }
      .h_login {
        margin-left: 20px;
      }
      .h_login,
      #custId,
      .custName {
        font-weight: normal;
        a {
          font-weight: $fontWeightSemiBold;
          color: $blue;
        }
        a:hover {
          color: #51B6EE;
        }
      }
      #headerStores .icon_arrow:after,
      #headerHelp .icon_arrow:after {
        color: $gray;
        content: "\25BE";
        font-size: 12px;
        margin-left: 2px;
      }
    }
    .context_modal_bsd {
      &.help {
        left: -275%;
        border: 1px solid #D1D2D4;
      }
      &.stores {
        position: absolute;
        left: -100%;
        top: 25px;
        z-index: 90;
        width: 268px;
        &.zipped {
          width: 654px;
          top: 58px;
          right: 1px;
        }
        strong {
          background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/bg_sprite_gray_icons.png) no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
        }
      }
    }
  }
  ul li {
    a {
      color: $black;
      font-size: 12px;
      font-weight: normal;
      text-decoration: none;
    }
    &#homeLink {
      background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/bg_sprite_gray_icons.png) no-repeat scroll 0 -111px rgba(0, 0, 0, 0);
      padding-left: 16px;
    }
  }
  a:hover {
    color: #444;
    span {
      color: #444;
    }
  }
}
#navV5 .nav-container {
  border: 0 none;
  border: 0;
}
#headerInnerWrap.headerV5 {
  .nav-container,
  .nav {
    background: 0;
    padding-bottom: 0;
  }
  #mainSearchField {
    width: 306px;
  }
  #headerSearchBlock {
    display: inline-block;
    padding: 0 8px 0 24px;
    position: absolute;
    bottom: 0;

    &.square_layout {
      #mainSearchField {
        width: 336px;
      }
    }
  }
  #header,
  #sitenav {
    padding: 0;
  }
}
.headerV5 #headerWrapper {
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/bg_sprite_header_V5.png) repeat-x 0 -129px;
}
#hContext_bsd .caret {
  position: absolute;
  width: 22px;
  height: 12px;
  left: 50%;
  margin-left: -11px;
  z-index: 99999;
  background: url(//media.officedepot.com/image/upload/f_auto,q_auto/gtools/images/od/new/headermodal-caret.png) no-repeat 0 -10px;
}

#headerInnerWrap.headerV5 .helpContent .chat_mod {
  max-height: 100%;
}

#headerInnerWrap.headerV5 .helpContent a {
  color: $blue;
}

//Email Signup Lightbox

#bsdEmailSignup {
  clear: both;
  margin: 30px;
  position: relative;

  #emailOptIn {
    .email_icon {
      background-position: -71px 5px;
      height: 20px;
    }
    h4 {
      @include font-size(32px);
      font-weight: $fontWeightSemiBold;
      display: inline-block;
    }
    p {
      @include font-size(18px);
      padding: 20px 0 8px 30px;
    }
    .form_field,
    #optInEmailSubmit {
      width: 65%;
    }
    .form_field {
      margin: 0 auto 12px auto;
      @include font-size(16px);
      label {
        margin: 0;
      }
    }
  }
  .alertz {
    line-height: 1.5;
    position: absolute;
    top: 25%;
    @include font-size(24px);
  }
}

//Large Screen Overrides

@include breakpoint(lg) {
  .bsd {
    .headerV5 {
      #hQuickLinks_bsd {
        max-width: 442px;
        .caret {
          left: 47%;
        }
        > li {
          padding-left: 12px;
        }
      }
    }
    #headerInnerWrap.headerV5 {
      #headerCart {
        margin-left: 0;
      }
      &.nav_with_tb #hContext_bsd {
        width: 517px;
      }
    }
  }
}


.header-contact-us{
  position: relative;
  background: #FFFFFF;
  font-weight: 400;

  > :not(:last-child) {
    border-bottom: 1px solid #D1D2D4;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }

  &-subheading {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  #globalNavV5_bsd ul li & a  {
    color: #1e5a99;
  }

  &-button {
    margin-top: 0.5rem;
    min-height: 36px;
    background-color: #1E5A99;
    color: #FFFFFF;
    width: 100%;
    border: 1px solid #1E5A99;
    border-radius: 4px;

    &:focus {
      outline-offset: 0;
    }

    &:hover {
      background: #194a7e;
      border-color: #194a7e;
      cursor: pointer;
    }

    #globalNavV5_bsd ul li & a  {
      color: #FFFFFF;

      &:hover {
        color: #FFFFFF;
      }
    }
  }
}