/*
===================================
     Load fonts from folder
===================================
*/
@font-face {
    font-family: Gentium;
    src: url("fonts/Gentium/GenBasR.ttf");
}
@font-face {
    font-family: Gentium;
    font-weight: bold;
    src: url("fonts/Gentium/GenBasB.ttf");
}
@font-face {
    font-family: Gentium;
    font-style: italic;
    src: url("fonts/Gentium/GenBasI.ttf");
}
@font-face {
    font-family: Gentium;
    font-weight: bold;
    font-style: italic;
    src: url("fonts/Gentium/GenBasBI.ttf");
}

@font-face {
    font-family: Sans;
    src: url("fonts/OpenSans/OpenSans-Regular.ttf");
}

@font-face {
    font-family: Sans;
    font-weight: bold;
    src: url("fonts/OpenSans/OpenSans-Bold.ttf");
}

@font-face {
    font-family: Sans;
    font-style: italic;
    src: url("fonts/OpenSans/OpenSans-Italic.ttf");
}

@font-face {
    font-family: Sans;
    font-weight: bold;
    font-style: italic;
    src: url("fonts/OpenSans/OpenSans-BoldItalic.ttf");
}

@font-face {
    font-family: 'courier prime';
    src: url(../resources/fnt/courierprime/Courier%20Prime.ttf);
}

@font-face {
    font-family: 'courier prime';
    font-weight: bold;
    src: url(../resources/fnt/courierprime/Courier%20Prime%20Bold.ttf);
}

@font-face {
    font-family: 'courier prime';
    font-style: italic;
    src: url(../resources/fnt/courierprime/Courier%20Prime%20Italic.ttf);
}

@font-face {
    font-family: 'courier prime';
    font-weight: bold;
    font-style: italic;
    src: url(../resources/fnt/courierprime/Courier%20Prime%20Bold%20Italic.ttf);
}

/*
===================================
         Page Styles
===================================
*/

/* Set up the the page styles that are the same for all pages */
@page {
    @top-left {
        border-bottom: 15px solid yellowgreen;  /* The green line in the header */
    }
    @top-right {
        border-bottom: 15px solid yellowgreen;  /* The green line in the header */
    }
    
    size: A4;
    margin: 1.5cm;
    padding-top: 5mm;
}

/* The settings of the page named landscape */
@page landscape {
    size: A4 landscape;     /* The page should be landscape and of the size A4 */
    
    /* Remove the header for this page */
    @top-left {
        border:none;
        content: "";
        background: none;
    }
    @top-right {
        border:none;
        content: "";
        background: none;
    }
    
    margin-left: 5mm;
    padding-left: 5mm;
    margin-right: 5mm;
    padding-right: 5mm;
}

@page landscape:right {
    margin-top: 2cm;
}

@page landscape:left {
    margin-bottom: 2cm;
}

/* Styles of the first page, aka the cover */
@page:first {
    /* No page counter for first page */
    counter-increment: page 0;
    
    /* Remove the header */
    @top-left {
        border:none;
        content: "";
        background: none;
    }
    @top-right {
        border:none;
        content: "";
        background: none;
    }
    
    /* Set the gradient on the page background */
    background-image: radial-gradient(circle farthest-corner at 40% 40%, beige, yellowgreen);
    
    /* Remove the page margin as it is not needed and should not intervene the gradient */
    margin: 0;
    padding: 0;
}

/* Set the styles for all pages on the left */
@page:left {
    
    /* Set up the styles of the page numbering */
    @top-left {
        padding-top: 6mm;
        padding-left: 2mm;
        content: counter(page);
        font-size: 20pt;
        font-family: Sans, sans-serif;
    }
    
    /* Set up the styles of the chapter titles */
    @top-right {
        content: string(chaptertitle) " - " string(subchaptertitle);
        font-family: Sans, sans-serif;
        font-style: italic;
        padding-top: 5mm;
        margin-right: 1cm;
    }
    
    /* Set the paddings on the sides */
    padding-right: 2cm;
    padding-left: 1.5cm;
}

