~~NOTOC~~
|<100% 25% - >|
^  \\ DATA ANALYTICS REFERENCE DOCUMENT\\ \\   ^^
^  Document Title:|Document Title|
^  Document No.:|1638284256|
^  Author(s):|Gerhard van der Linde|
^  Contributor(s):|  |



**REVISION HISTORY**
|< 100% 10% - - 10% 17% 10% >|
^  \\  Revision\\  \\  ^\\ Details of Modification(s)^\\ Reason for modification^  \\ Date  ^  \\ By  ^
|  [[:doku.php?id=help:wiki:dwpdf_styles&do=revisions|0]]  |Draft release|Document description here|  2021/11/30 14:57  |  Gerhard van der Linde  |


----

====== DWPDF Styling ======

<WRAP center round info 60%>
info box
</WRAP>


===== Style CSS =====


<code css style.css>
/* @import '../../../../../conf/userstyle.css'; */
@import 'userstyle.css';

/*.wrap_third, .code {
  border: solid 0.5mm #DDDDDD;
  padding: 2mm;
  border-radius: 2mm 2mm;
  width: 100%;
}*/

.code {
  background-color: #EEEEEE;
  border-radius: 2mm 2mm;
}

table, th, td {
 padding: 5px;
 padding-right: 10px;
 padding-left: 10px;
}

table {
    width: 100%;
}

th {
    background-color: #E8E8E8;
}

p, ul, ol, td  {
    font-size: 9pt;
}

/*added by jattie on Sunday 17 Feb 2019 to decrease font size of pdf code sections*/
.code {
    font-size: 80%;
}

