# HG changeset patch
# User Adrien Vigneron <adrienvigneron@mailoo.org>
# Date 1309384320 -7200
# Node ID dfc02690deb482615beebdd0b62d95377e6e5250
# Parent  5c363b6381278f096cfa75c66b75fb524375de29
browser side: CSS: header, unibox, tabs + drag'n' drop reworked

diff -r 5c363b638127 -r dfc02690deb4 libervia.py
--- a/libervia.py	Wed Jun 29 20:24:09 2011 +0200
+++ b/libervia.py	Wed Jun 29 23:52:00 2011 +0200
@@ -118,6 +118,7 @@
         self.libervia_widgets = set() #keep track of all actives LiberviaWidgets
         self.room_list = set() #set of rooms 
         self.mblog_cache = [] #used to keep blog entries in memory, to show them in new mblog panel
+        self.avatars_cache = {} #keep track of jid's avatar hash (key=jid, value=hash)
         #self.discuss_panel.addWidget(panels.EmptyPanel(self))
         self.discuss_panel.addWidget(panels.MicroblogPanel(self, accept_all=True))
         #self.discuss_panel.addWidget(panels.EmptyPanel(self))
diff -r 5c363b638127 -r dfc02690deb4 libervia.tac
--- a/libervia.tac	Wed Jun 29 20:24:09 2011 +0200
+++ b/libervia.tac	Wed Jun 29 23:52:00 2011 +0200
@@ -53,6 +53,7 @@
 TIMEOUT = 10 #Session's time out, after that the user will be disconnected
 LIBERVIA_DIR = "output/"
 MEDIA_DIR = "media/"
+AVATARS_DIR = "avatars/"
 CARDS_DIR = "games/cards/tarot"
 
 class ISATSession(Interface):
@@ -262,6 +263,14 @@
         profile = ISATSession(self.session).profile
         self.sat_host.bridge.tarotGamePlayCards(player_nick, referee, cards, profile)
 
+    def jsonrpc_getAvatar(self, jid):
+        """Get the avatar of a contact
+        @param jid: jid of contact from who we want the avatar
+        @return: path to the avatar image"""
+        cache = self.bridge.getCardCache(jid)
+        if cache.has_key('avatar'): 
+            return self.bridge.getAvatarFile(cache['avatar'])
+
 class Register(jsonrpc.JSONRPC):
     """This class manage the registration procedure with SàT
     It provide an api for the browser, check password and setup the web server"""
@@ -613,6 +622,7 @@
         root.putChild('blog', MicroBlog(self))
         root.putChild('css', ProtectedFile("server_css/"))
         root.putChild(os.path.dirname(MEDIA_DIR), ProtectedFile(self.media_dir))
+        root.putChild(os.path.dirname(AVATARS_DIR), ProtectedFile(os.path.join(self.local_dir, AVATARS_DIR)))
         self.site = server.Site(root)
         self.site.sessionFactory = LiberviaSession
 
diff -r 5c363b638127 -r dfc02690deb4 public/libervia.css
--- a/public/libervia.css	Wed Jun 29 20:24:09 2011 +0200
+++ b/public/libervia.css	Wed Jun 29 23:52:00 2011 +0200
@@ -40,7 +40,6 @@
     vertical-align: baseline;
     background: transparent;
     color: #444;
-
 }
 
 ol, ul { list-style: none; }
@@ -50,7 +49,6 @@
 q:before, q:after {
     content: '';
     content: none;
-
 }
 
 :focus { outline: 0; }
@@ -60,7 +58,6 @@
 table {
     border-collapse: collapse;
     border-spacing: 0;
-
 }
 
 /* pyjamas iframe hide */
