Basic tab system and design :

* clicking on a contact creates a tab containing chat layout

1 files changed, 45 insertions, 3 deletions

diff --git a/webclient/style/alias.css b/webclient/style/alias.css
index 48106ca..235dd76 100644
--- a/webclient/style/alias.css
+++ b/webclient/style/alias.css
@@ -1,8 +1,14 @@
+html
+{
+	height:100%;	
+}
+
 body
 {
 	padding: 0px;
 	margin: 0px;
 	font-family: sans-serif;
+	height:100%;
 }
 
 div
@@ -18,13 +24,14 @@ input
 
 #login
 {
-	display: hidden;	
+	display: none;	
 }
 #bottom
 {
 	position:fixed;
 	bottom:0px;
 	width:100%;
+	clear:both;
 }
 
 #bottomup
@@ -52,10 +59,37 @@ input
 	border-top:1px solid black;
 }
 
-#roster
+
+#left
+{
+	float:left;	
+	width:20%;
+}
+
+#right
 {
 	float:left;
-	width:250px;
+	width:80%;
+	height:100%;
+}
+
+#tabs{
+	height:90%;	
+}
+
+.chat-messages{
+	border:1px solid #dddddd;
+	height:80%;
+	margin-bottom:10px;	
+}
+
+.chat-input{
+	border:1px solid #dddddd;
+	width:100%;	
+}
+
+#roster
+{
 	height:100%;
 	font-size:0.8em;
 	padding:5px;
@@ -69,13 +103,21 @@ input
 
 .roster-contact
 {
+	-moz-transition-property : background-color, box-shadow;
+	-moz-transition-duration: 0.5s;
+	-webkit-transition-property : background-color;
+	-webkit-transition-duration: 1s;
+	-o-transition-property : background-color;
+	-o-transition-duration: 1s;
 	border-bottom : 1px dotted black;
 	padding: 5px;
+	cursor: pointer;
 }
 
 .roster-contact:hover
 {
 	background-color: #E5E9EE;
+	box-shadow: 5px 0px 5px #888;
 }
 
 .roster-name