/* Font properties: 
 *
 * em 1000
 *
 * g-bottom: 0
 * baseline = x-bottom = 286
 * x-height 428
 * x-top = 714
 * f-top = 1000
 * number height = 588
 * number top = 874 
 * Win Ascent 857
 * Win Descent 427
 * lineheight: 1286 (3 x de x-height)
 * - lineheight is 3 x de x-height, dus kan dezelfde liniatuur gebruiken als schuinschrift
 * - een zone witruimte tussen de ascenders en de descenders
 * - alles in drieën: 
 *   - deel de ruimte tussen grondlijnen in 3, en gebruikt 1/3 deel voor de rompen
 *   - deel de ruimte tussen de romplijn en de bovenliggende grondlijn in 3. gebruikt 1/3 deel voor de bovenlussen, 1/3 deel voor de onderlussen, en laat 1/3 deel leeg
 * - capitalen even hoog als f
 * - capitalen met accenten zijn evenhoog als de cijfers. Accenten kunnen hoger zijn dan f.
 * stroke width: 40
 *
 * De x-height is kleiner (in em) dan bij de meeste fonts. Consequentie daarvan is dat je een grote font-size moet instellen.
 * Bijvoorbeeld 18px waar je normaal gesproken 16px zou doen.
 *
 *
 * Loblosch = lopend blokschrift
 * kursive Druckschrift
 * italic (semi-cursive, so unconnected) script with no slant
 */ 

@font-face {
  font-family: "Loblosch";
  src: url("/fonts/loblosch/loblosch.ttf?v=20250209") format("truetype");
}
@font-face {
  font-family: "Loblosch-Startpunten";
  src: url("/fonts/loblosch/loblosch-startpunten.ttf?v=20250209") format("truetype");
}
@font-face {
  font-family: "Loblosch";
  src: url("/fonts/loblosch/loblosch-oblique.ttf?v=20250209") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Loblosch-Startpunten";
  src: url("/fonts/loblosch/loblosch-oblique-startpunten.ttf?v=20250209") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Loblosch";
  src: url("/fonts/loblosch/loblosch-oblique.ttf?v=20250209") format("truetype");
  font-style: oblique;
}
@font-face {
  font-family: "Loblosch-Startpunten";
  src: url("/fonts/loblosch/loblosch-oblique-startpunten.ttf?v=20250209") format("truetype");
  font-style: oblique;
}



@font-face {
  font-family: "Loblosch-Minimal";
  src: url("/fonts/loblosch/loblosch-minimal.ttf?v=20250209") format("truetype");
}
@font-face {
  font-family: "Loblosch-Minimal-Startpunten";
  src: url("/fonts/loblosch/loblosch-minimal-startpunten.ttf?v=20250209") format("truetype");
}
@font-face {
  font-family: "Loblosch-Minimal";
  src: url("/fonts/loblosch/loblosch-minimal-oblique.ttf?v=20250209") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Loblosch-Minimal-Startpunten";
  src: url("/fonts/loblosch/loblosch-minimal-oblique-startpunten.ttf?v=20250209") format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Loblosch-Minimal";
  src: url("/fonts/loblosch/loblosch-minimal-oblique.ttf?v=20250209") format("truetype");
  font-style: oblique;
}
@font-face {
  font-family: "Loblosch-Minimal-Startpunten";
  src: url("/fonts/loblosch/loblosch-minimal-oblique-startpunten.ttf?v=20250209") format("truetype");
  font-style: oblique;
}

 
.blokschrift {
  font-family: "Loblosch";
  line-height: normal; /* Don't inherit unsuitable line-height */
}
.geenafhalen .blokschrift, .blokschrift.geenafhalen {
  font-family: "Loblosch-Minimal";
}
.lobloschoblique .blokschrift, .lobloschoblique.blokschrift {
  font-style: oblique; 
}
.lobloschoblique .lobloschrechtop .blokschrift, .lobloschoblique .lobloschrechtop.blokschrift {
  font-style: normal; 
}

