/* ** default settings for defaul elements ********************************** */
body{
    font-family:serif;
    font-size:110%;
}
a{
    text-decoration:none;
    height:24px;
    width:auto;
    border:none;
    background:none;
    color:var(--black);
    background-color:var(--grey-light);
}
a:hover{color:var(--white);background:var(--grey);}
.marked{color:var(--marked);}
.nulllevel{display:none!important;}
.clickable{cursor:grab;}
.clickable:hover{color:var(--grey-middle);}
/* ** BEGIN OF schelm ******************************************************* */
/* ** SITE structure ******************************************************** */
#topleft,#topright,#midleft,#midright,#bottom{
    margin:2px;
    padding-left:8px;
}
#midright{
    padding:8px;
    border-radius:12px;
}
#midright .node.leaf,
#midright .links{
    padding:0.1px;
    padding-left:12px;
    padding-right:12px;
    background:var(--white);
    /*border-radius:12px;*/
}
#struct{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display:grid;
    grid-template-rows:40px calc(100% - 72px) 32px;
}
#top,#mid,#bottom,#topleft,#midleft,#midright{
    display:inline-grid;
    overflow:auto;
}
#midleft,#topright{
    display:inline-block;
}
#top{
    grid-template-columns:calc(100% - 240px) 240px;
    overflow:hidden;
}
#bottom{
    grid-template-columns:calc(100% - 320px) 320px;
}
#mid{
    grid-template-columns:25% 75%;
}
#top *,#bottom *{
    display:inline-block;
}
#midleft .nodes{
    margin-left:12px;
}
/* ** LEAFSCROLL ************************************************************ */
#leafscroll{
    display:none;
}
#leaf{
    #leafscroll{
        display:block;
        position:absolute;
        height:24px;
        width:20%;
        margin-left:2px;
        #ls_left:hover{
            background:var(--base-full);
        }
        #ls_right:hover{
            background:var(--base-full);
        }
    }
    #leafscroll.bottom{
        position:relative;
        width:100%;
        padding-left:12px;
        padding-top:0px;
        padding-bottom:12px;
        background:var(--white);
    }
}
#leafpath{
    position:absolute;
    display:inline-block;
    margin-left:112px;
    font-size:smaller;
    /*background:var(--base-light);*/
    *{
        font-family:Aria,Verdana,sans-serif;
        margin-right:12px;
        color:var(--base-full);
        display:inline-block;
    }
    *:hover{
        color:var(--base-light);
        background:var(--base-full);
    }
}
/* ** DATA structure ******************************************************** */
.path.clickable,#level2 * .title.clickable{
    font-family:sans-serif;
    margin-top:4px;
    margin-right:12px;
    padding-left:2px;
    padding-right:2px;
    /*color:var(--white);*/
    background:var(--grey-lighter);
}
.path.clickable:hover,#level2 * .title.clickable:hover{
    font-family:sans-serif;
    margin-top:4px;
    margin-right:0px;
    color:var(--white);
    background:var(--button-hover);
}
.path.clickable{
    margin-right:3px;
    font-size:90%;
}
.links{
    display:inline-block;
    float:right;
}
.link{
    font-size:80%;
    font-family:serif;
    padding:2px;
    background-color:var(--grey-lightest);
}
#level2{
    overflow:auto;
}
#level2 * .title.clickable{
    font-size:110%;
}
.comment{
    display:none;
}
#leaf{
    font-size:110%;
    .preleaf{
        min-height:24px;
        background:var(--bgp);
    }
    * .comment{
        display:block;
        float:right;
        margin-right:2px;
        max-width:fit-content;
        *{
            max-width:fit-content;
        }
    }
}
#leaf * img{
    max-width:25%;
    height:auto;
}
/* ** site background ******************************************************* */
#bodybackground img{
    /*display:none;*/
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
    height:fit-content;
    width:100%;
    height:100%;
    object-fit:fill;
    overflow:hidden;
}
/* ** site specifig ********************************************************* */
#root{
    display:none;
}
#topright{
    padding:0px;
    display:block;
}
.node.tree{
    background:var(--white);
}
#tree * .node.tree:not(.blogged):nth-child(even){
    background:var(--grey-light);
}
.preblogged{
    font-family:sans-serif;
}
#tree{
    height:100%;
    overflow:auto;
}
#tree .clickable:hover{
    font-weight:normal;
    color:var(--white);
    background:var(--button-hover);
}
#tree>.nodes{
    margin-left:0px;
}
#tree .marked{
    font-weight:normal;
    color:var(--white);
    background:var(--darkly);
}
.blogged{
    margin-bottom:8px;
    padding:6px;
    background:var(--white);
    border-radius:12px;
}
.blogged img{
    max-width:52px;
    height:auto;
    margin-right:4px;
}
#flag{
    display:block;
    width:100%;
    height:34px;
}
#flag img{
    object-fit:cover;
    max-height:36px;
    width:auto;
    float:right;
}
#found:has(.clickable){
    max-height:20%;
    overflow:auto;
    background:var(--white);
    padding:8px;
    margin-bottom:4px;
    border-radius:12px;
}
.foundentry label{
    font-weight:bold;
}
.uncited{
    font-family:serif;
}
.cited{
    font-family:sans-serif;
    margin-left:12px;
}
.cited_inner{
    font-family:sans-serif;
    margin-left:24px;
}
.zitat{
    font-style:italic;
}

