/* Body styles for background and default text color */
/* Modified by Vector Hasting from many sources. */

html, body {
  height: 100%;
  /* min-height: 0; */
  margin: 0;
  padding: 0;
}

body {
  font:14px/22px "Roboto-Slab-Share", "Spectral-Share", "LiberationSerif-Share", "Garamond", serif;
  color:#161010;
  font-weight:300;
  margin: 0px;
  padding-top:0px; 
  padding-right: 0px; 
  padding-bottom: 20px;
  padding-left: 0px;
  background: url(/content/media/images/page_decorations/body-background2.png) #eae6d1;
  box-sizing: border-box;
  min-height: 0;

  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

html {
  scroll-behavior: smooth; /* For a smoother scroll effect */
}

/* ======================================================== */
/* FLEX IMPORTANT CSS
/* ======================================================== */

header {
  position: sticky;
  top: 0;
  z-index: 10; 
  padding: 0px 20px 0px 20px;
  flex: 0 0 auto; 
  height: 170px;
  margin: 0;
  left:0;
  right:0;
  width: 100%;
  text-align: center;
  background: url(/content/media/images/page_decorations/header_background.png) #4276b6;
  box-shadow: 1px 0px 2px rgba(0,0,0,.75);

  -webkit-font-smoothing:antialiased;

  h1 {
    font: 40px/48px "PassionOne-Share", "Lato-Share", "Helvetica", "Arial", sans-serif;
    color: #f3f3f3;
    text-shadow: 0px 2px 0px #235796;
    margin: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: ellipsis;
  }

  p {
    color: #d8d8d8;
    text-shadow:rgba(0,0,0, 0.2) 0 1px 0;
    font-size: 18px;
    margin: 0px;
    text-align: center;
  }

}

#site-name {
  font: 40px/46px "Libertinus", "Spectral-Share", "LiberationSerif-Share", "Garamond", serif; 
  font-size: clamp(24px, 5vw, 40px);
  color: #f3f3f3;
  text-shadow: 0px 2px 0px #235796;
  margin: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: ellipsis;
}
#site-name a {
  color: #f3f3f3; 
  
  &:hover{
    color: #bda02b;  
  }
}

.header-content {
  display: flex; 
  flex-direction: column;
  align-items: center;    /* Center everything horizontally */
}

#site-description {
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* flex-direction: column; */
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #f3f3f3;
  gap: 2px; 
  margin: 0;
  padding: 0 5px;
}

.search-box {
  width: 630px;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}


#ddg-search-input {
  /*width: 22%; /* Adjust this value to your preferred width */
  /* padding: 8px; */
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  line-height: normal;
  margin-top: 4px;
  margin-bottom: 4px;
}

#banner {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center;
  gap: 10px; /* Space between btns */
  background: #940F15;
  border: 1px solid #7d0d13;
  box-shadow: 0px 1px 3px rgba(0,0,0,.25);
  border-radius: 0px 2px 2px 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  left:0;
  right: 0;
  width: 100%;

  ul {
    list-style:none;
    height:40px;
    padding:0;
    /* float: left; */
    margin-left:10px;

    li {
      display:inline;

      a.button {
        background-color: #FFE788;
      }
    }
  }
}

.button {
    border: 1px solid #940F15;
    background: linear-gradient(rgb(222, 180, 164), rgb(196, 99, 83));
    border-radius: 2px;
    box-shadow: inset 0px 1px 0px rgba(255,255,255,.4), 0px 1px 1px rgba(0,0,0,.1);
    background-color: #f93737;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 10px 10px;
    line-height:14px;
    font-size:14px;
    color:#333;
    font-weight: bold;
    display:inline-block;
    text-align:center;
    display: flex;
    align-items: center;
    flex-grow: 1; /* VH added for adaptive screens */
    flex-shrink: 1;
    flex-basis: auto; /* Btns will grow and shrink based on content */
    min-width: 150px; /* Set a minimum width for btns */

    &:hover {
      background: linear-gradient(rgb(250, 203, 185), rgb(245, 122, 103));
      background-color: #ffeca0;
    }
  }

/* Hdr btns added by VH */
.img-button {
    display: flex;
    /* float: right;  */
    align-items: center;
    height: 20px;
    width: 20px;
}
.img-button img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Optional: Prevents distortion */
}
footer {
  width:180px;
  position: fixed;
  left:50%;
  margin-left:-530px;
  bottom:20px;
  text-align: right;
  line-height: 16px;
}

#flex-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* tried to add for independent scrolling */
  height: 100%; /* tried to add for independent scrolling */
}

#page-body {
  flex: 1 1 auto;       /* fills remaining vertical space between hdr and footer */
  display: flex;
  flex-direction: column;
  min-height: 0;        /* critical to allow internal scrolling */
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.main-flex-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  align-items: flex-start;
}