/* Set the styles for all pages on the right */
@page:right {
    
    /* Set up the styles of the page numbering */
    @top-right {
        padding-top: 6mm;
        padding-right: 2mm;
        content: counter(page);
        font-size: 20pt;
        font-family: Sans, sans-serif;
    }
    
    /* Set up the styles of the chapter titles */
    @top-left {
        content: string(chaptertitle) " - " string(subchaptertitle);
        font-family: Sans, sans-serif;
        font-style: italic;
        padding-top: 5mm;
        margin-left: 1cm;
    }
    
    
    /* Set the paddings on the sides */
    padding-right: 1.5cm;
    padding-left: 2cm;
    
}

@page:-ro-nth(1 of chapter) {
    @top-left-corner {
        content: none;
    }
    
    @top-left {
        content: none;
    }

    @top-right {
        content: none;
    }

    @top-right-corner {
        content: none;
    }
}

/* Set the styles for the last page */
@page:-ro-last {
    
    margin-bottom: 10cm;
    
    @bottom-center {
        content: element(disclaimer);
        background-color: beige;
        border-top: 2cm solid yellowgreen;
        -ro-pdf-tag-type: "Div";
    }
    
    @bottom-left-corner {
        content: "";
        background-color: beige;
        border-top: 2cm solid yellowgreen;
    }
    
    @bottom-right-corner {
        content: "";
        background-color: beige;
        border-top: 2cm solid yellowgreen;
    }
}

/* 
    Styles used by the cover
*/
#coverList p {
    padding: 1mm 0mm 1mm 2mm;
    margin: 1mm;
    text-align: left;
    color: darkslategrey;
}

#coverList a {
    color: darkslategrey;
    text-decoration: none;
}

p.coverPage {
    text-shadow: 8pt 8pt 8pt rgba(0, 0, 0, 0.5);
}

/*
===================================
       Media Styles
===================================
*/

/*
    When opened in a browser, some elements on the cover 
    page like the picture should be hidden.
*/
@media screen {
    body > h1 {
        padding-top: 1cm;
    }
    .coverPage, #coverList {
        display: none;
    }
}

/*
===================================
        Chapter Styles
===================================
*/
body > h1 {
    margin-top: 0;
    padding-top: 3.9cm;
    counter-increment: h1 1;
    counter-reset: h2 0;
    font-size: 40pt;
    font-family: Sans, sans-serif;
    line-height: 1.5;
    text-align: center;
    
    text-shadow: 4pt 4pt 3pt rgba(0, 0, 0, 0.3);
}

body > section {
    page: chapter;
}

body > section > h1 {
    break-before: left;             /* The chapter should always start on a new page */
    counter-increment: h2 1;        /* Increment the chapter counter named h2 */
    counter-reset: h3 0 figures 0;  /* Reset counters named h3 and figures */
    string-set: chaptertitle self;  /* Set the current chapter title as string for the header */
    font-size: 3rem;
    margin-top: 2cm;
    margin-bottom: 2cm;
    font-style: italic;
    text-align: left;
    
    text-shadow: 0.05em 0.05em 2pt rgba(0, 0, 0, 0.5);
}

body > section > h1::before {
    content: counter(h2, upper-latin) " "; /* Add the chapter number */
    position: absolute;
    -ro-position-origin: -ro-page-box;
    right: 0;
    top: 0;
    padding: 0;
    margin: 0;
    font-size: 3em;
    z-index: -1;
    color: white !important;
    background-color: yellowgreen;
    height: 6cm;
    width: 6cm;
    text-align: center;
    font-style: initial;
    align-content: center;
}

body > section > h1::after {
    content: "";
    position: absolute;
    -ro-position-origin: -ro-page-box;
    top: calc(6cm - 2pt);
    left: 0;
    right: 0;
    border-bottom: 2pt solid yellowgreen;
    z-index: -1;
}

body > section > section > h1 {
    counter-increment: h3 1;  /* Increase the counter for numbering of the sub-chapters */
    string-set: subchaptertitle self;
    font-size: 16pt;
    padding-top: 0.2cm;
    clear: both;
}

body > section > section > h1::before {
    content: counter(h2, upper-latin) "." counter(h3) " ";  /* Add the Chapter and the Sub-Chapter numbers */
    padding-right: 2mm;
}