.blokschrift.startpunten-font, .blokschrift .startpunten-font, .startpunten-font .blokschrift,
.line.startpunten-font, .line .startpunten-font, .startpunten-font .line,
.blokschrift-letter.startpunten-font, .blokschrift-letter .startpunten-font, .startpunten-font .blokschrift-letter,
.hokjes.startpunten-font, .hokjes .startpunten-font, .startpunten-font .hokjes {
  font-family: "Loblosch-Startpunten";
}
.geenafhalen .blokschrift.startpunten-font, .geenafhalen .blokschrift .startpunten-font, .geenafhalen .startpunten-font .blokschrift,
.geenafhalen.blokschrift.startpunten-font, .geenafhalen.blokschrift .startpunten-font, .startpunten-font .geenafhalen.blokschrift,
.geenafhalen .line.startpunten-font, .geenafhalen .line .startpunten-font, .geenafhalen .startpunten-font .line,
.geenafhalen.line.startpunten-font, .geenafhalen.line .startpunten-font, .startpunten-font .geenafhalen.line,
.geenafhalen .blokschrift-letter.startpunten-font, .geenafhalen .blokschrift-letter .startpunten-font, .geenafhalen .startpunten-font .blokschrift-letter,
.geenafhalen.blokschrift-letter.startpunten-font, .geenafhalen.blokschrift-letter .startpunten-font, .startpunten-font .geenafhalen.blokschrift-letter,
.geenafhalen .hokjes.startpunten-font, .geenafhalen .hokjes .startpunten-font, .geenafhalen .startpunten-font .hokjes,
.geenafhalen.hokjes.startpunten-font, .geenafhalen.hokjes .startpunten-font, .startpunten-font .geenafhalen.hokjes {
  font-family: "Loblosch-Minimal-Startpunten";
}

.line {
  font-family: "Loblosch";
  line-height: normal; /* Overrule setting from masterstyle; note that we use padding-top, not line-height, to fit the text to the desired line-height */
  display: block;
  position: relative;
  text-overflow: clip;
  margin-bottom: .25em;
  white-space: pre; /* Double whitespaces count as double and do not collapse */
}
.geenafhalen .line, .line.geenafhalen {
  font-family: "Loblosch-Minimal";
}
.lobloschoblique .line, .lobloschoblique.line {
  font-style: oblique; 
}
.line-container {
  height: 1.2857em; /* Needed because it only contains absolutely positioned elements */
}

/* Adjustable space between lines. Note that there's always a bit of extra space as soon as 'nospacebetween' is disabled,
   and this extra space is dependent on font size */
.ld1 .line, .ld1.line, .ld1 .rawline, .ld1.rawline { margin-bottom: .14em; }
.ld2 .line, .ld2.line, .ld2 .rawline, .ld2.rawline { margin-bottom: .29em; }
.ld3 .line, .ld3.line, .ld3 .rawline, .ld3.rawline { margin-bottom: .43em; }
.ld4 .line, .ld4.line, .ld4 .rawline, .ld4.rawline { margin-bottom: .57em; }
.ld5 .line, .ld5.line, .ld5 .rawline, .ld5.rawline { margin-bottom: .71em; }
.ld6 .line, .ld6.line, .ld6 .rawline, .ld6.rawline { margin-bottom: .86em; }
.ld7 .line, .ld7.line, .ld7 .rawline, .ld7.rawline { margin-bottom: 1em; }
.ld8 .line, .ld8.line, .ld8 .rawline, .ld8.rawline { margin-bottom: 1.14em; }
.ld9 .line, .ld9.line, .ld9 .rawline, .ld9.rawline { margin-bottom: 1.29em; }
.ld10 .line, .ld10.line, .ld10 .rawline, .ld10.rawline { margin-bottom: 1.43em; }
.ld11 .line, .ld11.line, .ld11 .rawline, .ld11.rawline { margin-bottom: 1.57em; }
.ld12 .line, .ld12.line, .ld12 .rawline, .ld12.rawline { margin-bottom: 1.71em; }
.ld13 .line, .ld13.line, .ld13 .rawline, .ld13.rawline { margin-bottom: 1.86em; }
.ld14 .line, .ld14.line, .ld14 .rawline, .ld14.rawline { margin-bottom: 2em; }
.ld15 .line, .ld15.line, .ld15 .rawline, .ld15.rawline { margin-bottom: 2.14em; }
.ld16 .line, .ld16.line, .ld16 .rawline, .ld16.rawline { margin-bottom: 2.29em; }
.ld17 .line, .ld17.line, .ld17 .rawline, .ld17.rawline { margin-bottom: 2.43em; }
.ld18 .line, .ld18.line, .ld18 .rawline, .ld18.rawline { margin-bottom: 2.57em; }
.ld19 .line, .ld19.line, .ld19 .rawline, .ld19.rawline { margin-bottom: 2.71em; }
.ld20 .line, .ld20.line, .ld20 .rawline, .ld20.rawline { margin-bottom: 2.81em; }

