对聊天室外观和功能进行大改，添加使用表情包功能

WebRoot/css/chart_style.css

@@ -1,9 +1,11 @@
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 
 body {
-	
-
+	background: url(../chartroom/images/top.jpg); 
+	height: 100%;
+	width: 100%;
 }
+
 td {
 	font-size: 9pt; line-height:144%;
 }
@@ -22,11 +24,9 @@ a {
 }
 .btn_orange {
 	font-size: 9pt;color: #FFFFFF;	
-	background-color: #FF6600;cursor: hand;padding:1px;height:19px;
-	border-top: 1px solid #FF6600;border-right:1px solid #666666;
-	border-bottom: 1px solid #666666;border-left: 1px solid #FF6600;
 	float:right;
-	magin-top:15px;
+	margin-top: -17px;
+	margin-right: 2px;
 }
 .btn_blank {
 	font-family: "<22><><EFBFBD><EFBFBD>";	font-size: 9pt;color: #FFFFFF;	
@@ -71,37 +71,82 @@ input {
 }
 .chatTop{
 	max-width:100%;
-	height:148;
-	background-image: url(../chartroom/images/top.jpg);
-
-
+	margin-top:25px;
+	padding-top:25px;
+	height:130px;
+	background-color:#317cb5;
+	
 }
-.message{max-width:200px;}
+
+.chatTopspan{
+	color: #fff;
+	font-size: 60px;
+}
+
 .chatsent{
-	padding:15px 0px 5px 50px;
-	background-color:#adadad;
+	padding:25px 0px 5px 0px;
+	background-color:#317cb5;
+}
 
+.chatsent2{
+	display:inline;
+	max-width: 50px;
+}
 
+.chatsenttable{
+	display:inline;
+	max-width: 50px;
+	margin-bottom: 500px;
 }
 .chatsentinput{
-	padding:0px 0px 10px 70px;
+	padding:0px 0px 10px 0px;
+}
+.chat1{
+	padding-left:100px;
+	padding-right:100px;
+	background-color:#317cb5;
 }
 .chat{
 	padding-top:20px;
+	padding-left:50px;
 	background-color:#f5f5f5;
-	overflow:scroll;
-	  height:500px;
-}
-.list{
-	padding:5px;
-	background-color:#eae8e7;
 	overflow-y:auto;
 	 overflow-x:auto;
-	  width:400px; 
 	  height:500px;
+	 max-width:100%; 
+ border-radius:10px 10px 10px 10px;
+}
+.list{
+	position:fixed;
+	margin-left:1170px;
+	top:180px;
+	padding:5px;
+	background-color:#3d87c6;
+	overflow-y:auto;
+	 overflow-x:auto;
+	  width:120px; 
+	  height:400px;
+	  border-radius:0px 10px 10px 0px;
 }
 .send{
 	margin-left:20px;
 	
 }
-
+.tempuser{
+	display:none;
+}
+.message{
+	width:400px; 
+	 height:100px;
+	  border-radius:10px 10px 10px 10px;
+}
+.mes{
+	background-color:#fff;
+	padding:5px 10px 5px 10px; 
+	display: inline;
+	width:400px; 
+	border-radius:10px 10px 10px 10px;
+}
+.me{
+	margin-top:2px;
+}

WebRoot/css/emoji.css

@@ -6,11 +6,18 @@
 .com_form p { height: 28px; line-height: 28px; position: relative; margin-top: 10px; }
 span.emotion { width: 42px; height: 20px; padding-left: 20px; cursor: pointer; }
 span.emotion:hover { background-position: 2px -28px }
-.qqFace { margin-top: 4px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
+.qqFace { margin-top: -320px;
+ background: #fff;
+  padding-top: 15px;
+  padding-left:25px;
+   border: 1px #dfe6f6 solid;
+   overflow-y:auto;
+	 overflow-x:auto;
+	  width:460px; 
+	  height:280px; }
 .qqFace table td { padding: 0px; }
 .qqFace table td img { cursor: pointer; border: 1px #fff solid; }
 .qqFace table td img:hover { border: 1px #0066cc solid; }
-#show { width: 770px; margin: 20px auto; background: #fff; padding: 5px; border: 1px solid #DDD; vertical-align: top; }
 .sub_btn { position: absolute; right: 0px; top: 0; display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */  *display: inline;
 vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e8f0de; border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); background: -moz-linear-gradient(top, #7db72f, #4e7d0e);  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
 }