@charset "UTF-8";
/* latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url(../fonts/opensans.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* TODO consolidate all colors and specific heights here */
/* inverted joriszwart.nl colors */
/* TODO flexbox for bottom alignment, old browsers without media queries is mobile view after all */
h1 a[rel=index], h2 a[rel=index] {
  font-size: 32px;
  line-height: 16px;
  /* line-height of h1 minus a.fontsize / 2 */
  position: absolute;
  bottom: 16px;
  right: 1rem;
}

a {
  color: #79301b;
  text-decoration: none;
}

article a, section a {
  font-weight: bold;
}

a p {
  font-weight: normal;
}

/* home link */
nav a[href="/"] {
  font-size: large;
}

article p a {
  font-weight: bold;
  text-decoration: underline;
}

/* flat list e.g. for search results */
a > p {
  color: #4B4B4B;
}

article p a:hover, article p a:focus {
  text-decoration: none;
}

article p a:visited:not(.button) {
  color: #4B4B4B;
  text-decoration: none;
}

a[rel=prev] small, a[rel=next] small,
h1 a[rel=index], h2 a[rel=index] {
  color: #4B4B4B;
  font-weight: bold;
}

h1 a[rel=index], h2 a[rel=index] {
  color: #79301b;
  font-size: 24px;
}

a[rel=prev] small::before {
  color: #16758f;
  content: "◀ ";
}

h1 a[rel=index]::after,
h2 a[rel=index]::after,
a[rel=next] small::after {
  color: #16758f;
  content: " ►";
}

/* TODO hover with (i)-icon tooltip instead */
/*


<abbr title="HyperText Markup Language">HTML</abbr>
HyperText Markup Language (HTML)
^^^ before attr title^^^^ "(" + text + after: ")"


italic is over the top anyway, so it can be done!

*/
abbr, dfn {
  border-bottom: 1px dashed gray;
  text-decoration: none;
}
abbr[title]:after, dfn[title]:after {
  content: " (" attr(title) ") ";
  font-style: normal;
}

/* TODO in fact a lot of these can appear outside articles (comments, 
        tag page, sitemap page etc) and should be styled the same */
article {
  /* comments */
  /* other time (1999)
    a[href^="mailto:"]::before {
      content: "✉ "
    }
  
    a[href^="tel:"]::before {
      content: "☎ "
    }
  
    a[href^="http"]::after { 
      color: gray;
      content: ' ↗';
      font-size: smaller;
      font-weight: normal
    }
  */
}
article > header {
  background: #FFFFFF;
}
article > header time {
  font-size: 24px;
  margin-right: 0.5rem;
}
article article > header {
  background: none;
  margin-top: 1rem;
}
article > footer,
article > .footnotes {
  font-size: 0.8em;
}
article h1 {
  /* sub title */
}
article h1 + p a:link {
  color: black;
  font-weight: lighter;
}

p a[href$=".pdf"]:not(.button)::after {
  color: #4B4B4B;
  content: " (PDF) ";
  font-size: smaller;
  font-weight: normal;
}
p a[href$=".zip"]:not(.button)::after {
  color: #4B4B4B;
  content: " (ZIP) ";
  font-size: smaller;
  font-weight: normal;
}

aside {
  background: #e07f5e;
}

header + aside {
  background: white;
}

article header + aside img {
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 1rem;
  vertical-align: middle;
  /* prevent bottom padding/margin */
  width: 50%;
}

.article-tile header {
  margin-top: 1rem;
}

.article-tile h3 {
  margin-top: 0.5rem;
}

/* TODO article footer to prevent hero image colored as well? */
aside:last-of-type {
  background: #e07f5e;
  padding: 0.05px 1rem 1rem 1rem;
}

/* foot notes */
sup a {
  text-decoration: none;
}

/* minimal articles (e.g. related) */
section article {
  height: 125px;
  /* TODO 323px with content */
  overflow: hidden;
  width: 282px;
}
section article figure {
  height: 131px;
  overflow: hidden;
  width: 282px;
}

/* show progress */
.progressed {
  display: flex;
}
.progressed .progress {
  display: flex;
  background: gray;
  text-align: right;
  flex-direction: column;
  justify-content: space-between;
}