.ld1 .line:last-child, .ld1.line:last-child, .ld1 .rawline:last-child, .ld1.rawline:last-child,
.ld2 .line:last-child, .ld2.line:last-child, .ld2 .rawline:last-child, .ld2.rawline:last-child,
.ld3 .line:last-child, .ld3.line:last-child, .ld3 .rawline:last-child, .ld3.rawline:last-child,
.ld4 .line:last-child, .ld4.line:last-child, .ld4 .rawline:last-child, .ld4.rawline:last-child,
.ld5 .line:last-child, .ld5.line:last-child, .ld5 .rawline:last-child, .ld5.rawline:last-child,
.ld6 .line:last-child, .ld6.line:last-child, .ld6 .rawline:last-child, .ld6.rawline:last-child,
.ld7 .line:last-child, .ld7.line:last-child, .ld7 .rawline:last-child, .ld7.rawline:last-child,
.ld8 .line:last-child, .ld8.line:last-child, .ld8 .rawline:last-child, .ld8.rawline:last-child,
.ld9 .line:last-child, .ld9.line:last-child, .ld9 .rawline:last-child, .ld9.rawline:last-child,
.ld10 .line:last-child, .ld10.line:last-child, .ld10 .rawline:last-child, .ld10.rawline:last-child,
.ld11 .line:last-child, .ld11.line:last-child, .ld11 .rawline:last-child, .ld11.rawline:last-child,
.ld12 .line:last-child, .ld12.line:last-child, .ld12 .rawline:last-child, .ld12.rawline:last-child,
.ld13 .line:last-child, .ld13.line:last-child, .ld13 .rawline:last-child, .ld13.rawline:last-child,
.ld14 .line:last-child, .ld14.line:last-child, .ld14 .rawline:last-child, .ld14.rawline:last-child,
.ld15 .line:last-child, .ld15.line:last-child, .ld15 .rawline:last-child, .ld15.rawline:last-child,
.ld16 .line:last-child, .ld16.line:last-child, .ld16 .rawline:last-child, .ld16.rawline:last-child,
.ld17 .line:last-child, .ld17.line:last-child, .ld17 .rawline:last-child, .ld17.rawline:last-child,
.ld18 .line:last-child, .ld18.line:last-child, .ld18 .rawline:last-child, .ld18.rawline:last-child,
.ld19 .line:last-child, .ld19.line:last-child, .ld19 .rawline:last-child, .ld19.rawline:last-child,
.ld20 .line:last-child, .ld20.line:last-child, .ld20 .rawline:last-child, .ld20.rawline:last-child
 {
  margin-bottom: 0;
}

