@charset "utf-8";
/* CSS Document */

*{margin:0px;
  padding:0px;
}

.chatcover{width:200px;
           padding-top:10px;
	   background: #fff;
		   padding-bottom:10px;
           border-left:rgba(102,102,102,.6) solid 1px;
		   position:fixed;
		   top:0;
		   bottom:0;
		   right:0;
		   font-family:Arial, Helvetica, sans-serif;
		   z-index: 9999998;
}

.image_placeholder, .name_placeholder{float:left;
                   clear:right;
				   }

.image_placeholder{width:32px;
                   height:32px;
				   border:rgba(102,102,102,.3) solid 1px;
				   overflow:hidden;				   
}

.image_placeholder img{width:100%;
                       height:100%;
}

.name_placeholder{font-size:13px;
                  font-weight:bold;
				  color:rgba(51,51,51,.7);
				  margin-left:10px;
				  line-height: 34px;
				  cursor:pointer;

				  white-space:nowrap;
				  overflow:hidden;
				  width:135px;
				  text-overflow: ellipsis;
}

.chatcover ul{list-style:none;
              margin-left:10px;
			  }
.chatcover ul li{width:100%;
                 float:left;
				 margin-bottom:6px;
				 position:relative;
}

.on_off{position:absolute;
        top:15px;
		right:15px;
        width:8px;
		height:8px;
		border-radius:15px;
		
}

.online{background:rgba(0,204,0,1);}
.offline{background:rgba(102,102,102,.5);}

.search_chat{position:absolute;
             bottom:0;
			 height:31px;
			 width:100%;			 
			 border-top:rgba(102,102,102,.3) solid 1px;
			 border-bottom:rgba(102,102,102,.3) solid 1px;
}

.search_chat input[type=text]{width:155px;
                              height:27px;
							  border:none;
							  outline:none;
							  padding:2px .5%;
							  float:left;
}

.search_chat button{height:31px;
					border:none;
					background:rgba(102,102,102,.3);
					width:31px;
					float:left;
					cursor:pointer;
}

.content{/*height:200px;*/
		overflow: auto;		
		
		z-index:102;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box; 
		box-sizing: border-box;

}

.show_hide_butn{position:absolute;
           top:50%;
		   left:-91px;
		   width:150px;
		   height:24px;
		   padding-top:6px;
		   background:#333333;
		   -moz-border-radius:8px 8px 0px 0px;
		   -webkit-border-radius:8px 8px 0px 0px;
		   border-radius:8px 8px 0px 0px;
		   color:rgba(255,255,255,1);
		   text-transform:uppercase;
		   font-size:15px;
		   font-weight:bold;
		   text-align:center;
		   cursor:pointer;
		   display: block !important;
		   
		   
		   

			transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);


}

/*-- chat_box --*/

.chat_box{width:200px;
          height:250px;
          border:rgba(153,153,153,.2) solid 1px;
          position:fixed;
          bottom:0;
          right:250px;
          border-radius:5px 5px 0px 0px;
          overflow:hidden;
          background:rgb(229,229,229);
	  z-index: 998;
          }
.chat_box .name{width:89%;
                padding:5px 2% 5px 9%;
                background:#333333;
                color:rgba(255,255,255,1);
                font-family:Arial, Helvetica, sans-serif;
                position:relative;
}

.chat_box .name .on_off{
		top: 8px;
		left: 5px;
}

.close_this{position:absolute;
            right: 6px;
            top: 5px;
            font-size:16px;
            color:rgba(255,255,255,1);
            font-weight:bold;
            cursor:pointer;
}
.chat_chat{width:96%;
           height:150px;
           margin:0 auto;
           margin-left:4%;
           overflow:auto;
           padding:10px 0px;
}

.chat_chat ul{list-style:none;}

.chat_chat ul li{display: block;
    float: left;
    margin-bottom: 13px;
    width: 100%;
    }
.chat_txt{width:116px;
          padding:3px 6px;
          border-radius:2px;
          float:left;
          margin-left:6px;
          background:rgba(255,255,255,1);
          font-size:12px;
          font-family:Arial, Helvetica, sans-serif;
          color:rgba(102,102,102,.9);
          margin-top:6px;
          
          -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
          -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
           box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
}

.me .image_placeholder{float:right;}

.chat_box .search_chat{border:none;
                       width:99%;
}
.chat_box .search_chat textarea{width:99%;
                              height:27px;
                              border:none;
                              outline:none;
                              padding:2px .5%;
                              float:left;
                              margin:0 auto;
                              border:rgba(102,102,102,.5) solid 1px;
                              word-break:break-all;
                              resize:none;
}

.time_chat{width:96%;
           padding: 1px 2%;
	   float: left;
	   font-size: 10px;
	   color:#333333;
}