/* This file: /css/stringTherapyStyle.css */
/* 03/01/2026 20:40 */

@charset "utf-8";
/* CSS Document */

/* Hosting a downloaded Google font*/
@font-face {
  font-family: 'Cookie';
  src: url('/fonts/Cookie-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


body{
  font-family: Arial, Helvetica, sans-serif;
   background-color: #f4f4f4;
   margin: 0px;
   padding: 0px;
}


body#loginPage {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  margin: 4vh 0px;
}


/* Login form */
#loginContainer {
  background-color: #fff;
  padding: 212px 20px 20px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 360px;
  background-image: url("/images/formBG2.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}


#loginContainer h2{
  text-align: center;
  color: #333;
}

.formGroup{
  margin-bottom: 20px;
}

.formGroup input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.buttonContainer{
  text-align: center;
  margin-top: 20px;
}

.buttonContainer input[type="submit"]{
  background-color: #4e4e4e;
  color: #fff;
  padding: 10px 60px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.1s ease;
}

.buttonContainer input[type="submit"]:hover{
  background-color: #000;
}

.buttonContiner input[type="submit"]:focus{
  outline: none;
}

/* Show password checkbox area */
.checkboxContainer {
  margin-top: 10px; /* Adjust as needed */
  display: flex;
  align-items: center; /* Aligns items vertically center */
}

.checkboxContainer input[type="checkbox"] {
  margin-right: 5px; /* Space between checkbox and label */
  width: fit-content;
}



.centeredImage{
  display: block;
  margin: 0px auto;
}



#contentWrap {
  width: 100vw;
  max-width: 1024px;
  margin: auto;
  background-color: #4f4f4f;
  color: #fff;
  background: rgb(160,160,160);
  background: linear-gradient(58deg, rgba(160,160,160,1) 30%, rgba(0,0,0,1)90%);
}


/* The area below page header, outside of sonbook where we just need a simple webpage look. */
#pageContent {
  background-color: #fff;
  color: #333;
  padding: 60px;
  min-height: 60vh;
}


#pageContent ul li {
  padding-bottom: 20px;
  line-height: 1.5;
}





#topStrip {
  padding: 6px 20px 0px 20px;
  color: #fff;
  text-align: right;
  background-color: #333;
  text-transform: uppercase;
}




#topStrip a {
  color: #fff;
  text-decoration: none;
}


#topStrip ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Aligns menu items to the right */
}

#topStrip ul li {
    float: left;
}

#topStrip ul li a {
    display: block;
    color: white; /* Text color */
    text-align: center;
    padding: 14px 16px; /* Spacing around the text */
    text-decoration: none;
}

/* Change the link color to #111 (darker) on hover */
#topStrip ul li a:hover {
    background-color: #111;
}



/* Style the page top image */
img.pageBanner {
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 124; /* Adjust the values to match your image's aspect ratio */
  max-width: 1024px;
}


/* Style anchor row, where we insert an alphanumeric anchor text for the alphabetic menu */
/* Having to use !important here to override the Datatables CSS settings. */
/* .anchorRow {
  background-color: #fff!important;
}
*/

.anchorRow td {
  border-top: 3px solid #a7a1a1 !important;
}


.anchorRow h1 {
  font-family: "Cookie", cursive;
  font-weight: 400;
  font-style: normal;
  color: #000;
  padding: 0px 20px;
  margin: 0px;
  text-align: left;
  font-size: 3rem;
}



#menu_alphabetical ul {
  list-style-type: none;
  padding: 0px;
  text-align: center;
}


#menu_alphabetical li {
  display: inline-block;
  border: 1px solid #fff;
  padding: 20px 12px;
  margin: 0px;
  cursor: pointer;
  background-color: #33333394;
  color: #fff;
  font-size: 1.2rem;
}



#menu_alphabetical li:link, #menu_alphabetical li:visited{
  background-color: #000;
  color: #fff;
  text-decoration: none;
}


#menu_alphabetical li:hover {
  background-color: #f1f3f4;
  box-shadow: 0px 4px 40px #000;
  color: #000000;
}



/* Random and clear links */

#randomButtons {
  display: flex;
  justify-content: center;
  align-items: center;
}

a#randomLink {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #fff;
}

a:link#randomLink {
  border: 1px solid #fff;
}

a:hover#randomLink {
  border: 1px solid #000;
}


.image-link {
  width: 205px;
  height: 36px;
  background-image: url("/images/btn_recolaRoulette.webp");
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}

.image-link:hover {
  background-position: bottom;
}



