body {
   font-family: 'Arial', sans-serif;
   padding    : 20px;
   background : #FFFFFF;
   color      : #000000;
   font-size  : 1.0rem;
}
p {
   font-family: 'Arial', sans-serif;
   padding    : 5px;
   background : #FFFFFF;
   color      : #000000;
   font-size  : 1.0rem;
}

table, th, td {
  border         : 0px solid;
  vertical-align : top;
  text-align     : left;
  padding        : 3px;
}

.descreteText {
   font-family   : 'Arial', sans-serif;
   font-size     : 0.8rem;
   background    : #FFFFFF;
   color         : #AAAAAA;
}

.rotatedHeading {
   font-family   : 'Arial', sans-serif;
   font-size     : 3em;
   writing-mode  : vertical-rl;
   margin-bottom : 0;
   margin-top    : 0;
}

#floatbox {
	   position: relative;
       float: left;
       background-color: white;
       width: 180px;
       height: 180px;
}
#gruppe {
       float: left;
       background-color: white;
       width: 100%;
}

#demoscreen {
	   position: absolute;
	   left: 400px; top: 200px;
       background-color:white;
       margin-left: 200px;
       width:  400px;
     }


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}