@@ -99,13 +96,18 @@
 /* CSS Reset END */
 
 body {
-    background: #fff url('media/libervia/worldmap_gray.jpg');
+    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;
+    margin: 0 32px 0 20px;   
 }
 
 .gwt-MenuBar,.gwt-MenuBar-horizontal {
@@ -115,7 +117,6 @@
     width: 100%;
     height: 28px;
     margin: 0;
-    font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
     padding: 5px 5px 0 5px;    
     line-height: 100%;
     box-shadow: 0px 1px 4px #000;
@@ -208,10 +209,10 @@
 
 .gwt-MenuBar .gwt-MenuItem-selected {
     background: #cf2828 !important;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’) !important;
-    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)) !important;
-    background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important;
-    background-image: -o-linear-gradient(#cf2828,#b01e1e) !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;
@@ -249,7 +250,6 @@
 }
 .gwt-DialogBox {
   padding: 10px;
-  font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
   border: 1px solid #aaa;
   background-color: #fff;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff’, endColorstr=’#ccc’);
@@ -269,12 +269,12 @@
   font-size: 1.3em !important;
   background-color: #cf2828;
   background: #cf2828 !important;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828’, endColorstr=’#b01e1e’);
-  background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)) !important;
-  background: -moz-linear-gradient(top, #cf2828, #b01e1e) !important;
-  background-image: -o-linear-gradient(#cf2828,#b01e1e);
+  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;
+  padding: 3px 3px 4px 3px;
   margin: -10px;
   margin-bottom: 5px;
   font-weight: bold;
@@ -304,16 +304,19 @@
 	 margin: 10px 5px 10px 5px;
 	 color: #fff;
 	 font-weight: bold;
-	 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
+	 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=’#b01e1e’); 
-   background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 
-   background: -moz-linear-gradient(top, #cf2828, #b01e1e); 
-   background-image: -o-linear-gradient(#cf2828,#b01e1e);
+	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);  
 }
@@ -328,9 +331,8 @@
     -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
 	 padding: 3px 5px 3px 5px;
 	 margin: 10px 5px 10px 5px;
-	 color: #222;
-	 font-weight: bold;
-	 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
+	 color: #444;
+	 font-size: 1em;
 	 border: none;
 }
 
@@ -346,9 +348,8 @@
     -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.6);
 	 padding: 3px 5px 3px 5px;
 	 margin: 10px 5px 10px 5px;
-	 color: #222;
-	 font-weight: bold;
-	 font: normal 1em/1.4em Arial, Helvetica, sans-serif;
+	 color: #444;
+	 font-size: 1em;
 	 border: none;
 }
 
@@ -375,19 +376,18 @@
 
 div.contactBox {
     margin-left: 20px;
+    margin-top: 9px;
 }
 
 .contactTitle {
     color: #cf2828;
-    font-weight: bold;
-    font: normal 1.2em/1.4em Arial, Helvetica, sans-serif;
+    font-size: 1.7em;
     text-indent: 5px;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     width: 200px;
     height: 30px; 
 }
 .groupList {
-    font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
     width: 100%;    
 }
 
