// Extra CSS overlaying elements

#global-header-bar {
  background-color: $red;
}

#global-header {

  #logo {

    white-space: nowrap;
    font-size: 27px;
    line-height: 32px;

    img {
      padding-right: 8px;
    }

  }

  .header-proposition {
    #proposition-links {
      li {
        padding: 0 0 0 15px;
      }
    }
  }

}

@include media(desktop) {
  #proposition-menu {
    float: right;
  }
}

a {
  &:visited {
    color: $link-colour;
  }
}

.form-control-1-1 {
  width: 100%;
}

.form-control-5em {

  width: 100%;

  @include media(tablet) {
    width: 5em;
  }

}

.column-main {

  > .heading-large {
    margin-top: $gutter;
  }

  > .grid-row  {
    
    .heading-large {
      margin-top: $gutter;
    }
    
  }

}

.highlight {
  font-family: monospace;
  overflow-x: scroll;
  padding: 10px 0 10px 10px;
}

.inline {

  .block-label {

    @include media(tablet) {
      float: none;
      display: inline-block;
    }

  }

}

td {
  vertical-align: top;
}

.heading-xlarge {
  margin-bottom: 20px;
}

#footer {

  .footer-categories {
    
    @extend %site-width-container;

    &-wrapper {
      padding: 0 0 $gutter * 2;
      margin: 0 0 $gutter;
      border-bottom: 1px solid $border-colour;
    }

    h2 {
      margin: 0 0 $gutter-two-thirds;
    }

  }

}

.form-label {
  margin-bottom: 5px;
}

a[rel="external"] {
  @include external-link-default;
  @include external-link-16;
  @include media(tablet) {
    @include external-link-19;
  }
}

.hint {
  color: $secondary-text-colour;
}