/* Styles for Note to World */

:root,
:root.light {
  --body-color: #224488;
  --background-color: #FFFFFF;
  --text-color: #000000;
  --blockquote-color: #AAAAFF;
  --link-color: #0000DD;
  --nav-item-color: #FFBB00;
  --nav-item-disabled-color: #AAAAAA;
  --title-color: #DDDDDD;
  --text-font: "Georgia", serif;
  --main-font-size: 18px;
  --head-font-size: 24px;
}

:root.warm {
  --body-color: #334477;
  --background-color: #EEDDBB;
  --text-color: #000000;
  --blockquote-color: #BB9999;
  --link-color: #0000CC;
  --nav-item-color: #FFBB00;
  --nav-item-disabled-color: #AAAAAA;
  --title-color: #DDDDDD;
  --text-font: "Georgia", serif;
  --main-font-size: 18px;
  --head-font-size: 24px;
}

:root.dark {
  --body-color: #223366;
  --background-color: #000000;
  --text-color: #CCCCCC;
  --blockquote-color: #228866;
  --link-color: #66AAEE;
  --nav-item-color: #FFBB00;
  --nav-item-disabled-color: #AAAAAA;
  --title-color: #DDDDDD;
  --text-font: "Open Sans", sans-serif;
  --main-font-size: 16px;
  --head-font-size: 22px;
}

:root.blue {
  --body-color: #000000;
  --background-color: #223366;
  --text-color: #DDDDDD;
  --blockquote-color: #339955;
  --link-color: #EECC00;
  --nav-item-color: #FFBB00;
  --nav-item-disabled-color: #AAAAAA;
  --title-color: #DDDDDD;
  --text-font: "Open Sans", sans-serif;
  --main-font-size: 16px;
  --head-font-size: 22px;
}

body {
  background-color: var(--body-color);
  margin: 0;
  padding: 12px;
}

.title {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  padding: 12px;
  margin: 0 auto;
  color: var(--title-color);
}

.nav-bar {
  display: block;
  text-align: center;
  padding: 12px;
  margin: 0 auto;
}

.nav-item {
  font-family: sans-serif;
  font-size: 16px;
  text-decoration: none;
  line-height: 1.2;
  padding: 0px 16px;
  color: var(--nav-item-color);
  cursor: pointer;
}

.nav-item-disabled {
  font-family: sans-serif;
  font-size: 16px;
  text-decoration: none;
  line-height: 1.2;
  padding: 0px 16px;
  color: var(--nav-item-disabled-color);
}

.content {
  display: block;
  font-family: var(--text-font);
  font-size: var(--main-font-size);
  padding: 16px;
  margin: 12px auto;
  background-color: var(--background-color);
  color: var(--text-color);
  max-width: 680px;
}

.bottom {
  display: block;
  text-align: center;
  padding: 12px;
  margin: 0 auto;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--title-color);
}


a {
    color: var(--link-color);
  }

h1 {
  display: block;
  font-size: var(--head-font-size);
  font-weight: normal;
  text-align: left;
  line-height: 1.5;
  page-break-after: avoid;
  page-break-inside: avoid;
  padding: 8px;
  margin: 0;
}
h2 {
  display: block;
  font-size: var(--head-font-size);
  font-weight: normal;
  text-align: left;
  line-height: 1.5;
  page-break-after: avoid;
  page-break-inside: avoid;
  padding: 8px;
  margin: 0;
}
p {
  display: block;
  line-height: 1.5;
  margin: 0;
  padding: 8px;
}
.subheading {
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  text-align: left;
  line-height: 1.5;
  page-break-after: avoid;
  page-break-inside: avoid;
  padding: 8px;
  margin: 8px 0 0 0;
}
.indent-box {
  display: block;
  margin: 0;
  padding: 0 0 0 32px;
  font-size: inherit;
  font-family: inherit;
}
.image-box {
  display: block;
  margin: 0;
  padding: 16px 8px;
  page-break-inside: avoid;
}
.table-box {
  display: block;
  line-height: 1.2;
  margin: 0;
  padding: 16px 8px;
  page-break-inside: avoid;
}

.image {
  max-width: 100%;
  height: auto;
}

.small-image {
  width: 240px;
  margin: 0 auto;
  display: block;
}

.medium-image {
   max-width: 480px;
   height: auto;
   margin: 0 auto;
   display: block;
}

blockquote {
  display: block;
  border-left: solid var(--blockquote-color) 8px;
  padding: 0 0 0 8px;
  margin: 8px;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
ul {
  display: block;
  list-style-type: disc;
  margin: 0 0 0 16px;
  padding: 0 0 0 32px;
  font-family: inherit;
  font-size: inherit;
}
ol {
  display: block;
  list-style-type: decimal;
  margin: 0 0 0 16px;
  padding: 0 0 0 32px;
  font-family: inherit;
  font-size: inherit;
}
li {
  display: list-item;
  line-height: 1.5;
  margin: 0;
  padding: 8px;
  font-family: inherit;
  font-size: inherit;
}

.table {
  border: var(--text-color) solid 1px;
  border-collapse: collapse;
  display: table;
  text-indent: 0;
  padding: 0;
  page-break-inside: avoid;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.table-head {
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  padding: 16px;
  border: var(--text-color) solid 1px;
}
.table-cell {
  text-align: left;
  vertical-align: top;
  padding: 16px;
  border: var(--text-color) solid 1px;
  font-family: inherit;
  font-size: inherit;
}
.table-cell-r {
  text-align: right;
  vertical-align: top;
  padding: 16px;
  border: var(--text-color) solid 1px;
  font-family: inherit;
  font-size: inherit;
}
.stars {
  display: block;
  line-height: 1.2;
  margin: 0;
  padding: 16px;
  text-align: center;
}

.tree-root {
    display: block;
    margin: 0;
    padding: 0 0 0 1em;
    font-family: inherit;
    font-size: inherit;
}
.tree-branch {
    display: block;
    margin: 0.25em;
    padding: 0 0 0 1em;
    border-left: currentColor solid 1px;
    font-family: inherit;
    font-size: inherit;
}
.tree-node {
    display: list-item;
    list-style-type: none;
    line-height: 1.2;
    margin: 0;
    padding: 0.25em;
    font-family: inherit;
    font-size: inherit;      
}
.tree-label {
}