/*
Libervia: a Salut à Toi frontend
Copyright (C) 2011, 2012, 2013, 2014  Jérôme Poisson <goffi@goffi.org>
Copyright (C) 2011  Adrien Vigneron <adrienvigneron@mailoo.org>
Copyright (C) 2013, 2014  Adrien Cossa <souliane@mailoo.org>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/


/*
 * CSS Reset: see http://pyjs.org/wiki/csshellandhowtodealwithit/
 */

/* reset/default styles */

html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: #444;
}

/* styles for displaying rich text - START */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    color: #444;
    border-bottom: 1px solid rgb(170, 170, 170);
    margin-bottom: 0.6em;
}
ol, ul {
    margin: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: #444;
}
a:link {
    color: blue;
}
.bubble p {
    margin: 0.4em 0em;
}
.bubble img {
    /* /!\ setting a max-width percentage value affects the toolbar icons */
    max-width: 600px;
}

/* styles for displaying rich text - END */

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* pyjamas iframe hide */
iframe { position: absolute; }


html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;

}

body {
    line-height: 1em;
    font-size: 1em;
    overflow: auto;

}

.scrollpanel {
    margin-bottom: -10000px;

}

.iescrollpanelfix {
    position: relative;
    top: 100%;
    margin-bottom: -10000px;

}

/* undo part of the above (non-IE) */
html>body .iescrollpanelfix { position: static; }

/* CSS Reset END */

body {
    background-color: #fff;
    font: normal 0.8em/1.5em Arial, Helvetica, sans-serif;
}

.header {
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}

.menuContainer {
    margin: 0 32px 0 20px;   
}

