.viewer {
  border:1px solid #666;
  font-size:12pt;
  color:#000; background:#fff;
}
.viewer .title {
  padding:0.2em 0.5em;
  color:#fff; background:#333;
}
.viewer .contents {
  padding:0.25em;
}
.viewer .status {
  padding:0.2em 0.5em;
  border-top:1px groove;
  font-size:9pt;
  color:#000; background:#ddd;
}
.sage,
.virtuallink {
  color:#00f;
  text-decoration:underline;
}

.editor {
  margin:0.5em 0em; padding:0em;
}

.editor ul {
  zoom:100%;
}
.editor ul:after {
  display:block;
  content:"";
  clear:both;
  visibility:hidden;
}

.editor ul.tabs {
  margin:0em; padding:0em;
  border:1px solid #666;
  border-bottom:none;
  color:#000; background:#ddd;
}
.editor ul.tabs li {
  list-style:none;
  width:auto;
  margin:0em; padding:2px 0.5em;
  border:1px outset;
  border-color:#fff #aaa #aaa #fff;
  color:#333; background:#cfcfcf;
  font-size:80%;
}
.editor ul.tabs li.current {
  border-style:inset;
  border-color:#aaa #fff #fff #aaa;
  color:#000; background:#e9e9e9;
}

.editor div.form {
  border:1px solid #666;
  border-top-color:#999;
  padding:0.5em;
  color:#000; background:#e9e9e9;
}
.editor div.form p {
  font-size:10pt;
  margin:0em 0.25em 0em; padding:0.2em;
  border:1px solid #666;
  color:#000; background:#fff;
  height:5em;
  overflow:auto;
}

.editor #AATsetting1,
.editor #AATsetting2 {
  font-size:10pt;
}

.editor div#AATUsage p,
.editor div#AATGuide p {
  height:10em;
}

.editor ul.tools {
  margin:0.2em; padding:0em;
  border:0px none;
}

.editor ul.tools li {
  list-style:none;
  /* width:3.5em; */
  border:1px outset;
  border-color:#fff #999 #999 #fff;
  padding:0.1em 0.5em;
  color:#000; background:#ccc;
  font-size:80%;
  text-align:center;
}

.editor div#htmlview {
  color:#000; background:#ffc;
  font-family:monospace;
}
.editor .box {
  border:2px solid #333;
  padding:0.25em;
  color:#000; background:#9c9;
  font-size:80%;
}
.editor ul#AAMemoMenu li { 
  margin:0em; padding:0.2em;
}
.editor div#AAMemo {
  margin-top:0.5em;
}

.editor #pagetool {
  font-size:9pt;
}

.editor #mojiTemp {
  margin:0.5em 0em; padding:0.5em;
  border:2px solid #666;
  color:#000; background:#ffc;
  font-size:9pt;
}

.editor #mojiTemp div {
  margin:0.5em; padding:0em;
}
/* .editor #mojiTemp div button {
  
} */

.tooltips {
  border:1px solid #aaa;
  padding:0.1em 0.25em;
  color:#000; background:#ffc;
  font-size:9pt;
}

#unicodeList {
  margin:0.5em; padding:0em;
  border:1px solid #999;
  color:#000; background:#ccf;
  font-size:10pt;
}
#unicodeList .title {
  padding:0.2em 0.5em;
  color:#fff; background:#333;
}
#unicodeList .contents {
  padding:0.2em 0.5em;
}
#unicodeList .contents span {
  width:14pt;
  margin:0em 0.25em; padding:0em 0.2em;
  border:1px solid #aaa;
  color:#000; background:#dff;
  cursor:pointer;
  font-size:12pt;
}

#pageview {
  padding:0.25em 0.5em;
  border:1px solid #666;
  color:#000; background:#ccf;
}

#TesterInput {
  background:#ffc;
  padding:0.5em;
}

#AATCode {
  padding:0.5em;
  color:#000; background:#ffc;
  font-size:90%;
}

p#usage,p#guide,div#guideAA { display:none; }

/* CUSTOM */

nav {
  margin-bottom: 0.5em;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #181818;
    color: #c0c0c0;
  }
  
  a {
    color: #6699cc
  }
  
  a:visited {
    color: #cc66cc
  } 
}