/** Video insert **/

.video--wrapper.video--vimeo--wrapper {}

.video--thumbnail.video--vimeo--thumbnail {
    display: none
}

.video.video--vimeo {}

:root {
  --font-size: 17px;
  --line-height: 24px;
  --header-height: 1.2;
  --font-size--header: 38px;
  --line-height--header: 48px;
  --body-font: "Fluxisch Else";
  --header-font: "Fluxisch Else";
  --link-color: black;
  --link-color--visited: black;
  --link-color--hover: black;
  --body-background-color: #f3f3f3;
}
 
body, html {
  font-size: var(--font-size);
  line-height: var(--line-height);  
  font-family: var(--body-font);
  background: var(--body-background-color);
}

body {
  max-width: 100ch;
  margin: calc(2 * var(--line-height)) auto;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 3fr 1fr;
  padding-left: 10ch;
  column-gap: calc(2 * var(--line-height));
}

h1 {
 font-family: var(--header-font);
 font-size: var(--font-size--header);
 line-height: var(--line-height--header);
 margin: 0 0 calc(4 * var(--line-height)) 0
}

h2, h3 {
 font-family: var(--header-font);
 font-size: var(--font-size);
 margin: calc(2 * var(--line-height)) 0 0 0;
 line-height: var(--line-height);
}

h4, h5, h6 {
 margin: var(--line-height) 0 0 0;
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-color--hover);
    text-decoration: none;
}

a:visited {
    color: var(--link-color--visited);
}

header {
  display: flex;
  vertical-align: baseline;
  margin: 2em 0;
  grid-column-end: span 2;
}
 
.navbar--organisation {
    flex: 0 0 75mm;
    margin-left: calc(-75mm - 2ch);
}
 
nav ul {
  list-style-type: none;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
}
 
nav ul li {
  margin: 0 2ch 0 0;
}

.navbar--reports--subnav,
.navbar--pages--subnav,
.navbar--labels--subnav
{
  display: none;
}
 
main {
  position: relative;
}
 
/** References which aren't direct links (they don't have the data-direct-link attribute) */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
    color: inherit;
    text-decoration: none;
}

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

[data-link-target-type="label"]:hover .reference--target {
    text-decoration: underline;
}

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

 
[data-link-target-type="label"][data-direct-link] .reference--label,
[data-link-target-type="label"] .reference-label--target .reference-label--target--label {
  display: inline-block;
  background: #efefef;
  padding: .5ch;
  margin-top: -.5ch;
  font-family:var(--body-font);
}
 
.link-source {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  margin-top: 0;
  font-size: 85%;
}

ul.label--context-list {
  padding: 0;
  list-style-type: none;
}

ul.label--context-list li {
  margin-bottom: calc(2 * var(--line-height));
}

/** Hide elements which were marked as instructions in the pad */
.instruction {
    display: none;
}
 
.tag--question {
  font-size: 110%;
  color: green;
}
 
.tag--important  {
    text-decoration-line: underline;
    text-decoration-style: double;
}
 
.tag--trouble {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}
 
.tag--commentary {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
 
.tag--citation {
    background-color: beige;
}
 
b {
    border: solid black 2px;
}


.going-hybrid--labels ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.going-hybrid--labels ul li {
    margin-top: var(--line-height);
}
.going-hybrid--labels ul li a {
    padding: .3em .5em;
    border: 2px solid;
    text-decoration: none;
}
.going-hybrid--labels ul li a:hover {
    background: white;
}
 
img {
    max-width: 100%;
}


 
/**Anwhich aren't direct links (they don't have the data-direct-link attribute) */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
    color: inherit;
    text-decoration: none;
}

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

[data-link-target-type="label"]:hover .reference--target {
    text-decoration: underline;
}

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}