p,ul,li{margin: 0; padding: 0; list-style: none;}
a {
    text-decoration: none;
}
.comment-wrap * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:after, .clearfix:before {
    display: table;
    content: " ";
    clear: both;
}

/* 表情 */
.face-main-box{
    display: -webkit-box;
    transform: translate3d(0%, 0px, 0px);
    -webkit-transition:all 0.5s;
}
.nav-tab-face{  margin: 0 auto;
    height: 18px;
    line-height: 18px;
    text-align: center;
}

.nav-tab-face >li,
.comment-list .nav-tab-face >li,
.comment-list .comment-list .nav-tab-face >li {
    display: inline-block;
    border: none;
}

.nav-tab-face >li a {
    display: inline-block;
    margin: 2px 6px;
    width: 40px;
    height: 6px;
    line-height: 0;
    text-align: center;
    color: transparent;
    background: #dedede;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.nav-tab-face >li.current a {
    background-color: #f36565;
}
.replyer-panel .emoji{
    padding:0 10px;
}

.replyer-panel .emoji > i {font-size:22px;}

.content-tab-face{width: 100%; display: none}

.face-main-box .current {display: block}

.face-main{display:none;}

.face.face_1 {
    background-image: url(../images/face/face-1.png?1.2);
}
.face.face_2 {
    background-image: url(../images/face/face-2.png?1.2);
}
.face.face_3 {
    background-image: url(../images/face/face-3.png?1.2);
}
.face.face_4 {
    background-image: url(../images/face/face-4.png?1.2);
}
.face {
    display: inline-block;
    margin: 4px 0;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    -webkit-background-size: 25px auto;
    background-size: 25px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor:pointer;
}
.face.icon_0 {
    background-position: 50% 0
}

.face.icon_1 {
    background-position: 50% -25px
}

.face.icon_2 {
    background-position: 50% -50px
}

.face.icon_3 {
    background-position: 50% -75px
}

.face.icon_4 {
    background-position: 50% -100px
}

.face.icon_5 {
    background-position: 50% -125px
}

.face.icon_6 {
    background-position: 50% -150px
}

.face.icon_7 {
    background-position: 50% -175px
}

.face.icon_8 {
    background-position: 50% -200px
}

.face.icon_9 {
    background-position: 50% -225px
}

.face.icon_10 {
    background-position: 50% -250px
}

.face.icon_11 {
    background-position: 50% -275px
}

.face.icon_12 {
    background-position: 50% -300px
}

.face.icon_13 {
    background-position: 50% -325px
}

.face.icon_14 {
    background-position: 50% -350px
}

.face.icon_15 {
    background-position: 50% -375px
}

.face.icon_16 {
    background-position: 50% -400px
}

.face.icon_17 {
    background-position: 50% -425px
}

.face.icon_18 {
    background-position: 50% -450px
}

.face.icon_19 {
    background-position: 50% -475px
}

.face.icon_20 {
    background-position: 50% -500px
}

.face.icon_21 {
    background-position: 50% -525px
}

.face.icon_22 {
    background-position: 50% -550px
}

.face.icon_23 {
    background-position: 50% -575px
}

.face.icon_24 {
    background-position: 50% -600px
}

.face.icon_25 {
    background-position: 50% -625px
}

.face.icon_26 {
    background-position: 50% -650px
}

.face.icon_27 {
    background-position: 50% -675px
}

/*--编译后的样式--*/
.replyer-emoji-box .face{overflow: hidden;
    text-indent: -300px;
    float: none;
    display: inline-block;
    margin: 0 2px;
    width: 22px;
    height: 22px;
    vertical-align: top;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;}
.replyer-emoji-box .face.icon_0 {
    background-position: 50% 0
}
.replyer-emoji-box .face.icon_1 {
    background-position: 50% -22px
}
.replyer-emoji-box .face.icon_2 {
    background-position: 50% -44px
}
.replyer-emoji-box .face.icon_3 {
    background-position: 50% -66px
}
.replyer-emoji-box .face.icon_4 {
    background-position: 50% -88px
}
.replyer-emoji-box .face.icon_5 {
    background-position: 50% -110px
}
.replyer-emoji-box .face.icon_6 {
    background-position: 50% -132px
}
.replyer-emoji-box .face.icon_7 {
    background-position: 50% -154px
}
.replyer-emoji-box .face.icon_8 {
    background-position: 50% -176px
}

