/* ---------------------------------------------------------------- */
/* 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) {
	  
.HintergrundbildWeiss {
background:url(files/images/TitelbildWhitePortrait.jpg) no-repeat;
background-size:cover;	/* Resize the background image to cover the entire container */
overflow:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}

.HintergrundbildTitelseite {
background:url(files/images/TitelbildTitelseiteLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */
overflow:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}
.HintergrundbildLiteratur {
background: url(files/images/TitelbildLiteraturLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */
overflow: hidden;		/* Kein vertikale Scrollbar über die ganze Höhe */
}
.HintergrundbildHistory {
background: url(files/images/TitelbildHistoryLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */
overflow:hidden;		/* Keine vertikale Scrollbar über die ganze Bildschirmhöhe anzeigen */
}
.HintergrundbildMovies {
background: url(files/images/TitelbildMoviesLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */
overflow: hidden;		/* Kein vertikale Scrollbar über die ganze Höhe */
}
.HintergrundbildLinks {
background:url(files/images/TitelbildLinksLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */
overflow: hidden;		/* Kein vertikale Scrollbar über die ganze Höhe */
}
.HintergrundbildAboutMe {
background: url(files/images/TitelbildAboutMeLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */
overflow:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}

#Header {
	vertical-align:middle;
	width:100%;
}

/* ------------------------------------------------------------------------------------------- */
/* Titelzeile mit Sprachflaggen Titel-Schriftzug (Grafik) und Beschreibung zum Hintergrundbild */
/* ------------------------------------------------------------------------------------------- */

.flex-container-titel {
  display: flex;
}

.column1 {
  flex: 1;  /* Makes all columns evenly sized */
  padding: 1%;
}
.column2 {
  flex: 1;  /* Makes all columns evenly sized */
  padding: 1%;
  text-align: center;  /* Optional: Center content within columns */
}
.column3 {
  flex: 1;  /* Makes all columns evenly sized */
  padding: 1%;
  text-align: center;  /* Optional: Center content within columns */
}

.imgwrap {
   width: 50%; /*or whatever you choose*/
   margin: auto;
}
.imgwrap img {
   display: block;
   width: 100%;
   max-width: 500px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}

.flags_image_size {
	width:20%;
	height:auto;
}

/* Beschreibung zum Hintergrundbild */
h1 {
	width:80%;
	/* margin-left:5%; */
	color:#000;
	font-weight:400;
	font-size:0.5rem;
	font-family:"Georgia";
	font-weight: bold;
	text-align:center;
	margin-left:10%;
	margin-right:1%;
}

/* ------------------- */
/*      Menubar        */
/* ------------------- */

#Navibar {
	padding-left: 1%;			/* Abstand vom linken Rand */
	background: #773F36;
}
.MenuTitel {
	color: #FFFFFF;
	font-size:0.6em;
	text-decoration: none;		/* Kein 'underline' bei den Menüs */
}

/* ----------------------------------------------------- */
/* Hauptseite "index.php" und Unterseiten der Hauptseite */
/* ----------------------------------------------------- */

/* https://publisher.ch/2020/07/05/flexbox-ausrichten-von-elementen-im-web/ */
.flex-container {
	display: flex;
	vertical-align:top;
	flex-direction:row;				/* Ausrichtung der Elemente auf der Hauptachse */
	justify-content: flex-start;	/* Raum zwischen und um die Elemente: Von links nach rechts */
	flex-wrap: wrap;
	overflow:auto;

	/* Angaben für den Text rechts neben den Bildern */
	color:#FFFFFF;
	font-size:0.7rem;
	font-family:"Georgia";
	/*font-weight: bold; */
	text-align:left;
	margin-left:2.5%; 
	align-items: center;			/* Vertically center the items (and the text right to the images */
}

.flex-item {
  text-align: left;
  /*line-height: 10%;*/
  flex-basis:25%;					/* It sets the size of the content box unless otherwise set with box-sizing */
  vertical-align:top;				/* Hat keine Wirkung */
  margin-bottom:5%;					/* Vertikaler Abstand zwischen den Bildern */
}

.flex-item_image {
  width: 90%;						/* Breite des Bildes an die Breite des div anpassen */
  height: 90%;						/* Höhe des Bildes an die Höhe des div anpassen */
}

#ImageBorderRadius {
  border-radius: 20%;
  box-shadow: 5px -5px 15px 0px  #C9C7C7;
  opacity: 80%;
}

/* Haupttitel zB "Native Americans */
h2 {
	width:90%;
	margin-left:5%;
	color:#FFFFFF;
	font-weight:400;
	font-size:1.5rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	padding: 0px;
	margin-bottom:0%;
	background-color:#773F36;
	text-align:center;
}

/* Beginn Lauftext */
/* https://stackoverflow.com/questions/45847392/pure-css-continuous-horizontal-text-scroll-without-break */
.marquee {
	width:90%;					/* Startpunkt rechts */
	margin-left: 5%;
	color:yellow;
	font-weight:400;
	font-size:0.8rem;
	font-family:"Georgia";
	padding: 0px;
	margin-bottom:0%;
    white-space: nowrap;
    overflow: hidden;
    /*position: absolute;*/
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 25s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Ende Lauftext */

.href1 {
	text-decoration: underline;
	color:red;
}

/* Haupttitel schwarz */
h3 {
	width:90%;
	/* margin-left:5%; */
	color:#000;
	font-weight:400;
	font-size:1.5rem;
	font-family:"Georgia";
	font-weight: bold;
	text-align:left;
	margin-left:1%;
	margin-right:1%;
}

/* Text neben dem Untertitel, weiss */
h5 {
	color:#fff;
	font-weight:400;
	font-size:1.2rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	text-align:left;
	margin-left:2%;
}

/* Text nach dem Untertitel, schwarz */
h6 {
	color:#000;
	font-weight:400;
	font-size:0.6rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	text-align:left;
	margin-left:1%;
	padding-right:1px;
	/* padding-left:1%; */
}
/* Überschriften für Kriege */
h7 {
	color: #bf533d;
	font-weight: bold;
	font-size:1.5rem;
	font-family:"Georgia";
	text-align:left;
	margin-top:0%;
	margin-left:0%;
	padding-right:1px;
	vertical-align: top;
}

/* Photo credits, schwarz */
h9 {
	color:#000000;
	font-weight:400;
	font-size:0.6rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	text-align:left;
	margin-left:0%;
}


/* Waagrechte Linie als Trennung zwischen den einzelnen Abschnitten */
.hrstyle1 {
	border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
	margin-left:30%;
	width:40%;
}

/* Bild links mit Fliesstext rechts */
.imagelefttextright {
	font-size:0.7rem;
	font-family:"Georgia";
	float:left;
	padding-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	width:50%;
	height:50%;
}

/* Bild rechts mit Fliesstext links */
.imagerighttextleft {
	font-size:0.7rem;
	font-family:"Georgia";
	float:right;
	padding-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	width:50%;
	height:50%;
}
/* Bild rechts mit Fliesstext links */			/* Nur bei 'Desktop' werden zwei Bilder rechts nacheinander dargestellt, auf einem iPhone wird dieses Bild blockiert weil zu wenig Platz */
.imagerighttextleft2 {
	display: none;
	font-size:0.7rem;
	font-family:"Georgia";
	float:right;
	padding-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	width:25%;
	height:25%;
}

/* Bild in der Mitte zentriert */
.imagecentered {
	font-size:0.7rem;
	font-family:"Georgia";
	text-align:center;
	margin-left:15%;
	width:70%;
	height:50%;
}

.TabelleHistoryAlleSpalten {
	font-family:"Georgia";
	font-size:0.6rem;
}
/* Unterhalb des Bildes wird die Quelleninformation zum Bild angezeigt */
.TabelleHistoryImageSourceOfOrigin {
	font-size:14px;
	border-top-style:hidden;
}

div.transbox {
    margin: 1%;
	width:50%;
    background-color:#DDD;
    /* border: 1px solid black; */
    /* opacity: 0.4; */
    /* filter: alpha(opacity=60); /* For IE8 and earlier */
}
.MyMoviesText {
	border: 1px solid #000000;
	color:#000;
	font-weight:400;
	font-size:1rem;
	width:50%;			/* Zentrieren in der Mitte des div */
	margin: auto;		/* Zentrieren in der Mitte des div */
	font-family:"Courier New", Courier, monospace;
	background-color:#FFF;
	font-weight: bold;
}
	
/* ------------------- */
/*      History        */
/* ------------------- */

#SuchzeileHistory {
	margin-left:2.5%;
	height:auto;
	text-align:left;
}
#FeldFuerSuchfeldHistory {
	height:auto;
	margin:0px;
	text-align:left;
	width:70%;
	font-size:0.5rem;		
}
#EingabefeldHistory {
	width:100%;
	margin:0px;
	margin-top:0px;
	font-family:"Georgia";
	font-size:0.6rem;				/* Schriftgrösse der Selektionsboxen */
	font-weight:normal;
	color:black;
	border-radius:3px;
	background-color:#FFFACD;	
}
#FeldFuerSuchknopfHistory {
	width:10%;
	font-size:0.8rem;
	text-align:left;
	padding-left:3%;
	/* background-color: yellow; */
}
#SucheStartenKnopfHistory  {
	border: 0;
	padding: 0;
	margin-left:0%;
	background-color:#6F0;
}
#AnzeigeMehrfachMarkerHistory
{
	margin-left:48px;
	height:25px;			/* Gleich wie '#SuchzeileHistory' */
	width:90%;				/* 100% */
}
#FeldFuerShowHideSelectionBoxesHistory {
	height:auto;
	margin:0px;
	width:5%;
	text-align:right;
	font-family:"Georgia";
	font-size:0.7rem;		
}

