Form em div no topo, posicionar à direita

Olá,

tenho um formulário de acesso a área restrita, preciso posicioná-lo à direita do topo, como na imagem

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.puranet.com.br/layout_topo.jpg&key=90d2a5e18d166c160b99b59af5f02a73c3c3d764f2a9b7155c0a9f0039898c52" alt="layout_topo.jpg" />

o html está assim:

 <div id="topo">
<div id="login_topo">
 <h1>Área restrita</h1>
 <form id="logar_topo" name="logar_topo" method="post" action="logar.php" >
 <label class="campo_logar" for="codigo">Código de acesso:</label><input type="text" class="data_logar" name="codigo" id="codigo" maxlength="50" tabindex="1" title="Seu código para Acesso"/>
 <label class="campo_logar" for="senha">Senha: </label><input type="password" class="senha_logar" name="senha" id="senha" maxlength="90" tabindex="2" title="Sua Senha" />
	<input type="submit" name="Submit" class="botao" value="OK" tabindex="3">
 </form>
 <p><a href="/area_restrita/acesso.php">Primeiro Acesso!</a></p>

</div><!-- login -->
<div id="logo">
 <a href=""><img class="escola" src="/imagens/logo.png" alt="Logo" /></a>
</div><!-- logo -->
<div id="foto">
 <img src="/imagens/foto_banner.jpg" alt="Foto banner" title="Foto banner"/>
</div>
<div class="menu_superior">
 <ul class="menuh">
 <li><a href="/servico.php?item=3">A Empresa</a></li>
 <li><a href="/servico.php?item=1">Produtos</a></li>
 <li class="ultima"><a href="/servico.php?item=2" >Serviços</a></li>
	<li class="telefone">41 3642-1716</li><li class="contato"><a href="/fale_conosco.php"><img src="../imagens/layout/e_mail.jpg" alt="E-mail Logo" title="E-mail Logo" /></a></li>
 </ul>
</div><!-- menu_superior -->
 </div><!-- topo -->

Eu tenho uma div com todo o topo, dentro dela tenho uma com a logo, outra com a foto do banner, uma com o form de login, e uma com o menu.

Preciso posicionar o form acima da imagem do banner.

O css está assim:

#topo{width:988px;height:258px;margin:0 auto;z-index:10;background:url(imagens/back_topo.png) top right no-repeat}
#logo {width:210px;height:205px;margin:20px 0 0 0;z-index:11;float:left}
#logo img.escola{margin:20px 0 20px 50px}
/login_topo/
#login_topo {width:210px;height:90px;z-index:20;font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;position:absolute;float:right;right:80px;top:3px;z-index:50}
#login_topo h1{width:90%;text-align:center;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;margin:0 0 0 20px;color:#C00;clear:left}
#login_topo p{text-align:right;margin:0 2px}
#login_topo a, #login_topo a:link, #login_topo a:visited, #login_topo a:active, #login_topo a:hover{color:#C00;text-decoration:underline;font-weight:bold}
#login_topo a:hover{text-decoration:underline}
/formulario de login/
#logar_topo{width:98%;height:auto;float:right;margin:1px 0 0 0;font-size:12px}
#logar_topo fieldset{float:left;width:99%;margin:1px}
#logar_topo label.campo_logar{width:100px;display:block;float:left;clear:left;text-align:right;margin:0 5px 0 0}
#logar_topo input.data_logar, #logar_topo input.senha_logar{width:80px;height:14px;border:1px dashed #C00;background-color:#FFF;margin-bottom:5px}
#logar_topo input.data_logar{clear:right}
#logar_topo input.senha_logar{width:60px;clear:none;margin:0}
.botao {width:20px;height:15px;background-color:#C00;font:bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#FFF;float:right;cursor:pointer;margin:1px 10px 0 2px}
/topo/
#foto{width:740px;height:205px;position:relative;float:right;margin:8px 25px 0 0;z-index:-10;background-color:#FFF}

Agradeço a quem puder ajudar ou me passar um exemplo