@import url('https://fonts.googleapis.com/css?family=Noto+Sans+SC');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+SC');

html {
}
body {
   padding-top:50px;
   color: #111111;
   font-family: 'Noto Sans SC', sans-serif;
   font-style: normal;
   font-variant: normal;
   font-weight: normal;
   line-height: 1.52381em;
   text-rendering: optimizelegibility;
}

nav#sidemenu {
  width: 220px;
  padding-bottom: 50px;
  padding-left: 15px;
  padding-right: 15px;
  height: 85%;
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 50px;
}

/* 正文区域避开固定侧边栏，脱离 Bootstrap 容器居中制约 */
.content-area {
  margin-left: 240px;
  max-width: 900px;
  padding: 0 20px 40px;
}
li.active,
li.active:hover,
li.active:focus  {
    background: #9CF;
}
li.active a,
li.active:hover a,
li:focus a  {
    color: #FFF;
}
li ul.nav li.active,
li ul.nav li.active:hover,
li ul.nav li.active:focus  {
    background: #7bd;
}
li ul.nav li.active a,
li ul.nav li.active:hover a,
li ul.nav li:focus a  {
    color: #FFF;
}
li.currentli.headli:not(.active) {
  font-weight:bold;
  background: #e7f5ff;
}
ul.tagList li {
  margin: 3px 0;
}

h1, h2, h3, h4 {
  font-weight: bold;
}
h3 {
  color: #00126b;
}
h4 {
  color: #0220b5;
  margin-top: 28px;
}


p {
    margin: 0 0 1.14286em;
    text-indent:1em;
}
p.NoIndent {
   text-indent:0;
}

.nav {
   font-size:90%;
}

p.Item,p.MagicItem {
   text-indent:0;
   font-weight:bold;
}
span.Tags {
   font-weight:normal;
   /* font-style:italic; */
   font-size: 0.9em;
   padding-left: 10px;
}
li span.Tags {
   padding-left: 0px;
}
p.ItemDescription {
   margin-left:.5em;
   margin-top: -15px;
}

p.Instructions, p.InstructionsAfterHeader {
   background-color:#eee;
   padding:.5em;
}
p.Requirement {
   font-style:italic;
}

/*p.ExampleDialogue,p.ExampleDialogueFirstLine,p.ExampleDialogueLastLine {
    font-style: italic; 
   margin: 0 0 .5em;
}*/

h3.MonsterName {
  color: #000;
  border-top:medium solid black;
  padding-top:1em;
  padding-bottom: 0.2em;
  margin-bottom: 0.2em;
  border-bottom: solid 1px black;
}
h3.MonsterName span.Tags, h3.SpellName span.Tags {
  font-size:70%;
}

#site-nav {
   font-size:80%;
}
#site-nav input {
   font-size:80%;
}

.anchor {
    padding-top: 60px;
    margin-top: -60px;
}
h3.MonsterName.anchor {
    padding-top:60px;
    margin-top: 0em;
}
p.MagicItem.anchor {
   padding-top: 60px;
   margin-top: -60px;
}
h3.BasicMoveName.anchor {
    padding-top:60px;
    margin-top: -60px;
}
h3.MoveName.anchor {
    padding-top:60px;
    margin-top: -60px;
}

hr {
  border-color: #aaa;
}

.pseudoTitle {
  font-size: 41px;
  padding-top: 10px;
  margin-bottom: 30px;
}

