From 4ebc40caf27d587b5249ff2c84a8e4bb84fd8d6b Mon Sep 17 00:00:00 2001
From: Serghey Rodin <serghey.rodin@gmail.com>
Date: Mon, 24 Dec 2012 13:24:02 +0200
Subject: [PATCH] clickable naviagiton tabs

---
 web/templates/admin/panel.html | 160 +++++++++++-------
 web/templates/header.html      | 294 +++++++++++++--------------------
 web/templates/user/panel.html  | 162 +++++++++++-------
 3 files changed, 312 insertions(+), 304 deletions(-)

diff --git a/web/templates/admin/panel.html b/web/templates/admin/panel.html
index 4998543a3..5d8484a75 100644
--- a/web/templates/admin/panel.html
+++ b/web/templates/admin/panel.html
@@ -7,70 +7,106 @@
                             <td>
                                 <table class="top">
                                     <tr>
-                                        <td width="179px"></td>
-                                        <td width="120px"><a class="top-<?php if($TAB == 'PACKAGE' ) echo 's' ?>link" href="/list/package/"><b>Packages</a></b></td>
-                                        <td width="120px"><a class="top-<?php if($TAB == 'IP' ) echo 's' ?>link" href="/list/ip/"><b>IP Adresses</a></b></td>
-                                        <td width="120px"><a class="top-<?php if($TAB == 'RRD' ) echo 's' ?>link" href="/list/rrd/"><b>RRD Graphics</a></b></td>
-                                        <td width="120px"><a class="top-<?php if($TAB == 'STATS' ) echo 's' ?>link" href="/list/stats/"><b>Statistics</a></b></td>
-                                        <td width="120px"><a class="top-<?php if($TAB == 'LOG' ) echo 's' ?>link" href="/list/log/"><b>History Log</a></b></td>
-                                        <td width="227px" style="padding: 0 24px 0 0; text-align: right;"><b><?php if($user != $_SESSION['user']) echo 'admin / ' ?><?php echo $user ?></b><a class="top-link" style="padding: 0 0 0 6" href="/logout/">Log out</a></td>
+                                        <td width="179px" style="border-bottom: 2px solid white; height: 24px;"></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"><a class="top-<?php if($TAB == 'PACKAGE' ) echo 'selected-' ?>link" href="/list/package/"><b>Packages</a></b></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"><a class="top-<?php if($TAB == 'IP' ) echo 'selected-' ?>link" href="/list/ip/"><b>IP Adresses</a></b></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"><a class="top-<?php if($TAB == 'RRD' ) echo 'selected-' ?>link" href="/list/rrd/"><b>RRD Graphics</a></b></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"><a class="top-<?php if($TAB == 'STATS' ) echo 'selected-' ?>link" href="/list/stats/"><b>Statistics</a></b></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"><a class="top-<?php if($TAB == 'LOG' ) echo 'selected-' ?>link" href="/list/log/"><b>History Log</a></b></td>
+                                        <td width="227px" style="border-bottom: 2px solid white; height: 24px; padding: 0 24px 0 0; text-align: right;"><b><?php if($user != $_SESSION['user']) echo 'admin / ' ?><?php echo $user ?></b><a class="top-link" style="padding: 0 0 0 6" href="/logout/">Log out</a></td>
                                     </tr>
-                                </table>
-                                <table class="nav">
                                     <tr>
