/* dna-engine ~~ MIT ~~ dna-engine.org/license                   */
/* Copyright (c) 2013-2025 Individual contributors to dna-engine */

/* Bookstore */
.featured-books {
   width: 70%;
   background-color: whitesmoke;
   border: 1px solid black;
   box-shadow: 2px 2px 0.1em 0.1em silver;
   padding: 10px 20px;
   margin: 0px auto 20px auto;
   }
.featured-books h2 {
   text-align: center;
   margin-bottom: 5px;
   }
.featured-books .buttons {
   text-align: center;
   margin-bottom: 10px;
   }
.featured-books .book {
   background-color: gold;
   border: 1px solid silver;
   padding: 10px;
   margin: 0px 10px 10px 10px;
   }
.featured-books .book span {
   font-weight: bold;
   }
@media (max-width: 667px) {  /* selects iPhone SE (3rd gen) landscape and anything narrower */
   .featured-books {
      width: 100%;
      }
   }

/* Layout */
html {
   display: block;
   font-size: 110%;
   background: lightsteelblue url(assets/background.jpg) fixed;  /* https://www.nist.gov/oles/forensics/images/DNA-Strand.jpg */
   background-size: cover;
   }
body {
   max-width: 900px;
   min-height: 100vh;
   color: dimgray;
   background-color: rgba(255, 255, 255, 0.9);
   border-left: 1px solid steelblue;
   border-right: 1px solid steelblue;
   padding: 20px 50px 30px 50px;
   margin: 0px auto;
   }
body >header >nav >menu {
   text-align: center;
   margin-bottom: 5px;
   }
body >header >nav >menu li {
   display: inline-block;
   }
body >header >nav >menu li a,
body >header >nav >menu li a:visited {
   display: inline-block;
   font-weight: bold;
   font-size: 0.9rem;
   color: darkgray;
   border-bottom: 1px solid darkgray;
   padding: 1px 12px;
   margin: 0px 10px 10px 10px;
   }
body >header >nav >menu li.current a,
body >header >nav >menu li a:hover {
   color: dimgray;
   border-color: dimgray;
   }
body >header h1 {
   font-size: 3.0rem;
   font-family: Chango, sans-serif;
   text-align: center;
   color: steelblue;
   margin-bottom: 5px;
   }
body >header h2 {
   font-size: 1.1rem;
   font-style: italic;
   text-align: center;
   margin-bottom: 30px;
   }
main >header >h2 {
   font-size: 1.2rem;
   font-weight: lighter;
   letter-spacing: 0.1em;
   color: gray;
   text-transform: uppercase;
   }
body >footer {
   padding: 40px 0px 0px 0px;
   }

/* Sidebar */
main >section aside {
   background-color: white;
   }
main h2+aside >h2 {
   font-size: 1.2rem;
   }

/* Sections */
main >section#intro >figure {
   clear: both;
   text-align: center;
   background-color: gainsboro;
   border: 1px solid dimgray;
   border-radius: 2px;
   padding: 5px;
   margin-bottom: 30px;
   }
main >section#intro >figure button {
   font-size: 1.0rem;
   margin: 0px 10px 5px 10px;
   }
main >section#intro >figure p {
   margin-bottom: 0px;
   }

/* General style */
main >section >h3,
main >div >h3 {
   clear: both;
   font-size: 1.2rem;
   text-align: center;
   color: steelblue;
   background-color: aliceblue;
   border: 1px dotted;
   border-radius: 4px;
   padding: 5px 0px;
   margin-top: 30px;
   margin-bottom: 10px;
   }
h4 {
   font-size: 1.2rem;
   font-weight: bold;
   text-transform: none;
   letter-spacing: normal;
   color: steelblue;
   margin-bottom: 4px;
   overflow: scroll;
   }
h5 {
   font-size: 1.3rem
   }
table thead tr th,
table tbody tr td {
   text-align: left;
   }
dt {
   font-weight: bold;
   }
p >code,
dd >code,
td >code {
   font-weight: bold;
   }

figure img {
   border: 3px solid steelblue;
   }
