body{ margin: 0; font-family: Arial; overflow: hidden; }
div{ position: absolute; border: none; cursor: default; }
samp{ font-size: 1.7em; margin: 0 1em; }
label{ cursor: pointer; }
label:hover .img1{
  background-color: #739D73;
  box-shadow: 0 0 0.5em #739D73; /* Schatten */
  transition: background-color, box-shadow 0.2s ease-in-out;
}
label:hover .img2{
  background-color: #aaa;
  box-shadow: 0 0 0.5em #888; /* Schatten */
  transition: background-color, box-shadow 0.2s ease-in-out;
}
input{ outline: none; }
input[type='text']{ 
  font: normal normal 1.2em fantasy;
  height: 1.4em;
  width: 12em;
  padding: 0 0.2em; 
  margin: 0;
  background-color: #fff;
  transition: background-color 0.2s ease-in-out;
  box-shadow: inset 0.06em 0.06em 0.03em #aaa; /* innerer Schatten */
  border: thin solid #555;
  border-radius: 0.1em;
  cursor: pointer;
}
input[type='text']:focus{ 
  background-color: #ff8;
  box-shadow: inset 0.06em 0.06em 0.03em #aaa;
}
input[type='button']{ 
  font: normal bolder 1.4em fantasy;
  height: 2em;
  width: 7em;
  margin: 0 0.6em;
  background-color: #CEC9BA;
  border-color:#fff #000 #000 #fff;
  border-style: outset; border-width: 0.05em;
  border-radius: 0.1em;
  box-shadow: 0.06em 0.06em 0.03em #555; /* Schatten */
  cursor: pointer;
}
input[type="button"]:hover,input[type="button"]:focus{
  background-color: #CEC9a5;
  border: 0.05em outset #55554a;
}
input[type='button']:active{
  background-color: #CEC991;
  border: 0.05em ridge #55554a;
}
td{
  text-align: center;
}
.div0{ color: #cc5; }
.div1{ 
  font: normal bolder 5em fantasy;
  height: 1em;
  margin-top: -0.5em;
  width: 6em;
  margin-left: -3em;
  top: 50%;
  left: 50%;
  text-align: center;
  animation: perspect 6s infinite linear 
}
@keyframes perspect {
   0% {transform:perspective(300px) rotateY(0deg)}
   25% {transform:perspective(300px) rotateY(90deg)}
   50% {transform:perspective(300px) rotateY(180deg)}
   75% {transform:perspective(300px) rotateY(270deg)}
   100% {transform:perspective(300px) rotateY(360deg)}
}
.div2{
  font: normal bolder 1em fantasy;
  height: 11.5em;
  margin-top: -5em;
  width: 26em;
  margin-left: -13em;
  top: 50%;
  left: 50%;
  text-align: left; 
  background-color: #ddd; 
  border-radius: 0.2em; 
  box-shadow: 0.1em 0.1em 0.06em #fff inset, -0.1em -0.1em 0.1em #444 inset, 0.2em 0.2em 1.5em 0.8em #666; 
}
.div3{
  font: normal bolder 1em fantasy;
  top: 1em;
  left: 1em;
}
.div_window{
  position: fixed; 
  left: 0; top: 0; 
  padding: 0.5em;
  background-color: #d0d0d0;
  border: none; 
  border-radius: 0.2em; box-shadow: 0.1em 0.1em 0.06em #fff inset, -0.1em -0.1em 0.1em #444 inset, 1em 1em 4em 2em #666;
}
.dio{ 
  position: absolute; 
  left: 0; top: 0; height: 1.7em; width: 100%; 
  background-color: #008080; 
  border: hidden; 
  border-color:#AADDC7 #008080 #008080 #AADDC7; 
  border-radius: 0.2em 0.2em 0 0; box-shadow: 0.1em 0.1em 0.09em #AADDC7 inset, -0.12em 0.1em 0.1em #444 inset;}
.dio_img{
  position: absolute;
  right: -0.2em; top: -0.2em; height: 1.7em; width: 1.7em;
  background-color: #008080;
  border: hidden;
  border-color:#AADDC7 #008080 #008080 #AADDC7;
  transition: border-radius 0.2s ease-in-out;
  border-radius: 0.2em; box-shadow: 0.1em 0.1em 0.09em #AADDC7 inset, -0.12em -0.12em 0.1em #444 inset;}
.dio_img:hover{ border-radius: 0.82em }
.saH{ 
  position: absolute; 
  top: 0.1em; left: 0.3em; width: 95%; margin: 0;
  font-weight: bold; 
  text-align: left;
}
.saX{ 
  position: absolute; 
  top: 0; right: 0.2em; margin: 0;
  font: normal bold 1.4em Arial; 
  cursor: pointer;
}
.saX:hover{ color: #fff; }
.dii{
  position: absolute;
  top: 1.8em; left: 0.3em; right: 0.3em; bottom: 0.3em; margin: 0;
  overflow: auto;
}
.img1, .img2{
  border: none;
  height: 3em;
  width: 3em;
  cursor: pointer;
  margin: 0.5em 1em -0.5em 0;
}
.img_title{
  font-size: 0.8em;
  margin: 0 1.5em 1em 0;
}
.img_thumbnail{
  height: 3em; 
  width: 3em; 
  margin: 0.2em;
  border-radius: 0.2em;
  box-shadow: 0 0 0.2em 0.2em #444;
  transition: all 0.2s ease-in-out;
}
.img_thumbnail:hover{
  height: 3.2em;
  width: 3.2em;
  margin: 0.1em;
  border-radius: 0.25em;
  cursor: pointer;
}
.img_loader{
  position: fixed;
  height: 4em;
  margin-top: -2.5em;
  width: 4em;
  margin-left: -2.5em;
  top: 50%;
  left: 50%;
  border-radius: 2em;
  visibility: hidden;
  z-index: 1000;
  transition: visibility 0.2s ease-in-out;
}
.head{
  top: 0; 
  left: 0; 
  height: 1.85em; 
  width: 100%; 
  background-color: #080; 
  border-radius: 0.2em 0.2em 0 0;
  box-shadow: 0.1em 0.1em 0.1em #8CBF8C inset, -0.1em -0.1em 0.1em #444 inset;
}
.samp1{ margin-left: 1em; margin-top: 0.1em; }
.samp2{ margin-left: -10.5em; font-weight: normal; cursor: pointer; background-color: transparent; }
.samp3{ position: absolute; left: 5.9em; top: 0; height: 1.4em; width: 11.1em; cursor: pointer; background-color: transparent; }
.samp4{ position: absolute; top: -0.2em; left: -0.5em; width: 7.5em; height: 2.6em; }
.username{ top: 2.5em; }
.password{ top: 4.5em; height: 2em; white-space: nowrap; }
.password input{ color: black; }
.button{ top: 7.5em; left: 1.5em; height: 2em; white-space: nowrap; }
#send{ opacity: 0.5; }
#div_img1{ top: 2em; left: 2em; width: 15em; height: 20em; visibility: hidden; }
#div_picture{ top: 50%; left: 50%; visibility: hidden; }
#new_page{ position: absolute; top: 2em; left: 0; width: 8.5em; cursor: pointer; }