-                                        <td class="logo">
-                                            <img src="/images/logo.png" width="124px" height="46px" alt="Vesta logo">
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'USER' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'USER' ) echo 's' ?>link" href="/list/user/"><b>USER</b></a>
-                                            <p class="counters">
-                                                users: <? echo $panel[$user]['U_USERS'] ?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_USERS']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'WEB' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'WEB' ) echo 's' ?>link" href="/list/web/"><b>WEB</b></a>
-                                            <p class="counters">
-                                                domains: <? echo $panel[$user]['U_WEB_DOMAINS']?><br>
-                                                aliases: <? echo $panel[$user]['U_WEB_ALIASES']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_WEB']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'DNS' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'DNS' ) echo 's' ?>link" href="/list/dns/"><b>DNS</b></a>
-                                            <p class="counters">
-                                                domains: <? echo $panel[$user]['U_DNS_DOMAINS']?><br>
-                                                records: <? echo $panel[$user]['U_DNS_RECORDS']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_DNS']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'MAIL' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'MAIL' ) echo 's' ?>link" href="/list/mail/"><b>MAIL</b></a>
-                                            <p class="counters">
-                                                domains: <? echo $panel[$user]['U_MAIL_DOMAINS']?><br>
-                                                accounts: <? echo $panel[$user]['U_MAIL_ACCOUNTS']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_MAIL']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'DB' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'DB' ) echo 's' ?>link" href="/list/db/"><b>DB</b></a>
-                                            <p class="counters">
-                                                databases: <? echo $panel[$user]['U_DATABASES']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_DB']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'CRON' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'CRON' ) echo 's' ?>link" href="/list/cron/"><b>CRON</b></a>
-                                            <p class="counters">
-                                                jobs: <? echo $panel[$user]['U_CRON_JOBS']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_CRON']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'BACKUP' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'BACKUP' ) echo 's' ?>link" href="/list/backup/"><b>BACKUP</b></a>
-                                            <p class="counters">
-                                                backups: <? echo $panel[$user]['U_BACKUPS']?><br> 
-                                            </p>
+                                        <td colspan="7" style="background: #ebe9dc; border-bottom: 8px solid #f7f6ed;">
+
+                                            <span class="nav-logo">
+                                                <img style="margin: 22px 0 0 4px;" src="/images/logo.png">
+                                            </span>
+
+                                            <a class="nav-lnk" href="/list/user/">
+                                            <span class="nav-<?php if($TAB == 'USER' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'USER' ) echo 'selected-' ?>header">
+                                                    USER
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    users: <? echo $panel[$user]['U_USERS'] ?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_USERS']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/web/">
+                                            <span class="nav-<?php if($TAB == 'WEB' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'WEB' ) echo 'selected-' ?>header">
+                                                    WEB
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    domains: <? echo $panel[$user]['U_WEB_DOMAINS']?><br>
+                                                    aliases: <? echo $panel[$user]['U_WEB_ALIASES']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_WEB']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/dns/">
+                                            <span class="nav-<?php if($TAB == 'DNS' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'DNS' ) echo 'selected-' ?>header">
+                                                    DNS
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    domains: <? echo $panel[$user]['U_DNS_DOMAINS']?><br>
+                                                    records: <? echo $panel[$user]['U_DNS_RECORDS']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_DNS']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/mail/">
+                                            <span class="nav-<?php if($TAB == 'MAIL' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'MAIL' ) echo 'selected-' ?>header">
+                                                    MAIL
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    domains: <? echo $panel[$user]['U_MAIL_DOMAINS']?><br>
+                                                    accounts: <? echo $panel[$user]['U_MAIL_ACCOUNTS']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_MAIL']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/db/">
+                                            <span class="nav-<?php if($TAB == 'DB' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'DB' ) echo 'selected-' ?>header">
+                                                    DB
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    databases: <? echo $panel[$user]['U_DATABASES']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_DB']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/cron/">
+                                            <span class="nav-<?php if($TAB == 'CRON' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'CRON' ) echo 'selected-' ?>header">
+                                                    CRON
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    jobs: <? echo $panel[$user]['U_CRON_JOBS']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_CRON']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/backup/">
+                                            <span class="nav-<?php if($TAB == 'BACKUP' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'BACKUP' ) echo 'selected-' ?>header">
+                                                    BACKUP
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    backups: <? echo $panel[$user]['U_BACKUPS']?><br>
+                                                </p>
+                                            </span>
+                                            </a>
                                         </td>
                                     </tr>
                                 </table>
diff --git a/web/templates/header.html b/web/templates/header.html
index 4ba8c35f4..70fe92d41 100644
--- a/web/templates/header.html
+++ b/web/templates/header.html
@@ -9,6 +9,7 @@
                 margin-left: auto;
                 margin-right: auto;
                 background-image: url(/images/b.png);
+                font-family: Arial, sans-serif;
             }
 
             form {
@@ -31,6 +32,7 @@
             ?> 
             }
 
