@import "animation.css";
@import "top_menu.css";

:root {
  --table_header_color: #ccc;
  --text_indent: 4ex;
}

.command {
  background-color: #666;
  color: #fff;
  font-family: monospace;
  padding-left: 2ex;
  padding-right: 2ex;
}

a:not(div.chapter a:hover) {
  text-decoration: none;
}

a.back {
  background: url(../img/back.svg) left center no-repeat;
}

a.forward {
  background: url(../img/forward.svg) right center no-repeat;
}

body {
  color: #333;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  margin: 0;
}

body, html {
  height: 100vh;
}

body > div.middle {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

body > div.middle > div.chapter {
  width: 75%;
}

body > div.middle > nav {
  overflow: scroll;
  padding: 10px;
  width: 25%;
}

:is(caption, figcaption) > b::after {
  content: ". ";
}

caption, figcaption, div.video > div {
  margin-bottom: 15px;
  text-align: left;
  text-decoration: underline dashed;
  text-underline-offset: 0.5em;
}

dd {
  margin-left: var(--text_indent);
  margin-top: 0.25em;
  text-align: justify;
}

dd > hr {
  color: #006;
  margin-bottom: 1em;
}

div.chapter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 5px 0;
  overflow: scroll;
  padding: 0 25px;
}

div.chapter a {
  color: #0052CC;
}

div.middle > nav {
  background-color: #f8f9ff;
}

div.middle > nav a {
  color: inherit;
  display: inline-block;
}

div.middle > nav a.current {
  background-color: #ddd;
  font-weight: bold;
}

div.middle > nav a:hover {
  background-color: #bbb;
}

div.middle > nav li {
  --margin_vertical: 0.6em;
  margin-bottom: var(--margin_vertical);
  margin-top: var(--margin_vertical);
}

div.middle > nav li.drop-down > ol {
  display: none;
}

div.middle > nav li.drop-down > a::before {
  content: "⯈ ";
  font-weight: initial;
}

div.middle > nav li.expanded > a::before {
  content: "⯆ ";
  font-weight: initial;
}

div.middle > nav ol {
  list-style-type: none;
  margin: 0;
}

div.middle > nav > ol {
  padding: 0;
}

div.middle > nav > ol, dl.content {
  counter-reset: level_1;
}

:is(div.middle > nav > ol > li, dl.content > dt) > a > span::before {
  content: counter(level_1) ".";
  counter-increment: level_1;
}

div.middle > nav > ol > li > ol, dl.content > dd > dl {
  counter-reset: level_2;
}

:is(div.middle > nav > ol > li > ol > li, dl.content > dd > dl > dt) > a > span::before {
  content: counter(level_1) "." counter(level_2) ".";
  counter-increment: level_2;
}

div.middle > nav > ol > li > ol > li > ol, dl.content > dd > dl > dd > dl {
  counter-reset: level_3;
}

:is(div.middle > nav > ol > li > ol > li > ol > li, dl.content > dd > dl > dd > dl > dt) > a > span::before {
  content: counter(level_1) "." counter(level_2) "." counter(level_3) ".";
  counter-increment: level_3;
}

div.middle > nav > ol > li > ol > li > ol > li > ol, dl.content > dd > dl > dd > dl > dd > dl {
  counter-reset: level_4;
}

:is(
div.middle > nav > ol > li > ol > li > ol > li > ol > li,
dl.content > dd > dl > dd > dl > dd > dl > dt
) > a > span::before {
  content: counter(level_1) "." counter(level_2) "." counter(level_3) "." counter(level_4) ".";
  counter-increment: level_4;
}

div.middle > nav > ol > li > ol > li > ol > li > ol > li > ol, dl.content > dd > dl > dd > dl > dd > dl > dd > dl {
  counter-reset: level_5;
}

:is(
div.middle > nav > ol > li > ol > li > ol > li > ol > li > ol > li,
dl.content > dd > dl > dd > dl > dd > dl > dd > dl > dt
) > a > span::before {
  content: counter(level_1) "." counter(level_2) "." counter(level_3) "." counter(level_4) "." counter(level_5) ".";
  counter-increment: level_5;
}