@@ -397,8 +397,8 @@
 
 .group {
     padding: 2px 15px;
-   margin: 0.2em 0 0.2em 5px;
-   display: inline-block;
+    margin: 5px;
+    display: inline-block;
     text-decoration: none;     
     font-weight: bold; 
     color: #e7e5e5;
@@ -413,9 +413,9 @@
     background-image: -o-linear-gradient(#eee,#aaa);
     color: #444;
     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-    box-shadow:inset 0px 1px 1px #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);  
+    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 {
@@ -431,8 +431,7 @@
    -o-transition: color 0.1s linear;  
 }
 .contact {
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 0.8em;
+    font-size: 1em;
     margin-top: 3px;
     padding: 3px 10px 3px 10px;
 }
@@ -451,28 +450,24 @@
     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; 
+    -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: auto;
-    width: 80%;
+    margin: 15px 22px 0 22px;
 }
 
 .uniBox {
-   margin-top: 1em;
-    width: 100%;
-    height: 50px;
+    height: 45px;
     padding: 5px;
-   font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #bbb;
     color: #444;
-   background: #fff url('media/libervia/unibox.png') top right no-repeat;    
-   border-radius: 9px 9px 9px 9px; 
-    -webkit-border-radius: 9px 9px 9px 9px; 
-    -moz-border-radius: 9px 9px 9px 9px;
+   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;
@@ -481,14 +476,19 @@
 .statusPanel {
     margin: auto;
     text-align: center;
-    width: 80%;
-    padding-top: 10px;
+    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 */
@@ -501,12 +501,15 @@
 
 .registerPanel_main div, .registerPanel_main button {
     color: #fff;
-    font-family: Verdana, sans-serif;
     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 {
@@ -538,7 +541,7 @@
 }
 
 .registerPanel_content div {
-   font-size: 0.8em;
+   font-size: 1em;
    margin-left: 10px;
    margin-top: 15px;
    font-style: bold;
@@ -550,7 +553,7 @@
    line-height: 25px;
    width: 200px;
    text-indent: 11px;
-   text-align:-webkit-center;
+
    background: #000;
    color: #aaa;
    border: 1px solid #222;
@@ -585,7 +588,7 @@
 
 .registerPanel_content .button:hover { background-color: #111; color: #fff; }
 .registerPanel_content .button:active    { top: 1px; }
-.registerPanel_content .button, .registerPanel_content .button:visited { font-size: 14px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); padding: 7px 10px 8px; }
+.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; }
 
@@ -602,7 +605,7 @@
 
 .widgetHeader {
     margin: auto;
-    height: 30px;
+    height: 25px;
     /*border: 1px solid #ddd;*/
     border-radius: 10px 10px 0 0; 
     -webkit-border-radius: 10px 10px 0 0; 
@@ -611,13 +614,15 @@
     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); 
+    background-image: -o-linear-gradient(#444,#222);
 }
 
 .widgetHeader_title {
     color: #fff;
-    text-align: center;
-    margin-top: 5px;
+    font-weight: bold;
+    text-align: left;
+    text-indent: 15px;
+    margin-top: 4px;
 }
 
 .widgetHeader_buttonsWrapper {
@@ -633,13 +638,12 @@
 
 .widgetHeader_buttonGroup img {
    background-color: transparent;
-    /*width: 25px;*/
-    height: 22px;
-   padding: 0;
-    border-bottom: 1px solid #666;
+    width: 25px;
+    height: 20px;
+    padding-top: 2px;
+    padding-bottom: 3px;
     border-left: 1px solid #666;
-   border-top: 0;
-   border-right: 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; 
@@ -656,30 +660,29 @@
 }
 
 .widgetHeader_settingButton {
-    border-radius: 0 0 0 10px !important; 
-    -webkit-border-radius: 0 0 0 10px !important; 
-    -moz-border-radius: 0 0 0 10px !important;          
+    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=’#b01e1e’); 
-    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 
-    background: -moz-linear-gradient(top, #cf2828, #b01e1e); 
-    background-image: -o-linear-gradient(#cf2828,#b01e1e);
+    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;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#fff&#888;, 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);     
+    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 */
@@ -740,12 +743,11 @@
 
 .chatContent {
     overflow: auto;
+    padding: 5px 15px 5px 15px;
 }
 
 .chatText {
-  /* font-size: smaller; */
-  font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
-  margin-top: 5px;
+  margin-top: 7px;
 }
 
 .chatTextInfo {
@@ -770,6 +772,8 @@
     border-radius: 15px 0 0 15px;
     background-color: #eee;
     color: #888;
+    border: 1px solid #ddd;
+    border-right: none;
 }
 
 .chat_text_nick {
@@ -778,20 +782,28 @@
     -moz-border-radius: 0 15px 15px 0;
     -webkit-border-radius: 10 15px 15px 0;
     border-radius: 0 15px 15px 0;
-    background-color: #ddd;
-    color: #555;
+    background-color: #eee;
+    color: #b01e1e;
+    border: 1px solid #ddd;
+    border-left: none;
 }
 
 .chat_text_mymess {
-    color: blue;
+    color: #006600;
 }
 
 .occupant {
-    padding-right: 15px;
+	 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: 1px solid lightGray;
+    border-right: 2px dotted #ddd;
     margin-left: 5px;
     margin-right: 10px;
     height: 100%;
@@ -811,54 +823,76 @@
 /* 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;
+    background: #ffb2b2;
+    border-radius: 1em 1em 1em 1em;
+    -webkit-border-radius: 1em 1em 1em 1em;
+    -moz-border-radius: 1em 1em 1em 1em;
+    border: 2px dotted #cf2828;
 }
 
 .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;
+	 background: #eee;
+	 border-radius: 0 0 0 0;
+    -webkit-border-radius: 0 0 0 0;
+    -moz-border-radius: 0 0 0 0;
 }
 
 /* Warning message */
 
 .warningPopup {
+	 font-size: 1em;
     width: 100%;
+    height: 26px;
     text-align: center;
-    background-color: white;
-    padding: 4px 0;
+    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;
+	 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); 
 }
 
 .targetGroup {
-    background-color: #00FFFB;
+	 color: #fff;
+    background-color: #68ba0f;
+    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: #72FF06;
+	 color: #fff;
+    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); 
 }
 
 .targetStatus {
+	 color: #666;
+    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 */
@@ -877,9 +911,9 @@
   position: fixed;
   z-index: 10;
   bottom: 0;
-  font: normal 0.8em/1.4em Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-decoration: none;
+  border-bottom: 3px solid #a01c1c;  
 }
 
 .gwt-TabBar .gwt-TabBarFirst {
@@ -889,14 +923,12 @@
 .gwt-TabBar .gwt-TabBarRest {
 }
 
-.mainTabPanel .gwt-TabBar {
-  margin-left: 20px;
+.mainTabPanel .gwt-TabBar {;
 }
 
 .mainTabPanel .gwt-TabBar .gwt-TabBarItem {
   cursor: pointer;
   margin-right: 5px;
-  
 }
 
 .mainTabPanel .gwt-TabBarItem div {
@@ -913,9 +945,9 @@
   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: 3px 15px 3px 15px;
-  border-radius: 1em 1em 1em 1em;
-  -webkit-border-radius: 1em 1em 1em 1em;
+  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);
 }
@@ -923,16 +955,16 @@
 .mainTabPanel .gwt-TabBarItem-selected {
   color: #fff;
   background-color: #cf2828;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#b01e1e’);
-  background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
-  background: -moz-linear-gradient(top, #cf2828, #b01e1e);
-  background-image: -o-linear-gradient(#cf2828,#b01e1e);
+  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: 3px 15px 3px 15px;
-  border-radius: 1em 1em 1em 1em;
-  -webkit-border-radius: 1em 1em 1em 1em;
+  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);
 }
@@ -940,18 +972,18 @@
 .mainTabPanel div.gwt-TabBarItem:hover {
   color: #fff;
   background-color: #cf2828;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828′, endColorstr=’#b01e1e’);
-  background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e));
-  background: -moz-linear-gradient(top, #cf2828, #b01e1e);
-  background-image: -o-linear-gradient(#cf2828,#b01e1e);
+  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: 3px 15px 3px 15px;
-  border-radius: 1em 1em 1em 1em;
-  -webkit-border-radius: 1em 1em 1em 1em;
+  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);
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
 }
 
 .mainTabPanel .gwt-TabBar .gwt-TabBarItem-selected {
@@ -966,10 +998,10 @@
      * (messages entered in unibox will be sent to this widget)
      */
     background-color: #cf2828;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#cf2828&#888;, endColorstr=’#b01e1e’); 
-    background: -webkit-gradient(linear, left top, left bottom, from(#cf2828), to(#b01e1e)); 
-    background: -moz-linear-gradient(top, #cf2828, #b01e1e); 
-    background-image: -o-linear-gradient(#cf2828,#b01e1e);
+    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 {