@media screen and (max-width: 800px){
    .title-screen-L { display: none;}
}


/* ================================================================================
   Top Navigation
   ================================================================================ */

#top-nav a { text-decoration: none; color: black;}

/* ----------------------------------------------------------------------
   nav-bar: used in wide screens
   ---------------------------------------------------------------------- */
#top-nav div.nav-bar { text-align: center; padding: 0.125em 0 0 0 ;}
#top-nav div.nav-bar div { display: inline-block; text-align: center; margin-top: 0.25em;}

#top-nav div.nav-bar div a.nav-cur { color: rgb(255,255,255);  background-color: rgba(  0,  0,  0, 1.0);}
#top-nav div.nav-bar div a.nav-par { color: rgb(255,255,  0);  background-color: rgba(  0,  0,  0, 0.8);}
#top-nav div.nav-bar div a.nav-oth { color: rgb(250,220,120);  background-color: rgba( 50, 50, 50, 0.7);}
#top-nav div.nav-bar div a:hover   { color: black;             background-color: rgba(250,250,250, 0.9);}


#top-nav div.nav-bar div a {
    display: inline-block;
    min-width: 7em;
    padding: 0.1em 0.3em;
    margin: 0 0.5em;
}




/* ----------------------------------------------------------------------
   nav-menu: used on small screens
   ---------------------------------------------------------------------- */

/* The drop down menu .................................................. */
#top-nav .nav-menu {
    display: none;
    left: 0;
    right: 0;
    z-index: 1;
}


@media screen and (max-width: 800px){
    #top-nav .nav-bar { display: none; }

    #top-nav .nav-menu {
	display: block;
	background-color: #F5DEB3;
	text-align: center;
	font-size: 125%;
	padding: 0.5em 0.1em;
    }

    
    /* The top line ..................................................*/
    #top-nav .nav-menu-cur { font-size: 125%; font-weight: bold; }
    #top-nav .nav-menu-button:hover .nav-menu-list { display: block; }

    
    /* the menu items */
    #top-nav .nav-menu-list {
	display: none; position: absolute; padding: 1.5em 0 0.5em 0; width: 90%; margin-top: -1em; left: 5%;
	background-color: rgba(0,0,0,0.8);
    }
    #top-nav .nav-menu-list > div { padding: 0.125em 0;}

    
    /* and their links */
    #top-nav .nav-menu div a { color: white;  background-color: transparent; display: block; padding: 0 0.5em; }
    #top-nav .nav-menu div a.nav-cur { color: white;  background-color: rgba(255,255,255,0.5);}
    #top-nav .nav-menu div a.nav-par { color: white;  background-color: rgba(242,242,242,0.5);}
    #top-nav .nav-menu div a:hover   { color: black;  background-color: rgba(230,230,230, 1.0);}

}







/* ================================================================================
   Side Navigation
   ================================================================================ */

#side-nav a { text-decoration: none; color: black;}

/* ----------------------------------------------------------------------
   nav-bar: wide screen (list style)
   ---------------------------------------------------------------------- */

#side-nav div.nav-bar { margin: 1em 0 1em 0.75em; padding: 0;}
#side-nav div.nav-bar div { display: block; text-align: left;}
#side-nav div.nav-bar div a {
    display: inline-block;
    padding: 0.15em 0 0.15em 0.5em;
    border-color: red;
    border-left: solid 0.75em;
    border-top: solid 2px;
    width: 90%;
}

#side-nav div.nav-bar div a.nav-cur { color: black;   border-color: #000000;}
#side-nav div.nav-bar div a.nav-par { color: black;   border-color: #000000;}
#side-nav div.nav-bar div a.nav-oth { color: #8B4513; border-color: #F5DEB3;}
#side-nav div.nav-bar div a:hover   { color: #B8860B; border-color: #B8860B; background-color: #FFF5EE; }



/* Content side navigation (used for anchor jumps only -> fixed positin */
#side-nav .nav-index { background-color: #f8f8f8; }
#side-nav .nav-index div.nav-bar div a { border: none;}
#side-nav .nav-index div.content-lev-0 { font-weight: bold;}
#side-nav .nav-index div.content-lev-1 { font-weight: normal; padding-left: 1em; }
#side-nav .nav-index div.content-lev-2 { padding-left: 1em; }
#side-nav .nav-index div.content-lev-2 a { color: #444; }


/* ----------------------------------------------------------------------
   nav-menu: used on narrow screens
   ---------------------------------------------------------------------- */

#side-nav .nav-menu {
    display: none;
    left: 0;
    right: 0;
    z-index: 1;
}



