.searchbg
{
/*background:url(http://art-design.umich.edu/images/site_images/background.png) no-repeat;*/
background:url(http://art-design.umich.edu/images/site_images/search_grey.png) no-repeat;
width:220px;
height:21px;
display:block;
border: 0;
}

.search_field
{
float:left; /* this will make the images line up */
margin-left: 6px;
margin-top: 3px;
border:0;
padding:0;
width:180px; /* the width of the actual search box, must be shorter than your image so it fits inside it. */
height:18px; /* again, must be slightly less than the image size */
background-color:transparent; /* Makes the search field invisible so you can see the image we want underneath. This doesn’t work in Safari, so I may go back later and give them their own style sheet. For now, I’m not bothered by this small inconvenience. */
}

.search
{
/*background:url(http://art-design.umich.edu/images/site_images/background.png) no-repeat;*/
background:url(http://art-design.umich.edu/images/site_images/search_grey.png) no-repeat;
width:220px;
height:21px;
padding:0;
margin: 58px 0px 0px 720px; /* change this to position how you like */
}

.search_button
{
top:0px;
border: 0px;
margin: 0px 0px 0px 0px;
margin-left:0px;

}

/* highlights search field when you click in it.  only works in FF, not safari or IE.
.search_field:focus + .searchbg
{
	background:url(http://art-design.umich.edu/images/site_images/search_on.png) no-repeat;
} */

/*.focusField{  
background:url(http://art-design.umich.edu/images/site_images/search_on2.png) no-repeat;
}
  
.idleField{  
background:url(http://art-design.umich.edu/images/site_images/search_off2.png) no-repeat;
}*/