<style>
.top{
border-top:1px solid #E4E4E4;
position:fixed;
left:0;
background:-webkit-linear-gradient(top,#cacaca,#999);
background:-o-linear-gradient(top,#cacaca,#999);
background:-ms-linear-gradient(top,#cacaca,#999);
background:-moz-linear-gradient(top,#cacaca,#999);
right:0;
height:50px;
box-shadow: 0 0 6px black;
-o-box-shadow: 0 0 6px black;
-ms-box-shadow: 0 0 6px black;
-moz-box-shadow: 0 0 6px black;
}
.top .li{
border:1px solid #777;
border-right:none;
box-shadow:0 1px 0 #D0D0D0;
-o-box-shadow:0 1px 0 #D0D0D0;
-moz-box-shadow:0 1px 0 #D0D0D0;
-ms-box-shadow:0 1px 0 #D0D0D0;
padding:7px 12px 7px 9px;
font:14px arial;
color:#222;
float:left;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 1px 0 #ddd;
margin-top:8px;
background:-webkit-linear-gradient(top,#d6d6d6,#b6b6b6);
background:-moz-linear-gradient(top,#d6d6d6,#b6b6b6);
background:-o-linear-gradient(top,#d6d6d6,#b6b6b6);
background:-ms-linear-gradient(top,#d6d6d6,#b6b6b6);
}
.top .li:hover{
background:-webkit-linear-gradient(top,#E8E8E8,#BFBFBF);
background:-moz-linear-gradient(top,#E8E8E8,#BFBFBF);
background:-o-linear-gradient(top,#E8E8E8,#BFBFBF);
background:-ms-linear-gradient(top,#E8E8E8,#BFBFBF);
cursor:pointer;
}
.top .li:active{
background:-webkit-linear-gradient(top,#B0B0B0,#ACACAC);
background:-o-linear-gradient(top,#B0B0B0,#ACACAC);
background:-moz-linear-gradient(top,#B0B0B0,#ACACAC);
background:-ms-linear-gradient(top,#B0B0B0,#ACACAC);
cursor:pointer;
box-shadow:inset 0 1px 1px #999,0 1px 0 #D0D0D0;
}
a{
text-decoration:none !important;
}
.homeico {
background: url("/home.png") no-repeat;
width: 21px;
height: 16px;
float: left;
}
.sett {
background: url("/otherico.png") -36px 0;
width: 17px;
height: 17px;
float:left;
}
.sett1{
background:url("/otherico.png");
width:17px;
height:17px;
float:left;
}
.avatop {
background: url("/avatop.png");
width: 26px;
height: 25px;
float: left;
margin-top: -4px;
margin-left: -6px;
margin-right: 4px;
}
.profilebg{
position:absolute;
right:7px;
top:7px;
border-radius:3px;
background:-webkit-linear-gradient(top,#E7E7E7,#D0D0D0);
background:-o-linear-gradient(top,#E7E7E7,#D0D0D0);
background:-moz-linear-gradient(top,#E7E7E7,#D0D0D0);
background:-ms-linear-gradient(top,#E7E7E7,#D0D0D0);
padding:10px 10px 8px 10px;
width:250px;
box-shadow:0 3px 8px #222, inset 0 1px 0 #F7F7F7;
-o-box-shadow:0 3px 8px #222, inset 0 1px 0 #F7F7F7;
-moz-box-shadow:0 3px 8px #222, inset 0 1px 0 #F7F7F7;-ms-box-shadow:0 3px 8px #222, inset 0 1px 0 #F7F7F7;
text-shadow:0 1px 0 #fafafa;
float:right;
display:none;
font:14px arial;
font-weight:bold;
}
.bigava{
width:82px;
height:82px;
background:url("/bigava.png");
float:left;
margin-right:5px;
}
.close {
background: url("/close.png") no-repeat 3px 2px;
float: right;
padding: 7px;
border-radius: 100%;
margin-top: -5px;
cursor:pointer;
margin-right: -4px;
-webkit-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
-ms-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
}
.close:hover{
background: url("/close.png") no-repeat 3px 2px #ccc;
-webkit-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
-ms-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
}
.close:active{
background: url("/close.png") no-repeat 3px 2px #bbb;
}
.hr{
width:270px !important;
height:0 !important;
border-top:1px solid #B8B8B8;
border-bottom:1px solid #fff;
float:left !important;
margin-left:-10px !important;
margin-top:10px !important;
}
.profilebg .li1 {
font: 11px arial;
padding: 3px 5px;
border-radius: 2px;
float: left;
margin-top: 3px;
width: 248px;
margin-left: -4px;
font-weight:bold;
color:black;
}
.profilebg .li1:hover{
background:white;
-webkit-transition:all 0.1s ease-in-out;
-o-transition:all 0.1s ease-in-out;
-ms-transition:all 0.1s ease-in-out;
-moz-transition:all 0.1s ease-in-out;
cursor:pointer;
}
.profilebg .li1:active{
background:#ccc;
box-shadow:inset 0 1px 2px #909090;
}
.bottombar{
border-top:1px solid #5191A1;
background:-webkit-linear-gradient(top,#25778A,#006077);
background:-o-linear-gradient(top,#25778A,#006077);
background:-ms-linear-gradient(top,#25778A,#006077);
background:-moz-linear-gradient(top,#25778A,#006077);
position:fixed;
bottom:0;
left:0;
right:0;
height:40px;
box-shadow: 0 0 6px black;
}
.chat {
background: transparent;
float: right;
border-top: none;
width: 250px;
height: 27px;
border-left: 1px solid #25878f;
color: white;
font: 12px arial;
padding-top: 13px;
padding-left: 9px;
}
.chat:hover{
background:-webkit-linear-gradient(top,#5B97A6,#337F91);
background:-o-linear-gradient(top,#5B97A6,#337F91);
background:-moz-linear-gradient(top,#5B97A6,#337F91);
background:-ms-linear-gradient(top,#5B97A6,#337F91);
float:right;
border-top:1px solid #85b1be;
width: 250px;
height: 27px;
margin-top:-1px;
cursor:pointer;
}
.chatactive{
background:-webkit-linear-gradient(top,#1E6677,#00566A) !important;
background:-o-linear-gradient(top,#1E6677,#00566A) !important;
background:-moz-linear-gradient(top,#1E6677,#00566A) !important;
background:-ms-linear-gradient(top,#1E6677,#00566A) !important;
float:right;
border-top:1px solid #006077 !important;
width: 250px;
height: 27px !important;
margin-top:-1px;
cursor:pointer;
border-left: 1px solid #25878f;
box-shadow:inset 0 0 7px #404040;
-moz-box-shadow:inset 0 0 7px #404040;
-o-box-shadow:inset 0 0 7px #404040;
-ms-box-shadow:inset 0 0 7px #404040;
}
.chatbox{
background:#Cfcfcf;
width:260px;
height:0px;
overflow:hidden;
position:fixed;
right:0;
bottom:41px;
border-top-left-radius:2px;
}
.topchatbox{
background:-webkit-linear-gradient(top,#25778A,#006077);
width:246px;
padding:5px 7px;
color: white;
font: 12px arial;
border-top:1px solid #5191A1;
border-top-left-radius:2px;
font-weight:bold;
}
.hide {
background: url("http://alogvinov.com/wp-content/uploads/2012/10/assassins_creed_3-HD.jpg") #202020;
width: 100%;
height: 100%;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
}
</style>
<div class="hide"></div>
<div class="top"><a href="/"><div class="li" style="margin-left:8px;border-radius:3px 0 0 3px;"><div class="homeico"></div>Домой</div></a><a href="/forum"><div class="li"><div class="homeico"></div>Форум</div></a><a href="/load"><div class="li" style="border-radius:0px 3px 3px 0;border-right:1px solid #777"><div class="homeico"></div>Каталог файлов</div></a><a href="/gb"><div class="li" style="margin-left: 10px;border-radius: 3px;border-right: 1px solid #777;"><div class="homeico"></div>Гостевая книга</div></a>
<div class="li pr" style="float:right;border-radius:3px;padding:7px 12px 7px 9px;height:16px;border-right: 1px solid #777;margin-right:9px;text-transform:none;"><?if($USER_AVATAR_URL$)?><div class="avatop" style=""><img src="$USER_AVATAR_URL$" width="26" height="25"></div><?else?><div class="avatop" style=""></div><?endif?>$USERNAME$</div><div class="profilebg"><?if($USER_AVATAR_URL$)?><div class="bigava"><img src="$USER_AVATAR_URL$" width="82" height="82"></div><?else?><div class="bigava"></div><?endif?><span style="float:left;">$USERNAME$</span><div class="close"></div><div class="hr"></div><?if($USER_LOGGED_IN$)?><a href="$PM_URL$"><div class="li1" style="margin-top:6px;">Личные сообщения</div></a><?else?><a href="$REGISTER_LINK$"><div class="li1" style="margin-top:6px;">Регистрация</div></a><?endif?><div class="li1">$USER_GROUP$</div><?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$"><div class="li1">Выход</div></a><?else?><a href="$LOGIN_LINK$"><div class="li1">Вход</div></a><?endif?></div>
<?if($USER_LOGGED_IN$)?><a href="/"><div class="li" style="float:right;border-radius:0px 3px 3px 0;border-right: 1px solid #777;height:16px;padding:7px 9px;margin-right:10px"><div class="sett"></div></div></a><a href="$PERSONAL_PAGE_LINK$"><div class="li" style="float:right;border-radius:3px 0 0 3px;padding:7px 9px;height:16px;"><div class="sett1"></div></div></a><?endif?></div>
<div class="bottombar"><div class="chat" onclick="active()">Открыть мини-чат</div><div class="chatbox"><div class="topchatbox">МИНИ-ЧАТ</div>$CHAT_BOX$</div></div>
<script>
$(".pr").click(function(){
$(".profilebg").fadeIn(300);
});
$(".close").click(function(){
$(".profilebg").fadeOut(300);
});
function active(){
$(".chat").addClass("chatactive");
$(".chat").attr("onclick","active1()");
$(".chat").html("Закрыть мини-чат");
$(".chatbox").animate({height:"400px"},300);
}
function active1(){
$(".chat").removeClass("chatactive");
$(".chat").attr("onclick","active()");
$(".chat").html("Открыть мини-чат");
$(".chatbox").animate({height:"0px"},300);
}
</script>
