/*==========: Messages Section :===========*/
.messageWrap{ margin-top:20px; border:1px solid #dadada; background:#FFF;}

/*User Col*/
.usercol{float:left; width:300px; height:595px; border-right:1px solid #dadada; position:relative; background:#fff;}
.usercol .userlist{margin:0;}
.searchbox{padding:5px 10px; background:#018564; text-align:center; position:relative;}
.searchbox input[type="text"]{border:1px solid #00513d; width:92%; padding: 5px 2%; background:#fff url(../images/search-ico.png) no-repeat right; color:#777;}


/*User List*/
.usercol .userwrp{overflow:auto; width:100%; height:550px;}
.usercol .userallList{list-style:none;}
.usercol .userallList li{border-top:1px solid #ddd; position:relative;}
.usercol .userallList li a{display:block; padding:10px; background:#fff;  color:#018564;}
.usercol .userallList li a:hover, .usercol .userallList li a.active{background:#018564;  color:#fff;}
.usercol .userallList li .imgbox{float:left; width:32px; height:32px; overflow:hidden;}
.usercol .userallList li .userinfo{padding-left:40px;}
.usercol .userallList li .userinfo h1{font-size:13px;}
.usercol .userallList li .userinfo p{font-size:12px; color:#666;}
.usercol .userallList li a:hover .userinfo p, .usercol .userallList li a.active .userinfo p{color:#fff;}
.usercol .userallList li .msgcount{background:#ddd; padding:5px; width:20px; height:20px; font-size:12px; font-weight:bold; position:absolute; border-radius:25px; color:#000; top:50%; right:15px; text-align:center; margin-top:-15px; line-height:20px;}


/*Chat Col*/
.chatCol{float:right; width:695px; height:595px; background:#fff;}
.chatCol .chatuserWrp{position:relative; padding:11px 20px 10px 20px; border-bottom:1px solid #dadada;}
.chatCol .chatuserWrp .userpic{float:left; width:40px; height:40px; border:1px solid #bdbdbd; overflow:hidden;}
.chatCol .chatuserWrp .usercontent{padding-left:55px;}
.chatCol .chatuserWrp .usercontent h2{font-size:16px; color:#555;}
.chatCol .chatuserWrp .usercontent .addlist{display:inline; margin:2px 0 0 10px;}
.chatCol .chatuserWrp .usercontent .removelist{display:inline; margin:2px 0 0 10px;}
.chatCol .chatuserWrp .usercontent p{font-size:12px; color:#555;}
.chatCol .chatuserWrp .usercontent a{background:url(../images/btn-bg.jpg) repeat-x; border:1px solid #999; padding: 2px 10px; display:inline-block; color:#333; font-size:12px; font-weight:bold; margin:10px 5px 0 0; text-shadow:1px 1px #fff; float:right;}
.chatCol .chatuserWrp .usercontent a:hover{background:#e0e0e0;}

.chatCol .historyBar{background:#eee; border-top:3px solid #3253a2; border-bottom:1px solid #dadada; padding: 5px 15px; line-height:30px;}
.chatCol .historyBar .chathistory{float:right; font-size:12px; color:#666;}
.chatCol .historyBar .chathistory span{color:#333; padding: 0 5px; font-weight:bold;}
.chatCol .historyBar .chathistory a{color:#06F; padding: 0 5px;}
.chatCol .historyBar .myprofile{font-size:16px; font-weight:bold; color:#06F; float:left; background:url(../images/profile.png) no-repeat left; padding-left:30px;}
.chatCol .historyBar a:hover{color:#333; text-decoration:underline;}

.chatCol .chatListBox{height:445px; overflow:auto;}
.chatCol .chatListBox .chatList{list-style:none;}
.chatCol .chatListBox .chatList li{padding:5px 10px 5px 20px; display:block; border-bottom:1px solid #eee;}
.chatCol .chatListBox .chatList li img{width:32px; float:left;}
.chatCol .chatListBox .chatList li .chattxt{padding-left:40px;}
.chatCol .chatListBox .chatList li .chatcont{font-size:12px; position:relative; color:#555; line-height:18px;}
.chatCol .chatListBox .chatList li .chattxt .chatarrow{position:absolute; background:url(../images/chat-arrow.png) no-repeat; width:12px; height:13px; top:7px; left:-12px; display:none;}
.chatCol .chatListBox .chatList li .chattxt .chatarrow2{position:absolute; background:url(../images/chat-arrow2.png) no-repeat; width:12px; height:13px; top:7px; right:-12px; display:none;}
.chatCol .chatListBox .chatList li .time{font-size:11px; color:#ccc; font-style:italic;}


.chatCol .chatForm{border-top:1px solid #dadada; padding:10px 20px 0 20px;}
.chatCol .chatForm .smilyBox{margin:0;}
.chatCol .chatForm .smilyBox img{width:24px;}
.chatCol .chatForm .writeBox{margin-top:5px;}
.chatCol .chatForm .writeBox textarea{border:1px solid #ccc; width:88%; height:50px; float:left; box-shadow:1px 1px 1px #ccc; resize: none; overflow:auto; color:#555;}
.chatCol .chatForm .writeBox input[type="submit"]{border:1px solid #ccc; height:55px; float:left; box-shadow:1px 1px 1px #ccc; margin-left:10px; padding: 0 10px;
background:#efefef;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#efefef));
background: -webkit-linear-gradient(#fff, #efefef);
background: -moz-linear-gradient(#fff, #efefef);
background: -ms-linear-gradient(#fff, #efefef);
background: -o-linear-gradient(#fff, #efefef);
background: linear-gradient(#fff, #efefef); font-weight:bold; font-size:14px; color:#333;
}