/* History - Auswahlboxen */

#Auswahlboxen {
	margin-left:2.5%;
	float:left;
	width:95%;
	padding:0;
	margin-right:2.5%;
	font-family:"Georgia";
	font-size:0.7rem;
}
#TabelleAuswahlboxenHistory {
	margin-bottom: 1%;			/* Abstand zwischen der untersten Auswahlbox und dem Beginn der Tabelle mit den Datensätzen */
}
#HintergrundfarbeSelektionsboxen {
	
}
.Box {
	font-size:0.6rem;		/* Schriftgrösse der Selektionsboxen */
	background-color:#e5f7fc;
}	
	
/* History - Tabelle mit den Datensätzen */

#txtHint {
	overflow: auto;
	height: 88vh; /* 100vh represents the full height of the viewport, regardless of the content on the page ; 95% because sometimes there is a status bar at the bottom */
	margin-top:0px;
	margin-left:2.5%;
	width:95%;
	float:left;
	font-family:"Georgia";
	font-size:0.7rem;
	color:#FFFFFF;
}
#txtHintHistory {
	overflow:auto;
	overflow-x: hidden;		/* Verhindert die horizontale Verschiebung der ganzen "history"-Tabelle */		
	margin-top:0px;
	margin-left:2.5%;
	width:95%;
	float:left;
	font-size:0.8rem;
	color:#FFFFFF;
	height: 95vh; /* 100vh represents the full height of the viewport, regardless of the content on the page ; 95% because sometimes there is a status bar at the bottom */
}
#txtHintContact {
	overflow: auto;
	height: 80vh; /* 100vh represents the full height of the viewport, regardless of the content on the page ; 95% because sometimes there is a status bar at the bottom */
	margin-top:0px;
	margin-left:2.5%;
	width:95%;
	float:left;
	font-family:"Georgia";
	font-size:0.7rem;
	color:#FFFFFF;
}

