Mercurial > libervia-web

view public/libervia.css @ 439:d52f529a6d42

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser side: use of new log system (first draft): - configuration is hardcoded in libervia.py, it will change in the (hopefuly) near future - log level is DEBUG for the moment, will be changed to INFO when configuration will not be hardcoded anymore - the basic log backend is used, in the future, a console.debug/info/etc should be used instead. A log widget which HTML colors is also an option
author Goffi <goffi@goffi.org>
date Thu, 08 May 2014 17:21:34 +0200
parents 0c4547587637
children 17259c2ff96f
line wrap: on
line source

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

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

/* Misc Pyjamas stuff */

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

.gwt-MenuBar,.gwt-MenuBar-horizontal {
  /*background-color: #01FF78;
  border: 1px solid #87B3FF;
  cursor: default;*/
    width: 100%;
    height: 28px;
    margin: 0;
    padding: 5px 5px 0 5px;    
    line-height: 100%;
    box-shadow: 0px 1px 4px #000;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    border: 1px solid #ddd;
    border-radius: 0 0 1em 1em;
    -webkit-border-radius: 0 0 1em 1em;
    -moz-border-radius: 0 0 1em 1em;
    background-color: #222;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’);
    background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
    background: -moz-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(#444444,#222222);
    display: inline-block;
}

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

.gwt-MenuItem img {
    padding-right: 2px;
}

.gwt-MenuBar-horizontal .gwt-MenuItem-selected {
     background-color: #eee;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #aaa);
    background-image: -o-linear-gradient(#eee,#aaa);
    color: #444;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);    
    cursor: pointer;
}

.menuSeparator {
    width: 100%;
}

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

.gwt-MenuBar {
    background-color: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background: -moz-linear-gradient(top, #fff, #ccc);
    background-image: -o-linear-gradient(#fff,#ccc);
    /*display: none;*/
    height: 100%;
    min-width: 148px;
    margin: 0;
    padding: 0;
    /*min-width: 148px;
    top: 28px;*/
    border: solid 1px #aaa;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.gwt-MenuBar table {
    width: 100%;
    display: inline-table;
}

.gwt-MenuBar .gwt-MenuItem {
    padding: 8px 15px;
}


.gwt-MenuBar .gwt-MenuItem-selected {
    background: #cf2828 !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
    background: -moz-linear-gradient(top, #cf2828, #981a1a) !important;
    background-image: -o-linear-gradient(#cf2828,#981a1a) !important;
    color: #fff !important;
    -webkit-border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    transition: color 0.2s linear;
    -webkit-transition: color 0.2s linear; 
    -moz-transition: color 0.2s linear; 
    -o-transition: color 0.2s linear; 
    cursor: pointer;
}

/*.menuLastPopup div tr:first-child td{
    border-radius: 0 0 9px 9px !important; 
    -webkit-border-radius: 0 0 9px 9px !important; 
    -moz-border-radius: 0 0 9px 9px !important; 
}*/

.gwt-MenuBar tr:last-child td {
    border-radius: 0 0 9px 9px !important;
    -webkit-border-radius: 0 0 9px 9px !important;
    -moz-border-radius: 0 0 9px 9px !important;
}


.menuLastPopup .gwt-MenuBar {
    border-top-right-radius: 9px 9px 9px 9px;
    -webkit-border-top-right-radius: 9px 9px 9px 9px;
    -moz-border-top-right-radius: 9px 9px 9px 9px;
}

.gwt-AutoCompleteTextBox {
  width: 80%;
  border: 1px solid #87B3FF;
  margin-top: 20px;
}
.gwt-DialogBox {
  padding: 10px;
  border: 1px solid #aaa;
  background-color: #fff;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
  background: -moz-linear-gradient(top, #fff, #ccc);
  background-image: -o-linear-gradient(#fff,#ccc);
  border-radius: 9px 9px 9px 9px; 
  -webkit-border-radius: 9px 9px 9px 9px; 
  -moz-border-radius: 9px 9px 9px 9px;
  box-shadow: 0px 1px 4px #000;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); 
}

.gwt-DialogBox .Caption {
  height: 20px;
  font-size: 1.3em !important;
  background-color: #cf2828;
  background: #cf2828 !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#981a1a’);
  background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)) !important;
  background: -moz-linear-gradient(top, #cf2828, #981a1a) !important;
  background-image: -o-linear-gradient(#cf2828,#981a1a);
  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; 
  -webkit-border-radius: 7px 7px 0 0; 
  -moz-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-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 1px 4px #000;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444&#888;, endColorstr=’#222’); 
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 
    background: -moz-linear-gradient(top, #444, #222); 
    background-image: -o-linear-gradient(#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; 
    -moz-transition: color 0.2s linear; 
    -o-transition: color 0.2s linear;
}

.gwt-DialogBox .gwt-button:hover {
	background-color: #cf2828;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 
   background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 
   background: -moz-linear-gradient(top, #cf2828, #981a1a); 
   background-image: -o-linear-gradient(#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-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    box-shadow:inset 0px 1px 4px #000;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
	 padding: 3px 5px 3px 5px;
	 margin: 10px 5px 10px 5px;
	 color: #444;
	 font-size: 1em;
	 border: none;
}

.gwt-DialogBox .gwt-ListBox {
    overflow: auto;
    width: 100%;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    box-shadow:inset 0px 1px 4px #000;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
	 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.contactBox {
    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; 
    -webkit-border-radius: 1em 1em 1em 1em; 
    -moz-border-radius: 1em 1em 1em 1em;
    background-color: #eee; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa&#888;); 
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); 
    background: -moz-linear-gradient(top, #eee, #aaa); 
    background-image: -o-linear-gradient(#eee,#aaa);
    color: #444;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    box-shadow: 0px 1px 1px #000;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

div.group:hover {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    background-color: #cf2828;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 
    background: -moz-linear-gradient(top, #cf2828, #981a1a); 
    background-image: -o-linear-gradient(#cf2828,#981a1a);
    -webkit-transition: color 0.1s linear; 
   -moz-transition: color 0.1s linear; 
   -o-transition: color 0.1s linear;  
}
.contact {
    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 */
.contact-connected {
    color: #3c7e0c;
    font-weight: bold;
}
.contact-unavailable {
}
.contact-chat {
    color: #3c7e0c;
    font-weight: bold;
}
.contact-away {
    color: brown;
    font-weight: bold;
}
.contact-dnd {
    color: red;
    font-weight: bold;
}
.contact-xa {
    color: red;
    font-weight: bold;
}
/* END - contact presence status */

.selected {
    color: #fff;
    background-color: #cf2828;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 
    background: -moz-linear-gradient(top, #cf2828, #981a1a); 
    background-image: -o-linear-gradient(#cf2828,#981a1a);
    border-radius: 1em 1em 1em 1em; 
    -webkit-border-radius: 1em 1em 1em 1em; 
    -moz-border-radius: 1em 1em 1em 1em;
    -webkit-transition: color 0.2s linear; 
    -moz-transition: color 0.2s linear; 
    -o-transition: color 0.2s linear;
}

.messageBox {
    width: 100%;
    padding: 5px;
    border: 1px solid #bbb;
    color: #444;
    background: #fff url('media/libervia/unibox_2.png') top bottom no-repeat;
    box-shadow:inset 0 0 10px #ddd;
    -webkit-box-shadow:inset 0 0 10px #ddd;
    -moz-box-shadow:inset 0 0 10px #ddd;
    border-radius: 0px 0px 10px 10px;
    height: 25px;
    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;    
    box-shadow:inset 0 0 10px #ddd;
    -webkit-box-shadow:inset 0 0 10px #ddd; 
    -moz-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;
    box-shadow: 0px 1px 4px #000;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.registerPanel_tabs .gwt-Label {
    margin-top: 20px;
    margin-left: 15px;
    cursor: pointer;
}

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

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

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

.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-style: 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;
   -webkit-border-radius: 15px 15px 15px 15px;
   -moz-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;
   -moz-border-radius: 6px 6px 6px 6px;
   -webkit-border-radius: 6px 6px 6px 6px;
   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
   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: 1px solid #ddd;*/
    border-radius: 10px 10px 0 0; 
    -webkit-border-radius: 10px 10px 0 0; 
    -moz-border-radius: 10px 10px 0 0; 
    background-color: #222;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444&#888;, endColorstr=’#222’); 
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 
    background: -moz-linear-gradient(top, #444, #222); 
    background-image: -o-linear-gradient(#444,#222);
}

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

.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-top: 2px;
    padding-bottom: 3px;
    border-left: 1px solid #666;
    border-top: 0;
    border-radius: 0 10px 0 0; 
    -webkit-border-radius: 0 10px 0 0; 
    -moz-border-radius: 0 10px 0 0; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555&#888;, endColorstr=’#333’); 
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); 
    background: -moz-linear-gradient(top, #555, #333); 
    background-image: -o-linear-gradient(#555,#333);
}

.widgetHeader_closeButton {
    border-radius: 0 10px 0 0 !important; 
    -webkit-border-radius: 0 10px 0 0 !important; 
    -moz-border-radius: 0 10px 0 0 !important;
}

.widgetHeader_settingButton {
    border-radius: 0 0 0 0 !important; 
    -webkit-border-radius: 0 0 0 0 !important; 
    -moz-border-radius: 0 0 0 0 !important;          
}

.widgetHeader_buttonGroup img:hover {
    background-color: #cf2828;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 
    background: -moz-linear-gradient(top, #cf2828, #981a1a); 
    background-image: -o-linear-gradient(#cf2828,#981a1a);
}

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

/* BorderWidgets */

.bottomBorderWidget {
    height: 10px !important;
}

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

/* Microblog */

.microblogPanel {
/*    margin: auto;
    width: 95% !important;*/
    width: 100%;
}

.microblogNewButton {
    width: 100%;
}

.subPanel {
}

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

.mb_entry {
	min-height: 64px;
}

.mb_entry_header
{
    background: #AFAFAF;
    cursor: pointer;
}

.selected_widget .selected_entry .mb_entry_header
{
    background: #cf2828;
}

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

.mb_entry_avatar {
	float: left;
}

.mb_entry_avatar img {
	width: 48px;
	height: 48px;
	padding: 8px;
}

.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;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    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: 20;
    width: 20;
}

.bubble textarea{
    width: 100%;
}

.mb_entry_timestamp {
    font-style: italic;
}

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

/* 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;
    -moz-border-radius: 15px 0 0 15px;
    -webkit-border-radius: 15px 0 0 15px;
    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;
    -moz-border-radius: 0 15px 15px 0;
    -webkit-border-radius: 10 15px 15px 0;
    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;
    -webkit-border-radius: 1em 1em 1em 1em !important;
    -moz-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;
    -webkit-border-radius: 1em 1em 0 0 !important;
    -moz-border-radius: 1em 1em 0 0 !important;
}

.dragover.widgetBody {
    border-radius: 0 0 1em 1em !important;
    -webkit-border-radius: 0 0 1em 1em !important;
    -moz-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;
    /*background-color: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’fff′, endColorstr=’#ccc’);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background: -moz-linear-gradient(top, #fff, #ccc);
    background-image: -o-linear-gradient(#fff,#ccc); */

}

.warningTarget {
    font-weight: bold;
   
}

.targetPublic {
    background-color: red; /*#cf2828;*/
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’);
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
    background: -moz-linear-gradient(top, #cf2828, #981a1a);
    background-image: -o-linear-gradient(#cf2828,#981a1a); */
}

.targetGroup {
    background-color: #00FFFB;
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’68ba0f′, endColorstr=’#40700d’);
    background: -webkit-gradient(linear, left top, left bottom, from(#68ba0f), to(#40700d));
    background: -moz-linear-gradient(top, #68ba0f, #40700d);
    background-image: -o-linear-gradient(#68ba0f,#40700d); */
}

.targetOne2One {
    background-color: #66FF00;
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’);
    background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
    background: -moz-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(#444444,#222222);*/ 
}

.targetStatus {
    background-color: #fff;
    /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’fff′, endColorstr=’#ccc’);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    background: -moz-linear-gradient(top, #fff, #ccc);
    background-image: -o-linear-gradient(#fff,#ccc); */
}

/* 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;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#444′, endColorstr=’#222’);
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
  background: -moz-linear-gradient(top, #444, #222);
  background-image: -o-linear-gradient(#444,#222);
  box-shadow: 0px 1px 4px #000;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 4px 15px 4px 15px;
  border-radius: 1em 1em 0 0;
  -webkit-border-radius: 1em 1em 0 0;
  -moz-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;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’);
  background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
  background: -moz-linear-gradient(top, #cf2828, #981a1a);
  background-image: -o-linear-gradient(#cf2828,#981a1a);
  box-shadow: 0px 1px 4px #000;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 4px 15px 4px 15px;
  border-radius: 1em 1em 0 0;
  -webkit-border-radius: 1em 1em 0 0;
  -moz-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;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#981a1a’);
  background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
  background: -moz-linear-gradient(top, #cf2828, #981a1a);
  background-image: -o-linear-gradient(#cf2828,#981a1a);
  box-shadow: 0px 1px 4px #000;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 4px 15px 4px 15px;
  border-radius: 1em 1em 0 0;
  -webkit-border-radius: 1em 1em 0 0;
  -moz-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;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#981a1a’); 
    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a)); 
    background: -moz-linear-gradient(top, #cf2828, #981a1a); 
    background-image: -o-linear-gradient(#cf2828,#981a1a);
}

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

.marginAuto {
    margin: auto;
}

.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-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 1px 4px #000;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	border: none;
	-webkit-transition: color 0.2s linear; 
    -moz-transition: color 0.2s linear; 
    -o-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-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    box-shadow: inset 0px 1px 4px rgba(135, 179, 255, 0.6);
    -webkit-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6);
    -moz-box-shadow:inset 0 1px 4px rgba(135, 179, 255, 0.6);
    padding: 2px 1px;
    margin: 0px;
    color: #444;
    font-size: 1em;
}

.recipientTextBox-invalid {
    box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6);
    -webkit-box-shadow:inset 0 1px 4px rgba(255, 0, 0, 0.6);
    -moz-box-shadow:inset 0 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;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’444444′, endColorstr=’#222222’);
    background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
    background: -moz-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(#444444,#222222);
    text-decoration: none;    
    font-weight: bold;
    height: 100%;
    color: #e7e5e5;
    padding: 3px 15px;
    /*display: block;*/
    border-radius: 1em 1em 1em 1em;
    -webkit-border-radius: 1em 1em 1em 1em;
    -moz-border-radius: 1em 1em 1em 1em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition: color 0.2s linear; 
    -moz-transition: color 0.2s linear; 
    -o-transition: color 0.2s linear;
}

.gwt-StackPanel .gwt-StackPanelItem:hover {
    background-color: #eee;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #aaa);
    background-image: -o-linear-gradient(#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;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#eee’, endColorstr=’#aaa′);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #aaa);
    background-image: -o-linear-gradient(#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;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-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;
}