/*Version 030120*/	
body {
 font-family: sans-serif;
 font-style:normal;
 color: black;
 padding: 8em 0 3em;
 margin: 0 auto;
 max-width:20em;
 display: flex;
 flex-flow: row wrap;
 transition: all 0.5s ease;
}

#rechts {
    float: right;
    width: 7%;
    height: 7%;
    padding: 7px;
    margin-left: 20px;
  } 

nav, nav a, main, article, section, aside {
 border-radius: 0px 0.5em 0.5em;
 border: 1px solid;
 padding: 8px;
 margin: 8px;
}

header {
 position: fixed;
 top: 0px;
 left: 0px; 
 right: 0px;
 text-align: center;
 padding: 1px;  
 background: #F1F3F4;
 border-bottom: 1px solid #d5d5d5;
}

header img {
 width: 13em;
 margin-right: 50px;
 float: left;
}

header p {
 color: blue;
 font-size: 1.8em;
 padding: 1px 1px 0  5.5em;
 text-align: left;
}
			
.nav {
 position: relative;
 padding-top: 5em;	
 font-size: 0.91em;
 float: left; 
 width: 8em;
 min-width:8em;
 padding: 7px;
 background: #fffbf0;
 border-color: #e7c157;
}


nav ul {
 padding: 0;
}

nav li {
 list-style: none;
 width: auto;
 margin: 0; 
 padding: 0.05em;
}

nav a {
 display: block;
 padding: 0.2em 10px;
 font-weight: bold;
 text-decoration: none;
 background-color: #e7c157;
 color: #333;
}

nav ul a:hover,
nav ul a:active  {
 color: #fffbf0; 
 background-color: #dfac20;;
}

main {
 display: block;
 min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}

article {
 background: #ffede0;
 border-color: #df6c20;
 margin-right: 15em;
}

article p {
 margin-bottom: 10em;
}

.thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  transition: all 0.5s ease;
  }

aside {
 position:absolute;
 left:0.5em;
 top: 75px;
 font-size: 0.85em;
 background: #ebf5d7;
 border-color: #8db243;
 float: left; 
 width: 18em;
 display:flex;
 box-shadow: 2px 5px 10px black; 
 transition: all 0.5s ease;
 z-index:9999;
} 

aside p {
 font-size: 0.85em;
}

