:root {
  --blue: #6495ed;
  --white: #faf0e6;
  
  --black: black;
  
  --gold-light: #B2A069;
  --gold-light-hover: #656049;
  --gold-dark: #89815B;
  
  --black-light: hsla(0,0%,100%,.05); 
  
  --trans: transparent;
  
  --rand: 2px;
}

@font-face { font-family: 'esofont';src: url("../font/esofont/Planewalker.otf") format("opentype");}

html {
 width:100%;
 height:100%;
 background-color:black;
 background-image: url("../pic/esobg/lavaW.jpg");
 background-size:90%;
 background-position: center; /* Center the image */
}

/*  ######################################################################################### */
/*  ######################################################################################### */
/*  ######################################################################################### */
/* On screens that are 1080px wide or less, the background color is blue */
@media screen and (max-width: 1080px) {
html {
background-image: url("../pic/esobg/lavaH.jpg");
}

body {
 width:100%;
 height:100%;
 padding:0px;
 margin:0px; 
 text-align:center;
 margin:auto;
 cursor: default;
 border: 0px solid red;
}

}

/*  HEADER BEREICH */
/*  ######################################################################################### */

#mediaspace {
 margin: 0 0 0 auto; 
 color:white;
 display:none;
}

.headerdiv{
position:fixed;
top:0px;
width:100%;
height: 28px;
background-image: url("../pic/bg-panel.png");
color: #89815B;
font-weight:bold;
box-shadow:0px 0px 4px #000000;
display:flex; justify-content:center;
}

.headerdivinfo {
	display: flex;
	justify-content: left;
	width: 33%;
	padding:0px;
	text-align:left;
	white-space: nowrap;
	margin-top: 3px;
}

@media (min-width: 820px) {
	.headerdivinfo {
		margin-top: 1.5px;
		width: 33%;
	}
}

@media (max-width: 819px) {
	.headerdivinfo {
		width: 100%;
	}
}

.serverbild {
width:0.9em;
height:auto;
border:solid 0px red;
position:relative;
top:2px;
padding-left: 2px;
padding-right: 2px;

}

.serverbildinfo {
		position:relative;
		top: 2px;
}

.linkdiv_querX {
	background: none;
	display: flex;
	justify-content: center;
	width: 33%;
	margin-top: 1px;
	white-space: nowrap;
}

@media (max-width: 1029px){
	.linkdiv_querX {
		width: 100%;
	}
}
@media (max-width: 819px) {
	.linkdiv_querX {
		position: absolute;
		top: 24px;
		width: 100%;
		background-image: url("../pic/bg-panel.png");
		border-bottom: 0px solid #4C4833;	
		box-shadow: 0px 0px 4px #000000;
	}
}

.floatrechts {
	display: flex;
    justify-content: right;
	width: 33%;
	text-align: right;
	white-space: nowrap;
}

@media (min-width: 820px) {
	.floatrechts{margin-right:10px;}
}

.floatlinks {
float:left;	
}

.headerdivmenu1 {
text-align:right;
float: left;
vertical-align:middle;
border:solid 0px red;
position: relative;
top: 8px;
}

.headerdivmenu2 {
text-align:right;
float: left;
position: relative;
top: 4px;
}

.headerdivmenu3 {
text-align:right;
float: left;
position: relative;
top: 5px;
}

#serverlink{
text-decoration:none;
color:#89815B;

}

#spracheicon{
width: 25px;
height: auto;
top: -5px;
position: relative;
}

select {
background-color:var(--trans) !important;
background-color:var(--black) !important;
border-radius: 1em;
font-weight:bold;
color:#89815B;
border:solid 1px #89815B;
width:100%;
}

select:hover {
	border:solid 1px red;
}

select:hover{
background: #0C0C0C;
border:solid 1px #656049;
}

.auswahl {
	height:2.375em;
}

select option {
background-color:var(--trans) !important;
background-color:var(--black) !important;
color:#89815B;
}

.drittelbreite {
width:33%;
}

.halbebreite {
width:50%;
}

.vollebreite {
width:100%;
}

.txtlinks {
text-align:left;
}

.txtrechts {
text-align:right;
vertical-align: middle;
}

table.vollebreite.dropwahl {
width:95%;
border:solid 0px #89815B;
}

.divtab {
display:none;
}

a:hover.bildlink {
 text-decoration:none;	
 background-color:transparent;
}

.anzeigebild {
 width:98%;
 height:auto;
 border:1px solid #4C4833;
}

@media (min-width: 820px) {
	.anzeigebild {
		width: 60%;
	}
}

#sprache{
background-color:transparent;
color:#89815B;
border:solid 0px #89815B;
-webkit-appearance: none;
appearance: none;
background: transparent;
margin-right:10px;
}

#sprache:hover{
background: #0C0C0C;
border:solid 0px #89815B;
transform: scaleY(0.9);
transform: scaleX(0.9);
}

#sprache option{
	background-color:black !important;
	background-color:transparent !important;
	color:#89815B;
}

#sprache option:hover #sprache{background: black;}
#sprache option:hover {background: red;}

img.mute {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
width: 18px;
height: auto;
border: solid 0px red;
}

img.mute:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
-webkit-transition: all .6s ease;
-webkit-backface-visibility: hidden;
}

