Card-based Changyan comment box design

changyan_mod.css

#SOHU_MAIN .head-img-w img, #SOHU_MAIN .header-login, #SOHU_MAIN span.header-pho, #SOHU_MAIN img.list-avatar-wap {
	border-radius: 5px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.22);
        border: 1px solid #b9baa6 !important;
	margin-left: 10px !important;
}
#SOHU_MAIN .title-user-w .user-wrap-w{
	top: 42px !important;
}
#SOHU_MAIN .post-wrap-w, #SOHU_MAIN #cy-cmt-list, #SOHU_MAIN .module-mobile-cmt-header, #SOHU_MAIN .list-container-wap {
	border: none !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	border-radius: 2px !important;
	background: #F1F4F5 !important;
	-webkit-transition: all .15s ease-out;
	-moz-transition: all .15s ease-out;
	-o-transition: all .15s ease-out;
	transition: all .15s ease-out;
}
#SOHU_MAIN .post-wrap-w:hover, #SOHU_MAIN #cy-cmt-list:hover, #SOHU_MAIN .module-mobile-cmt-header:hover, #SOHU_MAIN .list-container-wap:hover {
	box-shadow: 0px 8px 18px rgba(0,0,0,0.12), 0px 3px 14px rgba(0,0,0,0.24);
	background-color: #fcfcfc;
}
#SOHU_MAIN .post-wrap-w {
	padding: 5px 0 10px 0 !important;
}
#SOHU_MAIN .post-wrap-main {
	border-top:none !important;
	border-color: #e0e0e0 !important;
	background-image:none !important;
}
#SOHU_MAIN .post-wrap-border-t,.post-wrap-border-l,.post-wrap-border-r, .module-cmt-footer, ul.type-lists li.active, .cy-logo {
	display:none !important;
}
#SOHU_MAIN .platform-login .cy-logo {
        display: block !important;
}
#SOHU_MAIN .issue-btn-w button.btn-fw {
	margin-right: 8px !important;
	background-image:none !important;
	background-color: #607D8B !important;
        color: #fff;
        border-radius: 2px;
}
#SOHU_MAIN .issue-btn-w button.btn-fw:after {
	content: "\53d1\5c04";
}
#SOHU_MAIN .module-cmt-list {
	position: relative;
}
#SOHU_MAIN .cmt-list-type {
	top: 5px;
    right: 10px;
    z-index: 999;
	margin-top:10px !important;
}
#SOHU_MAIN #cy-cmt-list {
	top: 15px;
    position: relative;
	padding-top: 36px !important;
}
#SOHU_MAIN .list-container-wap {
	margin-top:10px !important;
}
#SOHU_MAIN #cy-cmt-list:empty, #SOHU_MAIN .list-container-wap:empty {
	display: none!important;
}
#SOHU_MAIN .block-title-gw {
    position: absolute;
    z-index: 999;
    top: -10px;
    left: 10px;
}
#SOHU_MAIN .list-newest-w {
	margin-top: -45px !important;
}
#SOHU_MAIN div.block-cont-gw {
	padding: 13px 0 11px 0 !important;
	margin: 0 10px !important;
	border-top: 1px solid #e0e0e0 !important;
	border-bottom: none !important;
}
#SOHU_MAIN div.block-cont-gw:last-child {
	*border-bottom: none !important;
}
#SOHU_MAIN .cont-head-gw .head-img-gw img{
	border-radius: 5px !important;
	border: 1px solid #b9baa6 !important;
	width: 40px !important;
	height: 40px !important;
}
#SOHU_MAIN .module-mobile-cmt-header .comment-input {
	background: none !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
}
#SOHU_MAIN .list-header-wap {
	display: none;
}
#SOHU_MAIN div.list-item-wap {
	padding: 0 !important;
	margin: 0 10px !important;
	border-bottom: .083333333em solid #dfdfdf !important;
}
#SOHU_MAIN div.list-item-wap:last-child {
	border-bottom: none !important;
}
#SOHU_MAIN .header-comment-number {
	font-size: 12px !important;
}
#SOHU_MAIN span.header-pho {
	margin-top: 10px !important;
}
#SOHU_MAIN .header-login {
    background-color: #ecf0f1 !important;
}
#SOHU_MAIN span.header-login {
        width: 40px !important;
        height: 40px;
        display: block;
        font-weight: normal !important;
        font-size: 12px !important;
        text-align: center;
}
#SOHU_MAIN .list-content-wrapper-wap {
	border-bottom: none !important;
}