/*

TODO maybe (or not, we are not a tech demo)
  
  article p:last-of-type::after {
    content: "∎";
    font-size: 1.5em;
    color: $brand-color;  
  }

pre + figcaption::before {
  content: "code example - "
}
  */
img + figcaption::before {
  content: "Figure - " count(figure);
}

.badge {
  background: #16758f;
  border-radius: 50%;
  font-size: 10px;
  padding: 0.2em 0.4em;
}
.badge a, .badge a:link {
  border-bottom: none !important;
  color: white;
}

blockquote {
  background: #79301b;
  color: white;
  display: inline-block;
  font-size: 2rem;
  padding: 1rem;
}
blockquote header {
  font-size: 1rem;
}

blockquote.conversation {
  border-left: 2px solid purple;
  color: purple;
  margin: 0.5em;
  padding: 0.5em;
}
blockquote.conversation blockquote:nth-child(odd) {
  background-color: #eee;
}
blockquote.conversation blockquote blockquote {
  border-left: 2px solid blue;
  color: blue;
  margin: 5px;
}
blockquote.conversation blockquote blockquote blockquote {
  border-left: 2px solid green;
  color: green;
}
blockquote.conversation blockquote blockquote blockquote blockquote {
  border-left: 2px solid #fc0;
  color: #fc0;
}
blockquote.conversation blockquote blockquote blockquote blockquote blockquote {
  border-left: 2px solid orange;
  color: orange;
}
blockquote.conversation blockquote blockquote blockquote blockquote blockquote blockquote {
  border-left: 2px solid red;
  color: red;
}

*, *::after, *::before {
  box-sizing: border-box;
}

body > header, body > footer {
  background: #16758f;
  box-shadow: 0 3px 24px 2px rgba(0, 0, 0, 0.35), inset 3px 3px 37px 14px rgba(97, 25, 1, 0.23);
}

::-webkit-scrollbar {
  background: #e07f5e;
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #79301b;
  border-radius: 10px;
}

article h2 {
  margin-bottom: 0;
}

article h2 {
  background: #F9F4F2;
}

main p, main ul, main ol, main dl, main blockquote, main address, main table, main .prototype {
  margin: 1rem 0;
}

/*
article img { margin-right: 1rem 33% 1rem 1rem  }

header h1 { padding: 4rem $article-gutter 0 0 }

h2, h3 { margin-bottom: 0 }
h3+p{margin-top: 0}

h1 {
  background: $background-color
}

main {
  background: $body-color;
  margin: $article-gutter auto
}

section {
  border-bottom: 80px solid $background-color
}
*/
/* overrule for nested articles like on home */
/*
.home h1, .home, article h2 {
    background: $background-color
}
*/
html {
  /* FIXME scrollIntoView does not seem to scroll at all (not only not smooth, now worky) when using this: Chrome 7x somewhere */
  /*  scroll-behavior: smooth */
}

body {
  background: #FFFFFF;
  color: #4B4B4B;
  counter-reset: figure;
  font: 15px/1.5 "Open Sans", Arial, Liberation Sans, DejaVu Sans, sans-serif;
  margin: 0;
  padding: 0;
}

/* sticky footer */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 0;
}

button, .button, .button:link, input[type=submit], em > a, strong > a {
  display: inline-block;
  font-weight: bold;
  margin: 0 0.5rem 0.5rem 0;
  text-align: center;
  text-decoration: none;
}
button:last-child, .button:last-child, .button:link:last-child, input[type=submit]:last-child, em > a:last-child, strong > a:last-child {
  margin-right: 0;
}

.link {
  background: none;
  color: #79301b;
  padding: 0;
}

.button-sm {
  font-size: 13px !important;
  padding: 0.1rem 0.5rem !important;
}

.button-lg {
  letter-spacing: 0.88px;
  width: 280px;
}

.c64screen {
  background: #6c5eb5;
  border-collapse: collapse;
  color: white;
  font: 200% monospace;
  width: auto;
}
.c64screen td {
  height: 2em !important;
  padding: 0.2em;
  text-align: right;
  width: 2em !important;
}
.c64screen tr:nth-child(odd) td:nth-child(odd),
.c64screen tr:nth-child(even) td:nth-child(even) {
  background: #1a0c92;
}
.c64screen tr:nth-child(1n+8),
.c64screen td:nth-child(1n+8) {
  display: none;
}
.c64screen tr:nth-child(1n+23) {
  display: table-row;
}
.c64screen td:nth-child(1n+35) {
  display: table-cell;
}

