@font-face {
  font-family: "Schoolschrift02";
  src: url("/fonts/Schoolschrift02.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Schoolschrift03";
  src: url("/fonts/schoolschrift03/webfonts/schoolschrift03-webfont.ttf") format("truetype");
  font-display: block;
}
@font-face {
  font-family: "Schoolschrift03-Startpunten";
  src: url("/fonts/schoolschrift03/webfonts/schoolschrift03-startpunten-webfont.ttf") format("truetype");
  font-display: block;
}

/* Dit is een speciaal font waarin de verbindingen precies even breed zijn als in het normale font,
 * maar waarbij het 'oogt' alsof de letters los geschreven zijn. Het gaat echter niet om letters in
 * standaardvorm, maar om een vorm die wel degelijk aangepast is aan omringende letters.
 */
@font-face {
  font-family: "Schoolschrift03-VerbindingenLos";
  src: url("/fonts/schoolschrift03/webfonts/schoolschrift03-verbindingenlos-webfont.ttf") format("truetype");
  font-display: block;
}

@font-face {
  font-family: "Loblosch";
  
}

.cursive, .rawcursive {
  font-family: "Schoolschrift03";
  line-height: normal; /* Overrule setting from masterstyle */
}
.word {
  font-family: "Schoolschrift03";
}

.cursive.startpunten-font, .cursive .startpunten-font, .startpunten-font .cursive,
.rawcursive.startpunten-font, .rawcursive .startpunten-font, .startpunten-font .rawcursive,
.line.startpunten-font, .line .startpunten-font, .startpunten-font .line,
.rawline.startpunten-font, .rawline .startpunten-font, .startpunten-font .rawline,
.letter.startpunten-font, .letter .startpunten-font, .startpunten-font .letter,
.rawletter.startpunten-font, .rawletter .startpunten-font, .startpunten-font .rawletter,
.hokjes.startpunten-font, .hokjes .startpunten-font, .startpunten-font .hokjes,
.word-startpunten-font, .word .startpunten-font, .startpunten-font .word {
  font-family: "Schoolschrift03-Startpunten";
}
.cursive.verbindingenlos-font, .cursive .verbindingenlos-font, .verbindingenlos-font .cursive,
.rawcursive.verbindingenlos-font, .rawcursive .verbindingenlos-font, .verbindingenlos-font .rawcursive,
.line.verbindingenlos-font, .line .verbindingenlos-font, .verbindingenlos-font .line,
.rawline.verbindingenlos-font, .rawline .verbindingenlos-font, .verbindingenlos-font .rawline,
.letter.verbindingenlos-font, .letter .verbindingenlos-font, .verbindingenlos-font .letter,
.rawletter.verbindingenlos-font, .rawletter .verbindingenlos-font, .verbindingenlos-font .rawletter,
.hokjes.verbindingenlos-font, .hokjes .verbindingenlos-font, .verbindingenlos-font .hokjes,
.word-verbindingenlos-font, .word .verbindingenlos-font, .verbindingenlos-font .word {
  font-family: "Schoolschrift03-VerbindingenLos";
}



.line, .rawline {
  font-family: "Schoolschrift03";
  line-height: normal; /* Overrule setting from masterstyle */
  display: block;
  position: relative;
  margin-bottom: .1em;
  text-overflow: clip;
  white-space: pre; /* Double whitespaces count as double and do not collapse */
}
.line-container {
  height: 1.018em; /* 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: 1mm; }
.ld2 .line, .ld2.line, .ld2 .rawline, .ld2.rawline { margin-bottom: 2mm; }
.ld3 .line, .ld3.line, .ld3 .rawline, .ld3.rawline { margin-bottom: 3mm; }
.ld4 .line, .ld4.line, .ld4 .rawline, .ld4.rawline { margin-bottom: 4mm; }
.ld5 .line, .ld5.line, .ld5 .rawline, .ld5.rawline { margin-bottom: 5mm; }
.ld6 .line, .ld6.line, .ld6 .rawline, .ld6.rawline { margin-bottom: 6mm; }
.ld7 .line, .ld7.line, .ld7 .rawline, .ld7.rawline { margin-bottom: 7mm; }
.ld8 .line, .ld8.line, .ld8 .rawline, .ld8.rawline { margin-bottom: 8mm; }
.ld9 .line, .ld9.line, .ld9 .rawline, .ld9.rawline { margin-bottom: 9mm; }
.ld10 .line, .ld10.line, .ld10 .rawline, .ld10.rawline { margin-bottom: 10mm; }
.ld11 .line, .ld11.line, .ld11 .rawline, .ld11.rawline { margin-bottom: 11mm; }
.ld12 .line, .ld12.line, .ld12 .rawline, .ld12.rawline { margin-bottom: 12mm; }
.ld13 .line, .ld13.line, .ld13 .rawline, .ld13.rawline { margin-bottom: 13mm; }
.ld14 .line, .ld14.line, .ld14 .rawline, .ld14.rawline { margin-bottom: 14mm; }
.ld15 .line, .ld15.line, .ld15 .rawline, .ld15.rawline { margin-bottom: 15mm; }
.ld16 .line, .ld16.line, .ld16 .rawline, .ld16.rawline { margin-bottom: 16mm; }
.ld17 .line, .ld17.line, .ld17 .rawline, .ld17.rawline { margin-bottom: 17mm; }
.ld18 .line, .ld18.line, .ld18 .rawline, .ld18.rawline { margin-bottom: 18mm; }
.ld19 .line, .ld19.line, .ld19 .rawline, .ld19.rawline { margin-bottom: 19mm; }
.ld20 .line, .ld20.line, .ld20 .rawline, .ld20.rawline { margin-bottom: 20mm; }

.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: 1mm; }
.ldi2 .line.firstrepeat, .ldi2.line.firstrepeat, .ldi2 .rawline.firstrepeat, .ldi2.rawline.firstrepeat { margin-top: 2mm; }
.ldi3 .line.firstrepeat, .ldi3.line.firstrepeat, .ldi3 .rawline.firstrepeat, .ldi3.rawline.firstrepeat { margin-top: 3mm; }
.ldi4 .line.firstrepeat, .ldi4.line.firstrepeat, .ldi4 .rawline.firstrepeat, .ldi4.rawline.firstrepeat { margin-top: 4mm; }
.ldi5 .line.firstrepeat, .ldi5.line.firstrepeat, .ldi5 .rawline.firstrepeat, .ldi5.rawline.firstrepeat { margin-top: 5mm; }
.ldi6 .line.firstrepeat, .ldi6.line.firstrepeat, .ldi6 .rawline.firstrepeat, .ldi6.rawline.firstrepeat { margin-top: 6mm; }
.ldi7 .line.firstrepeat, .ldi7.line.firstrepeat, .ldi7 .rawline.firstrepeat, .ldi7.rawline.firstrepeat { margin-top: 7mm; }
.ldi8 .line.firstrepeat, .ldi8.line.firstrepeat, .ldi8 .rawline.firstrepeat, .ldi8.rawline.firstrepeat { margin-top: 8mm; }
.ldi9 .line.firstrepeat, .ldi9.line.firstrepeat, .ldi9 .rawline.firstrepeat, .ldi9.rawline.firstrepeat { margin-top: 9mm; }
.ldi10 .line.firstrepeat, .ldi10.line.firstrepeat, .ldi10 .rawline.firstrepeat, .ldi10.rawline.firstrepeat { margin-top: 10mm; }
.ldi11 .line.firstrepeat, .ldi11.line.firstrepeat, .ldi11 .rawline.firstrepeat, .ldi11.rawline.firstrepeat { margin-top: 11mm; }
.ldi12 .line.firstrepeat, .ldi12.line.firstrepeat, .ldi12 .rawline.firstrepeat, .ldi12.rawline.firstrepeat { margin-top: 12mm; }
.ldi13 .line.firstrepeat, .ldi13.line.firstrepeat, .ldi13 .rawline.firstrepeat, .ldi13.rawline.firstrepeat { margin-top: 13mm; }
.ldi14 .line.firstrepeat, .ldi14.line.firstrepeat, .ldi14 .rawline.firstrepeat, .ldi14.rawline.firstrepeat { margin-top: 14mm; }
.ldi15 .line.firstrepeat, .ldi15.line.firstrepeat, .ldi15 .rawline.firstrepeat, .ldi15.rawline.firstrepeat { margin-top: 15mm; }
.ldi16 .line.firstrepeat, .ldi16.line.firstrepeat, .ldi16 .rawline.firstrepeat, .ldi16.rawline.firstrepeat { margin-top: 16mm; }
.ldi17 .line.firstrepeat, .ldi17.line.firstrepeat, .ldi17 .rawline.firstrepeat, .ldi17.rawline.firstrepeat { margin-top: 17mm; }
.ldi18 .line.firstrepeat, .ldi18.line.firstrepeat, .ldi18 .rawline.firstrepeat, .ldi18.rawline.firstrepeat { margin-top: 18mm; }
.ldi19 .line.firstrepeat, .ldi19.line.firstrepeat, .ldi19 .rawline.firstrepeat, .ldi19.rawline.firstrepeat { margin-top: 19mm; }
.ldi20 .line.firstrepeat, .ldi20.line.firstrepeat, .ldi20 .rawline.firstrepeat, .ldi20.rawline.firstrepeat { margin-top: 20mm; }

.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;
}



.letter, .rawletter { /* Voor een cursive letter binnen een regel instructietekst */
  font-family: "Schoolschrift03";
  font-size: 150%;
  line-height: 66%;
  display: inline-block;
  position: relative;
  top: 0.02em;
} 
.letter, .rawletter { /* bold does not work for all connector glyphs. Single letters are often used within title text, so we want to disable bold */
  font-weight: normal;
}

.nospacebetween .line,
.nospacebetween .rawline {
  margin-bottom: -0.025em;
}
.line::before,
.rawline::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,
.cell .rawline::before, .cell .rawline-overlay::before, .cell .rawline-original::before  {
  content: '';
}
.centered .line::before, .centered .line-overlay::before, .centered .line-original::before,
.centered .rawline::before, .centered .rawline-overlay::before, .centered .rawline-original::before {
  content: '';
}

.centered {
  text-align: center;
}

.line-container, .word-container {
  position: relative;
  top: 0;
}
.line-overlay {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%; /* needed for text-alignment to word */
}
.word-overlay {
  position: absolute;
  left: 0;
  z-index: 1;
}
.hokjes-overlay {
  position: absolute;
  left: 0;
  z-index: 1;
}
.line-original {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%; /* needed for text-alignment to word */
}


.baselines {
  width: 100%;
  position: absolute;
  top: .35em; /* These settings are most suited to very large sizes; corrections for smaller sizes see below... */
  height: .33em;
  background-color: #eef;
  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;
}

/* NB when optimizing this, be mindful that screen and print preview are not the same. Optimize for print preview, not for screen */
.rh2 .baselines, .rh2_67 .baselines, .lhwide .baselines, .rh3 .baselines, .lh2 .baselines, .lhdoublecollege .baselines, .rh4 .baselines, .lhdoublewide .baselines {
  top: .34em;
  height: .31em; 
}
.lh3 .baselines, .rh5 .baselines, .rh6 .baselines, .lh4 .baselines, .rh7 .baselines, .lh5 .baselines, .rh8 .baselines, .rh9 .baselines {
  top: .34em;
  height: .32em;
}

.rh2 .baselines, .rh2_67 .baselines, .lhwide .baselines, .rh3 .baselines, .lh2 .baselines, .lhdoublecollege .baselines, .rh4 .baselines, .lhdoublewide .baselines, .lh3 .baselines {
  border-bottom-width: 1px;
}
.thin .baselines {
  border-bottom-width: 1px;
  border-top-width: .5px;
}
.greylines .baselines {
  background-color: transparent;
  border-bottom-color: #000;
  border-top-color: #000;  
}
/* .defaultlines should overrule greylines */
.greylines .defaultlines .baselines {
  border-bottom-color: #66f;
  border-top-color: #66f;
  background-color: #eef;
}
.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: .018em;
  border-top: 1px solid #999;  
  border-bottom: 1px solid #999;  
  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 */
  height: 1em;
  box-sizing: border-box;
  z-index: -99;
}