figure figcaption {
   font-style: italic;
   }

/* Flat buttons */
button {
   font-size: 1.1rem;
   font-weight: bold;
   border: none;
   border-radius: 0.2em;
   color: white;
   background-color: cornflowerblue;
   padding: 0.6em 1.2em;
   outline: none;
   transition: background-color 400ms;
   }
button:hover {
   background-color: royalblue;
   }
button i.font-icon {
   vertical-align: middle;
   font-size: 120%;
   padding-right: 0.2em;
   }

main >section >p >button {
   display: block;
   margin-left: 40px;
   }
main >section >p br+a {
   margin-left: 40px;
   }

/* Utilities and components */

header .logo {
   float: left;
   margin: 2px 15px 5px 0px;
   }
header .logo img {
   height: 90px;
   opacity: 1;
   }

.reveal-button {
   font-size: 0.8rem;
   }

.link-box {
   font-size: 0.9rem;
   }
.link-box p {
   margin: 0pt 0pt 2pt 20pt;
   }

/* Table of Contents */
nav.toc {
   margin: 20px 0px 30px 0px;
   }
nav.toc h2 {
   font-size: 1.2rem;
   text-align: left;
   margin-bottom: 5px;
   }
nav.toc li a {
   color: steelblue;
   border-bottom: 1px dotted;
   }
nav.toc li a:hover {
   color: white;
   background-color: steelblue;
   border-color: steelblue;
   outline: 2px solid steelblue;
   }
nav.toc >ol {
   list-style-type: upper-alpha;
   font-size: 1.1rem;
   margin-left: 30px;
   }
nav.toc >ol >li {
   margin-bottom: 8px;
   }
nav.toc ol ol {
   font-size: 0.9rem;
   }
nav.toc ~ h3 {
   margin-top: 50px;
   margin-bottom: 20px;
   }

/* Documentation */
main.docs-page >section {
   border: 3px solid silver;
   padding: 10px 20px;
   margin-bottom: 30px;
   }
main.docs-page >section >h3:first-child {
   margin: 10px 0px 20px 0px;
   }
main.docs-page >section output {
   display: block;
   font-family: monospace;
   font-size: 1.4rem;
   font-weight: bold;
   color: mediumorchid;
   margin-bottom: 5px;
   }
div >p >em,
section >p >em {
   display: block;
   font-weight: bold;
   font-style: normal;
   }
main.docs-page #smooth-container button {
   margin: 0px 5px 5px 0px;
   }
main.docs-page #interactive-events p {
   margin-bottom: 10px;
   }
main.docs-page #interactive-events p input {
   margin: 0px;
   }

.api-description {
   font-style: italic;
   margin-bottom: 10px;
   }
.api-parameters >ul,
.api-return-value >ul {
   list-style-type: none;
   padding: 0px;
   margin-bottom: 20px;
   }
.api-parameters >ul >li,
.api-return-value >ul >li {
   border: 1px dotted steelblue;
   padding: 10px;
   margin-bottom: 10px;
   }
.api-parameters ul li label,
.api-return-value ul li label {
   margin: 0px;
   }
.api-parameters ul ul,
.api-return-value ul ul {
   list-style-type: none;
   }
.api-parameters ul ul li,
.api-return-value ul ul li {
   position: relative;
   padding-bottom: 5px;
   margin-left: 175px;
   }
.api-parameters ul ul li label,
.api-return-value ul ul li label {
   position: absolute;
   top: 0px;
   left: -190px;
   white-space: nowrap;
   }

.wrappable code,
code.wrappable,
code.block-indent {
   white-space: normal;
   }

.legal-terms {
   white-space: pre-wrap;
   font-size: 0.8rem;
   font-family: monospace;
   background-color: white;
   border: 1px solid silver;
   padding: 20px 30px;
   }

.subtle-note {
   text-align: center;
   font-size: 0.7rem;
   padding: 0px 20%;
   }

.image-frame {
   text-align: center;
   }
.image-frame img {
   max-width: 100%;
   border: 3px solid steelblue;
   }

.big-symbol {
   text-align: center;
   margin: -10px 0px 7px 0px;
   }
