/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/***

    DomainClaim default styles

***/
/***

    Colors are defined in variables with a name of the form
    'c-{scheme}-{colorspec}. The following color schemes are defined:

    * edge -- subdued color for top and bottom elements on the screen; our
      logo will be place on this so the colors should not clash with it
    * inactive -- subdued color for the background of inactive parts of the
      screen
    * active -- color for the active parts of the screen that have no
      specific accent applied
    * accent -- accent color with big contrast with active color (e.g. dark
      blue if 'active' is white)
    * accentdim -- accent color with less contrast with active color (e.g.
      light blue if 'active' is white)
    * accentbright -- striking accent color with lots of contrast (e.g.
      orange)

    For most color schemes the following colors are defined:
    * fg -- primary foreground color, e.g. for text
    * bg -- background color
    * link -- color for rendering hyperlinks
    * border -- color for generic borders

    Some color schemes define the following colors as well:
    * button-bg -- background color for buttons
    * button-fg -- foreground/text color for buttons
    * button-border -- border color for buttons

    Accented items may be styled by switching fg and bg ('reverse').

    For the 'active' color scheme the following additional colors are
    defined:
    * danger -- color to be used to indicate danger or removal ("red")
    * confirm -- color to be used to indicate success or addition ("green")
    * error-bg -- background color for errors
    * error-fg -- foreground color for errors
    * error-border -- border color for errors
    * form-bg -- background color for form inputs
    * form-fg -- text color for form inputs
    * form-label -- color for form labels
    * form-border -- color for form element borders

    Generic colors without context:
    * shadow -- base color for rendering shadows

    Some other styling variables are related to specific values and have no
    'c-' prefix:
    * default-radius -- default radius to be used for element corners that
      need to be a rounded a bit without taking too much focus
    * accent-radius -- default radius to be used for elements in a
      contrasting color (e.g. colored in an accent color)
    * active-radius -- default radius for elements that can be interacted
      with, such as form inputs and buttons

    Last but not least some (parametrized) mixins are added to the end of
    this file.

***/
/*
Because we generate SVG inline with LessCSS, the colors to do *that* need
to be styled with plain colors and not CSS variables. Classes using these
colors must add a selector for every supported theme themselves.
*/
:root {
  --c-edge-fg: #fff;
  --c-edge-bg: #333;
  --c-edge-link: var(--c-edge-fg);
  --c-edge-border: var(--c-edge-fg);
  --c-inactive-fg: #888;
  --c-inactive-bg: #eee;
  --c-active-fg: #000;
  --c-active-bg: #fff;
  --c-active-link: #0066d9;
  --c-active-border: #2d6cb3;
  --c-active-button-bg: #2d6cb3;
  --c-active-button-fg: #fff;
  --c-active-button-border: var(--c-active-button-bg);
  --c-active-danger: #e00;
  --c-active-confirm: #0a0;
  --c-active-error-bg: #f67575;
  --c-active-error-fg: #000;
  --c-active-error-border: #f23e3e;
  --c-active-form-bg: var(--c-active-bg);
  --c-active-form-fg: var(--c-active-fg);
  --c-active-form-label: var(--c-active-border);
  --c-active-form-border: var(--c-active-border);
  --c-accent-fg: #eee;
  --c-accent-bg: #409aff;
  --c-accent-link: #fff;
  --c-accent-border: var(--c-active-border);
  --c-accent-button-bg: var(--c-active-button-bg);
  --c-accent-button-fg: var(--c-active-button-fg);
  --c-accent-button-border: #fff;
  --c-accentdim-fg: #000;
  --c-accentdim-bg: #e9f3ff;
  --c-accentdim-link: var(--c-active-link);
  --c-accentdim-border: var(--c-active-border);
  --c-accentdim-button-bg: var(--c-active-button-bg);
  --c-accentdim-button-fg: var(--c-active-button-fg);
  --c-accentdim-button-border: var(--c-active-button-border);
  --c-accentbright-fg: #000;
  --c-accentbright-bg: #ffa242;
  --c-accentbright-link: #fff;
  --c-accentbright-border: #ccc;
  --c-accentbright-button-bg: var(--c-active-button-bg);
  --c-accentbright-button-fg: var(--c-active-button-fg);
  --c-accentbright-button-border: #000;
  --c-shadow: rgba(0, 0, 0, 0.25);
  --default-radius: 0.25rem;
  --accent-radius: 0.25rem;
  --active-radius: 0.4rem;
}
:root.theme-dark {
  /*** Dark mode colors, insofar as they are different. ***/
  --c-inactive-fg: #888;
  --c-inactive-bg: #080808;
  --c-active-fg: #fff;
  --c-active-bg: #222;
  --c-active-link: #73b5ff;
  --c-active-border: #bbb;
  --c-active-error-fg: #fff;
  --c-active-button-bg: #6ca0da;
  --c-active-danger: #e00;
  --c-active-confirm: #0a0;
  --c-accent-fg: #eee;
  --c-accent-bg: #004ea6;
  --c-accent-link: #fff;
  --c-accent-button-border: #fff;
  --c-accentdim-fg: #fff;
  --c-accentdim-bg: #336;
}
:root.theme-dos {
  /*** Gimmick ***/
  --c-edge-fg: #fff;
  --c-edge-bg: #000;
  --c-inactive-fg: #aaaaaa;
  --c-inactive-bg: #000;
  --c-active-fg: #fff;
  --c-active-bg: #0000aa;
  --c-active-link: #55ffff;
  --c-active-border: #ffff55;
  --c-active-button-bg: #00aaaa;
  --c-active-button-fg: #fff;
  --c-active-danger: #ff5555;
  --c-active-confirm: #00aa00;
  --c-active-error-bg: #aa0000;
  --c-active-error-fg: #fff;
  --c-active-error-border: var(--c-active-error-bg);
  --c-active-form-label: #ffff55;
  --c-active-form-border: #fff;
  --c-accent-fg: #000;
  --c-accent-bg: #00aaaa;
  --c-accent-link: #fff;
  --c-accentdim-fg: #fff;
  --c-accentdim-bg: #aaaaaa;
  --c-accentdim-link: #000;
  --c-accentbright-fg: #000;
  --c-accentbright-bg: #55ffff;
  --c-accentbright-link: #0000aa;
  --c-accentbright-border: var(--c-accentbright-fg);
  --c-accentbright-button-border: (var--c-accentbright-fg);
  --c-shadow: rgba(0, 0, 0, 0.5);
  --default-radius: 0;
  --accent-radius: 0;
  --active-radius: 0;
}
/***

  Default font LessCSS variables (used because CSS variables dont support
  lists):
  * heading -- for h1, h2 and h3 headers
  * body -- for body text and h4 or lower headers
  * legible -- for extreme legibility (might be monospace)
  * monospace -- a monospace font

***/
/***

  Mixin for styling a raised element (in principle this is an element that
  the user wants to interact with before interacting with other elements on
  the screen, such as a popout menu).

***/
/***

  Mixin for rendering inline SVG images. These are usually laid out as a
  <div> with a <span> placeholder text inside.

***/
/***

  Mixin for our logo.

***/
/*** The rest is a reset of the basic styles so all browsers render the same ***/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/***

Gradient colors derived from vlag.svg.

***/
:root {
  --c-top-bg: white;
  --c-top-fg: black;
  --c-bottom-bg: #161f4f;
  --c-bottom-fg: white;
  --c-cover-bg: rgba(255, 255, 255, 0.5);
  --c-cover-fg: black;
}
h1,
h2,
h3,
body,
p {
  font-family: helvetica, arial, sans-serif;
  line-height: 1.3em;
}
h1 {
  font-size: 3rem;
  font-weight: normal;
  margin: 0.25em 0;
}
h2 {
  font-size: 1.75rem;
  font-weight: bold;
}
h3 {
  font-size: 1.25rem;
  font-weight: bold;
}
body,
p {
  font-size: 1rem;
}
p,
ul,
table {
  margin: 1em 0;
}
table {
  border-collapse: collapse;
}
table td,
table th {
  border: 2px solid white;
  padding: 0.5em;
  text-align: left;
}
table td.amount,
table th.amount {
  text-align: right;
}
table td.centered,
table th.centered {
  text-align: center;
}
table th {
  background-color: white;
  color: var(--c-gradient-bottom);
}
body {
  background-color: var(--c-bottom-bg);
  display: grid;
  grid-template-columns: minmax(2em, 1fr) fit-content(64rem) minmax(2em, 1fr);
  grid-template-rows: min-content max-content min-content;
  grid-template-areas: "header header header" "main main main" "footer footer footer";
}
header {
  background-color: var(--c-top-bg);
  color: var(--c-top-fg);
  grid-area: header;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-template-areas: "left nav right";
}
header nav {
  text-align: right;
}
header nav .logo {
  display: inline-block;
  float: left;
  padding: 0;
  margin: 1.5rem 1rem 1rem 0;
  background-image: url(/assets/images/logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 12em;
  height: 2em;
}
header nav .logo span {
  display: none;
}
header nav a {
  color: var(--c-top-fg);
}
main {
  grid-area: main;
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: auto;
  background-color: var(--c-bottom-bg);
  background-image: url(/assets/images/achtergrond.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
  color: white;
}
main h1 {
  grid-column: 2;
}
main section {
  grid-column: 2;
  margin-bottom: 2rem;
}
footer {
  /*    background-color: var(--c-bottom-bg); */
  color: var(--c-bottom-fg);
  grid-area: footer;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-template-areas: "left nav right";
}
footer nav {
  grid-area: nav;
}
footer a {
  color: var(--c-bottom-fg);
}
header nav,
footer nav {
  grid-area: nav;
}
header nav ul,
footer nav ul {
  display: inline-block;
  padding: 0;
  margin: 2em -1em;
}
header nav li,
footer nav li {
  display: inline-block;
  padding: 0;
  margin: 0 1em;
}
header nav a,
footer nav a,
header nav a:visited,
footer nav a:visited {
  color: black;
  text-decoration: underline;
  font-size: 1.15em;
}
/*

  Homepage styles

*/
.home section.headline {
  background-image: url('/assets/images/vlag.svg');
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: 2em 0 2em 22em;
  margin-left: -2em;
}
.home section.headline h1 {
  color: var(--c-gradient-bottom);
  text-shadow: 0 0 0.125em white;
}
.home section.headline ul {
  margin: 1em 0;
  padding: 0;
}
.home section.headline li {
  display: inline-block;
  font-size: 1.2rem;
  background-color: white;
  padding: 0.5em;
  color: white;
  background-color: var(--c-gradient-bottom-transparent);
  margin: 0.5em 0;
  line-height: 130%;
}
.home section.headline p.remark {
  padding-left: 1em;
  color: white;
}
.home section.headline p.remark .star {
  font-size: 1.1rem;
}
.home section.headline p.remark .remark {
  font-size: 0.95rem;
  color: white;
}
section.domaincheck {
  display: grid;
  grid-template-columns: 1fr min-content minmax(20rem, 8fr) min-content 1fr;
  grid-template-areas: "left label input button right";
}
section.domaincheck label {
  grid-area: label;
  font-size: 1.2em;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0.3em 0.75em 0 0;
}
section.domaincheck label::after {
  content: ':';
}
section.domaincheck input {
  grid-area: input;
  font-size: 1.2em;
  padding: 0.25em;
}
section.domaincheck button {
  grid-area: button;
}
/* */