.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;
}
.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;
}
.noromphoogtelijn .baselines {
  border-left: none;
}


.outline {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
/* Outline text is slightly thicker than normal text. This makes black text with the same thickness as outline text */
.black_with_outline_thickness {
  color: black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
.traceable_with_outline_thickness {
  color: #AAA;
  text-shadow: -1px -1px 0 #AAA, 1px -1px 0 #AAA, -1px 1px 0 #AAA, 1px 1px 0 #AAA;  
}

/* Use this to cancel out .outline */
.black {
  color: black;
  text-shadow: none;
}

/* rh = romphoogte in mm. Dit is de afstand van grondlijn tot romplijn.
   lh = lineheight in 1/8". Dit is de afstand van grondlijn tot bovenluslijn. NB onderluszone is niet inbegrepen!!!
 */
.rh2 {
  font-size: 23px;
}
.rh2_67 {
  font-size: 30px;
}
.lhwide {  /* 1/3 of wide ruled paper. NB wide ruled paper = 11/32" */
  font-size: 33px; 
}
.rh3 {
  font-size: 34px;
}
.lh2 { 
  font-size: 37px; 
}
.lhdoublecollege {  /* 1/2 of college ruled paper. NB college ruled paper = 9/32" */
  font-size: 41px; 
}
.rh4 {
  font-size: 46px;
}
.lhdoublewide { /* 1/2 of wide ruled paper */ 
  font-size: 50px;
}
.lh3 { 
  font-size: 55px; 
}
.rh5 {
  font-size: 57px;
}
.rh6 {
  font-size: 69px;
}
.lh4 { 
  font-size: 73px; 
}
.rh7 {
  font-size: 80px;
}
.lh5 { 
  font-size: 91px; 
}
.rh8 {
  font-size: 92px;
}
.rh9 {
  font-size: 103px;
}
.lh6 { 
  font-size: 110px; 
}
.rh10 {
  font-size: 115px;
}
.rh11 {
  font-size: 126px;
}
.lh7 { 
  font-size: 128px; 
}
.rh12 {
  font-size: 138px;
}
.lh8 {
  font-size: 146px; 
}
.rh13 {
  font-size: 149px;
}
.rh14 {
  font-size: 161px;
}
.lh9 {
  font-size: 164px; 
}
.rh15 {
  font-size: 172px;
}
.lh10 {
  font-size: 182px; 
}
.rh16 {
  font-size: 184px;
}
.rh17{
  font-size: 195px;
}
.lh11 {
  font-size: 201px; 
}
.rh18 {
  font-size: 207px;
}
.rh19 {
  font-size: 218px;
}
.lh12 {
  font-size: 219px; 
}
.rh20 {
  font-size: 230px;
}
.lh13 {
  font-size: 237px; 
}
.rh22 {
  font-size: 253px;
}
.lh14 {
  font-size: 256px; 
}
.lh15 {
  font-size: 273px; 
}
.rh24 {
  font-size: 276px;
}
.lh16 {
  font-size: 292px; 
}
.rh26 {
  font-size: 299px;
}
.lh17 {
  font-size: 310px; 
}
.rh28 {
  font-size: 322px;
}
.lh18 {
  font-size: 329px; 
}
.rh30 {
  font-size: 345px;
}
.rh32 {
  font-size: 368px;
}
.rh34 {
  font-size: 391px;
}
.rh36 {
  font-size: 414px;
}
.rh38 {
  font-size: 437px;
}
.rh40 {
  font-size: 460px;
}
.rh42 {
  font-size: 483px;
}
.rh44 {
  font-size: 506px;
}
.rh46 {
  font-size: 529px;
}
.rh48 {
  font-size: 552px;
}
.rh50 {
  font-size: 575px;
}

.clear {
  clear: both;
}

#cell_template {
  display: none;
}
.rectangled {
  display: inline-block;
  position: relative;
}
.o_rectangle {
  background-color: #faf;
  position: absolute;
  top: .356em;
  left: .07em;
  height: .327em;
  width: .125em;
  z-index: -1;
}
.o_rectangle::after {
  position: absolute;
  z-index: -1;
  content: "";
  right: -50%;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: inherit;
  -webkit-transform: skewX(-15deg);
  -moz-transform: skewX(-15deg);
  -ms-transform: skewX(-15deg);
  transform: skewX(-15deg);      
}
.o_rectangle::before {
  z-index: -1;
  content: "";
  position: absolute;
  left: -50%;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: inherit;
  -webkit-transform: skewX(-15deg);
  -moz-transform: skewX(-15deg);
  -ms-transform: skewX(-15deg);
  transform: skewX(-15deg);    
}
.invisible {
  /* Only the letter should be invisible, not the background elements */
  color: transparent;
  text-shadow: none; /* overrule .outline */
}
.outline {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;  
}
.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: .36em;
  left: 1px;
  top: 0em;
  z-index: 10;
  background-color: #eee;
}
.masque-lower {
  width: 100%;
  position: absolute;
  height: .325em;
  left: 1px;
  bottom: 0em;
  z-index: 10;
  background-color: #eee;
}
.masque-body {
  width: 100%;
  position: absolute;
  top: .363em;
  height: .325em;
  left: 1px;
  z-index: 10;
  background-color: #eee;
}
/* 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;
}
/* Put this class around a letter I that you want to have without a dot */
.inodot {
  position: relative;
}
.masqued-dot {
  display: inline-block;
  position: absolute;
  top: .1em;
  width: .1em;
  right: 0em;
  height: .2em;
  background-color: #fff;
  z-index: 99;
}