.inputboxbookreference {	/* Stellt sicher, dass die Checkbox in der Spalten mit den Literaturhinweisen nicht angezeigt wird */
   position: absolute;
  left: -999em;
}

#LinksImEreignistext {				/* Für www-Hyperlinks */
	color:#FFD700;					/* Gleich wie die Farbe des Datums */
	font-weight: normal;
	text-decoration: underline;
}

#DBLinksImEreignistext {			/* Für DB-Links mit einer Abfrage in die eigene mySQL History-Datenbank */
	color:#FFD700;					/* Gleich wie die Farbe des Datums */
	font-weight: normal;
	text-decoration: underline;
}

	
/* --------- */
/* Literatur */
/* --------- */

#SuchzeileLiteratur {		/* Suchzeile : */
	width:100%;
	margin-left:5%;			/* Abstand Suchzeile von links */
	text-align:left;
}

#FeldFuerSuchfeldLiteratur {
	text-align:left;
	width:50%;
	height:auto;
	/* background-color: green;	*/
}
#EingabefeldLiteratur {
	width:100%;
	font-size:0.6rem;
}

#FeldFuerSuchknopfLiteratur {
	width: auto;
	font-size:0.6rem;
	text-align:center;
	padding-left:3%;
	margin:0px;
	/* background-color: yellow; */
}

.SucheStartenKnopfLiteratur  {
	background-color: #d7d6d5;
	color:#000;
	font-size:0.6rem;					/* Bestimmt auch die Höhe der Suchbox */
	border: 0;
	border-radius:8px;
}

