.tooltip {
    position: absolute;
    z-index: 1;
    /*min-width: 300px;*/
    max-width: 450px;

    margin-top: 8px;

    color: #5f6060;

    border: 1px solid #CCC;
    background-color: #FFF;
    padding: 5px 10px;

    display: block;
    box-sizing: border-box;

    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
    -o-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
}

.tooltip:after,
.tooltip:before {
    bottom: 100%;
    left: 20px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.tooltip.center:after,
.tooltip.center:before { left: 50%; }

.tooltip:after {
    border-bottom-color: #FFF;
    border-width: 6px;
    margin-left: -6px;
}

.tooltip:before {
    border-bottom-color: #CCC;
    border-width: 7px;
    margin-left: -7px;
}

.tooltip h3 {
    text-align: center;
    font-weight: normal;
    margin: 2px 10px;
}

.tooltip table {
    border: 1px solid #008adb;
    border-radius: 3px;
    padding: 0;
    margin: 4px 0;
}

.tooltip table td { padding: 5px; }

.tooltip table tr:nth-child(even) {
    background-color: #EEE;
}