/* These custom styles extend or override DITA Open Toolkit default styles. */

#main-content,                       /* This ID is added around the HTML5 page within Confluence HTML5 macro */
body:not(#com-atlassian-confluence), /* Apply on <body>, but avoid applying this style on Confluence <body> */
article[lang]                        /* Override a Confluence style on language attribute*/
{
  font-family: 'Open Sans', sans-serif !important;
  color: #585858;
}

[role="main"] .pre,
[role="main"] .codeph,
[role="main"] .codeblock,
[role="main"] .msgblock,
[role="main"] .msgph,
[role="main"] .cmdname {
  font-family: monospace;
  color: darkslategray;
  background-color: lightgray;
  padding: 1px;
}

[role="main"] .color { background-color: lightyellow; }


/* MEDIA5: Add a little margin to the top/bottom of the tables and images. 
           The left/right sides don't need that margin. */
[role="main"] table { margin: 5px 0px; border: thin solid; }
[role="main"] td.entry { padding: 5px; }
[role="main"] br { display: none; }

/* MEDIA5: Override the Confluence :first-child selector */
[role="main"] p, 
[role="main"] h1, 
[role="main"] h2, 
[role="main"] h3, 
[role="main"] h4, 
[role="main"] h5, 
[role="main"] h6 {
  margin-top: 10px !important;
}

[role="main"] div.topicmeta > span { font-weight: bold; }

[role="main"] div.caution > span.note__title { color: black; }
[role="main"] div.important > span.note__title,
[role="main"] div.warning > span.note__title,
[role="main"] div.danger > span.note__title { color: crimson; }

[role="main"] div.caution::before { content: url('caution.png');}
[role="main"] div.warning::before { content: url('warning.png');}
[role="main"] div.danger::before { content: url('danger.png');}

[role="main"] div.caution::before,
[role="main"] div.warning::before,
[role="main"] div.danger::before { padding: 10px; }

[role="main"] div.note,
[role="main"] div.caution,
[role="main"] div.warning,
[role="main"] div.danger { 
  border: 1px solid #ccc;
  padding: 0.5em 16px;
  border-radius: 16px;
}

[role="main"] div.danger { 
  color: black; 
  font-weight: bold; 
}

[role="main"] .linklistlabel {
  margin-bottom: 1em;
  margin-top: 1em;
  font-weight: bold;
}

[role="main"] .linklistlabel,
[role="main"] .tasklabel,
[role="main"] .sectiontitle {
  color: #585858;
}

[role="main"] article > h1 {font-size: 24px; color: black;}
[role="main"] article > h2 {font-size: 20px; color: black;}
[role="main"] article > h3 {font-size: 16px; color: black;}
[role="main"] article > h4 {font-size: 16px; color: black;}
[role="main"] article > h5 {font-size: 16px; color: black;}
[role="main"] article > h6 {font-size: 16px; color: black;}

/* Apply the chapter numbering on HTML heading that are directly under an <article> element */
/* These styles are applied only to the elements that are under the HTML element having the role "main" */ 
[role="main"] {counter-reset: h1_counter}
[role="main"] article > h1 {counter-reset: h2_counter}
[role="main"] article > h2 {counter-reset: h3_counter}
[role="main"] article > h3 {counter-reset: h4_counter}
[role="main"] article > h4 {counter-reset: h5_counter}
[role="main"] article > h5 {counter-reset: h6_counter}

[role="main"] article > h1:before {counter-increment: h1_counter; content: counter(h1_counter) ". "}
[role="main"] article > h2:before {counter-increment: h2_counter; content: counter(h1_counter) "." counter(h2_counter) ". "}
[role="main"] article > h3:before {counter-increment: h3_counter; content: counter(h1_counter) "." counter(h2_counter) "." counter(h3_counter) ". "}
[role="main"] article > h4:before {counter-increment: h4_counter; content: counter(h1_counter) "." counter(h2_counter) "." counter(h3_counter) "." counter(h4_counter) ". "}
[role="main"] article > h5:before {counter-increment: h5_counter; content: counter(h1_counter) "." counter(h2_counter) "." counter(h3_counter) "." counter(h4_counter) "." counter(h5_counter) ". "}
[role="main"] article > h6:before {counter-increment: h6_counter; content: counter(h1_counter) "." counter(h2_counter) "." counter(h3_counter) "." counter(h4_counter) "." counter(h5_counter) "." counter(h6_counter) ". "}

[role="main"] article > h1.nocount:before, 
[role="main"] article > h2.nocount:before, 
[role="main"] article > h3.nocount:before, 
[role="main"] article > h4.nocount:before, 
[role="main"] article > h5.nocount:before, 
[role="main"] article > h6.nocount:before { content: ""; counter-increment: none } 

/* Apply the chapter numbering on the 'unnumbered list' in the 'table of content' (toc) */
/* These styles are applied only to the elements that are under the HTML element having the role "toc" */ 
[role="toc"] ul { counter-reset: title_counter; }
[role="toc"] li { display: block; }
[role="toc"] li:before { counter-increment: title_counter; content: counters(title_counter, ".") ". "; margin-left: -1em; }