Mercurial > libervia-web

view public/libervia.css @ 370:30d03d9f07e4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser_side: refactorization of the file tools.py: - tools.py renamed to html_tools.py - method setPresenceStyle moved to contact.py - classes DragLabel and LiberviaDragWidget moved to base_widget.py - class FilterFileUpload moved to file_tools.py
author souliane <souliane@mailoo.org>
date Sun, 23 Feb 2014 17:01:03 +0100
parents 678d1739bbf2
children 724a9a03ab02
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;
}

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

.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-editbox {
    width: 100%;
}

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

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

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

.richTextTitle {
    margin-bottom: 5px;
}

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

.richTextToolbar {
}

.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 */
.AdvancedListSelectableRow {
   cursor: pointer;
}
.AdvancedListSelectableRow-selected {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   color: red;
}