.left-flex {
  font-family: "Lato-Share", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  flex: 0 0 300px;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  color: white;
  text-align: left;
  align-self: stretch;
  padding: 20px;
}

.right-flex {
  /* font-size: 14px; */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  align-items: stretch;
  background-color: rgb(238, 238, 235);
}

.right-content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.right-content-inner {
  flex: 1 0 auto;
  padding-left: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.footer-rows {
  /* flex: 0 0 auto; */
  flex-shrink: 0;
  width: 100%;
  background: url(/content/media/images/page_decorations/body-background2.png) #eae6d1;
}


.left-flex a {
  color: wheat;
}
.left-flex a:hover {
  color: rgb(212, 174, 4);
}
aside.left-flex a:hover {
  color: rgb(212, 174, 4);
}
.left-flex ul {
  list-style-image: none;
  list-style-type: none;
}

.nav-block{
      display: grid; /* use grid for the left-hand pane? */
      grid-template-rows: auto;
      gap: 10px; 
      /*display: flex; */
      /* flex-direction: column; */
      /* overflow-y: auto; */
}


.toc-title {
  font-family: "Lato-Share", "Helvetica", "Arial", sans-serif;
  /* display: flex; */
  margin: 4px 0 0;
  line-height:1.4;
  font-size: 22px;
}

.tocify {
  margin: 2px 0 2px;
}

#draft-status {  
  /* display: flex; */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-style: solid;
  border-color: #940f15; 
  background-color: #0f356d ;
  display: inline-block;
  width: 240px;
  /* overflow-y: auto; /* try to get the left column to independently scroll */
}

#author-list {  
  /* display: flex; */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-style: solid;
  border-color: #940f15; 
  background-color: #0f356d ;
  display: inline-block;
  width: 240px;
  /* overflow-y: auto; /* try to get the left column to independently scroll */
}

#todo-list { 
  /* display: flex; */
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 2px;
  margin-bottom: 2px;
  border-style: solid;
  border-color: #940f15; 
  background-color: #0f356d ;
  display: inline-block;
  width: 240px;
  /* overflow-y: auto; /* try to get the left column to independently scroll */
}

.footer-rows-text {
  display: inline-block;
  color: white; 
  margin-left: 20px;
  text-align: left; 
  border-color: transparent;
  width:650px;
  font-size: 16px;
}

.footer-rows-text a {
    color: rgb(213, 205, 188); 
    font-style: italic;
    text-decoration: underline;
    &:hover { color: rgb(235, 171, 110); }
}

.footer-rows-image {
  width: 150px;
  display: inline-block;
  margin-top: 20px;
  vertical-align: top;
  border-color: transparent;
}

.footer-rows-image img {
  display: inline-block;
  vertical-align: top;
  border-color: transparent;
}

/* ======================================================== */
/* END OF FLEX IMPORTANT CSS
/* ======================================================== */


h1, h2, h3, h4, h5, h6 {
  font-family: "PassionOne-Share", "Lato-Share", "Helvetica", "Arial", sans-serif;
  color:#060000;
  margin:0 0 10px;
  font-size: bold;
}

/* Took out this original code and put it back in without 'pre' 
We are depending on coderay.css to format code, and the pre is for code 
p, ul, ol, table, pre, dl {
  margin:0 0 20px;
}
*/


h1, h2, h3 {
  line-height:1.1;
}

h1 {
  font-size:28px;
}

h2 {
  font-size: 24px;
  color:#262626;
}

h3, h4, h5, h6 {
  color:#242424;
}

h3 {
  font-size: 18px;
  line-height: 24px;
}

h4 {
  font-size: 18px;
  line-height: 24px;
}

h5 {
  font-size: 18px;
  line-height: 24px;
}


a {
  color:#1c60c5;
  font-weight:400;
  text-decoration:none;
}

a small {
  font-size:11px;
  color:#666;
  margin-top:-0.6em;
  display:block;
}

ul{
  list-style-image:url('/content/media/images/icons/bullet_combo.png');
}

strong {
  font-weight: bold;
  color: #060202;
}

.wrapper {
  width:650px;
  margin:0 auto;
  position:relative;
}

section img {
  max-width: 100%;
}

blockquote {
  border-left:1px solid #ffcc00;
  margin:0;
  padding:0 0 0 20px;
  font-style:italic;
}

code {
  /* font-family: 'Lucida Sans', Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; */
  font-family: 'SourceCodeProShr', 'Lucida Console', Terminal;
  font-size:13px;
  color:#efefef;
  text-shadow: 0px 1px 0px #000;
  margin: 0 4px;
  padding: 2px 6px;
  background: #333;
  border-radius: 2px;
}