.big-symbol >i.font-icon {
   font-size: 3.0rem;
   color: steelblue;
   }

/* Videos */
.video-container-link {
   clear: both;
   }

/* Twitter */
.twitter {
   display: inline-block;
   text-align: center;
   }
.twitter a {
   font-size: 0.8rem;
   }
.twitter a i.font-icon {
   display: block;
   font-size: 1.4rem;
   line-height: 0.6em;
   margin: 0px auto;
   opacity: 1;
   }
.twitter a,
.twitter a:visited,
a.twitter,
a.twitter:visited {
   color: #1da1f2;  /* Twitter blue */
   }
.twitter a:hover,
a.twitter:hover {
   color: royalblue;
   }

/* Highlight.js (hljs-enhance) */
figure.hljs-enhance figcaption {
   font-size: 1.0rem;
   color: white;
   }
figure.hljs-enhance figcaption:first-child {
   background-color: steelblue;
   }
figure.hljs-enhance pre,
figure.hljs-enhance >div {
   border-color: steelblue;
   }
figure.hljs-enhance pre code,
figure.hljs-enhance >div {
   background-color: white;
   }
figure.hljs-enhance .dna-menu button {
   transition: all 400ms;
   }
figure.hljs-enhance .dna-menu button:hover,
figure.hljs-enhance .dna-menu button.dna-selected {
   box-shadow: 0px 0px 0.6em deepskyblue;
   }
figure.hljs-enhance .dna-menu,
figure.hljs-enhance .dna-panels {
   margin-right: 15px;
   }

/* Reveal action */
.reveal-button {
   color: steelblue;
   }
.reveal-button:hover {
   background-color: steelblue;
   }

/* Documentation components */
[data-component=bookshelf] .my-books .my-book {
   max-width: 400px;
   background-color: plum;
   padding: 5px 15px;
   margin-bottom: 15px;
   }

[data-component=author] menu.dna-menu {
   padding: 0px;
   margin-top: 10px;
   }
[data-component=author] li.dna-menu-item {
   display: inline;
   background-color: lightskyblue;
   border: 2px solid silver;
   border-radius: 5px;
   padding: 5px 10px;
   transition: all 400ms;
   }
[data-component=author] li.dna-menu-item.dna-selected,
[data-component=author] li.dna-menu-item:hover {
   border-color: dimgray;
   }

[data-component=book-catalog] nav.dna-menu {
   margin-bottom: 10px;
   }
[data-component=book-catalog] button.dna-menu-item {
   margin-right: 15px;
   }

/* Mobile */
@media (max-width: 667px) {  /* selects iPhone SE (3rd gen) landscape and anything narrower */
   html {
      background: none;
      background-color: aliceblue;
      }
   body {
      padding: 20px 10px;
      }
   body >header >nav >menu {
      padding: 0px 40px;
      }
   body >header h1 {
      font-size: 2.2rem;
      }
   body >header h2 {
      font-size: 1.0rem;
      }
   main >h2 {
      font-size: 1.0rem;
      }
   main >header >aside {
      clear: both;
      float: none;
      width: 100%;
      margin: 0px 0px 20px 0px;
      }
   main h2+aside button {
      font-size: 0.9rem;
      }
   main.docs-page >section {
      overflow: scroll;
      }
   main >section table {
      max-width: 100%;
      overflow: scroll;
      }
   main >section table th,
   main >section table td {
      padding: 6px 5px;
      }
   main >section table th:first-child,
   main >section table td:first-child {
      padding-left: 0px;
      }
   main >section table th:last-child,
   main >section table td:last-child {
      padding-right: 0px;
      }
   .block-indent,
   p >button {
      margin-left: 0px;
      }
   figure.hljs-enhance {
      width: 100% !important;
      }
   figure.hljs-enhance >pre >code {
      font-size: 0.8rem;
      }
   .api-parameters ul ul li,
   .api-return-value ul ul li {
      margin-left: 0px;
      }
   .api-parameters ul ul li label,
   .api-return-value ul ul li label {
      position: static;
      }
   }