#FeldFuerSuchStatistikLiteratur  {
	width:40%;
	text-align:left;
	color:#FFF;
	font-weight:400;
	font-size:0.6rem;
	/* background-color: gray; */
}

#LiteraturTabelleMitSpalten{
	margin-left:5%;
	font-family:"Georgia";
	font-size:0.7rem;
	color:#FFF;
	overflow: auto;
}


.TabelleLiteraturTitelzeileBild {
	width:20%;
	color:#FFF;
}
.TabelleLiteraturTitelzeileAutor {
	width:20%;
	color:#FFF;
}
.TabelleLiteraturTitelzeileBuchtitel {
	width:20%;
	color:#FFF;
}
.TabelleLiteraturTitelzeileBeschreibung {
	/* width:20%;*/
	font-family:"Georgia";
	color:#FFF;
}
.TabelleLiteraturBildDiv {				/* Zeilen in der Tabelle 'Literatur' */
	display:block;
	font-size:0.8rem;
	color:#FFFFFF;
}
.TabelleLiteraturBildMobilegeraetDiv {				/* Zeilen in der Tabelle 'Literatur' */
	display:none;
}
.TabelleLiteraturBild {
	width:80%;
	height:auto;
	border:none;
}

#SuchePraezisierenLiteratur
{
	color:#FFF;
	font-size:0.8rem;	
	padding:0px;
	text-align:left;
}

/* ------------------------------------------------------------------------------------------- */
/* Links                                                                                       */
/* ------------------------------------------------------------------------------------------- */

/* Waagrechte Linie als Trennung zwischen den einzelnen Links */
.hrstyle3 {
	width:95%;
	text-align:left;
	margin-left:0%;
	border-top: 1px solid white;
}

.flex-container-titel-links {
  margin-left:10%; 
  display: flex;
  flex-direction:row;			/* Standard */
}

.imgwrap-links {
   width: 25%;					/* Grösse der Grafik */
   margin: auto;
}
.imgwrap-links img {
   flex: 1;
   width: 100%;
   max-width: 50%;		/* actual image width - derived from txtHint () -> optimal size = 50px ; txtHint-Breite = 2280 pixel : Entspricht 2.2%*/
   height: auto;		/* maintain aspect ratio*/
   margin: auto;		/* optional centering of image */
}

.column2-links {
	flex: 1;  /* Makes all columns evenly sized */
	/* padding: 10px; */ 
	color:#FFFFFF;
	text-align:left;
}

.ahref-links {
	font-family:"Georgia";
	font-size:0.6rem;
	color:#000000;			/* #773F36; */
	font-weight:bold;
}

/* Text zum Link */
h4 {
	/* margin-left:5%; */
	color:#000000;
	font-size:0.5rem;
	font-family:"Georgia";
	text-align:left;
	margin-left:0%;
	margin-right:1%;
	font-weight:normal;
}

.copyright {
	margin-left:10%;
	font-size:0.6rem;
	font-family:"Georgia";
	color:#773F36;
	font-weight:bold;
	margin-bottom:5%;
}

/* --------------- */
/* Kontaktformular */
/* --------------- */	

.flex-container-kontaktform {
  display: flex;
  flex-direction: row;
  margin-top:5%;
  margin-bottom:5%;
  margin-left:10%;
  justify-content: space-between;
  gap: 1%; /* Abstand zwischen den Bildern */
  height:10%;
  width:30%;
}

.flex-container-kontaktform img {
  width: 90%; /* Bilder haben die gleiche Breite */
  height: auto; /* Bilder behalten ihre Höhe */
}

#Kontaktform-text {
	color: #000000;
	font-family:"Georgia";
	font-size:0.6em;
	margin-left:10%;	
	margin-top:1%;
	text-align:left;
}

#Kontaktform-form {
	font-size:0.7rem;
	font-family:"Georgia";
	margin-left:10%;	
	margin-top:1%;
	text-align:left;
}

#Kontaktform-emailtext {
	font-family:"Georgia";
	font-size:0.8em;
}


} /* end Media query */



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

.HintergrundbildWeiss {
background:url(files/images/TitelbildWhitePortrait.jpg) no-repeat;
background-size:cover;	/* Resize the background image to cover the entire container */	/* Resize the background image to cover the entire container */
overflow-y:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}