/* TODO subtle background (every 2th child=child for nested comments */
.comments header {
  font-weight: bold;
  padding: 0 2rem;
}
.comments header a {
  color: black;
  font-weight: bold;
  text-decoration: none;
}
.comments blockquote {
  margin: 0 0 2rem 0;
}
.comments > article {
  margin-left: -1rem;
  margin-right: -1rem;
}
.comments article {
  height: auto;
  padding: 0;
  width: auto;
}
.comments article article {
  margin: 0 0 0 2rem;
}
.comments p {
  margin: 0 0 1rem 0;
}
.comments time {
  color: gray;
  margin-left: 0.5rem;
}

figure {
  margin-bottom: 0;
  margin-left: 0;
  margin-top: 0;
}
figure p {
  padding: 1.5em 0;
}
figure img {
  vertical-align: middle;
}

figcaption {
  color: gray;
  font-size: 0.8em;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
}

.form-group {
  border: 2px solid black;
  display: inline-block;
  margin: 0 auto;
}

form {
  padding: 1rem 0;
}

fieldset {
  background: #F9F4F2;
  border: none;
  margin: 1rem auto 2rem auto;
  padding: 0;
}

legend {
  padding: 1rem 0 2rem 0;
}

.button, input, button, select, textarea {
  border: none;
  color: #79301b;
  cursor: pointer;
  font: 15px/1.5 "Open Sans", Arial, Liberation Sans, DejaVu Sans, sans-serif;
  font-weight: bold;
  /* TODO probably not for selects because you want to make individual items bold */
  padding: 0.5rem 0.75rem;
}

select:not([size]) {
  height: 2.25rem;
}

button, .button {
  color: white;
  padding: 0.5rem 2rem;
}

input, select, textarea {
  background: #e07f5e;
  margin-bottom: 1rem;
}

textarea {
  line-height: 1.5;
  resize: vertical;
  height: 10em;
  width: 90%;
}

.button, button, input[type=button] {
  background: #79301b;
  border-radius: 2px;
}

label {
  color: #666;
  display: block;
  font-size: 12px;
  margin-bottom: 0em;
  margin-top: 1em;
}
label input, label select, label textarea {
  display: block;
}
label input[type=radio], label input[type=checkbox] {
  display: inline-block;
  margin-bottom: 0;
}

input[type=number],
input[type=time] {
  text-align: right;
  width: 9rem;
}

input[type=date] {
  width: 11rem;
}

input[type=search] {
  /* make search input stylable in safari */
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  margin-right: 0;
  /* safari */
}

