/* popup okno */
.window span a.close {color: #333; text-decoration: none; font-size: 25px;}
.window span a.close:hover {color:#ccc; text-decoration:none}
#mask {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .30;
z-index: 9000;
}
#boxes .window {
position: fixed;
width: 505px;
height: 259px;
display:none;
left:0;
top:0;
z-index:9999;
}
#boxes #dialog {
width:360px;
height:250;
background-color:;
}
.login-box {background: url('../img/bg-yellow.png'); width: 511px; height: 259px; position: absolute;}

.close-div {position: absolute; width: 23px; height: 23px; right: 15px; top: 11px;}
a.close {width: 23px; height: 23px; display: block; background: url('../img/log-icons.png') no-repeat; text-decoration: none;}
.text270deg {position: absolute;left: 15px;bottom: 16px;font-size: 18px;color: white;width: 18px;height: 18px;
-webkit-transform: rotate(270deg); /* для safari и chrome браузеров */
-moz-transform: rotate(270deg); /* для FF */
-o-transform: rotate(270deg); /* для Opera */
transform: rotate(270deg); /* для остальных браузеров поддерживающий поворот по-умолчанию */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* для ИЕ 6-8 */}


.popup-body {font-size: 0.9em; line-height: 1.3em; float: left;}

.log-box-l {margin: 5px 12px 13px 6px;width: 493px;height: 241px;background:url('../img/left-bg.png') no-repeat;}
.log-box-r {width: 493px;height: 241px;background:url('../img/right-bg.png') no-repeat 100% 0;float: left;color:#555;font:normal 9pt Arial; position: relative;}
.log-vhod {width: 493px;float: left;}

.flogin {float: left; width: 245px; position: absolute; margin: 16px 0 0 72px;}
.poptext {float: right; width: 151px;}
.poptext ul {list-style: none; margin: 0; padding: 0; position: absolute; bottom: 3px;}
.poptext ul li {padding: 0 0 13px 15px;}
.poptext ul li a {background: url('../img/log-icons.png') no-repeat;padding-left: 32px;height: 23px;display: block;line-height: 23px;color: white;font-weight: bold;text-decoration: none;}
.poptext ul li a#b1 {background-position:0 -23px;}
.poptext ul li a#b2 {background-position:0 -46px;}
.poptext ul li a#b3 {background-position:0 -69px;}
.poptext ul li a#b4 {background-position:0 -92px;}

.log-box-c .popup-body .log-vhod {display: block;}
.lfield p {color: #454545; font-weight: bolder; -webkit-margin-before: 10px;-webkit-margin-after: 7px;-webkit-margin-start: 3px;-webkit-margin-end: 0px;}
.lfield input {color:#767676; padding: 0px 0 0 18px; width: 227px; height: 41px; background: url('../img/input.png'); border: 0; outline: none; margin: 0; font-style: italic;}
.lfield input:hover {background-position: 0 -41px;}

.but-log {cursor: pointer; width: 96px;height: 38px;color: white;background: url("../img/log-button.png") no-repeat;float: right;border: none;margin-top: 25px;margin-right: 1px;}
/* ---------- */

<script type="text/javascript">
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.3);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(1000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>



<!--popup-->
<div id="boxes">
<div id="popup-vhod" class="window">

<!-- block -->
<div class="login-box">
<div class="log-box-l">
<div class="log-box-r">
<div class="close-div"><a href="#" class="close"></a></div>
<div class="text270deg">Авторизация</a></div>
<div class="popup-body">
<!-- ФОРМА ВХОДА -->
<div class="log-vhod">

<form class="flogin" method="post" action="">
<div class="lfield" >
<p>Логин пользователя:</p>
<input class="loginField" type="text" name="login_name" id="login_name"  onblur="if (value == '') {value = 'Your username'}" onfocus="if (value == 'Your username') {value =''}" value="Your username"/>
<p>Пароль:</p>
<input class="loginField" type="text" name="login_password" id="login_password" onblur="if (value == '') {value = 'Your Password'}" onfocus="if (value == 'Your Password') {value =''}" value="Your Password"/>
</div>

<div valign="top">
<input class="but-log" onclick="submit();" name="image" alt="Войти" type="button" value=""/>
</div>

<input name="login" type="hidden" id="login" value="submit" />
</form>

<div class="poptext">
<ul>
<li><a id="b1" href="/?do=rules">Правила</a></li>
<li><a id="b2" href="{lostpassword-link}">Забыли пароль?</a></li>
<li><a id="b3" href="{registration-link}">Регистрация</a></li>
<li><a id="b4" href="#">Помощь</a></li>
</ul>
</div>
</div>
<!-- END ФОРМА ВХОДА -->  
<div class="clr"></div>
</div>

</div></div></div>
</div>
<!-- /block -->

</div>
<div id="mask"></div>
<!--/popup-->

<a href="#popup-vhod" name="modal"><span style="padding:0 18px 0 28px;">Вход</span></a>