.search
{
display:block;
position:fixed;
bottom:5px;
right:-213px;
width: 240px;
height: 35px;
text-align: left;
padding-left: 10px;
padding-top:10px;
background-image: url('searchBg.png');
background-repeat: no-repeat;
background-position: bottom;
z-index:2000;
}
.searchButton
{
width: 55px;
text-align: center;
color: #222222;
padding-left: 3px;
padding-right: 3px;
padding-top: 4px;
font-size: 13;
background-image:url('button.png');
background-repeat:no-repeat;
background-position:center;
}




function showSearch()
{
	document.getElementById("searchIcon").style.display = "none";
	$(".search").animate({right: "0px"},400);
}
function closeSearch()
{
	document.getElementById("searchIcon").style.display = "block";
	$(".search").animate({right: "-213px"},400);
}
$(document).ready(function(){
	$("#searchIcon").click(showSearch);
	$("#searchBack").click(closeSearch);
	});

<div class = "search">
<table>
<td>
<img src="searchIcon.png" id = "searchIcon" />
</td>
<td>
<input type = "text" id ="search" size = "25" value = ""/>
<td/>
<td>
<img src="searchIcon.png" id = "searchBtn" />
</td>
<td>
<img src="searchBack.png" id = "searchBack" />
</td>
</table>
</div>