/* Do I need to specify background-color: #FFFFFF; color: #000000; */

/* Many colors are from Color Combo 124 at http://www.colorcombos.com/color-schemes/124/ColorCombo124.html */
/* Background E8D0A9 when click Sepia button */
/* Intro style blockquotes C1DAD6 pale green */
/* Definition style blockquotes ACD1E9 */
/* ??? 6D929B */
/* Tables D9D4CE */
/* Lists F5FAFA very light gray */

body {max-width: 1100px; margin-left: auto; margin-right: auto; margin-bottom: 36px; -webkit-text-size-adjust: 100%;}

/*  max-width: 1100px; margin-left: auto; margin-right: auto; margin-bottom: 36px; */

/* Header styles */
/* <hr> can be used with h2, used to be color #353566 */
h1, h2, h3, h4 {font-family: Skia, Georgia; text-decoration: none; font-weight: normal; font-style: normal; text-align: left; page-break-after: avoid; margin: 18px 24px 0px 24px; clear: both; text-shadow: 1px 1px #D5D5D5;}
h1 {color: #3B5E80; font-size: 290%; text-indent: 0; text-align: center;}        /* Dark Blue, Centered */
h2 {color: #3B803B; font-size: 260%; text-indent: 0;}                            /* Green */
h3 {color: #805E3B; font-size: 190%; text-indent: 0.3em; font-weight: 500; clear: left;}    /* Brown, 400 normal vs 700 bold */
h3.npcname {clear: both;}
h4 {color: #3B5E80; font-size: 120%; text-indent: 0.6em;  font-style: italic; clear: left;}   /* Light Blue, Italic */
hr {color: #333366; background-color: #333366; width: 60%; height: 2px; border: 0; page-break-after: avoid; margin-top: 30px; margin-bottom: 30px;}

/* Paragraph styles */
p {text-decoration:none; text-indent: 2em; margin: 10px 36px 0px 36px; line-height:120%; -webkit-text-size-adjust: none;}
p.noindent {text-indent: 0;}
p.hanging {text-indent: -1.5em; margin-left: 5em; margin-right: 5em;}
p.nomargins {text-indent: 0; margin: 0; padding: 0;}  /* Used for horizontal menus */
p.left {float: left; margin: 0 12px 2px 18px; border-style: none;}
p.right {float: right; margin: 0 18px 2px 12px; border-style: none;}
p.comment   {color: #330000; font-style: italic;  font-size:92%;}
p.exampletitle  {color: #4D5F60; font-style: italic;  font-size:112%; text-indent: 0.2em;}
p.hidden {text-indent: 4em; color: teal; font-size:80%; font-weight: 200; display: none;}
p.NPCname {color: #4D5F60; font-style: italic;  font-size:112%; text-indent: 0; margin: 2px 0px 8px 0px;}
p.skillbreak {text-indent: 0; margin: 0px 0px 6px 0px;}
p.menu {font-size: 90%; margin: 6px 2px 0px 2px;}
p.formula {white-space: pre; font-family: monospace; color: #5C5C8A; margin-top: 8px; text-indent: 4em;}
p.parchment {font-family: Charm; font-size: 120%;}
bdo {font-size: 150%; font-family: David; font-weight: normal; letter-spacing: normal; direction: rtl;}

/* Text styles -- Strong and Span */
/* Strong used to have background-color C5F5C5 or A6D686 or C7DAFF, Menulinetitle used to have BF3DA2 */
strong  {color: #330000; font-size: 100%; font-weight: 600; text-shadow: 2px 1px #D5D5D5; padding: 1px; background-color: #F8F8FF;}
span.blue, span.green, span.orange, span.red {color: blue; background-color: #F5F5C5; font-size: 90%; font-weight: 600; padding: 1px;}
span.green {color: green;}
span.orange {color: orange;}
span.red {color: red;}
span.ebooksection {color: #D19D00; font-style: italic;  font-size: 50%; font-weight: 200; margin-left: 10px;}
span.formula {color: #5C5C8A; font-weight: 200;}
span.strongformula {color: #5C5C8A; background-color: #C5F5C5; font-weight: 700;}
span.bigparenthesis {font-size: 160%; font-weight: 100; padding-left: 0.2em; padding-right: 0.2em; vertical-align: -10%;}
span.video {font-size: 80%; color: DarkGreen; font-family: Arial, Helvetica, sans-serif;}
span.hw {font-size: 80%; color: Firebrick; font-family: Arial, Helvetica, sans-serif;}
span.loot {color: #D19D00; background-color: #FBFFBF; font-weight: 600;}
span.comment  {color: #330000; font-style: italic;  font-size:80%;}
span.menulinetitle {color: #6D929B; border-bottom: 1px solid #4D0099; padding: 1px; font-size:110%;}
sup {font-size: 70%; vertical-align: 50%;}
sub {font-size: 70%; vertical-align: -40%;}

/* Blockquote Styles */
/* Intro used to have background-color AAC99A, Definition used to be E3BF5B */
blockquote {color: #000000; background-color: #F7F7F7; border: 2px solid #F5F5F5; border-left: 3px solid #F0F0F0; border-right: 3px solid #F0F0F0; padding: 6px; width: 80%; margin-left: auto; margin-right: auto; clear: both;}
blockquote.centered {text-align: center; vertical-align: middle;}
blockquote.intro  {background-color: #C1DAD6; border: 1px solid #B399CC;}
blockquote.dnote {background-color: #FBFFBF; border: 1px solid #693F0A; display: none;}
blockquote.video {background-color: #9BE496; border: 1px solid #05350E; border-left: 5px solid #05350E; border-right: 5px solid #05350E;}
blockquote.hw {background-color: LavenderBlush; border: 1px solid LightCoral; border-left: 5px solid LightCoral; border-right: 5px solid LightCoral;}
blockquote.interlude {background-color: #EECCA9; border: 1px solid #625345; border-left: 5px solid #625345; border-right: 5px solid #625345;}
blockquote.definition {width: 70%; background-color: GhostWhite; border: 1px dashed black;}
blockquote.studyskill  {width: 80%; background-color: #F5B7B1; border: 1px solid #DC7633; border-left: 5px solid #DC7633; border-right: 5px solid #DC7633;}
blockquote.woodboards {background-image: url("https://unblast.com/wp-content/uploads/2020/05/Light-Wood-Background-Texture-5-1024x682.jpg"); background-repeat: repeat-y; max-width: 800px; background-color: #fdf1dc; box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5); border: 1px solid #fdf1dc;}
blockquote.parchment {border: none; border-radius: 12px; padding: 1em; box-shadow: 2px 3px 24px black, 0 0 48px #8a4d0f inset; background: #fffef0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);}

/* Input -- for paragraph before dnote blockquote and for paragaph before video links */
input {background-color: #FBFFBF; border: 1px solid #693F0A; font-size: 60%; font-style: italic; margin: 0px 0px 0px 18px; white-space: nowrap;}
input.image {border: none; margin: 0px 6px 0px 6px;}

/* Link styles */
/* Links used to do font-weight:bold; font-size:92%; */
/* Plain text for generic anchor is needed to keep bookmarks (<a name="">bookmark</a>) from having underlines */
a {text-decoration: none;}
a:link, a:visited, a[href]:hover {text-decoration: underline; color: #4D0099; font-weight: 500;}
a[href]:hover {background-color: #F2E5FF; border-bottom: 1px solid #4D0099;}
a.skill:link, a.skill:visited, a[href].skill:hover {text-decoration: none; color: #614039; font-size:90%;}
a.talent:link, a.talent:visited, a[href].talent:hover {text-decoration: none; color: #3B803B; font-size:90%;}
a.footnote {color: #008B8B; font-size: 30%; vertical-align: 30%; font-weight: 400; line-height:100%; border-bottom: none; text-decoration: none;}

/* List Styles */
/* Background color used to be FAFAFA */
/* ordered lists automatically continue through the document, for math example problems */
ul {margin-top: 10px; margin-bottom: 18px; margin-left: auto; margin-right: auto; padding-left: 2em; padding-bottom: 6px; background-color: #F2F2E4; border: 1px solid #DAC7A3; border-top: 5px solid #DAC7A3; border-bottom: 5px solid #DAC7A3; width: 85%; clear: both; -webkit-text-size-adjust: 100%; font-size: 100%;}
ul.noindent {padding-left: 0;}
ul.plain {list-style-type: none; background-color: transparent; border: none;}
li {font-size: 100%; -webkit-text-size-adjust: 100%; vertical-align: top; padding: 0;}
ul li {margin: 10px 18px 0px 18px;}
ul li.singlespaced {margin: 0px 18px 0px 18px;}
ol {list-style: none; margin-bottom: 0px;}
ol:first-of-type {counter-reset: mycounter;}
ol li {color: SteelBlue; margin: 0px; text-indent: 2em;}
ol li:before {color: MidnightBlue; font-weight: 600; padding: 1px; counter-increment: mycounter; content: counter(mycounter) ". ";}


/* List Styles for the Recipe pages */
li.ingredients {margin: 0px 18px 0px 18px; color: #663300;}

/* List Styles for Menus */
ul.Menu {float:left; width: auto; list-style-type: none; background-color: #A9CCE3; margin: 6px 12px 4px 18px; padding: 0px 2px 6px 2px; border: 2px solid #3B5E80; clear:none;}
li.Menu, li.MenuH1, li.MenuH2, li.Exercises, li.Test, li.Interlude {margin: 4px; height: 16px; vertical-align: bottom;}
li.Menu, li.Exercises, li.Interlude {margin-left: 20px; padding-bottom: 2px;}
li.Test {margin-top: 12px;}
li.Menu::before {content: "\2022 "; padding-right: 4px;}
li.Exercises::before {content: "\2713 "; padding-right: 4px; font-size: 70%; color: SteelBlue;}
li.Test::before {content: "\2606 "; padding-right: 4px; font-size: 90%; color: MidnightBlue;}
li.Interlude::before {content: "\2948"; padding-right: 4px; font-size: 90%; color: DarkCyan;}
li.MenuH1 {padding-top: 4px; height: 24px;}
li.MenuH2 {padding-top: 6px; height: 20px;}
a.Menu, a.MenuH1, a.MenuH2, a.Exercises, a.Test, a.Interlude {text-decoration: none; color: #3B5E80; font-size: 90%;}
a.MenuH1 {color: #2B345A; font-weight: bold; margin-left: auto; margin-right: auto; font-size: 120%;}
a.MenuH2, a.Test {font-weight: bold; color: #3E4A80;}
a.MenuH1:hover, a.MenuH2:hover {font-weight: bold;}
a.Exercises, a.Test {font-style: italic; font-size: 80%; color: SteelBlue;}
a.Interlude {font-style: italic; font-size: 70%; color: DarkCyan;}

/* Image and Embed styles */
img {max-width: 100%; height: auto;}
img.centered, embed.centered {display: block; margin-left: auto; margin-right: auto; margin-top: 12px; margin-bottom: 12px;}
img.borderless {border: none;}
img.left {float: left; margin: 6px 12px 2px 18px; clear: none; border-style: none;}
img.right {float: right; margin: 6px 18px 2px 12px; clear: none; border-style: none;}
img.mid {vertical-align: middle;}

/* Table styles */
/* Tables used to have color: #000000; background color: #E5E5FF then D4D4FA then DAC3C1 (before Sepia the Darker was B3B3B3) */
table {width: 80%; background-color: #dbe4f0; border: 1px solid #B399CC; border-spacing: 2px 2px; border-collapse: collapse; margin-left: auto; margin-right: auto; margin-top: 12px; margin-bottom: 12px; page-break-inside: avoid; clear: both;}
table.transparentTable {width: 90%; background-color: transparent; border: none; vertical-align: middle; page-break-inside: auto;}
table.left {float:left; margin: 6px 12px 4px 18px; border-style: none; width: 10%;}
table.right {float:right; margin: 6px 18px 4px 12px; border-style: none; width: 10%;}
table.charsheet {display: none; float:right; margin: 6px 18px 4px 12px; border: 1px solid #C7DAFF; width: 320px; background-color: #E6E6E6;}
tr {page-break-inside: avoid; page-break-after: auto;}

/* Inisde a Table styles */
th {padding: 2px 8px 2px 8px; font-weight: 500; font-size: 120%; text-shadow: 2px 2px #D5D5D5; text-align: left; vertical-align: bottom;}
th.centered {text-align: center;}
th.nounderline {text-decoration: none;}
th.righted {text-align: right;}
td {padding: 2px 8px 8px 8px; vertical-align: top;}
td.centered {text-align: center;}
td.spaced {padding: 0px 2px 12px 2px;}
td.nowrap, th.nowrap {white-space: nowrap; padding: 2px 16px 2px 16px;}
td.rows {border-top: 1px solid #336633; border-bottom: 1px solid #336633;}

/* Top menu */
table.TopMenu {color: #FDFDFD; background-color: #78B749; border: 1px solid #B88A00; padding: 1px 1px 1px 1px; width: 100%; margin: 0px;}
p.TopMenu {text-indent: 0em; margin: 0px 2px; text-align: center; font-size: 100%; font-style: italic; font-family: Veranda, Garamond; color:#FDFDFD;}
ul.TopMenu {padding: 0; margin: 0; border: 0; width: auto; float:left; list-style-type: none; background-color: #78B749;}
li.TopMenu {padding: 0; margin: 0; display:inline;}
a.TopMenu {float:left; color: #FDFDFD; background-color: #B88A00; padding: 2px 4px 2px 4px; border: 1px solid #C7DAFF; text-decoration: none; font-weight: normal; font-size: 80%; font-family: Skia, Georgia;}
a.TopMenu:hover {text-decoration: none; color: #FBFBFB; background-color:#D19D00; border: 1px solid #C7DAFF; font-weight: normal;}
a.TopImage {text-decoration: none; font-weight: normal; border: none; background-color: #78B749; vertical-align: top;}
a.TopImage:hover {text-decoration: none; font-weight: normal; border: 0; background-color: #78B749; vertical-align: top;}
td.TopImage {vertical-align: top; text-align: right; padding: 2px;}
input.TopButton {background-color: #DADADA; border: 1px solid #222222; font-size: 50%; font-style: italic; margin: 0; vertical-align: top;}

/* new style of toggles */
.toggle1 {cursor: pointer; margin-left: 40px; margin-bottom: 12px; font-size: 50%; background: linear-gradient(to right, aliceblue 0%, lavender 100%); border-color: lightsteelblue; border-radius: 6px;}
.toggle2 {text-indent: 2em; margin-left: 80px; margin-right: 80px; font-size:80%; font-weight: 200; display: none; color: Sienna;}
.toggle1.active + .toggle2 {display: block;}
.toggle1.active + .toggle2 + .toggle2 {display: block;}
.toggle1.active + .toggle2 + .toggle2 + .toggle2 {display: block;}