Buscador personalizado, problema

[seravifer]

Tengo esta estructura:

Código HTML:

<div id="buscador">
          <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
          <div id="search">
          <input class="searchinput" type="text" placeholder="Buscar..." value="" onclick="this.value='';" name="s" id="s" />
          <input type="submit" class="searchsubmit" value="Buscar" id="searchsubmit"/>
          </div>
          </form>
          </div> 

Y este diseño:

Código HTML:

#buscador {
    float: right;
    margin-top: 36px;
    padding: 0;
}
form {
	margin: 0;
	padding: 0;
}
#searchform {
	margin: 0;
	padding: 0;
	line-height: 27px;
}
.searchinput {
border: 1px solid #FFAF00;
width: 160px;
height: 22px;
float: left;
padding: 0 5px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
	-khtml-border-top-left-radius: 3px;
        -khtml-border-bottom-left-radius: 3px;
        -moz-border-radius-topleft: 3px;
        -moz-border-radius-bottomleft: 3px;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
}
.searchinput:focus {
	border: 1px solid #FFAF00;
}
#searchsubmit {
border: 1px solid #FFAF00;
width: 27px;
height: 22px;
display: block;
float: left;
cursor: pointer;
        
border-top-right-radius: 3px;
        
border-bottom-right-radius: 3px;
	
-khtml-border-top-right-radius: 3px;
        
-khtml-border-bottom-right-radius: 3px;
        
-moz-border-radius-topright: 3px;
        
-moz-border-radius-bottomright: 3px;
        
-webkit-border-top-right-radius: 3px;
        
-webkit-border-bottom-right-radius: 3px;
}

Y mi idea es que quede parecido como en este foro pero sin imagenes.

Mi web de prueba: http://www.seravifer.familiapixel.com