.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: 'Schoolschrift03';
}
.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;
  padding-bottom: 0.03ex;
  text-align: center;
  box-sizing: border-box;
  vertical-align: baseline;
  line-height: 1; /* NB normal lineheight for this font is 3ex */
}
.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: 0ex;
  width: 1ex;
  height: 2ex;
  position: relative;
}
table.hokjes-table td div.hokjes-content.hokjes-overlay {
  position: absolute;
}
div.hokjes-content .tussen_de_hokjes {
  position: absolute;
  left: .85ex;
}

table.hokjes-table .hokjes-los, .hokjes-los table.hokjes-table {
  border-spacing: 0px 1ex;
  border-collapse: separate;
  margin-top: -.9ex; /* no border-spacing at the top please */
  /* Set font so that 1ex is relative to the correct font */
  font-family: "Schoolschrift03";
  
}

.startpunten-font table.hokjes-table .hokjes-los, .startpunten-font .hokjes-los table.hokjes-table, .startpunten-font.hokjes-los table.hokjes-table {
  font-family: "Schoolschrift03-Startpunten";
}

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 */
}
table.hokjes-table td.next .hokjes-rompzone, table.hokjes-table td.next .hokjes-rompzone,
table.hokjes-table td.skip .hokjes-rompzone, table.hokjes-table td.skip .hokjes-rompzone {
  border-left: none;
}

.hokjes-cell {
  position: relative;
}


.hokjes-rompzone {
  position: absolute;
  height: 1.01ex;
  width: 100%;
  bottom: -0.03ex; /* why??? */
  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-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: 2.6ex;
  height: 1.8ex;
}

/* and for the sake of our settings preview, we need to be able to overrule this :( */
.hokjes-minder-hoog .hokjes-hoog table.hokjes-table td .hokjes-content {
  line-height: normal;
  height: 2ex;
}

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

.red {
  color: #c00;
}
.green {
  color: #090;
}