html, body, button, input, table, td, th { font-family: $NTA-Light; }

// basic styles for HTML5 and other elements
html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

// HTML5 display definition
main {
  display: block;
}

// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
//    http://clagnut.com/blog/348/#c790
//    note - font-size reduced to 62.5% to allow simple rem/px font-sizing and fallback
//    http://snook.ca/archives/html_and_css/font-size-with-rem
// 2. Keeps page centred in all browsers regardless of content height
// 3. Removes Android and iOS tap highlight color to prevent entire container being highlighted
//    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
// 4. Prevents iOS text size adjust after orientation change, without disabling user zoom.

html {
  font-size: 62.5%;   // 1
  overflow-y: scroll; // 2
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
  -webkit-text-size-adjust: 100%; // 4
  -ms-text-size-adjust: 100%; // 4
  // Set background colour to match footer background
  background-color: $grey-8;
  // Force the scrollbar to always display in IE10/11
  -ms-overflow-style: scrollbar;
}

// 1. Font-size increased to compensate for change to html element font-size in
//    order to support beta typography which was set in ems
//    (62.5% * 160% = 100%)
// 2. Addresses margins handled incorrectly in IE6/7

body {
  font-size: 160%; // 1
  margin: 0; // 2
  background: $white;
  color: $text-colour;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ol, ul, nav ol, nav ul {
  list-style: inherit;
}

fieldset {
  border: none;
  padding: 0;
}

b,
strong {
  font-weight: 600;
}

img {
  border: 0;
}

@include ie-lte(7) {
  button {
    overflow:visible;
  }
}

abbr[title] {
  cursor: help;
}

// Set focus styles
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

a:focus {
  background-color: $focus-colour;
  outline: 3px solid $focus-colour;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: 3px solid $focus-colour;
}

// Link styles
a:link {
  color: $link-colour;
}

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

a:hover {
  color: $link-hover-colour;
}

a:active {
  color: $link-active-colour;
}

// External link styles
a[rel="external"] {
  @include external-link-default;
  @include external-link-19;
  @include media-down(mobile) {
    @include external-link-16;
  }
}

.external-link {
  @include external-link-12-no-hover;
  @include external-link-heading;
}