/* Adjuste space between sets of lines. Since this uses a different margin, this stacks on top of ld space */
.ldi1 .line.firstrepeat, .ldi1.line.firstrepeat, .ldi1 .rawline.firstrepeat, .ldi1.rawline.firstrepeat { margin-top: .14em; }
.ldi2 .line.firstrepeat, .ldi2.line.firstrepeat, .ldi2 .rawline.firstrepeat, .ldi2.rawline.firstrepeat { margin-top: .29em; }
.ldi3 .line.firstrepeat, .ldi3.line.firstrepeat, .ldi3 .rawline.firstrepeat, .ldi3.rawline.firstrepeat { margin-top: .43em; }
.ldi4 .line.firstrepeat, .ldi4.line.firstrepeat, .ldi4 .rawline.firstrepeat, .ldi4.rawline.firstrepeat { margin-top: .57em; }
.ldi5 .line.firstrepeat, .ldi5.line.firstrepeat, .ldi5 .rawline.firstrepeat, .ldi5.rawline.firstrepeat { margin-top: .71em; }
.ldi6 .line.firstrepeat, .ldi6.line.firstrepeat, .ldi6 .rawline.firstrepeat, .ldi6.rawline.firstrepeat { margin-top: .86em; }
.ldi7 .line.firstrepeat, .ldi7.line.firstrepeat, .ldi7 .rawline.firstrepeat, .ldi7.rawline.firstrepeat { margin-top: 1em; }
.ldi8 .line.firstrepeat, .ldi8.line.firstrepeat, .ldi8 .rawline.firstrepeat, .ldi8.rawline.firstrepeat { margin-top: 1.14em; }
.ldi9 .line.firstrepeat, .ldi9.line.firstrepeat, .ldi9 .rawline.firstrepeat, .ldi9.rawline.firstrepeat { margin-top: 1.29em; }
.ldi10 .line.firstrepeat, .ldi10.line.firstrepeat, .ldi10 .rawline.firstrepeat, .ldi10.rawline.firstrepeat { margin-top: 1.43em; }
.ldi11 .line.firstrepeat, .ldi11.line.firstrepeat, .ldi11 .rawline.firstrepeat, .ldi11.rawline.firstrepeat { margin-top: 1.57em; }
.ldi12 .line.firstrepeat, .ldi12.line.firstrepeat, .ldi12 .rawline.firstrepeat, .ldi12.rawline.firstrepeat { margin-top: 1.71em; }
.ldi13 .line.firstrepeat, .ldi13.line.firstrepeat, .ldi13 .rawline.firstrepeat, .ldi13.rawline.firstrepeat { margin-top: 1.86em; }
.ldi14 .line.firstrepeat, .ldi14.line.firstrepeat, .ldi14 .rawline.firstrepeat, .ldi14.rawline.firstrepeat { margin-top: 2em; }
.ldi15 .line.firstrepeat, .ldi15.line.firstrepeat, .ldi15 .rawline.firstrepeat, .ldi15.rawline.firstrepeat { margin-top: 2.14em; }
.ldi16 .line.firstrepeat, .ldi16.line.firstrepeat, .ldi16 .rawline.firstrepeat, .ldi16.rawline.firstrepeat { margin-top: 2.29em; }
.ldi17 .line.firstrepeat, .ldi17.line.firstrepeat, .ldi17 .rawline.firstrepeat, .ldi17.rawline.firstrepeat { margin-top: 2.43em; }
.ldi18 .line.firstrepeat, .ldi18.line.firstrepeat, .ldi18 .rawline.firstrepeat, .ldi18.rawline.firstrepeat { margin-top: 2.57em; }
.ldi19 .line.firstrepeat, .ldi19.line.firstrepeat, .ldi19 .rawline.firstrepeat, .ldi19.rawline.firstrepeat { margin-top: 2.71em; }
.ldi20 .line.firstrepeat, .ldi20.line.firstrepeat, .ldi20 .rawline.firstrepeat, .ldi20.rawline.firstrepeat { margin-top: 2.86em; }

