﻿<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" version="5.0" encoding="UTF-8"/>
  <xsl:template name="IncludeCSS">
    <style>

      @page {
      <!-- Layout portrait, paper A4, 210mm x 297mm -->
      size: 210mm 297mm;
      margin-left: 20mm;
      margin-right: 15mm;
      margin-top: 13mm;
      margin-bottom: 8mm;
      }

      body {
      margin: 0;
      <!-- Use CSS counters to count the pages. Create and initialize the counter. Increment it to start with page number 1 -->
      counter-reset: pageNumber;
      counter-increment: pageNumber;
      }

      <!-- Define a a fixed block height. Used by a div that covers the whole page inside the borders: height = 297mm - 13mm - 8mm = 276mm -->
      <!-- So there is no need to use any additional page-breaks! -->
      .page {
        position: relative;
        height: 276mm;
      }

      <!-- With the fixed block height it is possible to place the footer properly at the bottom -->
      .tabletype-footer {
        position: absolute;
        bottom: 0;
      }

      div.page-break {
      counter-increment: pageNumber;
      }

      @media screen{
      div.page-break {
        <!-- On the screen draw a dashed red line to visualize page breaks -->
        border-style: none none dashed none;
        border-width: 0.4pt;
        border-color: red;
        }
      }


    <!--
    ============================================================================
    Table types from E+H specification document for Verification Reports
    (further table types were added here)
    ============================================================================
    -->

      table {
      <!--border-collapse: separate;-->
      border-spacing: 0;
      <!-- For diagnostics only -->
      <!--border-style: dotted;
      border-width: 0.4pt;
      border-color: blue;-->
      table-layout: fixed;
      width: 100%;
      word-wrap: break-word;
      }

      tr {
      <!-- default height for rows in any table -->
      height: 5.3mm;
      }

      td {
      text-align: left;
      vertical-align: middle;
      padding-left: 0;
      padding-right: 0;
      }


      <!-- Table type for page header  175mm -->
      <!-- 2 columns                         -->
      <!-- ==================================-->
      tr.tabletype-header {
      height: 28mm;
      }

      td.tabletype-header-col1 {
      width: 105mm;
      white-space:pre;
      }

      td.tabletype-header-col2 {
      width: 70mm;
      text-align: right;
      }

      <!-- Table type for page footer  175mm -->
      <!-- 3 columns                         -->
      <!-- ==================================-->

      table.tabletype-footer {
      margin-top: 5mm;
      }
        
      td.tabletype-footer-col1 {
      width: 58mm;
      text-align: left;
      vertical-align: middle;
      }

      td.tabletype-footer-col2 {
      width: 59mm;
      text-align: center;
      color: white; <!-- white color! Text shall be invisible but selectable for copy&paste -->
      vertical-align: middle;
      }

      td.tabletype-footer-col3 {
      width: 58mm;
      text-align: right;
      vertical-align: middle;
      }

      <!-- refer to explanation of CSS selectors here: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize&#x002D;&#x002D;net-16048 -->
      <!-- places content (the page number) after the element where the style was applied. -->
      td.tabletype-footer-col3:after {
      content: counter(pageNumber);
      }


      <!-- Table type A  125mm -->
      <!-- 3 columns + 1 placeholder column for image -->
      <!-- ====================-->
      td.tabletype-a-col1 {
      width: 86mm;
      }

      td.tabletype-a-col2 {
      width: 2mm;
      }

      td.tabletype-a-col3 {
      width: 37mm;
      }

      td.tabletype-a-col4 {
      <!-- placeholder column for image only!-->
      width: 50mm;
      text-align: right;
      vertical-align: top;
      }

      <!-- Table type B  175mm -->
      <!-- 3 columns           -->
      <!-- ====================-->
      td.tabletype-b-col1 {
      width: 86mm;
      }

      td.tabletype-b-col2 {
      width: 2mm;
      }

      td.tabletype-b-col3 {
      width: 87mm;
      }

      <!-- Table type E  175mm -->
      <!-- 1 column            -->
      <!-- ====================-->
      td.tabletype-e-col1 {
      width: 175mm;
      }

      <!-- Table type F  175mm -->
      <!-- 5 columns           -->
      <!-- ====================-->
      td.tabletype-f-col1 {
      width: 29mm;
      text-align: center;
      padding-top: 2mm;
      }

      td.tabletype-f-col2 {
      width: 8mm;
      }

      td.tabletype-f-col3 {
      width: 65mm;
      text-align: center;
      padding-top: 2mm;
      }

      td.tabletype-f-col4 {
      width: 8mm;
      }

      td.tabletype-f-col5 {
      width: 65mm;
      text-align: center;
      padding-top: 2mm;
      }

      <!-- Table type G  175mm -->
      <!-- 9 columns           -->
      <!-- column 2 and 3 are 4 times repeated -->
      <!-- ====================-->
      td.tabletype-g-col1 {
      width: 87mm;
      }

      td.tabletype-g-col2n {
      width: 2mm;
      }

      td.tabletype-g-col3n {
      width: 20mm;
      }

      <!-- Table type H  175mm -->
      <!-- 4 columns           -->
      <!-- ====================-->
      td.tabletype-h-col1 {
      width: 63mm;
      }

      td.tabletype-h-col2 {
      width: 58mm;
      }

      td.tabletype-h-col3 {
      width: 2mm;
      }

      td.tabletype-h-col4 {
      width: 52mm;
      }


      <!-- Table type J  175mm -->
      <!-- 5 columns           -->
      <!-- ====================-->
      td.tabletype-j-col1 {
      width: 102mm;
      }

      td.tabletype-j-col2 {
      width: 2mm;
      }

      td.tabletype-j-col3 {
      width: 26mm;
      text-align: center;
      }

      td.tabletype-j-col4 {
      width: 2mm;
      }

      td.tabletype-j-col5 {
      width: 43mm;
      text-align: center;
      }

      <!-- Table type K  175mm -->
      <!-- 12 columns          -->
      <!-- column 4 and 5 are 3 times repeated -->
      <!-- ====================-->
      td.tabletype-k-col1 {
      width: 54mm;
      }

      td.tabletype-k-col2 {
      width: 21mm;
      }

      td.tabletype-k-col3 {
      width: 2mm;
      }

      td.tabletype-k-col4 {
      width: 12mm;
      text-align: center;
      }

      td.tabletype-k-col5n {
      width: 2mm;
      }

      td.tabletype-k-col6n {
      width: 14mm;
      text-align: center;
      }

      td.tabletype-k-col11 {
      width: 2mm;
      }

      td.tabletype-k-col12 {
      width: 36mm;
      text-align: center;
      }





      <!--
    ============================================================================
    Layout types from E+H specification document for Verification Reports
    ============================================================================
    -->

      tr.layouttype-1 {
      font-family: "E+H Serif", courier, serif;
      font-size: 14pt;
      font-weight: bold;
      <!-- color: rgb(0, 158, 227); cyan 1 -->
      color: rgb(168, 0, 92); <!-- magenta 2 -->
      }

      tr.layouttype-2 {
      <!-- Demi does not work! Instead use font-weight: bold -->
      <!--font-family: "E+H Sans Demi", courier, serif;-->
      font-family: "E+H Sans", courier, serif;
      font-weight: bold;
      <!-- Changed from 9.5pt to 11pt according to Jira FLV-181 -->
      font-size: 11pt;
      <!-- color: rgb(0, 124, 170); cyan3 -->
      color: black;
      }

      tr.layouttype-4 {
      <!-- Demi does not work! Instead use font-weight: bold -->
      <!--font-family: "E+H Sans Demi", courier, serif;-->
      font-family: "E+H Sans", courier, serif;
      font-weight: bold;
      font-size: 8pt;
      color: black;
      }

      tr.layouttype-5 {
      font-family: "E+H Sans Light", courier, serif;
      font-size: 8pt;
      color: black;
      }

      a.hyperlink {
      font-family: "E+H Sans Light", courier, serif;
      font-size: 8pt;
      color: rgb(168, 0, 92); <!-- magenta 2 -->
      }

      tr.layouttype-10 {
      <!-- Demi does not work! Instead use font-weight: bold -->
      <!--font-family: "E+H Sans Demi", courier, serif;-->
      font-family: "E+H Sans", courier, serif;
      font-weight: bold;
      font-size: 8pt;
      <!-- color: rgb(0, 124, 170); cyan3 -->
      color: black;
      }

      tr.layouttype-11 {
      font-family: "E+H Sans Light", courier, serif;
      font-size: 8pt;
      color: black;
      }

      tr.layouttype-12 {
      font-family: "E+H Sans Light", courier, serif;
      font-size: 6.5pt;
      color: black;
      }

      td.layouttype-2 {
      border-style: none none solid none;
      border-width: 0.4pt;
      <!-- border-color: rgb(0, 124, 170); cyan3 -->
      border-color: black;
      }

      td.layouttype-4 {
      border-width: 0.4pt;
      border-style: none none solid none;
      <!-- border-color: rgb(80, 102, 113); wintergrey4 -->
      border-color: black;
      }

      td.layouttype-5a {
      border-width: 0.4pt;
      border-style: none none dashed none;
      <!-- border-color: rgb(80, 102, 113); wintergrey4 -->
      border-color: black;
      }

      td.layouttype-5ax {
      border-style: none;
      }

      td.layouttype-5b {
      border-width: 0.4pt;
      border-style: none none solid none;
      <!-- border-color: rgb(80, 102, 113); wintergrey4 -->
      border-color: black;
      }

      td.layouttype-5c {
      border-width: 0.4pt;
      border-style: none none solid none;
      <!-- border-color: rgb(80, 102, 113); wintergrey4 -->
      border-color: black;
      vertical-align: top;
      }

      td.layouttype-11 {
      border-width: 0.4pt;
      border-style: solid none none none;
      }

      p.layouttype-9 {
      font-family: "E+H Sans Light", courier, serif;
      font-size: 6.5pt;
      color: black;
      }


      .bargraph-image {
      width: 34.4mm;
      height: 3mm;
      margin-top: 1mm;
      <!--vertical-align: middle;-->
      }

      .bargraph-rect-empty {
      stroke: black;
      stroke-width: 2;
      fill: white;
      }

      .bargraph-rect-filled {
      stroke: black;
      stroke-width: 2;
      fill: black;
      }

      .verification-history-image {
      width: 170mm;
      padding: 2.5mm;
      }

      .verification-result-image {
      width: 4mm;
      height: 4mm;
      margin-right: 1mm;
      vertical-align: top;
      }

      .eh-logo-image {
      width: 60mm;
      height: 12.1mm;
      }

      .heartbeat-logo-image {
      width: 44mm;
      height: 17.8mm;
      }

      .placeholder-image {
      width: 175mm;
      height: 3mm;
      }
      .placeholder-rect-invisible {
      stroke: none;
      stroke-width: 0;
      fill: none;
      }
    </style>
  </xsl:template>
</xsl:stylesheet>
