/*
 * requires this markup
 * 
 * <button class="sprite"><span>[button text]</span></button>
 */

/* without any styling but this, the default "go" button is shown */
button.sprite {
	background-image:url(/assets/images/buttons/dewalt-buttons.png);
	background-repeat: no-repeat;
	background-position: -33px -2px;
    width: 18px;
    height: 18px;
    border: none; /* overwrite default border */
    background-color: transparent;
  cursor: pointer;
}

/* position the background image to show the "hover" state */
button:hover.sprite,
button.sprite.sfhover {
	background-position: -33px -22px;
}

/* "Dwyer" the text when CSS UI is up */ 
.sprite span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* 
 * Additional sprites are configured here. The first example,
 * however, renders the same as above. It is easier to see the
 * naming convention this way.
 */

button.sprite.goBox-e 
{
    background-position: -33px -2px;

}

button:hover.sprite.goBox-e,
button.sprite.goBox-e.sfhover {
    background-position: -33px -22px; /* First value controls horizontal positioning; second controls vertcal positioning. */
}

.block 
{
    margin: 10px; padding:0;
    font-family: verdana; font-size: 11px;
}

#ratingText {padding-left: 10px;}
#loginLink{position: relative; top: -8px;}
#stars{float:left; }

#ratingForm 
{ 
    float:left;
    margin:-15px 0 0 100px;
    padding:0;
}
.star0 {
    width:75px; height: 13px;
    margin:0 auto; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 1px no-repeat;
}
.star1 {
    width:75px; height: 13px; 
    margin:0; padding:0;    
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -14px no-repeat;
}
.star2 {
    width:75px; height:13px;  
    margin:0; padding:0;    
    float:left;
    clear:left;     
    background: transparent url(/assets/Images/star-sprite.gif) 0 -29px no-repeat;
}
.star3 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left;     
    background: transparent url(/assets/images/star-sprite.gif) 0 -44px no-repeat;
}
.star4 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -59px no-repeat;
}
.star5 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -74px no-repeat;
}
.star6 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -89px no-repeat;
}
.star7 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -104px no-repeat;
}
.star8 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -119px no-repeat;
}
.star9 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -134px no-repeat;
}
.star10 {
    width:75px; height:13px; 
    margin:0; padding:0;
    float:left; 
    background: transparent url(/assets/images/star-sprite.gif) 0 -149px no-repeat;
}

.ratingWidgetDiv {
    width:185px;
}

.whatsnewpos {
    float:left;
    clear:both;
    padding-top:4px;
}