/*
 * 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;
}

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;
}
 
body.HoverSupport a.tooltip:hover,
    body.TouchSupport a.tooltip.hover {
    font-style: normal;
    text-decoration: none;
    cursor:help;
}

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

body.HoverSupport a.tooltip:hover span,
    body.TouchSupport a.tooltip.hover span {
    display: block;
    position: absolute;
    font-style: normal;
    text-decoration: none;
    bottom: 0.5em;
    left: 110%;
    padding: 0.2em 0.6em;
    border:1px solid #A15514;
    background-color:white;
    color:#000;
    z-index:20000;
    white-space:normal;
}

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