/*
Tooltips.

Tooltips: class="tooltip{-left|-bottom|-right|-top}"
Ein Tooltip, der erscheint, wenn die Maus über dem Container (class="tooltip-anchor") schwebt.

Popup: class="popup{-left|-bottom|-right|-top}"
- Wie ein Tooltip, erscheint aber beim Laden der Seite automatisch für 5 Sekunden.
- Kann (momentan noch) nicht direkt platziert werden, sondern muss
  über Javascript: add_popup() in tooltips.js eingefügt werden.
- Wird über document.onscroll positioniert. Bei fancy Scrolling-Lösungen kann
  es zu Fehlverhalten kommen, wenn der Container durch Scrolling die Position ändert.


Der Tooltip  und das Popup muss ein Element INNERHALB
des Tooltip Containers, aber nicht notwendig 
ein direktes Child sein.

Tooltip wird rechts vom anchor, vertikal zentriert angezeigt.
Hinweis für Listen:
  Collapsing margins stören die vertikale Zentrierung.
  Korrektur: tooltip.margin-top = anchor.margin / 2


*/

.tooltip-anchor:hover [class^="tooltip"], .tooltip-anchor:hover [class^="popup"] {
    visibility: visible;
    opacity: 1;
}

/* Tooltip text */
.tooltip-anchor [class^="tooltip"], .tooltip-anchor [class^="popup"]  {
    text-align: left;
    padding: 5px;
    border-radius: 6px;
    white-space:nowrap;
    box-shadow: 0px 10px 13px -7px #000000;

    position: fixed;
    z-index: 1000;
}

.tooltip-anchor [class^="tooltip"] {
    background-color: #666;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s 0.5s;
}

@keyframes fadeOut {
    0% {opacity: 1; visibility: visible;}
    90% {opacity: 1; visibility: visible;}
    100% {opacity: 0; visibility: hidden;}
}

.tooltip-anchor [class^="popup"]  {
    background-color: rgb(224, 160, 160);
    color: #000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s 0.5s;
    pointer-events: none;
    animation-name: fadeOut;
    animation-duration: 5s;
    animation-fill-mode: backwards;
}