@import "main";

// tooltips
div {
    .tnt_tooltip {
        display  : block;
        position : absolute;
        top      : 0px;
        opacity  : 0;
        border   : 2px solid;
        background-color : #FFFFFF;
        @include small-font;

        h1 {
            font-size : 30px;
        }

        .link {
            color : blue;

            &:hover {
                cursor : pointer;
            }
        }

    }
    .tnt_tooltip_active {
        opacity : 1;
        z-index : 1001;
    }
}

%closer-pos {
    content:'';
    position:absolute;
    width:16px;
    height:4px;
    background-color:white;
    @include round-borders (2);
    border-radius:2px;
    top:8px;
    box-shadow:0 0 2px 0 #ccc;
}

.tnt_tooltip_closer {
    width : 20px;
    height : 20px;
    background-color : black;
    position : absolute;
    right : -10px;
    top  : -10px;
    border-radius : 6px;
    &:before {
        @extend %closer-pos;
        @include rotate (45deg);
        left : 2px;
    };
    &:after {
        @extend %closer-pos;
        @include rotate (-45deg);
        right : 2px;
    }
}

.tnt_zmenu {
    @include tiny-font;
    // width : 180px;
    border-style : solid;
    border-collapse : collapse;
    th, td {
        padding-top : 5px;
        padding-right : 5px;
        padding-left : 5px;
        padding-bottom : 5px;
        white-space : normal;
        text-align : left;
        vertical-align : top;
        font-size : 12px;
    }
    th {
        cursor : move;
    }
    th:active {
        cursor : move;
    }

}