Mercurial > libervia-web

view public/libervia.css @ 263:d3c734669577

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
browser_side: improvements for lists and contact groups manager: - use DockPanel to deal with UI problems - fixed issues with the autocomplete list - avoid duplicate contacts in a contact list - signal invalid contacts with a red border - check for invalid contacts in the form before saving - better genericity for the class DragAutoCompleteTextBox
author souliane <souliane@mailoo.org>
date Mon, 11 Nov 2013 12:48:33 +0100
parents 0e7f3944bd27
children 2a93f8e6f989
line wrap: on
line source

/*
Libervia: a Salut à Toi frontend
Copyright (C) 2011  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,
h1, h2, h3, h4, h5, h6, 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, ol, ul, 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;
}

ol, ul { list-style: none; }
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;
}

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

.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 {
    font-size: 1em;
    margin-top: 3px;
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
	background-color: rgb(175, 175, 175);
}

.contactConnected {
    color: #3c7e0c;
    font-weight: bold;
}

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

/* 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-top: 5px;
    min-height: 30px;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
    font-size: 1.2em;
    background-color: #eee;
    border-bottom: 1px solid #ddd;
}

.status {
    font-style: italic;
    font-weight: bold;
    color: #666;
}

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

.subPanel {
}

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

.mb_entry {
	min-height: 64px;
}

.mb_entry_header
{
    background: #AFAFAF;
}

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

.mb_entry_author {
    font-weight: bold;
}

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

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

.mb_entry_timestamp {
    font-style: italic;
}

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

.chatTextInfo {
    font-style: italic;
}

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

.radiocol_left_panel {
    min-width: 80px;
    margin: 5px;
    border-right-style: dotted;
    border-right-width: 2px;
}

.radiocol_metadata_lbl {
    font-weight: bold;
}

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

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

/* URLs */

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

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

/* Rich Text Editor */

.richTextEditor {
	width: 600px;
	max-width:600px;
	min-width: 600px;
	margin-top: 9px;
	margin-left:18px;
}

.richTextToolbar {
	margin: 15px auto auto 0px;
}

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

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

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

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

/* Popup (context) menu */

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

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