/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

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

/* Tables2 Tables */ 
ul.pagination li {
    list-style: none;
}

table.wps {
    border-collapse: collapse;
    border-color: #CCC;
    border: 1px solid #DDD;
}

table.wps,
table.wps +  ul.pagination {
    font: normal 11px/14px 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
}

table.wps a:link,
table.wps a:visited,
table.wps + ul.pagination > li > a {
    color: #5B80B2;
    text-decoration: none;
    font-weight: bold;
}

table.wps a:hover {
    color: #036;
}

table.wps td,
table.wps th {
    padding: 5px;
    line-height: 13px;
    border-bottom: 1px solid #EEE;
    border-left: 1px solid #DDD;
    text-align: left;
}

table.wps thead th:first-child,
table.wps thead td:first-child {
    border-left: none !important;
}

table.wps thead th,
table.wps thead td {
    background: #FCFCFC url(../images/css/header-bg.png) left bottom repeat-x;
    border-bottom: 1px solid #DDD;
    padding: 2px 5px;
    font-size: 11px;
    vertical-align: middle;
    color: #666;
}

table.wps thead th > a:link,
table.wps thead th > a:visited {
    color: #666;
}

table.wps thead th.orderable > a {
    padding-right: 20px;
    background: url(../images/css/arrow-inactive-up.png) right center no-repeat;
}
table.wps thead th.orderable.asc > a {
    background-image: url(../images/css/arrow-active-up.png);
}
table.wps thead th.orderable.desc > a {
    background-image: url(../images/css/arrow-active-down.png);
}

table.wps tr.odd {
    background-color: #EDF3FE;
}

table.wps tr.even {
    background-color: white;
}

table.wps + ul.pagination {
    background: white url(../images/css/pagination-bg.gif) left 180% repeat-x;
    overflow: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid #DDD;
}

table.wps + ul.pagination > li {
    float: left;
    line-height: 22px;
    margin-left: 10px;
}

table.wps + ul.pagination > li:first-child {
    margin-left: 0;
}

table.wps + ul.pagination > li.cardinality {
    float: right;
    color: #8d8d8d;
}

table.wps > tbody > tr > td > span.true,
table.wps > tbody > tr > td > span.false {
    background-position: top left;
    background-repeat: no-repeat;
    display: inline-block;
    height: 10px;
    overflow: hidden;
    text-indent: -200px;
    width: 10px;
}

table.wps > tbody > tr > td > .missing {
    background: transparent url(../images/css/missing.png) right center no-repeat;
    color: #717171;
    padding-right: 20px;
}

table.wps > tbody > tr > td > .missing:hover {
    color: #333;
}

table.wps > tbody > tr > td > span.true {
    background-image: url(../images/css/true.gif);
}

table.wps > tbody > tr > td > span.false {
    background-image: url(../images/css/false.gif);
}

div.table-container {
    display: inline-block;
}