@media screen and (max-width: 800px){
    #side-nav .nav-bar { display: none; }

    #side-nav .nav-menu {
	display: block;
	width: 100%;
	background-color: #FFF5EE;
	text-align: center;
	font-size: 125%;
	padding: 0.5em 0.1em;
    }

    /* The top line ..................................................*/
    #side-nav .nav-menu-cur { font-weight: bold; }
    #side-nav .nav-menu-button:hover .nav-menu-list { display: block; }
    
    /* the menu items */
    #side-nav .nav-menu-list {
	display: none; position: absolute; padding: 1.5em 0 0.5em 0; width: 90%; margin-top: -1em; left: 5%;
	background-color: rgba(0,0,0,0.8);  }
    #side-nav .nav-menu-list > div { padding: 0.125em 0;}

    /* and their links */
    #side-nav .nav-menu div a { color: white;  background-color: transparent; display: block; padding: 0 0.5em; }
    #side-nav .nav-menu div a.nav-cur { color: white;  background-color: rgba(255,255,255,0.5);}
    #side-nav .nav-menu div a.nav-par { color: white;  background-color: rgba(242,242,242,0.5);}
    #side-nav .nav-menu div a:hover   { color: black;  background-color: rgba(230,230,230, 1.0);}




}











/* ================================================================================
   Sub Navigation
   ================================================================================ */

#sub-nav a { text-decoration: none; color: black;}

#sub-nav .nav-title { font-size: 200%; font-weight: bold; padding: 1em 0 0.5em 0;}

/* ----------------------------------------------------------------------
   nav-bar: wide screen (list style)
   ---------------------------------------------------------------------- */

#sub-nav div.nav-bar { margin: 1em 0 3em 0.75em; padding: 0;}
#sub-nav div.nav-bar div { display: block; text-align: left;}
#sub-nav div.nav-bar div a {
    display: inline-block;
    padding: 0 0.75em;
    margin: 0 0.5em 0.5em 0.5em;
    width: 90%;
    color: block;
}

#sub-nav div.nav-bar div a.nav-cur { color: #8B4513; font-weight: bold;}
#sub-nav div.nav-bar div a.nav-par { color: #000; }
#sub-nav div.nav-bar div a.nav-oth { color: #444; }
#sub-nav div.nav-bar div a:hover   { color: #000; background-color: #FFF5EE;}




/* ----------------------------------------------------------------------
   nav-menu: used on narrow screens
   ---------------------------------------------------------------------- */

#sub-nav .nav-menu {
    display: none;
    left: 0;
    right: 0;
    z-index: 1;
}



@media screen and (max-width: 800px){
    #sub-nav .nav-bar { display: none; }
    #sub-nav .nav-title { display: none; }

    #sub-nav .nav-menu {
	display: block;
	background-color: #FFF;
	text-align: center;
	font-size: 125%;
	padding: 0.5em 0.1em;
    }

    /* The top line ..................................................*/
    #sub-nav .nav-menu-cur { font-weight: bold; }
    #sub-nav .nav-menu-button:hover .nav-menu-list { display: inline-block; }
    
    /* the menu items */
    #sub-nav .nav-menu-list { display: none; position: absolute; padding: 0.5em; background-color: rgba(0,0,0,0.8);  }

    /* and their links */
    #sub-nav .nav-menu div a         { color: white;  background-color: transparent; display: block; padding: 0 0.5em; }
    #sub-nav .nav-menu div a.nav-cur { color: white;  background-color: rgba(255,255,255,0.5);}
    #sub-nav .nav-menu div a.nav-par { color: white;  background-color: rgba(255,255,255,0.5);}
    #sub-nav .nav-menu div a:hover   { color: black;  background-color: rgba(250,250,250, 1.0);}
}








/* ================================================================================
   Tab Navigation
   ================================================================================ */

#tab-nav a { text-decoration: none; color: black;}

/* ----------------------------------------------------------------------
   nav-bar: wide screen (list style)
   ---------------------------------------------------------------------- */

#tab-nav div.nav-bar { margin: 1em 0 3em 0; padding: 0; border-bottom: solid 2px black; padding-left: 1em;}
#tab-nav div.nav-bar div { display: inline-block; text-align: center; padding-left: 0.5em;}
#tab-nav div.nav-bar div a {
    min-width: 5em; 
    display: inline-block;
    padding: 0.15em;
    border: solid 2px black;
    border-bottom: none;
}

#tab-nav div.nav-bar div a.nav-cur { color: #F5DEB3; background-color: #000000;}
#tab-nav div.nav-bar div a.nav-par { color: #FFFFFF; background-color: #000000;}
#tab-nav div.nav-bar div a.nav-oth { color: #8B4513; background-color: #F5DEB3;}
#tab-nav div.nav-bar div a:hover   { color: #B8860B; background-color: #B8860B; background-color: #FFF5EE; }




/* ----------------------------------------------------------------------
   nav-menu: used on narrow screens
   ---------------------------------------------------------------------- */

#tab-nav .nav-menu {
    display: none;
    left: 0;
    right: 0;
    z-index: 1;
}