.mainMenuBar {
    background-color: #222;
    background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
    background: -webkit-linear-gradient(top, #444444, #222222);
    background: linear-gradient(to bottom, #444444, #222222);
    width: 100%;
    height: 28px;
    padding: 5px 5px 0 5px;    
    border: 1px solid #ddd;
    border-radius: 0 0 1em 1em;
    line-height: 100%;
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
    display: inline-block;
}

.mainMenuBar .gwt-MenuItem {
    padding: 3px 15px;
    text-decoration: none;    
    font-weight: bold;
    height: 100%;
    color: #e7e5e5;
    border-radius: 1em 1em 1em 1em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 
    -webkit-transition: color 0.2s linear; 
    transition: color 0.2s linear;
}

.mainMenuBar .gwt-MenuItem-selected {
    background-color: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -webkit-linear-gradient(top, #eee, #aaa);
    background: linear-gradient(to bottom, #eee, #aaa);
    color: #444;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Menu bars and items */

.gwt-MenuBar {
    /* Common to all menu bars */
    margin: 0;
}

.gwt-MenuBar table {
    /* Common to all tables within a menu bar */
    width: 100%;
    display: inline-table;
}

.gwt-MenuBar-horizontal {
    /* Specific to horizontal menu bars*/
}

.gwt-MenuBar-vertical {
    /* Specific to vertical menu bars*/
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background: -webkit-linear-gradient(top, #fff, #ccc);
    background: linear-gradient(to bottom, #fff, #ccc);
    height: 100%;
    min-width: 148px;
    padding: 0;
    border: solid 1px #aaa;
    border-radius: 0 0 10px 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.gwt-MenuItem img {
    /* Common to all images within a menu item */
    padding-right: 2px;
}

.gwt-MenuBar .gwt-MenuItem {
    /* Common to items of all menu bars */
}

.gwt-MenuBar-horizontal .gwt-MenuItem {
    /* Specific to items of horizontal menu bars*/
}

.gwt-MenuBar-vertical .gwt-MenuItem {
    /* Specific to items of vertical menu bars*/
    padding: 8px 15px;
}

.gwt-MenuBar .gwt-MenuItem-selected {
    /* Common to all selected items */
    cursor: pointer;
}

.gwt-MenuBar-horizontal .gwt-MenuItem-selected {
    /* Specific to selected items of horizontal menu bars */
}

.gwt-MenuBar-vertical .gwt-MenuItem-selected {
    /* Specific to selected items of vertical menu bars */
    background: #cf2828 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
    background: -webkit-linear-gradient(top, #cf2828, #981a1a) !important;
    background: linear-gradient(to bottom, #cf2828, #981a1a) !important;
    color: #fff !important;
    border-radius: 0 0 0 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    -webkit-transition: color 0.2s linear;
    transition: color 0.2s linear; 
}

.gwt-MenuBar-vertical tr:last-child td {
    /* Specific to last items of vertical menus */
    border-radius: 0 0 9px 9px !important;
}

.menuLastPopup .gwt-MenuBar-vertical {
    /* Specific to the last popup menu of the main menu bar */
    border-top-right-radius: 9px 9px;
}

.menuLastPopup .gwt-MenuBar-vertical tr:first-child td {
    /* Specific to the first item of the last popup menu of the main menu bar */
    border-radius: 0px 9px 0px 0px !important;
}

.menuSeparator {
    width: 100%;
}

.menuSeparator.gwt-MenuItem-selected {
    border: 0;
    background: inherit;
    cursor: default;
}

.menuFlattenedCategory {
    font-weight: bold;
    font-style: italic;
    padding: 8px 5px;
    cursor: default;
}

.menuFlattenedCategory.gwt-MenuItem-selected {
    /* !important are needed for the style to not be overwritten when the item is selected */
    background-color: inherit !important;
    background: inherit !important;
    color: #444 !important;
    cursor: default !important;
}

/* Misc Pyjamas stuff */

.gwt-AutoCompleteTextBox {
    width: 80%;
    border: 1px solid #87B3FF;
    margin-top: 20px;
}
.gwt-DialogBox {
    padding: 10px;
    border: 1px solid #aaa;
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background: -webkit-linear-gradient(top, #fff, #ccc);
    background: linear-gradient(to bottom, #fff, #ccc);
    border-radius: 9px 9px 9px 9px; 
    -webkit-box-shadow: 0px 1px 4px #000; 
    box-shadow: 0px 1px 4px #000;
}

.gwt-DialogBox .Caption {
    height: 20px;
    font-size: 1.3em !important;
    background-color: #cf2828;
    background: #cf2828 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
    background: -webkit-linear-gradient(top, #cf2828, #981a1a) !important;
    background: linear-gradient(to bottom, #cf2828, #981a1a) !important;
    color: #fff;
    padding: 3px 3px 4px 3px;
    margin: -10px;
    margin-bottom: 5px;
    font-weight: bold;
    cursor: default;
    text-align: center;
    border-radius: 7px 7px 0 0; 
}

/*DIALOG: button, listbox, textbox, label */

.gwt-DialogBox .gwt-button {
    background-color: #ccc;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
    background: -webkit-linear-gradient(top, #444, #222);
    background: linear-gradient(to bottom, #444, #222);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    padding: 3px 5px 3px 5px;
    margin: 10px 5px 10px 5px;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    border: none; 
    -webkit-transition: color 0.2s linear; 
    transition: color 0.2s linear;
}

.gwt-DialogBox .gwt-button:hover {
    background-color: #cf2828;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -webkit-linear-gradient(top, #cf2828, #981a1a);
    background: linear-gradient(to bottom, #cf2828, #981a1a);
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.25);  
}

.gwt-DialogBox .gwt-TextBox {
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow:inset 0px 1px 4px #000;
    box-shadow:inset 0px 1px 4px #000;
    padding: 3px 5px 3px 5px;
    margin: 10px 5px 10px 5px;
    color: #444;
    font-size: 1em;
    border: none;
}

.gwt-DialogBox .gwt-TextArea {
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow:inset 0px 1px 4px #000;
    box-shadow:inset 0px 1px 4px #000;
    padding: 3px 5px 3px 5px;
    margin: 0px 5px 10px 5px;
    color: #444;
    border: none;
    vertical-align: text-top;
}

.gwt-DialogBox .gwt-ListBox {
    overflow: auto;
    width: 100%;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow:inset 0px 1px 4px #000;
    box-shadow:inset 0px 1px 4px #000;
    padding: 3px 5px 3px 5px;
    margin: 10px 5px 10px 5px;
    color: #444;
    font-size: 1em;
    border: none;
}

.gwt-DialogBox .gwt-Label {
    margin-top: 13px;
}

/* Custom Dialogs */

.formWarning { /* used when a form is not valid and must be corrected before submission */
    font-weight: bold;
    color: red !important;
}

.contactsChooser {
    text-align: center;
    margin:auto;
    cursor: pointer;
}

.infoDialogBody {
    width: 100%;
    height: 100%
}
/* Contact List */

div.contactPanel {
    width: 100%;
   /* We want the contact panel to not use all the available height when displayed
      in the unibox panel (grey part), because the dialogs panels (white part) should
      still be visible. The setting max-height: fit-content would be appropriate here
      but it doesn't work with firefox 24.0. TODO: check if the current setting works
      with other browsers... the panel should of course not be displayed on 100px
      but exactly fit the contacts box.
     */
    max-height: 100px;
}

.contactTitle {
    color: #cf2828;
    font-size: 1.7em;
    text-indent: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    width: 200px;
    height: 30px; 
}

.contactsSwitch {
    /* Button used to switch contacts panel */
    background: none;
    border: 0;
    padding: 0;
    font-size: large;
}

.groupList {
    width: 100%;    
}

.groupList tr:first-child td {
    padding-top: 10px;
}

.group {
    padding: 2px 15px;
    margin: 5px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold; 
    color: #e7e5e5;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 
    border-radius: 1em 1em 1em 1em; 
    background-color: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -webkit-linear-gradient(top, #eee, #aaa);
    background: linear-gradient(to bottom, #eee, #aaa);
    color: #444;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    -webkit-box-shadow: 0px 1px 1px #000;
    box-shadow: 0px 1px 1px #000;
}

div.group:hover {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    background-color: #cf2828;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -webkit-linear-gradient(top, #cf2828, #981a1a);
    background: linear-gradient(to bottom, #cf2828, #981a1a); 
    -webkit-transition: color 0.1s linear; 
    transition: color 0.1s linear;  
}

.contactBox {
    cursor: pointer;
    width: 100%;
    margin: 5px;
    border-radius: 5px;
    background: #EDEDED;
}

.contactBox img {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    margin: 5px 5px 0px 10px;
}

.contactBox .widgetHeader_buttonGroup img {
    border-radius: 5px;
    border-left: 0px;
    padding: 0px 0px 0px 0px;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -webkit-linear-gradient(top, #eee, #aaa);
    background: linear-gradient(to bottom, #eee, #aaa);
}

.contactBox table {
    width: 100%;
}

.contactLabel {
    font-size: 1em;
    margin-top: 3px;
    padding: 3px 10px 3px 10px;
}

.contact-menu-selected {
    font-size: 1em;
    margin-top: 3px;
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
    background-color: rgb(175, 175, 175);
}

/* START - contact presence status */
.contactLabel-connected {
    color: #3c7e0c;
    font-weight: bold;
}
.contactLabel-unavailable {
}
.contactLabel-chat {
    color: #3c7e0c;
    font-weight: bold;
}
.contactLabel-away {
    color: brown;
    font-weight: bold;
}
.contactLabel-dnd {
    color: red;
    font-weight: bold;
}
.contactLabel-xa {
    color: red;
    font-weight: bold;
}
/* END - contact presence status */

.selected {
    color: #fff;
    background-color: #cf2828;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -webkit-linear-gradient(top, #cf2828, #981a1a);
    background: linear-gradient(to bottom, #cf2828, #981a1a); 
    border-radius: 1em 1em 1em 1em; 
    -webkit-transition: color 0.2s linear; 
    transition: color 0.2s linear;
}

.messageBox {
    width: 100%;
    padding: 5px;
    border: 1px solid #bbb;
    color: #444;
    background: #fff url('media/libervia/unibox_2.png') right bottom no-repeat;
    -webkit-box-shadow:inset 0 0 10px #ddd;
    box-shadow:inset 0 0 10px #ddd;
    border-radius: 0px 0px 10px 10px;
    height: 28px;
    margin: 0px;
}

/* UniBox & Status */

.uniBoxPanel {
    margin: 15px 22px 0 22px;
}

.uniBox {
    width: 100%;
    height: 45px;
    padding: 5px;
    border: 1px solid #bbb;
    color: #444;
    background: #fff url('media/libervia/unibox_2.png') top right no-repeat;    
    -webkit-box-shadow:inset 0 0 10px #ddd;    
    box-shadow:inset 0 0 10px #ddd;
}

.uniBoxButton {
    width:30px;
    height:45px;
}

.statusPanel {
    margin: auto;
    text-align: center;
    width: 100%;
    padding: 5px 0px;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
    font-size: 1.2em;
    background-color: #eee;
    font-style: italic;
    font-weight: bold;
    color: #666;
    cursor: pointer;
}

.presence-button {
    font-size: x-large;
    padding-right: 5px;
    cursor: pointer;
}

/* RegisterBox */

.registerPanel_main button {
    margin: 0;
    padding: 0;
    border: 0;
}

.registerPanel_main div, .registerPanel_main button {
    color: #fff;
    text-decoration: none;
}

.registerPanel_main{
    height: 100%;
    border: 5px solid #222;
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
}

.registerPanel_tabs .gwt-Label {
    margin: 20px 0px 0px 15px;
    cursor: pointer;
    font-size: larger;
}

.registerPanel_tabs .gwt-TabBarItem div {
    color: #444;
}

.registerPanel_tabs .gwt-TabBarItem div:hover {
    color: #fff;
}

.registerPanel_tabs .gwt-TabBarItem-selected div {
    color: #fff;
}

.registerPanel_tabs .gwt-TabBarRest {
}

.registerPanel_right_side {
    background: #111 url('media/libervia/register_right.png');
    height: 100%;
    width: 100%;
}
.registerPanel_content {
    margin-left: 50px;
    margin-top: 30px;
}

.registerPanel_content div {
    font-size: 1em;
    margin-left: 10px;
    margin-top: 15px;
    font-weight: bold;
    color: #888;
}

.registerPanel_content input {
    height: 25px;
    line-height: 25px;
    width: 200px;
    text-indent: 11px;
    background: #000;
    color: #aaa;
    border: 1px solid #222;
    border-radius: 15px 15px 15px 15px;
}

.registerPanel_content input:focus {
    border: 1px solid #444;
}


.registerPanel_content .button, .registerPanel_content .button:visited {
    background: #222 url('media/libervia/gradient.png') repeat-x;
    display: inline-block;
    text-decoration: none;
    border-radius: 6px 6px 6px 6px;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    cursor: pointer;
    margin-top: 30px;
}

/* Fix for Opera */
.button, .button:visited {
    border-radius: 6px 6px 6px 6px !important;
}

.registerPanel_content .button:hover { background-color: #111; color: #fff; }
.registerPanel_content .button:active    { top: 1px; }
.registerPanel_content .button, .registerPanel_content .button:visited { font-size: 1em; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 7px 10px 8px; }
.registerPanel_content .red.button, .registerPanel_content .red.button:visited { background-color: #000; }
.registerPanel_content .red.button:hover { background-color: #bc0000; }

/* Widgets */

.widgetsPanel td {
    vertical-align: top;
}

.widgetsPanel > div > table {
    border-collapse: separate !important;
    border-spacing: 7px;
}

.widgetHeader {
    margin: auto;
    height: 25px;
    border-radius: 10px 10px 0 0; 
    background-color: #222;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
    background: -webkit-linear-gradient(top, #444, #222);
    background: linear-gradient(to bottom, #444, #222); 
}

.widgetHeader_title {
    color: #fff;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    margin-top: 4px;
}

.widgetHeader_info {
    position: absolute;
    right: 90px;  # FIXME: temporary dirty setting to fit a header menu with 3 icon buttons
    margin-top: 4px !important;
    color: white !important;
}

.widgetHeader_buttonsWrapper {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.widgetHeader_buttonGroup {
    float: right;
}

.widgetHeader_buttonGroup img {
    background-color: transparent;
    width: 25px;
    height: 20px;
    padding: 2px 0px 3px 0px;
    border-left: 1px solid #666;
    border-top: 0;
    border-radius: 0 0 0 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
    background: -webkit-linear-gradient(top, #555, #333);
    background: linear-gradient(to bottom, #555, #333); 
    cursor: pointer;
}

.widgetHeader_buttonGroup img:hover {
    background-color: #cf2828;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -webkit-linear-gradient(top, #cf2828, #981a1a);
    background: linear-gradient(to bottom, #cf2828, #981a1a); 
}

.widgetBody {
    border-radius: 0 0 10px 10px; 
    background-color: #fff;  
    min-width: 200px;
    min-height: 150px;
    -webkit-box-shadow:inset 0px 0 1px #444;
    box-shadow:inset 0px 0 1px #444;
}

/* BorderWidgets */

.bottomBorderWidget {
    height: 10px !important;
}

.leftBorderWidget, .rightBorderWidget {
    width: 10px !important;
}

/* Microblog */

.microblogPanel {
    width: 100%;
}

.microblogNewButton {
    width: 100%;
    height: 35px;
}

.subPanel {
}

.subpanel .mb_entry {
    padding-left: 65px;
}

.mb_entry {
    min-height: 64px;
}

.mb_entry_header
{
    cursor: pointer;
}

.selected_widget .selected_entry .mb_entry_header
{
    background: #cf2828;
    border-radius: 5px 5px 0px 0px;
}

.mb_entry_author {
    font-weight: bold;
    padding-left: 5px;
}

.mb_entry_avatar {
    float: left;
}

.mb_entry_avatar img {
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 13px;  /* padding value + 5px */
}

.mb_entry_dialog {
    float: left;
    min-height: 54px;
    padding: 5px 20px 5px 20px;
    border-collapse: separate;  /* for the bubble queue since the entry dialog is now a HorizontalPanel */
}

.bubble {
    position: relative;
    padding: 15px;
    margin: 2px;
    border-radius:10px;
    background: #EDEDED;
    border-color: #C1C1C1;
    border-width: 1px;
    border-style: solid;
    display: block;
    border-collapse: separate;
    min-height: 15px;  /* for the bubble queue to be aligned when the bubble is empty */
}

.bubble:after {
    background: transparent url('media/libervia/bubble_after.png') top right no-repeat;
    border: none;   
    content: "";
    position: absolute;
    bottom: auto;
    left: -20px;
    top: 16px;
    display: block;
    height: 20px;
    width: 20px;
}

.bubble textarea{
    width: 100%;
}

.mb_entry_timestamp {
    font-style: italic;
}

.mb_entry_actions {
    float: right;
    margin: 5px;
    cursor: pointer;
    font-size: large;
}

.mb_entry_action_larger {
    font-size: x-large;
}

.mb_entry_toggle_syntax {
    cursor: pointer; 
    float: right;
    display: block;
    position: relative;
    top: -20px;
    left: -20px;
}

/* Chat & MUC Room */

.chatPanel {
    height: 100%;
    width: 100%;
}

.chatPanel_body {
    height: 100%;
    width: 100%;
}

.chatContent {
    overflow: auto;
    padding: 5px 15px 5px 15px;
}

.chatText {
    margin-top: 7px;
}

.chatTextInfo {
    font-weight: bold;
    font-style: italic;
}

.chatTextInfo-link {
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    display: inline;
}

.chatArea {
    height:100%;
    width:100%;
}

.chat_text_timestamp {
    font-style: italic;
    margin-right: -4px;
    padding: 1px 3px 1px 3px;
    border-radius: 15px 0 0 15px;
    background-color: #eee;
    color: #888;
    border: 1px solid #ddd;
    border-right: none;
}

.chat_text_nick {
    font-weight: bold;
    padding: 1px 3px 1px 3px;
    border-radius: 0 15px 15px 0;
    background-color: #eee;
    color: #b01e1e;
    border: 1px solid #ddd;
    border-left: none;
}

.chat_text_msg {
    white-space: pre-wrap;
}

.chat_text_mymess {
    color: #006600;
}

.occupant {
    margin-top: 10px;
    margin-right: 4px;
    min-width: 120px;
    padding: 5px 15px 5px 15px;
    font-weight: bold;
    background-color: #eee;
    border: 1px solid #ddd;
    white-space: nowrap;
}

.occupantsList {
    border-right: 2px dotted #ddd;
    margin-left: 5px;
    margin-right: 10px;
    height: 100%;
}

/* Games */

.cardPanel {
    background: #02FE03;
    margin: 0 auto;
}

.cardGamePlayerNick {
    font-weight: bold;
}

/* Radiocol */

.radiocolPanel {

}

.radiocol_metadata_lbl {
    font-weight: bold;
    padding-right: 5px;
}

.radiocol_next_song {
    margin-right: 5px;
    font-style:italic;
}

.radiocol_status {
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
    color: black;
}

.radiocol_upload_status_ok {
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
    color: #28F215;
}

.radiocol_upload_status_ko {
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
    color: #B80000;
}

/* Drag and drop */

.dragover {
    background: #cf2828 !important;
    border-radius: 1em 1em 1em 1em !important;
}

.dragover .widgetHeader, .dragover .widgetBody, .dragover .widgetBody span, .dragover .widgetHeader img {
    background: #cf2828 !important;
}

.dragover.widgetHeader {
    border-radius: 1em 1em 0 0 !important;
}

.dragover.widgetBody {
    border-radius: 0 0 1em 1em !important;
}

/* Warning message */

.warningPopup {
    font-size: 1em;
    width: 100%;
    height: 26px;
    text-align: center;
    padding: 5px 0;
    border-bottom: 1px solid #444;
}

.warningTarget {
    font-weight: bold;
   
}

.targetPublic {
    background-color: red;
}

.targetGroup {
    background-color: #00FFFB;
}

.targetOne2One {
    background-color: #66FF00;
}

.targetStatus {
    background-color: #fff;
}

/* Tab panel */

.liberviaTabPanel {
}

.gwt-TabPanel {
}

.gwt-TabPanelBottom {
    height: 100%;
}

.gwt-TabBar {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 3px solid #a01c1c;  
}

.mainTabPanel .gwt-TabBar {
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
}

.gwt-TabBar .gwt-TabBarFirst {
    height: 100%;
}

.gwt-TabBar .gwt-TabBarRest {
}

.liberviaTabPanel .gwt-TabBar {;
}

.liberviaTabPanel .gwt-TabBar .gwt-TabBarItem {
    cursor: pointer;
    margin-right: 5px;
}

.liberviaTabPanel .gwt-TabBarItem div {
    color: #fff;
}

.liberviaTabPanel .gwt-TabBarItem {
    color: #444 !important;
    background-color: #222;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
    background: -webkit-linear-gradient(top, #444, #222);
    background: linear-gradient(to bottom, #444, #222);
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
    padding: 4px 15px 4px 15px;
    border-radius: 1em 1em 0 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.liberviaTabPanel .gwt-TabBarItem-selected {
    color: #fff;
    background-color: #cf2828;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -webkit-linear-gradient(top, #cf2828, #981a1a);
    background: linear-gradient(to bottom, #cf2828, #981a1a);
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
    padding: 4px 15px 4px 15px;
    border-radius: 1em 1em 0 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.liberviaTabPanel div.gwt-TabBarItem:hover {
    color: #fff;
    background-color: #cf2828;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -webkit-linear-gradient(top, #cf2828, #981a1a);
    background: linear-gradient(to bottom, #cf2828, #981a1a);
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
    padding: 4px 15px 4px 15px;
    border-radius: 1em 1em 0 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
}

.liberviaTabPanel .gwt-TabBar .gwt-TabBarItem-selected {
    cursor: default;
}

.globalLeftArea {
    margin-top: 9px;
}


/* Misc */

.selected_widget .widgetHeader  {
    /* this property is set when a widget is the current target of the uniBox
     * (messages entered in unibox will be sent to this widget)
     */
    background-color: #cf2828;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -webkit-linear-gradient(top, #cf2828, #981a1a);
    background: linear-gradient(to bottom, #cf2828, #981a1a);
}

.infoFrame {
    position: relative;
    width: 100%;
    height: 100%;
}

.marginAuto {
    margin: auto;
}

.maxWidthLimit {
    max-width: 500px;
}

.transparent {
    opacity: 0;
}

/* URLs */

a.url {
    color: blue;
    text-decoration: none
}

a:hover.url {
    text-decoration: underline
}

/* Rich Text/Message Editor */

.richTextEditor {
}

.richTextEditor tbody {
    width: 100%;
    display: table;
}

.richMessageEditor {
    width: 100%;
    margin: 9px 18px;
}

.richTextTitle {
    margin-bottom: 5px;
}

.richTextTitle textarea {
    height: 23px;
    width: 99%;
    margin: auto;
    display: block;
}

.richTextToolbar {
    white-space: nowrap;
    width: 100%;
}

.richTextArea {
    width: 100%;
}

.richMessageArea {
    width: 100%;
    height: 250px;
}

.richTextWysiwyg {
    min-height: 50px;
    background-color: white;
    border: 1px solid #a0a0a0;
    border-radius: 5px;
    display: block;
    font-size: larger;
    white-space: pre;
}

.richTextSyntaxLabel {
    text-align: right;
    margin: 14px 0px 0px 14px;
    font-size: 12px;
}

.richTextToolButton {
    cursor: pointer;
    width:26px;
    height:26px;
    vertical-align: middle;
    margin: 2px 1px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 1px 4px #000;
    box-shadow: 0px 1px 4px #000;
    border: none; 
    -webkit-transition: color 0.2s linear; 
    transition: color 0.2s linear;
}

.richTextIcon {
    width:16px;
    height:16px;
    vertical-align: middle;
}

/* Recipients panel */

.recipientButtonCell {
    width:55px;
}

.recipientTypeMenu {
}

.recipientTypeItem {
    cursor: pointer;
    border-radius: 5px;
    width: 50px;
}

.recipientPanel {
}

.recipientTextBox {
    cursor: pointer;
    width: auto;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6);
    box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6);
    padding: 2px 1px;
    margin: 0px;
    color: #444;
    font-size: 1em;
}

.recipientTextBox-invalid {
    -webkit-box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6);
    box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6);
    border: 1px solid rgb(255, 0, 0);
}

.recipientRemoveButton {
    margin: 0px 10px 0px 0px;
    padding: 0px;
    border: 1px dashed red;
    border-radius: 5px 5px 5px 5px;
}

.recipientRemoveIcon {
    color: red;
    width:15px;
    height:15px;
    vertical-align: baseline;
}

.dragover-recipientPanel {
    border-radius: 5px;
    background: none repeat scroll 0% 0% rgb(135, 179, 255);
    border: 1px dashed rgb(35,79,255);
}

.recipientSpacer {
    height: 15px;
}

/* Popup (context) menu */

.popupMenuItem {
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
}

/* Contact group manager */

.contactGroupEditor {
    width: 800px;
    max-width:800px;
    min-width: 800px;
    margin-top: 9px;
    margin-left:18px;
}

.contactGroupRemoveButton {
    margin: 0px 10px 0px 0px;
    padding: 0px;
    border: 1px dashed red;
    border-radius: 5px 5px 5px 5px;
}

.addContactGroupPanel {
   
}

.contactGroupPanel {
    vertical-align:middle;
}

.toggleAssignedContacts {
    white-space: nowrap;
}

.contactGroupButtonCell {
    vertical-align: baseline;
    width: 55px;
    white-space: nowrap;
}

/* Room and contacts chooser */

.room-contact-chooser {
    width:380px;
}

/* StackPanel */

.gwt-StackPanel {
}

.gwt-StackPanel .gwt-StackPanelItem {
    background-color: #222;
    background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
    background: -webkit-linear-gradient(top, #444444, #222222);
    background: linear-gradient(to bottom, #444444, #222222);
    text-decoration: none;    
    font-weight: bold;
    height: 100%;
    color: #e7e5e5;
    padding: 3px 15px;
    border-radius: 1em 1em 1em 1em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); 
    -webkit-transition: color 0.2s linear; 
    transition: color 0.2s linear;
}

.gwt-StackPanel .gwt-StackPanelItem:hover {
    background-color: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -webkit-linear-gradient(top, #eee, #aaa);
    background: linear-gradient(to bottom, #eee, #aaa);
    color: #444;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);    
    cursor: pointer;
}

.gwt-StackPanel .gwt-StackPanelItem-selected {
    background-color: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -webkit-linear-gradient(top, #eee, #aaa);
    background: linear-gradient(to bottom, #eee,#aaa);
    color: #444;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);    
    cursor: pointer;
}

/* Caption Panel */

.gwt-CaptionPanel {
    overflow: auto;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    padding: 3px 5px 3px 5px;
    margin: 10px 5px 10px 5px;
    color: #444;
    font-size: 1em;
    border: solid 1px gray;
}

/* Radio buttons */

.gwt-RadioButton {
    white-space: nowrap;
}

[contenteditable="true"] {
}

/* XMLUI styles */

.AdvancedListSelectable tr{
    cursor: pointer;
}

.AdvancedListSelectable tr:hover{
    background: none repeat scroll 0 0 #EE0000;
}

.line hr {

}

.dot hr {
    height: 0px;
    border-top: 1px dotted;
    border-bottom: 0px;
}

.dash hr {
    height: 0px;
    border-top: 1px dashed;
    border-bottom: 0px;
}

.plain hr {
    height: 10px;
    color: black;
    background-color: black;
}

.blank hr {
    border: 0px;
}