Some significant and much needed design changes enforced by Enguerrand.

4 files changed, 54 insertions, 26 deletions

diff --git a/webclient/index.html b/webclient/index.html
index 4d8ccc3..85ff64e 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -35,6 +35,7 @@
     </div>
     
     <div id="header">
+        <img src="style/images/logo.png" height=60 style="padding-left:20px"/>
     	<span id="logo">Alias</span>
     	<span id="status"></span>
     </div>
@@ -63,9 +64,8 @@
     </div>
     
     <div id='left'>
+        <h2>Contacts</h2>   
        	<div id='roster'>
-   		
-	   		<h2>Contacts</h2>
 	   		<input type="text" id="rosterfilter" name="test"/>
 	   		<ul>
 	   		</ul>
@@ -77,7 +77,8 @@
     		<ul class="tabbar">
     			<li><a href="#profile">Profile</a></li>
     		</ul>
-	   		<div id='profile' class="tab">
+    		<div style="clear:both"/>
+    		<div id='profile' class="tab">
 	   		</div>
  		</div>
     </div>
diff --git a/webclient/style/alias.css b/webclient/style/alias.css
index b925e39..9efdba2 100644
--- a/webclient/style/alias.css
+++ b/webclient/style/alias.css
@@ -161,41 +161,62 @@ input
 #header
 {
     margin: 0px;
-    margin-bottom: 0px;
+    margin-bottom: 20px;
     background-image: -moz-linear-gradient(top center, #F4F4F4, #C1C1C1);
     background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#D9D9D9));
     border-bottom: 1px solid #CDCDCD;
     box-shadow: 0px 5px 10px #434343;
+    height:70px;
 }
 
 
 #logo
 {
-    color: #3058A3;
+    color: #515159;
     font-family: "street";
-    font-size: 200%;
+    font-size: 300%;
     font-weight: bold;
-    padding-left: 20px;
+    padding-left: 30px;
     text-shadow: 0px 1px 0px #EBEBEB;
 }
 
 #left
 {
     margin: 0px;
+    margin-left: 8px;
     float: left;
-    width: 22%;
-    background-color: white;
+    width: 20%;
+    background-color: #F4F4F4;
     height: 95%;
     display: none;
+    border-radius: 5px;
+    box-shadow: 5px 5px 5px 0px #434343;
+}
+
+#left h2{
+    margin: 0px;
+    background-image: -moz-linear-gradient(top center, white, #D8D8D8);
+    background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#D9D9D9));
+    border-bottom: 1px solid #CDCDCD;
+    color: #3058A3;
+    font-family: "street";
+    font-size: 120%;
+    font-weight: bold;
+    padding-left: 10px;
+    text-shadow: 0px 1px 0px #EBEBEB;
+    border-radius: 10px 10px 0px 0px;    
 }
 
 #right
 {
+    border-radius: 5px;
     float: left;
-    width: 78%;
+    width: 75%;
     height: 95%;
     display: none;
-    background-color: white;
+    margin-left:2%;
+    margin-right:2%;
+    background-color: transparent;
     padding: 0px;
 }
 
@@ -267,7 +288,7 @@ input
 
 .roster-contact:hover
 {
-    background-color: #E5E9EE;
+    box-shadow: 2px 2px 2px #434343; 
 }
 
 .roster-name
diff --git a/webclient/style/images/logo.png b/webclient/style/images/logo.png
new file mode 100644
index 0000000..ee58f05
--- /dev/null
+++ b/webclient/style/images/logo.png
diff --git a/webclient/style/tabs.css b/webclient/style/tabs.css
index 2d12003..262f5c4 100644
--- a/webclient/style/tabs.css
+++ b/webclient/style/tabs.css
@@ -1,38 +1,42 @@
 ul.tabbar{
-    background-color: #E9E9E9;
-    border-bottom: 1px solid #9C9C9C;
-    border-top: 1px solid white;
+    background-color: transparent;
     padding: 0px;
     margin: 0px;
     list-style-type: none;
-    height: 35px;
+    height:20px;
 }
 
 ul.tabbar > li{
-    background-color: #B6B6B6;
+    background-image: -moz-linear-gradient(top center, white, #D8D8D8);
+    border-radius: 5px 5px 0px 0px;
     padding: 5px;
     margin: 0px;
-    margin-left: 0.5em;
+    margin-right: 1px;
     height: 20px;
     float: left;
     display: block;
-    margin-top: 4px;
+    margin-top: 0px;
+    width: 200px;
+    overflow: hidden;
+    color: #2D2D2D;
 }
 
 ul.tabbar > li.selected{
-    border-bottom: 1px solid white;
-    border-left: 1px solid #9C9C9C;
-    border-top: 1px solid #9C9C9C;
-    border-right: 1px solid #9C9C9C;
-    background-color: white;
+    background-image:none;
+    background-color: #3765BB;
+    box-shadow: 2px -2px 2px #434343; 
+    color: white;
 }
 
 ul.tabbar > li:hover{
-    background-color: #3058A3;
-    color: white;
+    color: #3765BB;
     cursor: pointer;
 }
 
+ul.tabbar > li.selected:hover{
+    color: #2D2D2D; 
+}
+
 ul.tabbar > li > span.tab-close{
     display: block;
     width: 15px;
@@ -63,4 +67,6 @@ ul.tabbar > li > a:focus{
     padding: 10px;
     height: 100%;
     display: none;
+    background-color: white;
+    box-shadow: 5px 5px 5px 0px #434343;
 }