div.video {
  margin-bottom: 1em;
  margin-top: 1em;
}

div.video, figure, ol.content {
  display: table;
}

div.video, figure, ol.content, table {
  margin-left: auto;
  margin-right: auto;
}

figure img {
  box-sizing: border-box;
  max-width: 100%;
}

footer {
  background-color: #99a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: small;
  color: #fff;
  padding: 5px 0;
}

footer a {
  color: #fff;
  margin-left: 2ex;
}

footer :is(a:active, a:hover) {
  color: #ddf;
  margin-left: 2ex;
}

h1 {
  font-size: 200%;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1em;
  margin-top: 1.4em;
}

h2, h3, h4, h5, h6 {
  font-size: 140%;
}

:is(h2, h3, h4, h5) ~ :is(h3, h4, h5, h6) {
  margin-top: 0.5em;
}

:is(h2, h3, h4, h5):has(+ :is(h3, h4, h5, h6)) {
  margin-bottom: 0.5em;
}

:is(h2, h3, h4, h5, h6) > span {
  border-bottom: dotted 2px;
  color: #666;
  display: inline-block;
}

h2.nesting_1 > span {
  width: 3ex;
}

h2.nesting_2 > span {
  width: 4ex;
}

h3.nesting_2 > span {
  width: 7ex;
}

h2.nesting_3 > span {
  width: 6ex;
}

h3.nesting_3 > span {
  width: 9ex;
}

h4.nesting_3 > span {
  width: 12ex;
}

h2.nesting_4 > span {
  width: 8ex;
}

h3.nesting_4 > span {
  width: 11ex;
}

h4.nesting_4 > span {
  width: 14ex;
}

h5.nesting_4 > span {
  width: 17ex;
}

h2.nesting_5 > span {
  width: 10ex;
}

h3.nesting_5 > span {
  width: 13ex;
}

h4.nesting_5 > span {
  width: 16ex;
}

h5.nesting_5 > span {
  width: 19ex;
}

h6.nesting_5 > span {
  width: 22ex;
}

header {
  background-color: #001166;
  display: flex;
  font-size: 18px;
  justify-content: space-between;
  padding: 5px 0;
}

header > a {
  display: contents;
}

header > a > img {
  margin: 0 20px;
}

header div.dropdown img {
  margin-right: 20px;
  vertical-align: bottom;
}

main {
  flex: 1;
}

main img {
  border: 1px solid #006;
  border-radius: 10px;
  cursor: pointer;
  padding: 5px;
}

main :is(ol, ul) {
  text-align: justify;
}

nav.back_forward {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

nav.back_forward a {
  display: table-cell;
  height: 45px;
  padding-bottom: 1.0em;
  padding-top: 1.0em;
  text-align: center;
  vertical-align: middle;
  width: 50ex;
}

nav.back_forward a > span::after {
  content: " ";
}

nav.back_forward div:first-child a {
  padding-left: 8.0ex;
  padding-right: 2.0ex;
}

nav.back_forward div:last-child a {
  padding-left: 2.0ex;
  padding-right: 8.0ex;
}

nav.back_forward > span {
  font-size: 70%;
  text-align: center;
}

ol, ul {
  list-style-position: inside;
  padding-left: var(--text_indent);
}

p {
  text-indent: var(--text_indent);
  text-align: justify;
}

p ~ :is(ol, ul) {
  padding-left: 10ex;
}

table {
  border-collapse: collapse;
  margin-bottom: 1em;
  margin-top: 1em;
}

table, td, th {
  border: 1px solid black;
}

table > tbody > tr > th {
  text-align: left;
}

table.listing {
  counter-reset: row_num;
}

table.listing td:first-child::before {
  content: counter(row_num);
  counter-increment: row_num;
}

table td:first-child {
  text-align: center;
}

td, th {
  padding: 5px;
}

th, thead {
  background-color: var(--table_header_color);
}