body {
  background: #eee;
  font-size: 18px;
}

.parallel-book-usage {
  display: block;
  margin: auto;
  padding: 3ex;
  max-width: 85ex;
  border: 1px solid #ddd;
  border-radius: 1ex;
  text-align: left;
  background: #fff;
  line-height: 1.3;
}
.parallel-book-usage h1 {
  font-size: 110%;
}
.parallel-book-usage h2 {
  font-size: 100%;
}
.parallel-book-usage p {
  margin: 0.5ex 0;
}

.parallel-book-navi {
  display: block;
  padding: 3ex;
  text-align: center;
  opacity: 0.9;
}
.parallel-book-navi select {
  max-width: 24ex;
  font-size: 105%;
}

.parallel-book {
  display: block;
  position: relative;
  margin: auto;
  padding: 3ex;
  max-width: 85ex;
  border: 1px solid #ddd;
  border-radius: 1ex;
  text-align: left;
  background: #fff;
  line-height: 1.5;
}

.parallel-book nav.content-nav {
  position: absolute;
  right: 0.5ex;
  top: 0.5ex;
  z-index: 10;
  opacity: 0.3;
}
.parallel-book nav.content-nav:hover {
  opacity: 0.8;
}
.parallel-book nav.content-nav a, .parallel-book nav.content-nav span {
  display: inline-block;
  width: 2.5ex;
}
.parallel-book nav.content-nav span {
  color: #888;
}

.parallel-book nav.book-toc {
  font-size: 90%;
  line-height: 1.3;
}

.parallel-book .parallel {
  position: relative;
  display: block;
}
.parallel-book .parallel:focus {
  outline: none;
  background: #f8fbff;
  border: solid 1px #8bf;
  border-radius: 0.5ex;
  margin-left: -0.4ex;
  margin-right: -0.4ex;
  padding: 0.1ex 0.4ex;
}

.parallel-book .parallel span {
  display: block;
}
.parallel-book .parallel span:lang(ja) {
  font-size: 70%;
  opacity: 0.5;
  margin-left: 0.5ex;
}
.parallel-book .parallel span:lang(en):hover {
  background: #f0f8ff;
}
.parallel-book .parallel span:lang(ja):hover {
  background: #ffe;
}

.parallel-book span.parallel-toggle {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  padding: 0.2ex 0.5ex;
  color: #026;
  font-weight: normal;
  cursor: pointer;
  user-select: none;
  opacity: 0.01;
  z-index: 10;
}
.parallel-book .parallel:hover span.parallel-toggle {
  opacity: 0.15;
}
.parallel-book td .parallel .parallel-toggle {
  display: none;
}
.parallel-book td .parallel:hover .parallel-toggle {
  display: block;
}

