:root {
    --navTopHeight: 50px;
    --navSubHeight: 36px;
    --navSubWidth: 225px;
    --navSubLeft: 105px;
    --navSubSubLeft: 120px; /* navSubWidth minus navSubLeft; */
    --navSubSubTop: -50px; /* negative --navTopHeight */
    --navLangHeight: 28px;
    --navLangWidth: 54px;
    
    --navTopFontSize: 17px;
    --navSubFontSize: 14px;
    
    --navTopElementColor: #ddd;
    --navTopElementHover: #fff;
    --navTopElementBGHover: #6c7b84;
    --navSubElementColor: #222;
    --navSubElementBGColor: #eee;
    --navSubElementBGHover: #fff;
    --navSubElementBGHasChild: #daddde;
    
    --contentHrefColor: #6c7b84;
    --contentHrefColorHover: #91afc0;
    
 }

/******************************************************************
* https://www.drweb.de/responsive-navigation-css-dropdown-menue/
* https://codepen.io/drweb/pen/VwYNjxG
******************************************************************/

nav {
    //background-color: black;
    //background: repeat-x url("img/bg_nav.gif");
    //background: round url("img/bg_nav.gif");
    margin: 0;	
}
nav ul {
	padding: 0;
    margin: 0;
	list-style: none;
	position: relative;
    //text-align: center;
}	
nav ul li {    
    display:inline-block;	  
    border-right: 1px solid;
    border-color: rgba(80, 80, 80, 0.5);
}
nav ul li:first-child {         
    border-left: 1px solid;
    border-color: rgba(80, 80, 80, 0.5);
}
nav a {
	display:block;
	padding:0 16px;	
	color: var(--navTopElementColor);
    font-size: var(--navTopFontSize);
    line-height: var(--navTopHeight);
	text-decoration:none;
}
nav a:hover { 
	background-color: var(--navTopElementBGHover);
    background: round url(img/bg_nav_hover.gif);
    color: var(--navTopElementHover);
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute;     
	top: var(--navTopHeight);
    //left: var(--navSubLeft);    
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* First Tier Dropdown */
nav ul ul li { 
    z-index: 99;
	width: var(--navSubWidth);
	float: none;
    text-align: left;
	display: list-item;
	position: relative;        
    background-color: var(--navSubElementBGColor);
    border-top: 1px solid;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    border-color: rgba(0, 0, 0, 0.1);
}
nav ul ul li.has-children {  /* X-Pack, G-Pack, S-Pack */            
     background-color: var(--navSubElementBGHasChild);      
}
nav ul ul li:first-child {
    border: 0px;
}
nav ul ul li a {		
    font-size: var(--navSubFontSize);    
    line-height: var(--navSubHeight);    
	text-decoration:none;
    color: var(--navSubElementColor);    
}
nav ul ul li a:hover { 	
    background: none;
    color: var(--navSubElementColor);
    background-color: var(--navSubElementBGHover);
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
    z-index: 99;
	position: relative;
	top:  var(--navSubSubTop);     
	//left: var(--navSubSubLeft);
    left: var(--navSubWidth);
}

/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; padding-left: 0.6em;}
li > a:only-child:after { content: ''; padding-left: 0.6em;}

.nav_container_a {        
    display:flex;
    justify-content: center;
    width: 90%;    
}
.nav_container_b {
    padding: 5px;      
}
.nav_container_b img {
    width: 20px;
    vertical-align: middle;
}
.nav_container_top {
    display: inline-flex;
    align-items: baseline;        
    width: 100%;
}


/***************** LANGUAGE BUTTON ***************************/

ul.lang li { 
    border: 0px;    
}
ul.lang li:first-child {         
    border: 0px;
}
ul.lang li a {	
    line-height: var(--navLangHeight);
	text-decoration:none;
    padding-right: 8px;
}
ul.lang li a:hover {
    background: none;
    background-color: var(--navTopElementBGHover);
    color: var(--navTopElementHover);
}
ul.lang li > a:after { content:  ''; }
ul.lang ul {
    top: var(--navLangHeight);
}
ul.lang ul li {    
	width: var(--navLangWidth); 
    background-color: #000;    
    border-color: rgba(255, 255, 255, 0.1);
}

