/*
main.css - blackswampresearch.com website
*/

*, ::before, ::after {
    box-sizing: border-box;
}

:focus {
    outline: none;
}

/*  =====  generally useful text classes  =====  */
.leftText { text-align: left; }
.centerText { text-align: center; }
.rightText { text-align: right; }
.italicText { font-style: italic; }
.boldText { font-weight: bold; }
.underlineText { text-decoration-line: underline; }
.super { font-size: 0.8rem; vertical-align: super; }


/*  =====  CSS for elements  =====  */
html {
  scroll-behavior: smooth;
  font-size: 12pt;
}

body {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  max-width: 108rem;
}

img {
  width: 100%;
  height: 100%;
}

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}


/*  =====  CSS for page header  =====  */
#pageHeader {
  display: block;
  width: 100%;
  background-color: #004400;
}

#headerTop {
  min-height: 1.25rem;
  background-color: #800000;
}

#headerBottom {
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  background-image: url(/images/swamp1.png);
  padding: 1.25rem 0 1.25rem 0;
}

#titleGroup {
  padding: 0.5rem;
  text-align: center;
}

.headerTitle {
  margin: 0;
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-size: 3rem;
  font-weight: bold;
  color: #E6E019;
}

.headerSubtitle {
  margin: 0;
  font-family: sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  color: #c0c0c0;
}

/*  ===== CSS for page navigation =====  */

#pageMenu {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around; ;
  background-color: #2d6233;
  margin: 0;
  padding: 0;
}

#pageMenu a {
  margin: 0.75rem;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  color: #edf2a5;
  text-decoration: none;
}

#pageMenu a:hover {
    color: #ffffff;
}

/*  ===== CSS for main content area =====  */

#pageWrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: #f8f8ff;
}

#mainContent {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  max-width: 64rem;
  color: #202020;
  background-color: #f0f0ec;
}

#contentTitle {
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  font-size: 2.5rem;
  font-family: serif;
  font-style: normal;
  font-weight: bold;
}
/*  ===== CSS for side content area =====  */

#sideContent {
  display: inline-flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  color: #303030;
  background-color: #c0d0ff;
  margin: 0;
  padding: 0;
  width: 280px;
}

.sideBox {
  margin: 1rem auto;
  padding: 0;
}

.sideTitle {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 1.25rem;
}

/*  ===== CSS for page footer =====  */

#pageFooter {
  margin: 0;
  padding: 1rem;
  background-color: #272727;
}

.footerMenu {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  color: #c0c0c0;
}

.footerMenu a {
  margin: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  font-family: sans-serif;
  font-weight: bold;
  color: #c0c0c0;
  text-decoration: none;
}

.footerMenu > a:hover {
  color: #ffffff;
}

.footerCopyright {
  margin: 0;
  padding: 0;
  color: #faff88;
  text-align: center;
}

.footerCopyright p {
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
}

/*  ===== CSS for index items =====  */
.indexItem {
  margin: 0px;
  padding: 0.5rem 0;
}

.indexItem a {
  margin: 0px;
  font-size: 1.25rem;
  font-weight: bold;
}

.indexItem p {
  margin: 0px;
  padding-left: 2rem;
}

/*  ===== CSS for article =====  */

.articleWrap {
  display: flex;
  flex-flow: column nowrap;
}

.flexWrap {
  display: flex;
  flex-flow: row wrap;
}

.textArticle {
  margin: 2rem auto;
  padding: 2rem;
  max-width: 64rem;
  background-color: #f4f4e4;
  font-family: "Times New Roman", serif;
  font-size: 1rem;
}

.articleTitle {
  padding: 0.5rem 0;
  margin: 0;
  text-align: center;
  font-size: 1.75rem;
  font-family: serif;
  font-style: normal;
}

.sectionTitle {
  margin: 0;
  padding: 0.5rem 0 0.3rem 0;
  text-align: center;
  font-size: 1.25rem;
  font-family: serif;
  font-style: normal;
}

.paraTitle {
  padding: 0.8rem 0 0.2rem 0;
  margin: 0;
  text-align: left;
  font-size: 1rem;
  font-family: serif;
  font-style: normal;

}

.welcomeArticle {
  margin: 1rem auto;
  padding: 1rem;
  color: #303030;
  background-color: #dce9ff;
  font-family: sans-serif;
  font-size: 1rem;
  border: 2px solid #303030;
  border-radius: 5px;
}

.welcomeSig {
  font-family: serif;
  font-style: italic;
  padding: 1rem 2rem;
  margin: 0;
  text-align: right;
}

.articleSummary {
  width: 85%;
  margin: 1rem auto;
  padding: 0.5rem;
  background-color: #e0e0e0;
  font-style: italic;
  text-indent: 1.5rem;
}

.textPara {
  padding: 0.25rem 0;
  margin: 0;
  text-indent: 1.5rem;
}

.footNote {
  margin: 0;
  padding: 0;
  font-size: 0.8rem;
}

.notesSectionTitle {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: bold;
}

/* ================================================= */

.articleAside {
  min-width: 12rem;
  color: #202020;
  background-color: gainsboro;
  border: 0.5rem double #000000;
  padding: 1rem;
  margin: 2rem auto;
  max-width: 64rem;
}

.articleNotice {
  width: 85%;
  margin: auto;
  padding: 0.5rem;
  font-style: italic;
  text-indent: 1.5rem;
}

.articleNoticeBold {
  width: 85%;
  margin: auto;
  padding: 0.5rem;
  font-style: italic;
  text-indent: 1.5rem;
  font-weight: bold;
}

.sigSection {
  padding: 1rem 0;
}

.articlePosted {
  margin: 0;
  font-family: serif;
  font-style: italic;
}

