Welcome

<style>

#welcome {
    position: relative;
    width: 220px;
    margin-top: 5px;
}
#welcome .search input, #welcome .search button {
	border: none;
	float: left;
}
#welcome .search input.box {
    background: none;
    margin: 8px 0 0 10px;
	width: 164px;
	height: 22px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#welcome .search button.btn {
    background: none;
    margin: 7px 0 0 0;
	width: 32px;
	height: 22px;
	cursor: pointer;
	text-indent: -9999px;
}
#welcome-search {
    position: absolute;
    bottom: 14px;
    left: 4px;
}
#welcome-search form span {
    font-size: 11px;
    color: #666;
    position: absolute;
    top: 11px;
    line-height: 22px;
    left: 7px;
    text-indent: 10px;
    width: 168px;
}

</style>

<div id="welcome"> 
    <iframe src="http://poynterextra.org/design2010/welcome.html" width="220" height="367" frameborder="0"></iframe> 
    <div id="welcome-search"> 
        <form action="http://www.google.com/cse" id="cse-search-box" class="search"> 
            <div> 
                <input type="hidden" name="cx" value="001006011763809941815:njuofs6jfz4" /> 
                <input type="hidden" name="ie" value="UTF-8" /> 
                <input type="text" name="q" size="25" class="box" /> 
                <button class="btn" title="Submit Search">Search</button> 
            </div> 
            <span>SEARCH THIS SITE</span> 
        </form> 
    </div> 
</div> 
 
<script> 
 
$('#welcome-search input[name="q"]').attr('value','');
 
$('#welcome-search form span').click(function() {
    $(this).hide();
    $('#welcome-search input[name="q"]').focus();
});
    
</script>