body{background-color:#ffffff;overflow-x: scroll!important;padding:0;margin-top:2px;font-size:18px;}
#wrapper{max-width:1300px;margin:0 auto;!important;background-color:#ffffff;}
html {scroll-behavior: smooth;box-sizing: border-box;}

/* colours used: #005956 (dark green), #fffffe (off white), #abd1c6 (light green), #d8f5ed (lightest green) #f9bc60 (light orange), #001e1d (off black), #e8e4e6 (pale grey), #e16162 (brighter orange) */



/* -------------------------------------------------- */
/* for all pages */
/* -------------------------------------------------- */

/* fonts */
h1, h1 a:link, h2, h2 a:link, h3, h4, h5, h6 {font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
a, p, pre{font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; font-weight:500;}
p{color:#001e1d;line-height:1.6em;}
p.table{font-family:Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;font-weight:bold;}
p.large{font-size:1.5em;color:#001e1d;}
p.author{font-size:1em;margin-left:3px;}
@media only screen and (max-width: 800px){p.author{text-align:center;}}
p.breadcrumb{font-size:1em;margin-left:3px;}
@media only screen and (max-width: 800px){p.breadcrumb{text-align:center;}}
p.download_updates{font-size:1.25em;}
p.desc{font-size:0.75em;font-style:italic;text-align:center!important;}
p.cite{font-size:0.75em;color:#001e1d;}
p.byline{font-size:1em;font-style:italic;}
@media only screen and (max-width: 800px){p.byline{text-align:center;}}
p.info-online{font-style:italic;text-align:center;}
p.info{font-size:1em;font-style:italic;}
@media only screen and (max-width: 600px){p.info{text-align:center;}}
p.small{font-size:0.85em;font-style:italic;font-weight:bold;color:#001e1d;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
p.quote{font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; font-size:1.05em;font-style:italic;}
@media only screen and (max-width: 800px){p.quote{font-size:1em;}}
p.chapter-nav{text-align:center;font-size:1.15em;}
p.level-2-chapter{margin-left: 20px; /* Indentation for the entire block */
    text-indent: -20px; /* Moves the first line back to align with the margin */
    padding-left: 20px; /* Ensures subsequent lines are aligned */font-size:0.85em;}
p.level-3-chapter{text-indent:40px;font-size:0.75em;}
p.level-4-chapter{text-indent:60px;font-size:0.65em;}
a:link {color:#1a0dab;text-decoration:underline;}
a:visited {color:#1a0dab;text-decoration:underline;}
a:hover {color:#005956;}
a:focus {color:#005956;}
ol li{font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-left:5px;margin-top:1em;margin-bottom:1em;}
ul li{font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-left:5px;margin-top:1em;margin-bottom:1em;}
h1{font-size:2em;color:#005956;margin-bottom:2px;margin-top:10px;}
@media only screen and (max-width: 800px){h1{font-size:1.8em;text-align:center;}}
@media only screen and (max-width: 500px){h1{font-size:1.6em;}}
h1.title{text-align:center;}
h2.title{text-align:center;}
h3.title{text-align:center;}
h2{font-size:1.6em;color:#005956;margin-bottom:2px;margin-top:4px;}
@media only screen and (max-width: 800px){h2{font-size:1.4em;text-align:center;}}
h3{font-size:1.4em;color:#005956;margin-bottom:2px;}
h3.buy{font-size:1em;color:#005956;margin-bottom:5px;text-align:center;}
h4{font-size:1.2em;color:#005956;}
@media only screen and (max-width: 800px){h4{font-size:1.05em;}}
h5{font-size:1.15em;color:#005956;}
@media only screen and (max-width: 800px){h5{font-size:1em;}}
h6{font-size:1.05em;color:#005956;}
p.more{color:#7B2EB0;padding-left:3px;border-left:2px solid #7B2EB0;}


/* header */
header{width:100%;margin:0 auto;background-color:#ffffff;height:auto;padding-top:7px!important;text-align:center!important;border-bottom:}
header a:link, header a:visited{color: #ffffff;}
header a:focus{background-color:#ffffff;outline: 1px dashed #ffffff;}
header a:hover{background-color:#ffffff;}


/* logo */
.logo {float:none!important;text-align:center;margin-bottom:5px!important;}
img.logo {max-width:400px;}
a.logo:link{background-color:#ffffff;}
a.logo:visited{background-color:#ffffff;}
a.logo:hover{background-color:#ffffff;}
a.logo:focus{background-color:#ffffff;}
@media only screen and (max-width: 1320px){.logo{float:none!important;text-align:center;margin-bottom:5px!important;}}
@media only screen and (max-width: 852px){.logo{width:100%;}}


/* main navigation */
.topnav {overflow: hidden;clear:both;background-color: #005956;float:none;text-align:center;margin-right:0;margin-top:5px;margin-bottom:5px;border-top:1px solid #CCD1D1;}
.topnav a {display:inline-block;color: white!important;text-align: center;padding: 15px 7px;text-decoration: none;font-size: 18px;font-weight:500;}
.topnav a:hover {background-color: #D4AF37;color: #F5F5F5!important;}
.topnav a.active {background-color: #D4AF37;color: #F5F5F5!important;}
.topnav a.donate {background-color: #F5F5F5;color: #005956!important;}
.topnav .icon {display: none;}
@media screen and (max-width: 852px) {.topnav{background-color: #005956;border-top:1px solid #CCD1D1;}}
@media screen and (max-width: 852px) {.topnav a{display: none;}.topnav a.icon {float: right;display: block;font-size:1em;background-color: #005956;color:#fff!important;}}
@media screen and (max-width: 852px) {.topnav.responsive {position: relative;}.topnav.responsive .icon {position: absolute;right: 0;top: 0;}
.topnav.responsive a {float: none;display: block;text-align: left;font-size:1em;}}

/* divider */
hr.dotted {border-top: 3px dotted #005956;margin-top:25px;margin-bottom:25px;width:95%;}
hr.dotted-cats {border-top: 3px dotted #005956;margin-top:10px;margin-bottom:10px;width:95%;}


/* container for index page and for any gallery content including at the end of blog page content (wider) */
.gallery-content{width:100%;margin:0 auto;}
.gallery-content p{color:#001e1d;}
.gallery-content a:link {color:#1a0dab;text-decoration:underline;}
.gallery-content a:visited {color:#1a0dab;text-decoration:underline;}
.gallery-content a:hover {color:#005956;}
.gallery-content a:focus {color:#005956;}


/* container for blog style pages (narrower), goes inside gallery-container to contain width */
.blog-content{width:65%;}
@media screen and (max-width: 1300px) {.blog-content{width:75%;}}
@media screen and (max-width: 870px) {.blog-content{width:96%;}}
.blog-content p{color:#001e1d;}
.blog-content a:link {color:#1a0dab;text-decoration:underline;}
.blog-content a:visited {color:#1a0dab;text-decoration:underline;}
.blog-content a:hover {color:#005956;}
.blog-content a:focus {color:#005956;}

/* container for online texts */
.online-texts{width:50%;margin:0 auto;}
@media screen and (max-width: 1000px) {.online-texts{width:75%;}}
@media screen and (max-width: 870px) {.online-texts{width:96%;}}
.online-texts p{color:#001e1d;}
.online-texts a:link {color:#1a0dab;text-decoration:underline;}
.online-texts a:visited {color:#1a0dab;text-decoration:underline;}
.online-texts a:hover {color:#005956;}
.online-texts a:focus {color:#005956;}

/* general flex layout - use 1, 2, 3, 4, or 5 (max) per line - for any gallery images inner content */
.wrapper-flex {display: flex;  flex-flow: row wrap;font-weight: bold;text-align: center;margin-top:10px;gap:30px;  }
.wrapper-flex > * {padding: 2px;flex: 1 100%;}
img.wrapper-flex{margin:0;}
.aside-flex {background: #ffffff;box-shadow: 5px 10px 8px 10px #cccccc;text-align: center;margin-top:0!important;}
.aside-flex p {color:#005956;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-top:8px;margin-bottom: 2px;}
.aside-flex a:link{color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-flex a:visited{color:#1a0dab;text-decoration:none;}
.aside-flex a:hover{color:#001e1d;text-decoration:none;background-color:#ffffff;}
.aside-flex a:focus{color:#001e1d;text-decoration:none;background-color:#ffffff;}
@media all and (min-width: 790px) {.aside-flex { flex: 1 0 0; }}

/* top box used for support with either bullhorn icon or image */
.wrapper-support {
  clear: both;
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  margin-top: 0;
}

.wrapper-support > * {
  padding: 3px 18px 0; /* Combines padding shorthand */
  flex: 1 100%;
}

.support {
  background-color: #fec437; /* Light green background */
  border: 1px solid #897bc1; /* Soft green border */
  padding: 16px;
  border-radius: 8px;
  margin: 16px 0;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif!important;
}

/* Style the heading inside .support */
.support h3 {
  font-size: 1.25em; /* Slightly larger font size */
  color: #001e1d; /* Dark green text */
  margin: 8px 0;
  font-weight: bold;font-family: Helvetica, Arial, sans-serif!important;
  display: inline; /* Keeps heading inline with link */
}

/* Style the links inside .support */
.support a {
  font-size: 1.1em; /* Slightly smaller than before for balance */
  color: #0F29BE !important; /* Blue link color */
  text-decoration: underline;
  font-family: Helvetica, Arial, sans-serif!important;
  font-weight: normal; /* Match heading weight for harmony */
  margin-left: 6px; /* Small gap from the heading text */
}

.support a:visited {
  color: #0F29BE !important; /* Keep visited links blue */
}

.support a:hover,
.support a:focus {
  color: #0F29BE !important;
  text-decoration: underline;
}

/* Donate box container */
.donate-box {
  max-width: 100%;
  background-color: #fec437; /* Light soft green background */
  border: 1px solid #897bc1; /* Soft green border */
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  text-align: left;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for depth */
}

/* Style the heading */
.donate-box h3 {font-family: Helvetica, Arial, sans-serif;
  color: #ffffff; /* White text for contrast */
  background-color: #e1380a; /* Soft green background */
  padding: 8px 12px; /* Padding around the heading */
  margin: 8px 0;
  font-size: 1.5em; /* Larger size for emphasis */
  font-weight: bold;
  border-radius: 5px; /* Soft rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow for depth */
}

/* Style paragraph text */
.donate-box p {font-family: Helvetica, Arial, sans-serif;
  color: #001e1d; /* Dark green for consistency */
  font-size: 1em;
  margin: 8px 0;
}

/* Style links inside donate box */
.donate-box a {font-family: Helvetica, Arial, sans-serif;
  color: #0F29BE; /* Blue link color */
  text-decoration: underline;
  font-weight: normal;
}

.donate-box a:visited {
  color: #0F29BE;
}

.donate-box a:hover,
.donate-box a:focus {
  color: #0F29BE;
  background-color: #ffffff;
  text-decoration: underline;
}

/* donation box  */
.donation{border:1px solid #ffffff;background-color:#ffffff;margin:20px 0;padding:3px;}
p.donation{margin-top:2px;line-height:1.35em;}
p.donation a:link {color:#1a0dab;}
p.donation a:visited {color:#1a0dab;}
p.donation a:hover {color:#005956;background-color:#abd1c6;}
p.donation a:focus {color:#005956;background-color:#abd1c6;}

.donate-container{text-align:left;}
.inner{margin:0;}
@media screen and (max-width: 800px) {.donate-container {text-align:center;}}
@media screen and (max-width: 800px) {.inner {margin:0 auto;}}
.donate-buttons{display:inline-block;overflow:hidden;width:180px;height:90px;text-align:center;background-color:#ffffff;padding:0;border:0;margin:0 auto;}
@media only screen and (max-width: 620px){.donate-buttons{width:160px;margin-left:0;}}
@media only screen and (max-width: 590px){.donate-buttons{width:150px;margin-left:3px;height:85px;}}

/* footer  */
.footer-new{max-width: 1300px;text-align:center;margin:0 auto;position: relative;height: auto;background-color: #e8e4e6;margin-top:30px;padding-top:30px;padding-bottom:30px;padding-left:15px;padding-right:15px;}
.footer-new > a:link{color: #001e1d;line-height:2.5em;}
.footer-new > a:visited{color: #001e1d;}
.footer-new > a:hover{background-color:#e16162;color:#fffffe;}


/* -------------------------------------------------- */
/* images */
/* -------------------------------------------------- */

/* images */
img {max-width: 100%;height: auto;}
img.scroll{border: none;margin-bottom:30px;margin-top:30px;}
a.scroll:hover {background-color:#ffffff!important;}

/* enlarges the images upon hover */
.zoom {transition: transform .2s;}
.zoom:hover {-ms-transform: scale(1.05); /* IE 9 */-webkit-transform: scale(1.05); /* Safari 3-8 */transform: scale(1.05); }


/* -------------------------------------------------- */
/* for index page */
/* -------------------------------------------------- */

/* hero image */
.hero-image {clear:both;background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../content/site-images/hero-images/hero-image-3.jpg");height: 350px;max-width:1300px;margin:0 auto;background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;opacity:90%;}
.hero-text {text-align: left;width:96%;position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);color: white;}
@media screen and (max-width: 830px) {.hero-text{text-align: center;}}
.hero-text button {border: none;outline: 0;display: inline-block;padding: 10px 25px;background-color: #005956;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; font-size:22px;color: white;text-align: center;cursor: pointer;}
.hero-text button:hover {color: black;background-color: #abd1c6;}
h1.hero {color: #e8e4e6;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
p.hero {color: #e8e4e6;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; font-size:22px;}
@media screen and (max-width: 830px) {h1.hero {font-size:1.6em;}}
@media screen and (max-width: 690px) {h1.hero {margin-top:35px;}}
@media screen and (max-width: 690px) {p.hero {font-size:1em;}}
@media screen and (max-width: 420px) {h1.hero {font-size:1.2em;}}
@media screen and (max-width: 420px) {p.hero {font-size:0.85em;}}

/* front-page bio box - dark orange background */
.flexIndexBio {
display: flex;  flex-flow: row wrap;font-weight: bold;text-align: left;margin-top:2px;}
.flexIndexBio > * {padding-left: 18px;padding-right: 18px;padding-top: 7px;padding-bottom: 7px;flex: 1 100%;}
.box-flexIndexBio {text-align: left;background: #F3F3EB;border:none;margin-top:0;}
p.flexIndexBio{margin:8px;color:#001e1d!important;}
img.flexIndexBio{float:left;border:none;width:100px;height:100px;margin-right:10px;margin-left:1px;margin-top:0;margin-bottom:5px;max-width:100%;}
@media only screen and (max-width: 720px){img.flexIndexBio{display: block;float:none;margin:0 auto;margin-bottom:10px;}}

/* larger boxes side by side with main one in middle - can also be used just with asides 1 and 2 without the main, etc */
.flexIndexTrio {
display: flex;  flex-flow: row wrap;font-weight: bold;text-align: center;margin-top:10px;gap:30px;  }
.flexIndexTrio > * {padding: 2px;flex: 1 100%;}
img.flexIndexTrio{margin:0;}
.main {background: #ffffff;box-shadow: 5px 10px 8px 10px #cccccc;text-align: center;margin-top:0!important;}
.main p {color:#005956;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-top:8px;}
.main a:link{color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.main a:visited{color:#1a0dab;text-decoration:none;}
.main a:hover{color:#001e1d;text-decoration:none;background-color:#ffffff;}
.main a:focus{color:#001e1d;text-decoration:none;background-color:#ffffff;}
.aside-1 p {color:#005956;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-top: 0;}
.aside-1 a:link{color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-1 a:visited{color:#1a0dab;text-decoration:none;}
.aside-1 a:hover{color:#001e1d;text-decoration:none;background-color:#ffffff;}
.aside-1 a:focus{color:#001e1d;text-decoration:none;background-color:#ffffff;}
.aside-1 {background-color: #ffffff;box-shadow: 5px 10px 8px 10px #cccccc;}
.aside-1 img{margin-top:2px;}
.aside-1 button {border: none;outline: 0;display: inline-block;padding: 10px 25px;background-color: #e16162;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; font-size:22px;color: #ffffff;text-align: center;cursor: pointer;}
.aside-1 button:hover {color: #001e1d;background-color: #e16162;}
.aside-2 {background-color: #ffffff;box-shadow: 5px 10px 8px 10px #cccccc;}
@media all and (min-width: 990px) {.aside { flex: 1 0 0; }}
@media all and (min-width: 990px) {.main    { flex: 3 0px; }.aside-1 { order: 2; } .main    { order: 1; } .aside-2 { order: 3; }}


/* -------------------------------------------------- */
/* for blog and content gallery pages */
/* -------------------------------------------------- */

/* for all book category pages */
.wrapper-books {
display: flex;  flex-flow: row wrap;justify-content: flex-start;text-align: center;padding-right:5px;margin-top:20px;gap:12px;  }
.wrapper-books > * {padding: 2px;flex: 1 100%;align-items: center;}
.aside-books {flex:0 1 22%;max-width:240px;background-color: #ffffff;box-shadow: 5px 10px 8px 10px #cccccc;}
@media all and (max-width: 1410px) {.aside-books { flex-basis: 18.6%;}}
@media all and (max-width: 1050px) {.aside-books { flex-basis: 23.5%;}}
@media all and (max-width: 935px) {.aside-books { flex-basis: 23%;}}
@media all and (max-width: 800px) {.aside-books { flex-basis: 30%;margin-left:5px;}}
@media all and (max-width: 600px) {.aside-books { flex-basis: 44%;margin-left:10px;}}
@media all and (max-width: 370px) {.aside-books { flex-basis: 100%;margin:0 auto;}}
.aside-books p{font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-top:8px;}
.aside-books a:link {color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-books a:visited {color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-books a:hover {color:#001e1d;text-decoration:none;background-color:#ffffff;}
.aside-books a:focus {color:#001e1d;text-decoration:none;background-color:#ffffff;}

/* author and info boxes */
.wrapper-flex-authors {display: flex;  flex-flow: row wrap;justify-content: flex-start;text-align: center;padding-right:5px;margin-top:20px;gap:12px;  }
.wrapper-flex-authors > * {padding: 2px;flex: 1 100%;align-items: center;}
.aside-flex-authors {flex:0 1 23.55%;background-color: #ffffff;box-shadow: 5px 10px 8px 10px #cccccc;max-width:550px;}
@media all and (max-width: 1670px) {.aside-flex-authors { flex-basis: 23.5%;}}
@media all and (max-width: 1615px) {.aside-flex-authors { flex-basis: 23.4%;}}
@media all and (max-width: 1515px) {.aside-flex-authors { flex-basis: 23.2%;}}
@media all and (max-width: 1350px) {.aside-flex-authors { flex-basis: 23%;}}
@media all and (max-width: 690px) {.aside-flex-authors { flex-basis: 43%;margin:0 auto;}}
@media all and (max-width: 400px) {.aside-flex-authors { flex-basis: 100%;margin-left:8px;}}
.wrapper-flex-authors p{font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-top:8px;}
.aside-flex-authors a:link {color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-flex-authors a:visited {color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-flex-authors a:hover {color:#001e1d;text-decoration:none;background-color:#ffffff;}
.aside-flex-authors a:focus {color:#001e1d;text-decoration:none;background-color:#ffffff;}


/* for related books on individual book pages */
.wrapper-flex-related {display: flex;  flex-flow: row wrap;justify-content: flex-start;text-align: center;padding-right:5px;margin-top:20px;gap:10px;}
.wrapper-flex-related > * {padding: 2px;flex: 1 100%;align-items: center;}
.aside-flex-related {flex:0 1 15.25%;background-color: #ffffff;box-shadow: 5px 10px 8px 10px #cccccc;max-width:200px;margin-right:6px;}
@media all and (max-width: 1335px) {.aside-flex-related { flex-basis: 15%;margin:0 auto;}}
@media all and (max-width: 860px) {.aside-flex-related { flex-basis: 33%;margin:0 auto;}}
@media all and (max-width: 800px) {.aside-flex-related { flex-basis: 33%;margin:0 auto;}}
@media all and (max-width: 680px) {.aside-flex-related { flex-basis: 30%;margin:0 auto;}}
@media all and (max-width: 550px) {.aside-flex-related { flex-basis: 48%;margin:0 auto;}}
@media all and (max-width: 440px) {.aside-flex-related { flex-basis: 100%;max-width:240px;margin-top:20px;}}
.aside-flex-related p{font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; margin-top:8px;}
.aside-flex-related a:link {color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-flex-related a:visited {color:#1a0dab;text-decoration:none;font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; }
.aside-flex-related a:hover {color:#001e1d;text-decoration:none;background-color:#ffffff;}
.aside-flex-related a:focus {color:#001e1d;text-decoration:none;background-color:#ffffff;}

/* pagination  */
.page-nav{}
@media only screen and (max-width: 800px){.page-nav{text-align: center;margin:0 auto;}}
.pagination {
  display: inline-block;
}
@media only screen and (max-width: 800px){.pagination{text-align: center;margin:0 auto;}}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #005956;
  margin: 10px 4px;
}
@media only screen and (max-width: 800px){.pagination a{text-align: center;}}
.pagination a.active {
  background-color: #005956;
  color: white;
  border: 1px solid #005956;
}
.pagination a:hover:not(.active) {background-color: #e16162;color: white;}


/* -------------------------------------------------- */
/* for donate page */
/* -------------------------------------------------- */

/* currency boxes */

.wrapper-donate {display: flex;  flex-flow: row wrap;font-weight: bold;text-align: center;margin-top:10px;gap:10px;}
.wrapper-donate > * {padding: 10px;flex: 1 100%;}
.aside-donate {background: #e8e4e6;border:2px dotted #005956;}
@media all and (min-width: 1100px) {.aside-donate { flex: 1 0 0; }}


/* for individual book pages, from old css */

img.book{float:left;border:none;width:238px;height:357px;margin-right:30px;margin-left:1px;margin-top:3px;margin-bottom:15px;max-width:100%;}
@media only screen and (max-width: 600px){img.book{display: block;float:none;margin:0 auto;}}

.description h2{text-align:left;}
@media only screen and (max-width: 600px){.description h2{text-align:center;font-size:1.4em;}}

.downloads{text-align:left;}
@media screen and (max-width: 800px) {.downloads {text-align:center;}}
.related{text-align:left;}
@media screen and (max-width: 800px) {.related {text-align:center;}}


/* download buttons new*/
.btn-download {font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; font-weight:500;background-color: #005956;border: 1px dotted #005956;display:inline;margin:0 auto;color: white;padding: 10px 10px;cursor: pointer;font-size:1em;margin-bottom:10px;}
.btn-download:hover {color:#F5F5F5;background-color:#D4AF37;border: 1px dotted #4056a1;}
@media screen and (max-width: 585px) {.btn-download {width: 70%;text-align:center;}}
@media screen and (max-width: 400px) {.btn-download {width: 100%;text-align:center;}}
.btn-download a:link {color:#005956!important;text-decoration:none!important;}
.btn-download a:visited {color:#005956!important;text-decoration:none!important;}
.btn-download a:hover {color:#005956!important;text-decoration:none!important;background-color:#eff0f3;}
.btn-download a:focus {color:#005956!important;text-decoration:none!important;background-color:#eff0f3;}

/* category buttons (at top of book page) CAN GET RID OF ONCE ALL BOOK PAGES ARE REDONE */
.btn-category {font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; font-weight:500;background-color: #057a75;border: 1px dotted #057a75;margin:0 auto;color: #ffffff;padding: 6px 6px;cursor: pointer;display:inline;font-size:0.85em;margin:5px;}
.btn-category:hover {background-color: #eff0f3;color:#005956!important;}
.btn-category a:link {color:#eff0f3!important;text-decoration:none!important;}
.btn-category a:visited {color:#eff0f3!important;text-decoration:none!important;}
.btn-category a:hover {color:#005956!important;text-decoration:none!important;background-color: #eff0f3;}
.btn-category a:focus {color:#005956!important;text-decoration:none!important;background-color: #eff0f3;}

/* a class for above two buttons */
a.button{text-decoration:none!important;}
a.button:hover{text-decoration:none!important;}

.collection{border:1px dotted #E74C3C;background-color:#F2EB73;margin:20px 0;padding:3px;}

/* table */
table {border: 1px solid #000000;border-collapse: collapse;margin: 0;padding: 0;table-layout: fixed;vertical-align: top;}
table caption {font-size: 1.5em;margin: .5em 0 .75em;}
table tr {background-color: #ffffff;border: 1px solid #ffffff;padding: .85em;}
table th,
table td {padding: .85em;text-align: left;border: 2px solid #ffffff;vertical-align: top;}
table th {font-size: .85em;letter-spacing: .1em;text-transform: uppercase;}
@media screen and (max-width: 600px) {
table {border: 1px solid #ffffff;}
table caption {font-size: 1.3em;}
table thead {border: 1px solid #ffffff;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
table tr {border-bottom: 3px solid #ffffff;display: block;margin-bottom: .625em;}
table td {border: 2px solid #ffffff;display: block;font-size: 1em;text-align: center;padding: 0 15px 0 15px;vertical-align: top;}
table td::before {
content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;vertical-align: top;}
table td:last-child {border-bottom: 0;}}


/* Wrapper for the flex container - USED FOR MAIN CATEGORY PAGE */
.wrapper-flex-quizzes {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start; /* Ensures spacing even with fewer items */
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    gap: 30px;
}

/* Flex items */
.wrapper-flex-quizzes > * {
    padding: 2px;
    flex: 0 1 calc(33.33% - 30px); /* Each item takes up 1/3 of the container width minus the gap */
    box-sizing: border-box; /* Ensures padding and border are included in width calculation */
}

/* Specific styles for boxes */
.aside-flex-quizzes {
    background: #ffffff;
    box-shadow: 5px 10px 8px 10px #cccccc;
    text-align: center;
    margin-top: 0 !important;
    padding: 10px; /* Add padding to create some spacing inside the box */
}

/* Paragraph styling inside boxes */
.aside-flex-quizzes p {
    color: #005956;
    font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; 
    margin-top: 8px;
    margin-bottom: 2px;
}

/* Link styling */
.aside-flex-quizzes a:link, 
.aside-flex-quizzes a:visited {
    color: #1a0dab;
    text-decoration: none;
    font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif; 
}

.aside-flex-quizzes a:hover, 
.aside-flex-quizzes a:focus {
    color: #001e1d;
    text-decoration: none;
    background-color: #ffffff;
}

/* Media query for responsive adjustments */
@media all and (max-width: 790px) {
    .wrapper-flex-quizzes > * {
        flex: 0 1 100%; /* Stacks boxes on smaller screens */
    }
}

/* end of quiz ones */


/* Flex container for new categories */

.wrapper-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -10px;
    margin-right: -10px;
    align-items: stretch; /* make all boxes equal height */
    margin-bottom: 30px; /* spacing below entire container */
}

/* Flex items: 3 per row with padding */
.wrapper-categories > * {
    flex: 0 0 calc(33.333% - 20px);
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 30px; /* vertical gap between boxes */
}

/* Each category box */
.aside-categories {
    background: #ffffff;
    box-shadow: 5px 10px 8px 10px #cccccc;
    text-align: center;
    padding: 10px;
    margin: 0;

    /* Make content vertically spaced and boxes equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Image wrapper (for optional zoom etc.) */
.zoom {
    width: 100%;
    overflow: hidden;
}

/* Image inside the box */
.category-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    aspect-ratio: 990 / 350;
    object-fit: cover;
}

/* Paragraph inside boxes */
.aside-categories p {
    color: #005956;
    font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif;
    margin-top: 8px;
    margin-bottom: 2px;
}

/* Link styling */
.aside-categories a:link,
.aside-categories a:visited {
    color: #1a0dab;
    text-decoration: none;
    font-family: "Georgia", "Palatino Linotype", "Palatino", "Times New Roman", serif;
}

.aside-categories a:hover,
.aside-categories a:focus {
    color: #001e1d;
    background-color: #ffffff;
    text-decoration: none;
}

/* Responsive for small screens */
@media all and (max-width: 790px) {
    .wrapper-categories > * {
        flex: 0 0 100%;
        padding: 10px 0;
        margin-bottom: 30px; /* keep vertical spacing on mobile */
    }

    .wrapper-categories {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 30px;
    }
}


.category-grid {
  display: grid;
  gap: 1.5rem;
  padding: 5px;
  grid-template-columns: repeat(3, 1fr); /* Default: 3 columns */
}

.category-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.category-card img {
  width: 100%;
  height: auto;
  display: block;
}

.category-card h3 {
  margin: 12px 0 8px;
  font-size: 1.5rem; /* Bigger than before */
  font-weight: 600;
  color: #333;
  letter-spacing: 1px;
  font-family: 'Merriweather', serif; /* Elegant serif font */
  position: relative;
  display: inline-block;
}

.category-card h3 a {
  text-decoration: none;       /* Remove underline */
  color: #333;                 /* Match heading color */
  font-family: 'Merriweather', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.category-card h3 a::after {
  content: '';
  display: block;
  width: 40%;
  height: 2px;
  background: #c59d5f; /* Gold accent */
  margin: 6px auto 0;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.category-card h3 a:hover::after {
  width: 70%; /* Grows on hover for a nice effect */
}

.category-card h3 a:hover {
  color: #c59d5f; /* Optional: gold text on hover */
}


.category-card p {
  font-size: 1.2em;
  color: #555;
  margin: 0 10px 15px;
  line-height: 1.4;
}

/* Medium screens: 2 columns */
@media (max-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens: 1 column */
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}

/* new front page */


/* for front images, quotes, etc */

.front-box-grid {
  display: grid;
  gap: 1.5rem;
  padding: 5px;

  /* Flexible: each box is minimum 250px wide, otherwise it expands */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Box container */
.front-box {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Maintain the 1453x816 ratio (approx 16:9) */
  aspect-ratio: 1453 / 816;
}

/* Hover effect similar to category cards */
.front-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

/* Image fills entire box */
.front-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures full coverage without distortion */
  display: block;
  border-radius: 10px;
}

/* Responsive: 2 columns */
@media (max-width: 1024px) {
  .front-box-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: 1 column */
@media (max-width: 768px) {
  .front-box-grid {
    grid-template-columns: 1fr;
  }
}


/* for front lists, most downloaded, etc */

/* Front page grids (similar to category-grid) */
.frontpage-grid {
  display: grid;
  gap: 1.5rem;
  padding: 5px;
  grid-template-columns: repeat(1, 1fr); /* One column for lists */
}

/* Individual front page boxes */
.frontpage-box {
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect like category cards */
.frontpage-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

/* Headings (same style as category cards) */
.frontpage-box h3 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  letter-spacing: 1px;
  font-family: 'Merriweather', serif;
  position: relative;
  display: inline-block;
}

.frontpage-box h3 a {
  text-decoration: none;
  color: #333;
  font-family: 'Merriweather', serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.frontpage-box h3 a::after {
  content: '';
  display: block;
  width: 40%;
  height: 2px;
  background: #c59d5f;
  margin: 6px auto 0;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.frontpage-box h3 a:hover::after {
  width: 70%;
}

.frontpage-box h3 a:hover {
  color: #c59d5f;
}

/* Subtle background colors for each box type */
.frontpage-box.most-downloaded { background-color: #fbf6f0; } /* very light cream */
.frontpage-box.recent { background-color: #fbf6f0; } /* very light blue */
.frontpage-box.picks-of-the-day { background-color: #fbf6f0; } /* very light lavender */

/* List styling inside each box */
.frontpage-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.frontpage-box ul li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 1.1rem;
  color: #555;
}

/* Optional: remove last border */
.frontpage-box ul li:last-child {
  border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .frontpage-grid {
    grid-template-columns: 1fr;
  }
}





  .quote-box {
    background: #F5F5F5; /* subtle cream */
    padding: 2rem;
	margin-top:30px;
    border-left: 15px solid #fec437; /* gold accent */
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.6;
  }
.read-more {
  color: #0066cc;
  cursor: pointer;
  text-decoration: underline;
}

.category-description {
  overflow: hidden;
  max-height: 4em; /* adjust to show just a few lines */
  transition: max-height 0.4s ease;
}

.category-description.expanded {
  max-height: 1000px; /* large enough to show full content */
}