/*
 * ToDo: keine Ahnung, warum zwischen verticals und dann vor der Bottomline abstände auftauchen...
 *
 */

/* Hauptebene. Sie ummantelt alles */
div.plain{
  position: absolute;
  margin: 0;
  top: 10px; 
  left: 10px;
  width: 1230px;
  height: 667px;
  background-color: #100000;
}
div.headlineSpace {
	position: static;
	margin: 0;
	display: inline-block;
	height: 60px;
	width: 1000px;
	padding-left: 80px;
	padding-right: 80px;
	/* background-color: #666666;/* Marker, wenn auf Fehlersuche */
}
div.headlineSubmenuSpace {
	position: static;
	margin: 0;
	display: inline-block;
	height: 30px;
	width: 1000px;
	padding-left: 80px;
	padding-right: 80px;
	/* background-color: #666666;/* Marker, wenn auf Fehlersuche */
}
a {	color: darkgrey;}

div.bottomlineSpace {
	position: static;
	height: 80px;
	width: 1230px;
	margin-left: 0px;
	margin-right: 0px;
	/* background-color: #333366; /* Marker, wenn auf Fehlersuche */
}

div.horizontalBreak {
	position: static;
	display: inline-block;
	margin: 0;
	height: 10px;
	width: 1230px;
	/* background-color: #663333;/* Marker, wenn auf Fehlersuche */
}

div.verticalBreak {
	position: static;
	display: inline-block;
	height: 489px;
	width: 10px;
	/*background-color: #663333;/* Marker, wenn auf Fehlersuche */
}
/* Linke Seite bei der Anzeige der Felder */
div.blockLeft {
  position: static;
  /*margin-left: -5px;
  margin-right: -5px;*/
	display: inline-block;
  width: 489px;
  height: 489px;
  /* background-color: #008700; /* Marker, wenn auf Fehlersuche */
}

/* Skalierung der Bilder in der Anzeige Links, damit sie in die Felder passen. 
 * die Bilder werden "verkleinert", damit sie dann beim hover nicht verpixelt wirken.
*/
div.imageHoldHorizontal img {
  width: 100px; 
  height: 72px; 
}
div.imageHoldVertical img {
  width: 72px; 
  height: 110px; 
}
img.imageHoldVertical {
  width: 72px; 
  height: 110px; 
  border: 0;
}
img.imageHoldHorizontal  {
  width: 100px; 
  height: 72px; 
  border: 0;
}
/* Vergößerung der Detailbilder aus dem Raster Links.
 */
img.imageHoldHorizontal:hover {
  position: absolute;
  /* Die Margins werden etwas verschoben, damit das Bild wie eine vergrößerung wirkt.
	 Basis ist die 
  */
  z-index: 99;
  margin-left: -55px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -85px;  /* hier genau so */
  width: 330px;       /* die weite beim vergrößern */
  height: 216px;      /* die höhe beim vergrößern */
}
img.imageHoldVertical:hover {
  position: absolute;
  /* Die Margins werden etwas verschoben, damit das Bild wie eine vergrößerung wirkt.
	 Basis ist die 
  */
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -55px;  /* hier genau so */
  width: 216px;       /* die weite beim vergrößern */
  height: 330px;      /* die höhe beim vergrößern */
}
/* Die Rechte Seite für die Detailanzeige und Detailsteuerung. *
div.imageDetail {
  position: absolute;
  top: 110px;
  left: 500px;
   width: 495px;
  height: 500px;
  background-color: #000087; /* Marker, wenn auf Fehlersuche *
 }*/

div.PictFrame {
  position: static;
   /*margin-left: -5px;
  margin-right: -5px;*/
	display: inline-block;
	/*width: 489px;
	height: 489px;*/
	background-color: #000018;/* Marker, wenn auf Fehlersuche */
 }
 .BildMitInfo {
	position: relative;
 	width: 489px;
	height: 489px;
	font-family: courier;
	font-size: 14px;
}

.BildMitInfo img {
Transition: all 4s;
}

 .BildMitInfo span {
    background-color: silver;
    background-color: hsla(0, 0%, 100%, 0.5);
    position: absolute;
	/*margin-left: -489px;*/
	left: 0;
    bottom: 0;
    width: 100%;
    line-height: 2em;
    text-align: center;
	color: black;
}

 div.PictFrame img.PictInFrameHorizontal {
	width: 489px;
	height: auto;
 }
 
 div.PictFrame img.PictInFrameVertical {
	height: 489px;
	width: auto;
 }
 
div.ArrowBack{
  position: relative;
  /*margin-left: -5px;
  margin-right: -5px;*/
	display: inline-block;
  width: 80px;
  height: 489px;
  padding-top: 0px;
  background-color: #000036;
}
div.ArrowBack  img{
  position: absolute;
  display: block;
  left: 15px;
  top: 240px;
}
div.ArrowForth {
  position: relative;
  /*margin-left: -5px;
  margin-right: -5px;*/
	display: inline-block;
  width: 80px;
  height: 489px;
  padding-top: 0px;
  background-color: #000036;
}
div.ArrowForth  img{
   position: absolute;
  display: block;
  left: 15px;
  top: 240px;
}
/* Zum absoluten Anzeige. Flackert blos ziemlich...
div.imageHold img:hover {
  position: absolute;
  top: 100px; /* die hälfte des größenunterschiedes der bilder * /
  left: 500px;  /* hier genau so * /
  width: 400px;       /* die weite beim vergrößern * /
  height: 260px;      /* die höhe beim vergrößern * /
}

div.imageHold {
  padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt * /
  /* andere formatierung, z.B. zentrieren/etc: * /
  /* .... * /
}

div.imageHold div {
  float: left;
  width: 230px;
  height: 150px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen * /
  margin-left: 50px;
}
*/
#mytable {
	/*width: 600px;
	margin: auto;*/
}

