<a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);">Вход</a>

<div class="kanavas-body"></div>  
<div class="kanavas-okno">  
<div class="kanavas-fon"><a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);" title="Закрыть окно" style="text-decoration:none; outline:none;"><div class="kanavas-close"></div></a></div>  
<div class="kanavas_pad_body"><div class="body_pad">$LOGIN_FORM$</div> </div>  
<div class="kanavas-foother"><a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);" style="text-decoration:none; outline:none;"><span class="kanavas-zakrit">Закрыть</span></a></div>  
</div>

<div class="log_form">
<?if($ERROR$)?><div colspan="2" style="color:red;text-align:center;">$ERROR$</div><?endif?>
<div class="email_v"><div class="ewLabel">E-mail:</div><input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50"/></div>
<div class="pass_v"><div class="ewLabel">Пароль:</div><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15"/></div>
<div id="ewTemporalSession"><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label class="label_left" for="rem$PAGE_ID$">запомнить</label> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?>
<input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></div><input style="color: #4285f4;" class="loginButton" name="sbm" type="submit" value="Вход"/></div>
<div id="ewRemindPassword"><a href="javascript://" rel="nofollow" onclick="new _uWnd('Prm','Напоминание пароля',300,130,{autosize:1,maxh:300,minh:100,closeonesc:1,modal:1},{url:'/index/5'});_uWnd.findparent(this).close();return false;">Забыли пароль?</a> | <a href="$REGISTER_LINK$">Регистрация</a></div>
<div class="">
  <h2>Войти с помощью :</h2><div style="padding-top: 15px;"><?if($LOGIN_UID$)?>$LOGIN_UID$<?endif?><?if($LOGIN_FB$)?>$LOGIN_FB$<?endif?><?if($LOGIN_VK$)?>$LOGIN_VK$<?endif?><?if($LOGIN_GOOGLE$)?>$LOGIN_GOOGLE$<?endif?><?if($LOGIN_YANDEX$)?>$LOGIN_YANDEX$<?endif?><?if($LOGIN_TWITTER$)?>$LOGIN_TWITTER$<?endif?></div>
</div>

/*okno*/
.kanavas-body {background: rgba(0,0,0,0.7); width:100%; height:100%; position:fixed; left: 0px; top: 0px; z-index: 21001;display:none;}  
.kanavas-okno {background:#fff; position:fixed; top: 10%; left:30%; z-index: 21002; width:500px; height:auto; border-radius:9px; box-shadow: 0 0 10px 1px rgba(0,0,0,0.3); display:none;}  
.kanavas-fon {background: url(https://snap-photos.s3.amazonaws.com/img-thumbs/280h/KU273L0WTW.jpg)no-repeat center; background-size: 100%; border-top-left-radius:7px; border-top-right-radius:7px; width:500px; height:100px;}  
.kanavas-close {background:url(/http://kanavas.at.ua/img/ajax/close_ajax.png) no-repeat; width:24px; height:24px; float:right; margin:10px 10px 0 0; opacity: 0.5;}  
.kanavas-close:hover {opacity: 1.0; cursor:pointer;}  
.kanavas_pad_body {background:#fff; width:500px; height:auto;}  
.kanavas-foother {background:#f3f3f3; width:460px; height:auto; padding:20px; border-bottom-left-radius:7px; border-bottom-right-radius:7px; text-align:center;}  
.kanavas-zakrit {background: #1F5B88; border-radius:20px; color:#fff; font-size:14px;top: 40px; text-shadow:0 -1px 0 rgba(0, 0, 0, .2); text-align:center; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); padding:8px 30px; opacity: 0.8;}  
.kanavas-zakrit:hover {opacity: 1.0;}
.body_pad {padding: 25px 55px;}
/****/
/*login*/
div#uidLogButton {display: none;}
div#baseLogForm {display:block !important;}
.email_v {height: 60px;}
.pass_v {height: 60px;margin-top: 18px;}
.ewLabel {position: relative;display: block;text-align: left;line-height: 25px;color: #646464;font-weight: 100;font-size: 14px;margin-bottom: 8px;}
#ewTemporalSession {position: relative;display: block;width: 100%;height: 33px;padding: 20px 0px 5px 0px;}
.label_left {float: left;}
.loginButton {width: 100%;}
#ewRemindPassword {text-align: center;padding: 15px 0px 15px 0px;;}
/*****/
button, input[type="button"], input[type="submit"], input[type="reset"]{border:none; color: #4285f4;padding: 10px 19px;font-size:14px;display: inline-block;overflow:hidden; background:#f2f6fa;text-align:center;font-weight: bold;border-radius:10px; -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;cursor: pointer;}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {overflow:hidden;background:#e6eef5;text-align:center;border-radius:10px;}
input[type=submit]:active , .button:active , input[type=button]:active , input[type=reset]:active , button:active , .tov_desc .goodsbutton:active { -webkit-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.14);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.14);border-radius:10px;background:#e6eef5;padding-top:10px;padding-bottom:10px;}
input[type=checkbox]:not(checked) {position: absolute;opacity: 0;}
input[type=checkbox]:not(checked) + label {position: relative; padding: 0 0 0 60px;}
input[type=checkbox]:not(checked) + label:before {content: '';position: absolute;left: 2px;width: 36px;height: 14px;border-radius: 13px;background: #e6e6e6;line-height: 14px;vertical-align: middle;border-radius: 8px;margin: 2px 0;}
input[type=checkbox]:not(checked) + label:after {content: '';position: absolute;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #4285f4;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */;width:20px;height:20px;overflow:hidden;float:left;margin-left:-1px;margin-top:-3px;-webkit-transition:all ease .3s;transition:all ease .3s;border:1px solid #4285f4;-webkit-box-shadow:0 0 1px rgba(0,0,0,.05);-moz-box-shadow:0 0 1px rgba(0,0,0,.05);box-shadow:0 0 1px rgba(0,0,0,.05)}
input[type=checkbox]:checked + label:before {background: #bfd9ed;}
input[type=checkbox]:checked + label:after {margin-left: 16px;}