input[type=search] + buttton {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* TODO merge footer & header? */
body > footer {
  background: #16758f;
  color: white;
  margin-top: 2em;
  padding: 34px 0 4rem 0;
  text-align: center;
}
body > footer div img {
  margin: 1rem 0.5rem 0 0.5rem;
}
body > footer h1 a, body > footer h1 {
  color: white;
}
body > footer a {
  color: white;
}

.viewport {
  height: 600px;
  mask-image: linear-gradient(180deg, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent);
  overflow: hidden;
}

.gallery {
  column-count: 2;
  column-gap: 2rem;
  /* can we do not hard coded figures but every element like p or a ? */
}
.gallery figure {
  /* display: inline-block because or else the figure won't hold
      together in columns (orphans) */
  display: inline-block;
  margin: 1rem 0;
  padding: 1rem;
  width: 100%;
}
.gallery figure.promise {
  background: #16758f;
  font-size: 24px;
  color: white;
}
.gallery figcaption {
  display: none;
  padding-left: 0;
}

@media (min-width: 640px) {
  .gallery {
    column-count: 4;
  }
}
.grid {
  overflow: auto;
  padding: 1rem;
}

[class*=col-] {
  display: inline-block;
  padding-right: 1rem;
}

.col-one-third {
  width: 33.33%;
}

.col-two-third {
  width: 66.66%;
}

.col-one-fourth {
  width: 25%;
}

.col-one-two {
  width: 50%;
}

body > header {
  padding: 67px 0 34px 0;
  /* social buttons height */
  text-align: center;
  z-index: 1;
}
body > header h1 a, body > header h1 {
  color: white;
}
body > header a {
  display: block;
  padding: 1rem;
  margin: auto;
}
body > header img {
  height: auto;
  width: 49%;
}
body > header p {
  /* slogan */
  color: white;
  display: inline-block;
  font-size: 24px;
  text-align: right;
  width: 49%;
}
@media (max-width: 640px) {
  body > header img, body > header p {
    width: 100%;
  }
  body > header p {
    text-align: center;
  }
}

.hint-icon:hover::after,
.hint-icon:focus::after {
  background: #4B4B4B;
  border-radius: 5px;
  color: white;
  content: attr(title);
  display: inline-block;
  left: 2.5em;
  margin-top: 2.5em;
  padding: 1em;
  position: absolute;
  z-index: 1;
  width: 15em;
}

.social_incomplete a {
  background: #79301b;
  border-radius: 50%;
  display: inline-block;
  padding: 0.5rem;
}

iframe {
  border: none;
}

canvas.interactive {
  cursor: pointer;
}

img {
  border: none;
}

article > img, section > img {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* TODO svg responsive, but needs addition to the svgs viewport and preserveaspectratio */
.responsive, article > img, article > p > img, aside > img, article figure img {
  height: auto;
  width: 100%;
}

.circled {
  border-radius: 50%;
}

/* marginarticlepaddingborder.css is leading */
* {
  box-sizing: border-box;
}

h1, h2 {
  color: #16758f;
}

form h3, legend {
  font-size: 1rem;
  font-weight: bold;
}

.body {
  background: #FFFFFF;
  box-shadow: 0 0 5px #aaa;
  height: 300px;
  display: inline-block;
  margin: 1rem;
  overflow-y: scroll;
  width: 300px;
  font: 10px/1.5 sans-serif;
  padding: 1rem;
}

ol, ul {
  padding-left: 0;
}

article, section, form, main > h1, body > nav > ul, body > header > a, .prevnext {
  clear: both;
  overflow: hidden;
  width: 90%;
}

@media (max-width: 640px) {
  article, section, form, main > h1, body > nav > ul, body > header > a, .prevnext {
    width: 100%;
  }
}
@media (min-width: 1300px) {
  article, section, main > h1, body > nav > ul, body > header > a, .prevnext {
    width: 1280px;
  }
}
article > p {
  padding-right: 33%;
}

/* good enough for now, but 
   ideal would be to use html, body for this so we can have styled
   pages without any markup like main, article etc)

   Also take better advantage of cascading by defining markupless entirely,
   then combinations of main and article (but preferablly without styling
   main for very old browsers)

   Notice that IE9 and less we have no styling at all (which is better
   then fushizzled styling) because it doesn't recognize article etc tags
*/
.home h1, main h2, article h1 {
  margin-bottom: 0;
}

article > p:first-child, section > p:first-child {
  padding-top: 1rem;
  padding-top: 1rem;
}

article, section, body > nav > ul, .prevnext {
  margin: 0 auto;
}

article, section {
  background: #F9F4F2;
  padding: 0rem 1rem 0.05px 1rem;
}

table, pre {
  background: #F9F4F2;
}

section h1, section h2, article h1, article h2 {
  margin-left: -1rem !important;
  margin-right: -1rem !important;
  padding-left: 1rem;
}

h1, h2 {
  padding-right: 3rem;
  padding-right: 8rem;
  margin-bottom: 0;
  margin-top: 0;
}

h1 {
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

article h1 {
  padding: 95px 3rem 1rem 0rem;
  padding: 95px 0 0 1rem;
  /*  margin-left: 0;
    margin-right: 0 */
}

header {
  padding: 0 1rem;
}

/* outstanding elements that are self reponsible for their padding and margins */
/* FIXME aside image not responsive for now */
article > figure, aside, section > a, section > figure,
article header, article h1, section h1, form h1, .viewport {
  margin-left: -1rem;
  margin-right: -1rem;
}

article > img {
  height: auto;
}

object {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

article h1, section h1, section h2 {
  background: #FFFFFF;
}

ul, ol {
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding-left: 1.5em;
}

ul ul, ol ol, ul ol, ol ul {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 2rem;
}

ul {
  list-style-type: square;
}
ul ul {
  list-style-type: disc;
}

.flat {
  list-style-type: none;
  padding-left: 0;
}

.breadcrumbs {
  margin: 1rem 0;
  padding-left: 0;
}

.breadcrumbs li + li:before {
  color: #aaa;
  content: " › ";
}

section .breadcrumbs li:last-child a {
  color: gray;
}

.horizontal li {
  display: inline-block;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
  margin-bottom: 1em;
}

.horizontal dt {
  clear: left;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 10em;
}
.horizontal dd {
  margin-bottom: 0;
  margin-left: 11em;
}

video {
  background: gray;
  display: inline-block;
  /* TODO why */
  width: 100%;
}

audio, video {
  display: block;
  margin: 1rem 1rem 1rem 0;
}

td audio {
  height: 22px;
  /* line-height like */
  margin-top: 0;
}

.media-box {
  display: inline-block;
}

/* modal dialogs */
/* TODO may be target body instead (but an element can only have 1 id!)
   so we can hide scrollbars etc same for .navbar:target

   body:target {
    overflow: hidden
  }

  body:target .search {
        
  }

*/
.modal {
  display: none;
}

.modal:target {
  background: black;
  background: rgba(0, 0, 0, 0.75);
  display: table-cell;
  height: 100%;
  left: 0;
  padding: 10em;
  position: fixed;
  overflow: auto;
  top: 0;
  vertical-align: middle;
  width: 100%;
}
.modal:target .close {
  color: white;
}

/* navigation */
/*

TODO mobile:

 full width / height (position absolute needed)
 back instead of close
 folded out: searchbar full width?
 search icon (always visible)

TODO general

 real priorities (prio-1, prio-2) that hide/show on breakpoints?
 (for example: you want to show contact always)
 could also be solved with nested lists (where children have less priority)
 
*/
body > nav {
  background: #31aed8;
  z-index: 2;
}

nav {
  font-size: 15px;
  letter-spacing: 0.44px;
  line-height: 3rem;
  /* transition: background-color 1s; for desktop <-> mobile transition */
  /* if we want soft clip: white-space: nowrap */
  z-index: 1;
}
nav > ul {
  list-style: none;
  overflow: hidden;
  /* priority menu, hide items when they do not fit */
  margin: 0;
  padding-left: 0;
}
nav ul > li {
  display: inline-block;
  padding: 0 0.5rem;
  margin: 0;
}
nav ul > li > a {
  display: block;
  padding: 0 0.5rem;
}
nav a {
  color: white;
  text-decoration: none;
  transition: background-color 0.5s;
}
nav .active a, nav a:hover, nav a:focus {
  background: #16758f;
  text-decoration: none;
  transition: background-color 0.5s;
}

/* TODO quick hack for kiki sub menus, needs fixing */
nav ul ul {
  background: #79301b;
  display: none;
  left: 0;
  margin: 0;
  position: absolute;
  top: 100%;
}

ul li:hover ul, ul li:focus ul {
  display: block;
}

/* end quick hack for sub menus */
.prevnext {
  overflow: hidden;
  padding: 2rem 1rem 1rem 1rem;
}

a[rel=prev] {
  float: left;
}

a[rel=next] {
  float: right;
  text-align: right;
}

pre, code, kbd, var {
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}

p kbd {
  white-space: nowrap;
}

code, var {
  color: #05d;
}

kbd {
  background: #333;
  border-radius: 3px;
  color: white;
  padding: 0 0.4em;
}

samp {
  color: #282;
}

figure > pre {
  padding: 0 1rem;
}

pre {
  counter-reset: linenumber;
  /* left padding = 4.5em - code::before width  */
  overflow: auto;
  /* show all white space, even new lines on end of file */
  margin-bottom: 1rem;
  margin-top: 1rem;
  tab-size: 4;
  word-break: break-word;
  /* TODO or break-all */
  white-space: pre-wrap;
  /* TODO or pre-line */
}
pre[class]:before {
  color: #aaa;
  content: attr(class);
  float: right;
  font-weight: bold;
}
pre > code:not(:only-child)::before {
  color: #bbb;
  content: counter(linenumber) ". ";
  counter-increment: linenumber;
  display: inline-block;
  text-align: right;
  width: 3rem;
}
pre > code:not(:only-child) mark {
  background: none;
  color: lightgray;
}
pre > code:not(:only-child) mark::before {
  content: "^M";
}
pre > samp::before {
  color: #aaa;
  content: "$ ";
}
pre.hex, pre.dump {
  letter-spacing: -1.5px;
  line-height: 1;
  overflow: visible;
}

.CSS {
  tab-size: 2;
}

.HTML {
  tab-size: 1;
}

/* highlight */
.ident {
  color: #04a;
}

.keyword {
  color: #4B4B4B;
  font-weight: bold;
}

.comment {
  color: #282;
}

.string, .char, .int, .float {
  color: #a00;
}

@media screen {
  .print-only {
    display: none;
  }
}
@media print {
  nav, body > header, body > footer, .comments, button, .button, form, .prevnext {
    display: none !important;
  }

  body {
    border-top: 0.25cm solid #16758f;
    font-size: 75%;
    padding: 1cm;
  }

  body, header, aside, footer, pre, table, caption, tr, th, td {
    background: none !important;
    box-shadow: none !important;
    color: #4B4B4B !important;
  }

  thead {
    border-bottom: 1px solid #79301b;
  }

  .tags {
    visibility: visible;
  }

  header {
    text-align: center;
  }

  h1 {
    margin-top: 5cm;
  }

  h1, h2 {
    page-break-before: always;
    orphans: 4;
    widows: 5;
  }

  h1, h2, h3, h4 {
    background: none !important;
    padding-top: 0.5em !important;
    page-break-after: avoid;
    orphans: 4;
    widows: 5;
  }

  aside {
    page-break-after: always;
  }

  p, table {
    page-break-inside: avoid;
    orphans: 4;
    widows: 5;
  }

  a, a:visited, a:hover, a:focus, a:active {
    color: #4B4B4B;
    text-decoration: none;
  }

  p a[href^=http]::after {
    content: " (" attr(href) ")";
  }

  abbr:nth-first-of-type {
    /* do magic to show description */
  }

  .screen-only {
    display: none;
  }
}
/* prototype look */
.prototype {
  background: #F9F4F2 !important;
  border: 2px solid #4B4B4B !important;
  padding: 2rem;
}
.prototype * {
  background: #F9F4F2 !important;
  box-shadow: none !important;
  color: #4B4B4B !important;
}
.prototype > * {
  margin: 1rem 0;
}
.prototype h1, .prototype h3 {
  padding: 1rem;
}
.prototype table {
  border-collapse: collapse;
}
.prototype th a {
  background: #4B4B4B !important;
  box-shadow: none !important;
  color: white !important;
}
.prototype ul, .prototype ol {
  list-style-position: inside;
}
.prototype a {
  color: #04f !important;
  text-decoration: underline;
}
.prototype button, .prototype input[type=button], .prototype input[type=submit] {
  background: #4B4B4B !important;
  color: white !important;
}
.prototype figcaption {
  border-bottom: 1px solid #4B4B4B !important;
}
.prototype img {
  filter: grayscale(100%) contrast(200%);
}
.prototype input[type=number], .prototype input[type=time] .select {
  width: 8em;
}
.prototype input[type=date] {
  width: 11em;
}
.prototype th {
  background-color: #4B4B4B !important;
  color: white !important;
}
.prototype td, .prototype th, .prototype button, .prototype input, .prototype select, .prototype textarea,
.prototype input, .prototype figure, .prototype .button {
  border: 2px solid #4B4B4B !important;
  max-width: initial !important;
}
.prototype tfoot tr {
  border: none !important;
  font-weight: normal;
}
.prototype nav {
  border-bottom: 3px solid #4B4B4B !important;
}

/* TODO media query landscape -> hextris (or general canvas games) -> portrait: 80vh, landscape: 90vw (blog!) */
.img-half {
  width: 50%;
}

@media (min-width: 130000px) {
  nav.sticky {
    position: sticky;
    width: 100%;
  }

  body > header > *, main, details, nav > ul {
    /* this determines the width of the outstanding item, should be responsive,
            may be use vw or vh? */
    display: block;
    width: 1234px;
  }

  nav.fixed-top {
    position: absolute;
    top: 0;
  }

  nav.light {
    background: #31aed8;
  }

  body > header {
    /*    margin-top: 3rem;  main nav bar height */
  }
  body > header a {
    position: relative;
  }
}
.transparent {
  /* TODO small data svg */
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.2) 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1) 0), white;
  background-position: 0 0, 80px 80px;
  background-size: 32px 32px;
}

table {
  background: #f2f2f2;
  border-collapse: collapse;
  caption-side: bottom;
  font-size: small;
  margin-top: 1rem;
}

caption {
  color: gray;
}

thead th {
  /* TODO bottom border only (this saves padding from right and left) +  fade bottom (css image-mask) */
  position: sticky;
  top: 0;
}

table, th, td {
  border: 0;
}

tr {
  border-top: 1px solid white;
}

th {
  background: #79301b;
  color: white;
}

th a {
  color: white;
}

caption, th, td {
  font-weight: normal;
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

th:last-child:not(:only-child),
td:last-child:not(:only-child) {
  padding-right: 0.5rem;
}

tfoot td {
  background: none;
}

.matrix td {
  height: 2em !important;
  padding: 0.2em;
  text-align: right;
  width: 2em !important;
}

.matrix tr {
  border: none;
}

@media (max-width: 640px) {
  table {
    /* card */
    /* card row */
  }
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin: 1rem 0;
    overflow: hidden;
  }
  table tbody td, table tbody .date, table tbody .number {
    display: block;
    overflow: hidden;
    text-align: left !important;
    width: 100%;
  }
  table tbody td[data-label]::before, table tbody .date[data-label]::before, table tbody .number[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    width: 50%;
  }

  th:first-child, td:first-child {
    background: #79301b;
    color: white;
    overflow: auto;
    text-overflow: none;
    white-space: nowrap;
    width: 100%;
  }

  th:first-child a, td:first-child a {
    color: white;
  }
}
@media (max-width: 400px) {
  td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 13px;
    overflow: hidden;
  }
}
.tabs {
  border-bottom: 1px solid lightgray;
  padding-left: 0;
}

.tabs li {
  display: inline-block;
  margin-right: 1.5rem;
  padding: 0 1rem 0 0;
}

.tabs a {
  display: inline-block;
  padding: 0.75rem 0;
}

.tabs li.current {
  border-bottom: 4px solid #79301b;
}

a[rel=category] {
  font-weight: bold;
  text-transform: lowercase;
}

.tag-cloud {
  overflow: hidden;
}

.tags a, a[rel=tag] {
  padding: 0 0.15rem;
  text-transform: lowercase;
}
.tags a:before, a[rel=tag]:before {
  color: #aaa;
  content: "#";
}

/* TODO normalized logarithmic or square scale */
.weight-1 {
  font-size: 1em;
  color: gray;
  line-height: 2;
}

.weight-2 {
  font-size: 1.2em;
  color: #4B4B4B;
  line-height: 2;
}

.weight-3 {
  font-size: 1.4em;
  color: #4B4B4B;
  line-height: 2;
}

.weight-4 {
  font-size: 1.6em;
  color: #4B4B4B;
  line-height: 2;
}

.weight-5 {
  font-size: 1.8em;
}

.weight-6 {
  font-size: 2em;
}

.weight-7 {
  font-size: 2.2em;
}

.weight-9 {
  font-size: 2.4em;
  line-height: 0.5;
}

