@charset "UTF-8";
/* ***** BEGIN LICENSE BLOCK *****
 * Version: MPL 1.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is the Takahashi-Method-based Presentation Tool in XUL.
 *
 * The Initial Developer of the Original Code is SHIMODA Hiroshi.
 * Portions created by the Initial Developer are Copyright (C) 2005
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s): SHIMODA Hiroshi <piro@p.club.ne.jp>
 *
 * ***** END LICENSE BLOCK ***** */
body {
  background: white;
  height: 100vh;
}
body.dark-style {
  background: #191919;
}
#canvas {
  color: #191919;
  font-family: "Candara", "Georgia", "DejaVu Serif Condensed", "Arial", "微软雅黑", "Bitstream Vera Sans", "Verdana", "Apple LiGothic", "Arial Black", "Bitstream Vera Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: auto;
}
.dark-style #canvas {
  color: #e6e6e6;
}
body.in-print #canvas,
body.in-print #toolbar {
  display: none;
}
#canvas * {
  cursor: text !important;
}
#canvas img {
  display: block;
  object-fit: contain;
}
.link-text {
  color: #000066;
  text-decoration: none !important;
}
.dark-style .link-text {
  color: #9999ff;
}
.link-text:hover {
  color: #3333FF;
  /*    border-bottom: dotted 1px; */
}
.dark-style .link-text:hover {
  color: #0000cc;
}
.link-text:active {
  color: #9999FF;
}
.dark-style .link-text:active {
  color: #000066;
}
.kw {
  color: #5658D2;
}
.dark-style .kw {
  color: #9EA0EB;
}
.s {
  text-decoration: line-through;
}
.iu {
  text-decoration: underline;
  font-style: italic;
}
.ui {
  /*  text-decoration: underline; */
  font-style: italic;
}
.u {
  text-decoration: underline;
}
.date {
  font-style: italic;
  text-decoration: underline;
  font-size: 40%;
  color: #339933;
}
.dark-style .date {
  color: #66cc66;
}
.bdate {
  font-style: italic;
  text-decoration: underline;
  font-size: 90%;
  color: #339933;
}
.dark-style .bdate {
  color: #66cc66;
}
.i {
  font-style: italic;
  font-family: "Cambria", "Times New Roman", "Bitstream Vera Serif", serif;
}
.t {
  font-style: italic;
}
.tag {
  color: #998833;
}
.dark-style .tag {
  color: #ccbb66;
}
.v {
  color: #998833;
}
.dark-style .v {
  color: #EFDE87;
}
.att {
  color: #333399;
}
.dark-style .att {
  color: #6666cc;
}
.key {
  color: #009999;
}
.dark-style .key {
  color: #66ffff;
}
.h {
  color: #191919;
  margin: 0px;
}
.dark-style .h {
  color: #e6e6e6;
}
.c {
  color: #C39;
  margin: 0px;
}
.dark-style .c {
  color: #dd38a5;
}
.cm {
  color: #117711;
}
.dark-style .cm {
  color: #88ee88;
}
.m {
  color: #963;
  margin: 0px;
  font-family: "Comic Sans MS";
}
.dark-style .m {
  color: #cc9966;
}
.cz {
  color: #C39;
  margin: 0px;
  font-family: "Candara";
  margin-right: -10px;
}
.dark-style .cz {
  color: #dd38a5;
}
.z {
  margin: 0px;
  margin-left: -10px;
  font-family: "Candara";
}
.x {
  color: #C00;
  margin: 0px;
}
.dark-style .x {
  color: #F16969;
}
.xs {
  color: #633;
  margin: 0px;
  text-decoration: line-through;
}
.dark-style .xs {
  color: #cc9999;
}
.ci {
  color: #C39;
  margin: 0px;
  font-style: italic;
}
.dark-style .ci {
  color: #dd38a5;
}
.author {
  color: #C39;
  margin: 0px;
  font-style: italic;
  font-family: "Consolas", "Constantia", "Times New Roman", "微软雅黑", "Bitstream Vera Serif", serif;
  font-size: 70%;
}
.dark-style .author {
  color: #dd38a5;
}
.cu {
  color: #C39;
  margin: 0px;
  text-decoration: underline;
}
.dark-style .cu {
  color: #dd38a5;
}
.ct {
  color: #C39;
  margin: 0px;
  font-style: italic;
}
.dark-style .ct {
  color: #dd38a5;
}
.hs {
  color: #f33;
  margin: 0px;
  text-decoration: line-through;
}
.dark-style .hs {
  color: #cc0000;
}
.ht {
  color: #aaa;
  font-style: italic;
}
.dark-style .ht {
  color: #555555;
}
.pre {
  font-family: "Consolas", "Courier New", "Anonymous", "Andale Mono", "Bitstream Vera Sans Mono", "微软雅黑", monospace;
  padding-bottom: 8px;
  font-weight: bold;
}
.pre-big {
  font-family: "Consolas", "Courier New", "Anonymous", "Andale Mono", "Bitstream Vera Sans Mono", "微软雅黑", monospace;
  padding-bottom: 8px;
  font-weight: bold;
  /* margin-left: 10%; */
}
#canvas[rendering="true"] {
  visibility: hidden;
}
* {
  margin: 0;
  padding: 0;
}
#canvas[eva="true"] {
  color: #191919;
  font-family: "Georgia", "DejaVu Serif Condensed", "Apple LiGothic", "Arial Black", serif !important;
}
.dark-style #canvas[eva="true"] {
  color: #e6e6e6;
}
#canvas[eva="true"] .link-text {
  color: red;
  text-decoration: none !important;
}
.dark-style #canvas[eva="true"] .link-text {
  color: #ff0000;
}
#canvas[eva="true"] .link-text:hover {
  color: pink;
}
.dark-style #canvas[eva="true"] .link-text:hover {
  color: pink;
}
#canvas[eva="true"] .link-text:active {
  color: orange;
}
.dark-style #canvas[eva="true"] .link-text:active {
  color: #ffa500;
}
#toolbar {
  position: absolute;
  border-bottom: 3px solid #ccc;
  background: #eee;
  width: 100%;
  padding: 5px 10px;
  z-index: 5;
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#toolbar button {
  padding: 2px 5px;
  margin: 0 2px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#toolbar .fr {
  float: right;
}
#edit {
  display: none;
}
button.to-dark {
  background: black;
  color: white;
}
#progress {
  color: #42affa;
  position: absolute;
  height: 3px;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 10;
}
#progress > span {
  display: block;
  height: 100%;
  width: 0px;
  background-color: currentColor;
  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
}
#progress:after {
  content: '';
  display: block;
  position: absolute;
  height: 10px;
  width: 100%;
  top: -10px;
}
.controls {
  position: absolute;
  top: auto;
  bottom: 1.4em;
  right: 1em;
  left: auto;
  z-index: 1;
  pointer-events: none;
  font-size: 10px;
}
.controls button {
  opacity: 0.3;
  padding: 0;
  margin-left: 5px;
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
  color: #42affa;
  transition: color 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
  pointer-events: auto;
  font-size: inherit;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.controls button:hover {
  opacity: 1;
}
.controls .controls-arrow {
  position: relative;
  width: 3.6em;
  height: 3.6em;
}
.controls .controls-arrow::before {
  transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
}
.controls .controls-arrow::after {
  transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
}
.controls .controls-arrow::before,
.controls .controls-arrow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6em;
  height: 0.5em;
  border-radius: 0.25em;
  background-color: currentColor;
  transition: all 0.15s ease, background-color 0.8s ease;
  transform-origin: 0.2em 50%;
  will-change: transform;
}
.controls .next .controls-arrow {
  transform: rotate(180deg);
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 10px solid rgba(250, 250, 250, 0.85);
  border-top-color: rgba(51, 51, 51, 0.9);
  animation: spinner .6s linear infinite;
}
.logo {
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 3px;
  margin-left: 4px;
  opacity: 0.9;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.logo img {
  max-width: 20%;
  max-height: 20%;
  object-fit: contain;
}
.logo .name {
  color: gray;
  margin-top: 5px;
  margin-left: 3px;
}
.logo .trade {
  font-weight: 300;
  font-size: 65%;
  vertical-align: top;
  margin-left: 2px;
}

@media only screen and (max-width: 450px) {
  .logo img {
    max-width: 37px;
    max-height: 37px;
  }
  .logo .name {
    font-size: 18px;
  }
}

@media only screen and (min-width: 450px) and (max-width: 580px) {
  .logo {
    width: 45vw;
  }
  .logo .name {
    font-size: 20px;
  }
}

@media only screen and (min-width: 580px) and (max-width: 820px) {
  .logo {
    width: 40vw;
  }
  .logo .name {
    font-size: 23px;
  }
}

@media only screen and (min-width: 820px) and (max-width: 1024px) {
  .logo {
    width: 35vw;
  }
  .logo .name {
    font-size: 26px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1380px) {
  .logo img {
    max-width: 70px;
    max-height: 70px;
  }
  .logo .name {
    font-size: 30px;
  }
}

@media only screen and (min-width: 1380px) {
  .logo img {
    max-width: 80px;
    max-height: 80px;
  }
  .logo .name {
    font-size: 34px;
  }
}