#tooltip
{
    font-family: 'Open Sans','Myriad Pro',Arial,sans-serif;
    text-align: left;
    color: #807870;
    font-size:12px !important;
    line-height:1.4em;
    background: #fdf0f7;
    position: absolute;
    z-index: 100;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 0px 1px rgba(243,206,225,1);
    -moz-box-shadow: 0px 0px 0px 1px rgba(243,206,225,1);
    box-shadow: 0px 0px 0px 1px rgba(243,206,225,1);
    border-radius: 5px;
    margin-top: -10px;
    
}

#tooltip p {
    font-size: 12px!important;
    line-height: 1.4em;
    margin-top: 0;
    margin-bottom: 0;
}

    @media only screen and (max-width: 800px){
        /*#tooltip:before{
            content: 'x';
            position: absolute;
            color: #fff;
            right: 8px;
            top: 3px;
            font-size: 12px;
        }*/
    }    
 
    #tooltip:after /* triangle decoration */
    {
        width: 31px;
        height: 17px;
        background: transparent url(../img/tooltip_arrow_bottom.png) no-repeat top left;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -17px;
        margin-left: -17px;
    }
 
        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }
 
        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }
 
        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }