/* --------------------------------------------------------------------------------
 * Chat v4 footer styles
 * -------------------------------------------------------------------------------- */

.xg_chat.chatFooter {
    font-size: 11px;
    line-height: 21px;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 0;
    z-index: 999;
}

.xg_chat.chatFooter.with-wibiya-toolbar {
	bottom: 28px; /* Shift the Chat toolbar up to make room for the Wibiya toolbar */
}

.xg_chat .xg_volumeSliderContainer {
    background-color: #ffffff;
    border: 1px solid #b7b7b7;
    bottom: 21px;
    height: 74px;
    padding: 10px 3px;
    position: absolute;
    right: 32px;
    width: 21px;
    z-index: 999;
}

.xg_chat .xg_volumeSlider {
    background-color: #ffffff;
    border: 1px solid #707070;
    border-radius: 4px;
    color: #707070;
    height: 71px;
    margin-left: 8px;
    position: relative;
    width: 3px;
}

.xg_chat .xg_volumeSlider > div {
    background-color: #707070;
    bottom: 0;
    position: absolute;
    width: 4px;
}

.xg_chat .xg_volumeSlider > a {
    border: 1px solid #707070;
    border-radius: 4px;
    background-color: #b7b7b7;
    display: block;
    height: 9px;
    margin-bottom: -6px;
    margin-left: -4px;
    position: absolute;
    width: 9px;
}

.xg_chat .xg_chatOptions{
    position: absolute;
    bottom: 21px;
    background: #ffffff;
    color: #333;
    border: 1px solid #b7b7b7;
    z-index: 999;
}

.xg_chat.chatFooter .xg_chatOptions{
    right: 8px;
}
.xg_chat.chatModule .xg_chatOptions{
    right: -1px;
}

.xg_chat .xg_chatOptions div.option {
    padding-left: 3px;
    padding-right: 5px;
    cursor: pointer;
}
.xg_chat .xg_chatOptions div.option.optionOff .checkmark{
    visibility: hidden;
}
.xg_chat .xg_chatOptions div.option:hover {
    background-color: #e0e0e0; /* just the color; may also have a bg image if xg_sprite */
}
.xg_chat.chatFooter .xg_verticalPane{
    margin-right: 6px;
    height: 1px;
    float: right;
    position: relative;
    bottom: 1px;
}

.xg_chat.chatFooter #mainChatContainer {
    width: 300px;
}

.xg_chat.chatFooter .xg_chatWidth{
    width: 220px;
}

.xg_chat.chatFooter .xg_userWidth{
    width: 180px;
}

/* Wibiya hacks to move the sign in button */
.xg_chat.chatFooter #userListContainer.xg_wibiyaMinimized {
    margin-right: 119px;
}
.xg_chat.chatFooter #userListContainer.xg_wibiyaMaximized {
    bottom: 29px;
    margin-right: 12px;
}

.xg_chat .xg_bottomBar {
    background: url(../gfx/chat.png) repeat-x 0 0;
    border: 1px solid #B7B7B7;
    position: absolute;
    bottom: -1px;
    width: 100%;
    z-index: 999;
}

.xg_chat.chatFooter .xg_bottomBar .delete {
    background-image: url(../../index/gfx/icons/xg_sprite-666666.png);
}

.xg_chat.chatFooter .xg_bottomBar .delete:hover {
    background-image: url(../gfx/x-on-square.gif);
    background-position: center center;
    width: 13px;
    height: 13px;
    bottom: 4px;
    right: 4px;
}

.xg_chat.chatFooter .xg_chatWindow {
    position: absolute;
    bottom: 0;
    background: #FFFFFF;
    color: #333;
    height: 274px;
    width: 100%;
    border: 1px solid #b7b7b7;
    z-index: 999;
}

