.HoverBox {
  position: absolute;
  min-height: 60px;
  width: 250px;
  z-index: 9;
}
.HoverBox .HoverTextBox {
  background-color: #fcfadf;
  padding: 5px;
  z-index: 1;
  position: relative;
  width: 240px;
  min-height: 60px;
}
.HoverBox .HoverShadowBox {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.HoverBox .HoverShadowArrow {
  border-left: 5px solid transparent;
  border-right: 10px solid transparent;
  border-top: 24px solid rgba(0, 0, 0, 0.1);
  height: 0px;
  left: 50%;
  position: absolute;
  bottom: -24px;
  width: 0px;
}
.HoverBox .arrowElement {
  border-top-width: 24px;
  position: absolute;
  left: 50%;
  bottom: 0px;
}
.HoverBox .arrowClipPart {
  position: absolute;
  overflow: hidden;
  top: -1px;
  width: 16px;
  height: 30px;
}
.HoverBox .arrowClipLeftPart {
  left: -12px;
}
.HoverBox .arrowClipRightPart {
  left: 4px;
}
.HoverBox .arrowClipPart .arrowInnerPart {
  position: absolute;
  background-color: #fcfadf;
  transform-origin: 0px 0px 0px;
  -webkit-transform-origin-x: 0px;
  -webkit-transform-origin-y: 0px;
  height: 24px;
  width: 10px;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);
}
.HoverBox .arrowClipPart .arrowLeftInnerPart {
  left: 6px;
  transform: skewX(22.6deg);
  -webkit-transform: skewX(22.6deg);
}
.HoverBox .arrowClipPart .arrowRightInnerPart {
  left: 0px;
  transform: skewX(-22.6deg);
  -webkit-transform: skewX(-22.6deg);
}
.HoverBox.celArrowBoxHoverForceOpen {
  display: block !important;
}
#sitecontainer .celArrowBoxHoverForceOpen {
    color: rgb(170,20,40);
}

#left .HoverBox .HoverTextBox h2,
#left .HoverBox .HoverTextBox p {
  font-size: 14px;
  line-height: 18px;
  margin: 0;
  padding: 0px 2px
}
#left .HoverBox .HoverTextBox h2 {
  font-family: 'CharterEF-Regular', Arial, sans-serif;
  font-weight: bold;
  color: black;
  font-size: 16px;
}
#sitecontainer #container a.celArrowBoxHoverActive {
  color: rgb(170,20,40);
}