/* @import url('https://fonts.googleapis.com/css?family=Lato|Ubuntu&subset=latin-ext'); */
/* @import url('https://fonts.googleapis.com/css?family=Noto+Serif&display=swap&subset=latin-ext'); */

/* Special characters:
   ⮌ back
   ⤢ maximize
   ⇉⇊ horizontal/vertical
   ☰ menu
   ☷ song table
   ▼ sort on
   ⫧ filter
*/





/*   STYLE   ****************************** */

html, body {
    background: white;
}

html {
    scroll-behavior: smooth;
    font-size:      11px;
    font-family:    serif;  /* "Noto Serif", serif; */
}
@media screen and (min-width: 601px) {
  html { font-size:  14px; }
}
@media screen and (min-width: 901px) {
  html { font-size:  17px; }
}
@media screen and (min-width: 1201px) {
  html { font-size:  20px; }
}

body {
    --nav-height:   2.5rem;
    --meta-width:   15rem;
    --field-color:  #d60;
    --value-color:  #500;
}

A.list::after,
span.list::after {
    content:        ', ';
}
A.list:last-of-type::after,
span.list:last-of-type::after {
    content:        '';
}

.invisible {
    transition:     opacity 1s;
    opacity:        0;
}

.spaceSeparator {
    margin-right:   1ex;
}

a {
    color:          var(--value-color);
    text-decoration:none;
    position:       relative;
    cursor:         pointer;
}
a:hover,
a:focus {
    text-decoration:underline;
}

#total_failure,
#loading {
    font-size:      20pt;
    padding:        0.3em 1em;
    margin:         1ex;
    background:     rgba(255,0,0,0.5);
    box-shadow:     -1px 1px 10px 2px black;
}
#total_failure {
    position:       absolute;
    top:            45%;
    left:           5ex;
    z-index:        10;
}


/* MAIN song list */

#songs {
    position:       relative; /* needed for total_failure */
    z-index:        1;
}

#songs table{
    background:     #fff;
    padding:        0;
    border-spacing: 0;
    width:          100%;
}
#songs tr {
    margin:         1rem auto;
    background:     #eee;
    outline:        solid 0.4rem rgba(0,255,255,0);
    transition:     background 0.5s, outline 1.4s;
}
#songs tr:nth-child(odd) {
    background:     #fff;
}
#songs tr:hover,
#songs tr:focus {
    background:     #cee;
    outline:        solid 0.2rem #bdd;
}
#songs td {
    padding:        0 1rem;
    line-height:    2.4rem;
}
#songs th {
    position: sticky;
    position: -webkit-sticky;
    height: 5ex;
    top: 0px;
    z-index: 2;

    background:     #cee;
    border-bottom: solid 1px;
    box-shadow: 0 0 3px 0;
}
#songs th span[sortOn]::before {
    content: '▲';
}
#songs #songs_menu_button {
    position:       absolute;
    left:           1ex;
    top:            0.65ex;
}
/*#songs th.title {}
#songs th.artist {}
*/
#songs th.genre {
    font-size:      80%;
}
#songs td.genre {
    font-size:      80%;
}


#songs A {
    display: inline-block;
    padding: 0 1rem;
    line-height: 2.4rem;
    margin: 0;
}


/* MAIN songlist NAV */

#songs button {
    font-size: 100%;
    background: white;
    color: black;
    border: none;
    border-radius: 0.3ex;
    line-height: 100%;
    box-shadow: 1px 1px 2px 1px black;
    width: 4ex;
    height: 4ex;
}

#songs nav {
    font-family:    sans;
    color:          #000;

    opacity: 0%;
    visibility: hidden;
    transition: 0.5s opacity, 0.5s visibility 0s;
}

#songs nav.show {
    opacity: 100%;
    visibility: visible;
}

#songs nav > section {
    background: rgba(210,240,240,0.8);
    border-radius: 1ex;
    box-shadow: 0.3ex 0.3ex 1.2ex 0ex black;
    padding: 1ex 2ex;
    margin: 1ex 2ex;
    min-width: 16em;
}

#songs nav A {
    color:          inherit;
}
#songs nav A.home {
    background:     #cee;
}
#songs nav A {
    text-align:     center;
    font-weight:    bold;
    color:          inherit;
}
#songs nav A:hover,
#songs nav A:focus {
    background: #ddd;
}
#songs nav A:hover span,
#songs nav A:focus span {
    position:       relative;
    top:            1px;
    left:           1px;
}




