/*** PHONES **********************************/
@media only screen and (max-width: 800px) {

html {
}

body {
    background-color: #333;
}

#page-wrapper {
    background-color: #E0C9A6;
    display: flex;
    /* Direction of the items, can be row or column */
    flex-direction: column;
}

#header {
  padding: 1px;
  border-radius: 10px 10px 0px 0px;
  position: relative;
  left: 0;
  top: 0;
  background-color: #006400;
  color: #FFF;
  text-align: center;
}

#header a {
    color: #FFF;
}

#header a:hover {
    color: #e2e20c;
}

#header h1 {
    margin: 3px;
}



main {
    flex: 1;
}

#listing h3 {
    text-align: center;
}

#listing li {
  padding: 0px 10px 5px 10px;
  display: block;

}

#listing ul li div.linewrapper div a s.volPage {
    text-decoration: none;
    font-size: 0.6em;
    color: #006400;
}

#listing ul li div.linewrapper div a s.voldata {
    text-decoration: none;
    font-size: 0.8em;
    color: #222;
}

#song_link {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  width: fit-content;
  white-space: nowrap;
}

.linewrapper {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.middle {
  border-bottom: 1px dotted #000;
  flex-grow: 1;
  margin: 0 5px;
}
.ingredients {
  color: #bbb;
  margin-bottom: 1em;
}




.tag-title {
    padding: 10px 0px 0px 0px;
    font-size: 1.8em;
    text-align: center;
}

ul {
    padding: 0px 5px 0px 5px;
    font-size: 1.4em;
    list-style-type: none;
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

s {
    text-decoration: none;
    font-size: 0.5em;
    color: #006400;
}


} /* end PHONES media */

a {
    color: #222;
    text-decoration: none;
}

a:hover {
    color: #e33c22;
}

#type_header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
  background-color: #ddd;
  align-items: center;
  justify-content: center;
}

#list_header {
  display: flex;
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
  background-color: #ddd;
  font-weight: bold;

}

#typebutton {
  color: #333;
  padding: 0em 1em 0em 1em;
  text-align: center;

}

#typebutton h4 {
    font-size: 1em;
    margin: 3px;
    font-weight: bold;
}

#typebutton p {
    font-size: 0.8em;
    margin: 0px;
    font-weight: normal;
}

#volbutton {
  flex: 1;
  text-align: center;
  border: none;
  border-radius: 10px;
}

#volbutton a {
  color: #333;
}

#volbutton a:hover {
  color: #e33c22;
}

#volbutton h4 {
    font-size: 1em;
    margin: 0px;
    font-weight: bold;
}

#volbutton p {
    font-size: 0.8em;
    margin: 0px;
    font-weight: normal;
}






.ancillary {
    padding: 10px 5px 0px 0px;
    width: 100%;
}

#BoS {
    margin: 0px;
    padding: 0px 0px 10px 0px;
    text-align: center;
}

#BoS h3 {
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    font-size: 0.8em;

}

#page {
    padding: 0px 5px 0px 0px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

#song_wrapper {
    padding: 0px 10px 0px 10px;
}

#song_notes{
    padding: 15px 10px 0px 10px;
    text-align: justify;
    text-justify: inter-word;
}

#Bardic_Circle_notes{
    padding: 15px 10px 0px 10px;
    text-align: left;
    color: #336600;
}

#Bardic_Circle_notes iframe{
    padding: 0px;
    display: block;
    margin: 0 auto;
}

#Chord_Form_notes {
    padding: 15px 20px 0px 10px;
    font-size: 1.5em;
    font-family: monospace;
    text-align: right;
}

#Video {
    padding: 15px 20px 0px 10px;
    text-align: center;

}

#Album {
    padding: 10px 20px 0px 10px;
    text-align: center;

}

#tags {
    text-align: center;

}

#tags ul {
    padding: 0 5px 0 5px;
    font-size: 1.2em;
    list-style-type: none;
}

#tags li {
    padding: 0px 5px 0px 5px;
      display: inline;
}

#tags a {
    color: green;

}

