<div id="main">
<div id="navbar">
<ul>
<li>
<a href="#" onclick="showlayer('login_menu')">Регистрация | Войти</a></li>
</ul>
<div id="login_menu" style="display:none;">
<div id="new-user-col">რეგისტრაცია:
<a href="#" class="green-button">რეგისტრაცია</a>
</div>
<div id="signup-user-col">
Войти в систему:
<p><form action="#" method="post">
<ul>
<li>
<label for="email">Email:</label>
<input type="text" id="email" size="18"/>
</li>
<li>
<label for="psw">პაროლი:</label>
<input type="text" id="psw" size="18"/>
</li>
<button type="submit" class="green-button">შესვლა!</button>
</ul>
</form></p>
</div>
<div class="spacer"></div>
</div>
</div>
</div>

<style type="text/css">
/* ОСНОВНЫЕ СТИЛИ */
body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:11px;}
#main{
  width:600px;
  margin:0 auto;
  }

/* СТИЛИ НАВИГАЦИОННОГО МЕНЮ */
#navbar{
  background:url(images/bg.png) repeat-x;
  height:29px;
  line-height:29px;
  }
  #navbar ul, #navbar li,  
  #navbar form,
  #navbar button {
  border:0; margin:0; padding:0; list-style:none;
  }
  #navbar li a{
  margin:0 6px;
  text-decoration:none;
  color:#000000;
  font-weight:bold;
  border-bottom:dotted 1px #000000;
  }
  #login_menu{
  background:#aaaaaa;
  border:solid 1px #666666;
  width:340px;
  padding:10px;
  color:#FFFFFF;
  position:absolute;
  font-weight:bold;
  font-size:12px;
  line-height:18px;
  }
  #login_menu li{
  padding-bottom:6px;
  text-align:right;
  }
  #new-user-col{
  padding-right:10px;
  border-right:1px #DEDEDE solid;
  height:120px;
  width:100px;
  float:left;
  line-height:12px;
  }
  #signup-user-col{
  padding-left:20px;
  height:120px;
  width:200px;
  float:left;
  line-height:12px;
  text-align:right;
  }
  #login_menu label{font-size:11px; font-weight:normal;}
  #login_menu input{font-size:11px; color:#333333; margin-left:10px;}
   

#login_menu button{
  line-height:24px;
  float:right;
  color:#FFFFFF;
  font-size:11px;
  font-weight:bold;
  text-align:center;  
  cursor:pointer;
  }
  .green-button{
  background:url(images/button.png);
  display:block;
  color:#FFFFFF;
  font-size:11px;
  text-decoration:none;
  width:81px;
  height:26px;
  line-height:24px;
  text-align:center;
  }
   
  .spacer{clear:both; height:1px;}
</style>

<script type="text/javascript">
function showlayer(layer){
  var myLayer=document.getElementById(layer);
  if(myLayer.style.display=="none" || myLayer.style.display==""){
  myLayer.style.display="block";
  } else {  
  myLayer.style.display="none";
  }
  }
</script>