/*
Libervia: a Salut à Toi frontend
Copyright (C) 2011-2016  Jérôme Poisson <goffi@goffi.org>
Copyright (C) 2011  Adrien Vigneron <adrienvigneron@mailoo.org>
Copyright (C) 2013-2016  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;
    width: 100%;
    height: 64px;
}

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

.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);
    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;
    position: absolute;
    left: 20px;
    right: 20px;
    width: auto;
}

.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-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;
    font-weight: bold;
    font-size: 1em;
    border: none; 
    -webkit-transition: color 0.2s linear; 
    transition: color 0.2s linear;
}

.gwt-DialogBox .gwt-button:enabled {
    cursor: pointer;
    color: #fff;
}

.gwt-DialogBox .gwt-button:enabled: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, .gwt-DialogBox .gwt-PasswordTextBox {
    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: 9px 5px 9px 5px;
    color: #444;
    font-size: 1em;
    border: none;
}

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

.gwt-DialogBox .gwt-CheckBox {
    margin-top: 12px;
    display: block;
}

.gwt-DialogBox .gwt-RadioButton {
    margin-top: 13px;
    display: block;
}

.gwt-DialogBox .gwt-RadioButton label {
    vertical-align: bottom;
}

.gwt-DialogBox tr td:first-child {
    vertical-align: top !important;
}

/* Custom Dialogs */

.formWarning { /* used when a form is not valid and must be corrected before submission */
    font-weight: bold;
    color: lightcoral !important;
    height: 34px;  /* a higher value will screw up the display of registration tab, check before you modify */
    text-align: center;
}

.formInfo { /* used when a form is being edited and we want to tell something to the user */
    color: lightcyan !important;
}

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

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

div.contactList {
    width: 100%;
    margin-top: 9px;
}

.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;
    margin-top: 9px;
}

.groupPanel {
    width: 100%;    
}

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

.group {
    curser: pointer;
    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, .muc_contact img {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    margin: 5px 5px 0px 10px;
}

.contactBox .widgetHeader_buttonGroup {
    float: left;
}

.contactBox .widgetHeader_buttonGroup img {
    width: 32px;
    height: 32px;
    border-radius: 5px;
    border: 1px solid #ededed;
    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 .widgetHeader_buttonGroup img:hover {
    border: 1px solid #cf2828;
}

.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);
}

.gwt-ScrollPanel {
    padding-right: 15px; /* avoid systematic horizontal scroll when only the vertical one is needed */
}

.xmlui-JidsListWidget {
    padding-right: 20px; /* avoid systematic horizontal scroll when only the vertical one is needed */
    height: 300px;
}

/* Contacts in MUC */

.muc_contact {
    border-radius: 5px;
    background: #EDEDED;
    margin: 2px;
    width: 100%;
}

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

.presenceStatusPanel {
    margin: auto;
    text-align: center;
    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_right_side {
    background: #111 url('media/libervia/register_right.png');
    height: 100%;
    width: 100%;
}

.registerPanel_right_side .gwt-StackPanelItem {
    margin: 15px;
    height: auto;
    text-align: center;
    cursor: pointer;
    color: #fff;
	display: block;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.2);
}

.registerPanel_right_side .gwt-StackPanelItem-selected {
    display: none;
}

.registerPanel_content {
    margin: auto 50px;
}

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

.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: block;
    text-decoration: none;
    border-radius: 6px 6px 6px 6px;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    cursor: pointer;
    margin: 30px auto;
}

/* 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
    color: white;
    background-color: white;
    border-radius: 5px;
    padding: 0px 4px;
    top: 2px !important;
}

.widgetHeader_info img {
    padding: 2px;
    height: 16px;
}

.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 */

.borderWidgetOnDrag {
    background-color: lightgray;
    border: 1px dashed #000;
    border-radius: 1em;
}

.bottomBorderWidget {
    height: 10px !important;
}

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

.leftBorderWidget {
    float: right;
}

.rightBorderWidget {
    float: left;
}

/* Microblog */

.microblogPanel {
    width: 100%;
}

.microblogPanel_footer {
    cursor: pointer;
    text-align: center;
    background-color: #ededed;
    border-radius: 5px;
    width: 85%;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
}

.microblogPanel_footer a {
    color: blue;
}

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

.subPanel {
}

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

.mb_entry {
    min-height: 64px;
}

.mb_entry_header
{
    width: 100%;
}

.mb_entry_header_info {
    cursor: pointer;
    padding: 0px 5px 0px 5px;
}

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

.mb_entry_comments {
    float: right;
    padding-right: 5px;
}

.mb_entry_comments a {
    color: blue;
    cursor: pointer;
}

.mb_entry_author {
    font-weight: bold;
}

