<style>
.box {
  width:90%;
line-height: 1.5;
 margin: 0px auto;
    /* margin-top: 10em; auto; */
  padding: 7px;
  text-align: left;
  background-color: #fff5ee;
  /* border: 1px solid blue; */
  /* border-width:5px; */
  /*  border-spacing: -15px; */
  /*  border-margin:15px; */
}
#box2 {
	width: auto;
height: 4em;
/* top: 50%;*/
/*left: 50%;*/
vertical-align:center;
/*margin-left: -150px;*/
/*margin-top: -100px;*/
position:relative;
text-align:center;
/*align:center; */
border: 1px solid black; 
 border-spacing: 15px 15px;
   /*width:50%;*/
   /*margin-left: 20em; auto;*/
/**/
}
body {
  margin: 15px;
  text-align: center;  /* nur f&uuml;r alte Browser */
  background-color: grey; /*#e6e6fa; */
 hyphens: auto;
}
hr.dgr {
  border-top: 3px solid darkgrey;
  /* width:20%; */
  text-align: center;
}
p{padding: 0 25px 0 10px;}

span.frac { 	display: inline-block; 	text-align: center;  
}     
span.frac > sup { 	display: block; 	border-bottom: 1px solid; 	font: inherit;  
}     
span.frac > span { 	display: none;
}
span.frac > sub { 	display: block; 	font: inherit;
} 	

span.uml {
	display: inline-block;
	text-align: center;
	vertical-align:-5px;
}
span.uml > sup {
	display: block;
	font: inherit;
	position: relative; top: 10px;
}
span.uml > span {
	display: none;
}
span.uml > sub {
	display: block;
	font: inherit; 
	vertical-align:5px;
	
}

.collapsible {
  background-color: #a5a5a5;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
background-color: #a3a3a3;
}
.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}
content {
	display: none;
  padding: 0 18px;
  max-height:0;
  
  overflow: hidden;
  background-color: #f1f1f1;
  
}
/* Popup container - can be anything you want */
.popup {
  position:relative;
  display: inline-block;
  cursor: pointer;
  /*-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;*/
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  height:160px;
/* background-color:  #bf9b30; //#ffbf00;//#ffcf40;*/
background-image: linear-gradient(to bottom,#bf9b30, #ffbf00);

  color: #ffdc73; /* #d4af37; */
  text-align: center;
  border-radius: 50%;
  border-width:20px ;
border-color: #e2b007;
  border-style: /* inset;*/ /*  groove;*/ dotted solid   dashed double;
  
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
  font-variant: small-caps;
font-weight:bold;
 text-shadow: 0 5px 10px #ffdc73;/*#bf9b30;*//* #a67c00;*/ /*/#ffcf40; //  #ffbf00; // #a67c06;*/

}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color:  #ffbf00; /* #555 */ /*transparent;*/
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0.9;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
 }
 
/* div.inline { /*float:left; 
display:inline-block; *//*}*/