.noselect {
font-size: 0.85em;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

footer {
 position: fixed;
 padding: 10px;
 bottom:0;
 left: 0;
 right: 0;
 background: #F1F3F4;
 border-top: 1px solid #d5d5d5;
 min-height:5%;
 max-height:5%;
}

footer p {
 float: right; 
 margin: 0;
}

.line-separator {
 height:1px;
 background:#717171;
 border-bottom:0.6px solid blue;
 box-shadow: 1px 3px 5px black;
}


.tg  {border-collapse:separate;border-spacing:1px;border-color:grey;position:absolute;left:0%;top:0%;width:70%;min-width:70%;height:85%;align-items: center;justify-content: center;text-align:center;transform: rotate(0deg) translate(0px, 0px);transition: all 0.5s ease;overflow-x:auto;box-shadow: 2px 5px 10px black;
  /* background-image: url("photographer.jpg");  The image used */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
.tg td{font-family:sans-serif;padding:20px 19px;/*width:10%;*/border-style:dotted;border-width:1px;word-break:normal;border-color:grey;color:#594F4F;background-color:transparent;word-wrap: break-word;}
.tg th{font-family:sans-serif;font-weight:normal;padding:20px 19px;width:10%;border-style:dotted;border-width:1px;word-break:normal;border-color:grey;color:#493F3F;background-color:white;}
.tg .tg-g5xs{text-align:center;vertical-align:middle;align-items: center;justify-content:center;text-align:center;transition: all 0.5s ease;}
.tg .tg-baqh{vertical-align:middle;align-items: center;justify-content:center;text-align:center;transition: all 0.5s ease;}
/*.tg tr:hover {background-color: #f5f5f5;opacity:0.7;}*/

.Kreis, .Oval, .Rechteck, .Quadrat, .Hintergrund, .Links, .Rechts, .Oben, .Unten {
 font-family: sans-serif;
  position:relative;
  float:left;
  border: 1px solid;
  margin: 1px;
  padding: 3px;
  display:flex;
  align-items: center;
  justify-content: center;
  resize:both;
  text-align:center;
  font-weight:bold;
  font-size: 1.4em;
  background-color: white;
  color:black;
  box-shadow: 1px 4px 8px darkgrey;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
 hyphens: auto; 
 hyphenate-limit-chars: auto 5;
 hyphenate-limit-lines: 2;
 word-break: normal;
 word-wrap: normal;
  transition: all 0.5s ease;
  z-index: 99999;
  transform: rotate(0deg);
}

.Kreis:hover, .Oval:hover, .Rechteck:hover, .Quadrat:hover, .Hintergrund:hover, .Links:hover, .Rechts:hover, .Oben:hover, .Unten:hover {
 box-shadow: 2px 5px 10px black;
}

.Kreis
 {
  deg:deg;
  width: 6.5em;
  height: 6.5em;
  border-radius:55%;
  }

.Oval
 {
  deg:deg;
  width: 8.0em;
  height: 4.5em;
  border-radius:55%;
 }  

  

.Rechteck
 {
  deg:deg;
  width: 8.5em;
  height: 4.5em;
  border: 1px solid;
  position:relative;
 }  

.Quadrat
 {
  deg:deg;
  width: 6.5em;
  height: 6.5em;
  border: 1px solid;
 }  


.Links, .Rechts, .Oben, .Unten {
background-color: transparent;
border:none;
box-shadow:none;
}

.Rechts {
  deg:deg;
  width: 0; 
  height: 0; 
  border-top: 2em solid transparent;
  border-bottom: 2em solid transparent;
  border-left: 2.5em solid grey;
}

.Links {
  deg:deg;
  width: 0; 
  height: 0; 
  border-top: 2em solid transparent;
  border-bottom: 2em solid transparent; 
  border-right: 2.5em solid grey;
}

.Oben {
  deg:deg;
  width: 0; 
  height: 0; 
  border-left: 2em solid transparent;
  border-right: 2em solid transparent; 
  border-bottom: 2.5em solid grey;
}

.Unten {
  deg:deg;
  width: 0; 
  height: 0; 
  border-left: 2em solid transparent;
  border-right: 2em solid transparent; 
  border-top: 2.5em solid grey;
}

.Hintergrund
 {
  deg:deg;
  border: none;
  text-align:center;
  font-weight:bold;
  font-size: 1.8em;
  color:darkgrey;
  align-items: center;
  justify-content: center;
  text-align:center;
  background-color:transparent;
  border:none;
  box-shadow:none;
  z-index: 9;
  } 

  
.Sub
 {
  position:absolute; 
  deg:deg;
  width: 7em;
  height: 7em;
  border-radius:55%;
  border: 1px solid;
   margin: 1px;
  display:flex;
  align-items: center;
  justify-content: center;
  resize:both;
  text-align:center;
  color:black;
  background-color:blue;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  z-index: 99;
 }  
 
 
.Ring
 {
  position:absolute; 
  deg:deg;
  width: 6.5em;
  height: 6.5em;
  border-radius:55%;
  border: 1px solid;
   margin: 1px;
  display:flex;
  align-items: center;
  justify-content: center;
  resize:both;
  text-align:center;
  color:black;
  z-index: 99;
  background-image: url("photographer.jpg"); /* The image used */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
 } 
  
.dropbox {
position:absolute;
top:80px;
left:18em;
max-width: 10%;
min-width: 10%;
min-height:80%;
display:inline;
align-items: center;
justify-content: center;
text-align:center;
border: 1px grey dotted;

}

.dropbox2 {
position:relativ;
float:right;

max-width: 10%;
min-width: 10%;
min-height:80%;
display:inline;
align-items: center;
justify-content: center;
text-align:center;
border: 1px grey dotted;

}

.dropboxY {
 position: absolute;
 float: left;
 padding: 10px;
 bottom:0;
 left: 0;
 right: 0;
 border: 1px grey dotted
}

.k0, .k1, .k1x, .k1y, .k1z {
position: fixed;
deg:deg;
top:0%;
left:0%;
width: 20em;
height: 20em;
border-radius:55%;
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
border: 1px grey dotted;
}

.k0, .k1 {
border: 1px solid;

margin: 20px;
background: linear-gradient(45deg, blue, white); 
display:flex;
align-items: center;
justify-content: center;
flex-flow:column nowrap;
text-align:center;
/*opacity:0.8;*/
transform: translate(0px, 0px);
border: 1px grey hidden;
box-shadow: 2px 5px 10px black;
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */

}

.k1x, .k1y, .k1z {

margin: 20px;
display:flex;
align-items: center;
justify-content: center;
flex-flow:column nowrap;
text-align:center;
transform: translate(0px, 0px) rotate(0deg);
border: 1px grey dotted;
}

.k1z {
 border:none;
}