.ldi1 .line.firstrepeat:first-child, .ldi1.line.firstrepeat:first-child, .ldi1 .rawline.firstrepeat:first-child, .ldi1.rawline.firstrepeat:first-child,
.ldi2 .line.firstrepeat:first-child, .ldi2.line.firstrepeat:first-child, .ldi2 .rawline.firstrepeat:first-child, .ldi2.rawline.firstrepeat:first-child,
.ldi3 .line.firstrepeat:first-child, .ldi3.line.firstrepeat:first-child, .ldi3 .rawline.firstrepeat:first-child, .ldi3.rawline.firstrepeat:first-child,
.ldi4 .line.firstrepeat:first-child, .ldi4.line.firstrepeat:first-child, .ldi4 .rawline.firstrepeat:first-child, .ldi4.rawline.firstrepeat:first-child,
.ldi5 .line.firstrepeat:first-child, .ldi5.line.firstrepeat:first-child, .ldi5 .rawline.firstrepeat:first-child, .ldi5.rawline.firstrepeat:first-child,
.ldi6 .line.firstrepeat:first-child, .ldi6.line.firstrepeat:first-child, .ldi6 .rawline.firstrepeat:first-child, .ldi6.rawline.firstrepeat:first-child,
.ldi7 .line.firstrepeat:first-child, .ldi7.line.firstrepeat:first-child, .ldi7 .rawline.firstrepeat:first-child, .ldi7.rawline.firstrepeat:first-child,
.ldi8 .line.firstrepeat:first-child, .ldi8.line.firstrepeat:first-child, .ldi8 .rawline.firstrepeat:first-child, .ldi8.rawline.firstrepeat:first-child,
.ldi9 .line.firstrepeat:first-child, .ldi9.line.firstrepeat:first-child, .ldi9 .rawline.firstrepeat:first-child, .ldi9.rawline.firstrepeat:first-child,
.ldi10 .line.firstrepeat:first-child, .ldi10.line.firstrepeat:first-child, .ldi10 .rawline.firstrepeat:first-child, .ldi10.rawline.firstrepeat:first-child,
.ldi11 .line.firstrepeat:first-child, .ldi11.line.firstrepeat:first-child, .ldi11 .rawline.firstrepeat:first-child, .ldi11.rawline.firstrepeat:first-child,
.ldi12 .line.firstrepeat:first-child, .ldi12.line.firstrepeat:first-child, .ldi12 .rawline.firstrepeat:first-child, .ldi12.rawline.firstrepeat:first-child,
.ldi13 .line.firstrepeat:first-child, .ldi13.line.firstrepeat:first-child, .ldi13 .rawline.firstrepeat:first-child, .ldi13.rawline.firstrepeat:first-child,
.ldi14 .line.firstrepeat:first-child, .ldi14.line.firstrepeat:first-child, .ldi14 .rawline.firstrepeat:first-child, .ldi14.rawline.firstrepeat:first-child,
.ldi15 .line.firstrepeat:first-child, .ldi15.line.firstrepeat:first-child, .ldi15 .rawline.firstrepeat:first-child, .ldi15.rawline.firstrepeat:first-child,
.ldi16 .line.firstrepeat:first-child, .ldi16.line.firstrepeat:first-child, .ldi16 .rawline.firstrepeat:first-child, .ldi16.rawline.firstrepeat:first-child,
.ldi17 .line.firstrepeat:first-child, .ldi17.line.firstrepeat:first-child, .ldi17 .rawline.firstrepeat:first-child, .ldi17.rawline.firstrepeat:first-child,
.ldi18 .line.firstrepeat:first-child, .ldi18.line.firstrepeat:first-child, .ldi18 .rawline.firstrepeat:first-child, .ldi18.rawline.firstrepeat:first-child,
.ldi19 .line.firstrepeat:first-child, .ldi19.line.firstrepeat:first-child, .ldi19 .rawline.firstrepeat:first-child, .ldi19.rawline.firstrepeat:first-child,
.ldi20 .line.firstrepeat:first-child, .ldi20.line.firstrepeat:first-child, .ldi20 .rawline.firstrepeat:first-child, .ldi20.rawline.firstrepeat:first-child
 {
  margin-top: 0;
}



.minimallines .line {
  padding-top: 0px;
  line-height: 1em; /* hiermee komt de 'zichtbare' bovenkant van de letters aan de bovenkant van de regel te liggen */
}
.minimallines .line-container {
  height: 1em;  /* Needed because it only contains absolutely positioned elements */
}
.blokschrift-letter { /* Voor een losse blokschrift letter binnen een regel instructietekst */
  font-family: "Loblosch";
  font-size: 120%;
  display: inline-block;
  position: relative;
  top: 0em;
  font-weight: normal;
}
.lobloschoblique .blokschrift-letter, .lobloschoblique.blokschrift-letter, .lobloschoblique-letter {
  font-style: oblique; 
}
.line::before, .line-overlay::before, .line-original::before {
  /* content: '\2008'; /* If you use \2008 (narrow space), I.E. will mess up the vertical alignment of the text. So we have to use an actual text character with visibility: hidden instead. */
  content: '.';
  visibility: hidden;
}
.cell .line::before, .cell .line-overlay::before, .cell .line-original::before  {
  content: '';
}
.centered .line::before, .centered .line-overlay::before, .centered .line-original::before {
  content: '';
}

