/**/
body {
    margin-left: 10%;
    margin-right: 10%
    }
/* normal indent */
p {
    text-indent: 2%;
    text-align: justify
    }
/* hanging indent */
.p2 {
    text-indent: -6%;
    padding-left: 6%;
    text-align: justify
    }
/* no indent */
.p_no_indent {
    text-indent: 0%;
    text-align: justify
    }
/* Standard sup and sub have the same fontsize as normal text,
       it's only moved up or down half a line.
       But usually you will find sup/sub in a smaller font.
       Therefore these adaptations: */
sup {
    vertical-align: super;
    font-size: 50%
    }
sub {
    vertical-align: sub;
    font-size: 50%
    }
.standard {
    font-size: 100%;
    font-weight: normal
    }
.indent02 {
    margin-left: 2%;
    margin-right: 10%
    }
.indent10 {
    margin-left: 10%;
    margin-right: 10%
    }
.indent20 {
    margin-left: 20%;
    margin-right: 10%
    }
.indent30 {
    margin-left: 30%;
    margin-right: 10%
    }
.indent40 {
    margin-left: 40%;
    margin-right: 10%
    }
.indent50 {
    margin-left: 50%;
    margin-right: 10%
    }
.indent60 {
    margin-left: 60%;
    margin-right: 10%
    }
.fontsize60 {
    font-size: 60%
    }
.fontsize80 {
    font-size: 80%
    }
.fontsize110 {
    font-size: 110%
    }
.fontsize133 {
    font-size: 133%
    }
/* Use this to format the actual text of footnotes: */
.note_text {
    font-size: 80%;
    font-weight: normal
    }
/* for big and small caps on one line. Usable as class in a 'span' tag around text or in the 'p'/tag */
.smallcaps {
    font-variant: small-caps
    }
/* use for Transcribers Notes and such */
.notebox {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding: 1em;
    border: solid black 1px
    }
/* For showing the original pagenumbers in the text:
        1. Reset and increment a counter that is named [pagenumber]. For instance in the [body]-tag
        2. Then use the class [pagenum] on the place where you want to see the pagenumber.
           The way the pagenumber is presented, happens with the pagenum:before. This makes the pagenumber "virtual", or: if you
           try to copy and paste it somewhere else, the pagenumber is NOT copied.
        3. In case the pagenumber is placed inside a word, use the class [hyphen] to show a "virtual" hyphen.
        4. If you want to hide the pagenumbers, change [display: inline;] in [display: none;] for the classes [pagenum] and [hyphen].
        5. If you want to jump to a pagenumber from other parts, add the [a] tag with a unique id, like this:

            <p>The last word on a page <a id="#page0001"><|a><span class="pagenum"><|span> and then the first word on the next page<|p>
        6. If you have a blank page in the paper original that participates in the pagenumbering, and you don't want it
           to appear in the e-book, you need to increment your pagenumber in the text. Do that as follows: <span style="counter-increment: pagenumber 1;" class="pagenum"><|span>
           Of course with more than one consecutive blank page, alter the increment to the right number.
        7. If you want the first pages to have roman pagenumbers, use as class "pagenum_roman".
        8. Resetting can be tricky: better do a counter-increment of minus a number.
    */
.pagenum {
    display: inline;
    font-size: 70%;
    font-style: normal;
    color: gray
    }
.pagenum_roman {
    display: inline;
    font-size: 70%;
    font-style: normal
    }
.pagenum:before {
    counter-increment: pagenumber;
    content: "[" counter(pagenumber) "]"
    }
.pagenum_roman:before {
    counter-increment: pagenumber;
    content: "[" counter(pagenumber, upper-roman) "] "
    }
.hyphen {
    display: inline
    }
.hyphen:before {
    content: "-"
    }
/* ...end of: For showing the original pagenumbers in the text.

    /* To mark a correction in the text, use this class. It will put a dotted red line underneath the corrected word and
       you can even display the original text in a hint when the cursor hovers above the word.
       Example (replace pipe-symbol with forwardslash if you are going to use it):

            <p>This sentence <span id="cor0001" class="corrected" title="[Original text: cantaind]">contained<|span> an error.<|p>

       You can hyperlink the word from the Transcriber's notes:
       Example (replace pipe-symbol with forwardslash if you are going to use it):

            <a href="#cor0001">[XXX] &mdash;&gt; [YYY]<|a>
    */
span.corrected {
    border-bottom: 1px dotted red
    }
/* use for words to show extra spacing between characters
       Example:
            <span class="expand_spacing">dit is een test<|span>

       which results in something like this:
            d i t  i s  e e n  t e s t
       To add just a bit more space to the left, the margin-left is also set.
    */
.expand_spacing {
    letter-spacing: 0.2em;
    margin-left: 0.2em
    }
/* To start a chapter with an image representing the first letter, use this class.
       Example with the letter "H" (replace pipe-symbol with forwardslash if you are going to use it):

            <img class="letterimage" src="image_representing_letter.jpg" alt="H" style="width:10%; height:auto; max-width:300px;">
            <p class="hidden_char"><span style="color: white;">H<|span>ere he was going to stay.<|p>

       The result is the letter "H" represented by an image sized to 10% of the width of the browser-window (with a maximum-width of 300px).
    */
.hidden_char {
    text-indent: -0.5em;
    padding-left: 0.5em
    }
/* To create hidden but searchable (!) text. Great to use for: an image that shows text. You type the same text beneath the image and apply this style.
       That ensures the reader doesn't see it twice, but he can search on it. */
span.hiddenText {
    width: 0;
    height: 0;
    overflow: hidden;
    display: inline-block
    }
/* To create a big first character (sometimes used in a new chapter) use this in a <span> around first character(s).
       Use it in combination with [class="p_no_indent"], or else the second line will be too close to the big character. */
/* If there is a quote before the first big character, it's usually the normal size. Then use this in a <span> around it. */
div.illustration {
    text-align: center
    }
/* Aligning images in text: left, center, or right */
/* ...end of -- Aligning images in text: left or right */
/* Footnotes:
       Use as follows. In the text, place something like:

           Dat komt t.z.t. <span id="fn0001"><a href="#fn0001text">1)<|a><|span> ter sprake

       And then the footnote text, somewhere else:

           <span id="fn0001text" class="fn_text"><a href="#fn0001">1)<|a> Ter zijner tijd<|span>

       The class [fn_text] is defined directly below
    */
/* Style for the footnote text */
.fn_text {
    font-size: 80%
    }
/* ...end of -- Footnotes */
/**/