/*
	CSG Dark - star_ratings.css

	Reuses images/star_rating.png, the 16x48 three-state strip that is already
	on this board, so nothing new is added to /images. It is sized with
	background-size in rem so the stars grow with the rest of the type on a
	wide monitor instead of staying 16 real pixels.
*/
.star_rating,
.star_rating li a:hover,
.star_rating .current_rating {
	background: url(../../../images/star_rating.png) left -1000px repeat-x;
	background-size: 1rem 3rem;
	vertical-align: middle;
}

.star_rating {
	position: relative;
	width: 5rem;
	height: 1rem;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	background-position: left top;
}

td .star_rating { margin: auto; }

.star_rating li { display: inline; }

.star_rating li a,
.star_rating .current_rating {
	position: absolute;
	text-indent: -1000px;
	height: 1rem;
	line-height: 1rem;
	outline: none;
	overflow: hidden;
	border: none;
	top: 0;
	left: 0;
}

.star_rating_notrated li a:hover { background-position: left bottom; }

.star_rating li a.one_star    { width: 20%;  z-index: 6; }
.star_rating li a.two_stars   { width: 40%;  z-index: 5; }
.star_rating li a.three_stars { width: 60%;  z-index: 4; }
.star_rating li a.four_stars  { width: 80%;  z-index: 3; }
.star_rating li a.five_stars  { width: 100%; z-index: 2; }

.star_rating .current_rating { z-index: 1; background-position: left center; }

.star_rating_success {
	color: var(--ok);
	font-weight: normal;
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	margin-bottom: 0.625rem;
}

.inline_rating {
	background: url(../../../images/star_rating.png) left -1000px repeat-x;
	background-size: 1rem 3rem;
	float: left;
	vertical-align: middle;
	padding-right: 0.3125rem;
}