#tags a:hover {
    color: purple;

}
.center {
    padding: 20px 0 20px 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#song_text{
    font-size: 1.3em;
    padding: 10px 0 10px 0;

}



#lulu_image {
    float:right;

}

#lulu_text {
    width:60%;

}

#toggle {
  width: 120px;
  font-size: 0.7em;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #04AA6D;
  border: none;
  border-radius: 15px;
}

#toggle p {
     padding: 5px;

}

#toggle a {
    color: #FFF;
}

#toggle:hover {
    background-color: #3e8e41;
}

.chord {

    color: green;
}

.about_links {
    color: blue;
}



#abc_block {
    color: #323232;
}

#abc_block pre {
    padding: 20px;
    font-size: 0.8em;
}


#print-button{
    width: 100px;
}

.printbtn {
  padding: 5px 10px 5px 10px;
  font-size: 0.7em;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
    background-color: #3e8e41;
  border: none;
  border-radius: 15px;

}



#footer {
    display: flex;
    padding: 0px 10px 0px 10px;
    border-radius: 0px 0px 10px 10px;
    background-color: #666;
    color: black;
}

#footer a {
    color: white;
    font-weight: bold;
}

#footer a:hover {
    color: #e2e20c;
}

#housekeeping {
    width: 80%;
    float:left;
    text-align: left;
    color: #E0C9A6;
}



/*** DESKTOP *********************************/
@media only screen and (min-width: 800px) {

html {
}

body {
    background-color: #333;
}

#page-wrapper {
    background-color: #E0C9A6;
    display: flex;
    /* Direction of the items, can be row or column */
    flex-direction: column;
}

#header {
  padding: 5px;
  border-radius: 10px 10px 0px 0px;
  position: relative;
  left: 0;
  top: 0;
  background-color: #006400;
  color: #FFF;
  text-align: center;

}

#header a {
    color: #FFF;
}

#header a:hover {
    color: #e2e20c;
}

#header h1 {
    margin: 5px;
}

#listing li {
  display: block;
  padding: 0px 10px 3px 5px;

}

#song_link {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  width: fit-content;
  white-space: nowrap;
}

.linewrapper {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}
.middle {
  border-bottom: 1px dotted #000;
  flex-grow: 1;
  margin: 0 5px;
}
.ingredients {
  color: #bbb;
  margin-bottom: 1em;
}

#listing h3 {
    text-align: center;
}

#listing ul li div.linewrapper div a s.volPage {
    text-decoration: none;
    font-size: 0.6em;
    color: #006400;
}

#listing ul li div.linewrapper div a s.voldata {
    text-decoration: none;
    font-size: 0.8em;

}


#tag-listing ul li {
    text-align: center;
}

.tag-title {
    padding: 10px 0px 0px 0px;
    font-size: 1.8em;
    text-align: center;
}


.ancillary {
    padding: 10px 5px 0px 0px;

    width: 300px;
    float: right;
}



#song_header{
  position: relative;
}

#song_wrapper {
    padding: 0px 10px 0px 10px;
}

.center {
    padding: 20px 0 20px 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

ul {
    padding: 0 5px 0 5px;
    font-size: 1.2em;
    list-style-type: none;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-width: 300px;
    -moz-column-width: 300px;
    column-width: 300px;
}

#single_entry{
padding: 0px 5px 0px 10px;
width: 100%;
}

#song_notes{
    padding: 15px 20px 0px 0px;
    text-align: justify;
    text-justify: inter-word;
}

#Bardic_Circle_notes{
    padding: 15px 10px 0px 0px;
    text-align: center;
}

#Chord_Form_notes {
    padding: 15px 30px 0px 0px;
    font-size: 1.5em;
    font-family: monospace;
    text-align: right;
}

#song_text{
    font-size: 1.3em;
    padding: 10px 0 10px 0;

}

#tags {
    text-align: center;

}




.hide_on_mobile {
    display:inline;
}


#abc_wrapper{
    width: 768px;
}

#footer {
      border-radius: 0px 0px 10px 10px;
}




} /*end desktop media */