// Additional CSS file that can be added to give ID6 sites the ID7 masthead

// ID7 Brand configuration variables
@import 'variables.less';
@import 'mixins.less';

// Override header and masthead colour to white
#masthead, #masthead.transparent {
  background-color: white;
  color: @text-color;

  .link-colour(@text-color);
}

// Replace the logo with the new one
#warwick-logo-link {
  .svg-background("../images/logotype-colour");
  background-size: 136px 26px;
}

@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) {
  #warwick-logo-link {
    background-image: url("../images/logotype-colour.svg");
  }
}

#search-container {
  // Update search box pointer colour
  ul.index-section li.active {
    background-color: @id7-brand-purple;
    .link-colour(white);
  }

  // Hide index section selector
  ul.index-section {
    display: none;
  }

  // Reinstate search box border
  #search-box {
    border: 1px solid #cccccc;
    padding: 2px 23px 2px 3px;
    height: 25px;
    line-height: 25px;
    box-sizing: border-box;
  }

  // Move search button inside of box
  #search-button {
    margin-left: -20px;
    position: relative;
    top: -3px;
  }
}

// Mobile sprites
.is-smallscreen #masthead i.sprite-menu, .is-smallscreen #masthead i.sprite-search {
  background-image: url("../images/id6a-mobile-sprites.png");
}