.replyer-emoji-box .face.icon_9 {
    background-position: 50% -198px
}
.replyer-emoji-box .face.icon_10 {
    background-position: 50% -220px
}
.replyer-emoji-box .face.icon_11 {
    background-position: 50% -242px
}
.replyer-emoji-box .face.icon_12 {
    background-position: 50% -264px
}
.replyer-emoji-box .face.icon_13 {
    background-position: 50% -286px
}
.replyer-emoji-box .face.icon_14 {
    background-position: 50% -308px
}
.replyer-emoji-box .face.icon_15 {
    background-position: 50% -330px
}
.replyer-emoji-box .face.icon_16 {
    background-position: 50% -352px
}
.replyer-emoji-box .face.icon_17 {
    background-position: 50% -374px
}
.replyer-emoji-box .face.icon_18 {
    background-position: 50% -396px
}
.replyer-emoji-box .face.icon_19 {
    background-position: 50% -418px
}
.replyer-emoji-box .face.icon_20 {
    background-position: 50% -440px
}
.replyer-emoji-box .face.icon_21 {
    background-position: 50% -462px
}
.replyer-emoji-box .face.icon_22 {
    background-position: 50% -484px
}
.replyer-emoji-box .face.icon_23 {
    background-position: 50% -506px
}
.replyer-emoji-box .face.icon_24 {
    background-position: 50% -528px
}
.replyer-emoji-box .face.icon_25 {
    background-position: 50% -550px
}
.replyer-emoji-box .face.icon_26 {
    background-position: 50% -572px
}
.replyer-emoji-box .face.icon_27 {
    background-position: 50% -594px
}

/* 评论框 */
.comment-wrap {
    font-size: 14px;
}
.comment-wrap a:link, .comment-wrap a:visited {
    color: #777;
    text-decoration: none;
}
.comment-wrap .comment-editor {
    height: auto;
    display: block;
    position: relative;
    padding-left: 70px;
}

.comment-wrap .more {
    font-size: 15px;
    height: 40px;
    color: #666;
    line-height: 40px;
    text-align: center;
    font-family: "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1";
    display: none;
}


.comment-wrap .comment-alert {
    display: block;
    height: 40px;
    line-height: 40px;
    width:220px;
    position: fixed;
    font-size: 14px;
    top: 50%;
    left: 50%;
    text-align: center;
    border-radius: 4px;
    margin-top: -20px;
    margin-left: -110px;
    z-index: 9999;
    background-color: rgba(0,0,0,.6);
    color:#fff;
    display: none;
}

.comment-editor .head-face{
    width: 60px;
    height: 120px;
    text-align: center;
    position: absolute;
    top:0;
    left: 5px;
}
.comment-editor .head-face img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 8px #c0c0c0;
}
.comment-editor .head-face p{
    font-size: 12px;
    font-family: "微软雅黑";
}

.comment-editor .content{
    height: 120px;
}

.comment-wrap .cont-box{
    width: 100%;
    height: 60px;
    border: 1px solid #f36565;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    float: left;
    position: relative;
}
.comment-wrap .cont-box .text{
    margin: 0;
    font: inherit;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 12px;
    font-size: 14px;
    color: #555;
    border-radius: 5px;
    resize:none;
    border: 0 none;
}

.comment-wrap .cont-box .text:focus {
    outline: none;
}

.comment-wrap .tools-box{
    width: 100%; height: 31px;
    border: 1px solid #f36565;
    margin-top: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    float: left;
    position: relative;
}

.comment-wrap .tools-box .face-main {
    position: absolute;
    width: 290px;
    min-height:180px;
    top:25px;
    left: 25px;
    padding: 5px;
    border: 1px solid #f36565;
    box-shadow: 2px 2px 3px #666;
    background-color: #fff;
    z-index: 999;
}

