@import "/fonts/crimson.css";
@import "/fonts/lato.css";
@import "/fonts/inconsolata.css";
@import "/fonts/mabrymonopro.css";

@import "/css/buttons.css";

    

body, html {
    margin: 0;
    padding: 0px;
    
    font-family: 'Mabry Mono Pro';
    font-style: normal;
    font-weight: 500;

    background-color: white;
}
body{
    position: relative;
}
body strong{
    font-weight: bold;
}
h1,h2,h3,h4{
    font-family: 'Mabry Mono Pro';
    font-style: normal;
    font-weight: 500;
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding:0;
}

h1 strong,h2 strong,h3 strong,h4 strong{
}

h4{
    font-size: 17px;
}
h3{
    font-size: 20px;
}
h2{
    font-size: 24px;
}
h1{
    font-size: 28px;
}

div#debug{
    z-index: 1000;
    position: absolute;
    background-color: white;
    font-family: monospace;
    white-space: pre;
}
div.bgholder{
    height: 100%;
    width: 100%;
    background: url("/bilder/core/lsc/covar.webp") no-repeat left top; 
    position: fixed;
    z-index: 100;
}



div.postizettel{
    margin-top: 90px;
    margin-left: 72px;
    /* background: white;  */
    z-index: 110;
    /* box-shadow: 0.4em 0.4em 1em -0.2em rgb(152 152 152 / 63%); */
}
div.postizettel img {
    height: 670px;
    margin-top: 41px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}

div ul.ul_boxly_supporter li:first-child img{
	margin-top: 30px;
}
div ul.ul_boxly_supporter li img{
	max-width: 160px;
	max-height: 60px;
	margin-bottom: 32px;
}

div.cyder{
    background: url(/bilder/core/course.gif);
    background-color: white;
    z-index: 103;
    position: fixed;
    height: calc(100% - 28px);
    margin-top: 28px;
    width: 41px;
    background-repeat-x: no-repeat;
    background-repeat-y: repeat;
    background-repeat: repeat-y; 
    background-size: 12px;
    background-position-x: center;
    background-position-y: 6px;
    display: none;
}



div.franzle{
    background: url("/bilder/core/franzle.gif"); 
    position: fixed;
    z-index: 101;
    height: 100%;
    width: 100%;
    background-position: calc(100% + 55px) 0;
    background-size: 170px;
    background-repeat-x: no-repeat;
    background-repeat-y: repeat;
    background-repeat: repeat-y; 
    display: none;
}
div.holder_boxly{
    position: relative;
    height: 100%;
    width: 100%;
}

div.boxly {
    z-index: 500;
    position: relative;
    background-color: white;
    width: 470px;
    display: inline-block;
    /* right: 130px; */
    /* top: 0px; */
    box-shadow: 0.4em 0.4em 1em -0.2em rgb(152 152 152 / 63%);
}
span.madeby{
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 200;
    font-size: 12px;
    display: inline-block;
    margin-top: 100px;
}

div.boxly {
    padding-top: 16px;
    padding-bottom: 10px;
}
div.boxly > *{
    padding-left: 16px;
}

/* UL debacle */
ul.ul_boxly{
    margin: 0px;
}
ul.ul_boxly,
ul.ul_boxly ul{
    list-style-type: none;
}
ul.ul_boxly ul{
    margin-left: 0px;
    padding-left: 0px;
}
ul.ul_boxly li ul li {
    font-family: 'Mabry Mono Pro';
    font-style: normal;
    font-weight: 500;
}
ul.ul_boxly > li:first-child {
    padding-top: 19px;
}
ul.ul_boxly > li {
/*     padding-left: 19px; */
    padding-bottom: 19px;
    font-family: 'Mabry Mono Pro';
    font-style: normal;
    font-weight: 500;
    padding-top: 20px;
}
ul.ul_boxly li ul li {
    
}
ul.ul_boxly > li:before {
    content: "/";
    
    font-family: 'Inconsolata';
    font-style: normal;
    font-weight: 600;

    letter-spacing: 2px;
}
ul.ul_boxly li ul li {
    overflow: visible;
    position: relative;
}
ul.ul_boxly li ul li:not(.nopoints):before {
    content: "..............";

    font-family: 'Mabry Mono Pro';
    font-style: normal;
    font-weight: 500;

    left: 0;
    position: absolute;
}