/*added by jattie on Mon 4 March to force code comment green printing*/
.code .co1, .code .co2 { color: #008000; }

/*  Added by Jattie on 5 Dec 2017 to round announcement box headers*/
.wrap_round h2,
.wrap_round h3,
.wrap_round h4,
.wrap_round h5 {
    border-radius: 1.1em 1.1em 0em 0em;
}

table.pdfheader {
    font-size: 8pt;
    border-collapse: collapse;
    border-bottom: 1px solid #000000;
    clear: both;
}

table.pdffooter {
    font-size: 8pt;
    border-collapse: collapse;
    border-top: 1px solid #000000;
    clear: both;
}

/* Table of Content -- see http://mpdf1.com/manual/index.php?tid=243 */
div.mpdf_toc {
}
a.mpdf_toc_a {
    color: black; /* links black as well */
}
/* Whole line level 0 */
div.mpdf_toc_level_0 {
    line-height: 1.5;
    margin-left: 0;
    padding-right: 1em; /* padding-right should match e.g <dottab outdent="2em" /> 0 is default */
}
/* Title level 0 - may be inside <a> */
span.mpdf_toc_t_level_0 {
}
/* Page no. level 0 - may be inside <a> */
span.mpdf_toc_p_level_0 {
}
/* Whole line level 1 */
div.mpdf_toc_level_1 {
    margin-left: 1em;
    text-indent: -1em;
    padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */
}
/* Title level 1 */
span.mpdf_toc_t_level_1 {
}
/* Page no. level 1 - may be inside <a> */
span.mpdf_toc_p_level_1 {
}
/* level 2 */
div.mpdf_toc_level_2 {
    margin-left: 2em;
    text-indent: -1em;
    padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */
}
span.mpdf_toc_t_level_2 {}
span.mpdf_toc_p_level_2 {}

/* level 3 */
div.mpdf_toc_level_3 {
    margin-left: 3em;
    text-indent: -1em;
    padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */
}
span.mpdf_toc_t_level_3 {}
span.mpdf_toc_p_level_3 {}

/* level 4 */
div.mpdf_toc_level_4 {
    margin-left: 4em;
    text-indent: -1em;
    padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */
}
span.mpdf_toc_t_level_4 {}
span.mpdf_toc_p_level_4 {}

</code>

===== Userstyle CSS =====

<code css userstyle.css>
.wrap_third {
  border-radius: 5px;
  padding: 5px;
}

div.dokuwiki h1 { color: #78BE20; }
div.dokuwiki h2 { color: #00A9E0; }
div.dokuwiki h3 { color: #8031A7; /*color: #53565A;*/ }

/*added by Jattie on 4 March 2019 to adjust code comment colour*/

.code .co1, .code .co2 { color: #008000; }


/* Styles added by Jattie on 5 December 2017 to add coloured boxes*/

/* FONT SIZES */
.dokuwiki div.wrap_smaller { font-size: 90%; }
.dokuwiki div.wrap_smallest { font-size: 80%; }
.dokuwiki div.wrap_larger { font-size: 110%; }
.dokuwiki div.wrap_largest {font-size: 120%; }

/* CONTAINER CLASS FOR ANNOUNCEMENTS & DEFAULT COLOURS*/
.dokuwiki div.wrap_announcement {
    padding: 10px 10px 0px;
    margin-bottom: 1.5em;
    overflow: hidden;
    background-color: #eeeeee;
    border: 2px solid #bbbbbb;
}

/* DEFAULT COLOURS & MODS FOR HEADINGS IN ANNOUNCEMENTS. */
.dokuwiki div.wrap_announcement h2,
.dokuwiki div.wrap_announcement h3,
.dokuwiki div.wrap_announcement h4,
.dokuwiki div.wrap_announcement h5,
.dokuwiki div.wrap_announcement h6 {
    padding: 5px 10px 3px;
    margin: -10px -10px 10px;
    border: 0;
    color: #000000;
    background-color: #bbbbbb;
}

.dokuwiki span.wrap_danger { background-color: #DA1884; color: #FFDDEE;}
.dokuwiki span.wrap_warning { background-color: #FF6A13; color: #FFEEE6;}
.dokuwiki span.wrap_caution { background-color: #EEDC00; color: #FFFBCC;}


/* ANNOUNCEMENT COLORS */
.dokuwiki div.wrap_green {
    background-color: #EDFFD6; /*#f6fff0;*/
    border: 2px solid #78BE20; /*__cpb_green__;*/
}
.dokuwiki div.wrap_blue {
    background-color: #DBF6FF; /*#f0f8ff;*/
    border: 2px solid #00A9E0; /*__cpb_blue__;*/
}
.dokuwiki div.wrap_orange {
    background-color: #FFEEE6;
    border: 2px solid #FF6A13; /*__cpb_orange__;*/
}
.dokuwiki div.wrap_red {
    background-color: #FFDDEE;
    border: 2px solid #DA1884; /*__cpb_red__;*/
}
.dokuwiki div.wrap_yellow {
    background-color: #FFFBCC;
    border: 2px solid #EEDC00; /*__cpb_yellow__;*/
}
.dokuwiki div.wrap_purple {
    background-color: #F6E3FF;
    border: 2px solid #8031A7; /*__cpb_purple__;*/
}
.dokuwiki div.wrap_aqua {
    background-color: #E8FFFE;
    border: 2px solid #00B2A9; /*__cpb_aqua__;*/
}

/* CUSTOM COLOUR MODS FOR HEADINGS IN ANNOUNCEMENTS. - Amended by Jattie on 6 Dec 2017 */
.dokuwiki div.wrap_green h2, .dokuwiki div.wrap_green h3, .dokuwiki div.wrap_green h4,
.dokuwiki div.wrap_green h5, .dokuwiki div.wrap_green h6
{ background-color: #78BE20;/*__cpb_green__;*/
  color: #EDFFD6;
}

.dokuwiki div.wrap_blue h2, .dokuwiki div.wrap_blue h3, .dokuwiki div.wrap_blue h4,
.dokuwiki div.wrap_blue h5, .dokuwiki div.wrap_blue h6
{ background-color: #00A9E0;/*__cpb_blue__;*/
  color: #DBF6FF;
}

.dokuwiki div.wrap_orange h2, .dokuwiki div.wrap_orange h3, .dokuwiki div.wrap_orange h4,
.dokuwiki div.wrap_orange h5, .dokuwiki div.wrap_orange h6
{ background-color: #FF6A13;/*__cpb_orange__*/;
  color: #FFEEE6;
}

.dokuwiki div.wrap_red h2, .dokuwiki div.wrap_red h3, .dokuwiki div.wrap_red h4,
.dokuwiki div.wrap_red h5, .dokuwiki div.wrap_red h6
{ background-color: #DA1884; /*__cpb_red__*/;
  color: #FFDDEE;
}

.dokuwiki div.wrap_yellow h2, .dokuwiki div.wrap_yellow h3, .dokuwiki div.wrap_yellow h4,
.dokuwiki div.wrap_yellow h5, .dokuwiki div.wrap_yellow h6
{ background-color: #EEDC00;/*__cpb_yellow__;*/
  color: #ffffff; /*#AB9E00; #8C8200;*/
}

.dokuwiki div.wrap_purple h2, .dokuwiki div.wrap_purple h3, .dokuwiki div.wrap_purple h4,
.dokuwiki div.wrap_purple h5, .dokuwiki div.wrap_purple h6
{ background-color: #8031A7;/*__cpb_purple__;*/
  color: #F6E3FF;
}

.dokuwiki div.wrap_aqua h2, .dokuwiki div.wrap_aqua h3, .dokuwiki div.wrap_aqua h4,
.dokuwiki div.wrap_aqua h5, .dokuwiki div.wrap_aqua h6
{ background-color: #00B2A9; /*__cpb_aqua__;*/
  color: #CCFFFC;
}

</code>