Woocommerce Review Star Ratings. Please read description to learn more...

gistfile1.txt

/* ==========================================================================
	Snippet Name: WooCommerce Review Star Ratings
	Description:  This css snippet blends all woocommerce star rating for a consistant look sitewide. Consolidates code and makes uses of WooCommerce.eot font. If you disabled the woocommerce.css and built your own styles then this will work great. If you are overriding woocommerce.css by adding styles to another styesheet that loads afterwards, this will still work fine, but you may need to target specific elements or create a master reset targeting all elements listed below in order to remove some of woocommerce default margins and padding.
	Author:       GL Walker
	Author URI:   http://wsfive.com
   ========================================================================== */
.woocommerce .star-rating, .woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
	font-family: WooCommerce;
	speak: none;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	font-size: 1em;
}
.woocommerce .star-rating {
	overflow: hidden;
	position: relative;
	height: 1em;
	width: 5em;
}
.woocommerce .star-rating:before {
	content: "\e021\e021\e021\e021\e021";
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	color: #999;
}
.woocommerce .star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em
}
.woocommerce .star-rating span:before {
	content: "\e020\e020\e020\e020\e020";
	top: 0;
	position: absolute;
	left: 0;
	color: #F90;
}
/* rating block specific to single product summary area */
.woocommerce .woocommerce-product-rating {
	display: block;
	width: 100%;
}
.woocommerce .woocommerce-product-rating .star-rating {
	margin: 0 auto;
	float: left;
	font-size: 1em;
}
.woocommerce .woocommerce-product-rating .woocommerce-review-link {
	font-size: 85%;
	width: 100%;
	margin: 0.5em 0;
	float: left;
}
/* rating block specific to review submit form */
.woocommerce p.stars {
	position: relative;
	padding: 0.75em;
}
.woocommerce p.stars a {
	display: inline-block;
	margin-right: 1em;
	text-indent: -9999px;
	position: relative;
	border-bottom: 0!important;
	outline: 0;
	color: #999;
}
.woocommerce p.stars a:hover, .woocommerce p.stars a.active {
	color: #F90;
}
.woocommerce p.stars a:last-child {
	border-right: 0
}
.woocommerce p.stars [class^="star-"], .woocommerce p.stars [class*=" star-"] {
	border-right: 1px solid #ccc
}
.woocommerce p.stars [class^="star-"]:after, .woocommerce p.stars [class*=" star-"]:after {
	text-indent: 0;
	position: absolute;
	top: 0;
	left: 0
}
.woocommerce p.stars a.star-1 {
	width: 2em
}
.woocommerce p.stars a.star-1:after {
	content: "\e021"
}
.woocommerce p.stars a.star-1.active:after, .woocommerce p.stars a.star-1:hover:after {
	content: "\e020"
}
.woocommerce p.stars a.star-2 {
	width: 3em
}
.woocommerce p.stars a.star-2:after {
	content: "\e021\e021"
}
.woocommerce p.stars a.star-2.active:after, .woocommerce p.stars a.star-2:hover:after {
	content: "\e020\e020"
}
.woocommerce p.stars a.star-3 {
	width: 4em
}
.woocommerce p.stars a.star-3:after {
	content: "\e021\e021\e021"
}
.woocommerce p.stars a.star-3.active:after, .woocommerce p.stars a.star-3:hover:after {
	content: "\e020\e020\e020"
}
.woocommerce p.stars a.star-4 {
	width: 5em
}
.woocommerce p.stars a.star-4:after {
	content: "\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-4.active:after, .woocommerce p.stars a.star-4:hover:after {
	content: "\e020\e020\e020\e020"
}
.woocommerce p.stars a.star-5 {
	width: 6em;
}
.woocommerce p.stars a.star-5:after {
	content: "\e021\e021\e021\e021\e021"
}
.woocommerce p.stars a.star-5.active:after, .woocommerce p.stars a.star-5:hover:after {
	content: "\e020\e020\e020\e020\e020"
}
/* rating block specific to product listing */
.woocommerce ul.products li.product .star-rating {
	display: block;
	text-align: center;
	margin: 0 auto;
}
/* rating block specific to sidebar widgets */
.woocommerce ul.cart_list li .star-rating, .woocommerce ul.product_list_widget li .star-rating {
	display: block;
	text-align: center;
	margin: 0 auto;
}
/* end of review stars */