/* #Song */

#song {
    background: white;

    opacity: 0%;
    visibility: hidden;
    transition: 0.5s opacity, 0.5s visibility 0s;
}
#song.show {
    opacity: 100%;
    visibility: visible;
    transition: 0.5s opacity, 0s visibility 0.5s;
}

/* Song aside */

#song aside nav A {
    display:        inline-block;
    line-height:    var(--nav-height);
    width:          var(--nav-height);
    height:         var(--nav-height);
    padding:        0;
    margin:         0;
    text-align:     center;
    font-weight:    bold;
    color:          inherit;
    text-decoration: none;
    position:       relative;
    cursor:         pointer;
}
#song aside nav A:hover,
#song aside nav A:focus {
    text-decoration: underline;
    background:     #ddd;
}

#song aside nav A:hover span,
#song aside nav A:hover focus {
    position:       relative;
    top:            1px;
    left:           1px;
}
#song aside nav A.home {
    background:     #cee;
}
#song aside nav A.layout span::before {
    content:        '⇊';
}
main.vertical #song aside nav A.layout span::before {
    content:        '⇉';
}
#song aside section {
    color:          var(--field-color);
    background:     #ddd;
    padding:        0.01rem 0.5rem;
    box-shadow:     -2px 1px 17px -8px inset black;
    word-break: break-all;
    margin-bottom:  0.3ex;
}
#song aside section span {
    color:          var(--value-color);
}
#song aside section h2 {
    color:          var(--value-color);
    font-size:      105%;
    font-weight:    bold;
}
song aside section .playlist_prev_next A {
    display: inline-block;
    word-break: break-word;
}
#song aside section p.comment
 {
    font-size: 85%;
    color: black;
    word-break: break-word;
}

#songs_menu_bg_hide {
    background: rgba(0,0,0,0.1);
    box-shadow: 0 0 3ex 3ex rgba(0,0,0,0.1);
}

/* SONG - mostly styled in songparser/song.css */

song {
    font-size:  13px;
}
@media screen and (min-width: 601px) {
  song { font-size:  15px; }
}
@media screen and (min-width: 801px) {
  song { font-size:  18px; }
}
@media screen and (min-width: 1101px) {
  song { font-size:  20px; }
}






/*   LAYOUT   ****************************** */


html, body, main {
    margin:         0;
    padding:        0;
    height:         100%;
    min-width:      100%;
}

body {
    overflow: hidden;
}

#total_failure.done,
#loading.done {
    display:        None;
}


/* MAIN songlist */

#songs {
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow:       auto;
}

#songs table {
    border: none;
    margin: 0;
}


/* MAIN songlist NAV */

#songs nav {
    position:       absolute;  /* absolute to #songs which is used for scrolling table! so not good */
    position:       fixed;
    top:            7ex;
    left:           0;
    bottom:         0;
    right:          0;
    z-index:        4;
}

#songs_menu_bg_hide {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: 0;
}

#songs nav > section {
    display: table;
    z-index: 1;
    position: relative;
}


#songs nav A {
    display:        inline-block;
    position:       relative;
    margin:         0;
}




/* #song */

#song {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 5;
    overflow: auto;
}


/* #song aside */

#song aside {
    position:       absolute;
    top:            0;
    left:           0;
    bottom:         0;
    overflow-x:     hidden;
    overflow-y:     auto;
    width:          var(--meta-width);
    box-sizing:     border-box;
}


/* actual song setup - mostly controlled through song.css */

#song article {
    position:       absolute;
    top:            0;
    height:         100%;

    margin-left:    var(--meta-width);
}

song {
    font-size:  13px;
}
@media screen and (min-width: 601px) {
  song { font-size:  16px; }
}
@media screen and (min-width: 801px) {
  song { font-size:  18px; }
}
@media screen and (min-width: 1101px) {
  song { font-size:  20px; }
}
song {
    display:        inline-flex;
    flex-wrap:      wrap;
    flex-direction: column;
    align-items:    stretch;
    height:         99%;
}
.vertical song {
    flex-wrap: nowrap;
}