/*html {height:100vh;}*/

#page-content {
    padding-left:0;
    padding-right:0;
}

.row
{
    margin-right:0;
    margin-left:0;
}

.char_icon {
    font-size:0.75em;
}
div.section {
    margin-top:1.5em;
    margin-bottom:1.5em;

    border-top:1px solid;
    padding-left:0.5em;
    padding-right:0.5em;

}

#location_list{
    padding-top:2rem;
}

#song_list {
    padding-top:2rem;
}
div #media, div #map
{
    border:0px;
}

h1 {
    margin-left:0;
    padding-left:0;
    /*padding-right:1em;*/
}

h2 {
    text-align:center;
}

li::before {
    vertical-align: top;
}

/*header {
    background-color:#007bff;
    color:white;
}*/


/* all to make a comma-list. Apply to ul */
.comma-list {
    display: inline;
    list-style: none;
    padding: 0px;
}

.comma-list li {
    display: inline;

}

.comma-list li::after {
    content: ", ";
}

.comma-list li:last-child::after {
    content: "";
}
/* https://stackoverflow.com/a/1517228/7532 */


.map_mainpage {
    height:600px;
}


div.audioplayerwrapper {
    margin-top:0.5em;
    border-radius: 15px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom: 5px;
    border: 2px solid;
    overflow:auto;
}

#album_cover img {
    border-radius: 15px;

}
div.flowingcolumnlist_narrow {
    column-count: 1;

    column-rule-style: solid;
    column-rule-width: 1px;
}

div.flowingcolumnlist_narrow ul {
    break-inside:avoid;
}
div.flowingcolumnlist_wide {
    column-count: 1;

    column-rule-style: solid;
    column-rule-width: 1px;
}
div.flowingcolumnlist_wide ul {
    break-inside:avoid;
}

div.flowingcolumnlist_extrawide {
    column-count: 1;

    column-rule-style: solid;
    column-rule-width: 1px;
}
div.flowingcolumnlist_extrawide ul {
    break-inside:avoid;
}

@media only screen and (min-width: 768px) {
    div.flowingcolumnlist_narrow {
        column-count: 2;
        column-gap: 40px;
        column-width: 100px;
    }
    div.flowingcolumnlist_wide {
        column-count: 1;
        column-gap: 40px;
        column-width: 2000px;
    }
}

@media only screen and (min-width: 992px) {
    h1{
        padding-left:1em;
        font-size:38px;
    }
    div.flowingcolumnlist_narrow {
        column-count: 3;
        column-gap: 40px;
        column-width: 100px;
    }
    div.flowingcolumnlist_wide {
        column-count: 2;
        column-gap: 40px;
        column-width: 150px;
    }
}
@media only screen and (min-width: 1200px) {

    div.flowingcolumnlist_narrow {
        column-count: 4;
        column-gap: 40px;
        column-width: 100px;
    }
    div.flowingcolumnlist_wide {
        column-count: 3;
        column-gap: 40px;
        column-width: 133px;
    }
}
@media only screen and (min-width: 1500px) {
    div.flowingcolumnlist_narrow {
        column-count: 5;
        column-gap: 40px;
        column-width: 100px;
    }
    div.flowingcolumnlist_wide {
        column-count: 4;
        column-gap: 40px;
        column-width: 125px;
    }
        div.flowingcolumnlist_extrawide {
        column-count: 2;
        column-gap: 50px;
        column-width: 700px;
    }
}
@media only screen and (min-width: 1800px) {
    div.flowingcolumnlist_narrow {
        column-count: 6;
        column-gap: 40px;
        column-width: 100px;
    }
    div.flowingcolumnlist_wide {
        column-count: 5;
        column-gap: 40px;
        column-width: 166px;
    }
    #content,nav,footer div.row {
        max-width: 1873px;
    }
}
@media only print {
    div.flowingcolumnlist_narrow {
        column-count: 4;
        column-gap: 40px;
        column-width: 100px;
    }
    div.flowingcolumnlist_wide {
        column-count: 2;
        column-gap: 40px;
        column-width: 200px;
    }
    #show_featured-all div {
        display:none;
    }
    .showhidebutton {
        display:none;
    }
    body {
        background-color:white;
        color:black;
    }
}

.flowingcolumnlist_narrow ul  {
    list-style-type:circle;
}
.flowingcolumnlist_wide ul  {
    list-style-type:square;
}

.flowingcolumnlist_narrow ul li {
    break-inside: avoid-column;
    page-break-inside: avoid;
}
.flowingcolumnlist_narrow ul li span {
    vertical-align: top;
}
.flowingcolumnlist_wide ul li {
    break-inside: avoid-column;
    page-break-inside: avoid;
}
.flowingcolumnlist_wide ul li span {
    vertical-align: top;
}
/*https://stackoverflow.com/posts/7785711/revisions*/


#show_featured-all div {
    background-color:white;
    color:blue;
    padding:5px;
    border-radius:10px;
}

/* animated location focus */
.location_focus {
    zIndex:-1;
}

.location_focus svg circle {

    fill-opacity:0;
    opacity: 0.5;
    transform-origin: center;
    animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
    0% {
        transform: scale(2.5,2.5);
    }

    50% {
        transform: scale(1.5,1.5);
    }

    100% {
        transform: scale(2.5,2.5);
    }
}

.leaflet-popup-content-wrapper {
    font-size: larger;
    background-color:#FCF2CB;
    text-decoration:none;
}

.leaflet-popup-content-wrapper * a {
    text-decoration:none;
    color: #BF5A36;
}

/* COLOUR SCHEME */
@media only screen {
    body,.leaflet-container {
        color:black;
        background: #F2ECD8;
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, #F2ECD8 100%);
    }
    a{
        color:black;
    }
}
body,.leaflet-container {
    /*font-family: 'Open Sans', sans-serif;*/
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Roboto Slab', serif;
}
header {

    background: #5C8470;
    background: linear-gradient(180deg, #5C8470 0%, #6F9B85 100%);
    padding-top:0.25rem;
    font-family: 'Linden Hill', serif;
}
h2, h3 {
    font-family: 'Linden Hill', serif;
}

header h1 a span {
    color:#EFEAD7;
    text-decoration:none;

}

header h1 a:hover {
    color:#EFEAD7;
    text-decoration:none;

}

nav * a {
    color: black;
    background-color:#FCF2CB;
    text-decoration:none;
}
nav {
    background-color:#FCF2CB;
    border-bottom:ridge 3px #BF5A36;
}
.dropdown-item{
    color: black;
    background-color:#FCF2CB;
}

.dropdown-item:hover{
    color:#A66953;
    background-color: #FCF2CB;
}

div.audioplayerwrapper{
    border: solid 3px #BF5A36;
}
#footer {
    color:black;
    background-color:#FCF2CB;
    border-top:ridge 3px #BF5A36;
}

#footer * a {
    color:rgb(119,82,60);
}


.section * .btn {
    padding-top:0;
    padding-bottom:0;
    margin-bottom:.5rem;
    margin-left:0.25rem;
}
.showhidebutton {
    color:#F2ECD8 !important;
    background-color:rgb(119,82,60);
    border-color: #A66953;
    font-weight:bold;

}
.showhidebutton:visited {
    color:#F2ECD8;
    background-color:rgb(119,82,60);
    border-color: #A66953;
    font-weight:bold;

}
.showhidebutton:hover{
    color:rgb(119,82,60) !important;
    background-color:#F2ECD8;
    border-color: #A66953;
}

.showhidebutton:focus {
    /*box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);*/
    box-shadow: 0 0 0 .2rem #F2ECD8;
}

#page-content * .section * a {
    color:rgb(119,82,60);
    text-decoration:none;
}

#page-content * .section * a:visited {
    color:rgb(119,82,60);
    text-decoration:none;
}
#page-content * .section * a:hover {

    color:black;
    /*color:#A66953;*/
    text-decoration:none;
}

div.flowingcolumnlist_narrow, div.flowingcolumnlist_wide {
    coloumn-rule-color:rgb(119,82,60);
}