body > section > h1,
body > section > section > h1 {
    font-family: Sans, sans-serif;
}

body > section > h1::before,
body > section > section > h1::before {
    color: yellowgreen;
    text-shadow: none;
}


/*
===================================
            Boxes
===================================
*/

/*
    The Important Box (e.g. Summary)
*/
figure.important {
    border:2px solid yellowgreen;
    break-inside: avoid-page;
}

figure.important > figcaption {
    background-color: yellowgreen;
    color: white;
    padding: 1mm 1mm 1mm 2mm;
    font-weight: bold;
    font-family: Sans, sans-serif;
    font-size: 14pt;
}

figure.important > div {
    break-before: avoid-page;
    margin: 2mm;
}

/*
    The image box with caption
*/
figure.image {
    break-inside: avoid-page;
    margin: 0mm 5mm 2mm 5mm;
    counter-increment: figures;
}

figure.image > img {
    box-shadow: 1mm 1mm 1mm #00000088;
}

figure.image > figcaption {
    padding: 2mm 1mm 2mm 3mm;
    font-family: Sans, sans-serif;
    font-size: 9pt;
    text-align: left;
}

figure.image > figcaption::before {
    content: "Fig. " counter(h2, upper-latin) "." counter(figures) " "; /* Add figure numbering */
    font-weight: bold;
}
/* Table captions */
caption {
    font-family: Sans, sans-serif;
    font-size: 1rem;
    font-style: italic;
    text-align: left;
}
/* Floats used by the image boxes */
.floatl {
    float:left;
    margin-left: 0 !important;
}

.floatr {
    float:right;
    margin-right: 0 !important;
}

/*
    Code Box
*/
div.note {
    clear: both;
    background-color: beige;
    margin-top: 12pt;
    margin-bottom: 12pt;
    padding: 1mm 5mm 1mm 5mm;
    border-top: 4px solid yellowgreen;
    border-bottom: 4px solid yellowgreen;
    break-inside: avoid-page;
    break-before: avoid-page;
}

div.note strong {
    color: crimson;
}

/*
    Note Box
*/
/* Note that the same class is used for two different elements. 
    The class styles depend on the element */
p.note {  
    background-color: beige;
    margin-top: 5mm;
    position: relative;
    padding: 4mm;
    clear: both;
}

p.note::before {
    content: "NOTE: ";
    position: absolute;
    left: 1mm;
    top: -3mm;
    font-weight: bold;
    font-family: Sans, sans-serif;
}

/*
===================================
            Tables
===================================
*/

table {
    clear: both; /* Make sure that there are no floats to the side of the table */
}

table.wide {
    page: landscape; /* Set the name of the page containing this table */
}

table td {
    padding: 2mm 4mm 2mm 4mm;
    vertical-align: top;
    break-inside: avoid-page; /* There should not be a page break inside a table cell */
}

/* Styles of table header cells */
table th {
    padding: 1mm 2mm 1mm 2mm;
    text-align: inherit;
}

/* The other table styles */
table.styled {
    border: 2px solid yellowgreen;
    margin: 2mm 0;
    border-collapse: collapse;
}

/* Style the table header row */
table.styled thead {
    background-color: yellowgreen;
    color:white;
    font-family: Sans, sans-serif;
}

/* Have alternating colors for the rows */
table.styled tr:nth-child(even) {
    background-color: beige;
}

table.styled td:first-child {
    white-space: nowrap;
}

/*
===================================
       Disclaimer
===================================
*/
#disclaimer {
    position: running(disclaimer);
    font-size: 14pt;
    padding: 1cm 1cm;
}

#disclaimer li {
    list-style-image: url(resources/box.svg);
}

/*
===================================
       General Styles
===================================
*/
html {
    font-family: Gentium;
    -ro-line-grid: create;
}

p {
    text-align: justify;
    hyphens: auto;
}

strong {
    color: green;
}

sup {
    font-size: 0.6em;
}

pre {
    font-family: 'courier prime', monospace;
}

/*
===================================
            Preferences
===================================
*/
@-ro-preferences {
    first-page-side: right;
    page-layout: 1 column;
    initial-zoom: fit-page;
}