/*
 * Pure CSS tooltips
 * (pp 81-83 "CSS Mastery")
 */

    /*
     * In the original implementation,
     * there's a problem with the background image overwriting the
     * text on some browsers (or text overwriting the image).
     * So, we've creaed an toolwrapper class that holds the image, and
     * becomes the container for the actual <a>.
     */
span.toolwrapper {
    display:inline-block;
    background-image:url(../images/open-nw.gif);
    background-position:center right;
    background-repeat:no-repeat;
}

    /*
     * With onwrapper, the links themselves don't get a border,
     * but the wrapper does.
     */
.column-right ul li a, .column-right ul li a:visited {
    border-bottom: none;
}

.column-right ul li a:hover, .column-right ul li a.active {
    border-bottom: none;
}

.column-right span.toolwrapper {
    width:100%;
    border-bottom: 1px solid #CECECE;
}
.column-right span.toolwrapper:hover {
    width:100%;
    border-bottom: 1px solid #00A7ED;
}
 
 a.tooltip {
    display:inline-block;   /* inline-block fixes a bug in Chrome et. al. where
                               the backgrond images overwrites the text in
                               some cases */
    position: relative;
/*    background-image:url(../images/open-nw.gif);
    background-position:center right;
    background-repeat:no-repeat;*/
    margin-right:21px;
}

a.tooltip:hover {
    font-style: normal;
    text-decoration: none;
    cursor:help;
}

a.tooltip span {
    display: none;
    font-style: normal;
    text-decoration: none;
}

a.tooltip:hover span {
    display: block;
    position: absolute;
    font-style: normal;
    text-decoration: none;
    top: 2em;
    right:0;
    padding: 0.2em 0.6em;
    border:1px solid #005481;
    background-color:white;
    color:#000;
    z-index:10000;
    text-align:left;
}

/*
 * background image method works best
 */
/*a.tooltip:after {
    content: url(../images/open-nw.gif);
    text-decoration:none;
}*/