Mercurial > libervia-web

view public/libervia.css @ 148:8635bc9db9bf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
added parameter management to test XMLUI, but it's currently deactivated for security reasons (need some configuration options) + separated mainTabPanel CSS from LiberviaTabPanel
author Goffi <goffi@goffi.org>
date Sun, 09 Dec 2012 23:42:08 +0100
parents 88512fbeb128
children a201e368fc86
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;
}

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

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

.contactsChooser {
    text-align: center;
}

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

div.contactBox {
    margin-left: 20px;
    margin-top: 9px;
}

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

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

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

.mb_entry {
	min-height: 64px;
}

.mb_entry_header
{
    background: #AFAFAF;
}

.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 {
	color:#fff;
	position: relative;
	padding: 15px;
	margin: 2px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	background: #cf2828;
}

.bubble:after {
	content: "";
	position: absolute;
	bottom: auto;
	left: -20px;
	top: 16px;
	border-width: 10px 20px 10px 0;
	border-style: solid;
	border-color: transparent #cf2828 ;
   display: block; 
   width: 0;
}

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

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


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