@media screen and (max-width: 800px){
    #tab-nav .nav-bar { display: none; }

    #tab-nav .nav-menu {
	display: block;
	background-color: #FFF5EE;
	text-align: center;
	font-size: 125%;
	padding: 0.5em 0.1em;
    }

    /* The top line ..................................................*/
    #tab-nav .nav-menu-cur { font-weight: bold; }
    #tab-nav .nav-menu-button:hover .nav-menu-list { display: inline-block; }
    
    /* the menu items */
    #tab-nav .nav-menu-list { display: none; position: absolute; padding: 0.5em; background-color: rgba(0,0,0,0.8);  }

    /* and their links */
    #tab-nav .nav-menu div a         { color: white;  background-color: transparent; display: block; padding: 0 0.5em; }
    #tab-nav .nav-menu div a.nav-cur { color: white;  background-color: rgba(255,255,255,0.5);}
    #tab-nav .nav-menu div a.nav-par { color: white;  background-color: rgba(255,255,255,0.5);}
    #tab-nav .nav-menu div a:hover   { color: black;  background-color: rgba(250,250,250, 1.0);}
}





/* ================================================================================
   Side Navigation path style
   ================================================================================ */		

div.nav-path a { text-decoration: none; color: #666; display: block; padding: 0.1em 0.2em;}
div.nav-path a:hover  { color: white; font-style: italic; background-color: #00BFFF;}
div.nav-path div.nav-path-this > a { color: #000; font-weight: bold; }
div.nav-path div.nav-path-element { margin-left: 1em;}
div.nav-path div.nav-path-siblings { margin-top: 0.5em;}

@media screen and (min-width: 800px){
    div.nav-path div.nav-path-title { font-size: 150%; font-weight: bold; margin: 0.25em 0 0.5em; }
    div.nav-path div.nav-path-children { border-left: solid 1px #666;}
}

@media screen and (max-width: 800px){
    div.nav-path { text-align: center; background-color: #EEEEEE; }
    div.nav-path a { color: #ddd; padding: 0;}
    div.nav-path div.nav-path-this > a { color: #fff;}
    div.nav-path div.nav-path-element { text-align: left;}

    div.nav-path span.nav-path-title { font-size: 125%; font-weight: bold; line-height: 175%; }
    div.nav-path span.nav-path-button { display: inline-block; cursor: pointer;}

    div.nav-path div.nav-path-content {
	display: none; position: absolute;
	background-color: rgba(0,0,0,0.8);
	padding: 0.5em 1.5em 0.5em 0;
    }
    
    div.nav-path span.nav-path-button:hover div.nav-path-content { display: inline-block; }
    
}



/* ================================================================================
   Side Navigation site anchors
   ================================================================================ */		
div.nav-site {  margin: 0 0 1em 0;}
div.nav-site div.nav-site-element { padding-left:  1em;}
div.nav-site a { text-decoration: none; color: #000; display: block; padding: 0.1em 0.2em;}
div.nav-site a:hover  { color: white; font-style: italic; background-color: #00BFFF;}
div.nav-site div.nav-site-title { font-size: 150%; font-weight: bold; margin: 0.25em 0 0.5em; }






/* ================================================================================
   Anchor title in flow text
   ================================================================================ */


div.anchor-title { display: flex; justify-content: space-between; align-items: center; }

div.anchor-title-h1 { border-top: none; }
div.anchor-title-h2 { border-top: solid 6px #aaa; margin-top: 2em; }
div.anchor-title-h3 { border-top: solid 3px #bbb; margin-top: 1em; }
div.anchor-title-h4 { border-top: solid 1px #eee; margin-top: 0.5em; }




div.anchor-title div.anchor-nav-btn { cursor: pointer; text-align: right; }
div.anchor-title div.anchor-nav-btn div.anchor-nav-list {
    display: none; position: absolute; padding: 0.5em;
    width: 15em; overflow: hidden; white-space: nowrap; transform: translate(-15em,-2em);
    background-color: #eee;
    align-self: flex-end;
}
div.anchor-title div.anchor-nav-btn:hover div.anchor-nav-list { display: block;}
div.anchor-title div.anchor-nav-list a {
    color: #444; text-decoration: none; display: block; padding-top: 0.25em;
    font-weight: bold;
}







/* ================================================================================
   Admin Navigation (shown in the top left as a hover menu)
   ================================================================================ */
#adm-nav { position: absolute; top: 0.5em; left: 0.5em; cursor: pointer; color: #FFFFFFAA; z-index: 1;}
#adm-nav .nav-menu-list  { display: none; background-color: darkred; padding: 0.25em; font-weight: bold;}
#adm-nav .nav-menu-button:hover .nav-menu-list  { display: block; }
#adm-nav .nav-menu a  { display: inline-block; width: 100%; padding: 0.15em 1em; color: white; text-decoration: none;}
#adm-nav .nav-menu a:hover  { color: yellow;}