.page {clear: left!important; padding: 0}
.side-col{width: 180px;}

.cards.cards-user {margin: 0; padding: 10px; position: relative;}
.col-card {width: 33%; float: left; padding: 10px}
.col-card .card{border-color: #ddd;}

.card-user {overflow: hidden;}
.card-user > .card-heading {border-bottom: 1px solid #e5e5e5; text-shadow: 1px 1px 20px rgba(255,255,255,0.85); background: #b2d9e4;  background: #f5f5f5}
.card-user.gender-f > .card-heading {background: #f6b9b2; background: #f5f5f5}
.card-user.gender-f > .card-heading > .avatar:before {background: #fe6553;}
.card-user > .card-heading {position: relative; padding: 0; height: 100px;}
.card-user > .card-heading > img.bg
{
  display: none;
  position: absolute; left: -30%; top: -220%; width: 150%; max-width: inherit; z-index: 1;
  transition: all .5s ease-out;
  -webkit-filter: blur(15px); /* Chrome, Opera */
  -moz-filter: blur(15px);
  -ms-filter: blur(15px);
  -o-filter: blur(15px);
  filter: blur(15px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=15, MakeShadow=false); /* IE6~IE9 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.card-user > .card-heading > img.bg {display: none}}
noindex:-o-prefocus, .card-user > .card-heading > img.bg{display: none}
@-moz-document url-prefix(){.card-user > .card-heading > img.bg {display: none}}
.card-user > .card-heading > .cover {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: #fff; opacity: 0.4; filter: alpha(opacity=40) }
.card-user > .card-heading > .avatar {background: #eee; width: 48px; height: 48px; position: absolute; left: 20px; top: 25px; display: block; border-radius: 50%; z-index: 3; border: 1px solid #ddd; border-color: rgba(255,255,255,0.25); box-shadow: 1px 1px 20px rgba(255,255,255,0.25);}
.card-user > .card-heading > .title {position: absolute; z-index: 4; left: 85px; padding: 15px 0; color: #000}
.card-user > .card-heading > .title > h4.user-realname {font-size: 18px; margin: 12px 0 7px}
.card-user > .card-heading > .title > .user-info {color: #444;}
.card-user > .card-heading > .title > .user-realname > .action {display: inline-block; margin-left: 10px; position: relative;}
.card-user > .card-heading > .title > .user-realname > .action > .btn-vcard {padding: 0; display: block; color: #666; width: 26px; height: 26px; line-height: 30px; text-align: center; background: transparent; z-index: 11}
.card-user > .card-heading > .title > .user-realname > .action > .btn-vcard:hover {background: rgba(255,255,255,1); color: #333; text-decoration: none;}

.card-user > .card-content {height: 130px; padding-top: 10px;}

.contact-info {margin: 0; white-space: wrap;}
.contact-info > dt, .contact-info > dd{display: inline-block;}
.contact-info > dt{width: 60px; text-align: right; font-weight: normal; margin-right: 5px;}
.contact-info > dd {line-height: 22px;}

.card-user  .vcard {position: absolute; height: 100px; width: 100px; right: -110px; top: -100%; top: -100%\0; z-index: 10; opacity: 0; box-shadow: 1px 0 5px rgba(0,0,0,0.24)}
@media not screen and (1){.card-user > .vcard {top: -100%;}}
.card-user  .vcard:before {display: block; content: ' '; display: block; width: 0; height: 0; border: 11px solid transparent; position: absolute; right: 100px; top: 30px; border-right-color: #ddd;}
.card-user  .vcard > img {max-width: 95px; max-height: 95px; margin-top: 2px; border-radius: 10px; cursor: pointer;}
.card-user  .vcard > .icon-remove {width: 20px; height: 20px; cursor: pointer; position: absolute; display: block; line-height: 20px; right: 10px; top: 10px; color: #eee}
.card-user.show  .vcard {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;background: #fff}