/*
    THIS IS USED IN THE ViewSchoolOrDistrict View for the explanatory tooltips
    Do not remove or modify!

*/



/* 
    ==========================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE  from Nicolas Gallagher
    http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    color: white;
    background: #0D5761; /* default background for browsers without gradient support */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

    /* Variant : for top positioned triangle
------------------------------------------ */

    .triangle-isosceles.top {
        background: #0D5761;
    }

    /* Variant : for left/right positioned triangle
------------------------------------------ */

    .triangle-isosceles.left {
        margin-left: 50px;
        background: #0D5761;
    }

    /* Variant : for right positioned triangle
------------------------------------------ */

    .triangle-isosceles.right {
        margin-right: 50px;
        background: #0D5761;
    }

    /* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

    /* creates triangle */
    .triangle-isosceles:after {
        content: "";
        position: absolute;
        bottom: -15px; /* value = - border-top-width - border-bottom-width */
        left: 50px; /* controls horizontal position */
        border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
        border-style: solid;
        border-color: #0D5761 transparent;
        /* reduce the damage in FF3.0 */
        display: block;
        width: 0;
    }

    /* Variant : top
------------------------------------------ */

    .triangle-isosceles.top:after {
        top: -15px; /* value = - border-top-width - border-bottom-width */
        right: 50px; /* controls horizontal position */
        bottom: auto;
        left: auto;
        border-width: 0 15px 15px; /* vary these values to change the angle of the vertex */
        border-color: #0D5761 transparent;
    }

    /* Variant : left
------------------------------------------ */

    .triangle-isosceles.left:after {
        top: 16px; /* controls vertical position */
        left: -20px; /* value = - border-left-width - border-right-width */
        bottom: auto;
        border-width: 10px 20px 10px 0;
        border-color: transparent #0D5761;
    }

    /* Variant : right
------------------------------------------ */

    .triangle-isosceles.right:after {
        top: 16px; /* controls vertical position */
        right: -50px; /* value = - border-left-width - border-right-width */
        bottom: auto;
        left: auto;
        border-width: 10px 0 10px 50px;
        border-color: transparent #0D5761;
    }