/*********************** END DROPDOWN-MENU ******************************/

body {
  background-color: #ebe5cf;
  background-image: url(img/bg_body.gif);
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0;
  padding-top: 0;
  //overflow-y: scroll; /* haesslicher workaround fuer das ploetzlich nicht mehr funktionierende clear-fix ... besser so als ein zuckendes nav-menu */
}
      
.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5em;
  padding-right: 1.5em;
  padding-left: 1.5em;
  max-width: 600px;
}

.clear-fix:before,
.clear-fix:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear-fix:after {
  clear: both;
}

.header {
    text-align: center;
}
.header img {
  margin-bottom: 1em;
  height: 80px;
 }
.nav-edge {
    background-color: black;
    border: 0px solid black;
    border-radius: 24px;
    padding: 0 18px 0 18px;
    background: round url("img/bg_nav.gif");
    
}

.contentblock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    //background-color: #ccc; 
    padding: 0 2em 0 2em;    
}
.breadcrumb {
    //display: flex;
    justify-content: center;    
    margin-bottom: 1em;
}
.breadcrumb p {
    text-align: center;
    font-style: italic;
    color: #666;
}
.breadcrumb a {
    color: #666;
}

.modlist_control_panel {
    display: flex;    
    justify-content: space-between;
    margin: 1em;
}
.mcp_1 {        
    margin-left: 1.6em;    
    cursor: pointer;
}
.mcp_2 {    
    margin-right: 0.8em;
}
.filter-table {
    background-color: #ded1b5;
    border: 1px solid white;
    border-top-color: black;
    border-left-color: black;
    border-radius: 8px;
    padding: 0.1em 0.4em 0.1em 0.4em;
    font-size: 1em;
}

/*** MODDESCRIPTION TABLE HANDLING ***/

table#overview {    
    padding: 0 1em;                
    width: 100%;
    border-collapse: separate;    
    /* kleine Spielerei mit abgerundeten Ecken und einer Menge zusätzlicher Schreibarbeit. Die folgenden Angaben bzgl borders sind dafuer unerlaesslich, da wir ansonsten Doppelinien oder extra dicke Linien haben. border-collape: collapse funzt mit runden Ecken halt nicht. */
    border-radius: 10px;     
    border-spacing: 0;
    margin-bottom: 30px;
}
table#overview th {
    background-color: aliceblue;
    opacity: 60%;
    //border: 1px solid #999;
    padding: 0.8em;
    border-bottom: 1px solid #aaa; border-right: 1px solid #aaa;    
}

table#overview tr th:first-child, table#overview tr td:first-child { border-left: 1px solid #aaa; }
table#overview tr:first-child th { border-top: 1px solid #aaa; }

table#overview tr:first-child th:first-child { border-top-left-radius:10px } 
table#overview tr:first-child th:last-child { border-top-right-radius:10px }
table#overview tr:last-child td:first-child { border-bottom-left-radius:10px; }
table#overview tr:last-child td:last-child { border-bottom-right-radius:10px; }
/* end */

table#overview td {
    //border: 1px solid #aaa;
    padding: 0.2em 0.6em 0.2em 0.6em;
    border-bottom: 1px solid #aaa; 
    border-right: 1px solid #aaa;
}

table#overview th img {
    width: 14px;
    margin-left: 10px;
}
table#overview th.sort:hover {
    background-color: afd4e7;
    cursor: pointer;
}

/* Pfeil nach oben */
.upArrow::after {
 content: "\2191";
 color: #FFFFFF;
 text-shadow: 1px 1px 0px #000000;
 position: absolute;
}

/* Pfeil nach unten */
.dnArrow::after {
 content: "\2193";
 color: #FFFFFF;
 text-shadow: 1px 1px 0px #000000;
 position: absolute;
}