pre {
  background: #333333; 
  border-radius: 3px;
  border: 1px solid #c7c7c7;
  overflow: auto;
  overflow-y: hidden;
  padding: 8px 15px;
}

pre code {
  color: #efefef; 
}

/* Overrides the background color of the code block container */
.highlight pre, .highlight code {
  background-color: #333; /* Use the dark background color you want */
}
/* Default code text color for all tokens inside a code block */
.highlight .code {
  color: #efefef; /* Set the default text color for the code */
}
/* Keywords were not showing up correctly: */
.highlight .keyword {
  color: #D28445;
}

kbd {
  font-family: "SourceCodeProShr", "Droid Sans Mono", "DejaVu Sans Mono", monospace; /* copied in from asciidoctor */
  background-color: #fafbfc;
  border: 1px solid #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #959da5;
  color: #444d56;
  display: inline-block;
  font-size: 11px;
  line-height: 10px;
  padding: 3px 5px;
  vertical-align: middle;
}

table {
  width:100%;
  border-collapse:collapse;
}

p.tableblock {
  font-size: 16px;
}

th {
  text-align:left;
  padding:5px 10px;
  border-bottom:2px solid #940F15;
  color: #080404;
}

td {
  text-align:left;
  padding:5px 10px;
  border-bottom:3px solid #940F15;
  border-right: 3px solid #940F15;
  border-left: 3px solid #940F15;
  border-top: 3px solid #940F15;

}

hr {
  border: 0;
  outline: none;
  height: 11px;
  background: transparent url('/content/media/images/page_decorations/hr.png') center center repeat-x;
  margin: 0 0 20px;
}

.indent {
  padding-left: 4em;
  padding-right: 2em;
}

dt {
  color:#444;
  font-weight:700;
}

.fonti {
  font-style: italic;
}
.fontb {
  font-weight: bold;
}
.fontib {
  font-style: italic;
  font-weight: bold;
}

.font24_700 {
  font-size: 24px; 
  font-weight: 700;
}
.font24_700i {
  font-size: 24px; 
  font-weight: 700;
  font-style: italic;
}

section {
  width:590px;
  padding: 30px 30px 50px 30px;
  margin: 20px 0;
  margin-top: 190px;
  position:relative;
  background: #fbfbfb;
  border-radius: 3px;
  border: 1px solid #cbcbcb;
  box-shadow: 0px 1px 2px rgba(0,0,0,.09), inset 0px 0px 2px 2px rgba(255,255,255,.5), inset 0 0 5px 5px rgba(255,255,255,.4);
}

small {
  font-size:12px;
  color: #f5f3f3;
}
.smallfilename {
  font-size:10px;
}

/* List items on index.html VH */

.no-bullet{
  list-style-type: none;
  list-style-image: none;
}
.index-list{
  padding-left: 20px;
  padding-bottom: 2px;
  list-style-type: none;
}
.index-list a {
  padding-left: 15px;
  list-style-type: none;
}

.music-embed {
  width: 540px;
  height: 140px;
}

.youtube-embed {
  width: 540px;
  height: 302px;
}
/* ======================================================*/
/* We need these to override Table of Contents colors VH */
/* Note that setting sectlevel0 is then inherited by levels 1-6 */
/* ======================================================*/

.sectlevel0 {
  font-family: "Lato-Share", "Helvetica", "Arial", sans-serif;
  line-height:1.3;
  font-size: 16px;
  font-weight: bold;
  list-style-type: none;
  scroll-margin-top: 200px;
  margin-left: 0.25em;
}

.sectlevel0 a {
  color: wheat;
  list-style-type: none;
  scroll-margin-top: 200px;
}
.sectlevel0 a:hover {
  color: rgb(221, 87, 87);
  list-style-type: none;
  scroll-margin-top: 200px;
}
.sectlevel0 a:visited {
  color: wheat;
  list-style-type: none;
}
.sectlevel0 li {
  list-style-image: none;
  list-style-type: none;
}

.sectlevel1 {
  line-height:1.4;
  /* font-size: 16px; */
  margin-left: 0.75em;
}
.sectlevel2 {
  line-height:1.4;
  /* font-size: 15px; */
}
.sectlevel3 {
  line-height:1.4;
  /* font-size: 14px; */
  margin-left: 0.75em;
}
.sectlevel4 {
  line-height:1.4;
  /* font-size: 13px; */
  margin-left: 0.75em;
}
.sectlevel5 {
  line-height:1.4;
  /* font-size: 12px; */
  margin-left: 0.75em;
}


/***************************************************/
/* This section modifies larger screen behavior VH */
/***************************************************/