.parallel-book .parallel .analysis {
  font-size: 90%;
  font-weight: normal;
  margin: 0;
  padding-left: 0;
  text-align: left;
  background: #fff;
  border: solid 2px #fff;
  border-radius: 0.5ex;
}
.parallel-book .parallel .analysis ul {
  margin: 0 0 0 2ex;
  padding: 0;
}
.parallel-book .parallel .analysis li {
  padding-left: 0;
  list-style: none;
}
.parallel-book .parallel .analysis span.text .element-s { background: #fde; }
.parallel-book .parallel .analysis span.text .element-v { background: #def; }
.parallel-book .parallel .analysis span.text .element-o { background: #efd; }
.parallel-book .parallel .analysis span.text .element-c { background: #ffd; }
.parallel-book .parallel .analysis span.pattern {
  display: inline-block;
  text-align: center;
  min-width: 4ex;
  margin-right: 0.5ex;
  padding: 0 0.2ex;
  font-size: 85%;
  background: #eee;
  border: 1px solid #999;
  border-radius: 0.5ex;
  opacity: 0.8;
}
.parallel-book .parallel .analysis span.pattern-sv {
  background: #def;
}
.parallel-book .parallel .analysis span.pattern-svo {
  background: #efd;
}
.parallel-book .parallel .analysis span.pattern-svc {
  background: #ffd;
}
.parallel-book .parallel .analysis span.pattern-svoo {
  background: #efc;
}
.parallel-book .parallel .analysis span.pattern-svoc {
  background: #fed;
}
.parallel-book .parallel .analysis span {
  display: inline;
}
.parallel-book .parallel .analysis span.type {
  display: inline-block;
  text-align: center;
  min-width: 2.5ex;
  margin-right: 0.5ex;
  padding: 0 0.2ex;
  font-size: 85%;
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 0.5ex;
  opacity: 0.7;
}
.parallel-book .parallel .analysis span.type-s {
  background: #fde;
}
.parallel-book .parallel .analysis span.type-v {
  background: #def;
}
.parallel-book .parallel .analysis span.type-o {
  background: #efd;
}
.parallel-book .parallel .analysis span.type-c {
  background: #ffd;
}
.parallel-book .parallel .analysis span.tran {
  margin-left: 1.2ex;
  color: #036;
  opacity: 0.7;
  font-size: 85%;
}
.parallel-book .parallel .analysis span.relation {
  margin-right: 0.5ex;
  font-size: 80%;
  opacity: 0.7;
}
.parallel-book .parallel .analysis span.relation:before {
  content: "(";
}
.parallel-book .parallel .analysis span.relation:after {
  content: ")";
}
.parallel-book .parallel .analysis span.tran:before {
  content: "(";
}
.parallel-book .parallel .analysis span.tran:after {
  content: ")";
}
.parallel-book .parallel .analysis span.vattr {
  font-size: 75%;
  color: #333;
  opacity: 0.8;
  background: #eee;
  border: solid 1pt #ddd;
  border-radius: 0.8ex;
  margin-left: 0.3ex;
}
.parallel-book .parallel .analysis .subclause-list {
  font-size: 90%;
  opacity: 0.9;
}
.parallel-book .parallel .analysis .subsentence-list {
  font-size: 90%;
  opacity: 0.9;
}

.parallel-book .pane {
  position: relative;
}
.parallel-book .pane .bookmark {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  font-weight: normal;
  color: #888;
  cursor: pointer;
  user-select: none;
  opacity: 0.1;
  z-index: 10;
}
.parallel-book .pane .active-bookmark {
  color: #062;
  opacity: 0.8;
}
.parallel-book .pane .active-bookmark:hover {
  opacity: 0.9;
}
.parallel-book .pane:hover .active-bookmark:hover {
  opacity: 0.9;
}

.parallel-book a {
  color: #01d;
  text-decoration: none;
}
.parallel-book a:hover {
  text-decoration: underline;
}

.parallel-book h1 {
  margin: 1.8ex 0;
  text-align: center;
  font-size: 120%;
}

.parallel-book div.book-author {
  margin: 1.8ex 0;
  text-align: right;
}

.parallel-book section.chapter {
  position: relative;
  margin: 2ex 0;
  border-top: 1px solid #ddd;
}
.parallel-book section.chapter:focus {
  outline: none;
}

.parallel-book nav.chapter-nav {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  opacity: 0.3;
  user-select: none;
}
.parallel-book nav.chapter-nav:hover {
  opacity: 0.8;
}
.parallel-book nav.chapter-nav a, .parallel-book nav.chapter-nav span {
  display: inline-block;
  width: 2ex;
}
.parallel-book nav.chapter-nav span {
  color: #888;
}

.parallel-book h2 {
  margin: 1.8ex 0;
  font-size: 115%;
}

.parallel-book p {
  margin: 1.8ex 0;
}

.parallel-book blockquote {
  margin: 1.8ex 0;
  margin-left: 0.8ex;
  padding-left: 0.8ex;
  border-left: solid 2px #ddd;
}

.parallel-book h3 {
  margin: 1.8ex 0 1.6ex 0;
  font-size: 100%;
}

.parallel-book ul {
  margin: 1.8ex 0;
  padding-left: 2ex;
}

.parallel-book table {
  margin: 1.8ex 0;
  border-collapse: collapse;
  font-size: 95%;
}
.parallel-book td {
  border: 1px solid #ddd;
  padding: 0 0.5ex;
}

.parallel-book pre.code {
  padding: 0 0.4ex;
  font-size: 90%;
  white-space: pre-wrap; word-wrap: break-word;
  line-height: 1.2;
  border: 1px solid #ddd;
}

.parallel-book .mono:focus {
  outline: none;
  background: #f8fbff;
  border: solid 1px #8bf;
}

.parallel-book div.macro-image {
  margin: 1ex 0;
}
.parallel-book div.macro-image img {
  max-width: 35ex;
  max-height: 35ex;
}

.parallel-book aside.book-label {
  display: block;
  position: absolute;
  top: 0;
  left: 0.5ex;
  z-index: 10;
}
.parallel-book aside.book-label span {
  margin: 0 0.2ex;
  padding: 0.2ex 1.1ex;
  border: 1px solid #ddd;
  border-radius: 0.7ex;
  opacity: 0.5;
  font-size: 80%;
}
.parallel-book aside.book-label span.label-parallel {
  color: #468;
  background: #def;
}
.parallel-book aside.book-label span.label-analyzed {
  color: #846;
  background: #fde;
}

.parallel-book aside.book-meta {
  display: block;
  text-align: right;
  font-size: 70%;
  opacity: 0.3;
}
.parallel-book aside.book-meta span {
  padding: 0 0.7ex;
}

@media screen and (max-width: 700px) {
  body {
    background: #fff;
  }
  .parallel-book {
     padding: 1ex;
     max-width: initial;
     border: none;
  }
  .parallel-book-navi select {
    border: 1px solid #888;
  }
  .parallel-book-usage {
    padding: 0.5ex;
    border: none;
  }
  .parallel-book span.parallel-toggle {
    transform: translateX(-70%);
  }
  .parallel-book .parallel .analysis ul {
    margin: 0 0 0 1ex;
    padding: 0;
  }
}