#mytable td.normalo { 
	height:120px; 
	width: 110px;
	font-size: 12px;
	font-weight:bold;
	font-family :courier;
	padding-left:5px;
	padding-right:5px;
background-color: silver; 
color: white;
transition: color 3s, background-color 3s;

}

/*	-ms-hyphens: auto;
	-webkit-hyphens: auto;*/
	
#mytable td.normalo:hover{ 
background-color: blue; 
color: red;
}

#FarbText {
	Transition: color 3s;
}

table a:link { text-decoration: none; }
table a:visited{ text-decoration: none; color: black; }
table a:active{ text-decoration: none; }
table a:hover{ color: gold; }

div.enormous {
	font-size: 48px;
	/*display: table-cell;*/
	padding-left:auto;
	padding-right:auto;
}
td.FId11 {
	height:120px; 
	width: 110px;
	font-family :Georgia;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
}


td.FId12 {
	height:120px; 
	width: 110px;
	font-family :Georgia;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
	
	font-weight: bold;
}
td.FId13 {
	height:120px; 
	width: 110px;
	font-family :Garamond;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
}
td.FId14 {
	height:120px; 
	width: 110px;
	font-family :Sans-serif;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
}

td.FId21 {
	height:120px; 
	width: 110px;
	font-family :Arial;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
		
	font-weight: bold;
}

td.FId22 {
	height:120px; 
	width: 110px;
	font-family :Calibri;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;

}
td.FId23 {
	height:120px; 
	width: 110px;
	font-family :Verdana;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
}
td.FId24 {
	height:120px; 
	width: 110px;
	font-family :Fraktur;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
}

td.FId31 {
	height:120px; 
	width: 110px;
	font-family :Times;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;

}

td.FId32 {
	height:120px; 
	width: 110px;
	font-family :Monospace;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;

}
td.FId33 {
	height:120px; 
	width: 110px;
	font-family :Roman;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
}
td.FId34 {
	height:120px; 
	width: 110px;
	font-family :Palatino;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
			
	font-weight: bold;
}
td.FId41 {
	height:120px; 
	width: 110px;
	font-family :Impact;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;

}

td.FId42 {
	height:120px; 
	width: 110px;
	font-family :Courier;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;

}
td.FId43 {
	height:120px; 
	width: 110px;
	font-family :Decorative;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
	
	font-weight: bold;
}
td.FId44 {
	height:120px; 
	width: 110px;
	font-family :Script;
	font-size: 14px;
	padding-left:5px;
	padding-right:5px;
	background-color: #000018;
}

/* Für virtuelle Ausstellung */
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(_still_alpes.jpg) no-repeat;
    background-size: cover; 
}

@media screen and (max-device-width: 800px) {
    html {
         
         /*background: url(_still_alpes.jpg) #000 no-repeat center center fixed;*/
    }
    #bgvid {
        display: none;
    }
}

/* Beispiele von https://codepen.io/dudleystorey/pen/knqyK und 
*/
video#bgvid {
    transition: 1s opacity;
}
.stopfade { opacity: .5; }

#vidZone button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#vidZone button:hover { 
   background: rgba(0,0,0,0.5);
}

/* Zentrale Darstellung für die virtuelle Ausstellung / Detailanzeige und Detailsteuerung. */
div.virtualDisp {
  position: absolute;
  top: 50px;
  left: 50px;
   width: 750px;
  height: 600px;
  background-color: #000087; /* Marker, wenn auf Fehlersuche */
 background: rgba(255,255,255,0.23);
 }

 div.virtualBack{
  position: relative;
  /*margin-left: -5px;
  margin-right: -5px;*/
	display: inline-block;
  width: 80px;
  height: 489px;
  padding-top: 0px;
 /* background-color: #003636;*/
    background: rgba(0,80,80,0.23);

}
div.virtualBack  img{
  position: absolute;
  display: block;
  left: 15px;
  top: 240px;
}
 div.virtualForth{
  position: relative;
  /*margin-left: -5px;
  margin-right: -5px;*/
	display: inline-block;
  width: 80px;
  height: 489px;
  padding-top: 0px;
 /* background-color: #003636;*/
    background: rgba(0,80,80,0.23);

}
div.virtualForth  img{
  position: absolute;
  display: block;
  left: 15px;
  top: 240px;
}

div.virtualPictFrame {
  position: static;
   /*margin-left: -5px;
  margin-right: -5px;*/
	display: inline-block;
	width: 495px;
	height: 489px;
   background: rgba(0,0,18,0.5);

	/*background-color: #000018; Marker, wenn auf Fehlersuche */
 }
 
 div.virtualPictFrame img.PictInFrameHorizontal {
	width: 489px;
	height: auto;
 }
 
 div.virtualPictFrame img.PictInFrameVertical {
	height: 489px;
	width: auto;
 }
 
 /* Karte */
 div.mapping {
	position: absolute;
	top: 550px;
	left: 1000px;
 }
 
 div.mapping  img{
	width:300px;
	heigth:200px;
	background: rgba(255,255,255,0.5);
 }
 
 div.TextArea {
	color: #d0d0dd;
	font-family: courier;
	position: static;
  margin-left: 150px;
  margin-right: 50px;*/
	display: inline-block;
  width: 700px;
  height: auto;
 } 
 
 div.BlogEinEintrag {
 }