/* Tooltip container */
.tooltip
{
    position: relative;
    display: inline-block;
}


.tooltip a, .tooltip a:visited
{
	color: rgb(0,119,179);
	color: hsl(200,100%,35%);
}

.tooltip a:focus, .tooltip a:hover, .tooltip a:active
{
	color: rgb(77,166,255);
	color: hsl(210,100%,65%);
}

/* Tooltip text */
.tooltip .tooltiptext
{
    visibility: hidden;
    width: 200%;
    background-color: #fff;
    color: rgb(64,181,191);
    color: hsl(185,50%,50%);
    text-align: left;
    padding: 2px 5px 7px 7px;
    border-radius: 5px;
    border: 1px solid rgb(216,196,192); /* lightness = 87.26/opacity

    /* Position the tooltip text */
    position: absolute;
    z-index: 200;
    left:-50%;
  	top: 45px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.2s ease-in;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext
{
    visibility: visible;
    opacity: 1;
}