.weight-10 {
  font-size: 2.6em;
  line-height: 0.5;
}

.weight-11 {
  font-size: 2.8em;
  line-height: 0.5;
}

.weight-12 {
  font-size: 3em;
  line-height: 0.5;
}

.weight-13 {
  font-size: 3.2em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-14 {
  font-size: 3.4em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-16 {
  font-size: 4em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-17 {
  font-size: 4.3em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-18 {
  font-size: 4.6em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-19 {
  font-size: 4.9em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-20 {
  font-size: 5.2em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-21 {
  font-size: 5.5em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-22 {
  font-size: 5.8em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-23 {
  font-size: 6.2em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-24 {
  font-size: 6.5em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-25 {
  font-size: 6.8em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-26 {
  font-size: 7.1em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-27 {
  font-size: 7.4em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.weight-28 {
  font-size: 7.7em;
  color: #16758f;
  line-height: 0.5;
  line-height: 0.5;
}

.tree {
  line-height: 2;
}

.tree, .tree ul {
  list-style: none;
}

.tree li {
  position: relative;
}

.tree, .tree ul {
  overflow: hidden;
  padding-left: 1.5em;
}

.tree li::before {
  border: solid lightgray;
  border-width: 0 0 1px 2px;
  content: "";
  height: 1000em;
  left: -1.5em;
  position: absolute;
  top: -999em;
  width: 1em;
}

/* typgraphy */
article h1, section h1, section h2 {
  background: #FFFFFF;
  color: #16758f;
}

h1 {
  font-size: 64px;
  letter-spacing: 0.17px;
  line-height: 92px;
  padding-top: 95px;
  word-break: break-word;
}

body > header h1 {
  padding-top: 0;
}

h2, .home h1, .h2 {
  font-size: 36px;
  letter-spacing: 0.18px;
  line-height: 52px;
  position: relative;
  /*  padding-bottom: 24px; */
  padding-top: 64px;
}

h1, h2, h1 > a, h2 > a {
  color: #16758f;
}

h3, .h3 {
  color: #4B4B4B;
  font-size: 15px;
  margin-top: 2em;
}

h3 + p, h4 + p {
  margin-top: 0;
}

h3, h4 {
  margin-bottom: 0;
}

h3, h3 a {
  color: #4B4B4B;
}

h4 {
  color: #4B4B4B;
  font-size: 15px;
}

/*
    TODO maybe

    some things are not suitable for image rich articles with small paragraphs
    
p:not(:first-of-type) {
  text-indent: 2em;  
}

p:first-of-type::first-letter {
  font-size: 4em;
  padding: 0 .1em
}

p:last-of-type {
  color: blue
}
*/
.dimmed, .notes {
  color: dimgray;
  font-size: 0.77em;
}

address {
  font-style: normal;
  white-space: pre;
}
address:first-line {
  font-weight: bold;
}

del {
  color: dimgray;
  text-decoration-color: #16758f;
}

ins, mark {
  background: #dfdf20;
  text-decoration: none;
}

time {
  color: #888;
}

h1 time, h2 time, h3 time, h4 time {
  padding-right: 1rem;
}

hr {
  border: none;
  border-top: 1px solid gray;
}

::selection {
  background: #79301b;
  color: white;
}

::-moz-selection {
  background: #79301b;
  color: white;
}

.legalese {
  font-size: 0.8em;
  margin: 0;
  padding: 0;
  text-align: justify;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.text-left {
  text-align: left !important;
}

.text-center, .bool {
  text-align: center !important;
}

.text-right, .number, .date {
  text-align: right !important;
}

.number, .date {
  white-space: nowrap;
}

.text-info {
  color: blue;
}

.text-ok {
  color: green;
}

.text-warning {
  color: orange;
}

.text-danger {
  color: red;
}

[class^=bg-] {
  padding: 0.5em 1.5em;
}

.bg-info {
  background: blue;
  color: white;
}

.bg-ok {
  background: green;
  color: white;
}

.bg-warning {
  background: orange;
  color: white;
}

.bg-danger {
  background: red;
  color: white;
}

.bordered-1 {
  border-width: 1px;
}

.bordered-2 {
  border-width: 2px;
}

.bordered-4 {
  border-width: 4px;
}

.dashed {
  border-style: dashed;
}

.hide {
  display: none;
}

.secondary-color {
  color: #79301b;
}

.padded {
  padding: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

/* TODO blog vertical rhythm checker */
#notelines:target {
  background: linear-gradient(#888 0, #fff 1px) 0 0;
  background-size: 100% 1.75rem;
}
#notelines:target body {
  background: none;
}

/*
  TODO blog: Poor man's vertical rhythm. Good enough for a developer :-)

  in fact i learned that it should be done with the timmermans eye instead!

  but for quick mockups or prototypes it suffice

*/
/* compensate anchor jumps for the fixed navbar */
a[id] {
  margin-top: -5rem;
  outline: none;
  padding-top: 5rem;
}

img[alt="www.festivalboulevard.nl"] {
  background: #ef3340;
}