<? header ("Content-type: text/css"); ?>

/*---------------étoiles form--------------*/

	#tasty-star {
	  	display: block;
		transform: translateY(-49px) translateX(-33px);
	}
	#tasty-star:after{
	  content:"";
	  display:  block;
	  clear:both;
	}
	#tasty-star label{
	  float:right;
	  display:inline-block;
	  font-size:0;
	}
	#tasty-star label:after{ 
	  content:"★";
	  display:  block;
	  font-size: 2rem;
	}
	#tasty-star input{ 
	  display:none;
	}
	#tasty-star:hover label{
	  color: grey!important;
	}
	#tasty-star label:hover ~ label{
	  color: gold!important;
	}
	#tasty-star label:hover{ 
	  color: black!important;
	}
	#tasty-star input:checked ~ label{
	  color: gold;
	}

/*--------------étoiles post---------*/

.star-zone{
	position: relative;
	height: 30px;
	margin-bottom: 20px;
}

	.stars-container{
		position: absolute;
		left: 0px;
		top:0px;
	}

	.stars-container.grey svg{
		fill: #4a4e57;
		z-index: 1;
		opacity: 0.1;
	}

	.stars-container.gold{
		overflow: hidden;
	}
	.stars-container.gold svg{
		fill: gold;
		z-index: 2;
		width: 150px;
		position: relative;
	}