/* Tag */
tag {
  font-size: 0.9em;
  margin: 1px;
  padding: 1px 3px;
  background: #ddd;
  border-radius: 5px;
}
tag.red { background: #ecacac; }
tag.blue { background: #bcdbf3; }
tag.green { background: #bee0c0; }
tag.purple { background: #cfb4ff; }
tag.line { background: #fff; border: 1px solid #000; }

/* Monster Block */
.MonsterStats {
  margin: 0 0 0.2em;
}
.MonsterStats + .MonsterStats  {
  font-size: 1.3em;
  padding: 0 0 0.5em;
  border-bottom: 1px solid black;
}
.MonsterQualities {
  margin-bottom: 0.4em;
  padding: 0 0 0.5em;
  border-bottom: 1px solid black;
}
.MonsterDescription {
  margin-bottom: 0.4em;
}

/* Moves Block */
#racialmoves, #alignment {
  margin-left: 1em;
}
.Move, .Spell, .Hireling, .Block {
  border: 1px solid black;
  padding: 5px;
  margin: 0.5em 0 1em;
}
.Spell h3 {
  color: #000;
}
.Move h3, .Move h4, .Hireling h4, .Block h4 {
  color: #000;
  margin-top: 0.2em;
}
.Move p {
  margin-top: 0px;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
}
.Move ul:last-child, .Hireling p:last-child {
  margin-bottom: 0.2em;
}

/* Class */
#look li{
  margin-bottom: 0.5em;
}

.Example {
  background: #ddd;
  padding: 10px 10px;
  margin-left: 50px;
  margin-bottom: 20px;
  border-radius: 5px;
  color: #222;
  font-family: 'cwTeXKai', serif;
}
.Example+.Example {
  margin-top: -10px;
}
.Example p {
  margin: 0 .2em .5em .8em;
  text-indent: -.5em;
}
.Example p:last-child, .Spell p:last-child {
  margin-bottom: 0em;
}


.List li {
  text-indent: -1em;
  margin: 0 0 1.14286em 1em;
}

.Inner {
  padding-left: 15px;
}

sub{
  color: #00F;
}
.Dialogue {
  margin: 0 .2em .5em .8em;
  text-indent: -.5em;
}
.Comment {
  padding: 5px;
  margin-left: 30%;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 1px solid black;

  font-size: 0.8em;
  color: #666;
  line-height: 1.3em;
}

.customNavItem.dwg {
  background-color: #d2e2fb;
}
.customNavItem.otherclass {
  background-color: #c4ead1;
}

@media only screen and (max-width: 600px) {
  nav#sidemenu {
    width: auto;
    padding-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
    height: 100%;
    overflow-y: auto;
    position: relative;
    left: auto;
    top: auto;
  }

  .content-area {
    margin-left: 0;
    padding: 0 15px;
    max-width: none;
  }

  #footer {
    font-size: xx-small;
    height: 80px;
  }
}

/* ── 表格样式 ──────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}
table, th, td {
  border: 1px solid #bbb;
}
th, td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
th {
  background: #e0e0e0;
  font-weight: bold;
  white-space: nowrap;
}
/* 隔行底色 */
tbody tr:nth-child(even) {
  background: #f4f6f9;
}
tbody tr:nth-child(odd) {
  background: #fff;
}
/* 基本单元格宽度保证 */
td {
  min-width: 2em;
  padding-right: 12px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* 长内容列（最后一列或包含较长文本的列）允许断字 */
td:last-child {
  word-break: break-word;
}

/* ── 双语切换 ──────────────────────────────────────── */
/* 用 body class + !important 控制，确保无层叠冲突 */

/* 默认显示中文 */
body:not(.show-en) .lang-en { display: none !important; }

/* 切换到英文 */
body.show-en .lang-zh { display: none !important; }
body.show-en .lang-en { display: block !important; }

/* 导航栏/页脚等内联元素 */
body.show-en .navbar .lang-en,
body.show-en #footer .lang-en { display: inline !important; }

/* 切换按钮样式 */
#lang-toggle-btn { cursor: pointer; user-select: none; }
#lang-toggle-btn:hover { text-decoration: none; }
.lang-sep { color: #999; }
.lang-zh-active, .lang-en-active { font-weight: bold; color: #000; }
.lang-zh-inactive, .lang-en-inactive { color: #999; }
body:not(.show-en) .lang-zh-active { font-weight: bold; color: #000; }
body:not(.show-en) .lang-en-inactive { color: #999; }
body.show-en .lang-en-active { font-weight: bold; color: #000; }
body.show-en .lang-zh-inactive { color: #999; }

/* 领域图标 — 统一在 layouts/_default/single.html 的 <style> 中修改 */