<script type="text/javascript" src="/js/libs.js"></script>

<?if($USER_LOGGED_IN$)?>
  <ul class="lpanel clr">
  <li><a href="javascript:;" class="spanel"><span class="green">Панель</span> управления</a>
  <div id="spanel" class="islogin">
  <span class="arrow"></span>
  <div class="scont">
  <div class="title clr">Панель <span class="red">управления</span></div>
  <div class="lcol avatar"><img src="$USER_AVATAR_URL$" alt="$USERNAME$"></div>
  <div class="rcol clr">
  <ul class="lcol">
  <?if($GROUP_ID$="4")?><li><a href="$HOME_PAGE_LINK$panel" target="_blank"><b>Админпанель</b></a></li><?endif?>
  <li><a href="$PERSONAL_PAGE_LINK$">Мой профиль</a></li>
  <li><a href="$PM_URL$">Сообщения ($UNREAD_PM$)</a></li>
  <li><a href="$LOGOUT_LINK$">Выйти</a></li>
  </ul>  
  </div>
  <div class="clr"></div>
  </div>
  </div>
  </li>
  </ul><!-- /end lpanel -->  
<?else?>
  <ul class="lpanel clr">  
  <li><a href="javascript:;" class="spanel"><span class="green">Авторизация</span> на сайте</a>
  <div id="spanel">
  <span class="arrow"></span>
  $LOGIN_FORM$  
  </div>  
  </li>
  </ul><!-- /end lpanel -->  
  <?endif?>

<form method="post" action="">
  <div class="scont">
  <div class="title">Панель <span class="red">авторизации</span></div>
  <div class="lpinp"><label for="login_name">Логин</label><input type="text" name="user" value="" size="20" maxlength="50" id="login_name" /></div>
  <div class="lpinp"><label for="login_password">Пароль:</label><input type="password" name="password" size="20" maxlength="15" id="login_password" /></div>
  <div class="lpbtn"><button class="fbutton" id="login-submit" name="sbm" value="" title="Войти">Войти</button></div>
  <input name="login" type="hidden" id="login" value="submit" />
  </div>
<?if($PAGE_ID$="login")?> </form> <?endif?>

/* login panel */
.lpanel {
  float:right;
  margin:25px 0 0 0;
}
.lpanel li {
  display:block;
  float:left;
  background:url(../images/lbtn_sep.png) no-repeat;
  padding:0 5px 0 10px;
  height:29px;
  width:70px;
  line-height:14px;
  position:relative;
}
.lpanel li:first-child {
  background:none;
}
.lpanel li a {
  color:#a09c98;
  text-transform:uppercase;
  font-style:italic;
  font-size:12px;
  text-decoration:none;
}

.lpanel #spanel {
  display:none;
  background:rgba(0,0,0,0.04);
  position:absolute;
  top:100%;
  right:0;
  margin-top:15px;
  width:258px;
  padding:3px;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  z-index:2;

}
.lpanel .islogin {
  width:345px !important;
}
.lpanel #spanel .arrow {
  border-bottom: 11px solid rgba(0,0,0,0.04);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  position: absolute;
  left:81%;
  bottom:100%;
}
.lpanel .islogin .arrow {
  left:82.2% !important;
}

.lpanel .scont {
  background:#fff url(../images/scont.png) repeat-x top;
  position:relative;
  padding:5px;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  box-shadow:inset 0 0 1px rgba(0,0,0,0.21);
  -moz-box-shadow:inset 0 0 1px rgba(0,0,0,0.21);
  -webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.21);  
}
.lpanel .scont:after, .lpanel .scont:before {
  bottom:99%;  
  border:solid transparent;  
  content: "";  
  height:0;  
  width:0;  
  position:absolute;
  pointer-events:none;
}  
.lpanel .scont:after {
  border-color:rgba(255,255,255,0);
  border-bottom-color:#fff;
  border-width:10px;
  left:86%;
  margin-left:-10px;
}  
.lpanel .scont:before {
  border-color:rgba(241,241,241,0);
  border-bottom-color:#f1f1f1;
  border-width:11px;
  left:86%;
  margin-left:-11px;
}
.lpanel .scont .title {
  display:block;
  text-transform:uppercase;
  font-size:12px;
  color:#b9b6b6;
  padding:3px 0 15px 5px;
}
.lpanel .scont .lpinp {
  background:#fbfbf7;
  margin:0 5px 5px;
  padding:4px 10px;
  border-radius:5px;
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.07);
}
.lpanel .scont .lpinp label {
  color:#919176;
  font-size:11px;
  text-transform:uppercase;
  font-style:italic;
  width:40px;
  display:block;
  float:left;
  padding-top:2px;
}
.lpanel .scont .lpinp input[type="text"], .lpanel .scont .lpinp input[type="password"] {
  border:0 none;
  background:none;
  color:#919176;
  font-style:italic;  
}
.lpanel .scont .lpbtn {
  margin:7px 0 4px;
  text-align:center;
}
.lpanel .scont .lpbtn .fbutton {
  color:#75cb40;
}
.lpanel .scont .lpbtn .fbutton:hover {
  color:#898989;
}
.lpanel .scont .avatar {
float: left;
  background:#fbfbf7;
  margin:0 0 5px 3px;
  padding:4px 4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}
.lpanel .scont .avatar > img {
  display:block;
  width:92px;

  box-shadow:0 0 2px rgba(0,0,0,0.18);
  -moz-box-shadow:0 0 2px rgba(0,0,0,0.18);
  -webkit-box-shadow:0 0 2px rgba(0,0,0,0.18);
}
.lpanel .scont .rcol ul {
  margin:-2px 10px 0;
}
.lpanel .scont .rcol ul li {
  display:block;
  float:none;
  border-top:1px dotted #ececec;
  background:none;
  padding:5px 2px 5px 1px;
  height:auto;
  width:auto;
}
.lpanel .scont .rcol ul li:first-child {
  border-top:none;
}
.lpanel .scont .rcol ul li a {
  color:#98987f;
  background:url(../images/gwdot.png) no-repeat left;
  padding-left:8px;
  text-transform:none;
  font-style:italic;
  font-size:12px;
  text-decoration:none;  
}
.lpanel .scont .rcol ul li a:hover {
  color:#75cb40;
}
.lpanel .clr {
  clear:none;
  }