/* Colours */
/* 0, 120, 231 */

/* Complimentary */
/* 154, 96, 0 */
/* 0, 80, 154 */

/* Triad */
/* 15, 88, 154 */
/* 235, 35, 23 */

/* 167, 180, 18 */
/* 143, 154, 8 */

a {
  color: hsl(208, 56%, 46%);
  -webkit-transition: color .2s;
  transition: color .2s;
}
/* a:not(:hover) {
  text-decoration: none;
} */

/* link (order: lvha) */
a:link {
}
a:visited {
}
a:hover {
  color: hsl(208, 56%, 66%);
}
a:active {
}

pre {
  color: #000;
}
:not(pre) > code {
  color: #000;
}

label {
  color: #888;
}

figure > em {
  color: #ccc;
}

/* table */
table a {
  /* increase click area size */
  /* display: inline-block; */
}
thead {
  color: #000;
}

/* form */
form p {
  font-size: .875rem;
  color: #666;
}

main aside,
main nav {
  /* TODO: should be more specific. aside and navs should be normaly usable inside sectioning elements */
  font-size: .875rem;
  color: #666;
}

/* button */
button,
[type="button"],
[type="reset"],
[type="submit"],
.button {
  color: #000;
}
a.button:hover {
  color: #000; /* reset */
  /* text-decoration: none; */
}
a.button.primary:hover {
  color: #fff; /* reset */
}

.logo > a {
  -webkit-transition-property: color, text-shadow;
  transition-property: color, text-shadow;
}

body > header,
body > header nav > ul:not(.external) > li > ul {
  border-color: hsl(208, 56%, 46%);
}

body > header a:focus,
body > header a:hover,
body > footer a:focus,
body > footer a:hover {
  text-shadow: 0 0 1em hsl(208, 56%, 46%);
}

body > header nav a,
body > footer nav a {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* depth header and footer links */
body > header nav > ul:not(.external) a,
body > header nav > ul:not(.external) > li > button {
  text-shadow: 0 -1px 1px rgba(0, 0, 0, .5);
}

body > header nav > ul.external > li > a,
body > header .logo > a,
body > footer a {
  text-decoration: none;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: color, text-shadow;
  transition-property: color, text-shadow;
}
body > header nav > ul.external > li > a:focus,
body > header .logo > a:focus,
body > footer a:focus {
  outline: 0;
}
body > header nav > ul:not(.external) > li > button::after {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* table alternating rows */
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: hsl(0, 0%, 98%);
}

tbody tr:nth-child(odd) td.primary,
tbody tr:nth-child(odd) th.primary,
tbody tr.primary:nth-child(odd) td,
tbody tr.primary:nth-child(odd) th {
  background-color: hsl(208, 56%, 44%);
}
tbody tr:nth-child(odd) td.success,
tbody tr:nth-child(odd) th.success,
tbody tr.success:nth-child(odd) td,
tbody tr.success:nth-child(odd) th {
  background-color: hsl(103, 44%, 87%);
}
tbody tr:nth-child(odd) td.info,
tbody tr:nth-child(odd) th.info,
tbody tr.info:nth-child(odd) td,
tbody tr.info:nth-child(odd) th {
  background-color: hsl(200, 65%, 89%);
}
tbody tr:nth-child(odd) td.warning,
tbody tr:nth-child(odd) th.warning,
tbody tr.warning:nth-child(odd) td,
tbody tr.warning:nth-child(odd) th {
  background-color: hsl(50, 81%, 92%);
}
tbody tr:nth-child(odd) td.error,
tbody tr:nth-child(odd) th.error,
tbody tr.error:nth-child(odd) td,
tbody tr.error:nth-child(odd) th {
  background-color: hsl(0, 43%, 89%);
}

/* sticky footer */
body {
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  flex-direction: column;
}
body > main,
body > div:only-of-type {
  -webkit-flex: 1;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}
/*
 * When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1),
 * it must ignore the selector and the following declaration block (if any) as well.
 * See: http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Fix body collapsing in IE 11 when flexbox is used for sticky footer. */
  body {
    display: block; /* reset */
  }
}

/* pagination */
nav.pagination > ol > li.first,
nav.pagination > ol > li.previous,
nav.pagination > ol > li.next,
nav.pagination > ol > li.last {
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom; /* overflow hidden changes vertical alignment */
}
nav.pagination > ol > li.first > a,
nav.pagination > ol > li.previous > a,
nav.pagination > ol > li.next > a,
nav.pagination > ol > li.last > a {
  color: transparent;
  width: 1rem;
}
nav.pagination > ol > li.first > a::before,
nav.pagination > ol > li.previous > a::before,
nav.pagination > ol > li.next > a::before,
nav.pagination > ol > li.last > a::before {
  display: inline-block;
  width: 1rem;
  height: 1.5rem;
  vertical-align: top;
}
nav.pagination > ol > li.first > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="-0.5 0, 1.5 -1.5, 1.5 1.5"/><rect x="-1.5" y="-1.5" width="1" height="3"/></svg>');
}
nav.pagination > ol > li.previous > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="-2 0, 0 -1.5, 0 1.5"/><polygon points="0 0, 2 -1.5, 2 1.5"/></svg>');
}
nav.pagination > ol > li.next > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="2 0, 0 -1.5, 0 1.5"/><polygon points="0 0, -2 -1.5, -2 1.5"/></svg>');
}
nav.pagination > ol > li.last > a::before {
  content: url('data:image/svg+xml,<svg fill="%23347ab7" viewBox="-2 -3 4 6" xmlns="http://www.w3.org/2000/svg"><polygon points="0.5 0, -1.5 -1.5, -1.5 1.5"/><rect x="0.5" y="-1.5" width="1" height="3"/></svg>');
}

body > div:only-of-type > nav:first-child > h2 > a {
  background-color: hsl(208, 56%, 46%);
}
body > div:only-of-type > nav:first-child > h2 > a:hover {
  background-color: hsl(208, 56%, 56%);
}