/* Tooltips for Stud.IP with CSS3 only -------------------------------------- */
.studip-tooltip {
    #arrow > .bottom-border(9px, #ddd, 1px, #ccc, 5px);
    #gradient > .vertical(fade(#fff, 50%), fade(#fff, 0%));

    background-color: #ddd;
    border: 2px solid #ccc;
    .border-radius(4px);
    .box-shadow(0 1px 2px fade(#000, 60%), 0 1px 0 fade(#fff, 50%) inset);
    font-size: @font-size-base;
    margin-bottom: 8px;
    max-width: 230px;
    opacity: 0.95;
    padding: 10px;
    position: absolute;
    text-align: left;
    text-shadow: 0 1px 0 fade(#fff, 50%);
    white-space: normal;
    z-index: 10000;

    .hyphens();
}

.tooltip {
    display: inline-block;
    &.tooltip-icon {
        .icon('before', 'info-circle', 'inactive');
        &.tooltip-important {
            .icon('before', 'info-circle', 'attention');
        }
    }
    
    position: relative;
    .tooltip-content {
        .studip-tooltip;
        display: none;
    }
    &:hover .tooltip-content {
        bottom: 100%;
        display: inline-block;
        left: 50%;
        margin-left: -129px;
        width: 230px;
    }
}