.centered {
  text-align: center;
}
.baselines {
  width: 100%;
  position: absolute;
  top: .43em; 
  height: .43em;
  box-sizing: border-box;
  background-color: transparent;
  border-bottom: 2px solid #66f;
  border-top: 1px dashed #66f;
  border-left: 1px dotted #99999a; /* the left border must have a different colour from any horizontal borders: https://bugs.chromium.org/p/chromium/issues/detail?id=1265886&q=&can=5 */
  z-index: -99;
}
.minimallines .baselines {
  top: .2857em;
  height: 0.428em;
}


.line-container, .word-container {
  position: relative;
  top: 0;
}
.line-overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%; /* otherwise text-alignment won't work */
  
}
.word-overlay {
  position: absolute;
  left: 0;
  z-index: 1;
}
.hokjes-overlay {
  position: absolute;
  left: 0;
  z-index: 1;
}

/* NB .word-original can't be positioned absolutely, since it is what gives the inline element .word-container its width */
.line-original {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%; /* otherwise text-alignment won't work */
}

.rh2 .baselines, .rh2_67 .baselines, .rh3 .baselines, .rh4 .baselines, .rh5 .baselines {
  border-bottom-width: 1px;
}
.thin .baselines {
  border-bottom-width: 1px;
  border-top-width: .5px;
}
.lines_met_rompzone .baselines  {
  background-color: #eef;
}
.lines_met_rompzone .lines_zonder_rompzone .baselines  {
  background-color: transparent;
}


.nolines .baselines {
  border-width: 0px !important; 
  background-color: transparent !important;
}
.outerlines,
.nospacebetween .line:last-child .outerlines,
.nospacebetween .rawline:last-child .outerlines {
  width: 100%;
  position: absolute;
  top: 0ex;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999; 
  border-left: 1px dotted #99999a; 
  height: 3ex;
  box-sizing: border-box;
  z-index: -99;
}
.minimallines .outerlines,
.minimallines .nospacebetween .line:last-child .outerlines,
.minimallines .nospacebetween .rawline:last-child .outerlines,
.minimallines.nospacebetween .line:last-child .outerlines,
.minimallines.nospacebetween .rawline:last-child .outerlines {
  height: 1em;
}

.nospacebetween .line {
  margin-bottom: 0;
}

.nospacebetween .outerlines {
  border-bottom: 0px;
}
.nospacebetween.forcebottomline .outerlines, .nospacebetween .forcebottomline .outerlines { /* Needed when we change liniature between lines, e.g. next line is 'noouterlines' or something... */
  border-bottom: 1px solid #999;
}


.thin .outerlines {
  border-top-width: .5px;
  border-bottom-width: .5px;
}
.nolines .outerlines {
  border-width: 0px !important;
}
.noouterlines .outerlines {
  border-width: 0px !important;
}
.norompline .baselines, .norompline_fade .baselines {
  border-top-width: 0px !important;
  background-color: transparent !important;;
}
.norompline_fade .line:first-child .baselines{
  border-top-width: 1px !important;
}
.norompline_fade .line:nth-child(2) .baselines{
  border-top-width: 1px !important;
  border-top-color: #b0b0b0 !important;*/
}
.norompline_fade .line:nth-child(3) .baselines{
  border-top-width: 1px !important;
  border-top-color: #ddd !important;
}

/* This is only used for displaying settings, not for anything else */
.noouterlines .yesouterlines .outerlines {
  border-width: 1px !important;  
}
.minimallines .equallines .outerlines {
  height: 3ex !important;
}
.minimallines .equallines .baselines {
  top: .43em !important;
  height: .43em !important;
} 
.minimallines .equallines .line {
  line-height: 3ex !important;
}


/* --- */