.HintergrundbildTitelseite {
background:url(files/images/TitelbildTitelseiteLandscape.jpg) no-repeat top;
background-size:cover;
overflow-y:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}
.HintergrundbildLiteratur {
background: url(files/images/TitelbildLiteraturLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */	/* Resize the background image to cover the entire container */
overflow-y:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}
.HintergrundbildHistory {
background: url(files/images/TitelbildHistoryLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */	/* Resize the background image to cover the entire container */
overflow:hidden;		/* Keine vertikale Scrollbar über die ganze Bildschirmhöhe anzeigen */
}
.HintergrundbildMovies {
background: url(files/images/TitelbildMoviesLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */	/* Resize the background image to cover the entire container */
}
.HintergrundbildLinks {
background:url(files/images/TitelbildLinksLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */	/* Resize the background image to cover the entire container */
overflow-y:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}
.HintergrundbildAboutMe {
background: url(files/images/TitelbildAboutMeLandscape.jpg) no-repeat top;
background-size:cover;	/* Resize the background image to cover the entire container */	/* Resize the background image to cover the entire container */
overflow-y:hidden;			/* Vertikale Scrollbar über die ganze Bildschirmhöhe nicht anzeigen */
}

#Header {
	vertical-align:middle;
	width:100%;
}

/* ------------------------------------------------------------------------------------------- */
/* Titelzeile mit Sprachflaggen Titel-Schriftzug (Grafik) und Beschreibung zum Hintergrundbild */
/* ------------------------------------------------------------------------------------------- */

.flex-container-titel {
  display: flex;
}

.column1 {
  flex: 1;  /* Makes all columns evenly sized */
  padding: 1%;
}
.column2 {
  flex: 1;  /* Makes all columns evenly sized */
  padding: 1%;
  text-align: center;  /* Optional: Center content within columns */
}
.column3 {
  flex: 1;  /* Makes all columns evenly sized */
  padding: 1%;
  text-align: center;  /* Optional: Center content within columns */
}

.imgwrap {
   width: 50%; /*or whatever you choose*/
   margin: auto;
}
.imgwrap img {
   display: block;
   width: 100%;
   max-width: 500px; /*actual image width*/
   height: auto; /* maintain aspect ratio*/
   margin: auto; /*optional centering of image*/
}

.flags_image_size {
	width:8%;
	height:auto;
}

/* Beschreibung zum Hintergrundbild */
h1 {
	width:80%;
	/* margin-left:5%; */
	color:#000;
	font-weight:400;
	font-size:1.0rem;
	font-family:"Georgia";
	font-weight: bold;
	text-align:center;
	margin-left:10%;
	margin-right:1%;
}

/* ------------------- */
/*      Menubar        */
/* ------------------- */

#Navibar {
	padding-left: 1%;			/* Abstand vom linken Rand */
	background: #773F36;
}
.MenuTiteltd {
	text-align:center;
}
.MenuTitel {
	color: #FFFFFF;
	font-size:1.2rem;
	text-decoration: none;		/* Kein 'underline' bei den Menüs */
}

/* ----------------------------------------------------- */
/* Hauptseite "index.php" und Unterseiten der Hauptseite */
/* ----------------------------------------------------- */

/* https://publisher.ch/2020/07/05/flexbox-ausrichten-von-elementen-im-web/ */
.flex-container {
	display: flex;
	vertical-align:top;
	flex-direction:row;				/* Ausrichtung der Elemente auf der Hauptachse */
	justify-content: flex-start;	/* Raum zwischen und um die Elemente: Von links nach rechts */
	flex-wrap: wrap;
	overflow:auto;

	/* Angaben für den Text rechts neben den Bildern */
	color:#FFFFFF;
	font-size:1.5rem;
	font-family:"Georgia";
	/*font-weight: bold; */
	text-align:left;
	margin-left:2.5%; 
	align-items: center;			/* Vertically center the items (and the text right to the images */
}

.flex-item {
  text-align: left;
  /*line-height: 10%;*/
  flex-basis:25%;					/* It sets the size of the content box unless otherwise set with box-sizing */
  vertical-align:top;				/* Hat keine Wirkung */
  margin-bottom:1%;					/* Vertikaler Abstand zwischen den Bildern */
}

.flex-item_image {
  width: 50%;						/* Breite des Bildes an die Breite des div anpassen */
  height: 50%;						/* Höhe des Bildes an die Höhe des div anpassen */
}

#ImageBorderRadius {
  border-radius: 20%;
  box-shadow: 5px -5px 15px 0px  #C9C7C7;
  opacity: 80%;
}

/* Haupttitel "Native Americans in den Vereinigten Staaten */
h2 {
	width:90%;
	margin-left:5%;
	color:#FFFFFF;
	font-weight:400;
	font-size:1.5rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	padding: 0px;
	margin-bottom:0%;
	background-color:#773F36;
	text-align:center;
}

/* Beginn Lauftext */
/* https://stackoverflow.com/questions/45847392/pure-css-continuous-horizontal-text-scroll-without-break */
.marquee {
	width:90%;					/* Startpunkt rechts */
	margin-left: 5%;
	color:yellow;
	font-weight:400;
	font-size:1.5rem;
	font-family:"Georgia";
	padding: 0px;
	margin-bottom:0%;
    white-space: nowrap;
    overflow: hidden;
    /*position: absolute;*/
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 25s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
/* Ende Lauftext */

.href1 {
	text-decoration: underline;
	color:red;
}

/* Haupttitel schwarz */
h3 {
	width:90%;
	/* margin-left:5%; */
	color:#000;
	font-weight:400;
	font-size:1.5rem;
	font-family:"Georgia";
	font-weight: bold;
	text-align:left;
	margin-left:1%;
	margin-right:1%;
}

/* Text neben dem Untertitel, weiss */
h5 {
	color:#fff;
	font-weight:400;
	font-size:1.2rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	text-align:left;
	margin-left:2%;
}

/* Text nach dem Untertitel, schwarz */
h6 {
	color:#000;
	font-weight:400;
	font-size:1.2rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	text-align:left;
	margin-left:1%;
	padding-right:1px;
	/* padding-left:1%; */
}
/* Überschriften für Kriege */
h7 {
	color: #bf533d;
	font-weight: bold;
	font-size:1.5rem;
	font-family:"Georgia";
	text-align:left;
	margin-top:0%;
	margin-left:0%;
	padding-right:1px;
	vertical-align: top;
}

/* Photo credits, schwarz */
h9 {
	color:#000000;
	font-weight:400;
	font-size:0.6rem;
	font-family:"Georgia";
	/* font-weight: bold; */
	text-align:left;
	margin-left:0%;
}


/* Waagrechte Linie als Trennung zwischen den einzelnen Abschnitten */
.hrstyle1 {
	border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
	margin-left:30%;
	width:40%;
}

/* Bild links mit Fliesstext rechts */
.imagelefttextright {
	font-size:0.7rem;
	font-family:"Georgia";
	float:left;
	padding-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	width:25%;
	height:25%;
}

/* Bild rechts mit Fliesstext links */
.imagerighttextleft {
	font-size:0.7rem;
	font-family:"Georgia";
	float:right;
	padding-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	width:25%;
	height:25%;
}
/* Bild rechts mit Fliesstext links */			/* Nur bei 'Desktop' werden zwei Bilder rechts nacheinander dargestellt, auf einem iPhone wird dieses Bild blockiert weil zu wenig Platz */
.imagerighttextleft2 {
	display:block;
	font-size:0.7rem;
	font-family:"Georgia";
	float:right;
	padding-left:1%;
	margin-right:1%;
	margin-bottom:1%;
	width:25%;
	height:25%;
}

/* Bild in der Mitte zentriert */
.imagecentered {
	font-size:0.7rem;
	font-family:"Georgia";
	text-align:center;
	margin-left:25%;
	width:50%;
	height:50%;
}

.TabelleHistoryAlleSpalten {
	font-family:"Georgia";
	font-size:1rem;
}
/* Unterhalb des Bildes wird die Quelleninformation zum Bild angezeigt */
.TabelleHistoryImageSourceOfOrigin {
	font-size:14px;
	border-top-style:hidden;
}

div.transbox {
    margin: 1%;
	width:50%;
    background-color:#DDD;
    /* border: 1px solid black; */
    /* opacity: 0.4; */
    /* filter: alpha(opacity=60); /* For IE8 and earlier */
}
.MyMoviesText {
	border: 1px solid #000000;
	color:#000;
	font-weight:400;
	font-size:1rem;
	width:50%;			/* Zentrieren in der Mitte des div */
	margin: auto;		/* Zentrieren in der Mitte des div */
	margin-top:2%;
	font-family:"Courier New", Courier, monospace;
	background-color:#FFF;
	font-weight: bold;
}

.YoutubePlayer {
	border: 1px solid #000000;
	color:#000;
	position: absolute;
    height: 40%;
	width:40%;
	margin-top:5%;
	margin-left:30%;
	font-family:"Courier New", Courier, monospace;
	background-color:#FFF;
	font-weight: bold;
}
	
/* ------- */
/* History */
/* ------- */

#SuchzeileHistory {
	margin-left:2.5%;
	height:auto;
	text-align:left;	
}
#FeldFuerSuchfeldHistory {
	height:auto;
	margin:0px;
	text-align:left;
	width:20%;
	font-size:0.5rem;
}
#EingabefeldHistory {
	width:100%;
	margin-top:0px;
	font-family:"Georgia";
	font-size:1rem;				/* Schriftgrösse der Selektionsboxen */
	font-weight:normal;
	color:black;
	border-radius:3px;
	background-color:#FFFACD;
}
#FeldFuerSuchknopfHistory {
	width: 10%;
	font-size:1rem;
	text-align:left;
	padding-left:1%;
	/* background-color: yellow; */
}
#SucheStartenKnopfHistory  {
	border: 0;
	padding: 0;
	margin-left:0px;
	background-color:#6F0;
	font-size:2rem;
}
#AnzeigeMehrfachMarkerHistory
{
	margin-left:48px;
	height:25px;			/* Gleich wie '#SuchzeileHistory' */
	width:90%;				/* 100% */
}
#FeldFuerShowHideSelectionBoxesHistory {
	height:auto;
	margin:0px;
	width:5%;
	text-align:right;
	font-size:0.8rem;		
}

