/* 
 * To display a rating, apply a style override for 
 * the horizontal background-position of .fill. At a
 * background-position of "0px 0px", the stars will
 * all be filled = 5 stars = 100%. "-33px 0px" would
 * represent 2.5 stars = 50%
 * 
 * Unfortunately, background-position will not accept
 * percentages, so the actual pixel position must be
 * calculated ahead of time. And the value used in the
 * style must be negative, equal to the amount 
 * LESS THAN perfect.
 * 
 * Just remember that in this layout, if there is no 
 * background offset at all, the score reads 5 stars,
 * and and that the colored bar filling in the stars 
 * must shift to the left for any score less than perfect.
 * 
 * Example: score is 73%
 * 
 * The full width is 66px. So, you need to know how 
 * much less than perfect the score is. 
 * 		0.73 *  5.00 stars  =  3.65 stars
 * 		1.00 -  0.73  [%]   =  0.27 [less than perfect] 
 * 		0.27 * 66.00 pixels = 17.82 ~ 18px
 * 
 * So, slide the background-image (the fill) to left
 * by 18px, and that will leave 3.65 stars filled in.
 * 
 * 			background-position: -18px 0px
 * 
 * Various additional styling options can be configured,
 * mostly intended to help switch easily between colors
 * and sizes, until the least number of combinations 
 * necessary for the site can be determined.
 * 
 * parent class: .star-rating
 * child classes: .fill, .stencil
 * size: 66px x 14px
 * 
 * Regardless of the styling done to the stencil, the fill
 * is always #FEBD18 (the "DeWALT color").
 * 
 * When the stencil taken directly from the PSDs (see below:
 * ".star-rating .stencil.psd") was first employed dynamically,
 * it became clear that the amount of fill that was visible 
 * through the transparencies was too little; the stars looked 
 * too small. A style rule has been retained for it, for those 
 * who come across a color (as the background of the element that
 * contains the rating) that makes the 105% stars look too big.  
 * 
 * Therefore, two additional stencils were cut, each still
 * remained 66px x 14pxm, but the size of the stars were
 * increased, in the one case, to 105%; in the other, 110%.
 * 
 * The 105% stars are available by adding the class "pct105"
 * to the stencil element. However, they seems to be the best
 * balance across pages, and the styles have Additional colors were needed to
 * accomodate star-ratings that appear in zebra-striped rows
 * and other elements with non-white backgrounds.
 * 
 * Currently the following colored stencils have been created,
 * and they are available by adding the class shown here to the
 * right of the hex-color value.
 * 
 * 105%
 * -------------------------------------------------
 * #ffffff ~ "f6"
 * #fafafa ~ "fa3"
 * #f4f4f4 ~ "f43"     no, not 'forty-three' but an f4-triple
 * #ececec ~ "ec3"
 * #dbdbdb ~ "db3"
 * #000000 ~ "black"   no way to escape starting with a number
 * 
 * 110%
 * -------------------------------------------------
 * #ffffff ~ "f6"
 * #dbdbdb ~ "db3"
 * 
 * Consult the styles below to understand which "shorthand"
 * defaults are in place. In most cases, if the color class name
 * is omitted, the default will be #ffffff, and if the size class
 * name is omitted, the default will be the 105% stars.
 * 
 * 
 */


.star-rating .fill {
	float: left; 
	background-image: url('/assets/images/stars-fill_febd18_66x14.gif'); 
	background-repeat: no-repeat; 
	height: 14px; 
	width: 66px; 
	background-position: -18px 0px;
}

.star-rating .stencil {
	/* background-image: url(''); *//* update if a desireable, single default can be found */
	float: left; 
	position: relative; 
	height: 14px; 
	width: 66px;
	left: -66px;
}


.star-rating .stencil,
.star-rating .stencil.f6,
.star-rating .stencil.pct105,
.star-rating .stencil.pct105.f6 {
	background-image: url('/assets/images/stars-stencil_105pct_ffffff_66x14.png');
}

.star-rating .stencil.fa3,
.star-rating .stencil.pct105.fa3 {
	background-image: url('/assets/images/stars-stencil_105pct_fafafa_66x14.png');
}

.star-rating .stencil.f43,
.star-rating .stencil.pct105.f43 {
	background-image: url('/assets/images/stars-stencil_105pct_f4f4f4_66x14.png');
}

.star-rating .stencil.ec3, 
.star-rating .stencil.pct105.ec3 {
	background-image: url('/assets/images/stars-stencil_105pct_ececec_66x14.png');
}

.star-rating .stencil.db3,
.star-rating .stencil.pct105.db3 {
	background-image: url('/assets/images/stars-stencil_105pct_dbdbdb_66x14.png');
}
.star-rating .stencil.black,
.star-rating .stencil.pct105.black {
	background-image: url('/assets/images/stars-stencil_105pct_000000_66x14.png');
}










/* OTHER SIZES AND COLORS */

.star-rating .stencil.psd {
	background-image: url('/assets/images/stars-stencil_ffffff_66x14.png');
}

.star-rating .stencil.pct110,
.star-rating .stencil.pct110.f6 {
	background-image: url('/assets/images/stars-stencil_110pct_ffffff_66x14.png');
}

.star-rating .stencil.pct110.db3 {
	background-image: url('/assets/images/stars-stencil_110pct_dbdbdb_66x14.png');
}