/* 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 {margin: 0px 0px 36px 0px; background-color: #FFFDFA;}

/* 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%;}
p.noindent   {text-indent: 0;}
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.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;}
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; background-color: #F5F5C5; font-weight: 600; padding: 1px; }
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.formula {color: #5C5C8A; font-weight: 200;}
span.strongformula {color: #5C5C8A; background-color: #C5F5C5; font-weight: 700;}
span.bigparenthesis {font-size: 160%; font-weight: 100; letter-spacing: 0.8em; vertical-align: -10%;}
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: #EEEEEE; border: 1px solid #C7DAFF; border-left: 5px solid #C7DAFF; border-right: 5px solid #C7DAFF; 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.definition {width: 70%; background-color: #ACD1E9; border: 1px solid #8B5BD4; border-left: 5px solid #8B5BD4; border-right: 5px solid #8B5BD4;}

/* 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;}

/* List Styles */
/* Background color used to be FAFAFA */
ul, ol {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;}
ul.noindent {padding-left: 0;}
li {margin: 10px 18px 0px 18px; vertical-align: top; padding: 0;}
li.singlespaced {margin: 0px 18px 0px 18px;}

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

/* 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;}

/* Image and Embed styles */
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: both; border-style: none;}
img.right {float:right; margin: 6px 18px 2px 12px; clear: both; border-style: none;}

/* 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.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: 0;}
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;}

/* Math Top menu */
table.TopMath {color: #FDFDFD; background-color: #3B5E80; border: 1px solid #B88A00; padding: 1px 1px 1px 1px; width: 100%; margin: 0;}
a.TopMath {float:left; color: #FDFDFD; height: 22px; background-color: #333366; padding: 2px 4px 2px 4px; border: 1px solid #C7DAFF; text-decoration: none; font-weight: normal; font-size: 80%; font-family: Skia, Georgia;}
a.TopMath:hover {text-decoration: none; color: #FBFBFB; background-color:#3366CC; border: 1px solid #C7DAFF; font-weight: normal;}
a.TopImageMath {text-decoration: none; font-weight: normal; border: none; background-color: #3B5E80; vertical-align: top;}
a.TopImageMath:hover {text-decoration: none; font-weight: normal; border: 0; background-color: #3B5E80; vertical-align: top;}