ContainerLeaflet/* ---------------------------------------------------------------- */
/* Smartphones (portrait) iPhone4-iPhone6 iPhone8S iPhone12 Mini -- */
/* ---------------------------------------------------------------- */

/* @media only screen and (min-width :300px) and (max-width : 420px) { */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 2) {

html, body {
  height: 100%;
  margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

#mapid {
	width: 100%;
	height: 100%;
}
#SelectionInfoBar {
	position:absolute;
	margin-top:1%;
	margin-left:5%;
	z-index:9999999;
}
#InfoBox1Line {
	position:absolute;
	margin-top:3%;
	margin-left:5%;
	z-index:9999999;	
}
#InfoBox2Lines { 
	z-index:9999999;
}
#FirstStartMessage { 
	z-index:9999999;
}
.TitleAuswahlBoxInfoIcon {					/* Meldung, wenn man auf das Info-Icon der Auswahlbox klickt */
	font-size: 1rem;
	/* color: #000000;*/		/* Schwarz */
	color:red;
	background-color:lightgrey;
	font-weight:normal;
	z-index:9999999;
}
#ContainerLeaflet {
	color: #000000;		/* Schwarz */
	position:relative;
	display: flex;
	flex-direction: column;
	overflow: auto;
	overflow-y: scroll;					/* Die Scrollbar wird nur bei einem �berlauf angezeigt */
	justify-content: space-between;		/* Abstand zwischen den einzelnen Auswahlboxen */
	margin-top:7%;
	margin-left:2%;
	/*border: solid; */
	gap:3%;					/* Abstand zwischen den Elementen */
	z-index: 9999;	
	/* background-color:white; */ /* Dani */
	height: 80%;
	width: 18%;				/* 20% der Bildschirmbreite f�r das Control-Fenster */	
}
.TitleAuswahlBox {
	color: #FFFFFF; /* FFFFFF = Weiss */
	font-size: 1.0rem;
}
.AuswahlContainer_GebieteD {
	margin-left: 1%;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
    /*background-color:transparent;*/
}
#GebieteD, #GebieteE  {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_StaemmeD
{
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
    background-color:transparent;
}
#StaemmeD, #StaemmeE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_HaeuptlingeD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#HaeuptlingeD, #HaeuptlingeE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_KriegeD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#KriegeD, #KriegeE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_SchlachtenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#SchlachtenD, #SchlachtenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_ExpeditionenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#ExpeditionenD, #ExpeditionenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_ArmeeeinheitenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#ArmeeeinheitenD, #ArmeeeinheitenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_StichworteD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#StichworteD, #StichworteE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_PersonenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#PersonenD, #PersonenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}

.AuswahlContainer_ZeitperiodeD {
	background-color:transparent;
	z-index: 9999;
	text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=...' festgelegt */
}
#ZeitepocheD, #ZeitepocheE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}

} /* Smartphones (portrait) iPhone4-iPhone6 iPhone8S iPhone12 Mini */	  





/* -------------------------------- */
/* Desktops and Laptops ----------- */
/* -------------------------------- */
@media only screen  and (min-width : 1224px) {

html, body {
  height: 100%;
  margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

#mapid {
	width: 100%;
	height: 100%;
}
#SelectionInfoBar {
	position:absolute;
	margin-top:1%;
	margin-left:5%;
	z-index:9999999;
}
#InfoBox1Line {
	position:absolute;
	margin-top:3%;
	margin-left:5%;
	z-index:9999999;	
}
#InfoBox2Lines { 
	z-index:9999999;
}
#FirstStartMessage { 
	z-index:9999999;
}
.TitleAuswahlBoxInfoIcon {					/* Meldung, wenn man auf das Info-Icon der Auswahlbox klickt */
	font-size: 1rem;
	/* color: #000000;*/		/* Schwarz */
	color:red;
	background-color:lightgrey;
	font-weight:normal;
	z-index:9999999;
}
#ContainerLeaflet {
	color: #000000;		/* Schwarz */
	position:relative;
	display: flex;
	flex-direction: column;
	overflow: auto;
	overflow-y: scroll;					/* Die Scrollbar wird nur bei einem �berlauf angezeigt */
	justify-content: space-between;		/* Abstand zwischen den einzelnen Auswahlboxen */
	margin-top:7%;
	margin-left:2%;
	/*border: solid; */
	gap:3%;					/* Abstand zwischen den Elementen */
	z-index: 9999;	
	/* background-color:white; */ /* Dani */
	height: 80%;
	width: 18%;				/* 20% der Bildschirmbreite f�r das Control-Fenster */
	
}
.TitleAuswahlBox {
	color: #FFFFFF; /* FFFFFF = Weiss */
	font-size: 1.0rem;
}
.AuswahlContainer_GebieteD {
	margin-left: 1%;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
    /*background-color:transparent;*/
	
}
#GebieteD, #GebieteE  {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_StaemmeD
{
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
    background-color:transparent;
}
#StaemmeD, #StaemmeE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_HaeuptlingeD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#HaeuptlingeD, #HaeuptlingeE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_KriegeD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#KriegeD, #KriegeE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_SchlachtenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#SchlachtenD, #SchlachtenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_ExpeditionenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#ExpeditionenD, #ExpeditionenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_ArmeeeinheitenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#ArmeeeinheitenD, #ArmeeeinheitenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_StichworteD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#StichworteD, #StichworteE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}
.AuswahlContainer_PersonenD {
	background-color:transparent;
    z-index: 9999;
    text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=6' festgelegt */
}
#PersonenD, #PersonenE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}

.AuswahlContainer_ZeitperiodeD {
	background-color:transparent;
	z-index: 9999;
	text-align: left;
	/* Die Gr�sse/H�he der Box wird durch 'size=...' festgelegt */
}
#ZeitepocheD, #ZeitepocheE {
	background-color:transparent;
	color: #000000;
	width: 98%;
	font-family: Georgia;
	font-size:1rem;
	background-color:white;
	opacity: 80%;
}

} /* Desktops and Laptops */