a {
 xfont-size:1.2vw;
 text-decoration:none;
 color:#89815B;
 padding:2px;
}

a:hover {
background-color:#4C4833;
color:#656049;
}

a:hover#serverlink {
background-color:transparent;
color:#656049;
} 

a:hover#linktext {color:#656049;}

/* Symbolerklärung Background Class 0=nix 1=weiß 2=schwarz 3=rot 4=grün 5=blau 6=orange 7=gelb 8=grau*/
.ik0{}
.ik1{background-color:rgba(255,255,255,0.8);box-shadow:0px 0px 2px #000000}
.ik2{background-color:rgba(0,0,0,0.8);box-shadow:0px 0px 2px #000000}
.ik3{background-color:rgba(230,0,0,0.8);box-shadow:0px 0px 2px #000000}
.ik4{background-color:rgba(0,255,0,0.8);box-shadow:0px 0px 2px #000000}
.ik5{background-color:rgba(0,80,255,0.8);box-shadow:0px 0px 2px #000000}
.ik6{background-color:rgba(255,90,0,0.8);box-shadow:0px 0px 2px #000000}
.ik7{background-color:rgba(255,200,0,0.8);box-shadow:0px 0px 2px #000000}
.ik8{background-color:rgba(124,124,125,0.8);box-shadow:0px 0px 2px #000000}

.symbolzelle1 {
text-align:right;
padding-right:15px;
width:50%;
}

.symbolzelle2 {
text-align:left;
padding-left:15px;
}

.übersichtkarte{
	width:21.5em;
	height:39.8em;
}

@media (min-width: 820px) {
.übersichtkarte{
	width:51em;
	height:39.8em;	
}
}
/*  CONTENT BEREICH */
/*  ######################################################################################### */
.iframebox {
	width:100%;
	height: 85vh;
	border:none;
	color:#89815B;
}

.divplatzhalter {
background-color:transparent;
color:transparent;
font-size:1.8em;
}

#pagename{
background-image: url("../pic/bottom-bg-fade_klein.png");
background-repeat: repeat-x;
/* nur mobile - check mit php in der main php
background-image:linear-gradient(to bottom, black, transparent)
*/
}

#gildenname {
 border:0px solid black;
 color:#B2A069;
 font-family:esofont;
 font-size:3em;
 text-shadow: 3px 5px 4px #89815B;
 display:block;
 text-align: center;
}

.inhaltabstand {
	margin:10px;
}

.menu_quer {
margin: 0px;
padding: 0px;
font-size: 0.6em;
}

#linkdiv_quer {
 border:0px solid black;
 text-align:center;
 display:none;
 margin-top:30px;
 padding-bottom: 12px;
}

@media (min-width: 1080px) {
#linkdiv_quer {
 top: -8px;
}
}

@media (min-width: 820px) {
#linkdiv_quer {
	border:var(--rand) solid var(--trans);
	text-align:center;
	display:none;
	position:fixed;
	position: relative;
	margin-top:0px;
	left:330px;
	top: 0px;
	background-color:transparent;
	}
}

#linkdiv {
 border:0px solid black;
 text-align:center;
}

.linktext {
 border:0px solid #4C4833;
 background-image: url("../pic/bg-panel.png");
 font-size:2.2em;
 color:#89815B;
 text-decoration:none;
 padding:2px 4px 2px 4px;
 font-weight: bold;
 box-shadow:0px 0px 4px #000000;
 display:inline-block;
 width:80%;
}

.sehrgross {font-size:2.2em;}
.gross {font-size:1.8em;}
.normal {font-size:1.5em;}
.sehrklein {font-size: 0.55em;}


#contentdiv {
 border:0px solid black;
 text-align:center;
}

@media (max-width: 819px){
#contentdiv {margin-top: 35px;}
}

.boxcenter {
 border:1px solid #4C4833;
 background-image: url("../pic/bg-panel.png");
 text-align: center;
 width:85%;
 margin: 0 auto;
 padding:10px;
 display:none;
 color:#B2A069;
 box-shadow:0px 0px 4px #000000
}

@media (min-width: 820px){
.boxcenter {margin-top:30px;}
}

.contentkarten {
 border:0px solid #4C4833;
}

#contentueberschrift {
 color:#B2A069;
 font-size:1.3em;
 font-weight:bold;
 text-decoration:underline;
}

#contentueberschriftdunkel {
 color:#89815B;
 font-weight:bold;
 -font-size:1.2em;
}

#contentkartensymbole {
 border:0px solid #4C4833;
 margin:auto;
 text-align: left;
}

#linktextmap {
	text-decoration:none;
	color:white;
	font-size:0.8em;
}

#infotxt {
 color:#89815B;
 font-weight:bold;
 font-size:1.2em;
}

.tischkopf{
	display:table-cell;
	vertical-align:middle;
	font-size:1.5em;
	font-weight:bold;
}

td .tischkörper{
	font-size:1.1em;
}
/*  FOOTER BEREICH */
/*  ######################################################################################### */
.footer{
text-align:right;
padding-right:10px;clear:both;
color: #7F7F7F;
text-align: right;
cursor: default;
position: fixed;
bottom: 10px;
right: 5px;
margin: 0px 20px 0px 0px;
}