.tooltip {
  position: relative; /* for image */
}

.tooltip > span {
  display: none;
  position: fixed; /* positioning is fixed to the viewport */
  left: 12.5%;
  top: 15%;
  z-index: 1;
  width: 75%;
  color: #000;
  border-radius: 5px 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.tooltip:hover > span,
.tooltip:hover ~ .close-stmt {
  display: block;
}

.close-stmt {
  display:none;
  position: fixed;
  left:77.5%;
  top:15%;
  z-index: 2;
  width:10%;
  background: #c0c0c0;
  padding: 1px 0;
  text-align: center;
  font-weight: bold;
}

.tooltip img {
  position: absolute;
  left: -10px;
  top: -10px;
}

.tooltip em {
  display: block;
  margin: 10px 0;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
}

.tooltip span span {
  display: block;
  width: 90%;
  margin: 15px auto;
  font-weight: bold;
  letter-spacing: 1.5px;
}

.classic {
  background: #ffffaa;
  border: 1px solid #ffad33;
}
.critical {
  background: #ffccaa;
  border: 1px solid #ff3334;
}
.help {
  background: #9fdaee;
  border: 1px solid #2bb0d7;
}
.information {
  background: #9fdaee;
  border: 1px solid #2bb0d7;
}
.warning {
  background: #ffffaa;
  border: 1px solid #ffad33;
}