.cont-box .inner,
.reply-box .inner {
    position: absolute;
    height: 30px;
    line-height:30px;
    width: 260px;
    left: 50%;
    margin-left: -120px;
    top:50%;
    margin-top: -15px;
    text-align: center;
    display: none;
    color: #777;
}

.cont-box .error {
    color:#e73c31;
}

.tools-box .operator-box-btn{ width: 100%; height: 30px; float: left;  }
.tools-box .operator-box-btn .face-icon{display: block; float: left; margin-top:-1px; margin-left: 10px; font-family: "微软雅黑"; font-size: 22px; color: #f36565;  cursor: pointer;}
.tools-box .operator-box-btn .img-icon{display: block; float: left; margin-top:-11px; margin-left: 10px; font-family: "微软雅黑"; font-size: 33px; font-weight: lighter; color: #f36565; cursor: pointer;}
.tools-box .submit-btn{ width: 15%; height: 30px; float: right; }

.tools-box .submit-btn a{
    width: 100%;
    height: 100%; font-family: "微软雅黑";
    font-size: 14px; color: #fff;
    display: block;
    text-align: center;
    line-height: 30px;
    border: none; outline: none; background-color: #f36565;
}

.comment-wrap .reply-editor {
    margin-top: 10px;
    padding-left: 180px;
}

.comment-list .comment-list .reply-editor {
    padding-left: 130px;
}

.reply-editor .cont-box {
    height: 36px;
}

.reply-editor .content {
    height: 80px;
}

.reply-editor .reply-form-top {
    width: 18px;
    height: 10px;
    position: absolute;
    top: -9px;
    right: 23px;
    color: #efefef;
    overflow: hidden;
    z-index: 1;
}

.reply-editor .reply-form-top em, 
.reply-editor .reply-form-top span {
    display: block;
    font-size: 17px;
    font-style: normal;
    font-family: "SimSun";
    height: 11px;
    overflow: hidden;
}

.reply-editor .reply-form-top em {
    color: #f36565;
}

.reply-editor .reply-form-top span {
    color: #FCFCFB;
    margin-top: -10px;
}


/* 回复信息 */
.list-warp {
    display: block;
}

.comment-list li {
    display: block;
    border-bottom: 1px dashed #c0c0c0;
}

.comment-list li .item-warp {
    display: block;
    padding: 6px 0 7px 70px;
    position: relative;
    margin-bottom: 5px;
}


.comment-list li .comment-list,
 .comment-list li .comment-list li .item-warp  {
    padding-left:60px;
}

.comment-list li .comment-list li {
    border-bottom: none;
    border-top: 1px dotted #c0c0c0;
}

.comment-list .head-face {
    position: absolute;
    top:10px;
    left: 10px;
    text-align: center;
}

.comment-list .head-face img{
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    box-shadow: 0 0 8px #c0c0c0;
}

.comment-list .comment-list .head-face img {
    width: 40px; 
    height: 40px; 
}

.comment-list .reply-cont{
    display: block;
}

.comment-list .reply-cont .username{
    color: #ff8500;
    margin-bottom: 5px;
}

.comment-list .reply-cont .comment-body{
    color: #999;
    display: block;
    overflow: hidden;
    line-height: 27px;
}

.comment-list .reply-cont .comment-body .face {
    margin: 2px 0;
}

.comment-list .reply-cont .comment-footer{
    font-size: 12px;
    color: #c0c0c0;
    margin-top: 6px;
}

.comment-list .comment-footer .comment-actions {
    display: block;
    padding: 3px 0;
}

.comment-list .comment-footer .btns {
    float: right;
}

.comment-list .item .btns a {
    display: inline-block;
    padding-left:22px;
    font-size: 14px;
    line-height: 16px;
}

.comment-list .item .digg em {
    font-style: normal;
    font-family: arial;
    padding-left: 3px;
    display: inline-block;
}
.comment-list .btns a.digg {
    background: url('../images/digg.png') no-repeat 0 0;
    margin-right: 5px;
    border-right: 1px solid #999;
    padding-right: 10px;
}

.comment-list .btns a.reply {
    background: url('../images/reply.png') no-repeat 0 0;
    margin-left: 5px;
}