+
             .top {
                 background: #555;
                 color: #cce4f0;
@@ -38,33 +40,137 @@
                 margin-left: auto;
                 margin-right: auto;
                 width: 990px;
-                font-family: Arial, sans-serif;
                 font-size: 10pt;
                 text-align: left;
                 line-height: 1.2em;
-                border-bottom: 2px solid white;
+                border: 0px;
+                border-collapse:collapse;
             }
 
             .top-link {
                 text-decoration: none;
-                color: #e6e6e6;
+                color: #e0e0e0;
             }
 
             .top-link:hover {
-                text-decoration: underline;
                 color: white;
             }
 
             .top-link:active{
-                text-decoration: underline;
                 color: #f5edb6;
             }
 
-            .top-slink {
+            .top-selected-link {
                 text-decoration: none;
                 color: #f5edb6;
             }
 
+            .top-logout {
+                text-decoration: none;
+                color: #e6e6e6;
+                padding: 0 0 0 2px;
+                border: noner;
+            }
+
+            .top-logout:hover {
+                color: white;
+            }
+
+            .nav-logo {
+                float:left;
+                height:100px;
+                width:159px;
+                background: #ebe9dc;
+            }
+
+            .nav-lnk {
+                text-decoration: none;
+                color: #555;
+                float:left;
+            }
+
+            .nav-lnk:hover {
+                color: #333;
+            }
+
+            .nav-lnk:active {
+                color: #ccc;
+            }
+
+            .nav-block {
+                margin: 0 2px 0 0;
+                height:100px;
+                width: 116px;
+                float:left;
+                cursor: pointer;
+            }
+
+            .nav-block:hover {
+                background: #fafafa;
+            }
+
+            .nav-selected-block {
+                margin: 0 2px 0 0;
+                color: #80a7cc;
+                height: 100px;
+                width: 116px;
+                float: left;
+                background: #fafafa;
+                cursor: pointer;
+            }
+
+            .nav-selected-block:hover {
+                background: #fafafa;
+            }
+
+            .nav-header {
+                padding: 13px 0 0 6px;
+                margin: 0;
+                letter-spacing: -1.0px;
+                font-size: 16pt;
+                font-weight: bold;
+            }
+
+            .nav-selected-header {
+                padding: 13px 0 0 6px;
+                margin: 0;
+                letter-spacing: -1.0px;
+                font-size: 16pt;
+                font-weight: bold;
+            }
+
+            .nav-counters {
+                padding: 6px 0 5px 6px;
+                margin: 0;
+                height: 58px;
+                line-height: 1.4em;
+                letter-spacing: 0.1px;
+                font-size: 9pt;
+                color: #555;
+            }
+
+            .sub-menu {
+                margin-left: auto;
+                margin-right: auto;
+                width: 990px;
+                font-size: 10pt;
+                text-align: left;
+                vertical-align:top;
+                padding: 0px 10px 0px 0;
+                background: none repeat scroll 0% 0% white;
+            }
+
+            .select-controls {
+                color: #6A6A6A;
+                font-size: 8pt;
+                letter-spacing: 0.1em;
+                text-decoration: none;
+            }
+
+            .select-controls:hover {
+                text-decoration: underline;
+            }
+
             .bottom {
                 background: #ebe9dc;
                 color: #555;
@@ -73,7 +179,6 @@
                 margin-left: auto;
                 margin-right: auto;
                 width: 990px;
-                font-family: Arial, sans-serif;
                 font-size: 8pt;
                 text-align: center;
                 vertical-align:top;
@@ -97,124 +202,9 @@
                 color: #7fa1cb;
             }
 
-            .nav {
-                background: #ebe9dc;
-                margin-left: auto;
-                margin-right: auto;
-                width: 990px;
-                text-align: left;
-                vertical-align:top;
-                padding: 0;
-                border-bottom: 8px solid #F7F6ED;
-            }
-
-            .logo {
-                width: 147px !important;
-                padding: 0 0 0 4px;
-            }
-
-            .nav-block {
-                vertical-align:top;
-                margin: 0;
-                text-align: left;
-                display: inline;
-                list-style: none outside none;
-                float: left;
-                padding: 16px 4px 2px 10px;
-                width: 102px;
-                line-height: 1.0em;
-                font-size: 9pt;
-                font-family: Arial, sans-serif;
-                color: #2d2d2d;
-                border-left:1px dotted #ebe9dc;
-                border-right:1px dotted #ebe9dc;
-            }
-
-            .nav-block:hover {
-                background: #fafafa;
-                border-left:1px dotted #ccc;
-                border-right:1px dotted #ccc;
-            }
-
-            .nav-sblock {
-                vertical-align:top;
-                margin: 0;
-                text-align: left;
-                display: inline;
-                list-style: none outside none;
-                float: left;
-                padding: 16px 4px 2px 10px;
-                width: 102px;
-                line-height: 1.0em;
-                font-size: 9pt;
-                font-family: Arial, sans-serif;
-                color: #2d2d2d;
-                background: #fafafa;
-                border-left:1px dotted #fafafa;
-                border-right:1px dotted #fafafa;
-
-            }
-
-            .nav-link {
-                letter-spacing: -1.0px;
-                font-size: 16pt;
-                color: #555;
-                font-family: Arial, sans-serif;
-                text-decoration: none;
-            }
-
-            .nav-link:hover {
-                color: #333;
-                text-decoration: underline;
-
-            }
-
-            .nav-link:active {
-                color: #ccc;
-                text-decoration: underline;
-            }
-
-            .nav-slink {
-                letter-spacing: -1.0px;
-                font-size: 16pt;
-                color: #7fa1cb;
-                font-family: Arial, sans-serif;
-                text-decoration: none;
-            }
-
-            .nav-slink:active {
-                color: #ccc;
-                text-decoration: underline;
-            }
-
-            .sub-menu {
-                margin-left: auto;
-                margin-right: auto;
-                width: 990px;
-                font-family: Arial, sans-serif;
-                font-size: 10pt;
-                text-align: left;
-                vertical-align:top;
-                padding: 0px 10px 0px 0;
-                background: none repeat scroll 0% 0% white;
-            }
-
-            .select-controls {
-                color: #6A6A6A;
-                font-size: 8pt;
-                font-family: Arial, sans-serif;
-                letter-spacing: 0.1em;
-                text-decoration: none;
-            }
-
-            .select-controls:hover {
-                text-decoration: underline;
-            }
-
             .vst {
                 padding: 0 8px 0 0;
                 margin: 0;
-                font-family: Arial, sans-serif;
                 text-decoration: none;
                 color: #8B99A2;
                 font-size: 12pt;
@@ -228,23 +218,12 @@
                 color: #34536A;
             }
 
-            .counters {
-                height: 58px;
-                line-height: 1.4em;
-                font-size: 9pt;
-                font-family: Arial, sans-serif;
-                color: #555;
-                padding: 8px 0 4px 0;
-                margin: 0;
-            }
-
             .data {
                 border-collapse:collapse;
                 margin-left: auto;
                 margin-right: auto;
                 width: 990px;
                 color: #e5a907;
-                font-family: Arial, serif;
                 font-size: 12pt;
                 text-align: left;
                 vertical-align:top;
@@ -314,13 +293,11 @@
                 padding: 0 0 0 18;
                 letter-spacing: 0.3em;
                 font-size: 8pt;
-                font-family: Arial;
                 color: #6A6A6A
             }
 
             .data-active {
                 font-size: 8pt;
-                font-family: Arial;
                 letter-spacing: 0.1em;
                 color: #9ba68c;
                 padding: 0 0 13 18;
@@ -328,7 +305,6 @@
 
             .data-suspended {
                 font-size: 8pt;
-                font-family: Arial;
                 letter-spacing: 0.1em;
                 color: #de6c5d;
                 padding: 0 0 13 18;
@@ -337,7 +313,6 @@
             .data-controls {
                 border-left: 1px solid #E6E6E6;
                 font-size: 8pt;
-                font-family: Arial, sans-serif;
                 padding: 2 5 0 5;
                 letter-spacing: 0.1em;
                 color: #34536A;
@@ -381,51 +356,43 @@
                 background: #ebe9dc;
                 color: #555;
                 font-size: 8pt;
-                font-family: Arial;
                 margin: 18px 0 0 0;
                 text-align:right;
                 padding: 0 16px 0 0;
             }
 
             .chart1 {
-                font-family: Arial, sans-serif;
                 font-size: 10pt;
             }
 
             .chart2 {
                 color: #484243;
-                font-family: Arial, sans-serif;
                 font-size: 8pt;
             }
 
             .username {
                 color: #555555;
-                font-family: Arial, sans-serif;
                 font-size: 16pt;
                 line-height: 1.2em;
             }
 
             .domain {
                 color: #555555;
-                font-family: Arial, sans-serif;
                 font-size: 16pt;
                 line-height: 0.8em;
             }
 
             .cron {
                 color: #555555;
-                font-family: Arial, sans-serif;
                 font-size: 18px;
             }
 
             .log {
                 color: #555555;
-                font-family: Arial, sans-serif;
                 font-size: 12pt;
             }
 
             .aliases {
-                font-family: Arial;
                 font-size: 12pt;
                 color: #99a7af;
                 padding: 0 0 0 8px;
@@ -434,12 +401,10 @@
             .nginx-ext {
                 color: black;
                 vertical-align:top;
-                font-family: Arial, sans-serif;
                 font-size: 10pt;
             }
 
             .fullname {
-                font-family: Arial;
                 font-size: 18px;
                 color: #99a7af;
                 padding: 0 0 0 8px;
@@ -448,7 +413,6 @@
             .counter-name {
                 vertical-align:top;
                 line-height: 1.2em;
-                font-family: Arial, sans-serif;
                 font-size: 10pt;
                 color: #484243;
                 color: #5c5455;
@@ -457,7 +421,6 @@
             .cron-counter-name {
                 vertical-align:top;
                 line-height: 0.8em;
-                font-family: Arial, sans-serif;
                 font-size: 8pt;
                 padding: 4 0 0 0;
                 color: #484243;
@@ -467,7 +430,6 @@
             .counter-value {
                 vertical-align:top;
                 line-height: 1.2em;
-                font-family: Arial, sans-serif;
                 font-size: 10pt;
                 color: black;
                 padding: 0 0 0 4px;
@@ -475,7 +437,6 @@
 
             .log-counter-value {
                 vertical-align:top;
-                font-family: Arial, sans-serif;
                 font-size: 12pt;
                 color: #484243;
             }
@@ -483,20 +444,17 @@
             .cron-counter-value {
                 vertical-align:top;
                 line-height: 1.2em;
-                font-family: Arial, sans-serif;
                 font-size: 12pt;
                 color: #484243;
             }
 
             .name {
-                font-family: Arial;
                 font-size: 16pt;
                 color: #777;
                 padding: 0 0 0 10px;
             }
 
             .vst-ok {
-                font-family: Arial;
                 font-size: 18px;
                 color: #62a358;
                 padding: 0 0 0 6px;
@@ -512,14 +470,12 @@
             }
 
             .vst-error {
-                font-family: Arial;
                 font-size: 18px;
                 color: #de6c5d;
                 padding: 0 0 0 6px;
             }
 
             .vst-text {
-                font-family: Arial, sans-serif;
                 font-size: 12pt;
             }
 
@@ -528,7 +484,6 @@
                 border: 1px solid #999999;
                 border-radius: 3px 3px 3px 3px;
                 color: #555555;
-                font-family: Arial,sans-serif;
                 font-size: 18px;
                 padding: 6px;
                 width: 360px;
@@ -548,7 +503,6 @@
                 border: 1px solid #999999;
                 border-radius: 3px 3px 3px 3px;
                 color: #555555;
-                font-family: Arial,sans-serif;
                 font-size: 14pt;
                 padding: 6px;
                 width: 360px;
@@ -628,7 +582,6 @@
             .genpass {
                 color: #34536a;
                 font-size: 8pt;
-                font-family: Arial, sans-serif;
                 padding: 0 5px 0 8px;
                 letter-spacing: 0.1em;
                 text-decoration: underline;
@@ -641,7 +594,6 @@
             .vst-advanced {
                 color: #34536a;
                 font-size: 10pt;
-                font-family: Arial, sans-serif;
                 letter-spacing: 0.1em;
                 text-decoration: none;
                 border-bottom: 1px solid #f79b44;
@@ -665,14 +617,13 @@
             }
 
             #vstobjects{
-                padding-top: 192px;
+                padding-top: 188px;
                 width: 996px;
                 padding-left: 3px;
                 min-height: 370px;
             }
 
             .login {
-                font-family: Arial, sans-serif;
                 margin: 80px 0 80px 0;
                 padding: 0;
                 border-top: 1px solid #cccccc;
@@ -726,10 +677,6 @@
                     vertical-align: baseline;
                 }
 
-                .top {
-                    border-top: 5px solid white;
-                }
-
                 .fixed {
                     margin-top: -3px;
                 }
@@ -739,26 +686,13 @@
                 }
 
                 #vstobjects{
-                    padding-top: 192px;
+                    padding-top: 188px;
                     min-height: 370px;
                     height: auto !important;
                     height: 370px;
                     width: 996px;
                 }
 
-                #nav-block td {
-                    display: inline;
-                    list-style: none outside none;
-                    float: left;
-                    height: 94px;
-                    padding: 20px 11px 12px 13px;
-                    line-height: 1.0em;
-                    font-size: 9pt;
-                    font-family: Arial, sans-serif;
-                    color: #2d2d2d;
-                    background: url(/images/transparent-image.png) no-repeat;
-                }
-
             </style>
         <![endif]-->
         <link type="text/css" href="/css/jquery-custom-dialogs.css" rel="stylesheet" />
diff --git a/web/templates/user/panel.html b/web/templates/user/panel.html
index f381630ce..75e1e9539 100644
--- a/web/templates/user/panel.html
+++ b/web/templates/user/panel.html
@@ -7,69 +7,107 @@
                             <td>
                                 <table class="top">
                                     <tr>
-                                        <td width="174px"></td>
-                                        <td width="118px"><a class="top-<?php if($TAB == 'STATS' ) echo 's' ?>link" href="/list/stats/"><b>Statistics</a></b></td>
-                                        <td width="120px"><a class="top-<?php if($TAB == 'LOG' ) echo 's' ?>link" href="/list/log/"><b>History Log</a></b></td>
-                                        <td width="120px"></td>
-                                        <td width="120px"></td>
-                                        <td width="120px"></td>
-                                        <td width="228px" style="padding: 0 26px 0 0; text-align: right;"><b><?php if($user != $_SESSION['user']) echo 'admin / ' ?><?php echo $user ?></b><a class="top-link" style="padding: 0 0 0 6" href="/logout/">Log out</a></td>
+                                        <td width="174px" style="border-bottom: 2px solid white; height: 24px;"></td>
+                                        <td width="118px" style="border-bottom: 2px solid white; height: 24px;"><a class="top-<?php if($TAB == 'STATS' ) echo 'selected-' ?>link" href="/list/stats/"><b>Statistics</a></b></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"><a class="top-<?php if($TAB == 'LOG' ) echo 'selected-' ?>link" href="/list/log/"><b>History Log</a></b></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"></td>
+                                        <td width="120px" style="border-bottom: 2px solid white; height: 24px;"></td>
+                                        <td width="228px" style="border-bottom: 2px solid white; height: 24px; padding: 0 24px 0 0; text-align: right;"><b><?php if($user != $_SESSION['user']) echo 'admin / ' ?><?php echo $user ?></b><a class="top-link" style="padding: 0 0 0 6" href="/logout/">Log out</a></td>
                                     </tr>
-                                </table>
-                                <table class="nav">
-                                        <td class="logo">
-                                            <img src="/images/logo.png" width="124px" height="46px" alt="Vesta logo">
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'USER' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'USER' ) echo 's' ?>link" href="/list/user/"><b>USER</b></a>
-                                            <p class="counters">
-                                                users: <? echo $panel[$user]['U_USERS'] ?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_USERS']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'WEB' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'WEB' ) echo 's' ?>link" href="/list/web/"><b>WEB</b></a>
-                                            <p class="counters">
-                                                domains: <? echo $panel[$user]['U_WEB_DOMAINS']?><br>
-                                                aliases: <? echo $panel[$user]['U_WEB_ALIASES']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_WEB']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'DNS' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'DNS' ) echo 's' ?>link" href="/list/dns/"><b>DNS</b></a>
-                                            <p class="counters">
-                                                domains: <? echo $panel[$user]['U_DNS_DOMAINS']?><br>
-                                                records: <? echo $panel[$user]['U_DNS_RECORDS']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_DNS']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'MAIL' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'MAIL' ) echo 's' ?>link" href="/list/mail/"><b>MAIL</b></a>
-                                            <p class="counters">
-                                                domains: <? echo $panel[$user]['U_MAIL_DOMAINS']?><br>
-                                                accounts: <? echo $panel[$user]['U_MAIL_ACCOUNTS']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_MAIL']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'DB' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'DB' ) echo 's' ?>link" href="/list/db/"><b>DB</b></a>
-                                            <p class="counters">
-                                                databases: <? echo $panel[$user]['U_DATABASES']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_DB']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'CRON' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'CRON' ) echo 's' ?>link" href="/list/cron/"><b>CRON</b></a>
-                                            <p class="counters">
-                                                jobs: <? echo $panel[$user]['U_CRON_JOBS']?><br>
-                                                suspended: <? echo $panel[$user]['SUSPENDED_CRON']?> 
-                                            </p>
-                                        </td>
-                                        <td class="nav-<?php if($TAB == 'BACKUP' ) echo 's' ?>block">
-                                            <a class="nav-<?php if($TAB == 'BACKUP' ) echo 's' ?>link" href="/list/backup/"><b>BACKUP</b></a>
-                                            <p class="counters">
-                                                backups: <? echo $panel[$user]['U_BACKUPS']?><br> 
-                                            </p>
+                                    <tr>
+                                        <td colspan="7" style="background: #ebe9dc; border-bottom: 8px solid #f7f6ed;">
+
+                                            <span class="nav-logo">
+                                                <img style="margin: 22px 0 0 4px;" src="/images/logo.png">
+                                            </span>
+
+                                            <a class="nav-lnk" href="/list/user/">
+                                            <span class="nav-<?php if($TAB == 'USER' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'USER' ) echo 'selected-' ?>header">
+                                                    USER
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    disk: <? echo humanize_usage($panel[$user]['U_DISK']) ?> <br>
+                                                    traffic: <? echo humanize_usage($panel[$user]['U_BANDWIDTH']) ?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/web/">
+                                            <span class="nav-<?php if($TAB == 'WEB' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'WEB' ) echo 'selected-' ?>header">
+                                                    WEB
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    domains: <? echo $panel[$user]['U_WEB_DOMAINS']?><br>
+                                                    aliases: <? echo $panel[$user]['U_WEB_ALIASES']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_WEB']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/dns/">
+                                            <span class="nav-<?php if($TAB == 'DNS' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'DNS' ) echo 'selected-' ?>header">
+                                                    DNS
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    domains: <? echo $panel[$user]['U_DNS_DOMAINS']?><br>
+                                                    records: <? echo $panel[$user]['U_DNS_RECORDS']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_DNS']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/mail/">
+                                            <span class="nav-<?php if($TAB == 'MAIL' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'MAIL' ) echo 'selected-' ?>header">
+                                                    MAIL
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    domains: <? echo $panel[$user]['U_MAIL_DOMAINS']?><br>
+                                                    accounts: <? echo $panel[$user]['U_MAIL_ACCOUNTS']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_MAIL']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/db/">
+                                            <span class="nav-<?php if($TAB == 'DB' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'DB' ) echo 'selected-' ?>header">
+                                                    DB
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    databases: <? echo $panel[$user]['U_DATABASES']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_DB']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/cron/">
+                                            <span class="nav-<?php if($TAB == 'CRON' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'CRON' ) echo 'selected-' ?>header">
+                                                    CRON
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    jobs: <? echo $panel[$user]['U_CRON_JOBS']?><br>
+                                                    suspended: <? echo $panel[$user]['SUSPENDED_CRON']?>
+                                                </p>
+                                            </span>
+                                            </a>
+
+                                            <a class="nav-lnk" href="/list/backup/">
+                                            <span class="nav-<?php if($TAB == 'BACKUP' ) echo 'selected-' ?>block">
+                                                <p class="nav-<?php if($TAB == 'BACKUP' ) echo 'selected-' ?>header">
+                                                    BACKUP
+                                                </p>
+                                                <p class="nav-counters" style="decoration: none;">
+                                                    backups: <? echo $panel[$user]['U_BACKUPS']?><br>
+                                                </p>
+                                            </span>
+                                            </a>
                                         </td>
                                     </tr>
                                 </table>