ul.ul_boxly li ul.ul_boxly_tourtarget li{
    padding-bottom: 5px;
}
ul.ul_boxly li ul.ul_boxly_tourtarget li:last-child{
    padding-top: 15px;
}


ul.ul_boxly ul.ul_boxly_tourtarget span.tour_date{
/*
    font-style: normal;
    font-weight: 600;
*/
}

ul.ul_boxly li ul li.cancelled:before,
ul.ul_boxly ul.ul_boxly_tourtarget span.cancelled,
ul.ul_boxly ul.ul_boxly_tourtarget span.cancelled a{
    color:#d24e00;
}
ul.ul_boxly ul li,
ul.ul_boxly ul.ul_boxly_tourtarget li a{
    color:#1e5469;
}
ul.ul_boxly ul.ul_boxly_tourtarget li a{
    font-family: 'Mabry Mono Pro';
/*
    font-style: normal;
    font-weight: 600;
*/
}

ul.ul_boxly ul.ul_boxly_tourtarget span.tour_songkick,
ul.ul_boxly ul.ul_boxly_tourtarget span.tour_songkick a{
    color:#9eb8c2;
}

ul.ul_boxly ul.ul_boxly_media a,
ul.ul_boxly ul.ul_boxly_music a,
ul.ul_boxly ul.ul_boxly_store a,
ul.ul_boxly ul.ul_boxly_contact a,
ul.ul_boxly ul.ul_boxly_press a,
ul.ul_boxly ul.ul_boxly_links a{
    color:#1e5469;
}
 

span.tour_place {
    /* display: inline-block; */
}
img.bysongkick {
    width: 100px;
    opacity: 0.7;
}
img.spott_img {
    width: 85px;
    padding-right: 3px;
    padding-bottom: 3px;
}
#ul_boxly_albumtarget a:first-child img.spott_img {
    width: calc(2* 85px + 3px);
    width: calc(3* 85px + 6px);
}
#ul_boxly_albumtarget{
    padding-top: 10px;
    width: 270px;
    display: inline-block;    
}
div.boxly img.mnlogo{
    margin-bottom: 20px;
/*     width: 160px; */
}

/* a {word-break: break-all;} */


/*  > 925px: From here we can do two columns 
    Boxly is right-oriented
    
*/
@media only screen and (min-width: 1201px) {
    div.bgholder{
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}
@media only screen and (max-width: 1200px) {
    div.bgholder{
        background-size: 1400px;
    }
}

@media only screen and (min-width: 1051px) {
    div.postizettel{
        position: fixed;
    }
    div.boxly{
        margin-top: 220px;
        margin-left: calc(100vw - 470px - 255px);
    }
    ul.ul_boxly li ul li{
        padding-left: 72px;
    }
    ul.ul_boxly li ul li,
    ul.ul_boxly li ul li span{
        font-size: 12px;
    }
    ul.ul_boxly li ul li:not(.nopoints):before{
        letter-spacing: -3.5px;
        line-height: 13px;
        font-size: 14px;
    }
}

/*  > 663px, < 925px: 
    From left alignment to "begins zettel conflict"
*/
@media only screen and (max-width: 1050px) {
    div.postizettel{
        position: absolute;
        position: fixed;
    }
    div.boxly{
        margin-top: 470px;
        margin-left: 73px;
    }
    ul.ul_boxly li ul li{
        padding-left: 72px;
    }
    ul.ul_boxly li ul li,
    ul.ul_boxly li ul li span{
        font-size: 12px;
    }
    ul.ul_boxly li ul li:not(.nopoints):before{
        letter-spacing: -3.5px;
        line-height: 13px;
        font-size: 14px;
    }
    div.boxly img.mnlogo{
        width: 160px;
    }

}
@media only screen and (max-width: 666px) {
    div.franzle{
        display: none;
    }
    ,div.postizettel{
        /* display: none; */
    }
}