/* HTML structure:

<div class="ui-tooltip ui-widget ... ContextualPopup">
    <div class="ui-tooltip-content">
            <div class="Userpic">
                <a href=""><img src="" alt=""></a>
            </div>
            <div class="Content">
                <div class="Relation">Current relationship status</div>
                <div class="Actions">
                    <div><a href="">Action 1</a></div>
                    <div><a href="">Action 2</a></div>
                    <div><a href="">Action 3</a></div>
                </div>
            </div>
    </div>
</div>

 */

.ContextualPopup {
    width: 20em;
    text-align: left;
    overflow: auto;
}

.ContextualPopup .Userpic {
    border-style: solid;
    border-width: 1px;
    float: right;
    margin-left: 2px;
    padding: 2px;
}

/* Don't add extra height at bottom of userpic box */
.ContextualPopup .Userpic a {
    display: block;
    line-height: 0;
}

.ContextualPopup .Userpic img {
    height: auto;
    width: auto;
    max-height: 75px;
    max-width: 75px;
    width:expression(this.width > 75 ? "75px" : this.width); /*IE Max-width */
    border: 0;
}

.ContextualPopup a {
    text-decoration: none;
    border-bottom: none;
}

.ContextualPopup .Relation {
    font-weight: bold;
    font-size: 0.8em;
    line-height: 1.2;
    margin-bottom: 1em;
}

.ContextualPopup .Actions {
    line-height: 1.4;
}

.ContextualPopup .Actions ul {
    list-style: none;
    margin: 0;
    padding-left: .5em;
}