@media (min-width: 768px) {
  
  html {
  scroll-padding-top: 180px;   /* Add some extra pixels for breathing room */
  }
  
  header {
    /* height: 180px; /* Adjust this value as needed */
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
  }
  #banner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* arrange btns horizontally on large screens VH */
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 767px;
    margin: 0 auto; /* Center it */
  }

  .button {
    margin-top: 6px;
    margin-bottom: 6px;
  }

  #author-list{
    /* flex-direction: column; */
    font-size: 16px;
    line-height: 18px;
  }

  #todo-list {
    /* flex-direction: column; */
    font-size: 16px;
    line-height: 18px;
  }
  #draft-status{
    /* flex-direction: column; */
    font-size: 16px;
  }

  #draft-status img {
      width: 48px;
      height: 60px;
    }

  .main-flex-container {
  padding-top: 10px; /* Space for the fixed hdr */
  }

  .left-flex{
    /* flex-direction: row; */
  }

  .right-flex{
    /* flex-direction: row; */
  }
  #site-description {
    font-size: 16px; 
    line-height: 18px;
  }
  .footer-rows-image {
  width:150px;
  }
  .footer-rows-text {
  width:650px;
  font-size: 16px;
  }

  .font20_700 {
  font-size: 20px; 
  font-weight: 700;
  }

  .font20_700i {
  font-size: 20px; 
  font-weight: 700;
  font-style: italic;
  }
}
/***************************************************/
/* This section modifies smaller screen behavior VH */
/***************************************************/

@media (max-width: 767px) {
  
  /* html { 
  scroll-padding-top: 10px; 
  } */

  body {
    /* overflow: visible; whatever you do, don't do this: it pins the header */
    overflow: auto; /* Enable scrolling on body */
    height: auto; /* this appears to be optional */
  }

  #page-body {
    overflow-y: auto;
  }

  header {
    height: auto;
    position: static;
    top: auto;
  }
  
  .header-content {
  /* position: static; */
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #site-name {
    font-size: 24px;
    line-height: 26px;
  }

  #site-description {
    font-size: 12px; 
    line-height: 14px;
  }
  .main-flex-container {
    padding-top: 0px; /* Space for the fixed hdr */
    flex-direction: column;
    overflow-y: visible;
  }

  .left-flex,
  .right-flex {
    flex: 1 1 100%;
    min-height: auto;
    overflow-y: visible;
    /* flex-wrap: wrap; */
    /* flex-direction: column; */
  }

  .left-flex {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .toc-title {
    font-size: 20px;
    margin: 4px 0px 0px;
  }

  .tocify {
    margin: 0;
  }

  .right-flex{
    flex-basis: 100%;
    width: 100%;
    /* flex-wrap: wrap; */
    /* flex-direction: column; */
  }

  .search-box {
    width: 230px;
    position: static;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
  }

  #ddg-search-input {
    width: 150px; 
    margin-top: 2px;
    margin-bottom: 2px;
  }

  #banner {
    /* display: flex; */
    /* flex-wrap: wrap; */
    flex-direction: column; /* Stack btns vertically on small screens VH */
    justify-content: center;
    align-items: center;
    gap: 2px; 
    border-radius: 0px;
    /* width: 100%; */
    /* position: static; /* Unset the fixed position for small screens */
  }

  .button {
    width: 100%; /* Make btns full-width when stacked */
    /* position: static; */
    margin-top: 1px;
    margin-bottom: 1px;
    padding-top: 8px;
    padding-bottom: 8px;
    justify-content: center;
    align-items: center;
  }

  .toc-title{
    width: 100%;
  }

  #draft-status{
    /* flex-wrap: wrap;
    flex-direction: row; */
    width: 100%;
    font-size: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #draft-status img {
    width: 36px;
    height: 44px;
  }

  #author-list {
    /* flex-wrap: wrap;
    flex-direction: row; */
    width: 100%;
    font-size: 12px;
    line-height: 14px;
  }

  #todo-list {
    /* flex-wrap: wrap; */
    /* flex-direction: row; */
    width: 100%;
    font-size: 12px;
    line-height: 14px;
  }

  .footer-rows-image {
  width:100px;
  }

  .footer-rows-text {
  width:220px;
  font-size: 8px;
  font-weight: normal;
  }

/* Adjust the footer for a tall column view */
  .footer-rows table {
      display: block; /* Make the table responsive */
      width: 100%;
  }

  .footer-rows tr,
  .footer-rows td {
      display: block; /* Stack table rows and cells */
  }

  .footer-rows-image,
  .footer-rows-text {
      text-align: center;
  }
  .music-embed {
    width: 250px;
    height: 62px;
  }

  .youtube-embed {
  width: 250px;
  height: 140px;
  }
  .font20_700 {
  font-size: 14px; 
  font-weight: 600;
  }

  .font20_700i {
  font-size: 14px; 
  font-weight: 600;
  font-style: italic;
  }

}