html,
body {
  height: 100%;
  color: #D8CBCC;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -100px;
  padding-bottom: 100px;
}
footer {
  height: 100px;
}
a {
  color: #FFBBBB !important;
  font-family: "source-sans-pro", sans-serif;
}
a:hover {
  color: #FFBBBB !important;
  text-decoration: underline;
}
a:visited {
  color: #A59090 !important;
  text-decoration: underline;
}
code {
  font-family: "source-code-pro", monospace;
  color: #04dac6 !important;
}
blockquote {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 20px;
  padding-left: 7px;
  border-left: 3px solid #D8CBCC;
} 
hr {
    background-color: #A59090;
    border-width: 2px;
}
body {
  font-family: "source-sans-pro", sans-serif;
}
figcaption {
  font-family: "source-sans-pro", sans-serif;
  text-transform: lowercase !important;
  font-style: italic !important;
}
.content {
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
  justify-content:center;
}
.page {
  max-width: 1024px;
}
.article {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
}
.sidebar{
  margin-right: 20px;
  margin-left: 20px;
  flex-basis: 260px;
  flex-grow: 1;
  min-width: 260px;
  max-width: 750px;
}
.sticktoc {
  background-color: #1E0000 !important;
  display: flex;
  flex-wrap: wrap;
  position: -webkit-sticky;
  position: sticky;
  top: 20px; 
  overflow: auto;
  max-height: calc(100vh - 40px);
  height: auto;
}
.toc { 
  background-color: #1E0000 !important;
  border: #D8CBCC 2px solid;
  width: 100%;
  z-index: 2;
  font-size: 1.2em;
  overflow: hidden;
  height: auto;
/*  float: left;
  overflow: auto;
  display: inline-block;
  position: absolute; 
  left: -400px; 
  width: 350px; 
  display: inline-block; 
  float:right;
  height: auto;*/
}
.smoltoc{
  width: 100%;
  display:none;
}


.bg-dark,
.btn-dark {
  background-color: #1E0000 !important;
  border-color: #D8CBCC !important;
}
.bg-dark2 {
  background-color: #1E0000 !important;
}

.map {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: calc(100% + 0px);
}
.seqname {
  position: absolute;
  top: -0.7em;
  right: 0.5em; 
  z-index: 2; 
  padding-left: .75rem;
  padding-right: .75rem;
  background-color: #1E0000 !important;
  border-color: #D8CBCC !important;
  border: 1px solid;
  font-weight: bold;
}
.sequence {
  position: relative;
  width: 30%;
  min-width: 330px;
  background-color: #1E0000 !important;
  border-color: #D8CBCC !important;
  border: 1px solid;
  margin: .1rem;
  margin-top: .75rem;
  margin-bottom: .75rem;

  padding: .75rem;
}

.toc ul {
  list-style-type: decimal;
  padding-left: 16px; 
}
.toc ul ul {
  list-style-type: lower-alpha;
  padding-left: 16px; 
}
.toc ul ul ul {
  list-style-type: disc;
  padding-left: 16px; /* indent per child */ 
}
.toc ul ul ul ul {
  list-style: none; /* Remove list bullets */
  padding: 0px;
  margin: 0px;
}
.toc li li li li:before {
  content: "\f094"; /* Insert content that looks like bullets */
  padding-right: 30px; /* Space between bullet and content */
  color: red;
  padding-left: 0px;
  margin:-20px;
}


.social-icon {
  font-size: 1.7em;
}
.social-icon:hover {
  font-size: 1.6em;
}
.menu-item {
  font-size: 1em;
}
.shadow {
  box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.75) !important;
}
.dropbtn {
  color: #D8CBCC !important;
  font-family: "Calibri", sans-serif;
}
.dropbtn:hover {
  cursor: pointer;
  color: #D8CBCC !important;
}
.dropdown-content {
  position: absolute;
  white-space: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown {
  cursor: pointer;
  position: relative !important;
  display: inline-block !important;
}
.dropdown:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown:hover .dropdown-content {
  display: block;
}
.page-link {
  background-color: #1E0000 !important;
}
.page-item.active .page-link {
  border-color: #D8CBCC !important;
  background-color: #1E0000 !important;
  color: black !important;
}
.page-item.disabled .page-link {
  color: #4d4d4d !important;
}
.more {
  color: #D8CBCC !important;
}
.more:hover {
  cursor: pointer;
}
.metadata {
  transition: all 0.25s;
}
.metadata-value {
  font-size: 0.8em;
  color: #A59090;
}
.pagination {
  display: flex;
  justify-content: center;
}


/*When the screen is crowded, make the main box smaller to make room for the menu and eat the margins. This destroys the front page though*/
@media only screen and (max-width: 1400px) {
  .article {
  max-width: calc(90vw);
  width: 80%;
  }
  .page {
  width: 800px;
  }
}

/*When the screen is crowded, drop the sidebar and pop the menu in.*/
@media only screen and (max-width: 1200px) {
  .sticktoc {
  display:none;
  }
  .sidebar {
  display:none;
  }
  .smoltoc {
  display:block;  
  }
  .article {
  width: 60%;
  }
  .page {
  width: 1024px;
  }
}

/*When the screen is small, drop the margins at the very last second (same as below??*/
@media only screen and (max-width: 750px) {
  .home-flex-item {
    width: 100% !important;
  }
}
/*when the screen is small and the margins needs to get dropped*/
@media only screen and (max-width: 700px)  {
  .article {
  max-width: calc(90vw);
  width: 768px;
  }

}
h1 {
  font-size: 2.1rem;
}
h2 {
  font-size: 1.8rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.2rem;
}