/*
	Theme Name: Custom Blue
	Description: Add extra in comments
	Author: Lokoyote
	Author URI: https://lokoyote.eu/
	Version: 1.0
	Template: Blue
	Template Version: 1.0
	
	Inspired by the work found in this page : http://social.pemco.com/test/claim-stamps/claim-stamps-ver3.html
 
*/


/*
Add Your Custom CSS Below This Line
---------------------------------------------------------------- */


/*
Styles available :
----------------

- Heart
- Star



To add comments in the list you want, just do like example :

	#div-comment-01 .commentmetadata:after,
	#div-comment-05 .commentmetadata:after,
	#div-comment-46 .commentmetadata:after {
		The CSS code
	}

*/




/* Heart */
/*-- Write there the "#div-comment-XX .commentmetadata:after" you wan't add to the list -->*/

#div-comment- .commentmetadata::after {
	content: '\f487';
	font-family: dashicons;
	float: right;
	margin-top: -105px;
	font-weight: 700;
	color: #cc6262;
	font-size: 1.5em;
	z-index: 999;
	padding: 10px;
	text-transform: uppercase;
	border-radius: 50%;
	border: 7px solid #328ebe;
	background-color: #FFF;
}

/* Star */
/*-- Write there the "#div-comment-XX .commentmetadata:after" you wan't add to the list -->*/
#div-comment-4044 .commentmetadata::after, 
#div-comment-5080 .commentmetadata::after,
#div-comment-5482 .commentmetadata::after, 
#div-comment- .commentmetadata::after {
	content: '\f155';
	font-family: dashicons;
	margin-top: -50px;
	margin-right: 10px;
	font-weight: 700;
	color: #cc6262;
	font-size: 1.5em;
	transform: rotate(25deg);
	padding: 10px;
	text-transform: uppercase;
	border-radius: 50%;
	background-color: #FFF;
}


/* Like */
/*-- Write there the "#div-comment-XX .commentmetadata:after" you wan't add to the list -->*/

/*#div-comment-4085 .commentmetadata:after,
#div-comment- .commentmetadata:after {
	content: '\f529';
	font-family: dashicons;
	float: right;
	margin-top: -105px;
	font-weight: 700;
	color: #cc6262;
	font-size: 1.5em;
	z-index: 999;
	padding: 10px;
	text-transform: uppercase;
	border-radius: 50%;
	border: 7px solid #328ebe;
	background-color: #FFF;
	margin-right: -21px;
}
*/

/* ===== Possible to be an '::after' for vcard ===== */  
/*#div-comment-4085 .comment-author.vcard::after {
    content: '\f529';
    font-family: dashicons;
    float: right;
    margin-top: -100px;
    font-weight: 700;
	color: #adc8d5;
	font-size: 1.5em;
	z-index: 999;
	padding: 0.25rem 1rem;
	text-transform: uppercase;
	border-radius: 1rem;
	border: 0.4rem solid #adc8d5;
}
*/



@media all and (max-width: 800px) {

.commentmetadata::after {
	position: absolute;
	right: 0px;
	margin-top: -130px !important;
	border: unset !important;
}
