Using a CSS sprite image in a search box

Hi everyone,

I am testing a search box on my test site: http://www.technologybloggers.co.uk/test/ and am trying to use the following CSS sprite http://www.technologybloggers.co.uk/images/search.png to create a search icon that changes colour when the box is clicked on.

I have done it, but I can’t seem to align it inwards. I want it to be in the middle (about 6.5px down) of the box and about 6.5px in from the left side.

The form code (HTML) is:

<div class="search-box"><div class="widget-wrapper widget-wrapper-single single widget-wrapper-1">
<div class="widget widget-1 widget-single clearfix widget_search" id="search-5"><form method="get" class="search-form" action="<?php bloginfo( 'url' ); ?>">
	<input type="text" value="Search" name="s" class="search-text-box" onfocus="if(this.value == 'Search') this.value = '';" onblur="if(this.value == '') this.value = 'Search';" />
</form>
</div></div></div>

The style code (CSS) for the search box is:

.widget_search #s{width:60%;}
.widget_search label{display:none;}
.widget_search .search-text-box {
    -moz-transition: 400ms width ease;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width;
    -webkit-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width;
    -o-transition-timing-function: ease;
    background-image: url('/images/search.png');
    background-repeat: no-repeat;
    background-position: -13px 0;
    font-size: 1.2em;
    color: #7c7b7c;
    height: 30px;
    padding: 0 5px 0 18px !important;
    width: 120px;
    background-color: #333333;
    border: 1px solid #cccccc;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
}
.widget_search .search-text-box:focus {
    background-image: url('/images/search.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    border: 1px solid #777777;
    box-shadow: 0 0 3px 1px #DEDEDE;
    font-size: 1.2em;
    color: #333333;
    width: 235px;
    background-color: #FFFFFF;
}
.search-box {float:left;margin:3px 0 0 7px;}

All help appreciated!

Thanks 🙂
Christopher