--- a/src/browser/public/libervia.css	Thu Feb 05 12:05:32 2015 +0100
+++ b/src/browser/public/libervia.css	Wed Mar 18 16:15:18 2015 +0100
@@ -137,10 +137,13 @@
 .header {
     background-color: #eee;
     border-bottom: 1px solid #ddd;
+    width: 100%;
+    height: 64px;
 }
 
-.menuContainer {
-    margin: 0 32px 0 20px;   
+.mainPanel {
+    width: 100%;
+    height: 100%;
 }
 
 .mainMenuBar {
@@ -148,7 +151,6 @@
     background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
     background: -webkit-linear-gradient(top, #444444, #222222);
     background: linear-gradient(to bottom, #444444, #222222);
-    width: 100%;
     height: 28px;
     padding: 5px 5px 0 5px;    
     border: 1px solid #ddd;
@@ -157,6 +159,10 @@
     -webkit-box-shadow: 0px 1px 4px #000;
     box-shadow: 0px 1px 4px #000;
     display: inline-block;
+    position: absolute;
+    left: 20px;
+    right: 20px;
+    width: auto;
 }
 
 .mainMenuBar .gwt-MenuItem {
@@ -342,7 +348,6 @@
     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; 
@@ -350,7 +355,12 @@
     transition: color 0.2s linear;
 }
 
-.gwt-DialogBox .gwt-button:hover {
+.gwt-DialogBox .gwt-button:enabled {
+    cursor: pointer;
+    color: #fff;
+}
+
+.gwt-DialogBox .gwt-button:enabled:hover {
     background-color: #cf2828;
     background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#981a1a));
     background: -webkit-linear-gradient(top, #cf2828, #981a1a);
@@ -420,16 +430,9 @@
 }
 /* Contact List */
 
-div.contactPanel {
+div.contactList {
     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;
+    margin-top: 9px;
 }
 
 .contactTitle {
@@ -447,13 +450,14 @@
     border: 0;
     padding: 0;
     font-size: large;
+    margin-top: 9px;
 }
 
-.groupList {
+.groupPanel {
     width: 100%;    
 }
 
-.groupList tr:first-child td {
+.groupPanel tr:first-child td {
     padding-top: 10px;
 }
 
@@ -495,7 +499,7 @@
     background: #EDEDED;
 }
 
-.contactBox img {
+.contactBox img, .muc_contact img {
     width: 32px;
     height: 32px;
     border-radius: 5px;
@@ -539,6 +543,14 @@
     background-color: rgb(175, 175, 175);
 }
 
+/* Contacts in MUC */
+
+.muc_contact {
+    border-radius: 5px;
+    background: #EDEDED;
+    margin: 2px;
+}
+
 /* START - contact presence status */
 .contactLabel-connected {
     color: #3c7e0c;
@@ -610,10 +622,9 @@
     height:45px;
 }
 
-.statusPanel {
+.presenceStatusPanel {
     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;
@@ -813,6 +824,12 @@
 
 /* BorderWidgets */
 
+.borderWidgetOnDrag {
+    background-color: lightgray;
+    border: 1px dashed #000;
+    border-radius: 1em;
+}
+
 .bottomBorderWidget {
     height: 10px !important;
 }
@@ -821,6 +838,14 @@
     width: 10px !important;
 }
 
+.leftBorderWidget {
+    float: right;
+}
+
+.rightBorderWidget {
+    float: left;
+}
+
 /* Microblog */
 
 .microblogPanel {
@@ -1040,10 +1065,9 @@
     white-space: nowrap;
 }
 
-.occupantsList {
+.occupantsPanelCell {
     border-right: 2px dotted #ddd;
-    margin-left: 5px;
-    margin-right: 10px;
+    padding-left: 5px;
     height: 100%;
 }
 
@@ -1148,9 +1172,6 @@
 
 /* Tab panel */
 
-.liberviaTabPanel {
-}
-
 .gwt-TabPanel {
 }
 
@@ -1164,13 +1185,6 @@
     border-bottom: 3px solid #a01c1c;  
 }
 
-.mainTabPanel .gwt-TabBar {
-    z-index: 10;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-}
-
 .gwt-TabBar .gwt-TabBarFirst {
     height: 100%;
 }
@@ -1178,12 +1192,28 @@
 .gwt-TabBar .gwt-TabBarRest {
 }
 
-.liberviaTabPanel .gwt-TabBar {;
+.mainPanel .gwt-TabBar {
+    z-index: 10;
+}
+
+.mainPanel .gwt-TabBar-oneTab {
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+    border: none;
 }
 
-.liberviaTabPanel .gwt-TabBar .gwt-TabBarItem {
-    cursor: pointer;
-    margin-right: 5px;
+.mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper {
+    display: none;
+}
+
+.mainPanel .gwt-TabBar-oneTab .gwt-TabBarItem-wrapper:nth-child(3) {
+    display: block;
+}
+
+.liberviaTabPanel {
+    width: 100%;
+    height: 100%;
 }
 
 .liberviaTabPanel .gwt-TabBarItem div {
@@ -1201,6 +1231,8 @@
     padding: 4px 15px 4px 15px;
     border-radius: 1em 1em 0 0;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    margin-right: 5px;
 }
 
 .liberviaTabPanel .gwt-TabBarItem-selected {
@@ -1214,6 +1246,7 @@
     padding: 4px 15px 4px 15px;
     border-radius: 1em 1em 0 0;
     text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+    cursor: default;
 }
 
 .liberviaTabPanel div.gwt-TabBarItem:hover {
@@ -1229,10 +1262,6 @@
     text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
 }
 
-.liberviaTabPanel .gwt-TabBar .gwt-TabBarItem-selected {
-    cursor: default;
-}
-
 .globalLeftArea {
     margin-top: 9px;
 }
@@ -1357,23 +1386,23 @@
 
 /* Recipients panel */
 
-.recipientButtonCell {
+.itemButtonCell {
     width:55px;
 }
 
-.recipientTypeMenu {
+.itemKeyMenu {
 }
 
-.recipientTypeItem {
+.itemKey {
     cursor: pointer;
     border-radius: 5px;
     width: 50px;
 }
 
-.recipientPanel {
+.itemPanel {
 }
 
-.recipientTextBox {
+.itemTextBox {
     cursor: pointer;
     width: auto;
     border-radius: 5px 5px 5px 5px;
@@ -1385,32 +1414,26 @@
     font-size: 1em;
 }
 
-.recipientTextBox-invalid {
+.itemTextBox-invalid {
     -webkit-box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6);
     box-shadow: inset 0px 1px 4px rgba(255, 0, 0, 0.6);
     border: 1px solid rgb(255, 0, 0);
 }
 
-.recipientRemoveButton {
+.itemRemoveButton {
     margin: 0px 10px 0px 0px;
     padding: 0px;
     border: 1px dashed red;
     border-radius: 5px 5px 5px 5px;
 }
 
-.recipientRemoveIcon {
+.itemRemoveIcon {
     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;
 }
@@ -1448,6 +1471,12 @@
     vertical-align:middle;
 }
 
+.contactGroupPanel.dragover {
+    border-radius: 5px !important;
+    background: none repeat scroll 0% 0% rgb(135, 179, 255) !important;
+    border: 1px dashed rgb(35,79,255) !important;
+}
+
 .toggleAssignedContacts {
     white-space: nowrap;
 }