table#overview img.preview {
    width: 80px;
}
table#overview .image {
    background: url("img/bg_noise.png") repeat;
    text-align: center;
    width: 90px;    
}
table#overview .lastcol {
    text-align: center;
    width: 26px;    
}
table#overview .lastupdate {
    white-space:nowrap;
    text-align: center;
    width: 8em;    
} 
table#overview .category {
    white-space:nowrap; 
    width: 10em;
}
table#overview .description {
    background: url("img/bg_noise_fade.png") repeat-y;    
}
table#overview a {    
    color: var(--contentHrefColor);    
}
table#overview a:hover{    
    color: var(--contentHrefColorHover);    
    text-decoration: none;
}

.modsummary {
    font-weight: bold;
    color: #444;
    cursor: pointer;
    background: url("img/eye.png") 4px 8px no-repeat;
    list-style: none;
    padding: 10px 0px 0px 33px;  
    
}
details p {
    cursor: auto;
    border: 1px solid #f0f0f0;
    background-color: rgba(255,255,255,0.3);    
    //background: #efefe6;
    padding: 0.8em;
    border-radius: 6px;  
    margin-bottom: 10px;
}
/*************************************/

.center_me {    
    display: flex;
    justify-content: center;    
}

.updateblock {    
    width: 80%;    
}
.updateblock .update {
    background-color: rgba(255,255,255,0.3);
    padding: 1em;
    margin-bottom: 2.5em;
    border: 1px solid #f0f0f0;
    border-radius: 8px;    
}
.updateblock .bg_update {
    background: no-repeat url("img/bg_update.png");    
}
.updateblock .bg_faq {
    background: no-repeat url("img/bg_faq.png");    
}
.updateblock .update .upt-header{
    background-color: rgba(223,201,167,0.4);
    margin-bottom: 1em;
    padding: 0.6em 1em 0.6em 1em;
    border: 1px solid #fff;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.4em;
}
.updateblock .update .upt_content{
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 0.6em 1em 0.6em 1em;
}
.update a {    
    color: var(--contentHrefColor);    
}
.update a:hover {    
    text-decoration:none;
    color: var(--contentHrefColorHover);

}

.bottemline {
    width: 85%;
    height: 1px;
    border: 0;
    background-color: #fff;
    margin-top: 2em;
}
.footer a {
    text-decoration: none;
    color: #666;
    font-style: italic;
    margin-bottom: 1em;
}
.footer a:hover {
    text-decoration: underline;
    color: var(--contentHrefColorHover);
}
.impressum {
    background-color: rgba(255,255,255,0.3);
    padding: 1em;
    border: 1px solid #f0f0f0;
    border-radius: 8px;    
}
.adresse {    
    display: flex;
    flex-flow: row;    
    width: 500px;
    background-color: rgba(255,255,255,0.6);
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    margin: 1em;
}
.adresse .label {
    padding: 1em;
}
.adresse .betreiber {    
    padding: 1em 1em 1em 2em;
}
.impressum a {    
    color: var(--contentHrefColor);    
}
.impressum a:hover{    
    color: var(--contentHrefColorHover);    
    text-decoration: none;
}

/*************************************/

#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    background-color: aliceblue;
    opacity: 60%;
    border: 1px solid #666;
    outline: none;
    color: black;
    cursor: pointer;
    padding: 10px 0 10px 0;
    border-radius: 6px;
}

#topBtn:hover {
    background-color: #afd4e7;
}

/********** aufploppende Riesenbilder **********/
.bigpicture {
    position: relative;    
}

.bigpicture img.hoverimg {
    position: absolute;
    opacity: 0;
    width: 250px;
    height: 250px;
    left: -200px;
    top: -70px;
    /*transition: opacity .5s, top .5s;*/
}

.bigpicture:hover img.hoverimg {
    opacity: 1;    
    z-index: 5;
    border: solid 1px black;
    box-shadow: 4px 4px 12px black;
}