/* History - Auswahlboxen */

#Auswahlboxen {
	margin-left:2.5%;
	float:left;
	width:95%;
	padding:0;
	margin-right:2.5%;
}
#TabelleAuswahlboxenHistory {
	margin-bottom: 1%;			/* Abstand zwischen der untersten Auswahlbox und dem Beginn der Tabelle mit den Datensätzen */
}
#HintergrundfarbeSelektionsboxen {

}
.Box {
	font-size:1rem;		/* Schriftgrösse der Selektionsboxen */
}
	
/* History - Tabelle mit den Datensätzen */

#txtHint {
	overflow:auto;
	height: 88vh; /* 100vh represents the full height of the viewport, regardless of the content on the page ; 95% because sometimes there is a status bar at the bottom */
	margin-top:0px;
	margin-left:2.5%;
	width:95%;
	float:left;
	font-family:"Georgia";
	font-size:0.8rem;
	color:#FFFFFF;
}
#txtHintHistory {
	overflow:auto;
	overflow-x: hidden;		/* Verhindert die horizontale Verschiebung der ganzen "history"-Tabelle */	
	margin-top:0px;
	margin-left:2.5%;
	width:95%;
	float:left;
	font-size:0.8rem;
	color:#FFFFFF;
	height: 95vh; /* 100vh represents the full height of the viewport, regardless of the content on the page ; 95% because sometimes there is a status bar at the bottom */
}
#txtHintContact {
	overflow: auto;
	height: 80vh; /* 100vh represents the full height of the viewport, regardless of the content on the page ; 95% because sometimes there is a status bar at the bottom */
	margin-top:0px;
	margin-left:2.5%;
	width:95%;
	float:left;
	font-family:"Georgia";
	font-size:0.8rem;
	color:#FFFFFF;
}

