/*
 * Styles for all Topic pages.
 */

/*
 * Styles for Page (h1 & h2) and Article headings (h3, h4, h5, h6).
 */
h2 {
  text-align: center;
  font-size: 1.8em;
  text-decoration: underline;
}
h3 {
  font-size: 1.5em;
}
h4 {
  color: #0484c9;
  font-size: 1.2em;
  font-style: italic;
}
h4 em {
  text-decoration: underline;
}
h5 {
  color: #0484c9;
  font-size: 1em;
  text-decoration: underline;
}
h6 {
  color: #0484c9;
  font-size: .8em;
  font-style: italic;
}
h6 em {
  text-decoration: underline;
}
abbr {
  border-bottom: 1px dotted #0484c9;
  text-decoration: none;
}


/*
 * Create Table of Contents hierarchy with cascading numbering.
 * These may be nested indefinitely.
 */
ol.table-of-contents {
  counter-reset: item;
  padding-inline-start: 1em;
}
ol.table-of-contents li {
  display: block;
}
ol.table-of-contents li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}


/*
 * Create Article Heading hierarchy with cascading numbering.
 *
 * Topic pages use a single h1 for the course title and a single h2 for the page title.
 * Thus sections start with the h3 level heading element.  These rules support a
 * hierarchy of sections four deep, h3 - h6.
 */
body {
  counter-reset : h3;
}
h3 {
  counter-reset : h4;
}
h4 {
  counter-reset : h5;
}
h5 {
  counter-reset : h6;
}
article h3:before {
  content : counter(h3,decimal) "\0000a0\0000a0";
  counter-increment : h3;
}
article h4:before {
  content : counter(h3,decimal) "." counter(h4,decimal) "\0000a0\0000a0";
  counter-increment : h4;
}
article h5:before {
  content : counter(h3,decimal) "." counter(h4,decimal) "." counter(h5,decimal) "\0000a0\0000a0";
  counter-increment : h5;
}
article h6:before {
  content : counter(h3,decimal) "." counter(h4,decimal) "." counter(h5,decimal) "." counter(h6,decimal) "\0000a0\0000a0";
  counter-increment : h6;
}
h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before {
  content : "";
  counter-increment : none;
}


/*
* A class for highlighting sections of a Topic page.
* Mostly used for highlighting exercises but it could be anything.
* The highlighting gets triggered by using an element's id in the URL for the page.
* Everything in the scope of that element is highlighted.
*/
.highlight {
  border-left: 5px solid yellow;
  padding-left: 5px;
}