.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%;
    min-width: 350px;
}

.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;
}

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

/* START TAGS: styles are adapted from Dotclear */
.mblog_tags {
    background: #fbfbfb none repeat scroll 0% 0%;
    padding: 5px;
    margin: 8px 0px 5px 0px;
    overflow: hidden;
    border-radius: 5px;
}

.mblog_tags li {
    display: inline;
    font-size: small;
}

.mblog_tags li a {
    float: left;
    padding: 2px 8px 2px 18px;
    white-space: nowrap;
    color: #005D99;
    text-decoration: none;
    background: transparent url("../themes/default/images/flaticon/tag67.png") no-repeat scroll 0px 0px;
}
/* END TAGS */


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

.chatTextMe {
    margin-top: 7px;
    font-style: italic;
}

.chatTextInfo {
    margin-top: 7px;
    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;
}

.occupantsPanelCell {
    border-right: 2px dotted #ddd;
    padding-left: 5px;
    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;
}

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

.notifWarning {
    background-color: #DB1616;
}

/* Tab panel */

.gwt-TabPanel {
}

.gwt-TabPanelBottom {
    height: 100%;
}

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

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

.gwt-TabBar .gwt-TabBarRest {
}

.mainPanel .gwt-TabBar {
    z-index: 10;
}

.mainPanel .gwt-TabBar-oneTab {
    position: fixed;
    left: 0px;
    bottom: 0px;
    border: none;
}

.mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper {
    display: none;
}

.mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper:nth-child(3) {
    display: block;
}

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

.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);
    cursor: pointer;
    margin-right: 5px;
}

.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);
    cursor: default;
}

.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); 
}

.globalLeftArea {
    margin-top: 9px;
}


/* Misc */

.selected_widget .widgetHeader  {
    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;
}

.richTextTitle {
    margin-bottom: 5px;
}

.richTextTitle textarea {
    height: 22px;
    width: 99%;
    margin: auto;
    padding: 4px;
    display: block;
    border: 0px;
    border-radius: 5px;
}

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

.richTextArea {
    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;
}

/* List panel */

.itemButtonCell {
    width:55px;
}

.itemKeyMenu {
}

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

.listItem {
}

.listItem-box {
    cursor: pointer;
    width: auto;
    border: 1px solid #87B3FF;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: inset 0px 1px 0px rgba(135, 179, 255, 0.6);
    box-shadow: inset 0px 1px 2px rgba(135, 179, 255, 0.6);
    padding: 2px 1px;
}

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

.listItem-button {
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    border: none;
    background: transparent;
}

.listItem-button span {
    color: red;
}

/* Popup (context) menu */

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

/* Contact group manager */

.contactGroupEditor {
    width: 680px !important;
}

.contactGroupManager {
    width: 400px !important;
    height: 300px !important;
    margin: 20px 0px;
}

.contactGroupRoster {
    width: 280px !important;
    height: 300px !important;
    margin: 20px 0px;
}

.addContactGroupPanel {
   
}

.listPanel {
    vertical-align:top;
    padding: 10px 0px;
}

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

.toggleAssignedContacts {
    white-space: nowrap;
}

.listManager-button-cell {
    vertical-align: top;
    padding: 10px 0px;
    width: 55px;
    white-space: top;
}

.listManager-button-cell .group {
    border: 0px;
	margin: 0px 5px;
}

.tagsPanel-main {
    margin-bottom: 10px;
}

.tagsPanel-tags {
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
}

/* 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(#888888), to(#666666));
    background: -webkit-linear-gradient(top, #888888, #666666);
    background: linear-gradient(to bottom, #888888, #666666);
    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;
}


/* Some CSS to style the quote XHTML generated by Movim */

.mb_entry_dialog .bubble div.quote {
    display: block;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 2rem;
    box-sizing: border-box;
}

.mb_entry_dialog .bubble div.quote:before,
.mb_entry_dialog .bubble div.quote:after {
    content: '';
    display: none;
}

.mb_entry_dialog .bubble div.quote ul {
    display: flex;
    flex-flow: row wrap;
}

.mb_entry_dialog .bubble div.quote li {
    flex: 1 25%;
    list-style-type: none;
    padding-left: 0;
}

.mb_entry_dialog .bubble div.quote ul li > * {
    margin-right: 1rem;
}

.mb_entry_dialog .bubble div.quote li:first-child {
    flex: 1 75%;
}

@media screen and (max-width: 1024px) {
    .mb_entry_dialog .bubble div.quote li {
        flex: 1 100%;
    }
}

.mb_entry_dialog .bubble div.quote li img {
    max-height: 10rem;
    max-width: 100%;
    float: right;
}

.parameters {
}

.parameters .xmlui-JidsListWidget {
    height: auto;
}