.inputboxbookreference {	/* Stellt sicher, dass die Checkbox in der Spalten mit den Literaturhinweisen nicht angezeigt wird */
  position: absolute;
  left: -999em;
}

#LinksImEreignistext {				/* Für www-Hyperlinks */
	color:#FFD700;					/* Gleich wie die Farbe des Datums */
	font-weight: normal;
	text-decoration: underline;
}

#DBLinksImEreignistext {			/* Für DB-Links mit einer Abfrage in die eigene mySQL History-Datenbank */
	color:#FFD700;					/* Gleich wie die Farbe des Datums */
	font-weight: normal;
	text-decoration: underline;
}

	
/* --------------- */
/* Kontaktformular */
/* --------------- */	

.flex-container-kontaktform {
  display: flex;
  flex-direction: row;
  margin-top:2%;
  margin-bottom:5%;
  margin-left:10%;
  justify-content: space-between;
  gap: 1%; /* Abstand zwischen den Bildern */
  height:10%;
  width:30%;
}

.flex-container-kontaktform img {
  width: auto; /* Bilder haben die gleiche Breite */
  height: 150%; /* Bilder behalten ihre Höhe */
}

#Kontaktform-text {
	color: #000000;
	font-family:"Georgia";
	font-size:1.6em;
	margin-left:10%;	
	margin-top:1%;
	text-align:left;
}

