.button-friend {
	cursor: pointer;
    height: 100%;
    display: block;
    line-height: 22px;
	z-index: 1;
}
	.button-friend .button-wrapper {
		float: left;
	}
	.button-friend:hover > .button-wrapper {
		border-color: #00AADD;
	}
	.button-friend:hover > .button-wrapper .icon-friend, .button-friend:hover > .button-wrapper .icon-friend:before {
		background-color: #00AADD;
	}

.icon-friend, .icon-paid {
	width: 3px;
    height: 13px;
    background-color: #D8D8D8;
    display: inline-block;
    margin-bottom: -1px;
    margin-left: -1px;
    position: relative;
    border-radius: 3px;
	transition: transform .1s;
}
	.icon-friend:before, .icon-paid:before {
		content: '';
		width: 3px;
		height: 13px;
		background-color: #D8D8D8;
		margin-left: -2px;
		margin-top: 0px;
		transform: rotate(-90deg);
		position: absolute;
		border-radius: 3px;
		transition: height .1s;
	}


.button-friend.following .button-wrapper, .button-friend.friends .button-wrapper  {
	border-color: #00AADD;
}
	.button-friend.following:hover .button-wrapper, .button-friend.friends:hover .button-wrapper  {
		border-color: #D8D8D8;
	}
	.button-friend.following:hover .text-friend, .button-friend.friends:hover .text-friend  {
		color: #D8D8D8;
	}
	.button-friend.friends .text-friend, .button-friend.follower:hover .text-friend  {
		color: #00AADD;
	}
.button-friend.following .icon-friend, .button-friend.friends .icon-friend, .icon-paid {
	background-color: #00AADD;
	transform: rotate(45deg);
	margin-left: 3px;
}
	.button-friend.following:hover .icon-friend, .button-friend.friends:hover .icon-friend {
		background-color: #D8D8D8;
		transform: rotate(-45deg);
		margin-left: 0px;
	}
	.button-friend.following .icon-friend:before, .button-friend.friends .icon-friend:before, .icon-paid:before {
		height: 7px;
		background-color: #00AADD;
		margin-left: -5px;
		margin-top: 8px;
	}
	.icon-paid {
		margin-top: 5px;
		background-color: #d8d8d8;
	}
	.icon-paid:before {
		background-color: #d8d8d8;
	}
	.button-wrapper:hover > .icon-paid, .button-wrapper:hover > .icon-paid:before {
		background-color: #00AADD;
	}
	.button-friend.following:hover .icon-friend:before, .button-friend.friends:hover .icon-friend:before {
		background-color: #D8D8D8;
		transform: rotate(-90deg);
		margin-left: -2px;
		margin-top: 0;
		height: 13px;
		position: absolute;
	}
	.menu-box .button-friend.friends:hover .icon-friend:before {
		margin-top: -1px;
	}

	.button-friend.comment-body-button.friends:hover .icon-friend:before {
		margin-top: -1px;
	}

.text-friend {
    height: 100%;
    line-height: 28px;
	padding-left: 4px;
	font-weight: bold;
    width: 70px;
    display: inline-block;
    text-align: left;
    text-overflow: ellipsis;
	font-size: .8em;
	position: relative;
}
.total-likes.text-friend {
    line-height: 43px;
}

.profile-hovercard .text-friend {
}
.total-likes.text-friend:after {
	content: attr(data-title);
    display: inline-block;
    padding-left: 4px;
    position: absolute;
    font-weight: normal;
    top: -16px;
    left: 0px;
    font-size: .8em;
	font-family: "ITCAvantGardePro-Md", "Lato", Arial, Helvetica, sans-serif;
}
.comment-body-button {
	position: absolute;
	right: 10px;
	top: 10px;
	height: 30px;
	width: 100px;
	text-align: center;
}
.comment-body-button .icon-friend:before {
	margin-left: -2px;
}
.comment-body-button .text-friend {
	font-weight: bold;
    font-size: .85em;
    font-variant: small-caps;
}

.profile-hovercard .button-friend.following:hover .icon-friend:before, 
.profile-hovercard .button-friend.friends:hover .icon-friend:before {
    margin-top: -1px
}