@charset "utf-8";
/*定位*/
.tl{text-align:left}
.red {
    color: #F00;
}

.tc{text-align:center}
.tr{text-align:right}
.p5 {
    padding: 5px;
}

.bc{margin-left:auto;margin-right:auto;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{
    clear: both;
    display: block;
    height: 0.5px;
}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
*html .clearfix{height:1%}
.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
.oh{ overflow:hidden};

/*文字排版*/
.f12{font-size:12px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}

.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}

.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}

.unl{text-decoration:underline}
.no_unl{text-decoration:none}


/*长度高宽*/
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w900{width:900px}
.w{width:100%}

.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}

/*边距*/
.m10{margin:10px}
.m15{margin:15px}
.m20{margin:20px}
.m30{margin:30px}

.p10{padding:10px}
.p15{padding:15px}
.p20{padding:20px}
.p30{padding:30px}



.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}

.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}

.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}

.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}

.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pt100{padding-top:100px}

.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}

.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}

.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}















/*部分组件*/
.alex_table{
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}


.chat_user_list
{
    height:350px;
    overflow-y: scroll;
}

.chat_user_list a
{
    display:block;
    height:30px;
    line-height:30px;
    padding-left: 20px;
}

.chat_user_list a:hover
{
    background-color:#FCFCFC;
}

.MsgShow:after {
    content: '.';
    visibility: hidden;
    height: 0;
    clear: both;
}
.MsgShow {
    box-shadow: 0 0 3px #ccc;
    border-radius: 4px;
    padding:7px;
    position:relative;
    margin-top:10px;
}
.timeMsg {
    font-size: 10px;
    font-weight: bold;
    color: #666;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-top:10px;
}
.msgCon {
    word-break: break-strict;
    font-size:13px;
    line-height:27px;
}
.timeMsg b{
    letter-spacing:5px;
    font-size:13px;
    color:#000;
    text-shadow:0 0 3px #ccc;
}
#incomming {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    margin: 0 7px;
    padding-bottom:100px;
}

.myBackColor {
    background-color: #3276B1;
    color:#FFFFFF;
}
.myFloat {
    float: right;
}
.myTimeShow {
    text-align: right;
}

.otherBackColor {
    background-color: #739E73;
    color: #FFFFFF;
}
.otherFloat {
    float: left;
}
.otherTimeShow {
    text-align: left;
}
.arrow{
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    z-index: 0;
    /*	transform: rotateZ(45deg);*/
}
.myArrow{
    right: 10px;
    background-color: #3276B1;

}
.otherArrow{
    left: 10px;
    background-color: #739E73;
    color: #FFFFFF;
}
.status {
    font-size: 12px;
    font-weight: normal;
    color: #fff;
    background-color: #525252;
    text-align: center;
    width: 100%;
    display: none;
}

.message_box{
    min-height:500px;
    height:500px;
    overflow:hidden;
}
#send_input {
    line-height: 30px;
    height: 80px;
    width: 100%;
    border: 1px solid #CCCCCC;
}
.send_box
{
    padding-top: 20px;
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #CCCCCC;
    margin-top:10px;
}
#incomming
{
    min-height:480px;
    height:480px;
    overflow:scroll;
    overflow-x: hidden;
    padding-bottom:50px;
    padding:20px;
}
#info{
    padding-left:20px;

    text-align:left;

}
/* 表格内 加<p class='overflow'>xxx</p> 可控制文本长度*/
.overflow {
    white-space: nowrap;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    line-height:18px;
    margin:0px;
}