.rh2 {
  font-size: 18px;
}
.rh2_67 {
  font-size: 24px;
}
.rh3 {
  font-size: 27px;
}
.rh4 {
  font-size: 36px;
}
.rh5 {
  font-size: 45px;
}
.rh6 {
  font-size: 54px;
}
.rh7 {
  font-size: 63px;
}
.rh8 {
  font-size: 72px;
}
.rh9 {
  font-size: 81px;
}
.rh10 {
  font-size: 90px;
}
.rh11 {
  font-size: 99px;
}
.rh12 {
  font-size: 108px;
}
.rh13 {
  font-size: 117px;
}
.rh14 {
  font-size: 126px;
}
.rh15 {
  font-size: 135px;
}
.rh16 {
  font-size: 144px;
}
.rh17{
  font-size: 153px;
}
.rh18 {
  font-size: 162px;
}
.rh19 {
  font-size: 171px;
}
.rh20 {
  font-size: 180px;
}
.rh22 {
  font-size: 198px;
}
.rh24 {
  font-size: 216px;
}
.rh26 {
  font-size: 234px;
}
.rh28 {
  font-size: 252px;
}
.rh30 {
  font-size: 270px;
}
.rh32 {
  font-size: 288px;
}
.rh34 {
  font-size: 306px;
}
.rh36 {
  font-size: 324px;
}
.rh38 {
  font-size: 342px;
}
.rh40 {
  font-size: 360px;
}
.rh42 {
  font-size: 378px;
}
.rh44 {
  font-size: 396px;
}
.rh46 {
  font-size: 414px;
}
.rh48 {
  font-size: 432px;
}
.rh50 {
  font-size: 450px;
}

.clear {
  clear: both;
}

#cell_template {
  display: none;
}