.xg_chat.chatFooter .xg_chatBar {
    cursor: pointer;
}
.xg_chat .xg_titleBar {
    padding: 3px 42px 3px 5px;  /* 42px = 2*16px (icon width) + 2*5px (l/r padding around icons) */
    position: relative; /* for expand/popout icons */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xg_chat .xg_chatBar a {
    line-height: 21px;
    height: 21px;
    text-decoration: none;
    cursor: pointer;
 }
.xg_chat .xg_chatBar.xg_titleBar a.xg_info {
    color: inherit;
}
.xg_chat.chatFooter .xg_chatBar.xg_titleBar a.xg_sprite, .xg_chat.chatModule .xg_titleBar p {
    background-image: url(../../index/gfx/icons/xg_sprite-CCCCCC.png);
    padding-left: 12px;
    padding-right: 4px;
}
.xg_chat.chatFooter .xg_chatBar.xg_titleBar a.xg_expand {
    position: absolute;
    top: 2px;
    right: 5px;
 }

.xg_chat.chatFooter .xg_chatBar.xg_titleBar a.xg_sprite-delete {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 5px;
    background-image: url(../../index/gfx/icons/xg_sprite-666666.png);
}
.xg_chat.chatFooter .xg_chatBar.xg_titleBar a.xg_window {
    position: absolute;
    top: 2px;
    right: 21px;  /* 16px (one icon) + 5px (right padding) */
}
.xg_chat.chatFooter .xg_chatBar.xg_titleBar:hover {
    background-image: url(../../index/gfx/table/bg_alt.png);
}
.xg_chat.chatFooter .xg_chatBar.xg_titleBar a:hover {
    color: #fff;
    background-image: url(../../index/gfx/icons/xg_sprite-FFFFFF.png);
}
.xg_chat .xg_titleBar .xg_info {
    float: none;
    background-image: none;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, FreeSans, sans-serif;
    padding-left: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xg_chat.chatFooter .xg_chatBar.xg_titleBar a.xg_info:hover {
    background-image: none;
}
.xg_chat .xg_chatBar.xg_bottomBar a{
    float: left;
    display: block;
    color: #454545;
    background: url(../gfx/chat.png) no-repeat 0 0;
    border-color: #b7b7b7;
    border-style: none none none solid;
    border-width: 0 0 0 1px;
}
.xg_chat .xg_chatBar a:hover {
    text-decoration: none;
}
.xg_chat .xg_chatBar.xg_bottomBar a.xg_info {
    border-left: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xg_chat.chatModule .xg_userList.chatTabs ._username .count,
.xg_chat.chatFooter .xg_chatBar.xg_bottomBar .xg_info .count {
    margin-left: .75em;
    padding: 1px .65em;
    color: white;
    background: #c00;
    font-weight: bold;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.xg_chat.chatModule .xg_userList.chatTabs ._username.flash .count {
    color: #c00;
    background: white;
}
.xg_chat.chatFooter .xg_chatBar.xg_bottomBar .xg_info.flash {
    background: none;
    background-color: #666;
    color: #fff;
}
.xg_chat .xg_chatBar.xg_bottomBar .xg_info.chatTitle,
.xg_chat.chatFooter .xg_chatBar.xg_bottomBar .xg_info .contents,
.xg_chat.chatFooter.signedOut .xg_chatBar.xg_bottomBar .xg_info {
    font-family: Arial, Helvetica, FreeSans, sans-serif;
    font-weight: bold;
    margin-left: 5px;
}

.xg_chat .xg_chatBar a.xg_volume {
    background-position: 0 -301px;
    width: 27px;
}

.xg_chat .xg_chatBar a.xg_volume.xg_muted {
    background-position: 0 -361px;
}

/*
 The rest of the toolbar's hover states do not work. Uncomment this to enable
 hover states for the volume button.
.xg_chat .xg_chatBar a.xg_volume:hover {
    background-position: 0 -330px !important;
}

.xg_chat .xg_chatBar a.xg_volume.xg_muted:hover {
    background-position: 0 -390px !important;
}
*/

.xg_chat .xg_chatBar a.xg_status {
	width: 27px;
	background-position: 0 -60px;
}
.xg_chat.chatFooter .xg_chatBar span.xg_close {
        cursor: pointer;
        position: absolute;
        bottom: 5px;
        right: 1px;
        width: 12px;
        height: 12px;
}
.xg_chat .xg_chatBar a.xg_status-offline {
	width: 27px;
	background-position: 0 -120px;
}

/* Smily insert button */
.emoticon-button {
    background: transparent url(../gfx/emoticon.png) no-repeat 0 0;
    display: block;
    height: 18px;       /* height of icon + 2px top padding */
    right: 2px;
    position: absolute;
    top: 3px;
    width: 18px;        /* width of icon + 2px right padding */
}

.xg_chat .xg_chatWindow.roomDisabled .emoticon-button {
    display: none;
}

/* Emoticon picker */
.emoticon-panel {
    background: white url(../gfx/emoticons.png) no-repeat 3px 2px; /* balance out uneven padding on bg image */
    border: 1px solid #c3c3c3;
    top: -82px;       /* height of emoticon-panel w border (80 + 2)*/
    display: none;
    height: 80px;
    right: -1px;
    position: absolute;
    width: 130px;
}

.xg_chat.chatFooter .xg_chatBar.xg_userBar a.xg_info {
    width: 119px;
}

.xg_chat.chatModule .xg_chatBar.xg_userBar a.xg_info {
    width: 143px;
}

.xg_chat.chatFooter .xg_chatBar.xg_userBar a.xg_info.xg_info_full {
    width: 100%;
}


.xg_chat.chatFooter .xg_chatWindow ul.xg_messageList {
    overflow: auto;
    padding: 5px;
    margin: 0;
    border-bottom: 1px solid #b7b7b7;
}
.xg_chat .xg_chatWindow textarea {
    background: transparent;
    border-width: 0;
    display: block;
    font-family: inherit;
    font-size: 12px;
    /* This is the minimum height jquery autoResize will allow without resizing
       when you edit the field [Chris Brewer 2011-12-09] */
    height: 14px;
    line-height: 1.1em;
    margin: 0;
    outline: none;
    padding: 4px 0 4px 0;
    resize: none;
    width: 100%;
}

.xg_chat .xg_chatWindow .textarea-container {
    padding: 0 20px 0 5px;
    max-height: 80px;
    overflow-y: auto;
}
.xg_chat .emoticonContainer {
    position: relative;
}
.xg_chat .emoticonContainer.withScrollbar .emoticon-button {
    right: 16px;
}
.xg_chat.chatFooter .xg_chatWindow textarea:focus {
    background: transparent; /* override textarea:focus in common[-982].css */
}
.xg_chat.chatFooter .xg_chatWindow ul.xg_userList {
    height: 252px; /* 300px max chat-window height - 21px title-bar height - 6px title-bar padding - 21px bottom-bar height */
    overflow: auto;
    padding: 0;
    margin: 0;
}

.xg_chat.chatFooter .xg_chatWindow .roomDisabled {
    border-top: 1px solid #e1e1e1;
    color: #666666;
    line-height: 1.1;
    margin: 6px;
    padding-top: 6px;
}

.xg_chat.chatFooter .xg_chatWindow.roomDisabled {
    background: #F1F1F1;
}

/* --------------------------------------------------------------------------------
 * Chat v4 module(+popout) styles
 * -------------------------------------------------------------------------------- */
.main_page_module_chat_v4 > .xg_module_body,
.module_chat_v4 > .xg_module_body {
    height: 500px;
}

.module_chat_v4 .xg_chat.bordered {
    border: 1px solid #b7b7b7 !important;
}

.xg_chat.chatModule {
    font-size: 11px;
    line-height: 21px;
    height: 100%;
    min-width: 460px;
}

.xg_chat.chatModule .xg_chatWindow {
    position: relative;
    background: #FFFFFF;
    color: #333;
    overflow: hidden;
    height: 100%;
}

.xg_widget_main_index_index .module_chat_v4 .xg_chat.chatModule .xg_chatWindow {
    /* Make background transparent, to partially take on the main page's theme.
       Older browsers that do not support the rgba() notation will fall back to
       the #FFFFFF background specified above. */
    background: rgba(255,255,255,.3);
}

.xg_widget_main_index_index .module_chat_v4 .xg_chat.chatModule .xg_chatWindow ul.xg_messageList {
    background: #ffffff;
}

.xg_chat.chatModule .sideChatContainer {
    width: 205px;
    float: left;
    border-right: 1px solid #b7b7b7;
}

.xg_chat.chatModule .xg_userWindow {
    bottom: 21px;
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: 100%;
}
.xg_chat.chatModule .xg_chatWindow .textarea-container {
    background-color: #ffffff;
    border: 1px solid #d1d1d1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.xg_chat.chatModule .xg_chatWindow ul.xg_messageList {
    border: 1px solid #c4d5dc;
    /* 57px is the initial height of the messageListFooter. After page load the
       js overrides this value, but initially it is needed so that the message
       list appears at the correct height */
    bottom: 57px;
    left: 20px;
    margin: 0;
    overflow: auto;
    padding: 8px;
    position: absolute;
    right: 10px;
    top: 52px;
}

.xg_chat.chatModule .xg_chatWindow .xg_messageListFooter {
    background-color: #f9f9f9;
    border: 1px solid #c4d5dc;
    border-bottom-left-radius: 9px 7px;
    border-bottom-right-radius: 9px 7px;
    border-top-width: 0;
    bottom: 14px;
    left: 20px;
    padding: 9px 7px;
    position: absolute;
    right: 10px;
}

.xg_chat.chatModule .xg_chatWindow .xg_messageListHeading {
    background-color: #f9f9f9;
    border: 1px solid #c4d5dc;
    border-bottom-width: 0;
    border-top-left-radius: 9px 7px;
    border-top-right-radius: 9px 7px;
    font-size: 120%;
    height: 18px;
    left: 20px;
    padding: 12px 6px;
    position: absolute;
    right: 10px;
    top: 9px;
}

.xg_chat.chatModule .xg_chatWindow .xg_messageListHeading ._avatar {
    border: 1px solid;
    float: right;
    margin-top: -8px;
    width: 33px;
    height: 33px;
}

.xg_chat.chatModule .xg_chatWindow ul.xg_userList {
    padding: 0;
    margin: 0;
}

.xg_chat.chatModule #userListContainer {
    background-color: #e0e4e6;
}

.xg_chat.chatModule .xg_userList > li {
    padding-left: 12px;
}

.xg_chat.chatModule .xg_chatWindow .roomDisabled {
    border-top: 1px solid #e1e1e1;
    color: #666666;
    line-height: 1.1;
    margin: 6px;
    padding-top: 6px;
}

.xg_chat.chatModule .xg_chatWindow.roomDisabled {
    background: #F1F1F1;
}

.xg_chat.chatModule .xg_titleBar {
    /* gradient background for IE, Webkit(Chrome), and FF */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B2C0D9', endColorstr='#859ABE');
    background: -webkit-gradient(linear, center top, center bottom, from(#B2C0D9), to(#859ABE));
    background: -moz-linear-gradient(top, #B2C0D9, #859ABE);
    border-top: 1px solid #a7b5cf;
    color: #ffffff;
    padding-left: 0;
    /* Redule the padding since there's no popout/minimize icons */
    padding-right: 3px;
}

.xg_chat.chatModule .xg_info.xg_activeConversations {
    text-overflow: clip;
}

.xg_chat.chatModule ul.chatTabs.xg_userList {
    margin-bottom: 13px;
}

.xg_chat.chatModule .xg_userList.chatTabs > li.active {
    color: #fff;
}

.xg_chat.chatModule .xg_userList.chatTabs > li.active:hover{
    background-color: #e0e0e0;
    color: inherit;
}

.xg_chat.chatModule .xg_overlay,
.xg_chat.chatModule .xg_floating_module {
    /* Reuse the xg_overlay class, but make it appear over the in-page chat module
       rather than over the whole page. */
    position: absolute;
    display: none;
}

/*
 * Class xg_messageList
 *
 * A <ul> of <li> elements, each of which has the following:
 *
 * _avatar     an <img>, the message sender's avatar
 * _sender     the message sender's name
 * _timestamp  the time[/date] the message was sent
 * _message+   the message(s)
 */

.xg_chat .xg_messageList {
    font-size: 12px;
    line-height: 1.1;
}

.xg_chat ul.xg_messageList > li {
    list-style: none;
    margin: 0 0 6px 38px; /* 32px img width + 6px gutter */
    clear: both;
}

.xg_chat .xg_messageList > li.brief {
    clear: none;
}

.xg_chat .xg_messageList > li > ._avatar {
    float: left;
    height: 32px;
    width: 32px;
    margin: 0 0 6px -38px; /* =margin-left of <li> */
    cursor: pointer;
}

.xg_chat .xg_messageList > li.brief > ._avatar  {
    display: none;
}

.xg_chat .xg_messageList > li._timestamp {
    color: #b2b2b2;
    text-align: right;
}

.xg_chat .xg_messageList > li.warning {
    overflow: hidden;
    text-overflow: ellipsis;
}

.xg_chat .xg_messageList > li > ._sender {
    margin: 0;
    color: #333;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.xg_chat .xg_messageList > li.brief > ._sender  {
    display: none;
}

.xg_chat .xg_messageList .deleteOptions {
    display: none;
    position: absolute;
    top: 13px; /* align top border of deleteOptions with bottom border of delete icon
                  = 0px (top of delete) + 12px (height of delete) + 1px (one border) */
    right: 0;
    background: #ffffff;
    border: 1px solid #b7b7b7;
    border-radius: 3px 0 3px 3px;
    z-index: 1000;
}

.xg_chat .xg_messageList .deleteOptions.active {
    display: block;
}

.xg_chat .xg_messageList .deleteOptions > a {
    display: block;
    padding: 5px;
    cursor: pointer;
}

.xg_chat .xg_messageList .deleteOptions > a:hover {
    background: #e0e0e0;
}

.xg_chat .xg_messageList > li .delete {
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 12px;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
    border-width: 1px;
    background-color: #fff;
    background-image: url(../../index/gfx/icons/xg_sprite-333333.png);
    background-position: 3px -3915px; /* override common for better centering */
    z-index: 1001; /* over the deleteOptions */
    visibility: hidden;
    cursor: pointer;
}

.xg_chat .xg_messageList > li:hover .delete {
    visibility: visible;
}

.xg_chat .xg_messageList > li .deleteOptions.active + .delete {
    visibility: visible;
    border-style: solid;
    border-color: #b7b7b7;
    border-radius: 3px 3px 0 0;
    border-bottom-color: #fff;
}

.xg_chat .xg_messageList a,
.xg_chat .xg_messageList a:hover {
    color: inherit;
    text-decoration : none;
}

.xg_chat .xg_messageList li.clearHistory a {
    float: right;
}

.xg_chat .xg_messageList > li > ._message {
    margin: 2px 0 0 0;
    padding: 0;
    word-wrap: break-word;
    position: relative; /* for delete and deleteOptions */
}

.xg_chat .xg_messageList > li > ._message + ._message {
    border-top: 1px solid #e0e0e0;
    padding-top: 2px;
}

.xg_chat .xg_messageList > li > p._warning {
    background-color: #F7F5D6;
    border: 1px solid #EEE685;
    font-size: 11px;
    padding: 5px;
}

.xg_chat .xg_messageList .emoticon {
	/* We use doesBrowserSupportInlineBlock() to check if "display: inline-block"
	 * is supported. If not, we don't replace emoticons with images,
	 * i.e., we don't use this class. [Jon Aquino 2011-10-19] */
	display: inline-block;
	text-indent: -9999px;
	/* The above text-indent image-replacement technique ensures that if the
	 * user copies and pastes the text into a plain-text context, the emoticon
	 * will be preserved. Moreover, since the image is specified in CSS rather
	 * than HTML, NCs can swap in their own emoticons using CSS. [Jon Aquino 2011-10-21] */
	background: url(../gfx/emoticons.png) no-repeat;
	width: 20px;
	height: 20px;
	vertical-align: bottom;
	position: relative;
	top: 2px;

}

.xg_chat .xg_messageList .biggrin { background-position: -6px -1px; }
.xg_chat .xg_messageList .smile { background-position: -36px -1px; }
.xg_chat .xg_messageList .surprise { background-position: -68px -1px; }
.xg_chat .xg_messageList .biglips { background-position: -98px -1px; }
.xg_chat .xg_messageList .tongue { background-position: -6px -29px; }
.xg_chat .xg_messageList .frown { background-position: -36px -29px; }
.xg_chat .xg_messageList .wink { background-position: -68px -29px; }
.xg_chat .xg_messageList .sick { background-position: -98px -29px; }
.xg_chat .xg_messageList .coolsmile { background-position: -6px -55px; }
.xg_chat .xg_messageList .ohmy { background-position: -37px -56px; }
.xg_chat .xg_messageList .sadeyes { background-position: -68px -55px; }
.xg_chat .xg_messageList .cry { background-position: -98px -56px; }

/*
 * Class xg_userList
 *
 * A <ul> of <li> elements, each of which has the following:
 *
 * _avatar      an <img>, the user's avatar
 * _username    the user's name
 */

.xg_chat .xg_userList {
    font-size: 12px;
    line-height: 1.1;
    margin: 0;
    padding: 0;
}

.xg_chat ul.xg_userList > li {
    clear: both;
    list-style: none;
    margin: 3px 0;
    cursor: pointer;
    padding: 0 3px;
    position: relative; /* for arrow and userOptions*/
    height: 24px; /* = avatar height */
    padding-right: 20px; /* make room for the conversation-marker */
}
.xg_chat ul.xg_userList.chatTabs > li {
    /* We are probably setting the height of userList items explicitly (to 24px)
       because LazyImageLoader assumes that each list item is of equal height,
       and the avatar may not have loaded, or the user name may wrap, etc.
       But the chatTabs has a greater height, and doesn't use LazyImageLoader.
       So remove the explicit height. [Jon Aquino 2011-12-13] */
    height: auto;
}
.xg_chat .xg_userList > li:hover{
    background-color: #e0e0e0;
}

.xg_chat.chatModule .xg_userList > li:hover {
    background-color: #d1d1d1;
}

.xg_chat .xg_userList .privateMessageLink {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xg_chat .xg_userList.chatTabs .privateMessageLink {
    /* For popout chat, don't set overflow:hidden; instead, let
       Room.updateLabel() determine the width to use (including the red count badge).
       Not setting overflow:hidden is especially needed on IE9; otherwise we
       cannot get the label's natural width because IE9 seems to take the width
       to be the width *after* applying overflow:hidden. */
    overflow: visible;
}

.xg_chat .xg_userList .privateMessageLink > * {
    vertical-align: middle;
}

.xg_chat .xg_userList > li ._username {
    padding-left: 6px;
}

.xg_chat .xg_userList > li .conversation-marker {
    position: absolute;
    height: 20px;
    right: 0;
    top: 6px;
}

.xg_chat .xg_userList > li.showingUserOptions .conversation-marker,
.xg_chat .xg_userList > li:hover .conversation-marker {
	visibility: hidden;
}

.xg_chat .xg_userList > li .arrow {
    visibility: hidden;
    position: absolute;
    right: 4px;
    top: 5px;
    width: 12px;
    height: 12px;
    font-size: 8px;
    line-height: 12px;
    text-align: center;
    border: 1px solid #b7b7b7;
    border-radius: 3px;
    background-color: #fff;
    z-index: 1000;  /* over the userOptions */
}

.xg_chat .xg_userList > li:hover .arrow {
    visibility: visible;
}

.xg_chat .xg_userList > li.showingUserOptions .userOptions + .arrow {
    visibility: visible;
    border-bottom-color: #fff;
    border-radius: 3px 3px 0 0;
}

.xg_chat .xg_userList > li.showingUserOptions .userOptions.raised + .arrow {
    border-bottom-color: #b7b7b7;
    border-radius: 3px;
}

.xg_chat.chatModule .xg_userList.chatTabs > li:hover .arrow {
    /* Never show the drop-down arrow in the upper list of active conversations,
     * as we will be showing the close icon instead, on hover. */
    visibility: hidden;
}

.xg_chat.chatModule .xg_userList > li .delete {
    background-image: url(../../index/gfx/icons/xg_sprite-666666.png);
    visibility: hidden;
    cursor: pointer;
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 7px;
    right: 2px;
}

.xg_chat.chatModule .xg_userList.chatTabs > li {
    height: 32px;
}

.xg_chat.chatModule .xg_userList.chatTabs > li .delete {
    bottom: 10px;
}

.xg_chat.chatModule .xg_userList.chatTabs ._avatar {
    height: 32px;
    width: 32px;
}

.xg_chat.chatModule .xg_userList.chatTabs > li:hover .delete {
    visibility: visible;
}

.xg_chat.chatModule .xg_userList.chatTabs > li .delete:hover {
    background-image: url(../gfx/x-on-square.gif);
    background-position: center center;
    width: 13px;
    height: 13px;
    bottom: 9px;
    right: 4px;
}

.xg_chat .xg_userList .userOptions {
    display: none;
    position: absolute;
    top: 18px; /* align top border of userOptions with bottom border of arrow:
                  = 5px (top of arrow) + 12px (height of arrow) + 1px (top border) */
    right: 4px;
    background: #ffffff;
    border: 1px solid #b7b7b7;
    border-radius: 3px 0 3px 3px;
    z-index: 999;
}

.xg_chat .xg_userList li.showingUserOptions .userOptions {
    display: block;
}

.xg_chat .xg_userList .userOptions > a {
    display: block;
    padding: 5px;
    cursor: pointer;
}

.xg_chat .xg_userList .userOptions > a:hover {
    background: #e0e0e0;
}

.xg_chat .xg_userList a,
.xg_chat .xg_userList a:hover {
    color: inherit;
    text-decoration : none;
}

.xg_chat .xg_userList ._avatar {
    height: 24px;
    width: 24px;
}

.xg_chat .xg_userList .xg_sprite {
    background-image: url(../../index/gfx/icons/xg_sprite-CCCCCC.png);
}

.xg_chat.chatFooter .xg_chatBar.xg_titleBar .resizeHandle {
    height:5px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    cursor: ns-resize;
}
/**
 * A transparent div that covers the whole display. This is added to the
 * document during drag operations so that mousemove and mouseup events will
 * continue to be sent even if the mouse is over an element that would not
 * normally display them such as an iframe
 */
.dragCover {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:999;
    cursor: ns-resize;
}