.button-link {
  background-color: #525252;
  color: white;
  padding: 8px 20px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  margin: 8px;
  border: 1px solid white;
}


.button-link:hover, .button-link:focus {
  background-color: #fff;
  color: #000;
  text-decoration: none;
}





table.dataTable tbody th, table.dataTable tbody td {
  padding: 0px;
}

.songbookTable {
  background-color: #fff;
  width: 100%;
}

/* The datatable wrapper */
#songbook{
  background-color: #fff;
  color: #000;
  font-size: 1.0em;
  padding: 20px;
}

#songbook ul li{
  list-style: none;
  padding: 0.25em 0px
  ;
}

#songbook_wrapper thead{
  background-color: #000;
}



#songbook tr{
  text-align: center;
}

#songbook tr:hover {
  background-color: #f6f6f6;
}

#songbook td {
  border-bottom: 1px solid #d9d9d9;
}
#songbook.display tr.even {
  background-color: #F9F9F9;
}

table {
  border-collapse: collapse; /* Merges adjacent cell borders */
  border-spacing: 0; /* Removes space between cells */
}

th {
  background-color: black;
  color: white;
  padding: .5rem 0px;
}

div#song-count {
  padding: 4px 0.5rem;
}



#songbook .playLinks{
  text-align: left;
}


ul.playLinks {
  margin: 0px;
  padding: 0px;
}



/* Create the audio play/pause toggle button before each artist name. */

.playLinks li a {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d0d0d0;
  padding: 6px 10px;
  text-decoration: none;
  border-radius: 6px;
  color: #2C68C7;
  background-color: #f7f8fa;
  text-align: left;
  margin: 4px 0;
  transition: all 0.15s ease;
}


.playLinks li a img {
  width: 150px;
  height: auto;
  display: block;
}




.playLinks li a:hover, .playLinks li a:focus {
  border-color: #3d6ac2;
  text-decoration: none;
}

.playLinks li a:focus {
  outline: none; /* Remove default focus outline */
}





/* The play button before each song */
#songbook .playButton {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  padding: 0px 5px 5px 0px;
}


#playHeader{
  width: 100%;
}


#bhh_audioPlayer {
  width: 100%;
  display: block;
/*  height: 30px; */
  margin: auto;
}


.nowPlaying {
  margin: 0px;
  padding: 10px 0px 0px 20px;
  font-size: 1.5em;
  text-shadow: 0px 5px 8px #000000;
}



  .input-with-icon {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  .input-with-icon img {
    margin-right: 10px;
  }
  
  .input-with-icon input[type="text"] {
    border: none;
    outline: none;
    font-size: 16px;
    width: 100%;
  }

/* Search area styling  */
#songbook_filter {
  width: 35%;
  background-color: #fff;
  padding: 6px 10px;
  border-radius: 30px;
  background-image: url("/images/icon_search_gray.png");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px;
  margin: 10px 20px 10px 0px;
}


#songbook_filter input {
  padding: 3px 5px;
  background-color: transparent;
  margin: 0px 10px 0px 0px;
  width: 90%;
  border: none;
  font-size: 1rem;
}


/* Remove the dark border that appears when search field is active. */
.dataTables_wrapper .dataTables_filter input[type=search]:focus {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

  /*
  
  Was working to get the height of the page to be perfect, but couldn't figure it out.
  Some clues are: The height is defined in the Datatables definition in the HTML page.
  The, we're trying to keep the scrolling area as large as possible at all screen sizes,
  while the footer text stays on the screen.

  
  
#songbook_wrapper{
  height: 100vh;
}


.dataTables_scrollBody {

    Getting the scrolling portion of the page to fill as much height as possible, leaving room for the datatables footer area.
    This is based on the site's header elements before the scrolling area being 1024px x 436px.
    Converting this height to vw:
    (436/1024) x 100 = 42.58vw

    height: calc(100vh - 42.58vw)!important;

}
*/



#songbook_wrapper a:link, #pageContent a:link, #songbook_wrapper a:visited, #pageContent a:visited {
  text-decoration: none;
  color: #2C68C7;
}

#songbook_wrapper a:hover, #pageContent a:hover{
  text-decoration: underline;
}

#songbook_wrapper a:active, #pageContent a:acvite, #songbook_wrapper a:focus, #pageConent a:focus{
  color: orange;
}

/* Datatables CSS Overrides */
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
  text-align: center;
}


/* Styles for the random song highlighter */
.highlighted {
  background-color: #f9ffc3db !important;
}