#history{
    max-width:96px;
}
#search{
    max-width:224px;
}
#searcher{
    max-width:142px;
}
#tools *{
    display:inline-block;
}
/*  change layout on portrait orientation                              SWITCH */
@media (max-width:860px){
    #top{
        display:block;
    }
    #topleft{
        width:100%;
    }
    #topright{
        display:none;
    }
    #mid{
        display:block;
    }
    #mid>*{
        width:100%;
    }
    #tree{
        max-height:132px;
    }
    #leaf *{
        text-align:left!important;
    }
    .node .px_button{
        display:none!important;
    }
}
/*  change text size on higher pixel-ratio                             SWITCH */
@media  
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 192dpi) {
    #midleft,
    #midright{
        font-size:150%;
    }
}
/* ** PICSHOW *************************************************************** */
.px_button{
    display:inline;
    text-align:center;
    margin-left:12px;
    width:24px;
    float:right;
    margin-right:8px;
}
#picshow{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1;
}
#px_menu{
    color:var(--base-light);
    background:var(--base-full);
    height:32px;
    width:100%;
}
#px_desk{
    display:flex;
    justify-content:center;
    align-content:center;
    width:100%;
    height:100%;
    background:var(--background-full);
}
#px_close,#px_left,#px_right{
    position:fixed;
    color:var(--base-full);
    border:none;
    height:32px;
    width:32px;
    text-align:center;
    opacity:0.4;
}
#px_close{
    top:0px;
    left:0px;
}
#px_left,#px_right{
    height:64px;
    top:34px;
    left:calc(100% - 44px);
}
#px_right{
    left:12px;
}
#px_name{
    padding-top:6px;
    background:none;
    border:none;
    font-family:Arial,sans-serif;
    font-size:90%;
    text-align:center;
    overflow:hidden;
}
#px_close:hover,#px_left:hover,#px_right:hover,#px_name:hover{
    color:var(--red)!important;
    background-color:var(--white-middle)!important;
    border:1px solid var(--black);
    border-radius:12px;
    opacity:1;
}
.px_container{}
#px_container>*{
    /*width:calc(100% - 192px);*/
}
#px_desk img{
    padding:1px;
    max-width:calc(100% - 8px);
    max-height:calc(100% - 36px);
    background-color:var(--grey-lighter);
    border:2px outset var(--black);
    border-radius:8px;
}
/*      TOOLTIPs    */
.tooltip {
    z-index:9999;
    position:fixed;
    display:block;
    font-family:Arial, sans-serif;
    margin-top:12px;
    margin-left:12px;
    padding:6px;
    color:var(--white);
    background-color:var(--base-full);
    animation-name:tooltip_hint_delay;
    animation-duration:1.5s;
    border-radius:8px;
}
.tooltip:hover{
  visibility: visible;
}
.icon img{
    width:auto!important;
    height:24px!important;
}
@keyframes tooltip_hint_delay{
    0%   {
        opacity:0;
/*        color:var(--none);
        background-color:var(--none);*/
    }
    100% {
        opacity:1;
/*        color:var(--white);
        background-color:var(--tooltip);*/
    }
}