<link href="/css/style.css" rel="stylesheet" />
  <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>

  <script language="javascript">
  $(document).ready(function() {  

$('#nav-bar').fadeIn();  

$('#Log-in').click(function() {  

$('#Log-in').css('background-color', '#006699');  
$('#signUp').css('background-color', '#000000');  
$('#submit').hide().css({'left' : '0px'});  
$('#SignupForm').hide().css({'top' : '0px'});  

$('#login').show().animate({  

left : '52%',  

},400,function(){  

$('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  

});  
///  
$('#Login_form').show().animate({  

top : '60px',  

},700,function(){  

//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
});  
});  

$('#signUp').click(function() {  

$('#signUp').css('background-color', '#006699');  
$('#Log-in').css('background-color', '#000000');  
$('#login').hide().css({'left' : '0px'});  
$('#Login_form').hide().css({'top' : '0px'});  

$('#submit').show().animate({  

left : '52%',  

},400,function(){  

$('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });  

});  
///  
$('#SignupForm').show().animate({  

top : '60px',  

},700,function(){  

//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });  
});  
});  

  });  
  </script>

<img src="/images/result.png" id="login" />
<img src="/images/submit.png" id="submit" />

<div class="loginform" id="Login_form">

<form method="post" action="#">

<div>

<div class="form-item">

<label for="edit-name">Логин:</label>
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">
</div>

<div class="form-item">

<label for="edit-pass">Пароль:</label>
<input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">
</div>

</div>
</form>

</div>

<div class="loginform" id="SignupForm">

<form method="post" action="#">

<div>
<div class="form-item">

<label for="edit-name">Мыло:</label>
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">
</div>

<div class="form-item">

<label for="edit-name">Логин:</label>
<input type="text" class="form-text required" value="" size="15" id="edit-name" name="name" maxlength="60">
</div>

<div class="form-item">

<label for="edit-pass">Пароль:</label>
<input type="password" class="form-text required" size="15" maxlength="60" id="edit-pass" name="pass">
</div>

</div>
</form>

</div>

<div id="nav-bar">

<div class="module-bg">
<a href="#" class="TopButtons" id="Log-in">Войти</a>
<a href="#" class="TopButtons" id="signUp">Зарегистрироваться</a>
</div>

</div>