/* ==========================================================================
   Base CSS
   ========================================================================== */

/**
 * Adapted from suit-base CSS
 * https://github.com/suitcss/base
 * Also including base colours, font size, line height
 */

/* Apply a natural box layout model to all elements */
*, *:before, *:after {
    box-sizing: border-box;
}

/* Responsive. Images. */
img, embed, object, video {
  display: block;
  height: auto;
  max-width: 100%;
}

.ie6 img {
  width: 100%;
}

/* Apply base variables */
html {
  background-color: var(--base_background);
  color:            var(--base_color);
  font-family:      var(--base_fontfamily);
  font-size:        var(--base_fontsize);
  line-height:      var(--base_lineheight);
}

@media screen and (min-width: 62em) {
  html {
    font-size: 13px;
  }
}

body {
  margin: 0;
}

a {
  color: var(--base_linkcolor);
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  color: var(--base_linkcolorhover);
  text-decoration: underline;
}

*:focus {
  outline: dotted 1px var(--blue_link);
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, p, pre {
  margin: 0;
}

/* Prevents border on linked image in IE */
img {
  border: 0 solid transparent;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol, ul {
  margin: 0.5em 0 1em 1.5em;
  padding: 0;
}

label {
  display: block;
}

sup {
  font-size: 60%;
  line-height: 1;
}

table {
  border-collapse: collapse;
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}