.highlighted td {
  border-top: 8px groove #3d6ac2 !important;
  border-bottom: 8px ridge #3d6ac2 !important;
}




/* Adding images to the main song listing */
.song-image {
	border: none;
	width: 12rem;
	display: block;
	margin: 4px auto;
	height: auto;
	padding: 0px;
}


/* Music sheet links - touch-friendly boxes for tablet use */
ul.sheetLinks {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.sheetLinks li {
  padding: 0;
}

#songbook_wrapper ul.sheetLinks li a,
#songbook_wrapper ul.sheetLinks li a:link,
#songbook_wrapper ul.sheetLinks li a:visited {
  display: block;
  background-color: #e1e8f7;
  color: #2C68C7;
  border: 1px solid #2C68C7;
  border-radius: 6px;
  padding: .8rem 0px;
  text-decoration: none;
  text-align: center;
  margin: 4px 0;
  box-shadow: 0px 2px 5px #4875be6b;
}
















#songbook_wrapper ul.sheetLinks li a:hover,
#songbook_wrapper ul.sheetLinks li a:focus {
  border-color: #3d6ac2;
  text-decoration: none;
}


/* Audio play links - specificity overrides */
#songbook_wrapper ul.playLinks li a,
#songbook_wrapper ul.playLinks li a:link,
#songbook_wrapper ul.playLinks li a:visited {
  color: #2C68C7;
  text-decoration: none;
}

#songbook_wrapper ul.playLinks li a:hover,
#songbook_wrapper ul.playLinks li a:focus {
  border-color: #3d6ac2;
  text-decoration: none;
}



















/* ============================================================
   ALBUM COVER VIEW STYLES
   For /songbook/covers/index.php
   ============================================================ */

/* Fixed header layout - only song area scrolls */
body.covers-page {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

body.covers-page #contentWrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

body.covers-page .pageBanner {
  flex-shrink: 0;
}

body.covers-page #topStrip {
  flex-shrink: 0;
}

#stickyHeader {
  flex-shrink: 0;
}

#alphaMenu {
  background-color: #333;
  padding: 6px 4px;
  display: flex;
  justify-content: center;
  gap: 0;
}

#alphaMenu a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  text-decoration: none;
  padding: 16px 0;
  font-size: 1rem;
  font-weight: bold;
  border: 1px solid #555;
  margin: 0;
  border-radius: 0;
  transition: background-color 0.15s ease;
  text-align: center;
}

#alphaMenu a:hover {
  background-color: #f1f3f4;
  color: #000;
}

#searchWrap {
  padding: 12px 16px;
  background-color: #f4f4f4;
  box-shadow: 0px 0px 24px #9facc5;
}

#searchContainer {
  position: relative;
}

#searchInput {
  width: 100%;
  padding: 10px 40px 10px 40px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 30px;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  outline: none;
}

#searchInput:focus {
  border-color: #3d6ac2;
}

#clearSearch {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: #ccc;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

#clearSearch:hover {
  background: #999;
}

/* Letter section headers */
.letter-heading {
  font-family: "Cookie", cursive;
  font-size: 2.5rem;
  color: #333;
  padding: 10px 16px 0 16px;
  margin: 0;
  border-top: 3px solid #a7a1a1;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 10px 16px 20px 16px;
}

.art-card {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.art-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.art-card .card-title {
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  background-color: #333;
  padding: 10px 12px;
  margin: 0;
}

.art-card .cover-strip {
  display: flex;
  gap: 0;
  height: 160px;
  overflow: hidden;
}

.art-card .cover-strip img {
  flex: 1;
  object-fit: cover;
  object-position: top;
  min-width: 0;
}

.art-card .cover-strip a {
  flex: 1;
  min-width: 0;
  display: flex;
}

.art-card .cover-strip a img {
  width: 100%;
  flex: none;
}

.art-card .card-body {
  padding: 0px;
}

.art-card .card-sheets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.art-card .sheet-btn {
  background-color: #eef3fb;
  color: #2C68C7;
  border: 2px solid #b8cce8;
  border-radius: 6px;
  padding: 10px 6px;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: center;
}

.art-card .sheet-btn:hover {
  border-color: #3d6ac2;
}

/* No results message */
.no-results {
  display: none;
  text-align: center;
  padding: 40px;
  color: #999;
  font-size: 1.2rem;
  background-color: #fff;
}

/* Hidden class for search filtering */
.letter-section.hidden {
  display: none;
}

#songContent {
  background-color: #fff;
  flex: 1;
  overflow-y: auto;
}