@font-face
{
  font-family: 'Fertigo Pro';
  src: url("/fonts/Fertigo_PRO.otf");
  src: local('Fertigo Pro'), url("/fonts/Fertigo_PRO.otf") format("opentype");
}

/**
 * Historically we've used a single table to list all the songs, with separate
 * <thead> and <tbody> tags for each category. This kept the column widths
 * consistend for the entire table, but had the undesirable effect of repeating
 * the first <thead> (the only legal one, per the HTML spec) on each page when
 * printing.
 *
 * The printing problem is motivation enough to use separate tables, but we'll
 * need to adjust the layout a bit to keep the columns aligned.
 *
 * Since only the Song Name and Artist Name are variable-width, making the whole
 * table full-width + right-aligning the artist name will hide any column-width
 * discrepancies in the space between them. Example:
 *
 * CATEGORY A
 * Song Name                                       Artist Name  Length
 * This is a really long song name                         Sia   02:24
 * This one is short                But by a long-named artist   03:48
 *
 *                                 ^ Invisible colum split here
 *
 * CATEGORY B (NEW TABLE)
 * Song Name                                       Artist Name  Length
 * This cagegory                                         Short   04:56
 * Has All Short                                       Artists   07:89
 * Song Names                                              Too   10:11
 *
 *                                                ^ Invisible split here
 */

/* Make tables fit their container... */
table.song-list {
  width: 100%;
}
/* Make all cells fit their contents, by default... */
table.song-list td, table.song-list th {
  width: 1px;
  white-space: nowrap;
}
/* And give the greedy gusses the extra space.
/* Could have used first-child instead, but we'll make it explicit with
 * a `greedy` class on the Song Name cells
 * */
table.song-list td.greedy, table.song-list th.greedy {
  width: 100%;
}

/* Use right-alignment to mask column-width discrepancies between tables */
table.song-list td.right, table.song-list th.right {
  text-align: right;
}



.song-category {
  background-color: #9bd33b !important;
  color: white;
}

.song-category h3 {
  font-family: 'Fertigo Pro';
  margin-bottom: 0;
}

.logo {
  font-family: 'Fertigo Pro';
  font-size: 1.2rem;
}

.note-box {
  font-size: 19px;
  margin: 15px 0;
  padding: 10px;
}


@media (max-width: 480px) {
  .logo-wrapper {
    display: block !important;
  }
}

.theme-icon {
  font-family: 'Fertigo Pro';
  text-align: center;
}

.theme-icon a {
  color: black;
}

.theme-title {
  font-family: 'Fertigo Pro';
}

th {
  text-align: left;
}

@media print {
  .song-category {
    display: table-header-group;
  }
}

@media (max-width: 599px) {
  .wide {
    display: none;
  }
  .song_player {
    width: 50px !important;
  }
}

@media (min-width: 600px) {
  .narrow {
    display: none;
  }
  .song_player {
    width: 50px !important;
  }
}

@media (min-width: 800px) {
  .song_player {
    width: 200px !important;
  }
}

.top-bar, .top-bar ul {
  background-color: black;
  color: white;
}