.invisible {
  /* Only the letter should be invisible, not the background elements */
  color: transparent !important;
}
.outline {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
/* Use this to cancel out .outline */
.black {
  color: black;
  text-shadow: none;
}
.red {
  color: red;
  text-shadow: none;
}

.traceable {
  color: #AAA;
}
.example {
  color: #333;
}
.term {
  font-style: italic;
}

.pullout {
  border: 1px solid #333;
  padding: 10px;
  float: right;
  background: #fff;
  font-size: 10pt;
  max-width: 40%;
}
.pullout h2 {
  font-weight: bold;
  font-size: inherit;
  margin: 0px;
  text-align: center;
}
h2 { 
  margin: 20px 0 0 0;
}

.correctiesymbool {
  font-family: Arial, sans-serif;
  font-weight: bold;
}
th {
  text-align: left;
}
ul {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}


.masque-upper {
  width: 100%;
  position: absolute;
  height: .43em;
  left: 1px;
  top: 0em;
  z-index: 10;
  background-color: #eee;
}
.masque-lower {
  width: 100%;
  position: absolute;
  height: .43em;
  left: 1px;
  bottom: 0em;
  z-index: 10;
  background-color: #eee;
}
.masque-body {
  width: 100%;
  position: absolute;
  top: .428em;
  height: .43em;
  left: 1px;
  z-index: 10;
  background-color: #eee;
}

.minimallines .masque-upper, .minimallines.masque-upper {
  height: .2857em;
  top: 0em;
}
.minimallines .masque-lower, .minimallines.masque-lower {
  height: .2857em;
  bottom: 0em;
}
.minimallines .masque-body, .minimallines.masque-lower{
  top: .2857em;
  height: .428em;
}

/* If we are masquing a zone, put all lines in front of the masque so that we can see the lines properly.
 * Consequence: the lines are also in front of the text, since the masque is in front of the text. 
 */
.masqued-upper .baselines, .masqued-lower .baselines, .masqued-body .baselines {
  z-index: 11;
}
.masqued-upper .outerlines, .masqued-lower .outerlines, .masqued-body .outerlines {
  z-index: 11 !important;
}

.tag {
  font-weight: bold;
  border: 1px solid black;
  padding: 1px 5px 1px 5px;
  margin: 0 5px 0 5px;
}

/* 'hokjes' have a height/width-ratio of 2:1. 
 * These 'hokjes' are 1ex wide and 2ex tall, and the baseline of the font is aligned 
 * with the bottom of the 'hokje'. Basically, the bottom 1ex of the font (descender zone)
 * is chopped off. However, if you try to print a webpage, you need to have room for 
 * this bottom 1ex, otherwise the entire line of text is omitted when printing.
 */
.hokjes {
  white-space: pre;
  font-variant-numeric: tabular-nums;
  font-family: 'Loblosch';
}
.lobloschoblique .hokjes, .lobloschoblique.hokjes  {
  font-style: oblique; 
}

.hokjes-table {
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
  margin: 0px;
  border-collapse: collapse;
  border-spacing: 0;	  
}
table.hokjes-table {
  border-spacing: 0;
  border-collapse: collapse;
}
table.hokjes-table td {
  border: 1px solid #66f;
  margin: 0px;
  padding: 0px;
  text-align: center;
  box-sizing: border-box;
  vertical-align: baseline;
  line-height: 1.94em; /* I have no idea why, but this lines up the font's baseline with the bottom of the hokjes */
}
.rh20 table.hokjes-table td,
.rh22 table.hokjes-table td,
.rh24 table.hokjes-table td,
.rh26 table.hokjes-table td,
.rh28 table.hokjes-table td,
.rh30 table.hokjes-table td,
.rh32 table.hokjes-table td,
.rh34 table.hokjes-table td,
.rh36 table.hokjes-table td,
.rh38 table.hokjes-table td,
.rh40 table.hokjes-table td,
.rh42 table.hokjes-table td,
.rh44 table.hokjes-table td,
.rh46 table.hokjes-table td,
.rh48 table.hokjes-table td,
.rh50 table.hokjes-table td,
.rh20 table.hokjes-table td {
  border-width: 2px;
}
table.hokjes-table td div.hokjes-content {
  bottom: 0em;
  width: .588em;
  height: 1.176em;
  position: relative;
}
table.hokjes-table td div.hokjes-content.hokjes-overlay {
  position: absolute;
}

div.hokjes-content .tussen-de-hokjes
 {
  position: absolute;
  left: .52em;
}

table.hokjes-table .hokjes-los, .hokjes-los table.hokjes-table {
  border-spacing: 0px 1ex;
  border-collapse: separate;
  margin-top: -1ex; /* no border-spacing at the top please */
  /* Set font so that 1ex is relative to the correct font */
  font-family: "Loblosch";
}
table.hokjes-table .hokjes-los td.skip, .hokjes-los table.hokjes-table td.skip,
table.hokjes-table .hokjes-nolines td, .hokjes-nolines table.hokjes-table td {
  border: none;
}
table.hokjes-table .hokjes-los td.next, .hokjes-los table.hokjes-table td.next {
  border-left: none;
}
table.hokjes-table .hokjes-baseline td, .hokjes-baseline table.hokjes-table td, table.hokjes-table td.hokjes-baseline {
  border-top: 1px solid rgba(255,255,255,0);
  border-left: 1px solid rgba(255,255,255,0);
  border-right: 1px solid rgba(255,255,255,0);
}
table.hokjes-table .hokjes-met-romphoogtelijn .hokjes-rompzone, .hokjes-met-romphoogtelijn table.hokjes-table .hokjes-rompzone {
  border-left: 1px dotted #66f; /* TODO: nog niet duidelijk genoeg */
}



.hokjes-cell {
  position: relative;
}


.hokjes-rompzone {
  position: absolute;
  height: .588em;
  width: 100%;
  bottom: 0em; 
  z-index: -99;
}
.hokjes-met-romplijn .hokjes-rompzone, .hokjes-met-rompzone .hokjes-rompzone {
  border-top: 1px dashed #66f;
}

.hokjes-met-rompzone .hokjes-rompzone  {
  background-color: #eef;
}
.hokjes-met-rompzone .hokjes-zonder-rompzone .hokjes-rompzone  {
  background-color: transparent;
}
.hokjes-los .skip .hokjes-rompzone {
  background-color: transparent;
  border-top: none;
}


/* 'hokjes-minder-hoog' have a height/width-ratio of 1.8:1. 
 * These 'hokjes' are 1ex wide, 1.8ex tall, and the baseline of the font is aligned 
 * with the bottom of the 'hokje'. Don't use them with any glyphs that have descenders.
 * NB the font is 3ex high: 1ex for descenders, 1ex for the 'letterrompen', and 1ex for ascenders.
 */

table.hokjes-minder-hoog.hokjes-table td .hokjes-content,
.hokjes-minder-hoog table.hokjes-table td .hokjes-content {
  line-height: 1.69em;
  height: 1.058em;
}

/* force printing of background color */
.line, .hokjes-cell {
  -webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
  color-adjust: exact !important;                 /*Firefox*/
}