.articleLastUpdate {
  margin: 0;
  font-family: serif;
  font-style: italic;
}

.articleAuthor {
  margin: 0;
  font-family: serif;
  font-style: italic;
}

#backBtn {
  display: block;
  border: 2px solid #808080;
  border-radius: 7px;
  margin: 2rem auto;
  padding: 0.5rem;
  background-color: lightblue;
  cursor: pointer;
}

.preBox {
  width: 22rem;
  padding: 0.5rem;
  margin: 0 auto;
  font-size: 1rem;
  font-family: monospace;
  font-weight: bold;
}


.articleIndex {
  padding: 0.5rem;
  margin: 0;
  color: #202020;
  background-color: ivory;
}

.indexList {
  max-width: 40rem;
  padding: 1rem;
  margin: 0.5rem auto;
  background-color: lightblue;
  border: 2px solid darkblue;
  border-radius: 1rem;
  list-style-position: inside;
}

.indexBox {
  padding: 0;
  margin: 0;
}

.indexList h1 {
  font-size: 1rem;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.linkList {
  list-style-type: none;
  list-style-position: inside;
  padding: 0;
  margin: 0;
  text-align: center;
}

.listItem {
  margin: 1rem auto;
  padding: 0.25rem 0;
}

.smallSize {
  font-size: 0.75rem;
}

/*  ===== CSS for tables =====  */


table {
  margin: 0 auto;
  background-color: #fefff0;
  min-width: 320px;
  max-width: 1024px;
  border: 5px solid black;
  padding: 1rem;
}

caption {
  font-weight: bold;
  font-size: 1.25rem;
  padding: 1.5rem 0 0.5rem 0;
  margin: 0 auto;
}

td {
  margin: 0;
  padding: 0 0.5rem;
}

.tallRow td {
  padding: 0.25rem 1rem;
  margin: 0;
  text-align: left;
}

/*  ===== CSS for audio =====  */

    .audioSelect {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      justify-content: center; 
      align-items: center;
      margin: auto;
    }

/*  ===== CSS for misc uses =====  */

#scrollBtn {
  display: none;
  width: 32px;
  height: 32px;
  background-image: url('/images/icon-top-gray.png');
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 99;
  cursor: pointer;
}

.smallBox {
  max-width: 20rem;
  padding: 0.5rem;
  margin: 0 auto;
  border: 5px double #202020;
  border-radius: 9px;
}

.prosign {
  text-decoration: overline;
  font-variant: small-caps;
}


/* Extra small devices (phones, 320px and down) */
@media only screen and (max-width: 20rem) {

  #headerTitle {
    font-size: 1.5rem;
  }

  #headerSubtitle {
    font-size: 1rem;
  }

  .preBox {
    font-size: 0.8rem;
  }

  table {
    font-size: 0.75rem;
  }
}

/*  ===== CSS for software pages =====  */

      .verticalListL {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-start;
        margin: 2rem auto;
        padding: 0;
      }
        
      .verticalListC {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin: 2rem auto;
        padding: 0;
      }
        
      .verticalListR {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: flex-end;
        margin: 2rem auto;
        padding: 0;
      }
        
      .vGroup {
        margin: 2rem 0;
      }

      .vlistItem {
        display: block;
        margin: 1.25rem 0 0 0;
        padding: 0;
      }

      .horizontalList {
        display: flex;
        flex-flow: row wrap;
        justify-content: center; ;
        align-items: center;
        margin: 0;
        padding: 0;
      }
      
      .hGroup {
        margin: 0 1rem;
      }

      .featureList {
        margin: 0;
        padding: 0;
      }
      
      .featureList p {
        margin-bottom: 1rem;
        padding: 0;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
      }
        
      .featureList ul {
        margin: 0;
        padding: 0 2rem;
        list-style-type: square;
        list-style-position: inside;
        text-align: left;
      }
      
      .featureList li {
        margin: 0.25rem 0 0 0;
        padding: 0;
      }
      
      .onlineManual {
        margin-top: 3rem;
        padding: 0;
        text-align: center;
      }
      
      .onlineManual p {
        margin: 0;
        padding: 0;
        font-size:1.5rem;
        font-weight: bold;
      }
        
      .onlineManual {
        margin-top: 3rem;
        padding: 0;
        text-align: center;
      }
      
      .onlineManual p {
        margin: 0;
        padding: 0;
        font-size:1.5rem;
        font-weight: bold;
      }
        
      .onlineManual a {
        display: block;
        margin-top: 1rem;
        padding: 0;
      }

      .onlineManual a:hover {
        background-color: lightblue;
      }

      .downloadLatest {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;
        padding: 0;
      }
        
      .downloadLatest p {
        margin: 0;
        padding: 0;
        font-size: 1.5rem;
        font-weight: bold;
      }
      
      .downloadLatest a {
        display: block;
        margin-top: 1rem;
        padding: 0;
      }

      .downloadLatest a:hover {
        background-color: lightblue;
      }
      
      .downloadList p {
        font-size: 1.75rem;
        font-weight: bold;
      }
      
      .downloadList a {
        display: block;
        margin: 1rem 0 0 0;
        font-size:1.25rem;
      }

      .downloadList a:hover {
        background-color: lightblue;
      }
      
      .listNomark {
        list-style-type: none;
      }
      
      .screenShot {
        margin: 0;
        padding: 0;
      }
      

/* Medium devices (portrait tablets and landscape phones, 608px and up) */
@media only screen and (min-width: 38rem) {
}

/* Medium devices (large landscape phones, portrait tablets, 768px and up) */
@media only screen and (min-width: 48rem) {

}

/* Large devices (landscape tablets, laptops/desktops, 992px and up) */
@media only screen and (min-width: 62rem) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 75rem) {
}