/* Area de notificaciones de la barra superior */
/* .notifyArea > DIV { border:1px solid red } */
.notifyArea > DIV { display:inline-block; margin:0; padding:0; text-align:center; font-size:22px; line-height:1.0em }

.notifyArea > DIV.chat { width:192px } 
.notifyArea > DIV.chat > A {
	display:inline-block; position:relative; overflow:hidden; max-width:24px;
	vertical-align:top;
	margin:0 3px;
	border-radius:3px;
	padding:0 1px;
}

.notifyArea > DIV.chat > A.contacts { width:32px; max-width:32px; height:28px; line-height:18px; overflow:visible; }
.notifyArea > DIV.chat > A:first-child { margin:0 }

.notifyArea > DIV.chat > A.off, A.off { color:#999 }

.notifyArea > DIV.chat > A:hover { background:#f8f8f8 }

A.smallball { min-width:26px; text-align:left }
A.smallball > SMALL {
 display:inline-block; visibility:hidden; position:absolute; left:45%; top:0; width:15px; height:15px; background:#c00; color:#fff; border-radius:16px;
 font:normal 10px/1.4em sans-serif;
 text-align:center;
}

A.smallball > SMALL.online { background:green; left:18px; top:14px }

DIV.chatPopups {
	display:none;
	position:absolute;
	z-index:99997;
	width:480px; height:480px;
	border:1px solid #abc; border-radius:8px; 
	padding:0;
	background:#f8f8f8;
	box-shadow:3px 3px 5px #777
}

DIV.chatPopups > DIV.topbar, DIV.contactList > DIV.topbar { padding:1px 6px; margin-bottom:8px }
DIV.chatPopups > DIV.main, DIV.contactList > DIV.main { padding:8px 12px }

DIV.chatPopups DIV.listArea { max-height:400px; overflow:auto }

DIV.chatPopups.chatSettings, DIV.chatPopups.notifications { width:360px; height:400px }

.chatBox {
 position:fixed; overflow:hidden;
 box-sizing:border-box;
 left:100px; top:100px;
 border:1px solid #ccc;
 border-radius:3px; 
 width:272px;
 height:380px;
 background:#f0f0f0;
 z-index:99997;
 -webkit-transition:top 0.5s; -moz-transition:top 0.5s; -o-transition:top 0.5s; transition:top 0.5s;
}

.chatBox DIV, .chatBox P { box-sizing:border-box }

/* La barra superior de la chatbox */
.chatBar { width:100%; height:24px; background:#09d; color:#fff; font-size:0.9em; box-sizing:border-box; padding-top:2px }

/* Botones superiores de la barra de título de la chatbox */
.chatBar P { margin:0; display:inline-block; vertical-align:top; box-sizing:border-box }
.chatBar P.usersInfo { width:10%; text-align:center; color:#fff; font-size:19px }
.chatBar P.chatTitle { overflow:hidden; width:65%; padding-left:3px; font-size:0.995em; line-height:1.75em }
.chatBar P.chatBarBtns { width:25%; text-align:right }

/* Botones superiores de la barra de título de la chatbox */
.chatBar BUTTON {
 box-sizing:border-box; text-align:center; vertical-align:top; padding:0; margin:0; width:21px; max-width:21px; height:22px; 
 border:0; 
 background:transparent;
 font-weight:normal; font-size:21px; line-height:1.0em;
 color:#eee
}

.chatBarBtns BUTTON:hover { color:#fff }

.chatMsgs { width:100%; overflow:auto; height:304px }

.chatMsgs P { margin:2px 3px; padding:2px 8px; font-size:0.85em; text-align:left }
.chatMsgs DIV { margin-top:6px }
.chatMsgs P.me { background:#f8f8ff; color:#124; border-radius:9px 9px 0 9px; display:inline-block }
.chatMsgs DIV.me { text-align:right }
.chatMsgs P.foto { display:inline-block; width:32px; height:32px; vertical-align:top; padding:0; margin:0 4px auto 4px }
.chatMsgs P.foto > IMG  { border-radius:3px; margin:0 auto; width:26px }
.chatMsgs P.you { background:#0be; color:#fff; border-radius:0 9px 9px 9px; display:inline-block; vertical-align:top; max-width:208px }
.chatMsgs P.you > A { color:#ff9 }
.chatMsgs P > A:hover { text-decoration:underline }

.chatMsgs DIV.you { }
.chatMsgs P.sysMsg { background:lightcyan }
.chatMsgs P.sysMsg > B { color:#124 }

.chatInput { text-align:center }

.chatInput INPUT.msg { box-sizing:border-box; width:98%; margin:0 auto }

/* Los botones de abajo de la chatbox */

.chatBtns {
 position:relative;
 height:24px; margin-top:3px; border:1px solid #ccc; border-top-width:1px; font-size:21px; line-height:1.0em;
 text-align:right;
}

.chatBtns > A { display:inline-block; margin:0 4px 0 3px; color:#779; max-width:20px }
.chatBtns > A:hover { color:#236 }
/*.chatBtns A.sendOK { margin-left:32px } */
.chatBtns > A.spaced { margin-left:10px }
.chatBtns > A > IMG.icon { height:18px }
TABLE.peerContacts TD { text-align:left; vertical-align:top; padding:6px 0 1px 8px }
TABLE.peerContacts TD:first-child { padding-left:0 }

TABLE.peerContacts BUTTON {
 border:0; background:transparent; 
 border-radius:5px;
 height:28px;
 background:#eee;
 margin-left:3px;
}

TABLE.peerContacts BUTTON > .typicons { font-size:1.5em; margin-right:2px }
TABLE.peerContacts BUTTON > .iconfont { font-size:1.1em; margin-right:2px }

TABLE.peerContacts BUTTON:hover { background:#ddd }
TABLE.peerContacts TD BUTTON.talk { color:#999 }
TABLE.peerContacts TD.online BUTTON.talk { color:green }
TABLE.peerContacts TD.online BUTTON.talk:after { 
    font-family:typicons;
    position:relative; left:3px; top:-8px;
    font-size:0.8em;
	color:#d00; content:'\e0b2'
}
TABLE.peerContacts TD.online BUTTON.talk > .iconfont { font-size:1.4em }

IFRAME.chatFrame { visibility:hidden; display:none }