#Kontaktform-form {
	font-size:0.8rem;
	font-family:"Georgia";
	margin-left:10%;	
	margin-top:1%;
	text-align:left;
}

#Kontaktform-emailtext {
	font-family:"Georgia";
	font-size:1.2em;
}


/* ------------------------------------------------------------------------------------------- */
/* Links                                                                                       */
/* ------------------------------------------------------------------------------------------- */

/* Waagrechte Linie als Trennung zwischen den einzelnen Links */
.hrstyle3 {
	width:95%;
	text-align:left;
	margin-left:0%;
	border-top: 1px solid white;
}

.flex-container-titel-links {
  margin-top:1%;
  margin-left:10%; 
  display: flex;
  flex-direction:row;			/* Standard */
}

.imgwrap-links {
   width: 5%;					/* Grösse der Grafik */
   margin: auto;
}
.imgwrap-links img {
   flex: 1;
   width: 100%;
   max-width: 50%;		/* actual image width - derived from txtHint () -> optimal size = 50px ; txtHint-Breite = 2280 pixel : Entspricht 2.2%*/
   height: auto;		/* maintain aspect ratio*/
   margin: auto;		/*optional centering of image*/
}

.column2-links {
	flex: 1;  /* Makes all columns evenly sized */
	/* padding: 10px; */ 
	color:#FFFFFF;
	text-align:left;
}

.ahref-links {
	font-family:"Georgia";
	font-size:1.2rem;
	color:#000000;			/*#773F36; */
	font-weight:bold;
	text-decoration: none;
}

/* Text zum Link */
h4 {
	/* margin-left:5%; */
	color:#000000;
	font-size:1rem;
	font-family:"Georgia";
	text-align:left;
	margin-left:0%;
	margin-right:1%;
	font-weight:normal;
}

.copyright {
	margin-left:10%;
	font-size:1.0rem;
	font-family:"Georgia";
	color:#773F36;
	font-weight:bold;
	margin-bottom:5%;
}

/* --------- */
/* Literatur */
/* --------- */

#SuchzeileLiteratur {		/* Suchzeile : */
	width:100%;
	margin-left:5%;			/* Abstand Suchzeile von links */
	text-align:left;
}

#FeldFuerSuchfeldLiteratur {
	text-align:left;
	width:50%;
	height:100%;
	/* background-color: green;	*/
}
#EingabefeldLiteratur {
	width:100%;
	font-size:1rem;
}

#FeldFuerSuchknopfLiteratur {
	width: 10%;
	font-size:0.8rem;
	text-align:left;
	padding-left:1%;
	/* background-color: yellow; */
}

.SucheStartenKnopfLiteratur  {
	background-color: #d7d6d5;
	color:#000;
	font-size:1rem;					/* Bestimmt auch die Höhe der Suchbox */
	border: 0;
	border-radius:8px;
}

#FeldFuerSuchStatistikLiteratur  {
	width:40%;
	text-align:left;
	color:#FFF;
	font-weight:400;
	font-size:1rem;
	/* background-color: gray; */
}

#LiteraturTabelleMitSpalten{
	margin-left:5%;
	font-size:1rem;
	overflow: auto;
}


.TabelleLiteraturTitelzeileBild {
	width:10%;
	color:#FFF;
}
.TabelleLiteraturTitelzeileAutor {
	font-family:"Georgia";
	width:20%;
	color:#FFF;
}
.TabelleLiteraturTitelzeileBuchtitel {
	font-family:"Georgia";
	width:20%;
	color:#FFF;
}
.TabelleLiteraturTitelzeileBeschreibung {
	/* width:20%;*/
	font-family:"Georgia";
	color:#FFF;
}
.TabelleLiteraturBildDiv {				/* Zeilen in der Tabelle 'Literatur' */
	display:block;
	font-size:0.8rem;
	color:#FFFFFF;
}
.TabelleLiteraturBildMobilegeraetDiv {				/* Zeilen in der Tabelle 'Literatur' */
	display:none;
}
.TabelleLiteraturBild {
	height:auto;
	border:none;
}

#SuchePraezisierenLiteratur
{
	color:#FFF;
	font-size:0.8rem;	
	padding:0px;
	text-align:left;
}

} /* end media query */