@charset "UTF-8";
html {
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: "Nunito Sans", sans-serif;
  margin-bottom: 100px !important;
}

p,
li {
  font-size: 11pt;
}

h1, h2,
h3,
nav {
  color: #52783E !important;
}

h2 {
  font-weight: bold !important;
  font-size: 16pt !important;
}

h3 {
  font-size: 12pt !important;
}

.songpagelayout h2, .songpagelayout h3 {
  color: black !important;
}

/* Formatting */
.marg-text {
  width: 80vw;
  max-width: 1000px;
  margin: auto;
}

a {
  color: #4D6F3A !important;
  text-decoration: none !important;
}

footer {
  width: 100%;
  position: fixed;
  height: 50px;
  margin-top: 20px;
  padding-top: 10px;
  bottom: 0;
  background-color: white;
  font-size: 0.8em;
}

footer p {
  text-align: center !important;
}

/* Header */
.siteHeader {
  border-bottom: 0px;
  padding: 1rem 0;
}

.siteHeader-title {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 500;
  font-variant: small-caps;
  background-color: hsla(0, 0%, 100%, 0.82);
  display: inline-block;
  padding: 6px 10px 20px;
  transform: translate(-17px);
  font-size: 22pt !important;
}

.headerbackground {
  height: 160px;
  background-image: url("/assets/images/aasr_header.jpg");
  background-blend-mode: multiply;
  background-size: auto 170px;
  background-repeat: repeat-x;
  overflow: visible;
  margin-bottom: -70px;
  /* -webkit-mask-image: linear-gradient(180deg,#000 60%,transparent); */
  background-color: rgba(82, 120, 62, 0.05);
}

/*
.bottomfade {background-color:red;height:20%;width:100%;bottom:0}*/
.current,
.active {
  text-decoration: underline !important;
}

.siteNav {
  margin-bottom: 30px;
}

.siteNav-social {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  color: #cab0db;
  text-decoration: none;
}

.siteNav-social > li {
  display: inline-block;
  margin: 0 0.5rem;
}

/* Header and navigation*/
.insert-left {
  float: left;
  width: 30%;
  padding: 20px 40px 20px 0px;
}

.insert-right {
  float: right;
  width: 30%;
  padding: 20px 0px 20px 40px;
}

.banner {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 20px;
}

/* Interlude */
.interlude {
  height: 35px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin: 20px 0px 30px;
}

.interlude div img {
  height: 35px;
}

/* Tables */
table {
  width: 100%;
  font-size: 11pt;
}

th {
  background-color: #fff;
}

.songtable {
  border-collapse: collapse;
}

.songtable tr td:first-of-type {
  font-weight: 600;
  width: 35%;
}

.songtable tr {
  border-bottom: 1px solid lightgray;
}

.songtable tr td:nth-of-type(2) {
  text-align: right;
}

.songtable tr td {
  padding: 2px 5px;
  vertical-align: top;
}

.tdheader {
  padding-top: 40px !important;
}

.songpagelayout {
  display: flex;
  align-content: stretch;
  gap: 30px;
}

#leftcol {
  width: 30%;
}

.songpagelayout div:nth-of-type(2) {
  width: 68%;
}

/* Tables Sort */
.sr-only {
  position: absolute;
  top: -30em;
}

table.sortable td,
table.sortable th {
  padding: 0.125em 0.25em;
  width: 8em;
}

table.sortable th {
  font-weight: bold;
  border-bottom: thin solid #888;
  position: relative;
}

table.sortable th.no-sort {
  padding-top: 0.35em;
}

table.sortable th:nth-child(5) {
  width: 10em;
}

table.sortable th button {
  padding: 4px;
  margin: 1px;
  font-size: 100%;
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
}

table.sortable th button span {
  position: absolute;
  right: 4px;
}

table.sortable th[aria-sort=descending] span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.sortable th[aria-sort=ascending] span::after {
  content: "▲";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.show-unsorted-icon th:not([aria-sort]) button span::after {
  content: "♢";
  color: currentcolor;
  font-size: 100%;
  position: relative;
  top: -3px;
  left: -4px;
}

table.sortable td.num {
  text-align: right;
}

/* Focus and hover styling */
table.sortable th button:focus,
table.sortable th button:hover {
  padding: 2px;
  border: 2px solid currentcolor;
  background-color: #e5f4ff;
}

table.sortable th button:focus span,
table.sortable th button:hover span {
  right: 2px;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

.newspost {
  margin-bottom: 40px;
}

/* Table conditional formatting */
.bg-easy {
  background-color: green;
}

/* Song pages */
.notes {
  font-size: 0.9em;
  line-height: 1.4em;
  color: gray;
  padding-bottom: 8px;
}

.tip {
  color: #4D6F3A !important;
  text-decoration: underline;
}

.noto-music-regular {
  font-family: "Noto Music", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.note {
  height: 20px;
}

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

blockquote {
  font-size: 15pt !important;
  color: darkolivegreen;
  font-weight: 700;
  padding-left: 15px;
}

.linkspace {
  padding-top: 14px;
}

/*# sourceMappingURL=styles.css.map */