From 792acd7b17591a833b7e540a70daeb7ab541db4a Mon Sep 17 00:00:00 2001
From: "Fedor A. Fetisov" <faf@ossg.ru>
Date: Tue, 16 Dec 2014 17:19:49 +0300
Subject: [PATCH] Beautify stylesheets and fix #73

---
 .../js/source/default/model_views/message.js  |    4 +-
 src/mibew/js/source/soundcheck.js             |    4 +-
 .../collection_views/threads_collection.js    |    8 +-
 src/mibew/js/source/widget.js                 |   16 +-
 .../Mibew/Button/Generator/ImageGenerator.php |    2 +-
 src/mibew/libs/pagination.php                 |    4 +-
 src/mibew/styles/chats/default/chat.css       |  236 +--
 src/mibew/styles/chats/default/chat_ie7.css   |    8 +-
 .../client_side/_logo.handlebars              |    2 +-
 .../chat/controls/user_name.handlebars        |    2 +-
 .../client_side/chat/layout.handlebars        |    6 +-
 .../client_side/chat/message.handlebars       |    4 +-
 .../client_side/chat/message_form.handlebars  |    4 +-
 .../leave_message/description.handlebars      |    4 +-
 .../client_side/leave_message/form.handlebars |    2 +-
 .../leave_message/layout.handlebars           |    2 +-
 .../leave_message/sent_description.handlebars |    4 +-
 .../client_side/message.handlebars            |    4 +-
 .../client_side/survey/form.handlebars        |    2 +-
 .../client_side/survey/layout.handlebars      |    6 +-
 .../server_side/_layout.handlebars            |    6 +-
 .../server_side/confirm.handlebars            |    2 +-
 .../server_side/error.handlebars              |    2 +-
 .../templates_src/server_side/mail.handlebars |    2 +-
 .../server_side/mailsent.handlebars           |    2 +-
 .../server_side/nochat.handlebars             |    2 +-
 .../server_side/redirect.handlebars           |    2 +-
 .../server_side/redirected.handlebars         |    2 +-
 .../styles/invitations/default/invite.css     |   42 +-
 .../styles/pages/default/css/default.css      | 1448 ++++++++---------
 .../styles/pages/default/css/default_ie.css   |    6 +-
 src/mibew/styles/pages/default/js/locale.js   |   24 +-
 .../client_side/message.handlebars            |    4 +-
 .../client_side/users/status_panel.handlebars |    2 +-
 .../users/visitors_collection.handlebars      |    2 +-
 .../server_side/_errors.handlebars            |    2 +-
 .../server_side/_layout.handlebars            |   18 +-
 .../server_side/_menu.handlebars              |    2 +-
 .../templates_src/server_side/ban.handlebars  |   42 +-
 .../templates_src/server_side/bans.handlebars |    6 +-
 .../server_side/button_code.handlebars        |   84 +-
 .../canned_message_edit.handlebars            |   28 +-
 .../server_side/canned_messages.handlebars    |   18 +-
 .../server_side/group_edit.handlebars         |  108 +-
 .../server_side/group_members.handlebars      |   20 +-
 .../server_side/groups.handlebars             |   24 +-
 .../server_side/history.handlebars            |   34 +-
 .../server_side/history_thread.handlebars     |   26 +-
 .../server_side/index.handlebars              |   64 +-
 .../server_side/install_done.handlebars       |    4 +-
 .../server_side/install_password.handlebars   |   18 +-
 .../server_side/install_step.handlebars       |   12 +-
 .../server_side/locales.handlebars            |   16 +-
 .../server_side/login.handlebars              |   26 +-
 .../server_side/mail_template_edit.handlebars |   28 +-
 .../server_side/mail_templates.handlebars     |   16 +-
 .../server_side/operator_avatar.handlebars    |   36 +-
 .../server_side/operator_edit.handlebars      |   76 +-
 .../server_side/operator_groups.handlebars    |   24 +-
 .../operator_permissions.handlebars           |   18 +-
 .../server_side/operators.handlebars          |   24 +-
 .../server_side/password_recovery.handlebars  |   18 +-
 .../password_recovery_reset.handlebars        |   24 +-
 .../server_side/plugins.handlebars            |    6 +-
 .../server_side/settings_common.handlebars    |  132 +-
 .../server_side/settings_features.handlebars  |  140 +-
 .../settings_performance.handlebars           |  116 +-
 .../server_side/statistics.handlebars         |   40 +-
 .../server_side/style_preview.handlebars      |   22 +-
 .../server_side/tracked.handlebars            |    8 +-
 .../server_side/translation_edit.handlebars   |   26 +-
 .../server_side/translation_export.handlebars |   20 +-
 .../server_side/translation_import.handlebars |   36 +-
 .../server_side/translations.handlebars       |   16 +-
 .../server_side/update_intro.handlebars       |   12 +-
 .../server_side/update_progress.handlebars    |   12 +-
 .../server_side/updates.handlebars            |   12 +-
 .../server_side/users.handlebars              |    2 +-
 78 files changed, 1590 insertions(+), 1698 deletions(-)

diff --git a/src/mibew/js/source/default/model_views/message.js b/src/mibew/js/source/default/model_views/message.js
index 7f099085..30f4e18e 100644
--- a/src/mibew/js/source/default/model_views/message.js
+++ b/src/mibew/js/source/default/model_views/message.js
@@ -75,10 +75,10 @@
                     return "hidden";
                 }
                 if (kind == this.model.KIND_INFO) {
-                    return "inf";
+                    return "info";
                 }
                 if (kind == this.model.KIND_CONN) {
-                    return "conn";
+                    return "connection";
                 }
                 if (kind == this.model.KIND_EVENTS) {
                     return "event";
diff --git a/src/mibew/js/source/soundcheck.js b/src/mibew/js/source/soundcheck.js
index eaa0456c..01d85518 100644
--- a/src/mibew/js/source/soundcheck.js
+++ b/src/mibew/js/source/soundcheck.js
@@ -18,11 +18,11 @@
 
 (function(Mibew, $) {
     $(document).ready(function() {
-        $('#check-nv').click(function(){
+        $('#check-new-visitor').click(function(){
             Mibew.Utils.playSound('../sounds/new_user');
         });
 
-        $('#check-nm').click(function() {
+        $('#check-new-message').click(function() {
             Mibew.Utils.playSound('../sounds/new_message');
         });
     });
diff --git a/src/mibew/js/source/users/collection_views/threads_collection.js b/src/mibew/js/source/users/collection_views/threads_collection.js
index 6cc9680c..59827fa1 100644
--- a/src/mibew/js/source/users/collection_views/threads_collection.js
+++ b/src/mibew/js/source/users/collection_views/threads_collection.js
@@ -120,7 +120,7 @@
                     }
 
                     // Create new style name
-                    var style = ((queueCode != this.QUEUE_BAN)?'in':'')
+                    var style = ((queueCode != this.QUEUE_BAN)?'in-':'')
                         + this.queueCodeToString(queueCode);
 
                     // Store new styles
@@ -216,16 +216,16 @@
              */
             queueCodeToString: function(code) {
                 if (code == this.QUEUE_PRIO) {
-                    return "prio";
+                    return "priority-queue";
                 }
                 if (code == this.QUEUE_WAITING) {
-                    return "wait";
+                    return "waiting";
                 }
                 if (code == this.QUEUE_CHATTING) {
                     return "chat";
                 }
                 if (code == this.QUEUE_BAN) {
-                    return "ban";
+                    return "banned";
                 }
                 if (code == this.QUEUE_CLOSED) {
                     return "closed";
diff --git a/src/mibew/js/source/widget.js b/src/mibew/js/source/widget.js
index 47af18b2..79f1619f 100644
--- a/src/mibew/js/source/widget.js
+++ b/src/mibew/js/source/widget.js
@@ -391,8 +391,8 @@ var Mibew = {};
         var threadUrl = options.threadUrl;
         var acceptCaption = options.acceptCaption;
 
-        var popuptext = '<div id="mibewinvitationpopup" style="display: none;">';
-        popuptext += '<div id="mibewinvitationclose">'
+        var popuptext = '<div id="mibew-invitation-popup" style="display: none;">';
+        popuptext += '<div id="mibew-invitation-close">'
             + '<a href="javascript:void(0);" onclick="Mibew.Invitation.reject();">'
             + '&times;</a></div>';
 
@@ -405,7 +405,7 @@ var Mibew = {};
 
         // Add operator avatar
         if (avatarUrl) {
-            popuptext += '<img id="mibewinvitationavatar" src="' + avatarUrl
+            popuptext += '<img id="mibew-invitation-avatar" src="' + avatarUrl
                 + '" title="' + operatorName
                 + '" alt="' + operatorName
                 + '" onclick="Mibew.Invitation.accept();" />';
@@ -413,14 +413,14 @@ var Mibew = {};
 
         // Broadcast message from the thread related with invitation into iframe
         if (threadUrl) {
-            popuptext += '<iframe id="mibewinvitationframe" '
+            popuptext += '<iframe id="mibew-invitation-frame" '
                 + 'src="' + threadUrl + '" onload="Mibew.Invitation.show();" '
                 + 'frameBorder="0"></iframe>';
         }
 
         // Add accept button if acceptCaption set
         if (acceptCaption) {
-            popuptext += '<div id="mibewinvitationaccept"'
+            popuptext += '<div id="mibew-invitation-accept"'
                 + ' onclick="Mibew.Invitation.accept();">'
                 + acceptCaption
                 + '</div>';
@@ -428,7 +428,7 @@ var Mibew = {};
 
         popuptext += '<div style="clear: both;"></div></div>';
 
-        var invitationdiv = document.getElementById("mibewinvitation");
+        var invitationdiv = document.getElementById("mibew-invitation");
         if (invitationdiv) {
                 invitationdiv.innerHTML = popuptext;
         }
@@ -438,7 +438,7 @@ var Mibew = {};
      * Display invitation popup
      */
     Mibew.Invitation.show = function() {
-        var invitationPopup = document.getElementById('mibewinvitationpopup');
+        var invitationPopup = document.getElementById('mibew-invitation-popup');
         if (invitationPopup) {
             Mibew.Invitation.trigger('show');
             invitationPopup.style.display = 'block';
@@ -449,7 +449,7 @@ var Mibew = {};
      * Hide invitation popup and remove it from DOM
      */
     Mibew.Invitation.hide = function() {
-        var invitationPopup = document.getElementById('mibewinvitationpopup');
+        var invitationPopup = document.getElementById('mibew-invitation-popup');
         if (invitationPopup) {
             Mibew.Invitation.trigger('hide');
             invitationPopup.parentNode.removeChild(invitationPopup);
diff --git a/src/mibew/libs/classes/Mibew/Button/Generator/ImageGenerator.php b/src/mibew/libs/classes/Mibew/Button/Generator/ImageGenerator.php
index cd5147b8..967b5f8b 100644
--- a/src/mibew/libs/classes/Mibew/Button/Generator/ImageGenerator.php
+++ b/src/mibew/libs/classes/Mibew/Button/Generator/ImageGenerator.php
@@ -146,7 +146,7 @@ class ImageGenerator extends TextGenerator
         $widget_data['visitorCookieName'] = VISITOR_COOKIE_NAME;
 
         $markup = HTML5\html('fragment');
-        $markup->addChild(HTML5\html('div#mibewinvitation'));
+        $markup->addChild(HTML5\html('div#mibew-invitation'));
         $markup->addChild(
             HTML5\html('script')->setAttributes(array(
                 'type' => 'text/javascript',
diff --git a/src/mibew/libs/pagination.php b/src/mibew/libs/pagination.php
index 7ac72247..48de54e9 100644
--- a/src/mibew/libs/pagination.php
+++ b/src/mibew/libs/pagination.php
@@ -177,7 +177,7 @@ function generate_pagination($pagination, $bottom = true)
             $result .= generate_pagination_link(
                 $curr_page - 1,
                 generate_pagination_arrow(
-                    "prevpage",
+                    "prev-page",
                     getlocal("previous")
                 )
             ) . PAGINATION_SPACING;
@@ -199,7 +199,7 @@ function generate_pagination($pagination, $bottom = true)
             $result .= PAGINATION_SPACING . generate_pagination_link(
                 $curr_page + 1,
                 generate_pagination_arrow(
-                    "nextpage",
+                    "next-page",
                     getlocal("next")
                 )
             );
diff --git a/src/mibew/styles/chats/default/chat.css b/src/mibew/styles/chats/default/chat.css
index 1373e61b..d7af33ed 100644
--- a/src/mibew/styles/chats/default/chat.css
+++ b/src/mibew/styles/chats/default/chat.css
@@ -14,16 +14,20 @@
  * limitations under the License.
  */
 
-html, body {
+/* basic settings */
+html,
+body {
     height: 100%;
 }
 body {
     margin: 0;
     padding: 0;
-    font: normal 11px Tahoma;
+    font-weight: normal;
+    font-size: 11px;
+    font-family: Tahoma, sans-serif;
     line-height: 1;
     min-width: 500px;
-    background-color: #F1F2F2;
+    background-color: #f1f2f2;
 }
 body.rtl {
     text-align: right;
@@ -35,7 +39,7 @@ body.invitation {
 }
 a {
     text-decoration: underline;
-    color: #008AD9;
+    color: #008ad9;
 }
 a:hover {
     text-decoration: none;
@@ -53,30 +57,30 @@ img {
     visibility: hidden;
 }
 
-/* layout chat */
+/* layout of chat */
 #top {
     position: relative;
     padding: 5px 14px;
-    background: #FFF url("images/topbg.gif") scroll repeat-x 0 100%;
-    _zoom:1; /* IE6 fix */
+    background: #ffffff url("images/topbg.gif") scroll repeat-x 0 100%;
+    _zoom: 1; /* IE6 fix */
 }
 #chat-header {
     position: relative;
     padding: 0 10px;
-    background: #F1F2F2 url("images/chatheaderbg.gif") scroll repeat-x 0 0;
-    _zoom:1; /* IE6 fix */
+    background: #f1f2f2 url("images/chatheaderbg.gif") scroll repeat-x 0 0;
+    _zoom: 1; /* IE6 fix */
 }
 #chat {
     padding: 0 10px;
-    background: #F1F2F2;
+    background: #f1f2f2;
 }
 #message {
     padding: 0 10px;
-    background: #F1F2F2;
+    background: #f1f2f2;
 }
 #send {
     padding: 0 10px 5px;
-    background: #FFF url("images/bottombg.gif") scroll repeat-x 0 0;
+    background: #ffffff url("images/bottombg.gif") scroll repeat-x 0 0;
 }
 #footer {
     width: 400px;
@@ -84,27 +88,28 @@ img {
     padding-top: 5px;
     padding-bottom: 5px;
     text-align: center;
-    color: #999;
+    color: #999999;
 }
 #footer a {
-    color: #999;
+    color: #999999;
 }
-/* ----------- */
 
-/* #chatheader */
-#chat-header .bgc {
-    background: #FFF url("images/chatheaderbgc.gif") scroll repeat-x 0 0;
+/* chat header (#chat-header) */
+#chat-header .background-center {
+    background: #ffffff url("images/chatheaderbgc.gif") scroll repeat-x 0 0;
 }
-#chat-header .bgl {
+#chat-header .background-left {
     background: transparent url("images/chatheaderbgl.gif") scroll no-repeat 0 0;
-    _zoom:1; /* IE6 fix */
+    _zoom: 1; /* IE6 fix */
 }
-#chat-header .bgr {
+#chat-header .background-right {
     height: 42px;
     background: transparent url("images/chatheaderbgr.gif") scroll no-repeat 100% 0;
 }
 #logo {
-    font: normal 17px Arial;
+    font-weight: normal;
+    font-size: 17px;
+    font-family: Arial, sans-serif;
     color: #495151;
     padding: 10px 0;
 }
@@ -117,9 +122,8 @@ img {
     margin-top: 5px;
     text-align: right;
 }
-/* ----------- */
 
-/* controls */
+/* common controls */
 #controls-region {
     padding-right: 25px;
 }
@@ -134,10 +138,10 @@ img {
     height: 16px;
     background: transparent url("images/buttons.gif") scroll no-repeat 0 0;
 }
-.iclosewin {
+.image-close-window {
 	background-position: -128px -16px;
 }
-a:hover .iclosewin {
+a:hover .image-close-window {
 	background-position: -128px 0;
 }
 .close-control .tpl-image {
@@ -211,11 +215,11 @@ a:hover .iclosewin {
 .user-name-control-change:hover {
     background-position: -16px 0;
 }
-.user-name-control-input-bg {
+.user-name-control-input-background {
     width: 95px;
     height: 16px;
     padding: 3px;
-    background: #FFF url("images/input_name.gif") scroll no-repeat 0 0;
+    background: #ffffff url("images/input_name.gif") scroll no-repeat 0 0;
     display: inline-block;
     _background-color: transparent;
 }
@@ -225,39 +229,39 @@ a:hover .iclosewin {
     margin: 0;
     padding: 0;
     border: 0 none;
-    font: normal 12px Tahoma;
+    font-weight: normal;
+    font-size: 12px;
+    font-family: Tahoma, sans-serif;
 }
 .user-name-control-prefix {
     padding-right: 10px;
 }
 
-/* ------------------ */
-
-/* #chat */
-#chat .bgl {
-    background: #FFF url("images/chatbgl.gif") scroll repeat-y 0 0;
+/* main chat region (#chat) */
+#chat .background-left {
+    background: #ffffff url("images/chatbgl.gif") scroll repeat-y 0 0;
 }
-#chat .bgr {
+#chat .background-right {
     background: transparent url("images/chatbgr.gif") scroll repeat-y 100% 0;
 }
-#chat .sdwbgc {
+#chat .background-shady-center {
     background: transparent url("images/sdwbgc.png") scroll repeat-x 0 100%;
 }
-#chat .sdwbgl {
+#chat .background-shady-left {
     background: transparent url("images/sdwbgl.png") scroll no-repeat 0 100%;
 }
-#chat .sdwbgr {
+#chat .background-shady-right {
     position: relative;
     padding: 0 4px 40px;
     background: transparent url("images/sdwbgr.png") scroll no-repeat 100% 100%;
-    _zoom:1; /* IE6 fix */
+    _zoom: 1; /* IE6 fix */
 }
 #status-region {
     position: absolute;
     bottom: 20px;
     left: 14px;
     font-size: 12px;
-    color: #333;
+    color: #333333;
 }
 .status {
     float: left;
@@ -266,7 +270,7 @@ a:hover .iclosewin {
 #avatar-region {
     float: right;
     height: 200px;
-    background: #EEE url("images/avatarbg.gif") scroll repeat-y 100% 0;
+    background: #eeeeee url("images/avatarbg.gif") scroll repeat-y 100% 0;
 }
 .avatar {
     width: 100px;
@@ -291,43 +295,44 @@ a:hover .iclosewin {
     min-height: 150px;
     overflow-y: auto;
     padding: 10px 10px 0;
-    font: normal 10px Tahoma;
+    font-weight: normal;
+    font-size: 10px;
+    font-family: Tahoma, sans-serif;
     line-height: 1.8em;
     color: #999;
 }
-#messages-region .minf {
+#messages-region .message-info {
     font-size: 1.1em;
-    color: #7BAA0F;
+    color: #7baa0f;
 }
-#messages-region .mhidden,
-#messages-region .mevent {
+#messages-region .message-hidden,
+#messages-region .message-event {
     font-size: 1.1em;
 }
-#messages-region .nagent {
+#messages-region .name-agent {
     font-size: 1.1em;
     font-weight: bold;
     color: #000;
 }
-#messages-region .nuser {
+#messages-region .name-user {
     font-size: 1.1em;
     font-weight: bold;
-    color: #DA251D;
+    color: #da251d;
 }
-#messages-region .magent,
-#messages-region .muser {
+#messages-region .message-agent,
+#messages-region .message-user {
     font-size: 1.1em;
     color: #000;
 }
-/* ----- */
 
-/* #message */
-#message .bgc {
-    background: #FFF url("images/message.png") scroll repeat-x 0 -95px;
+/* message area (#message) */
+#message .background-center {
+    background: #ffffff url("images/message.png") scroll repeat-x 0 -95px;
 }
-#message .bgl {
+#message .background-left {
     background: transparent url("images/message.png") scroll no-repeat 0 0;
 }
-#message .bgr {
+#message .background-right {
     height: 58px;
     padding: 14px 14px 23px;
     background: transparent url("images/message.png") scroll no-repeat 100% -190px;
@@ -338,21 +343,24 @@ a:hover .iclosewin {
     height: 100%;
     margin: 0;
     padding: 0;
-    font: normal 12px Tahoma;
+    font-weight: normal;
+    font-size: 12px;
+    font-family: Tahoma, sans-serif;
     border: 0 none;
     background: transparent;
-    resize: none; /* disable resize textarea in google chrome, safari and firefox 4 */
+    resize: none; /* disable resize textarea in Google Chrome, Safari and Firefox 4 */
 }
-/* -------- */
 
-/* #send */
-#postmessage {
+/* sending message area (#send) */
+#post-message {
 }
 #send-message, .submit-button {
     float: right;
     width: 190px;
     height: 33px;
-    font: normal 17px Arial;
+    font-weight: normal;
+    font-size: 17px;
+    font-family: Arial, sans-serif;
     line-height: 30px;
     text-align: center;
     text-decoration: none;
@@ -360,7 +368,7 @@ a:hover .iclosewin {
     background: url("images/submit.gif") no-repeat 0 0 transparent;
 }
 #send-message:hover, .submit-button:hover {
-    color: #000;
+    color: #000000;
     background: url("images/submit.gif") no-repeat -190px 0 transparent;
 }
 #predefined-wrapper {
@@ -370,64 +378,66 @@ a:hover .iclosewin {
 #predefined {
     width: 200px;
 }
-/* ----- */
 
-/* error.tpl */
-#top2 {
+/* error page (error.tpl) */
+#logo-wrapper {
     position: relative;
     padding: 5px 14px;
-    background: #FFF url("images/logobg.gif") scroll repeat-x 0 100%;
-    _zoom:1; /* IE6 fix */
+    background: #ffffff url("images/logobg.gif") scroll repeat-x 0 100%;
+    _zoom: 1; /* IE6 fix */
 }
-.wndb {
-    background: #FFF url("images/wndb.gif") scroll repeat-x 0 100%;
+.headers-inwards-wrapper-common {
+    background: #ffffff url("images/wndb.gif") scroll repeat-x 0 100%;
 }
-.wndl {
+.headers-inwards-wrapper-left {
     background: transparent url("images/chatbgl.gif") scroll repeat-y 0 0;
 }
-.wndr {
+.headers-inwards-wrapper-right {
     background: transparent url("images/chatbgr.gif") scroll repeat-y 100% 0;
 }
-.wndt {
+.headers-inwards-wrapper-top {
     background: transparent url("images/wndt.gif") scroll repeat-x 0 0;
 }
-.wndtl {
+.headers-inwards-wrapper-top-left {
     background: transparent url("images/wndtl.gif") scroll no-repeat 0 0;
 }
-.wndtr {
+.headers-inwards-wrapper-top-right {
     background: transparent url("images/wndtr.gif") scroll no-repeat 100% 0;
 }
-.wndbl {
+.headers-inwards-wrapper-bottom-left {
     background: transparent url("images/wndbl.gif") scroll no-repeat 0 100%;
 }
-.wndbr {
+.headers-inwards-wrapper-bottom-right {
     position: relative;
     padding: 14px;
     background: transparent url("images/wndbr.gif") scroll no-repeat 100% 100%;
 }
-.wndbr .buttons {
+.headers-inwards-wrapper-bottom-right .buttons {
     top: 14px;
     position: absolute;
     right: 25px;
 }
 #headers {
     padding: 0 10px;
-    background: #F1F2F2;
+    background: #f1f2f2;
 }
 #content-wrapper {
     padding: 10px 14px 50px;
     background: transparent url("images/content.gif") scroll repeat-x 0 -2px;
 }
 #content-wrapper {
-    font: normal 13px Arial;
+    font-weight: normal;
+    font-size: 13px;
+    font-family: Arial, sans-serif;
 }
-.messagetxt {
+.info-message {
     padding: 0 60px 0 0;
-    font: normal 13px Arial;
+    font-weight: normal;
+    font-size: 13px;
+    font-family: Arial, sans-serif;
 }
-/* --------- */
 
-/* redirect.tpl */
+/* redirection page (redirect.tpl) */
 .left {
     float: left;
     width: 49%;
@@ -451,9 +461,8 @@ ul li {
     list-style: none outside none;
     background: transparent url("images/list.gif") scroll no-repeat 0 5px;
 }
-/* ------------ */
 
-/* other */
+/* miscellanea */
 .form {
     margin: 0;
     padding: 0;
@@ -474,8 +483,8 @@ ul li {
 }
 #content-wrapper input,
 #content-wrapper textarea,
-.wndbr input {
-    border: 1px solid #BBC4C4;
+.headers-inwards-wrapper-bottom-right input {
+    border: 1px solid #bbc4c4;
 }
 #ajax-loader {
     display: none;
@@ -483,61 +492,60 @@ ul li {
     top: 200px;
     left: 250px;
 }
-/* ----- */
 
-/* Invitations */
+/* invitations */
 #invitation-messages-region {
     height: 150px;
     min-height: 150px;
     width: 388px;
     overflow-y: auto;
-    padding: 0px;
-    font: normal 10px Tahoma;
+    padding: 0;
+    font-weight: normal;
+    font-size: 10px;
+    font-family: Tahoma, sans-serif;
     line-height: 1.8em;
-    color: #999;
-    background-color: #FFFFFF;
+    color: #999999;
+    background-color: #ffffff;
 }
-#invitation-messages-region .minf {
+#invitation-messages-region .message-info {
     font-size: 1.1em;
-    color: #7BAA0F;
+    color: #7baa0f;
 }
-#invitation-messages-region .mhidden,
-#invitation-messages-region .mevent {
+#invitation-messages-region .message-hidden,
+#invitation-messages-region .message-event {
     font-size: 1.1em;
 }
-#invitation-messages-region .nagent {
+#invitation-messages-region .name-agent {
     font-size: 1.1em;
     font-weight: bold;
-    color: #000;
+    color: #000000;
 }
-#invitation-messages-region .nuser {
+#invitation-messages-region .name-user {
     font-size: 1.1em;
     font-weight: bold;
-    color: #DA251D;
+    color: #da251d;
 }
-#invitation-messages-region .magent,
-#invitation-messages-region .muser {
+#invitation-messages-region .message-agent,
+#invitation-messages-region .message-user {
     font-size: 1.1em;
-    color: #000;
+    color: #000000;
 }
-/* ----- */
 
-/* Confirmation */
-.messagetxt .visitor {
+/* confirmation dialogue */
+.info-message .visitor {
     color: blue;
 }
-.messagetxt .operator {
+.info-message .operator {
     color: green;
 }
-#confirmpane {
+#confirm-pane {
     width: 100%;
 }
-#confirmpane .button-wrapper {
+#confirm-pane .button-wrapper {
     width: 400px;
     margin: 140px auto 0;
 }
-#confirmpane .submit-button {
+#confirm-pane .submit-button {
     float: none;
     display: inline-block;
 }
-/* ----- */
diff --git a/src/mibew/styles/chats/default/chat_ie7.css b/src/mibew/styles/chats/default/chat_ie7.css
index 2dec3b9b..e5263558 100644
--- a/src/mibew/styles/chats/default/chat_ie7.css
+++ b/src/mibew/styles/chats/default/chat_ie7.css
@@ -14,14 +14,12 @@
  * limitations under the License.
  */
 
-/* controls */
+/* common controls */
 .control,
 .user-name-control-set,
 .user-name-control-change,
-.user-name-control-input-bg,
-#confirmpane .submit-button
-{
+.user-name-control-input-background,
+#confirm-pane .submit-button {
     display: inline;
     zoom: 1;
 }
-/* ------------------ */
\ No newline at end of file
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/_logo.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/_logo.handlebars
index fffa3a46..f3503c36 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/_logo.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/_logo.handlebars
@@ -1,5 +1,5 @@
 {{! Logo block}}
-<div id="top2">
+<div id="logo-wrapper">
     <div id="logo">
         {{#if page.company.chatLogoURL}}
             {{#if page.mibewHost}}
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/chat/controls/user_name.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/chat/controls/user_name.handlebars
index 147c8a3b..bd113fa9 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/chat/controls/user_name.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/chat/controls/user_name.handlebars
@@ -1,7 +1,7 @@
 {{#if user.canChangeName}}
     <span class="user-name-control-prefix">{{l10n "You are"}}</span>
     {{#if nameInput}}
-        <div class="user-name-control-input-bg"><input id="user-name-control-input" type="text" size="12" value="{{user.name}}" class="username" /></div>
+        <div class="user-name-control-input-background"><input id="user-name-control-input" type="text" size="12" value="{{user.name}}" class="username" /></div>
         <a href="javascript:void(0)" class="user-name-control-set tpl-image" title="{{l10n "Change name"}}"></a>
     {{else}}
         <a href="javascript:void(0)" title="{{l10n "Change name"}}">{{user.name}}</a>
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/chat/layout.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/chat/layout.handlebars
index 15578295..ded83549 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/chat/layout.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/chat/layout.handlebars
@@ -3,7 +3,7 @@
 
 {{! Chat header}}
 <div id="chat-header">
-    <div class="bgc"><div class="bgl"><div class="bgr">
+    <div class="background-center"><div class="background-left"><div class="background-right">
         {{! Chat controls region}}
         <div id="controls-region"></div>
     </div></div></div>
@@ -11,7 +11,7 @@
 
 {{! Chat region}}
 <div id="chat">
-    <div class="bgl"><div class="bgr"><div class="sdwbgc"><div class="sdwbgl"><div class="sdwbgr">
+    <div class="background-left"><div class="background-right"><div class="background-shady-center"><div class="background-shady-left"><div class="background-shady-right">
         {{#unless user.isAgent}}
         <div id="avatar-region"></div>
         {{/unless}}
@@ -26,4 +26,4 @@
 <div id="message-form-region"></div>
 
 {{! Footer links}}
-<div id="footer">{{l10n "Powered by:"}} <a id="poweredByLink" href="http://mibew.org" title="Mibew Community" target="_blank">mibew.org</a></div>
\ No newline at end of file
+<div id="footer">{{l10n "Powered by:"}} <a id="poweredby-link" href="http://mibew.org" title="Mibew Community" target="_blank">mibew.org</a></div>
\ No newline at end of file
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/chat/message.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/chat/message.handlebars
index 1f3dca36..8756d438 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/chat/message.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/chat/message.handlebars
@@ -1,3 +1,3 @@
 <span>{{formatTime created}}</span> 
-{{#if name}}<span class='n{{kindName}}'>{{name}}</span>: {{/if}}
-<span class='m{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>
\ No newline at end of file
+{{#if name}}<span class='name-{{kindName}}'>{{name}}</span>: {{/if}}
+<span class='message-{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>
\ No newline at end of file
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/chat/message_form.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/chat/message_form.handlebars
index 93e6fcc9..62daba14 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/chat/message_form.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/chat/message_form.handlebars
@@ -1,6 +1,6 @@
 <div id="message">
 {{#if user.canPost}}
-    <div class="bgc"><div class="bgl"><div class="bgr">
+    <div class="background-center"><div class="background-left"><div class="background-right">
         <textarea id="message-input" class="message" tabindex="0" rows="4" cols="10"></textarea>
     </div></div></div>
 {{/if}}
@@ -8,7 +8,7 @@
 
 <div id="send">
 {{#if user.canPost}}
-    <div id="postmessage">
+    <div id="post-message">
         <div id="predefined-wrapper">
             {{#if user.isAgent}}
                 <select id="predefined" size="1" class="answer">
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/description.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/description.handlebars
index 198797e6..a3a7169c 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/description.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/description.handlebars
@@ -1,6 +1,6 @@
 <div class="buttons">
     <a href="javascript:window.close();" title="{{l10n "Close"}}">
-        <img class="tpl-image iclosewin" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close"}}" />
+        <img class="tpl-image image-close-window" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close"}}" />
     </a>
 </div>
-<div class="messagetxt">{{l10n "Sorry. None of the support team is available at the moment. <br/>Please leave a message and someone will get back to you shortly."}}</div>
\ No newline at end of file
+<div class="info-message">{{l10n "Sorry. None of the support team is available at the moment. <br/>Please leave a message and someone will get back to you shortly."}}</div>
\ No newline at end of file
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars
index fc96f91a..967a87e1 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/form.handlebars
@@ -28,7 +28,7 @@
         </tr>
         <tr>
             <td class="text"><strong>{{l10n "Department description:"}}</strong></td>
-            <td class="text" id="groupDescription">
+            <td class="text" id="group-description">
                 {{#each groups}}{{#if this.selected}}{{this.description}}{{/if}}{{/each}}
             </td>
         </tr>
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/layout.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/layout.handlebars
index 1247ce3a..62292015 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/layout.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/layout.handlebars
@@ -3,7 +3,7 @@
 
 {{! Header block. Contains description}}
 <div id="headers">
-    <div class="wndb"><div class="wndl"><div class="wndr"><div class="wndt"><div class="wndtl"><div class="wndtr"><div class="wndbl"><div class="wndbr" id="description-region">
+    <div class="headers-inwards-wrapper-common"><div class="headers-inwards-wrapper-left"><div class="headers-inwards-wrapper-right"><div class="headers-inwards-wrapper-top"><div class="headers-inwards-wrapper-top-left"><div class="headers-inwards-wrapper-top-right"><div class="headers-inwards-wrapper-bottom-left"><div class="headers-inwards-wrapper-bottom-right" id="description-region">
     </div></div></div></div></div></div></div></div>
 </div>
 
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/sent_description.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/sent_description.handlebars
index 99da3fd9..cf6aae0b 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/leave_message/sent_description.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/leave_message/sent_description.handlebars
@@ -1,6 +1,6 @@
 <div class="buttons">
         <a href="javascript:window.close();" title="{{l10n "Close..."}}">
-            <img class="tpl-image iclosewin" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close..."}}" />
+            <img class="tpl-image image-close-window" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close..."}}" />
         </a>
 </div>
-<div class="messagetxt">{{l10n "Thank you for your message. We'll answer your query by email as soon as possible."}}</div>
\ No newline at end of file
+<div class="info-message">{{l10n "Thank you for your message. We'll answer your query by email as soon as possible."}}</div>
\ No newline at end of file
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/message.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/message.handlebars
index 8a68527b..0dbde6f6 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/message.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/message.handlebars
@@ -1,3 +1,3 @@
 <span>{{formatTime created}}</span>
-{{#if name}}<span class='n{{kindName}}'>{{name}}</span>: {{/if}}
-<span class='m{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>
\ No newline at end of file
+{{#if name}}<span class='name-{{kindName}}'>{{name}}</span>: {{/if}}
+<span class='message-{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>
\ No newline at end of file
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars
index 6c63bb59..5bf65f53 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/survey/form.handlebars
@@ -23,7 +23,7 @@
         </tr>
         <tr>
             <td><strong>{{l10n "Department description:"}}</strong></td>
-            <td id="groupDescription">{{#each groups}}{{#if this.selected}}{{this.description}}{{/if}}{{/each}}</td>
+            <td id="group-description">{{#each groups}}{{#if this.selected}}{{this.description}}{{/if}}{{/each}}</td>
         </tr>
     {{/if}}
         <tr>
diff --git a/src/mibew/styles/chats/default/templates_src/client_side/survey/layout.handlebars b/src/mibew/styles/chats/default/templates_src/client_side/survey/layout.handlebars
index 513d3b4f..fc969cce 100644
--- a/src/mibew/styles/chats/default/templates_src/client_side/survey/layout.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/client_side/survey/layout.handlebars
@@ -3,11 +3,11 @@
 
 {{! Header block. Contains description and close link}}
 <div id="headers">
-    <div class="wndb"><div class="wndl"><div class="wndr"><div class="wndt"><div class="wndtl"><div class="wndtr"><div class="wndbl"><div class="wndbr">
+    <div class="headers-inwards-wrapper-common"><div class="headers-inwards-wrapper-left"><div class="headers-inwards-wrapper-right"><div class="headers-inwards-wrapper-top"><div class="headers-inwards-wrapper-top-left"><div class="headers-inwards-wrapper-top-right"><div class="headers-inwards-wrapper-bottom-left"><div class="headers-inwards-wrapper-bottom-right">
         <div class="buttons">
-            <a href="javascript:window.close();" title="{{l10n "Close"}}"><img class="tpl-image iclosewin" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close"}}" /></a>
+            <a href="javascript:window.close();" title="{{l10n "Close"}}"><img class="tpl-image image-close-window" src="{{page.stylePath}}/images/free.gif" alt="{{l10n "Close"}}" /></a>
         </div>
-        <div class="messagetxt">{{l10n "Thank you for contacting us. Please fill out the form below and click the Start Chat button."}}</div>
+        <div class="info-message">{{l10n "Thank you for contacting us. Please fill out the form below and click the Start Chat button."}}</div>
     </div></div></div></div></div></div></div></div>
 </div>
 
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/_layout.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/_layout.handlebars
index 87f55403..8fa47508 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/_layout.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/_layout.handlebars
@@ -18,7 +18,7 @@
     <body class="{{#if startFrom}}{{startFrom}}{{/if}}{{#if rtl}} rtl{{/if}}">
         {{#block "page"}}
             {{! Logo block}}
-            <div id="top2">
+            <div id="logo-wrapper">
                 <div id="logo">
                     {{#if company.chatLogoURL}}
                         {{#if mibewHost}}
@@ -44,11 +44,11 @@
 
             {{! Header block. Contains page description and buttons}}
             <div id="headers">
-                <div class="wndb"><div class="wndl"><div class="wndr"><div class="wndt"><div class="wndtl"><div class="wndtr"><div class="wndbl"><div class="wndbr">
+                <div class="headers-inwards-wrapper-common"><div class="headers-inwards-wrapper-left"><div class="headers-inwards-wrapper-right"><div class="headers-inwards-wrapper-top"><div class="headers-inwards-wrapper-top-left"><div class="headers-inwards-wrapper-top-right"><div class="headers-inwards-wrapper-bottom-left"><div class="headers-inwards-wrapper-bottom-right">
                     <div class="buttons">
                         {{#block "buttons"}}{{/block}}
                     </div>
-                    <div class="messagetxt">
+                    <div class="info-message">
                         {{#block "message"}}&nbsp;{{/block}}
                     </div>
                 </div></div></div></div></div></div></div></div>
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/confirm.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/confirm.handlebars
index 315a37d3..83d6fd41 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/confirm.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/confirm.handlebars
@@ -4,7 +4,7 @@
     {{/override}}
 
     {{#override "content"}}
-        <div id="confirmpane">
+        <div id="confirm-pane">
             <div class="button-wrapper">
                 <a href="{{link}}" class="submit-button">{{l10n "Yes. I'm sure"}}</a> <a href="javascript:window.close();" class="submit-button">{{l10n "No. Close the window"}}</a>
             </div>
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/error.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/error.handlebars
index 85d859f5..3a18e42c 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/error.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/error.handlebars
@@ -5,7 +5,7 @@
 
     {{#override "buttons"}}
         <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
-            <img class="tpl-image iclosewin" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
         </a>
     {{/override}}
 
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/mail.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/mail.handlebars
index fe1cb49c..afa53ad6 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/mail.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/mail.handlebars
@@ -3,7 +3,7 @@
 
     {{#override "buttons"}}
         <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
-            <img class="tpl-image iclosewin" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
         </a>
     {{/override}}
 
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/mailsent.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/mailsent.handlebars
index 6c8e9e88..21842d2d 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/mailsent.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/mailsent.handlebars
@@ -3,7 +3,7 @@
 
     {{#override "buttons"}}
         <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
-            <img class="tpl-image iclosewin" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
         </a>
     {{/override}}
 
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/nochat.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/nochat.handlebars
index 0076bc58..ad8e4957 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/nochat.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/nochat.handlebars
@@ -3,7 +3,7 @@
 
     {{#override "buttons"}}
         <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
-            <img class="tpl-image iclosewin" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
         </a>
     {{/override}}
 
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/redirect.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/redirect.handlebars
index c2a5c8ce..2c370d55 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/redirect.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/redirect.handlebars
@@ -3,7 +3,7 @@
 
     {{#override "buttons"}}
         <a href="javascript:window.close();" title="{{l10n 'Back...'}}">
-            <img class="tpl-image iclosewin" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Back...'}}" />
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Back...'}}" />
         </a>
     {{/override}}
 
diff --git a/src/mibew/styles/chats/default/templates_src/server_side/redirected.handlebars b/src/mibew/styles/chats/default/templates_src/server_side/redirected.handlebars
index 301cbd77..2cb74817 100644
--- a/src/mibew/styles/chats/default/templates_src/server_side/redirected.handlebars
+++ b/src/mibew/styles/chats/default/templates_src/server_side/redirected.handlebars
@@ -3,7 +3,7 @@
 
     {{#override "buttons"}}
         <a href="javascript:window.close();" title="{{l10n 'Close...'}}">
-            <img class="tpl-image iclosewin" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
+            <img class="tpl-image image-close-window" src="{{asset "@CurrentStyle/images/free.gif"}}" alt="{{l10n 'Close...'}}" />
         </a>
     {{/override}}
 
diff --git a/src/mibew/styles/invitations/default/invite.css b/src/mibew/styles/invitations/default/invite.css
index 74a04009..70583cb8 100644
--- a/src/mibew/styles/invitations/default/invite.css
+++ b/src/mibew/styles/invitations/default/invite.css
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-#mibewinvitationpopup {
+#mibew-invitation-popup {
     margin: 0 !important;
     padding: 5px !important;
     border: 0 !important;
@@ -32,7 +32,7 @@
     background: -moz-linear-gradient(right, #dfdfdf, #fafafa) !important;
     background: -ms-linear-gradient(right, #dfdfdf, #fafafa) !important;
     background: linear-gradient(to right, #dfdfdf, #fafafa) !important;
-    color: #000 !important;
+    color: #000000 !important;
     position: fixed !important;
     bottom: 5px !important;
     right: 5px !important;
@@ -45,12 +45,12 @@
     -moz-box-shadow: 0 1px 1px 1px #ddd !important;
     -webkit-box-shadow: 0 1px 1px 1px #ddd !important;
 }
-
-#mibewinvitationpopup h1, #mibewinvitationpopup p, #mibewinvitationclose a {
+#mibew-invitation-popup h1,
+#mibew-invitation-popup p,
+#mibew-invitation-close a {
     cursor: pointer !important;
 }
-
-#mibewinvitationpopup h1 {
+#mibew-invitation-popup h1 {
     color: #909090 !important;
     font-size: 20px !important;
     font-weight: bold !important;
@@ -58,44 +58,40 @@
     overflow: hidden !important;
     margin-top: 10px !important;
     margin-bottom: 10px !important;
-    background: url('./24x24.png') 7px 1px no-repeat !important;
+    background: url("./24x24.png") 7px 1px no-repeat !important;
     text-align: left !important;
     padding-left: 40px !important;
     display: inline-block !important;
 }
-
-#mibewinvitationclose {
+#mibew-invitation-close {
     float: right !important;
-    background: url('./close.gif') center no-repeat !important;
+    background: url("./close.gif") center no-repeat !important;
     padding: 1px !important;
     margin: 0 !important;
 }
-
-#mibewinvitationclose a {
+#mibew-invitation-close a {
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
     font-size: 12px !important;
     font-weight: normal !important;
     color: white !important;
     margin: 0 4px 0 4px !important;
 }
-
-#mibewinvitationclose a, #mibewinvitationclose a:link, #mibewinvitationclose a:hover {
+#mibew-invitation-close a,
+#mibew-invitation-close a:link,
+#mibew-invitation-close a:hover {
     text-decoration: none !important;
 }
-
-#mibewinvitationpopup p {
+#mibew-invitation-popup p {
     padding: 2px !important;
     margin: 2px !important;
 }
-
-#mibewinvitationavatar {
+#mibew-invitation-avatar {
     margin: 2px 10px 5px 2px !important;
     cursor: pointer !important;
     float: right !important;
     max-width: 100px !important;
 }
-
-#mibewinvitationframe {
+#mibew-invitation-frame {
     width: 388px !important;
     height: 150px !important;
     overflow: hidden !important;
@@ -107,8 +103,7 @@
     -moz-border-radius: 5px !important;
     margin-bottom: 5px !important;
 }
-
-#mibewinvitationaccept {
+#mibew-invitation-accept {
     color: #495151 !important;
     font-size: 17px !important;
     font-weight: normal !important;
@@ -131,8 +126,7 @@
     float: right !important;
     padding: 5px 65px !important;
 }
-
-#mibewinvitationaccept:hover {
+#mibew-invitation-accept:hover {
     color: black !important;
     background: #c6e5f6 !important;
     background: -webkit-linear-gradient(#e9f6fc, #c6e5f6) !important;
diff --git a/src/mibew/styles/pages/default/css/default.css b/src/mibew/styles/pages/default/css/default.css
index 57dacdbf..a05edb57 100644
--- a/src/mibew/styles/pages/default/css/default.css
+++ b/src/mibew/styles/pages/default/css/default.css
@@ -2,7 +2,8 @@
  * This file is a part of Mibew Messenger.
  *
  * Copyright 2005-2013 Evgeny Gryaznov
- * Copyright 2013-2014 Simushev Dmitriy
+ * Copyright 2013 Simushev Dmitriy
+ * Copyright 2014 Simushev Dmitriy, Fedor A. Fetisov
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,453 +18,414 @@
  * limitations under the License.
  */
 
-/* reset all */
-
-html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
-table { border-collapse:collapse; border-spacing:0; }
-fieldset,img { border:0; }
-ol,ul { list-style:none; }
-h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
-q:before,q:after { content:''; }
+/* reset built-in styles */
+html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
+    margin: 0;
+    padding: 0;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+fieldset,
+img {
+    border: 0;
+}
+ol,
+ul {
+    list-style: none;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+q:before,
+q:after {
+    content: '';
+}
 
+/* basic page layout */
 body {
-	background: #FFFFFF url(../images/header.gif) repeat-x;
-	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
-	font-size: 0.8em;
-	line-height: 140%;
-	color: #333333;
+    background: #ffffff url("../images/header.gif") repeat-x;
+    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+    font-size: 0.8em;
+    line-height: 140%;
+    color: #333333;
 }
-
-/* 100% height with footer, 200 px sidebar	 */
-
-html, body {
-	height: 100%;
-}
-
+html,
 body {
-	min-width: 750px;
+    height: 100%; /* 100% height with footer, 200 px sidebar */
+}
+body {
+    min-width: 750px;
 }
-
 a {
-	color: #2f7599;
+    color: #2f7599;
 }
-
-#wrap400, #wrap700, #fixedwrap  {
-	position:relative;
-	margin: 0px auto -41px;
-	height:auto !important;
-	height:100%;
-	min-height:100%;
+#wrap400,
+#wrap700,
+#fixed-wrap  {
+    position: relative;
+    margin: 0 auto -41px;
+    height: auto !important;
+    height: 100%;
+    min-height: 100%;
 }
-
 #wrap400 {
-	width: 100%;
-	min-width:450px;
+    width: 100%;
+    min-width: 450px;
 }
-
 #wrap700 {
-	width: 100%;
-	min-width:750px;
+    width: 100%;
+    min-width: 750px;
 }
-
-#fixedwrap {
-	width: 750px;
-}	
-
-.contentdiv {
-	float:left;
-	width: 100%;
+#fixed-wrap {
+    width: 750px;
 }
-
-.contentinner {
-	margin-right: 210px;
-	padding: 10px 60px 10px 20px;
-	overflow: hidden;
+.content-div {
+    float: left;
+    width: 100%;
 }
-
-.contentnomenu {
-	padding: 10px 60px 10px 20px;
+.content-inner {
+    margin-right: 210px;
+    padding: 10px 60px 10px 20px;
+    overflow: hidden;
 }
-
-.empty_inner {
-	height:40px;
+.content-no-menu {
+    padding: 10px 60px 10px 20px;
+}
+.empty-inner {
+    height: 40px;
 }
-
 .inline-block {
-	display: inline-block;
+    display: inline-block;
 }
-
 #footer {
-	background: white url(../images/footer.gif) bottom repeat-x;
-	font-size:11px;
-	position:relative;
-
-	min-height: 40px;
-	height:40px;
-	vertical-align:middle;
-
-	width:100%;
-	text-align: center;
+    background: white url("../images/footer.gif") bottom repeat-x;
+    font-size: 11px;
+    position: relative;
+    min-height: 40px;
+    height: 40px;
+    vertical-align: middle;
+    width: 100%;
+    text-align: center;
 }
-
 #legal {
-	clear: both;
-	line-height: 30px;
-	padding-top:10px;
-	text-align: center;
-	color: #375C69;
-	margin-bottom: 0px;
+    clear: both;
+    line-height: 30px;
+    padding-top: 10px;
+    text-align: center;
+    color: #375c69;
+    margin-bottom: 0;
+}
+#footer .footer-link {
+    color: #2f7599;
+    text-decoration: underline;
 }
 
-#footer .flink {
-	color: #2f7599;
-	text-decoration: underline;
-}
-
-#togglediv { 
-	float:right;
-	padding-right:10px;
-}
-
-/* Header */
-
+/* page header */
 #header {
-	width: 100%;
-	height: 32px;
-	margin: 0px -2px 10px 0px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	background: url(../images/graydot.gif) repeat-x left bottom;
-	display: block;
+    width: 100%;
+    height: 32px;
+    margin: 0 -2px 10px 0;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background: url("../images/graydot.gif") repeat-x left bottom;
+    display: block;
 }
-
 #header {
-	float: left;
+    float: left;
 }
-
 img.left {
-	float: left;
-	margin-right: 15px;
+    float: left;
+    margin-right: 15px;
 }
-
 img.logo {
-	margin-top: 2px;
+    margin-top: 2px;
 }
-
 #header h1 {
-	font-size: 2em;
-	line-height: 32px;
-	color: #494949;
-	margin-left: 40px;
+    font-size: 2em;
+    line-height: 32px;
+    color: #494949;
+    margin-left: 40px;
 }
-
 #header h1 a {
-	color: #494949;
+    color: #494949;
 }
-
 #header a {
-	text-decoration: none;
+    text-decoration: none;
 }
-
 #title {
-	float: left;
-	display: inline;
+    float: left;
+    display: inline;
 }
-
 #path {
-	float: right;
-	padding: 10px 20px 0px 0px;
-	line-height: 22px;
-	display: inline;
+    float: right;
+    padding: 10px 20px 0 0;
+    line-height: 22px;
+    display: inline;
 }
 
-/* Sidebar */
-
+/* sidebar and menu */
 #sidebar {
-	float: left;
-	width: 185px;
-	margin-left: -210px;
-	margin-top: 20px;
-	position:relative;
-	line-height: 180%
+    float: left;
+    width: 185px;
+    margin-left: -210px;
+    margin-top: 20px;
+    position: relative;
+    line-height: 180%
 }
-
 #sidebar ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
-
 #sidebar li {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 }
-
 #sidebar li ul {
 }
-
 #sidebar li li {
-	margin: 0;
+    margin: 0;
 }
-
 #sidebar h2 {
-	text-transform: lowercase;
-	margin-bottom: 10px;
-	background: url(../images/graydot.gif) repeat-x left bottom;
-	font-size: 1.3em;
-	font-weight: bold;
+    text-transform: lowercase;
+    margin-bottom: 10px;
+    background: url("../images/graydot.gif") repeat-x left bottom;
+    font-size: 1.3em;
+    font-weight: bold;
 }
-
 .locales a {
-	color: #2f7599;
-	font-size: 1em;
-	text-decoration: none;
+    color: #2f7599;
+    font-size: 1em;
+    text-decoration: none;
 }
-
 .locales .active a {
-	color: #555;
+    color: #555555;
 }
-
 .locales a:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }
-
 .submenu a {
-	padding-left: 15px;
-	color: #2f7599;
-	font-size: 1em;
-	text-decoration: none;
+    padding-left: 15px;
+    color: #2f7599;
+    font-size: 1em;
+    text-decoration: none;
+}
+.submenu a.inner {
+    padding-left: 0;
+}
+.submenu span.small {
+    font-size: 80%;
+    padding-left: 5px;
 }
-
-.submenu a.inner { padding-left: 0px; }
-.submenu span.small { font-size: 80%; padding-left: 5px; }
-
 .submenu .active a {
-	background: url(../images/li.gif) no-repeat left 1px;
-	color: #555;
+    background: url("../images/li.gif") no-repeat left 1px;
+    color: #555555;
 }
-
 .submenu .active a.inner {
-	background: none;
+    background: none;
 }
-
 .submenu a:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }
 
 /* form, tabbed form */
-
-.mform {
-	background: url(../images/loginbg.gif);
-	clear: both;
-	width: 100%;
+.form-wrapper {
+    background: url("../images/loginbg.gif");
+    clear: both;
+    width: 100%;
 }
-
 .tabs {
-	float: right;
-	display: inline;
-	margin-right: 15px;
+    float: right;
+    display: inline;
+    margin-right: 15px;
 }
-
 .tabs li {
-	display: inline;
+    display: inline;
 }
-
 .tabs a {
-	display: block;
-	float: left;
-	padding: 2px 9px 3px 9px;
-	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
-	font-size: 11px;
-	color: #2f7599;
+    display: block;
+    float: left;
+    padding: 2px 9px 3px 9px;
+    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+    color: #2f7599;
 }
-
 .tabs li.active a {
-	background: url(../images/loginbg.gif);
-	border-left:1px solid #bbbbbb;border-top:1px solid #bbbbbb;border-right:1px solid #bbbbbb;
-	color: #000;
-	text-decoration: none;
+    background: url("../images/loginbg.gif");
+    border-left: 1px solid #bbbbbb;
+    border-top: 1px solid #bbbbbb;
+    border-right: 1px solid #bbbbbb;
+    color: #000000;
+    text-decoration: none;
+}
+.form-header,
+.form-footer,
+.form-header-inwards,
+.form-footer-inwards {
+    height: 15px;
+}
+.form-header {
+    background: url("../images/logincrnrt.gif") no-repeat top right;
+}
+.form-header-inwards {
+    background: url("../images/logincrnlt.gif") no-repeat top left;
+}
+.form-footer {
+    background: url("../images/logincrnrb.gif") no-repeat bottom right;
+}
+.form-footer-inwards {
+    background: url("../images/logincrnlb.gif") no-repeat bottom left;
+}
+.form-inwards {
+    margin: 0 15px;
+}
+.form-inwards p {
+    margin-bottom: 1em;
 }
 
-.formtop, .formbottom, .formtopi, .formbottomi { height: 15px;}
-.formtop { background: url(../images/logincrnrt.gif) no-repeat top right;}
-.formtopi { background: url(../images/logincrnlt.gif) no-repeat top left; }
-.formbottom { background: url(../images/logincrnrb.gif) no-repeat bottom right; }
-.formbottomi { background: url(../images/logincrnlb.gif) no-repeat bottom left; }
-.forminner { margin: 0px 15px;}
-.forminner p { margin-bottom: 1em; }
-
-/* fieldForm */
-
-.fieldForm {
-	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
-	font-size: 11px;
-	width: 100%;
+/* fields of form */
+.form-fields {
+    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+    width: 100%;
 }
-
-.packedFormField {
-	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
-	font-size: 11px;
-	float:left;
-	margin-right:25px;
-	margin-bottom:8px;
+.packed-form-fields {
+    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+    float: left;
+    margin-right: 25px;
+    margin-bottom: 8px;
+}
+div.error-info {
+    color: #c13030;
 }
-
-div.errinfo {
-	color: #c13030;
-}	
-
 .field {
-	width: 100%;
-	margin-top: 5px;
+    width: 100%;
+    margin-top: 5px;
 }
-
-.fheader {
-	margin: 8px auto 8px;
+.fields-header {
+    margin: 8px auto 8px;
 }
-
-.flabel {
-	display: block;
-	position: relative;
-	margin: 8px auto 2px;
-	color: black;
+.field-label {
+    display: block;
+    position: relative;
+    margin: 8px auto 2px;
+    color: black;
+}
+.field-label-left {
+    float: left;
+    width: 11em;
 }
-
-.fleftlabel {
-	float: left;
-	width: 11em;
-} 
-
 .asterisk span.required,
-.flabel span.required {
-	font-size:8.0pt;
-	color:red;
-	font-weight: bold;
+.field-label span.required {
+    font-size: 8.0pt;
+    color: red;
+    font-weight: bold;
 }
-
 .field .subfield {
-	padding-left: 30px;
-	background: url(../images/subitem.gif) no-repeat 10px 2px;
+    padding-left: 30px;
+    background: url("../images/subitem.gif") no-repeat 10px 2px;
 }
-
-.forminner .level0{
+.form-inwards .level0 {
 }
-
-.forminner .level1{
-	padding-left: 20px;
+.form-inwards .level1 {
+    padding-left: 20px;
 }
-
-.fieldinrow {
-	min-width: 300px;
-	display: inline;
-	float:left;
-	width: 45%;
+.field-in-row {
+    min-width: 300px;
+    display: inline;
+    float: left;
+    width: 45%;
 }
-
-.fvalue {
-	float: left;
+.field-value {
+    float: left;
 }
-
-.fvaluewithta {
-	float: left;
-	width: 67%;
+.field-textarea-value {
+    float: left;
+    width: 67%;
 }
-
-.fvaluewithta textarea {
-	width: 100%;
+.field-textarea-value textarea {
+    width: 100%;
 }
-
-.fvaluenodesc {
+.field-value-no-description {
 }
-
-.fvalueframe {
-	overflow: auto;
-	width: 100%;
+.field-iframe-value {
+    overflow: auto;
+    width: 100%;
 }
-
-.fvalueframe iframe {
-	border: solid 1px #999;
+.field-iframe-value iframe {
+    border: solid 1px #999999;
 }
-
-.fdescr {
-	display: block;
-	float:left;
-	padding-left:10px;
-	color: #676767;
-	font-size: 10px;
-	min-width: 200px;
+.field-description {
+    display: block;
+    float: left;
+    padding-left: 10px;
+    color: #676767;
+    font-size: 10px;
+    min-width: 200px;
 }
-
-.fbutton { 
-	background: url(../images/formline.gif) repeat-x;
-	margin-top: 20px;
-	padding-top: 10px;
+.form-button {
+    background: url("../images/formline.gif") repeat-x;
+    margin-top: 20px;
+    padding-top: 10px;
 }
-
-.fbutton .links {
-	float: right;
-	margin-top: 5px;
+.form-button .links {
+    float: right;
+    margin-top: 5px;
 }
-
-.fbutton .submitbutton {
-	float: left;
+.form-button .submit-button {
+    float: left;
 }
-
-.formauth {
+.field-input {
 }
-
 textarea.wide {
-	border:1px solid #878787;
-	overflow:auto;
-	width: 95%;
+    border: 1px solid #878787;
+    overflow: auto;
+    width: 95%;
 }
-
 input.wide {
-	border: 1px solid #878787;
-	color: #333;
-	line-height: normal;
-	width: 95%;
+    border: 1px solid #878787;
+    color: #333333;
+    line-height: normal;
+    width: 95%;
 }
-
-input.formauth {
-	border: 1px solid #878787;
-	color: #333;
-	margin-right:15px;
-	padding-right: 0px;	
+input.field-input {
+    border: 1px solid #878787;
+    color: #333333;
+    margin-right: 15px;
+    padding-right: 0;
 }
-
-#formmessage {
-	border: 1px solid #4C96D4;
-	background-color: #E7F1F9;
-	padding: 8px 11px;
-	font-size: 0.85em;
-	font-weight:bold;
-	max-width: 700px;
-	margin: -10px 2px 10px;
-	color: #515151;
+#form-message {
+    border: 1px solid #4c96d4;
+    background-color: #e7f1f9;
+    padding: 8px 11px;
+    font-size: 0.85em;
+    font-weight: bold;
+    max-width: 700px;
+    margin: -10px 2px 10px;
+    color: #515151;
 }
-
-#offwarn {
-	border: 1px solid #4CD496;
-	background-color: #E7F9F1;
-	color: #515151;
-	padding: 8px 11px;
-	font-size: 0.85em;
-	font-weight:bold;
-	line-height: 140%;
-	margin: 0px;
+#offline-warning {
+    border: 1px solid #4cd496;
+    background-color: #e7f9f1;
+    color: #515151;
+    padding: 8px 11px;
+    font-size: 0.85em;
+    font-weight: bold;
+    line-height: 140%;
+    margin: 0;
 }
-
-#offwarn img {
-	margin-top: .4em;
-	float: left;
-	padding-right: 10px;
+#offline-warning img {
+    margin-top: .4em;
+    float: left;
+    padding-right: 10px;
 }
-
 .asterisk {
-	padding: 10px 20px;
+    padding: 10px 20px;
 }
-
-input.submit-bg-button {
+input.submit-button-background {
     border: none;
     border-radius: 0;
     height: 35px;
@@ -474,597 +436,527 @@ input.submit-bg-button {
     outline: none;
     cursor: pointer;
 }
-
-.lrtl input.submit-bg-button {
-    padding: 8px 25px 9px 0;
-}
-
 input.login-button {
     background: url("../images/buttons/login.png") top left no-repeat;
 }
-
-.lrtl input.login-button {
-    background: url("../images/buttons/login_rtl.png") top left no-repeat;
-}
-
 input.save-button {
     background: url("../images/buttons/save.png") top left no-repeat;
 }
-
-.lrtl input.save-button {
-    background: url("../images/buttons/save_rtl.png") top left no-repeat;
-}
-
 input.search-button {
     background: url("../images/buttons/search.png") top left no-repeat;
 }
 
-.lrtl input.search-button {
-    background: url("../images/buttons/search_rtl.png") top left no-repeat;
-}
-
 /* tables */
-
-.tabletool {
-	float: right;
+.table-toolbar {
+    float: right;
 }
-
-.tabletool a {
-	color: #296685;
-	vertical-align: top;
-	padding-left: 4px;
+.table-toolbar a {
+    color: #296685;
+    vertical-align: top;
+    padding-left: 4px;
 }
-
-.tabletitle {
-	background: url(../images/graydot.gif) repeat-x left bottom;
-	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
-	font-size: 1.4em;
-	margin: 10px 0px 20px;
-	padding-bottom: 10px;
-	color: #1D485E;
-	font-weight: bold;
+.table-title {
+    background: url("../images/graydot.gif") repeat-x left bottom;
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    font-size: 1.4em;
+    margin: 10px 0 20px;
+    padding-bottom: 10px;
+    color: #1d485e;
+    font-weight: bold;
 }
-
-table.list, table.translate, table.statistics {
-	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
-	background: #fff;
-	width: 100%;
-	border-collapse: collapse;
-	text-align: left;
+table.list,
+table.translate,
+table.statistics {
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    background: #ffffff;
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
 }
-
-table.list th, table.translate th, table.statistics th {
-	font-size: 1em;
-	font-weight: normal;
-	padding: 10px 6px;
-	border-bottom: 2px solid #2F7598;
+table.list th,
+table.translate th,
+table.statistics th {
+    font-size: 1em;
+    font-weight: normal;
+    padding: 10px 6px;
+    border-bottom: 2px solid #2f7598;
 }
-
-table.list th, table.translate th { color: #1D485E; }
-table.statistics th { color: #2F7598; }
-
-table.list td, table.statistics td {
-	color: #2f7599;
-	padding: 10px 8px;
-	border-bottom: 1px solid #ccc;
+table.list th,
+table.translate th {
+    color: #1d485e;
+}
+table.statistics th {
+    color: #2f7598;
+}
+table.list td,
+table.statistics td {
+    color: #2f7599;
+    padding: 10px 8px;
+    border-bottom: 1px solid #cccccc;
 }
-
 table.translate td {
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
-	color: #515151;
-	padding: 2px 8px;
-	border-bottom: 1px solid #ccc;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    color: #515151;
+    padding: 2px 8px;
+    border-bottom: 1px solid #cccccc;
 }
-
 table.list td a.man {
-	background: url(../images/tbliclogin.gif) no-repeat left center;
-	padding-left: 15px;
+    background: url("../images/tbliclogin.gif") no-repeat left center;
+    padding-left: 15px;
 }
-
-table.list tbody tr:hover td, table.list tbody tr:hover td a, table.statistics tbody tr:hover td {
-	color: #1D485E;
+table.list tbody tr:hover td,
+table.list tbody tr:hover td a,
+table.statistics tbody tr:hover td {
+    color: #1d485e;
 }
-
-table.list td.level0{
+table.list td.level0 {
 }
-
-table.list td.level1{
-	padding-left: 20px;
+table.list td.level1 {
+    padding-left: 20px;
 }
-
 table.list .disabled-link {
     cursor: pointer;
     text-decoration: none;
 }
 
-/* awaiting */
-
+/* list of awaiting visitors */
 table.awaiting {
-	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
-	background: #fff;
-	width: 100%;
-	border-collapse: collapse;
-	text-align: left;
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+    background: #ffffff;
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
 }
-
 table.awaiting th {
-	font-size: 1.2em;
-	font-weight: normal;
-	color: #1D485E;
-	padding: 10px 8px;
-	border-bottom: 2px solid #2F7598;
-	text-align: center;
+    font-size: 1.2em;
+    font-weight: normal;
+    color: #1d485e;
+    padding: 10px 8px;
+    border-bottom: 2px solid #2f7598;
+    text-align: center;
 }
-
 table.awaiting th.first {
-	text-align: left;
+    text-align: left;
 }
-
 table.awaiting table.inner {
-	border: none;
-	width: 100%;	
+    border: none;
+    width: 100%;
 }
-
 table.awaiting table.inner .icon {
-	width: 30px;
-	text-align: center;
+    width: 30px;
+    text-align: center;
 }
-
 table.awaiting td.visitor {
-	color: #296685;
-	border-bottom: 1px solid #ccc;
-	padding: 10px 8px;
-	margin: 0px;
-        text-align: center;
+    color: #296685;
+    border-bottom: 1px solid #cccccc;
+    padding: 10px 8px;
+    margin: 0;
+    text-align: center;
 }
-table.awaiting .no-threads, table.awaiting .no-visitors  {
+table.awaiting .no-threads,
+table.awaiting .no-visitors  {
     height: 30px;
 }
-.awaiting .visitor a { color: #296685; }
-.awaiting tr:hover .visitor, .awaiting tr:hover .visitor a { color: #1D485E; }
-
-.awaiting tr.ban .visitor, .awaiting tr.ban .visitor a { color: #9AC8E0; } 
-.awaiting tr.ban:hover .visitor, .awaiting tr.ban:hover .visitor a { color: #4C9CC8; } 
-
-.awaiting tr.inwait .visitor, .awaiting tr.inwait a { font-weight: bold; } 
-.awaiting tr.inprio .visitor, .awaiting tr.inprio a { font-weight: bold; font-size: 1.05em; } 
-.awaiting tr.inchat .visitor, .awaiting tr.inchat .visitor a { color: #777; }
-.awaiting tr.inchat:hover .visitor, .awaiting tr.inchat:hover .visitor a { color: #444; } 
-.awaiting tr.inchat a { text-decoration: none; }
-
+.awaiting .visitor a {
+    color: #296685;
+}
+.awaiting tr:hover .visitor,
+.awaiting tr:hover .visitor a {
+    color: #1d485e;
+}
+.awaiting tr.banned .visitor,
+.awaiting tr.banned .visitor a {
+    color: #9ac8e0;
+}
+.awaiting tr.banned:hover .visitor,
+.awaiting tr.banned:hover .visitor a {
+    color: #4c9cc8;
+}
+.awaiting tr.in-waiting .visitor,
+.awaiting tr.in-waiting a {
+    font-weight: bold;
+}
+.awaiting tr.in-priority-queue .visitor,
+.awaiting tr.in-priority-queue a {
+    font-weight: bold;
+    font-size: 1.05em;
+}
+.awaiting tr.in-chat .visitor,
+.awaiting tr.in-chat .visitor a {
+    color: #777777;
+}
+.awaiting tr.in-chat:hover .visitor,
+.awaiting tr.in-chat:hover .visitor a {
+    color: #444444;
+}
+.awaiting tr.in-chat a {
+    text-decoration: none;
+}
 .first-message {
-	text-align: right;
-	font-size: 0.8em;
-	padding-right: 10px;
+    text-align: right;
+    font-size: 0.8em;
+    padding-right: 10px;
 }
-
 .first-message a {
-	text-decoration: none;
+    text-decoration: none;
 }
-
 .first-message a:hover {
-	text-decoration: underline;
+    text-decoration: underline;
 }
-
 #status-panel-region {
     margin: 10px;
 }
-
-#connstatus {
-	float:right;
+#connection-status {
+    float: right;
 }
-
-#connlinks a {
-	color: #777;
-	text-decoration: none;
+#connection-controls a {
+    color: #777777;
+    text-decoration: none;
 }
-
-#connlinks a:hover {
-	text-decoration: underline;
+#connection-controls a:hover {
+    text-decoration: underline;
 }
-
 .default-thread-controls {
-	width: 100px;
+    width: 100px;
 }
-
 .default-visitor-controls {
-	width: 20px;
+    width: 20px;
 }
-
 .default-thread-controls .control,
 .default-visitor-controls .control {
-	height: 15px;
-	width: 15px;
-	margin: 0 2px;
-	border: none;
-	cursor: pointer;
+    height: 15px;
+    width: 15px;
+    margin: 0 2px;
+    border: none;
+    cursor: pointer;
 }
-
 .open-control {
-	background: no-repeat top left url('../images/tbliclspeak.gif');
+    background: no-repeat top left url("../images/tbliclspeak.gif");
 }
-
 .view-control {
-	background: no-repeat top left url('../images/tbliclread.gif');
+    background: no-repeat top left url("../images/tbliclread.gif");
 }
-
 .track-control {
-	background: no-repeat top left url('../images/tblictrack.gif');
+    background: no-repeat top left url("../images/tblictrack.gif");
 }
-
 .ban-control {
-	background: no-repeat top left url('../images/ban.gif');
+    background: no-repeat top left url("../images/ban.gif");
 }
-
 #sound-region {
-	display: none;
+    display: none;
 }
 
-/* online operators */
-
+/* list of available operators */
 #agents-region {
-	padding-right: 10px;
-	float: right;
+    padding-right: 10px;
+    float: right;
 }
-.agent-status-away, .agent-status-online {
-	display: inline-block;
-	height: 12px;
-	width: 12px;
-	border: none;
-	background-repeat: no-repeat;
-        margin-left: 5px;
-        margin-right: 2px;
+.agent-status-away,
+.agent-status-online {
+    display: inline-block;
+    height: 12px;
+    width: 12px;
+    border: none;
+    background-repeat: no-repeat;
+    margin-left: 5px;
+    margin-right: 2px;
 }
 .agent-status-away {
-	background-image: url("../images/opaway.gif");
+    background-image: url("../images/opaway.gif");
 }
 .agent-status-online {
-	background-image: url("../images/oponline.gif");
+    background-image: url("../images/oponline.gif");
 }
 
-/* search */
-
-#searchtext {
-	float:left;
-	display: inline;
-	margin:7px 20px 5px 0px;
-	width:60%;
-	padding-right:5px;
+/* search form */
+#search-text {
+    float: left;
+    display: inline;
+    margin: 7px 20px 5px 0;
+    width: 60%;
+    padding-right: 5px;
+}
+.search-controls {
+    float: left;
+    margin:7px 20px 5px 0;
+    padding-right:5px;
+    display: inline;
+}
+#search-text input {
+    width: 100%;
+    margin: 0;
+}
+#search-button {
+    float: left;
 }
 
-.searchctrl {
-	float: left;
-	margin:7px 20px 5px 0px;
-	padding-right:5px;
-	display: inline;	
+/* login form */
+#login-small-pane {
+    float: right;
+    padding: 10px 15px 0 0;
+    margin-right: 0;
+    line-height: 22px;
+    display: inline;
 }
-
-#searchtext input {
-	width: 100%;
-	margin: 0px;
+#login-small-pane input {
+    margin: 0 3px;
+    padding: 0 2px;
 }
-
-#searchbutton {
-	float:left;
+#login-small-pane .butt {
+    height: 1.3em;
+    border: 0;
+    background: none;
 }
-
-/* login */
-
-#loginsmallpane {
-	float: right;
-	padding: 10px 15px 0px 0px;
-	margin-right: 0px;
-	line-height: 22px;
-	display: inline;
+#login-small-pane .butt:hover {
+    background: #aaaaaa;
 }
-
-#loginsmallpane input {
-	margin: 0px 3px;
-	padding: 0px 2px;
+#login-intro {
+    width: 400px;
+    margin: 10px 30px;
 }
-
-#loginsmallpane .butt {
-	height: 1.3em;
-	border: 0px;
-	background: none;
+#login-pane {
+    width: 400px;
+    margin: 30px 30px;
 }
-
-#loginsmallpane .butt:hover {
-	background: #aaa;
+#login-pane .header h2 {
+    font-size: 2em;
+    margin-bottom: 0.9em;
+    padding-bottom: 0.8em;
+    border-bottom: 2px solid #2f7598;
 }
-
-#loginintro {
-	width: 400px;
-	margin: 10px 30px;
-}
-
-#loginpane {
-	width: 400px;
-	margin: 30px 30px;
-}
-
-#loginpane .header h2 {
-	font-size: 2em;
-	margin-bottom: 0.9em;
-	padding-bottom: 0.8em;
-	border-bottom: 2px solid #2F7598;
-}
-
-/* nice button */
-
-.nicebutton {
-	border: none;
-	float: left;
-	margin-left: 30px;
-}
-
 .submit a {
-	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
-	font-size: 11px;
-	line-height: 35px;
-	color: #000000;
-	text-decoration: none;
+    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+    line-height: 35px;
+    color: #000000;
+    text-decoration: none;
 }
-
 .submit {
-	background: url(../images/submitbg.gif) repeat-x;
-	vertical-align: top;
+    background: url("../images/submitbg.gif") repeat-x;
+    vertical-align: top;
 }
 
-/* thread log */
-
-.logpane {
-	margin: 10px 0px;
-	line-height: 150%;
+/* threads log */
+.log-pane {
+    margin: 10px 0;
+    line-height: 150%;
 }
-
-.logpane .header {
-	padding-bottom: 0.8em;
-	border-bottom: 2px solid #2F7598;
+.log-pane .header {
+    padding-bottom: 0.8em;
+    border-bottom: 2px solid #2f7598;
 }
-
-.logpane .wlabel {
-	width: 10em;
-	float: left;
-	margin-right:10px;
+.log-pane .param-label {
+    width: 10em;
+    float: left;
+    margin-right:10px;
 }
-
-.logpane .wvalue {
-	float: left;
+.log-pane .param-value {
+    float: left;
 }
 
 /* dashboard */
-
 #dashboard {
-	width: 100%;
+    width: 100%;
+}
+.dashboard-item {
+    width: 32%;
+    vertical-align: top;
+    display: inline-block;
+}
+.dashboard-item-content {
+    padding: 5px 2em 5em;
+}
+.dashboard-item:hover {
+}
+.dashboard-item a {
+    padding-top: 2px;
+    padding-bottom: 10px;
+    display: block;
+}
+.dashboard-item img,
+#dashboard-locales-popup h2 img {
+    float: left;
+    padding-right: 10px;
+}
+#dashboard-locales-popup h2 img {
+    margin-top: -3px;
+}
+#dashboard-locales-popup .locales {
+    line-height: 180%;
+    margin-left: 10px;
+}
+#dashboard-locales-popup h2 {
+    font-size: 1.5em;
+    margin-bottom: 0.9em;
+    padding: 5px 30px 0.8em 0;
+    border-bottom: 2px solid #2f7598;
+}
+#dashboard-locales-popup-close {
+    float: right;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+}
+#dashboard-locales-popup {
+    display: none;
+    position: fixed;
+    _position: absolute; /* IE6 fix */
+    background: #ffffff;
+    border: 2px solid #2f7598;
+    z-index: 110;
+    padding: 1em 1em;
+    font-size: 1em;
+}
+#background-popup {
+    display: none;
+    position: fixed;
+    _position: absolute; /* IE6 fix */
+    height: 100%;
+    opacity: .5;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: #000000;
+    border: 1px solid #cecece;
+    z-index: 101;
 }
 
-.dashitem {
-	width:32%;
-	vertical-align: top;
-	display: inline-block;
-}
-
-.dashitem-content {
-	padding: 5px 2em 5em;
-}
-
-.dashitem:hover {
-}
-
-.dashitem a {
-	padding-top:2px;
-	padding-bottom: 10px;
-	display: block;	
-}
-
-.dashitem img, #dashlocalesPopup h2 img {
-	float: left;
-	padding-right:10px;
-}
-
-#dashlocalesPopup h2 img {
-	margin-top: -3px;
-}
-
-#dashlocalesPopup .locales {
-	line-height: 180%;
-	margin-left:10px;
-}
-
-#dashlocalesPopup h2 {
-	font-size: 1.5em;
-	margin-bottom: 0.9em;
-	padding: 5px 30px 0.8em 0px;
-	border-bottom: 2px solid #2F7598;
-}
-
-#dashlocalesPopupClose {
-	float: right;
-	position:absolute;
-	right:5px;
-	top:5px;
-}
-
-#dashlocalesPopup {
-	display:none;  
-	position:fixed;  
-	_position:absolute; /* ie6*/  
-	background:#FFFFFF;  
-	border:2px solid #2F7598;  
-	z-index:110;  
-	padding:1em 1em;  
-	font-size:1em;
-}
-
-#backgroundPopup{  
-	display:none;  
-	position:fixed;  
-	_position:absolute; /* ie6*/  
-	height:100%;
-	opacity: .5;
-	width:100%;  
-	top:0;  
-	left:0;  
-	background:#000000;  
-	border:1px solid #cecece;  
-	z-index:101;  
-}  
-
-/* install/update */
-
+/* install and update wizards */
 #install li {
-	list-style-type: circle;
-	list-style-position: inside;
-	margin-left: 2em;
+    list-style-type: circle;
+    list-style-position: inside;
+    margin-left: 2em;
 }
-
 #install .password-form {
-	margin-left: 2em;
+    margin-left: 2em;
 }
-
-#check-nv, #check-nm {
-	color: #2f7599;
-	text-decoration: none;
+#check-new-visitor,
+#check-new-message {
+    color: #2f7599;
+    text-decoration: none;
 }
-
-#check-nv:hover, #check-nm:hover {
-	text-decoration: underline;
+#check-new-visitor:hover,
+#check-new-message:hover {
+    text-decoration: underline;
 }
-
 #install .warning {
     color: #c13030;
     font-weight: bold;
 }
-
 #install .error {
     color: #c13030;
 }
 
 /* chat */
-
 .message {
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 12px;
-	color: #4F4F4F;
-	padding: 15px 0px 0px 0px;
-	line-height: 17px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    color: #4f4f4f;
+    padding: 15px 0 0 0;
+    line-height: 17px;
 }
-
 .message span.time {
-	color: #000000;
+    color: #000000;
+}
+.message span.name-user {
+    color: #b11e23;
+    font-weight: bold;
+}
+.message span.name-agent {
+    font-weight: bold;
+}
+.message span.message-info {
+    color: #1e4bb1;
+    font-size: 11px;
+}
+.message span.message-event {
+    color: #a1a1a1;
+    font-size: 11px;
+}
+.message span.message-hidden {
+    color: #a1a1a1;
+    font-size: 11px;
+}
+.message span.message-connection {
+    color: #a1a1a1;
+    font-size: 11px;
 }
 
-.message span.nuser {
-	color: #B11E23;
-	font-weight: bold;
-}
-
-.message span.nagent {
-	font-weight: bold;
-}
-
-.message span.minf {
-	color: #1E48B1;
-	font-size: 11px;
-}
-
-.message span.mevent {
-	color: #A1A1A1;
-	font-size: 11px;
-}
-
-.message span.mhidden {
-	color: #A1A1A1;
-	font-size: 11px;
-}
-
-.message span.mconn {
-	color: #A1A1A1;
-	font-size: 11px;
-}
-
-/* themes */
+/* themes page */
 .screenshot {
-	border: solid 1px #BBBBBB;
+    border: solid 1px #bbbbbb;
 }
 
-/* updates */
-
+/* updates page */
 #news {
-	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
-	font-size: 11px;
-	margin-bottom:15px;
-	padding:4px;
+    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+    font-size: 11px;
+    margin-bottom: 15px;
+    padding: 4px;
 }
-
 .news-text {
-	margin-bottom:1em;
+    margin-bottom: 1em;
 }
 
-/* Pagination */
-
-.pagination .nextpage,
-.pagination .prevpage {
+/* pagination controls */
+.pagination .next-page,
+.pagination .prev-page {
     height: 13px;
     width: 13px;
     display: inline-block;
     background-repeat: no-repeat;
     background-position: top left;
 }
-
-.pagination .nextpage {
-    background-image: url('../images/nextpage.gif');
+.pagination .next-page {
+    background-image: url("../images/nextpage.gif");
+}
+.pagination .prev-page {
+    background-image: url("../images/prevpage.gif");
 }
 
-.pagination .prevpage {
-    background-image: url('../images/prevpage.gif');
+/* rules for right-to-left languages */
+.rtl .dashboard-item img,
+.rtl #dashboard-locales-popup h2 img,
+.rtl #offline-warning img {
+    float: right;
+    padding-right: 0;
+    padding-left: 10px;
 }
-
-/* rtl rules */
-
-.lrtl .dashitem img, .lrtl #dashlocalesPopup h2 img, .lrtl #offwarn img {
-	float: right;
-	padding-right:0px;
-	padding-left:10px;
+.rtl .field-label-left {
+    float: right;
+    width: 11em;
 }
-
-.lrtl .fleftlabel {
-	float: right;
-	width: 11em;
+.rtl .field-description {
+    float: right;
+    padding-right: 10px;
 }
-
-.lrtl .fdescr {
-	float:right;
-	padding-right:10px;
+.rtl .field .subfield {
+    padding-right: 30px;
+    background: url("../images/subitem_rtl.gif") no-repeat 99% 2px;
 }
-
-
-.lrtl .field .subfield {
-	padding-right: 30px;
-	background: url(../images/subitem_rtl.gif) no-repeat 99% 2px;
+.rtl .field-value {
+    float: right;
 }
-
-
-.lrtl .fvalue {
-	float: right;
+.rtl .log-pane .param-label {
+    float: right;
+    margin-left: 10px;
 }
-
-.lrtl .logpane .wlabel {
-	float: right;
-	margin-left:10px;
+.rtl .log-pane .param-value {
+    float: right;
 }
-
-.lrtl .logpane .wvalue {
-	float: right;
+.rtl .field-textarea-value {
+    float: right;
 }
-
-.lrtl .fvaluewithta {
-	float: right;
+.rtl input.submit-button-background {
+    padding: 8px 25px 9px 0;
 }
-
-.lrtl #togglediv { 
-	float:left;
-	padding-left:10px;
+.rtl input.login-button {
+    background: url("../images/buttons/login_rtl.png") top left no-repeat;
+}
+.rtl input.save-button {
+    background: url("../images/buttons/save_rtl.png") top left no-repeat;
+}
+.rtl input.search-button {
+    background: url("../images/buttons/search_rtl.png") top left no-repeat;
 }
diff --git a/src/mibew/styles/pages/default/css/default_ie.css b/src/mibew/styles/pages/default/css/default_ie.css
index d58dcfc6..96639b6e 100644
--- a/src/mibew/styles/pages/default/css/default_ie.css
+++ b/src/mibew/styles/pages/default/css/default_ie.css
@@ -17,9 +17,9 @@
  */
 
 .inline-block,
-.dashitem,
-.pagination .prevpage,
-.pagination .nextpage {
+.dashboard-item,
+.pagination .prev-page,
+.pagination .next-page {
     display: inline;
     zoom: 1;
 }
diff --git a/src/mibew/styles/pages/default/js/locale.js b/src/mibew/styles/pages/default/js/locale.js
index c1305f4a..2e95a1a1 100644
--- a/src/mibew/styles/pages/default/js/locale.js
+++ b/src/mibew/styles/pages/default/js/locale.js
@@ -20,18 +20,18 @@ var popupStatus = 0;
 
 function loadPopup(){
 	if(popupStatus==0){
-		$("#backgroundPopup").css({
+		$("#background-popup").css({
 			"opacity": "0.7"
 		});
-		$("#backgroundPopup").fadeIn("slow");
-		$("#dashlocalesPopup").fadeIn("slow");
+		$("#background-popup").fadeIn("slow");
+		$("#dashboard-locales-popup").fadeIn("slow");
 		popupStatus = 1;
 	}
 }
 function disablePopup(){
 	if(popupStatus==1){
-		$("#backgroundPopup").fadeOut("slow");
-		$("#dashlocalesPopup").fadeOut("slow");
+		$("#background-popup").fadeOut("slow");
+		$("#dashboard-locales-popup").fadeOut("slow");
 		popupStatus = 0;
 	}
 }
@@ -46,29 +46,29 @@ function normpos(a) {
 function centerPopup(){
 	var windowWidth = document.documentElement.clientWidth;
 	var windowHeight = document.documentElement.clientHeight;
-	var popupHeight = $("#dashlocalesPopup").height();
-	var popupWidth = $("#dashlocalesPopup").width();
-	$("#dashlocalesPopup").css({
+	var popupHeight = $("#dashboard-locales-popup").height();
+	var popupWidth = $("#dashboard-locales-popup").width();
+	$("#dashboard-locales-popup").css({
 		"position": "absolute",
 		"top": normpos((windowHeight-popupHeight) * 0.2),
 		"left": normpos(windowWidth/2-popupWidth/2)
 	});
-	$("#backgroundPopup").css({
+	$("#background-popup").css({
 		"height": windowHeight
 	});
 }
 
 $(function(){
-	$("#changelang").click(function(){
+	$("#change-language").click(function(){
 		centerPopup();
 		loadPopup();
 		return false;
 	});
-	$("#dashlocalesPopupClose").click(function(){
+	$("#dashboard-locales-popup-close").click(function(){
 		disablePopup();
 		return false;
 	});
-	$("#backgroundPopup").click(function(){
+	$("#background-popup").click(function(){
 		disablePopup();
 	});
 	$(document).keypress(function(e){
diff --git a/src/mibew/styles/pages/default/templates_src/client_side/message.handlebars b/src/mibew/styles/pages/default/templates_src/client_side/message.handlebars
index 8a68527b..0dbde6f6 100644
--- a/src/mibew/styles/pages/default/templates_src/client_side/message.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/client_side/message.handlebars
@@ -1,3 +1,3 @@
 <span>{{formatTime created}}</span>
-{{#if name}}<span class='n{{kindName}}'>{{name}}</span>: {{/if}}
-<span class='m{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>
\ No newline at end of file
+{{#if name}}<span class='name-{{kindName}}'>{{name}}</span>: {{/if}}
+<span class='message-{{kindName}}'>{{#replace "\n" "<br/>"}}{{urlReplace message}}{{/replace}}</span><br/>
\ No newline at end of file
diff --git a/src/mibew/styles/pages/default/templates_src/client_side/users/status_panel.handlebars b/src/mibew/styles/pages/default/templates_src/client_side/users/status_panel.handlebars
index 9cd388dd..d385e89e 100644
--- a/src/mibew/styles/pages/default/templates_src/client_side/users/status_panel.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/client_side/users/status_panel.handlebars
@@ -1 +1 @@
-<div id="connstatus">{{message}}{{#if agent.away}}{{l10n "Away"}}{{else}}{{l10n "Up to date"}}{{/if}}</div><div id="connlinks"><a href="javascript:void(0);" id="change-status">{{#if agent.away}}{{l10n "Set status as \"Available\""}}{{else}}{{l10n "Set status as \"Away\""}}{{/if}}</a></div>
\ No newline at end of file
+<div id="connection-status">{{message}}{{#if agent.away}}{{l10n "Away"}}{{else}}{{l10n "Up to date"}}{{/if}}</div><div id="connection-controls"><a href="javascript:void(0);" id="change-status">{{#if agent.away}}{{l10n "Set status as \"Available\""}}{{else}}{{l10n "Set status as \"Away\""}}{{/if}}</a></div>
\ No newline at end of file
diff --git a/src/mibew/styles/pages/default/templates_src/client_side/users/visitors_collection.handlebars b/src/mibew/styles/pages/default/templates_src/client_side/users/visitors_collection.handlebars
index 13fadf44..22d9f6d7 100644
--- a/src/mibew/styles/pages/default/templates_src/client_side/users/visitors_collection.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/client_side/users/visitors_collection.handlebars
@@ -1,4 +1,4 @@
-<table id="visitorslist" class="awaiting" border="0">
+<table id="visitors-list" class="awaiting" border="0">
 <thead>
 <tr>
     <th class="first">{{l10n "Name"}}</th>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/_errors.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/_errors.handlebars
index 96715f59..8a2bcf55 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/_errors.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/_errors.handlebars
@@ -1,5 +1,5 @@
 {{#if errors}}
-    <div class="errinfo">
+    <div class="error-info">
         <img src="{{asset "@CurrentStyle/images/icon_err.gif"}}" width="40" height="40" border="0" alt="" class="left"/>
         <b>{{l10n "Correct the mistakes:"}}</b><br/>
         <ul>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/_layout.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/_layout.handlebars
index b7b3c6c0..fb8a9770 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/_layout.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/_layout.handlebars
@@ -21,7 +21,7 @@
 </head>
 
 <body{{#unlessOverridden "menu"}} style="min-width: 400px;"{{/unlessOverridden}}>
-    <div id="{{#if fixedwrap}}fixedwrap{{else}}{{#ifOverridden "menu"}}wrap700{{else}}wrap400{{/ifOverridden}}{{/if}}" class="l{{#if rtl}}rtl{{else}}ltr{{/if}}">
+    <div id="{{#if fixedwrap}}fixed-wrap{{else}}{{#ifOverridden "menu"}}wrap700{{else}}wrap400{{/ifOverridden}}{{/if}}" class="{{#if rtl}}rtl{{else}}ltr{{/if}}">
         <div id="header">
             <div id="title">
                 <h1><img src="{{asset "@CurrentStyle/images/logo.png"}}" alt="" width="32" height="32" class="left logo" />
@@ -32,11 +32,11 @@
                 <div id="path"><p>{{l10n "You are {0}" operator}}</p></div>
             {{else}}
                 {{#if show_small_login}}
-                    <div id="loginsmallpane">
+                    <div id="login-small-pane">
                         <form name="smallLogin" method="post" action="{{route "login"}}">
                             {{l10n "Login:"}}
-                            <input type="text" name="login" size="8" class="formauth"/>
-                            <input type="password" name="password" size="8" class="formauth" autocomplete="off"/>
+                            <input type="text" name="login" size="8" class="field-input"/>
+                            <input type="password" name="password" size="8" class="field-input" autocomplete="off"/>
                             <input type="hidden" name="isRemember" value=""/>
                             <input type="submit" value="&gt;&gt;" class="butt"/>
                         </form>
@@ -47,12 +47,12 @@
 
         <br clear="all"/>
 
-        <div class="contentdiv">
+        <div class="content-div">
 
             {{#ifOverridden "menu"}}
-            <div id="wcontent" class="contentinner">
+            <div id="content" class="content-inner">
             {{else}}
-            <div id="wcontent" class="contentnomenu">
+            <div id="content" class="content-no-menu">
             {{/ifOverridden}}
                 {{#block "content"}}{{/block}}
             </div>
@@ -62,11 +62,11 @@
 
         <div style="clear: both;">&nbsp;</div>
 
-        <div class="empty_inner" style="">&#160;</div>
+        <div class="empty-inner" style="">&#160;</div>
     </div>
 
     <div id="footer">
-        <p id="legal"><a href="http://mibew.org/" target="_blank" class="flink">Mibew Messenger</a> {{mibewVersion}} | (c) 2011-2014 mibew.org</p>
+        <p id="legal"><a href="http://mibew.org/" target="_blank" class="footer-link">Mibew Messenger</a> {{mibewVersion}} | (c) 2011-2014 mibew.org</p>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/_menu.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/_menu.handlebars
index 7510627a..203fd23e 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/_menu.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/_menu.handlebars
@@ -2,7 +2,7 @@
     <ul>
     {{#if warnOffline}}
         {{#unless isOnline}}
-            <li id="offwarn">
+            <li id="offline-warning">
                 <img src="{{asset "@CurrentStyle/images/dash/warn.gif"}}" alt="" width="24" height="24"/>
                 <p>{{{l10n "You are Offline.<br/><a href=\"{0}\">Connect...</a>" (route "users" nomenu="1")}}}</p>
             </li>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/ban.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/ban.handlebars
index 87b60808..70ef2dc4 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/ban.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/ban.handlebars
@@ -24,48 +24,48 @@
                     <input type="hidden" name="threadid" value="{{threadid}}"/>
                 {{/if}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="address" class="flabel">{{l10n "Visitor's Address"}}<span class="required">*</span></label>
-                                <div class="fvalue">
-                                    <input id="address" type="text" name="address" size="40" value="{{formaddress}}" class="formauth"/>
+                                <label for="address" class="field-label">{{l10n "Visitor's Address"}}<span class="required">*</span></label>
+                                <div class="field-value">
+                                    <input id="address" type="text" name="address" size="40" value="{{formaddress}}" class="field-input"/>
                                 </div>
-                                <label for="address" class="fdescr"> &mdash; {{l10n "Ex: 127.0.0.1 or example.com"}}</label>
+                                <label for="address" class="field-description"> &mdash; {{l10n "Ex: 127.0.0.1 or example.com"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="days" class="flabel">{{l10n "Days"}}<span class="required">*</span></label>
-                                <div class="fvalue">
-                                    <input id="days" type="text" name="days" size="4" value="{{formdays}}" class="formauth"/>
+                                <label for="days" class="field-label">{{l10n "Days"}}<span class="required">*</span></label>
+                                <div class="field-value">
+                                    <input id="days" type="text" name="days" size="4" value="{{formdays}}" class="field-input"/>
                                 </div>
-                                <label for="days" class="fdescr"> &mdash; {{l10n "Numbers of days this address is blocked"}}</label>
+                                <label for="days" class="field-description"> &mdash; {{l10n "Numbers of days this address is blocked"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="comment" class="flabel">{{l10n "Comment"}}<span class="required">*</span></label>
-                                <div class="fvalue">
-                                    <input id="comment" type="text" name="comment" size="40" value="{{formcomment}}" class="formauth"/>
+                                <label for="comment" class="field-label">{{l10n "Comment"}}<span class="required">*</span></label>
+                                <div class="field-value">
+                                    <input id="comment" type="text" name="comment" size="40" value="{{formcomment}}" class="field-input"/>
                                 </div>
-                                <label for="comment" class="fdescr"> &mdash; {{l10n "Reason for block"}}</label>
+                                <label for="comment" class="field-description"> &mdash; {{l10n "Reason for block"}}</label>
                                 <br clear="all"/>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
 
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/bans.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/bans.handlebars
index 6509855e..9b7552bc 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/bans.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/bans.handlebars
@@ -9,7 +9,7 @@
 
         {{> _errors}}
 
-        <div class="tabletool">
+        <div class="table-toolbar">
             <img src="{{asset "@CurrentStyle/images/buttons/createban.gif"}}" border="0" alt=""/>
             <a href="{{route "ban_add"}}" title="{{l10n "Add address"}}"
                 onclick="this.newWindow = window.open('{{route "ban_add"}}', '', 'toolbar=0,scrollbars=1,location=0,status=1,menubar=0,width=640,height=480,resizable=1');this.newWindow.focus();this.newWindow.opener=window;return false;">{{l10n "Add address"}}</a>
@@ -29,13 +29,13 @@
             <tbody>
                 {{#each [pagination.items]}}
                     <tr>
-                        <td class="notlast">
+                        <td class="not-last">
                             <a href="{{route "history" q=address type="visitor"}}" class="man">
                                 {{address}}
                             </a>
                         </td>
 
-                        <td class="notlast">{{formatDate till}}</td>
+                        <td class="not-last">{{formatDate till}}</td>
 
                         <td>{{cutString comment "30"}}</td>
 
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/button_code.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/button_code.handlebars
index 0ed9f583..fb58f6dc 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/button_code.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/button_code.handlebars
@@ -10,16 +10,16 @@
         {{> _errors}}
 
         <form name="buttonCodeForm" method="get" action="{{route "button_code"}}">
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
-                    <div class="fieldForm">
-                        <div class="fieldinrow">
-                            <label for="lang" class="flabel">{{l10n "Code for language"}}</label>
-                            <div class="fvaluenodesc">
+                <div class="form-inwards">
+                    <div class="form-fields">
+                        <div class="field-in-row">
+                            <label for="lang" class="field-label">{{l10n "Code for language"}}</label>
+                            <div class="field-value-no-description">
                                 <select id="lang" name="lang" onchange="this.form.submit();">
                                     {{#each availableLocales}}
                                         <option value="{{this}}"{{#ifEqual this ../formlang}} selected="selected"{{/ifEqual}}>{{this}}</option>
@@ -28,9 +28,9 @@
                             </div>
                         </div>
 
-                        <div class="fieldinrow">
-                            <label for="style" class="flabel">{{l10n "Chat window style"}}</label>
-                            <div class="fvaluenodesc">
+                        <div class="field-in-row">
+                            <label for="style" class="field-label">{{l10n "Chat window style"}}</label>
+                            <div class="field-value-no-description">
                                 <select id="style" name="style" onchange="this.form.submit();">
                                     {{#each availableChatStyles}}
                                         "<option value="{{@key}}"{{#ifEqual @key ../formstyle}} selected="selected"{{/ifEqual}}>{{this}}</option>
@@ -40,10 +40,10 @@
                         </div>
                         <br clear="all"/>
 
-                        <div class="fieldinrow">
-                            <label for="codetype" class="flabel">{{l10n "Generating code type"}}</label>
-                            <div class="fvaluenodesc">
-                                <select id="codetype" name="codetype" onchange="this.form.submit();">
+                        <div class="field-in-row">
+                            <label for="code-type" class="field-label">{{l10n "Generating code type"}}</label>
+                            <div class="field-value-no-description">
+                                <select id="code-type" name="codetype" onchange="this.form.submit();">
                                     {{#each availableCodeTypes}}
                                         <option value="{{@key}}"{{#ifEqual @key ../formcodetype}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                     {{/each}}
@@ -53,9 +53,9 @@
                         <br clear="all"/>
 
                         {{#if generateButton}}
-                            <div class="fieldinrow">
-                                <label for="i" class="flabel">{{l10n "Choose image"}}</label>
-                                <div class="fvaluenodesc">
+                            <div class="field-in-row">
+                                <label for="i" class="field-label">{{l10n "Choose image"}}</label>
+                                <div class="field-value-no-description">
                                     <select id="i" name="i" onchange="this.form.submit();">
                                         {{#each availableImages}}
                                             <option value="{{this}}"{{#ifEqual this ../formimage}} selected="selected"{{/ifEqual}}>{{this}}</option>
@@ -65,10 +65,10 @@
                             </div>
 
                             {{#if enabletracking}}
-                                <div class="fieldinrow">
-                                    <label for="invitationstyle" class="flabel">{{l10n "Invitation style"}}</label>
-                                    <div class="fvaluenodesc">
-                                        <select id="invitationstyle" name="invitationstyle" onchange="this.form.submit();">
+                                <div class="field-in-row">
+                                    <label for="invitation-style" class="field-label">{{l10n "Invitation style"}}</label>
+                                    <div class="field-value-no-description">
+                                        <select id="invitation-style" name="invitationstyle" onchange="this.form.submit();">
                                             {{#each availableInvitationStyles}}
                                                 <option value="{{@key}}"{{#ifEqual @key ../forminvitationstyle}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                             {{/each}}
@@ -80,9 +80,9 @@
                             <br clear="all"/>
                         {{/if}}
 
-                        <div class="fieldinrow">
-                            <label for="group" class="flabel">{{l10n "Code for group"}}</label>
-                            <div class="fvaluenodesc">
+                        <div class="field-in-row">
+                            <label for="group" class="field-label">{{l10n "Code for group"}}</label>
+                            <div class="field-value-no-description">
                                 <select id="group" name="group" onchange="this.form.submit();">
                                     {{#each groups}}
                                         <option value="{{groupid}}"{{#ifEqual groupid ../formgroup}} selected="selected"{{/ifEqual}}>{{#repeat level}}&nbsp;&nbsp;{{/repeat}}{{vclocalname}}</option>
@@ -92,17 +92,17 @@
                         </div>
                         <br clear="all"/>
 
-                        <div class="fieldinrow">
-                            <label for="hostname" class="flabel">{{l10n "Include host name into the code"}}</label>
-                            <div class="fvaluenodesc">
+                        <div class="field-in-row">
+                            <label for="hostname" class="field-label">{{l10n "Include host name into the code"}}</label>
+                            <div class="field-value-no-description">
                                 <input id="hostname" type="checkbox" name="hostname" value="on"{{#if formhostname}} checked="checked"{{/if}} onchange="this.form.submit();"/>
                             </div>
                         </div>
 
                         {{#if formhostname}}
-                            <div class="fieldinrow">
-                                <label for="secure" class="flabel">{{l10n "Use secure links (https)"}}</label>
-                                <div class="fvaluenodesc">
+                            <div class="field-in-row">
+                                <label for="secure" class="field-label">{{l10n "Use secure links (https)"}}</label>
+                                <div class="field-value-no-description">
                                     <input id="secure" type="checkbox" name="secure" value="on"{{#if formsecure}} checked="checked"{{/if}} onchange="this.form.submit();"/>
                                 </div>
                             </div>
@@ -111,32 +111,32 @@
                         <br clear="all"/>
 
                         <div class="field">
-                            <label for="modsecurity" class="flabel">{{l10n "Compatibility with mod_security (modsecurity.org), turn on only if you have problems with it"}}</label>
-                            <div class="fvaluenodesc">
-                                <input id="modsecurity" type="checkbox" name="modsecurity" value="on"{{#if formmodsecurity}} checked="checked"{{/if}} onchange="this.form.submit();"/>
+                            <label for="mod-security" class="field-label">{{l10n "Compatibility with mod_security (modsecurity.org), turn on only if you have problems with it"}}</label>
+                            <div class="field-value-no-description">
+                                <input id="mod-security" type="checkbox" name="modsecurity" value="on"{{#if formmodsecurity}} checked="checked"{{/if}} onchange="this.form.submit();"/>
                             </div>
                         </div>
 
                         <div class="field">
-                            <label for="buttonCode" class="flabel">{{l10n "HTML code"}}</label>
-                            <div class="fvaluewithta" dir="ltr">
-                                <textarea id="buttonCode" cols="44" rows="15">{{buttonCode}}</textarea>
+                            <label for="button-code" class="field-label">{{l10n "HTML code"}}</label>
+                            <div class="field-textarea-value" dir="ltr">
+                                <textarea id="button-code" cols="44" rows="15">{{buttonCode}}</textarea>
                             </div>
-                            <label for="buttonCode" class="fdescr">{{l10n "<strong>Caution!</strong> Please don't change<br/> the code manually because<br/> we don't guarantee that<br/> it will work!"}}</label>
+                            <label for="button-code" class="field-description">{{l10n "<strong>Caution!</strong> Please don't change<br/> the code manually because<br/> we don't guarantee that<br/> it will work!"}}</label>
                             <br clear="all"/>
                         </div>
 
                         <div class="field">
-                            <div class="flabel">{{l10n "Example"}}</div>
-                            <div class="fvaluenodesc">
+                            <div class="field-label">{{l10n "Example"}}</div>
+                            <div class="field-value-no-description">
                                 {{{buttonCode}}}
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </form>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/canned_message_edit.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/canned_message_edit.handlebars
index 210a34e5..5e248cec 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/canned_message_edit.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/canned_message_edit.handlebars
@@ -23,35 +23,35 @@
                     <input type="hidden" name="group" value="{{groupid}}"/>
                 {{/unless}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="titlefield" class="flabel">{{l10n "Title"}}</label>
-                                <div class="fvaluenodesc">
-                                    <input id="titlefield" type="text" name="title" class="wide" maxlength="100" value="{{formtitle}}"/>
+                                <label for="title-field" class="field-label">{{l10n "Title"}}</label>
+                                <div class="field-value-no-description">
+                                    <input id="title-field" type="text" name="title" class="wide" maxlength="100" value="{{formtitle}}"/>
                                 </div>
                             </div>
 
                             <div class="field">
-                                <label for="message" class="flabel">{{l10n "Message"}}</label>
-                                <div class="fvaluenodesc">
+                                <label for="message" class="field-label">{{l10n "Message"}}</label>
+                                <div class="field-value-no-description">
                                     <textarea id="message" name="message" cols="20" rows="5" class="wide">{{formmessage}}</textarea>
                                 </div>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </form>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/canned_messages.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/canned_messages.handlebars
index 5d24b26e..3d6a55a3 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/canned_messages.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/canned_messages.handlebars
@@ -10,13 +10,13 @@
         {{> _errors}}
 
         <form name="cannedForm" method="get" action="{{route "canned_messages"}}">
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
-                    <div class="packedFormField">
+                <div class="form-inwards">
+                    <div class="packed-form-fields">
                         {{l10n "For language:"}}<br/>
                         <select name="lang" onchange="this.form.submit();">
                             {{#each locales}}
@@ -25,7 +25,7 @@
                         </select>
                     </div>
 
-                    <div class="packedFormField">
+                    <div class="packed-form-fields">
                         {{l10n "For group:"}}<br/>
                         <select name="group" onchange="this.form.submit();">
                             {{#each groups}}
@@ -37,14 +37,14 @@
                     <br clear="all"/>
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </form>
         <br/>
 
-        <div class="tabletool">
+        <div class="table-toolbar">
             <img src="{{asset "@CurrentStyle/images/buttons/createban.gif"}}" border="0" alt=""/>
             <a href="{{route "canned_message_add" lang=formlang group=formgroup}}" target="_blank"
                         onclick="this.newWindow = window.open('{{route "canned_message_add" lang=formlang group=formgroup}}', '', 'toolbar=0,scrollbars=1,location=0,status=1,menubar=0,width=640,height=480,resizable=1');this.newWindow.focus();this.newWindow.opener=window;return false;">
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/group_edit.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/group_edit.handlebars
index eebb2f3f..3a016b1b 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/group_edit.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/group_edit.handlebars
@@ -14,7 +14,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         <form name="groupForm" method="post" action="{{formaction}}">
@@ -23,128 +23,128 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="name" class="flabel">{{l10n "Name"}}<span class="required">*</span></label>
-                                <div class="fvalue">
-                                    <input id="name" type="text" name="name" size="40" value="{{formname}}" class="formauth"/>
+                                <label for="name" class="field-label">{{l10n "Name"}}<span class="required">*</span></label>
+                                <div class="field-value">
+                                    <input id="name" type="text" name="name" size="40" value="{{formname}}" class="field-input"/>
                                 </div>
-                                <label for="name" class="fdescr"> &mdash; {{l10n "Name to identify the group."}}</label>
+                                <label for="name" class="field-description"> &mdash; {{l10n "Name to identify the group."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="description" class="flabel">{{l10n "Description"}}</label>
-                                <div class="fvalue">
-                                    <input id="description" type="text" name="description" size="40" value="{{formdescription}}" class="formauth"/>
+                                <label for="description" class="field-label">{{l10n "Description"}}</label>
+                                <div class="field-value">
+                                    <input id="description" type="text" name="description" size="40" value="{{formdescription}}" class="field-input"/>
                                 </div>
-                                <label for="description" class="fdescr"> &mdash; {{l10n "Description of the group."}}</label>
+                                <label for="description" class="field-description"> &mdash; {{l10n "Description of the group."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="commonname" class="flabel">{{l10n "International name"}}</label>
-                                <div class="fvalue">
-                                    <input id="commonname" type="text" name="commonname" size="40" value="{{formcommonname}}" class="formauth"/>
+                                <label for="common-name" class="field-label">{{l10n "International name"}}</label>
+                                <div class="field-value">
+                                    <input id="common-name" type="text" name="commonname" size="40" value="{{formcommonname}}" class="field-input"/>
                                 </div>
-                                <label for="commonname" class="fdescr"> &mdash; {{l10n "Name in English."}}</label>
+                                <label for="common-name" class="field-description"> &mdash; {{l10n "Name in English."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="commondescription" class="flabel">{{l10n "International description"}}</label>
-                                <div class="fvalue">
-                                    <input id="commondescription" type="text" name="commondescription" size="40" value="{{formcommondescription}}" class="formauth"/>
+                                <label for="common-description" class="field-label">{{l10n "International description"}}</label>
+                                <div class="field-value">
+                                    <input id="common-description" type="text" name="commondescription" size="40" value="{{formcommondescription}}" class="field-input"/>
                                 </div>
-                                <label for="commondescription" class="fdescr"> &mdash; {{l10n "Description in English."}}</label>
+                                <label for="common-description" class="field-description"> &mdash; {{l10n "Description in English."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="email" class="flabel">{{l10n "E-mail"}}</label>
-                                <div class="fvalue">
-                                    <input id="email" type="text" name="email" size="40" value="{{formemail}}" class="formauth"/>
+                                <label for="email" class="field-label">{{l10n "E-mail"}}</label>
+                                <div class="field-value">
+                                    <input id="email" type="text" name="email" size="40" value="{{formemail}}" class="field-input"/>
                                 </div>
-                                <label for="email" class="fdescr"> &mdash; {{l10n "Group email for notifications. Leave empty to use the default address."}}</label>
+                                <label for="email" class="field-description"> &mdash; {{l10n "Group email for notifications. Leave empty to use the default address."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="weight" class="flabel">{{l10n "Weight"}}</label>
-                                <div class="fvalue">
-                                    <input id="weight" type="text" name="weight" size="40" value="{{formweight}}" class="formauth"/>
+                                <label for="weight" class="field-label">{{l10n "Weight"}}</label>
+                                <div class="field-value">
+                                    <input id="weight" type="text" name="weight" size="40" value="{{formweight}}" class="field-input"/>
                                 </div>
-                                <label for="weight" class="fdescr"> &mdash; {{l10n "Groups with lower weight display higher in groups list. Group weight is a positive integer value."}}</label>
+                                <label for="weight" class="field-description"> &mdash; {{l10n "Groups with lower weight display higher in groups list. Group weight is a positive integer value."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="parent-group" class="flabel">{{l10n "Parent group"}}</label>
-                                <div class="fvalue">
+                                <label for="parent-group" class="field-label">{{l10n "Parent group"}}</label>
+                                <div class="field-value">
                                     <select name="parentgroup" id="parent-group">
                                         {{#each availableParentGroups}}
                                             <option value="{{groupid}}"{{#ifEqual groupid ../formparentgroup}} selected="selected"{{/ifEqual}}>{{#repeat level}}&nbsp;&nbsp;{{/repeat}}{{vclocalname}}</option>
                                         {{/each}}
                                     </select>
                                 </div>
-                                <label for="parent-group" class="fdescr"> &mdash; {{l10n "Groups can be organized in a hierarchical structure"}}</label>
+                                <label for="parent-group" class="field-description"> &mdash; {{l10n "Groups can be organized in a hierarchical structure"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div id="extra-fields">
-                                <div class="fheader">{{l10n "The fields that located below are extra fields. These fields are only available for the top level groups and override corresponding system settings if specified."}}</div>
+                                <div class="fields-header">{{l10n "The fields that located below are extra fields. These fields are only available for the top level groups and override corresponding system settings if specified."}}</div>
 
                                 <div class="field">
-                                    <label for="titlefield" class="flabel">{{l10n "Company title"}}</label>
-                                    <div class="fvalue">
-                                        <input id="titlefield" type="text" name="title" size="40" value="{{formtitle}}" class="formauth"/>
+                                    <label for="title-field" class="field-label">{{l10n "Company title"}}</label>
+                                    <div class="field-value">
+                                        <input id="title-field" type="text" name="title" size="40" value="{{formtitle}}" class="field-input"/>
                                     </div>
-                                    <label for="titlefield" class="fdescr"> &mdash; {{l10n "Enter your company title"}}</label>
+                                    <label for="title-field" class="field-description"> &mdash; {{l10n "Enter your company title"}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="chattitle" class="flabel">{{l10n "Title in the chat window"}}</label>
-                                    <div class="fvalue">
-                                        <input id="chattitle" type="text" name="chattitle" size="40" value="{{formchattitle}}" class="formauth"/>
+                                    <label for="chat-title" class="field-label">{{l10n "Title in the chat window"}}</label>
+                                    <div class="field-value">
+                                        <input id="chat-title" type="text" name="chattitle" size="40" value="{{formchattitle}}" class="field-input"/>
                                     </div>
-                                    <label for="chattitle" class="fdescr"> &mdash; {{l10n "Title in the chat window"}}</label>
+                                    <label for="chat-title" class="field-description"> &mdash; {{l10n "Title in the chat window"}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="logofield" class="flabel">{{l10n "Your company logo"}}</label>
-                                    <div class="fvalue">
-                                        <input id="logofield" type="text" name="logo" size="40" value="{{formlogo}}" class="formauth"/>
+                                    <label for="logo-field" class="field-label">{{l10n "Your company logo"}}</label>
+                                    <div class="field-value">
+                                        <input id="logo-field" type="text" name="logo" size="40" value="{{formlogo}}" class="field-input"/>
                                     </div>
-                                    <label for="logofield" class="fdescr"> &mdash; {{l10n "Enter http address of your company logo"}}</label>
+                                    <label for="logo-field" class="field-description"> &mdash; {{l10n "Enter http address of your company logo"}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="hosturl" class="flabel">{{l10n "URL of your website"}}</label>
-                                    <div class="fvalue">
-                                        <input id="hosturl" type="text" name="hosturl" size="40" value="{{formhosturl}}" class="formauth"/>
+                                    <label for="host-url" class="field-label">{{l10n "URL of your website"}}</label>
+                                    <div class="field-value">
+                                        <input id="host-url" type="text" name="hosturl" size="40" value="{{formhosturl}}" class="field-input"/>
                                     </div>
-                                    <label for="hosturl" class="fdescr"> &mdash; {{l10n "Destination for your company name or logo link"}}</label>
+                                    <label for="host-url" class="field-description"> &mdash; {{l10n "Destination for your company name or logo link"}}</label>
                                     <br clear="all"/>
                                 </div>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/group_members.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/group_members.handlebars
index 3af3dbc2..cd096d64 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/group_members.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/group_members.handlebars
@@ -10,7 +10,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         <form name="membersForm" method="post" action="{{route "group_members_save" group_id=groupid}}">
@@ -19,30 +19,30 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
                         <p><b>{{currentgroup}}</b></p>
 
                         {{#each operators}}
                             <div class="field">
-                                <div class="fvaluenodesc">
+                                <div class="field-value-no-description">
                                     <input id="op{{operatorid}}" type="checkbox" name="op{{operatorid}}" value="on"{{#if checked}} checked="checked"{{/if}}/>
                                     <label for="op{{operatorid}}">{{vclocalename}} (<a href="{{route "operator_edit" operator_id=operatorid}}">{{vclogin}}</a>)</label>
                                 </div>
                             </div>
                         {{/each}}
 
-                        <div class="fbutton">
-                            <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                        <div class="form-button">
+                            <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/groups.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/groups.handlebars
index 6736a8a2..635c5a79 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/groups.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/groups.handlebars
@@ -10,13 +10,13 @@
         {{> _errors}}
 
         <form name="groupsForm" method="get" action="{{route "groups"}}">
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
-                    <div class="packedFormField">
+                <div class="form-inwards">
+                    <div class="packed-form-fields">
                         {{l10n "Sort by:"}}<br/>
                         <select name="sortby" onchange="this.form.submit();">
                             {{#each availableOrders}}
@@ -25,7 +25,7 @@
                         </select>
                     </div>
 
-                    <div class="packedFormField">
+                    <div class="packed-form-fields">
                         {{l10n "Sort direction:"}}<br/>
                         <select name="sortdirection" onchange="this.form.submit();">
                             {{#each availableDirections}}
@@ -37,15 +37,15 @@
                     <br clear="all"/>
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </form>
         <br />
 
         {{#if canmodify}}
-            <div class="tabletool">
+            <div class="table-toolbar">
                 <img src="{{asset "@CurrentStyle/images/buttons/createdep.gif"}}" border="0" alt="" />
                 <a href="{{route "group_add"}}" title="{{l10n "Create new group"}}">
                     {{l10n "Create new group"}}
@@ -71,13 +71,13 @@
             <tbody>
                 {{#each groups}}
                     <tr>
-                        <td class="notlast level{{level}}">
+                        <td class="not-last level{{level}}">
                             <a href="{{route "group_edit" group_id=groupid}}" class="man">
                                 {{vclocalname}}
                             </a>
                         </td>
 
-                        <td class="notlast">
+                        <td class="not-last">
                             {{#if vclocaldescription}}
                                 {{vclocaldescription}}
                             {{else}}
@@ -85,7 +85,7 @@
                             {{/if}}
                         </td>
 
-                        <td class="notlast">
+                        <td class="not-last">
                             {{#ifAny isOnline isAway}}
                                 {{#if isOnline}}
                                     {{l10n "Online"}}
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/history.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/history.handlebars
index 4a447d16..065f4b7e 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/history.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/history.handlebars
@@ -8,33 +8,33 @@
         <br />
 
         <form name="searchForm" method="get" action="{{route "history"}}">
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
-                    <div class="fieldForm">
+                <div class="form-inwards">
+                    <div class="form-fields">
                         <div class="field">
-                            <label for="q" class="flabel">{{l10n "User name, operator name or message text search:"}}</label>
-                            <div class="fvaluenodesc">
-                                <div id="searchtext">
-                                    <input id="q" type="text" name="q" size="60" value="{{formq}}" class="formauth"/>
+                            <label for="q" class="field-label">{{l10n "User name, operator name or message text search:"}}</label>
+                            <div class="field-value-no-description">
+                                <div id="search-text">
+                                    <input id="q" type="text" name="q" size="60" value="{{formq}}" class="field-input"/>
                                 </div>
-                                <div class="searchctrl">
+                                <div class="search-controls">
                                     <label for="type">{{l10n "Search:"}}</label>
-                                    <select id="type" name="type" onchange="if (this.value == 'all' || this.value == 'message') {document.getElementById('inSystemMessages').style.display='inline'} else {document.getElementById('inSystemMessages').style.display='none'}; ">
+                                    <select id="type" name="type" onchange="if (this.value == 'all' || this.value == 'message') {document.getElementById('in-system-messages').style.display='inline'} else {document.getElementById('in-system-messages').style.display='none'}; ">
                                         <option value="all" {{#ifEqual formtype "all"}}selected="selected"{{/ifEqual}}>{{l10n "everywhere"}}</option>
                                         <option value="message" {{#ifEqual formtype "message"}}selected="selected"{{/ifEqual}}>{{l10n "in messages"}}</option>
                                         <option value="operator" {{#ifEqual formtype "operator"}}selected="selected"{{/ifEqual}}>{{l10n "by operator"}}</option>
                                         <option value="visitor" {{#ifEqual formtype "visitor"}}selected="selected"{{/ifEqual}}>{{l10n "by visitor"}}</option>
                                     </select>
                                 </div>
-                                <div id="searchbutton">
-                                    <input type="submit" name="search" class="submit-bg-button login-button" value="{{l10n "Search"}}" />
+                                <div id="search-button">
+                                    <input type="submit" name="search" class="submit-button-background login-button" value="{{l10n "Search"}}" />
                                 </div><br clear="all"/>
-                                <div class="searchctrl" id="inSystemMessages"{{#if canSearchInSystemMessages}} style="display: none;"{{/if}}>
-                                    <input id="insystemmessagesfield" type="checkbox" name="insystemmessages" {{#if forminsystemmessages}}checked="checked"{{/if}}/> <label for="insystemmessagesfield">{{l10n "Search in system messages"}}</label>
+                                <div class="search-controls" id="in-system-messages"{{#if canSearchInSystemMessages}} style="display: none;"{{/if}}>
+                                    <input id="in-system-messages-field" type="checkbox" name="insystemmessages" {{#if forminsystemmessages}}checked="checked"{{/if}}/> <label for="in-system-messages-field">{{l10n "Search in system messages"}}</label>
                                 </div>
                             </div>
                             <br clear="all"/>
@@ -42,8 +42,8 @@
                     </div>
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </form>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/history_thread.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/history_thread.handlebars
index 2408c82d..182d4d2f 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/history_thread.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/history_thread.handlebars
@@ -4,57 +4,57 @@
 
         <br/><br/>
 
-        <div class="logpane">
+        <div class="log-pane">
             <div class="header">
 
-                    <div class="wlabel">
+                    <div class="param-label">
                         {{l10n "Name"}}:
                     </div>
-                    <div class="wvalue">
+                    <div class="param-value">
                         {{threadInfo.userName}}
                     </div>
                     <br clear="all"/>
 
-                    <div class="wlabel">
+                    <div class="param-label">
                         {{l10n "Visitor's address"}}:
                     </div>
-                    <div class="wvalue">
+                    <div class="param-value">
                         {{{threadInfo.userAddress}}}
                     </div>
                     <br clear="all"/>
 
-                    <div class="wlabel">
+                    <div class="param-label">
                         {{l10n "Browser"}}:
                     </div>
-                    <div class="wvalue">
+                    <div class="param-value">
                         {{threadInfo.userAgentVersion}}
                     </div>
                     <br clear="all"/>
 
                     {{#if threadInfo.groupName}}
-                        <div class="wlabel">
+                        <div class="param-label">
                             {{l10n "Group"}}:
                         </div>
-                        <div class="wvalue">
+                        <div class="param-value">
                             {{threadInfo.groupName}}
                         </div>
                         <br clear="all"/>
                     {{/if}}
 
                     {{#if threadInfo.agentName}}
-                        <div class="wlabel">
+                        <div class="param-label">
                             {{l10n "Operator"}}:
                         </div>
-                        <div class="wvalue">
+                        <div class="param-value">
                             {{threadInfo.agentName}}
                         </div>
                         <br clear="all"/>
                     {{/if}}
 
-                    <div class="wlabel">
+                    <div class="param-label">
                         {{l10n "Time in chat"}}:
                     </div>
-                    <div class="wvalue">
+                    <div class="param-value">
                         {{formatDateDiff threadInfo.chatTime}}
                             ({{formatDate threadInfo.chatStarted}})
                     </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/index.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/index.handlebars
index 462e1a61..cd82d4ae 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/index.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/index.handlebars
@@ -10,18 +10,18 @@
     {{#override "content"}}
         <br/>
         {{#if needUpdate}}
-            <div id="formmessage">{{l10n "Please run the <a href=\"{0}\">Update wizard</a> to adjust your database." updateWizard}}</div>
+            <div id="form-message">{{l10n "Please run the <a href=\"{0}\">Update wizard</a> to adjust your database." updateWizard}}</div>
             <br/>
         {{else}}
             {{#if newFeatures}}
-                <div><div id="formmessage">{{l10n "Congratulations! You now have Mibew Messenger {1} installed. Turn on more features on the <a href=\"{0}\">Optional services</a> page." featuresPage mibewVersion}}</div></div>
+                <div><div id="form-message">{{l10n "Congratulations! You now have Mibew Messenger {1} installed. Turn on more features on the <a href=\"{0}\">Optional services</a> page." featuresPage mibewVersion}}</div></div>
                 <br/>
             {{/if}}
         {{/if}}
 
         <div id="dashboard">
-            <div class="dashitem">
-                <div class="dashitem-content">
+            <div class="dashboard-item">
+                <div class="dashboard-item-content">
                     <img src="{{asset "@CurrentStyle/images/dash/visitors.gif"}}" alt=""/>
                     <a href="{{route "users"}}">
                         {{l10n "Visitors"}}
@@ -30,8 +30,8 @@
                 </div>
             </div>
 
-            <div class="dashitem">
-                <div class="dashitem-content">
+            <div class="dashboard-item">
+                <div class="dashboard-item-content">
                     <img src="{{asset "@CurrentStyle/images/dash/history.gif"}}" alt=""/>
                     <a href="{{route "history"}}">
                         {{l10n "Chat history"}}
@@ -41,8 +41,8 @@
             </div>
 
             {{#if showstat}}
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/stat.gif"}}" alt=""/>
                         <a href="{{route "statistics"}}">
                             {{l10n "Statistics"}}
@@ -53,8 +53,8 @@
             {{/if}}
 
             {{#if showban}}
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/blocked.gif"}}" alt=""/>
                         <a href="{{route "bans"}}">
                             {{l10n "Blocked visitors"}}
@@ -64,8 +64,8 @@
                 </div>
             {{/if}}
 
-            <div class="dashitem">
-                <div class="dashitem-content">
+            <div class="dashboard-item">
+                <div class="dashboard-item-content">
                     <img src="{{asset "@CurrentStyle/images/dash/canned.gif"}}" alt=""/>
                     <a href="{{route "canned_messages"}}">
                         {{l10n "Canned Messages"}}
@@ -75,8 +75,8 @@
             </div>
 
             {{#if showadmin}}
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/getcode.gif"}}" alt=""/>
                         <a href="{{route "button_code"}}">
                             {{l10n "Button code"}}
@@ -85,8 +85,8 @@
                     </div>
                 </div>
 
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/operators.gif"}}" alt=""/>
                         <a href="{{route "operators"}}">
                             {{l10n "Operators"}}
@@ -95,8 +95,8 @@
                     </div>
                 </div>
 
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/dep.gif"}}" alt=""/>
                         <a href="{{route "groups"}}">
                             {{l10n "Groups"}}
@@ -105,8 +105,8 @@
                     </div>
                 </div>
 
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/settings.gif"}}" alt=""/>
                         <a href="{{route "settings_common"}}">
                             {{l10n "Settings"}}
@@ -117,8 +117,8 @@
             {{/if}}
 
             {{#if currentopid}}
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/profile.gif"}}"  alt=""/>
                         <a href="{{route "operator_edit" operator_id=currentopid}}">
                             {{l10n "Profile"}}
@@ -129,10 +129,10 @@
             {{/if}}
 
             {{#if localeLinks}}
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/locale.gif"}}"  alt=""/>
-                        <a href="#" id="changelang">
+                        <a href="#" id="change-language">
                             {{l10n "Language"}}
                         </a>
                         {{l10n "Change locale."}}
@@ -141,8 +141,8 @@
             {{/if}}
 
             {{#if showadmin}}
-                <div class="dashitem">
-                    <div class="dashitem-content">
+                <div class="dashboard-item">
+                    <div class="dashboard-item-content">
                         <img src="{{asset "@CurrentStyle/images/dash/updates.gif"}}" alt=""/>
                         <a href="{{route "updates"}}">
                             {{l10n "Updates"}}
@@ -152,8 +152,8 @@
                 </div>
             {{/if}}
 
-            <div class="dashitem">
-                <div class="dashitem-content">
+            <div class="dashboard-item">
+                <div class="dashboard-item-content">
                     <img src="{{asset "@CurrentStyle/images/dash/exit.gif"}}" alt=""/>
                     <a href="{{route "logout"}}">
                         {{l10n "Exit"}}
@@ -165,8 +165,8 @@
         </div>
 
         {{#if localeLinks}}
-            <div id="dashlocalesPopup">
-                <a href="#" id="dashlocalesPopupClose"><img src="{{asset "@CurrentStyle/images/dash/close.gif"}}" alt="X"/></a>
+            <div id="dashboard-locales-popup">
+                <a href="#" id="dashboard-locales-popup-close"><img src="{{asset "@CurrentStyle/images/dash/close.gif"}}" alt="X"/></a>
                 <h2><img src="{{asset "@CurrentStyle/images/dash/locale.gif"}}" alt=""/><b>{{l10n "Choose your language"}}</b></h2>
                 <ul class="locales">
                     {{#each localeLinks}}
@@ -174,7 +174,7 @@
                     {{/each}}
                 </ul>
             </div>
-            <div id="backgroundPopup"></div>
+            <div id="background-popup"></div>
         {{/if}}
     {{/override}}
 {{/extends}}
\ No newline at end of file
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/install_done.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/install_done.handlebars
index f9afb1b8..a64ecfae 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/install_done.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/install_done.handlebars
@@ -8,8 +8,8 @@
 
         {{l10n "Click to check the sound"}}:
         <ul>
-            <li><a id="check-nv" href="javascript:void(0)">{{l10n "New Visitor"}}</a></li>
-            <li><a id="check-nm" href="javascript:void(0)">{{l10n "New Message"}}</a></li>
+            <li><a id="check-new-visitor" href="javascript:void(0)">{{l10n "New Visitor"}}</a></li>
+            <li><a id="check-new-message" href="javascript:void(0)">{{l10n "New Message"}}</a></li>
         </ul>
         <br />
         <span class="warning">{{l10n "For security reasons you should remove install.php file from your server."}}</span>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/install_password.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/install_password.handlebars
index da9a929b..0fa0df38 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/install_password.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/install_password.handlebars
@@ -7,25 +7,25 @@
 
         <form name="passwordForm" method="post" class="password-form">
 
-            <div class="fieldForm">
+            <div class="form-fields">
                 <div class="field">
-                    <div class="fleftlabel">{{l10n "Password"}}:</div>
-                    <div class="fvalue">
-                        <input type="password" name="password" size="25" value="" class="formauth" autocomplete="off"/>
+                    <div class="field-label-left">{{l10n "Password"}}:</div>
+                    <div class="field-value">
+                        <input type="password" name="password" size="25" value="" class="field-input" autocomplete="off"/>
                     </div>
                     <br clear="all"/>
                 </div>
 
                 <div class="field">
-                    <div class="fleftlabel">{{l10n "Confirmation"}}:</div>
-                    <div class="fvalue">
-                        <input type="password" name="password_confirm" size="25" value="" class="formauth" autocomplete="off"/>
+                    <div class="field-label-left">{{l10n "Confirmation"}}:</div>
+                    <div class="field-value">
+                        <input type="password" name="password_confirm" size="25" value="" class="field-input" autocomplete="off"/>
                     </div>
                     <br clear="all"/>
                 </div>
 
-                <div class="fbutton">
-                    <input type="submit" name="submit" class="submit-bg-button save-button" value="{{l10n "Save"}}" />
+                <div class="form-button">
+                    <input type="submit" name="submit" class="submit-button-background save-button" value="{{l10n "Save"}}" />
                 </div>
 
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/install_step.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/install_step.handlebars
index 8a3cec66..74f22e86 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/install_step.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/install_step.handlebars
@@ -13,12 +13,12 @@
 
         {{#if done}}
             <div id="install">
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
                         {{l10n "Completed:"}}
 
                         <ul>
@@ -49,8 +49,8 @@
                         {{/unless}}
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/locales.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/locales.handlebars
index 474dfd65..823d4435 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/locales.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/locales.handlebars
@@ -11,19 +11,19 @@
 
         {{> _tabs}}
 
-        <div class="mform">
-            <div class="formtop">
-                <div class="formtopi"></div>
+        <div class="form-wrapper">
+            <div class="form-header">
+                <div class="form-header-inwards"></div>
             </div>
 
-            <div class="forminner">
+            <div class="form-inwards">
                 {{! It is just an empty plate under the tabs bar.}}
 
                 <br clear="all"/>
             </div>
 
-            <div class="formbottom">
-                <div class="formbottomi"></div>
+            <div class="form-footer">
+                <div class="form-footer-inwards"></div>
             </div>
         </div>
 
@@ -41,11 +41,11 @@
             <tbody>
                 {{#each localesList}}
                     <tr>
-                        <td class="notlast">
+                        <td class="not-last">
                             {{code}}
                         </td>
 
-                        <td class="notlast">
+                        <td class="not-last">
                             {{name}}
                         </td>
 
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/login.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/login.handlebars
index 1b2f12a1..3e94a3a3 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/login.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/login.handlebars
@@ -4,18 +4,18 @@
     {{/if}}
 
     {{#override "content"}}
-        <div id="loginintro">
+        <div id="login-intro">
         <p>{{l10n "Mibew Messenger is an open-source live support application."}}</p>
         </div>
 
         <form name="loginForm" method="post" action="{{route "login_submit"}}">
-            <div id="loginpane">
+            <div id="login-pane">
 
                 <div class="header">
                     <h2>{{l10n "Login"}}</h2>
                 </div>
 
-                <div class="fieldForm">
+                <div class="form-fields">
                     {{l10n "Please enter your username and password to access administrative tools. See your visitors and browse the history."}}
 
                     <br/>
@@ -24,24 +24,24 @@
                     {{> _errors}}
 
                     <div class="field">
-                        <div class="fleftlabel">{{l10n "Login:"}}</div>
-                        <div class="fvalue">
-                            <input type="text" name="login" size="25" value="{{formlogin}}" class="formauth"/>
+                        <div class="field-label-left">{{l10n "Login:"}}</div>
+                        <div class="field-value">
+                            <input type="text" name="login" size="25" value="{{formlogin}}" class="field-input"/>
                         </div>
                         <br clear="all"/>
                     </div>
 
                     <div class="field">
-                        <div class="fleftlabel">{{l10n "Password:"}}</div>
-                        <div class="fvalue">
-                            <input type="password" name="password" size="25" value="" class="formauth" autocomplete="off"/>
+                        <div class="field-label-left">{{l10n "Password:"}}</div>
+                        <div class="field-value">
+                            <input type="password" name="password" size="25" value="" class="field-input" autocomplete="off"/>
                         </div>
                         <br clear="all"/>
                     </div>
 
                     <div class="field">
-                        <div class="fleftlabel">&nbsp;</div>
-                        <div class="fvalue">
+                        <div class="field-label-left">&nbsp;</div>
+                        <div class="field-value">
                             <label>
                                 <input type="checkbox" name="isRemember" value="on"{{#if formisRemember}} checked="checked"{{/if}} />
                                 {{l10n "Remember"}}
@@ -50,8 +50,8 @@
                         <br clear="all"/>
                     </div>
 
-                    <div class="fbutton">
-                        <input type="submit" name="submit" class="submit-bg-button login-button" value="{{l10n "Enter"}}" />
+                    <div class="form-button">
+                        <input type="submit" name="submit" class="submit-button-background login-button" value="{{l10n "Enter"}}" />
 
                         <div class="links">
                             <a href="{{route "password_recovery"}}">{{l10n "Forgot your password?"}}</a><br/>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/mail_template_edit.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/mail_template_edit.handlebars
index 6b683f8b..ed549cb5 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/mail_template_edit.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/mail_template_edit.handlebars
@@ -14,38 +14,38 @@
             <input type="hidden" name="lang" value="{{formlang}}" />
 
             <div>
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="subject" class="flabel">{{l10n "Mail subject"}}<span class="required">*</span></label>
-                                <div class="fvalue">
-                                    <input id="subject" type="text" name="subject" size="40" value="{{formsubject}}" class="formauth" />
+                                <label for="subject" class="field-label">{{l10n "Mail subject"}}<span class="required">*</span></label>
+                                <div class="field-value">
+                                    <input id="subject" type="text" name="subject" size="40" value="{{formsubject}}" class="field-input" />
                                 </div>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="body" class="flabel">{{l10n "Mail body"}}<span class="required">*</span></label>
-                                <div class="fvaluenodesc">
+                                <label for="body" class="field-label">{{l10n "Mail body"}}<span class="required">*</span></label>
+                                <div class="field-valuenodesc">
                                     <textarea id="body" name="body" cols="20" rows="5" class="wide">{{formbody}}</textarea>
                                 </div>
                                 <br clear="all"/>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
 
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
 
                 </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/mail_templates.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/mail_templates.handlebars
index c9f925a4..190e1913 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/mail_templates.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/mail_templates.handlebars
@@ -8,7 +8,7 @@
         <br />
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         {{> _errors}}
@@ -17,14 +17,14 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
 
-                        <div class="packedFormField">
+                        <div class="packed-form-fields">
                             {{l10n "For language:"}}<br/>
                             <select name="lang" onchange="this.form.submit();">
                                 {{#each locales}}
@@ -37,8 +37,8 @@
 
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
 
                 </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/operator_avatar.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/operator_avatar.handlebars
index 06960674..ba8d0bd8 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/operator_avatar.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/operator_avatar.handlebars
@@ -14,34 +14,34 @@
 
             <div>
                 {{> _tabs}}
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
                         <p><b>{{currentop}}&lrm;</b></p>
 
-                        <div class="fieldForm">
+                        <div class="form-fields">
 
                             {{#if avatar}}
                                 <div class="field">
-                                    <div class="flabel">{{l10n "Current avatar image"}}</div>
-                                    <div class="fvalue">
+                                    <div class="field-label">{{l10n "Current avatar image"}}</div>
+                                    <div class="field-value">
                                         <img src="{{avatar}}" alt="cannot load avatar"/><br/>
                                         {{#if canmodify}}
-                                            <a class="formauth" href="{{csrfProtectedRoute "operator_avatar_delete" operator_id=opid}}">
+                                            <a class="field-input" href="{{csrfProtectedRoute "operator_avatar_delete" operator_id=opid}}">
                                                 {{l10n "Remove avatar"}}
                                             </a>
                                         {{/if}}
                                     </div>
-                                    <div class="fdescr"> &mdash; {{l10n "Your avatar image."}}</div>
+                                    <div class="field-description"> &mdash; {{l10n "Your avatar image."}}</div>
                                     <br clear="all"/>
                                 </div>
                             {{else}}
                                 {{#unless canmodify}}
                                     <div class="field">
-                                        <div class="fvaluenodesc">
+                                        <div class="field-value-no-description">
                                             No avatar
                                         </div>
                                     </div>
@@ -50,26 +50,26 @@
 
                             {{#if canmodify}}
                                 <div class="field">
-                                    <label for="avatarFile" class="flabel">
+                                    <label for="avatar-file" class="field-label">
                                         {{l10n "Upload avatar"}}<span class="required">*</span>
                                     </label>
-                                    <div class="fvalue">
-                                        <input id="avatarFile" type="file" name="avatarFile" size="40" value="{{formavatarFile}}" class="formauth"/>
+                                    <div class="field-value">
+                                        <input id="avatar-file" type="file" name="avatarFile" size="40" value="{{formavatarFile}}" class="field-input"/>
                                     </div>
-                                    <label for="avatarFile" class="fdescr"> &mdash; {{l10n "Choose the avatar file to upload.<br/>The picture size should not exceed 100x100 px."}}</label>
+                                    <label for="avatar-file" class="field-description"> &mdash; {{l10n "Choose the avatar file to upload.<br/>The picture size should not exceed 100x100 px."}}</label>
                                     <br clear="all"/>
                                 </div>
 
-                                <div class="fbutton">
-                                    <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                                <div class="form-button">
+                                    <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                                 </div>
                             {{/if}}
                         </div>
 
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
 
                 </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/operator_edit.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/operator_edit.handlebars
index 28bc7ed1..41fff645 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/operator_edit.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/operator_edit.handlebars
@@ -14,7 +14,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         {{#ifAny opid canmodify}}
@@ -24,91 +24,91 @@
                 <div>
                     {{> _tabs}}
 
-                    <div class="mform">
-                        <div class="formtop">
-                            <div class="formtopi"></div>
+                    <div class="form-wrapper">
+                        <div class="form-header">
+                            <div class="form-header-inwards"></div>
                         </div>
 
-                        <div class="forminner">
+                        <div class="form-inwards">
 
-                            <div class="fieldForm">
+                            <div class="form-fields">
                                 <div class="field">
-                                    <label for="login" class="flabel">{{l10n "Login"}}<span class="required">*</span></label>
-                                    <div class="fvalue">
-                                        <input id="login" type="text" name="login" size="40" value="{{formlogin}}" class="formauth"{{#unless canchangelogin}} disabled="disabled"{{/unless}}/>
+                                    <label for="login" class="field-label">{{l10n "Login"}}<span class="required">*</span></label>
+                                    <div class="field-value">
+                                        <input id="login" type="text" name="login" size="40" value="{{formlogin}}" class="field-input"{{#unless canchangelogin}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="login" class="fdescr"> &mdash; {{l10n "Login can consist of small Latin letters and underscore."}}</label>
+                                    <label for="login" class="field-description"> &mdash; {{l10n "Login can consist of small Latin letters and underscore."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="email" class="flabel">{{l10n "E-mail"}}<span class="required">*</span></label>
-                                    <div class="fvalue">
-                                        <input id="email" type="text" name="email" size="40" value="{{formemail}}" class="formauth"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="email" class="field-label">{{l10n "E-mail"}}<span class="required">*</span></label>
+                                    <div class="field-value">
+                                        <input id="email" type="text" name="email" size="40" value="{{formemail}}" class="field-input"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="email" class="fdescr"> &mdash; {{l10n "For notifications and password retrieval."}}</label>
+                                    <label for="email" class="field-description"> &mdash; {{l10n "For notifications and password retrieval."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="password" class="flabel">
+                                    <label for="password" class="field-label">
                                         {{l10n "Password"}}{{#if requirePassword}}<span class="required">*</span>{{/if}}
                                     </label>
-                                    <div class="fvalue">
-                                        <input id="password" type="password" name="password" size="40" value="" class="formauth"{{#unless canmodify}} disabled="disabled"{{/unless}} autocomplete="off"/>
+                                    <div class="field-value">
+                                        <input id="password" type="password" name="password" size="40" value="" class="field-input"{{#unless canmodify}} disabled="disabled"{{/unless}} autocomplete="off"/>
                                     </div>
-                                    <label for="password" class="fdescr"> &mdash; {{l10n "Enter a new password or leave the field empty to keep the previous one."}}</label>
+                                    <label for="password" class="field-description"> &mdash; {{l10n "Enter a new password or leave the field empty to keep the previous one."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="passwordConfirm" class="flabel">
+                                    <label for="password-confirm" class="field-label">
                                         {{l10n "Confirmation"}}{{#if requirePassword}}<span class="required">*</span>{{/if}}
                                     </label>
-                                    <div class="fvalue">
-                                        <input id="passwordConfirm" type="password" name="passwordConfirm" size="40" value="" class="formauth"{{#unless canmodify}} disabled="disabled"{{/unless}} autocomplete="off"/>
+                                    <div class="field-value">
+                                        <input id="password-confirm" type="password" name="passwordConfirm" size="40" value="" class="field-input"{{#unless canmodify}} disabled="disabled"{{/unless}} autocomplete="off"/>
                                     </div>
-                                    <label for="passwordConfirm" class="fdescr"> &mdash; {{l10n "Confirm new password."}}</label>
+                                    <label for="password-confirm" class="field-description"> &mdash; {{l10n "Confirm new password."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="name" class="flabel">{{l10n "Name"}}<span class="required">*</span></label>
-                                    <div class="fvalue">
-                                        <input id="name" type="text" name="name" size="40" value="{{formname}}" class="formauth"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="name" class="field-label">{{l10n "Name"}}<span class="required">*</span></label>
+                                    <div class="field-value">
+                                        <input id="name" type="text" name="name" size="40" value="{{formname}}" class="field-input"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="name" class="fdescr"> &mdash; {{l10n "This name will be seen by your visitors."}}</label>
+                                    <label for="name" class="field-description"> &mdash; {{l10n "This name will be seen by your visitors."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="commonname" class="flabel">{{l10n "International name (Latin)"}}<span class="required">*</span></label>
-                                    <div class="fvalue">
-                                        <input id="commonname" type="text" name="commonname" size="40" value="{{formcommonname}}" class="formauth"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="common-name" class="field-label">{{l10n "International name (Latin)"}}<span class="required">*</span></label>
+                                    <div class="field-value">
+                                        <input id="common-name" type="text" name="commonname" size="40" value="{{formcommonname}}" class="field-input"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="commonname" class="fdescr"> &mdash; {{l10n "This name will be seen by your visitors."}}</label>
+                                    <label for="common-name" class="field-description"> &mdash; {{l10n "This name will be seen by your visitors."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="code" class="flabel">{{l10n "Code"}}</label>
-                                    <div class="fvalue">
-                                        <input id="code" type="text" name="code" size="40" value="{{formcode}}" class="formauth"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="code" class="field-label">{{l10n "Code"}}</label>
+                                    <div class="field-value">
+                                        <input id="code" type="text" name="code" size="40" value="{{formcode}}" class="field-input"{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="code" class="fdescr"> &mdash; {{l10n "Use to start chat with determined operator"}}</label>
+                                    <label for="code" class="field-description"> &mdash; {{l10n "Use to start chat with determined operator"}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 {{#if canmodify}}
-                                    <div class="fbutton">
-                                        <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                                    <div class="form-button">
+                                        <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                                     </div>
                                 {{/if}}
                             </div>
                         </div>
 
-                        <div class="formbottom">
-                            <div class="formbottomi"></div>
+                        <div class="form-footer">
+                            <div class="form-footer-inwards"></div>
                         </div>
                     </div>
                 </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/operator_groups.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/operator_groups.handlebars
index af2b427d..8cdf615c 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/operator_groups.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/operator_groups.handlebars
@@ -10,7 +10,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         <form name="opgroupsForm" method="post" action="{{route "operator_groups_save" operator_id=opid}}">
@@ -18,21 +18,21 @@
 
             <div>
                 {{> _tabs}}
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
                         <p><b>{{currentop}}&lrm;</b></p>
 
                         {{#each groups}}
                             <div class="field level{{level}}">
-                                <label for="group{{groupid}}" class="flabel">{{vclocalname}}</label>
-                                <div class="fvalue">
+                                <label for="group{{groupid}}" class="field-label">{{vclocalname}}</label>
+                                <div class="field-value">
                                     <input id="group{{groupid}}" type="checkbox" name="group{{groupid}}" value="on"{{#if checked}} checked="checked"{{/if}}{{#unless ../canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="group{{groupid}}" class="fdescr">
+                                <label for="group{{groupid}}" class="field-description">
                                     &mdash; {{#if vclocaldescription}}{{vclocaldescription}}{{else}}{{l10n "&lt;no description&gt;"}}{{/if}}
                                 </label>
                                 <br clear="all"/>
@@ -40,14 +40,14 @@
                         {{/each}}
 
                         {{#if canmodify}}
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
                         {{/if}}
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
 
                 </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/operator_permissions.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/operator_permissions.handlebars
index 0502e61f..ef0fb3e0 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/operator_permissions.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/operator_permissions.handlebars
@@ -10,7 +10,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         <form name="permissionsForm" method="post" action="{{route "operator_permissions_save" operator_id=opid}}">
@@ -19,12 +19,12 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
                         <p><b>{{currentop}}&lrm;</b></p>
 
                         {{#each permissionsList}}
@@ -36,14 +36,14 @@
                         {{/each}}
 
                         {{#if canmodify}}
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
                         {{/if}}
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/operators.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/operators.handlebars
index 20e76557..3e6a1779 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/operators.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/operators.handlebars
@@ -10,13 +10,13 @@
         {{> _errors}}
 
         <form name="agentsForm" method="get" action="{{route "operators"}}">
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
-                    <div class="packedFormField">
+                <div class="form-inwards">
+                    <div class="packed-form-fields">
                         {{l10n "Sort by:"}}<br/>
                         <select name="sortby" onchange="this.form.submit();">
                             {{#each availableOrders}}
@@ -25,7 +25,7 @@
                         </select>
                     </div>
 
-                    <div class="packedFormField">
+                    <div class="packed-form-fields">
                         {{l10n "Sort direction:"}}<br/>
                         <select name="sortdirection" onchange="this.form.submit();">
                             {{#each availableDirections}}
@@ -37,15 +37,15 @@
                     <br clear="all"/>
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </form>
         <br />
 
         {{#if canmodify}}
-            <div class="tabletool">
+            <div class="table-toolbar">
                 <img src="{{asset "@CurrentStyle/images/buttons/createagent.gif"}}" border="0" alt="" />
                 <a href="{{route "operator_add"}}" title="{{l10n "Add operator..."}}">
                     {{l10n "Add operator..."}}
@@ -70,17 +70,17 @@
             <tbody>
                 {{#each allowedAgents}}
                     <tr>
-                        <td class="notlast">
+                        <td class="not-last">
                             <a href="{{route "operator_edit" operator_id=operatorid}}" class="man">
                                 {{vclogin}}
                             </a>
                         </td>
 
-                        <td class="notlast">
+                        <td class="not-last">
                             {{vclocalename}} / {{vccommonname}}
                         </td>
 
-                        <td class="notlast">
+                        <td class="not-last">
                             {{#ifAny isAvailable isAway}}
                                 {{#if isAvailable}}
                                     {{l10n "Online"}}
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/password_recovery.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/password_recovery.handlebars
index 9691d6d2..5ba72268 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/password_recovery.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/password_recovery.handlebars
@@ -5,12 +5,12 @@
 
     {{#override "content"}}
         {{#if isdone}}
-            <div id="loginpane">
+            <div id="login-pane">
                 <div class="header">
                     <h2>{{l10n "Password retrieval"}}</h2>
                 </div>
 
-                <div class="fieldForm">
+                <div class="form-fields">
                     {{l10n "We've sent the instructions to your email. Please check it."}}
                     <br/>
                     <br/>
@@ -19,27 +19,27 @@
             </div>
         {{else}}
             <form name="restoreForm" method="post" action="{{route "password_recovery"}}">
-                <div id="loginpane">
+                <div id="login-pane">
 
                     <div class="header">
                         <h2>{{l10n "Trouble Accessing Your Account?"}}</h2>
                     </div>
 
-                    <div class="fieldForm">
+                    <div class="form-fields">
                         {{l10n "You cannot retrieve your password, but you can set a new one by following a link sent to you by email."}}<br/><br/>
 
                         {{> _errors}}
 
                         <div class="field">
-                            <div class="fleftlabel">{{l10n "Login or E-mail:"}}</div>
-                            <div class="fvalue">
-                                <input type="text" name="loginoremail" size="25" value="{{formloginoremail}}" class="formauth"/>
+                            <div class="field-label-left">{{l10n "Login or E-mail:"}}</div>
+                            <div class="field-value">
+                                <input type="text" name="loginoremail" size="25" value="{{formloginoremail}}" class="field-input"/>
                             </div>
                             <br clear="all"/>
                         </div>
 
-                        <div class="fbutton">
-                            <table class="submitbutton">
+                        <div class="form-button">
+                            <table class="submit-button">
                                 <tr>
                                     <td>
                                         <a href="javascript:document.restoreForm.submit();">
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/password_recovery_reset.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/password_recovery_reset.handlebars
index c324b4d2..a0d8df90 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/password_recovery_reset.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/password_recovery_reset.handlebars
@@ -5,12 +5,12 @@
 
     {{#override "content"}}
         {{#if isdone}}
-            <div id="loginpane">
+            <div id="login-pane">
                 <div class="header">
                     <h2>{{l10n "Your password has been changed."}}</h2>
                 </div>
 
-                <div class="fieldForm">
+                <div class="form-fields">
                     {{l10n "Login using your new password."}}
                     <br/>
                     <br/>
@@ -22,13 +22,13 @@
                 <input type="hidden" name="id" value="{{id}}"/>
                 <input type="hidden" name="token" value="{{token}}"/>
 
-                <div id="loginpane">
+                <div id="login-pane">
 
                     <div class="header">
                         <h2>{{l10n "Change your password"}}</h2>
                     </div>
 
-                    <div class="fieldForm">
+                    <div class="form-fields">
                         {{l10n "Please choose a password to use with your account."}}
 
                         <br/>
@@ -38,23 +38,23 @@
 
                         {{#if showform}}
                             <div class="field">
-                                <div class="fleftlabel">{{l10n "Password"}}</div>
-                                <div class="fvalue">
-                                    <input type="password" name="password" size="25" value="" class="formauth" autocomplete="off"/>
+                                <div class="field-label-left">{{l10n "Password"}}</div>
+                                <div class="field-value">
+                                    <input type="password" name="password" size="25" value="" class="field-input" autocomplete="off"/>
                                 </div>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <div class="fleftlabel">{{l10n "Confirmation"}}</div>
-                                <div class="fvalue">
-                                    <input type="password" name="passwordConfirm" size="25" value="" class="formauth" autocomplete="off"/>
+                                <div class="field-label-left">{{l10n "Confirmation"}}</div>
+                                <div class="field-value">
+                                    <input type="password" name="passwordConfirm" size="25" value="" class="field-input" autocomplete="off"/>
                                 </div>
                                 <br clear="all"/>
                             </div>
 
-                            <div class="fbutton">
-                                <table class="submitbutton">
+                            <div class="form-button">
+                                <table class="submit-button">
                                     <tr>
                                         <td>
                                             <a href="javascript:document.resetForm.submit();">
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/plugins.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/plugins.handlebars
index d3faf974..6c72319e 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/plugins.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/plugins.handlebars
@@ -23,9 +23,9 @@
             <tbody>
                 {{#each plugins}}
                     <tr>
-                        <td class="notlast">{{name}}</td>
-                        <td class="notlast">{{version}}</td>
-                        <td class="notlast">
+                        <td class="not-last">{{name}}</td>
+                        <td class="not-last">{{version}}</td>
+                        <td class="not-last">
                             {{#each dependencies}}{{#unless @first}}, {{/unless}}{{@key}}({{this}}){{/each}}
                         </td>
                         <td class="notlast">
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/settings_common.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/settings_common.handlebars
index 0e46cc23..4af5dfcb 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/settings_common.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/settings_common.handlebars
@@ -10,7 +10,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         <form name="settings" method="post" action="{{route "settings_common_save"}}">
@@ -19,167 +19,167 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
 
-                        <div class="fieldForm">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="email" class="flabel">{{l10n "Email"}}</label>
-                                <div class="fvalue">
-                                    <input id="email" type="text" name="email" size="40" value="{{formemail}}" class="formauth"/>
+                                <label for="email" class="field-label">{{l10n "Email"}}</label>
+                                <div class="field-value">
+                                    <input id="email" type="text" name="email" size="40" value="{{formemail}}" class="field-input"/>
                                 </div>
-                                <label for="email" class="fdescr"> &mdash; {{l10n "Enter an email to receive system messages"}}</label>
+                                <label for="email" class="field-description"> &mdash; {{l10n "Enter an email to receive system messages"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="leftmessageslocale" class="flabel">{{l10n "Language of the messages left by visitors"}}</label>
-                                <div class="fvalue">
-                                    <select id="leftmessageslocale" name="leftmessageslocale">
+                                <label for="left-messages-locale" class="field-label">{{l10n "Language of the messages left by visitors"}}</label>
+                                <div class="field-value">
+                                    <select id="left-messages-locale" name="leftmessageslocale">
                                         {{#each availableLocales}}
                                             <option value="{{this}}"{{#ifEqual this ../formleftmessageslocale}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                         {{/each}}
                                     </select>
                                 </div>
-                                <label for="leftmessageslocale" class="fdescr"> &mdash; {{l10n "Language of the messages that could be left by visitors when operators aren't available"}}</label>
+                                <label for="left-messages-locale" class="field-description"> &mdash; {{l10n "Language of the messages that could be left by visitors when operators aren't available"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="titlefield" class="flabel">{{l10n "Company title"}}</label>
-                                <div class="fvalue">
-                                    <input id="titlefield" type="text" name="title" size="40" value="{{formtitle}}" class="formauth"/>
+                                <label for="title-field" class="field-label">{{l10n "Company title"}}</label>
+                                <div class="field-value">
+                                    <input id="title-field" type="text" name="title" size="40" value="{{formtitle}}" class="field-input"/>
                                 </div>
-                                <label for="titlefield" class="fdescr"> &mdash; {{l10n "Enter your company title"}}</label>
+                                <label for="title-field" class="field-description"> &mdash; {{l10n "Enter your company title"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="chattitle" class="flabel">{{l10n "Title in the chat window"}}</label>
-                                <div class="fvalue">
-                                    <input id="chattitle" type="text" name="chattitle" size="40" value="{{formchattitle}}" class="formauth"/>
+                                <label for="chat-title" class="field-label">{{l10n "Title in the chat window"}}</label>
+                                <div class="field-value">
+                                    <input id="chat-title" type="text" name="chattitle" size="40" value="{{formchattitle}}" class="field-input"/>
                                 </div>
-                                <label for="chattitle" class="fdescr"> &mdash; {{l10n "Name of your company for example."}}</label>
+                                <label for="chat-title" class="field-description"> &mdash; {{l10n "Name of your company for example."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="logofield" class="flabel">{{l10n "Your company logo"}}</label>
-                                <div class="fvalue">
-                                    <input id="logofield" type="text" name="logo" size="40" value="{{formlogo}}" class="formauth"/>
+                                <label for="logo-field" class="field-label">{{l10n "Your company logo"}}</label>
+                                <div class="field-value">
+                                    <input id="logo-field" type="text" name="logo" size="40" value="{{formlogo}}" class="field-input"/>
                                 </div>
-                                <label for="logofield" class="fdescr"> &mdash; {{l10n "Enter http address of your company logo"}}</label>
+                                <label for="logo-field" class="field-description"> &mdash; {{l10n "Enter http address of your company logo"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="hosturl" class="flabel">{{l10n "URL of your website"}}</label>
-                                <div class="fvalue">
-                                    <input id="hosturl" type="text" name="hosturl" size="40" value="{{formhosturl}}" class="formauth"/>
+                                <label for="host-url" class="field-label">{{l10n "URL of your website"}}</label>
+                                <div class="field-value">
+                                    <input id="host-url" type="text" name="hosturl" size="40" value="{{formhosturl}}" class="field-input"/>
                                 </div>
-                                <label for="hosturl" class="fdescr"> &mdash; {{l10n "Destination for your company name or logo link"}}</label>
+                                <label for="host-url" class="field-description"> &mdash; {{l10n "Destination for your company name or logo link"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="geolink" class="flabel">{{l10n "Link to an external geolocation service"}}</label>
-                                <div class="fvalue">
-                                    <input id="geolink" type="text" name="geolink" size="40" value="{{formgeolink}}" class="formauth"/>
+                                <label for="geoip-link" class="field-label">{{l10n "Link to an external geolocation service"}}</label>
+                                <div class="field-value">
+                                    <input id="geoip-link" type="text" name="geolink" size="40" value="{{formgeolink}}" class="field-input"/>
                                 </div>
-                                <label for="geolink" class="fdescr"> &mdash; {{l10n "Each IP becomes a link opening in a new window. {ip} is substituted with a real IP."}}</label>
+                                <label for="geoip-link" class="field-description"> &mdash; {{l10n "Each IP becomes a link opening in a new window. {ip} is substituted with a real IP."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="geolinkparams" class="flabel">{{l10n "Geolocation window options"}}</label>
-                                <div class="fvalue">
-                                    <input id="geolinkparams" type="text" name="geolinkparams" size="40" value="{{formgeolinkparams}}" class="formauth"/>
+                                <label for="geoip-link-params" class="field-label">{{l10n "Geolocation window options"}}</label>
+                                <div class="field-value">
+                                    <input id="geoip-link-params" type="text" name="geolinkparams" size="40" value="{{formgeolinkparams}}" class="field-input"/>
                                 </div>
-                                <label for="geolinkparams" class="fdescr"> &mdash; {{l10n "Window size and toolbars hiding"}}</label>
+                                <label for="geoip-link-params" class="field-description"> &mdash; {{l10n "Window size and toolbars hiding"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="usernamepattern" class="flabel">{{l10n "Visitor's identifier"}}</label>
-                                <div class="fvalue">
-                                    <input id="usernamepattern" type="text" name="usernamepattern" size="40" value="{{formusernamepattern}}" class="formauth"/>
+                                <label for="username-pattern" class="field-label">{{l10n "Visitor's identifier"}}</label>
+                                <div class="field-value">
+                                    <input id="username-pattern" type="text" name="usernamepattern" size="40" value="{{formusernamepattern}}" class="field-input"/>
                                 </div>
-                                <label for="usernamepattern" class="fdescr"> &mdash; {{l10n "How to build visitor's identifying string from {name}, {id} or {addr}. Default: {name}"}}</label>
+                                <label for="username-pattern" class="field-description"> &mdash; {{l10n "How to build visitor's identifying string from {name}, {id} or {addr}. Default: {name}"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="cronkey" class="flabel">{{l10n "Cron security key"}}</label>
-                                <div class="fvalue">
-                                    <input id="cronkey" type="text" name="cronkey" size="40" value="{{formcronkey}}" class="formauth"/>
+                                <label for="cron-key" class="field-label">{{l10n "Cron security key"}}</label>
+                                <div class="field-value">
+                                    <input id="cron-key" type="text" name="cronkey" size="40" value="{{formcronkey}}" class="field-input"/>
                                 </div>
-                                <label for="cronkey" class="fdescr"> &mdash; {{l10n "To run cron use link <a href=\"{0}\">{0}</a>." cron_path}}</label>
+                                <label for="cron-key" class="field-description"> &mdash; {{l10n "To run cron use link <a href=\"{0}\">{0}</a>." cron_path}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="page_style" class="flabel">{{l10n "Select a style for your operator pages"}}</label>
-                                <div class="fvalue">
-                                    <select id="pages_style" name="page_style">
+                                <label for="page-style" class="field-label">{{l10n "Select a style for your operator pages"}}</label>
+                                <div class="field-value">
+                                    <select id="page-style" name="page_style">
                                         {{#each availablePageStyles}}
                                             <option value="{{this}}"{{#ifEqual this ../formpagestyle}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                         {{/each}}
                                     </select>
                                 </div>
-                                <label for="page_style" class="fdescr"> &mdash; {{l10n "A preview for each style is available <a href=\"{0}\">here</a>" pageStylePreviewPath}}</label>
+                                <label for="page-style" class="field-description"> &mdash; {{l10n "A preview for each style is available <a href=\"{0}\">here</a>" pageStylePreviewPath}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="chat_style" class="flabel">{{l10n "Select a style for your chat windows"}}</label>
-                                <div class="fvalue">
-                                    <select id="chat_style" name="chat_style" >
+                                <label for="chat-style" class="field-label">{{l10n "Select a style for your chat windows"}}</label>
+                                <div class="field-value">
+                                    <select id="chat-style" name="chat_style" >
                                         {{#each availableChatStyles}}
                                             <option value="{{this}}"{{#ifEqual this ../formchatstyle}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                         {{/each}}
                                     </select>
                                 </div>
-                                <label for="chat_style" class="fdescr"> &mdash; {{l10n "A preview all pages for each style is available <a href=\"{0}\">here</a>" chatStylePreviewPath}}</label>
+                                <label for="chat-style" class="field-description"> &mdash; {{l10n "A preview all pages for each style is available <a href=\"{0}\">here</a>" chatStylePreviewPath}}</label>
                                 <br clear="all"/>
                             </div>
 
                             {{#if enabletracking}}
                                 <div class="field">
-                                    <label for="invitation_style" class="flabel">{{l10n "Select a style for your invitation"}}</label>
-                                    <div class="fvalue">
-                                        <select id="invitation_style" name="invitation_style" >
+                                    <label for="invitation-style" class="field-label">{{l10n "Select a style for your invitation"}}</label>
+                                    <div class="field-value">
+                                        <select id="invitation-style" name="invitation_style" >
                                             {{#each availableInvitationStyles}}
                                                 <option value="{{this}}"{{#ifEqual this ../forminvitationstyle}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                             {{/each}}
                                         </select>
                                     </div>
-                                    <label for="invitation_style" class="fdescr"> &mdash; {{l10n "A preview for invitation style is available <a href=\"{0}\">here</a>" invitationStylePreviewPath}}</label>
+                                    <label for="invitation-style" class="field-description"> &mdash; {{l10n "A preview for invitation style is available <a href=\"{0}\">here</a>" invitationStylePreviewPath}}</label>
                                     <br clear="all"/>
                                 </div>
                             {{/if}}
 
                             <div class="field">
-                                <div class="flabel">{{l10n "Send messages with:"}}</div>
-                                <div class="fvaluenodesc">
-                                    <input id="sendmessagekeyenter" type="radio" name="sendmessagekey" value="enter" {{#ifEqual formsendmessagekey "enter"}} checked="checked"{{/ifEqual}}/><label for="sendmessagekeyenter">Enter</label>
-                                    <input id="sendmessagekeycenter" type="radio" name="sendmessagekey" value="center" {{#ifEqual formsendmessagekey "center"}} checked="checked"{{/ifEqual}}/><label for="sendmessagekeycenter">Ctrl-Enter</label>
+                                <div class="field-label">{{l10n "Send messages with:"}}</div>
+                                <div class="field-value-no-description">
+                                    <input id="send-message-key-enter" type="radio" name="sendmessagekey" value="enter" {{#ifEqual formsendmessagekey "enter"}} checked="checked"{{/ifEqual}}/><label for="send-message-key-enter">Enter</label>
+                                    <input id="send-message-key-ctrl-enter" type="radio" name="sendmessagekey" value="center" {{#ifEqual formsendmessagekey "center"}} checked="checked"{{/ifEqual}}/><label for="send-message-key-ctrl-enter">Ctrl-Enter</label>
                                 </div>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
 
                         </div>
 
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/settings_features.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/settings_features.handlebars
index 608a3d17..d5ee494e 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/settings_features.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/settings_features.handlebars
@@ -10,7 +10,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Features activated"}}</div>
+            <div id="form-message">{{l10n "Features activated"}}</div>
         {{/if}}
 
         <form name="features" method="post" action="{{route "settings_features_save"}}">
@@ -20,169 +20,169 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
+                    <div class="form-inwards">
 
-                        <div class="fieldForm">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="usercanchangename" class="flabel">{{l10n "Allows users to change their names"}}</label>
-                                <div class="fvalue">
-                                    <input id="usercanchangename" type="checkbox" name="usercanchangename" value="on"{{#if formusercanchangename}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                <label for="user-can-change-name" class="field-label">{{l10n "Allows users to change their names"}}</label>
+                                <div class="field-value">
+                                    <input id="user-can-change-name" type="checkbox" name="usercanchangename" value="on"{{#if formusercanchangename}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="usercanchangename" class="fdescr"> &mdash; {{l10n "Turn off to hide edit box from chat window"}}</label>
+                                <label for="user-can-change-name" class="field-description"> &mdash; {{l10n "Turn off to hide edit box from chat window"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="enable-ssl" class="flabel">{{l10n "Allow secure connections (SSL)"}}</label>
-                                <div class="fvalue">
+                                <label for="enable-ssl" class="field-label">{{l10n "Allow secure connections (SSL)"}}</label>
+                                <div class="field-value">
                                     <input id="enable-ssl" type="checkbox" name="enablessl" value="on"{{#if formenablessl}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enable-ssl" class="fdescr"> &mdash; {{l10n "Please note that your web server should be configured to support https requests."}}</label>
+                                <label for="enable-ssl" class="field-description"> &mdash; {{l10n "Please note that your web server should be configured to support https requests."}}</label>
                                 <br clear="all"/>
 
                                 <div class="subfield under-ssl">
-                                    <label for="forcessl" class="flabel">{{l10n "Force all chats to be secure"}}</label>
-                                    <div class="fvalue">
-                                        <input id="forcessl" type="checkbox" name="forcessl" value="on"{{#if formforcessl}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="force-ssl" class="field-label">{{l10n "Force all chats to be secure"}}</label>
+                                    <div class="field-value">
+                                        <input id="force-ssl" type="checkbox" name="forcessl" value="on"{{#if formforcessl}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="forcessl" class="fdescr"> &mdash; {{l10n "Show chats only through https connection"}}</label>
+                                    <label for="force-ssl" class="field-description"> &mdash; {{l10n "Show chats only through https connection"}}</label>
                                     <br clear="all"/>
                                 </div>
                             </div>
 
                             <div class="field">
-                                <label for="enable-groups" class="flabel">{{l10n "Enable \"Groups\""}}</label>
-                                <div class="fvalue">
+                                <label for="enable-groups" class="field-label">{{l10n "Enable \"Groups\""}}</label>
+                                <div class="field-value">
                                     <input id="enable-groups" type="checkbox" name="enablegroups" value="on"{{#if formenablegroups}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enable-groups" class="fdescr"> &mdash; {{l10n "Use it to have separate queues for different questions."}}</label>
+                                <label for="enable-groups" class="field-description"> &mdash; {{l10n "Use it to have separate queues for different questions."}}</label>
                                 <br clear="all"/>
 
                                 <div class="subfield under-groups">
-                                    <label for="enablegroupsisolation" class="flabel">{{l10n "Enable \"Groups Isolation\""}}</label>
-                                    <div class="fvalue">
-                                        <input id="enablegroupsisolation" type="checkbox" name="enablegroupsisolation" value="on"{{#if formenablegroupsisolation}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="enable-groups-isolation" class="field-label">{{l10n "Enable \"Groups Isolation\""}}</label>
+                                    <div class="field-value">
+                                        <input id="enable-groups-isolation" type="checkbox" name="enablegroupsisolation" value="on"{{#if formenablegroupsisolation}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="enablegroupsisolation" class="fdescr"> &mdash; {{l10n "Use it to completely isolate groups from each other."}}</label>
+                                    <label for="enable-groups-isolation" class="field-description"> &mdash; {{l10n "Use it to completely isolate groups from each other."}}</label>
                                     <br clear="all"/>
                                 </div>
                             </div>
 
                             <div class="field">
-                                <label for="enablestatistics" class="flabel">{{l10n "Enable \"Statistics\""}}</label>
-                                <div class="fvalue">
-                                    <input id="enablestatistics" type="checkbox" name="enablestatistics" value="on"{{#if formenablestatistics}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                <label for="enable-statistics" class="field-label">{{l10n "Enable \"Statistics\""}}</label>
+                                <div class="field-value">
+                                    <input id="enable-statistics" type="checkbox" name="enablestatistics" value="on"{{#if formenablestatistics}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enablestatistics" class="fdescr"> &mdash; {{l10n "Adds a page with messenger usage reports."}}</label>
+                                <label for="enable-statistics" class="field-description"> &mdash; {{l10n "Adds a page with messenger usage reports."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="enable-tracking" class="flabel">{{l10n "Enable \"Tracking and inviting\""}}</label>
-                                <div class="fvalue">
+                                <label for="enable-tracking" class="field-label">{{l10n "Enable \"Tracking and inviting\""}}</label>
+                                <div class="field-value">
                                     <input id="enable-tracking" type="checkbox" name="enabletracking" value="on"{{#if formenabletracking}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enable-tracking" class="fdescr"> &mdash; {{l10n "Enable tracking of visitors' activity on your site and ability to invite visitors to chat."}}</label>
+                                <label for="enable-tracking" class="field-description"> &mdash; {{l10n "Enable tracking of visitors' activity on your site and ability to invite visitors to chat."}}</label>
                                 <br clear="all"/>
 
                                 <div class="subfield under-tracking">
-                                    <label for="trackoperators" class="flabel">{{l10n "Track operators"}}</label>
-                                    <div class="fvalue">
-                                        <input id="trackoperators" type="checkbox" name="trackoperators" value="on"{{#if formtrackoperators}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="track-operators" class="field-label">{{l10n "Track operators"}}</label>
+                                    <div class="field-value">
+                                        <input id="track-operators" type="checkbox" name="trackoperators" value="on"{{#if formtrackoperators}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="trackoperators" class="fdescr"> &mdash; {{l10n "Allow tracking system to treat operators as normal visitors and add show in the visitors on site list."}}</label>
+                                    <label for="track-operators" class="field-description"> &mdash; {{l10n "Allow tracking system to treat operators as normal visitors and add show in the visitors on site list."}}</label>
                                     <br clear="all"/>
                                 </div>
                             </div>
 
                             <div class="field">
-                                <label for="enableban" class="flabel">{{l10n "Enable feature \"Malicious Visitors\""}}</label>
-                                <div class="fvalue">
-                                    <input id="enableban" type="checkbox" name="enableban" value="on"{{#if formenableban}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                <label for="enable-bans" class="field-label">{{l10n "Enable feature \"Malicious Visitors\""}}</label>
+                                <div class="field-value">
+                                    <input id="enable-bans" type="checkbox" name="enableban" value="on"{{#if formenableban}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enableban" class="fdescr"> &mdash; {{l10n "Using it you can block attacks from specific IPs"}}</label>
+                                <label for="enable-bans" class="field-description"> &mdash; {{l10n "Using it you can block attacks from specific IPs"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="enable-presurvey" class="flabel">{{l10n "Enable \"Pre-chat survey\""}}</label>
-                                <div class="fvalue">
+                                <label for="enable-presurvey" class="field-label">{{l10n "Enable \"Pre-chat survey\""}}</label>
+                                <div class="field-value">
                                     <input id="enable-presurvey" type="checkbox" name="enablepresurvey" value="on"{{#if formenablepresurvey}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enable-presurvey" class="fdescr"> &mdash; {{l10n "Forces the user to fill out a special form to start a chat."}}</label>
+                                <label for="enable-presurvey" class="field-description"> &mdash; {{l10n "Forces the user to fill out a special form to start a chat."}}</label>
                                 <br clear="all"/>
 
                                 <div class="subfield under-survey">
-                                    <label for="surveyaskmail" class="flabel">{{l10n "Ask for visitor's email"}}</label>
-                                    <div class="fvalue">
-                                        <input id="surveyaskmail" type="checkbox" name="surveyaskmail" value="on"{{#if formsurveyaskmail}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="survey-ask-mail" class="field-label">{{l10n "Ask for visitor's email"}}</label>
+                                    <div class="field-value">
+                                        <input id="survey-ask-mail" type="checkbox" name="surveyaskmail" value="on"{{#if formsurveyaskmail}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="surveyaskmail" class="fdescr"> &mdash; {{l10n "Show/hide email field in the survey"}}</label>
+                                    <label for="survey-ask-mail" class="field-description"> &mdash; {{l10n "Show/hide email field in the survey"}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="subfield under-survey">
-                                    <label for="surveyaskgroup" class="flabel">{{l10n "Allows a visitor to choose department/group"}}</label>
-                                    <div class="fvalue">
-                                        <input id="surveyaskgroup" type="checkbox" name="surveyaskgroup" value="on"{{#if formsurveyaskgroup}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="survey-ask-group" class="field-label">{{l10n "Allows a visitor to choose department/group"}}</label>
+                                    <div class="field-value">
+                                        <input id="survey-ask-group" type="checkbox" name="surveyaskgroup" value="on"{{#if formsurveyaskgroup}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="surveyaskgroup" class="fdescr"> &mdash; {{l10n "Show/hide department selection field in the survey"}}</label>
+                                    <label for="survey-ask-group" class="field-description"> &mdash; {{l10n "Show/hide department selection field in the survey"}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="subfield under-survey">
-                                    <label for="surveyaskmessage" class="flabel">{{l10n "Show initial question field"}}</label>
-                                    <div class="fvalue">
-                                        <input id="surveyaskmessage" type="checkbox" name="surveyaskmessage" value="on"{{#if formsurveyaskmessage}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                    <label for="survey-ask-message" class="field-label">{{l10n "Show initial question field"}}</label>
+                                    <div class="field-value">
+                                        <input id="survey-ask-message" type="checkbox" name="surveyaskmessage" value="on"{{#if formsurveyaskmessage}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                     </div>
-                                    <label for="surveyaskmessage" class="fdescr"> &mdash; {{l10n "Show/hide initial question field in the survey"}}</label>
+                                    <label for="survey-ask-message" class="field-description"> &mdash; {{l10n "Show/hide initial question field in the survey"}}</label>
                                     <br clear="all"/>
                                 </div>
                             </div>
 
                             <div class="field">
-                                <label for="enablepopupnotification" class="flabel">{{l10n "Enable \"Popup dialog notification of the new visitor\"."}}</label>
-                                <div class="fvalue">
-                                    <input id="enablepopupnotification" type="checkbox" name="enablepopupnotification" value="on"{{#if formenablepopupnotification}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                <label for="enable-popup-notification" class="field-label">{{l10n "Enable \"Popup dialog notification of the new visitor\"."}}</label>
+                                <div class="field-value">
+                                    <input id="enable-popup-notification" type="checkbox" name="enablepopupnotification" value="on"{{#if formenablepopupnotification}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enablepopupnotification" class="fdescr"> &mdash; {{l10n "Small dialog appears to attract your attention."}}</label>
+                                <label for="enable-popup-notification" class="field-description"> &mdash; {{l10n "Small dialog appears to attract your attention."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="showonlineoperators" class="flabel">{{l10n "Show online operators on \"List of awaiting visitors\" page"}}</label>
-                                <div class="fvalue">
-                                    <input id="showonlineoperators" type="checkbox" name="showonlineoperators" value="on"{{#if formshowonlineoperators}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                <label for="show-online-operators" class="field-label">{{l10n "Show online operators on \"List of awaiting visitors\" page"}}</label>
+                                <div class="field-value">
+                                    <input id="show-online-operators" type="checkbox" name="showonlineoperators" value="on"{{#if formshowonlineoperators}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="showonlineoperators" class="fdescr"> &mdash; {{l10n "Can slow down the update rate of the list"}}</label>
+                                <label for="show-online-operators" class="field-description"> &mdash; {{l10n "Can slow down the update rate of the list"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="enablecaptcha" class="flabel">{{l10n "Force visitor to enter a verification code when leaving message"}}</label>
-                                <div class="fvalue">
-                                    <input id="enablecaptcha" type="checkbox" name="enablecaptcha" value="on"{{#if formenablecaptcha}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
+                                <label for="enable-captcha" class="field-label">{{l10n "Force visitor to enter a verification code when leaving message"}}</label>
+                                <div class="field-value">
+                                    <input id="enable-captcha" type="checkbox" name="enablecaptcha" value="on"{{#if formenablecaptcha}} checked="checked"{{/if}}{{#unless canmodify}} disabled="disabled"{{/unless}}/>
                                 </div>
-                                <label for="enablecaptcha" class="fdescr"> &mdash; {{l10n "Protection against automated spam (captcha)"}}</label>
+                                <label for="enable-captcha" class="field-description"> &mdash; {{l10n "Protection against automated spam (captcha)"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             {{#if canmodify}}
-                                <div class="fbutton">
-                                    <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                                <div class="form-button">
+                                    <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                                 </div>
                             {{/if}}
                         </div>
 
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
 
                 </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/settings_performance.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/settings_performance.handlebars
index c417565a..83f9ec9e 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/settings_performance.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/settings_performance.handlebars
@@ -10,7 +10,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Changes saved"}}</div>
+            <div id="form-message">{{l10n "Changes saved"}}</div>
         {{/if}}
 
         <form name="performance" method="post" action="{{route "settings_performance_save"}}">
@@ -19,132 +19,132 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="onlinetimeout" class="flabel">{{l10n "Operator online time threshold"}}</label>
-                                <div class="fvalue">
-                                    <input id="onlinetimeout" type="text" name="onlinetimeout" size="40" value="{{formonlinetimeout}}" class="formauth"/>
+                                <label for="online-timeout" class="field-label">{{l10n "Operator online time threshold"}}</label>
+                                <div class="field-value">
+                                    <input id="online-timeout" type="text" name="onlinetimeout" size="40" value="{{formonlinetimeout}}" class="field-input"/>
                                 </div>
-                                <label for="onlinetimeout" class="fdescr"> &mdash; {{l10n "Set the number of seconds to show an operator as online. Default is 30 seconds."}}</label>
+                                <label for="online-timeout" class="field-description"> &mdash; {{l10n "Set the number of seconds to show an operator as online. Default is 30 seconds."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="connectiontimeout" class="flabel">{{l10n "Connection timeout for messaging window"}}</label>
-                                <div class="fvalue">
-                                    <input id="connectiontimeout" type="text" name="connectiontimeout" size="40" value="{{formconnectiontimeout}}" class="formauth"/>
+                                <label for="connection-timeout" class="field-label">{{l10n "Connection timeout for messaging window"}}</label>
+                                <div class="field-value">
+                                    <input id="connection-timeout" type="text" name="connectiontimeout" size="40" value="{{formconnectiontimeout}}" class="field-input"/>
                                 </div>
-                                <label for="connectiontimeout" class="fdescr"> &mdash; {{l10n "Set the number of seconds after the last ping to consider the chat window still connected. Default is 30 seconds."}}</label>
+                                <label for="connection-timeout" class="field-description"> &mdash; {{l10n "Set the number of seconds after the last ping to consider the chat window still connected. Default is 30 seconds."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="frequencyoperator" class="flabel">{{l10n "Operator's console refresh time"}}</label>
-                                <div class="fvalue">
-                                    <input id="frequencyoperator" type="text" name="frequencyoperator" size="40" value="{{formfrequencyoperator}}" class="formauth"/>
+                                <label for="operator-frequency" class="field-label">{{l10n "Operator's console refresh time"}}</label>
+                                <div class="field-value">
+                                    <input id="operator-frequency" type="text" name="frequencyoperator" size="40" value="{{formfrequencyoperator}}" class="field-input"/>
                                 </div>
-                                <label for="frequencyoperator" class="fdescr"> &mdash; {{l10n "Specify the poll interval in seconds. Default is 2 seconds."}}</label>
+                                <label for="operator-frequency" class="field-description"> &mdash; {{l10n "Specify the poll interval in seconds. Default is 2 seconds."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="frequencychat" class="flabel">{{l10n "Chat refresh time"}}</label>
-                                <div class="fvalue">
-                                    <input id="frequencychat" type="text" name="frequencychat" size="40" value="{{formfrequencychat}}" class="formauth"/>
+                                <label for="chat-frequency" class="field-label">{{l10n "Chat refresh time"}}</label>
+                                <div class="field-value">
+                                    <input id="chat-frequency" type="text" name="frequencychat" size="40" value="{{formfrequencychat}}" class="field-input"/>
                                 </div>
-                                <label for="frequencychat" class="fdescr"> &mdash; {{l10n "Specify the poll interval in seconds. Default is 2 seconds."}}</label>
+                                <label for="chat-frequency" class="field-description"> &mdash; {{l10n "Specify the poll interval in seconds. Default is 2 seconds."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="onehostconnections" class="flabel">{{l10n "Max number of threads from one address"}}</label>
-                                <div class="fvalue">
-                                    <input id="onehostconnections" type="text" name="onehostconnections" size="40" value="{{formonehostconnections}}" class="formauth"/>
+                                <label for="connections-per-host" class="field-label">{{l10n "Max number of threads from one address"}}</label>
+                                <div class="field-value">
+                                    <input id="connections-per-host" type="text" name="onehostconnections" size="40" value="{{formonehostconnections}}" class="field-input"/>
                                 </div>
-                                <label for="onehostconnections" class="fdescr"> &mdash; {{l10n "0 allows any number of connections"}}</label>
+                                <label for="connections-per-host" class="field-description"> &mdash; {{l10n "0 allows any number of connections"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="threadlifetime" class="flabel">{{l10n "Thread lifetime"}}</label>
-                                <div class="fvalue">
-                                    <input id="threadlifetime" type="text" name="threadlifetime" size="40" value="{{formthreadlifetime}}" class="formauth"/>
+                                <label for="thread-lifetime" class="field-label">{{l10n "Thread lifetime"}}</label>
+                                <div class="field-value">
+                                    <input id="thread-lifetime" type="text" name="threadlifetime" size="40" value="{{formthreadlifetime}}" class="field-input"/>
                                 </div>
-                                <label for="threadlifetime" class="fdescr"> &mdash; {{l10n "Specify the lifetime of the thread after closing the dialog box in seconds. Default is 600 seconds. Set 0 for unlimited thread lifetime."}}</label>
+                                <label for="thread-lifetime" class="field-description"> &mdash; {{l10n "Specify the lifetime of the thread after closing the dialog box in seconds. Default is 600 seconds. Set 0 for unlimited thread lifetime."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="statistics_aggregation_interval" class="flabel">{{l10n "Statistics aggregation interval"}}</label>
-                                <div class="fvalue">
-                                    <input id="statistics_aggregation_interval" type="text" name="statistics_aggregation_interval" size="40" value="{{formstatistics_aggregation_interval}}" class="formauth"/>
+                                <label for="statistics-aggregation-interval" class="field-label">{{l10n "Statistics aggregation interval"}}</label>
+                                <div class="field-value">
+                                    <input id="statistics-aggregation-interval" type="text" name="statistics_aggregation_interval" size="40" value="{{formstatistics_aggregation_interval}}" class="field-input"/>
                                 </div>
-                                <label for="statistics_aggregation_interval" class="fdescr"> &mdash; {{l10n "Specify interval for statistics aggregation in seconds. Default is 86400 (one day)"}}</label>
+                                <label for="statistics-aggregation-interval" class="field-description"> &mdash; {{l10n "Specify interval for statistics aggregation in seconds. Default is 86400 (one day)"}}</label>
                                 <br clear="all"/>
                             </div>
 
                             {{#if enabletracking}}
                                 <div class="field">
-                                    <label for="frequencytracking" class="flabel">{{l10n "Tracking refresh time"}}</label>
-                                    <div class="fvalue">
-                                        <input id="frequencytracking" type="text" name="frequencytracking" size="40" value="{{formfrequencytracking}}" class="formauth"/>
+                                    <label for="tracking-frequency" class="field-label">{{l10n "Tracking refresh time"}}</label>
+                                    <div class="field-value">
+                                        <input id="tracking-frequency" type="text" name="frequencytracking" size="40" value="{{formfrequencytracking}}" class="field-input"/>
                                     </div>
-                                    <label for="frequencytracking" class="fdescr"> &mdash; {{l10n "Specify the poll interval in seconds. Default is 10 seconds."}}</label>
+                                    <label for="tracking-frequency" class="field-description"> &mdash; {{l10n "Specify the poll interval in seconds. Default is 10 seconds."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="visitorslimit" class="flabel">{{l10n "Limit for tracked visitors list"}}</label>
-                                    <div class="fvalue">
-                                        <input id="visitorslimit" type="text" name="visitorslimit" size="40" value="{{formvisitorslimit}}" class="formauth"/>
+                                    <label for="tracked-visitors-limit" class="field-label">{{l10n "Limit for tracked visitors list"}}</label>
+                                    <div class="field-value">
+                                        <input id="tracked-visitors-limit" type="text" name="visitorslimit" size="40" value="{{formvisitorslimit}}" class="field-input"/>
                                     </div>
-                                    <label for="visitorslimit" class="fdescr"> &mdash; {{l10n "Specify the number of items to display in tracked visitors list. Default is 20. Set 0 for all visitors (not recommended)."}}</label>
+                                    <label for="tracked-visitors-limit" class="field-description"> &mdash; {{l10n "Specify the number of items to display in tracked visitors list. Default is 20. Set 0 for all visitors (not recommended)."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="invitationlifetime" class="flabel">{{l10n "Invitation lifetime"}}</label>
-                                    <div class="fvalue">
-                                        <input id="invitationlifetime" type="text" name="invitationlifetime" size="40" value="{{forminvitationlifetime}}" class="formauth"/>
+                                    <label for="invitation-lifetime" class="field-label">{{l10n "Invitation lifetime"}}</label>
+                                    <div class="field-value">
+                                        <input id="invitation-lifetime" type="text" name="invitationlifetime" size="40" value="{{forminvitationlifetime}}" class="field-input"/>
                                     </div>
-                                    <label for="invitationlifetime" class="fdescr"> &mdash; {{l10n "Specify the lifetime of invitation in seconds. Default is 60 seconds."}}</label>
+                                    <label for="invitation-lifetime" class="field-description"> &mdash; {{l10n "Specify the lifetime of invitation in seconds. Default is 60 seconds."}}</label>
                                     <br clear="all"/>
                                 </div>
 
                                 <div class="field">
-                                    <label for="trackinglifetime" class="flabel">{{l10n "Track lifetime"}}</label>
-                                    <div class="fvalue">
-                                        <input id="trackinglifetime" type="text" name="trackinglifetime" size="40" value="{{formtrackinglifetime}}" class="formauth"/>
+                                    <label for="tracking-lifetime" class="field-label">{{l10n "Track lifetime"}}</label>
+                                    <div class="field-value">
+                                        <input id="tracking-lifetime" type="text" name="trackinglifetime" size="40" value="{{formtrackinglifetime}}" class="field-input"/>
                                     </div>
-                                    <label for="trackinglifetime" class="fdescr"> &mdash; {{l10n "Specify the lifetime of old visitor's tracks in seconds. Default is 600 seconds."}}</label>
+                                    <label for="tracking-lifetime" class="field-description"> &mdash; {{l10n "Specify the lifetime of old visitor's tracks in seconds. Default is 600 seconds."}}</label>
                                     <br clear="all"/>
                                 </div>
                             {{/if}}
 
                             <div class="field">
-                                <label for="maxuploadedfilesize" class="flabel">{{l10n "Maximum size of uploaded files"}}</label>
-                                <div class="fvalue">
-                                    <input id="maxuploadedfilesize" type="text" name="maxuploadedfilesize" size="40" value="{{formmaxuploadedfilesize}}" class="formauth"/>
+                                <label for="max-uploaded-file-size" class="field-label">{{l10n "Maximum size of uploaded files"}}</label>
+                                <div class="field-value">
+                                    <input id="max-uploaded-file-size" type="text" name="maxuploadedfilesize" size="40" value="{{formmaxuploadedfilesize}}" class="field-input"/>
                                 </div>
-                                <label for="maxuploadedfilesize" class="fdescr"> &mdash; {{l10n "The upper limit of uploaded files (avatars) in bytes. Default is 100000 bytes."}}</label>
+                                <label for="max-uploaded-file-size" class="field-description"> &mdash; {{l10n "The upper limit of uploaded files (avatars) in bytes. Default is 100000 bytes."}}</label>
                                 <br clear="all"/>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
 
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/statistics.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/statistics.handlebars
index b086cfce..7cb1406a 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/statistics.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/statistics.handlebars
@@ -13,19 +13,19 @@
 
             {{> _tabs}}
 
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
-                    <div class="fieldForm">
+                <div class="form-inwards">
+                    <div class="form-fields">
                         <div class="field">
-                            <div class="flabel">{{l10n "Select dates"}}</div>
-                            <div class="fvaluenodesc">
-                                <div class="searchctrl">
-                                    <label for="startday">{{l10n "From:"}}</label>
-                                    <select id="startday" name="startday">
+                            <div class="field-label">{{l10n "Select dates"}}</div>
+                            <div class="field-value-no-description">
+                                <div class="search-controls">
+                                    <label for="start-day">{{l10n "From:"}}</label>
+                                    <select id="start-day" name="startday">
                                         {{#each availableDays}}
                                             <option value="{{this}}"{{#ifEqual this ../formstartday}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                         {{/each}}
@@ -37,9 +37,9 @@
                                         {{/each}}
                                     </select>
                                 </div>
-                                <div class="searchctrl">
-                                    <label for="endday">{{l10n "Till:"}}</label>
-                                    <select id="endday" name="endday">
+                                <div class="search-controls">
+                                    <label for="end-day">{{l10n "Till:"}}</label>
+                                    <select id="end-day" name="endday">
                                         {{#each availableDays}}
                                             <option value="{{this}}"{{#ifEqual this ../formendday}} selected="selected"{{/ifEqual}}>{{this}}</option>
                                         {{/each}}
@@ -51,8 +51,8 @@
                                         {{/each}}
                                     </select>
                                 </div>
-                                <div id="searchbutton">
-                                    <input type="submit" name="search" class="submit-bg-button login-button" value="{{l10n "Search"}}" />
+                                <div id="search-button">
+                                    <input type="submit" name="search" class="submit-button-background login-button" value="{{l10n "Search"}}" />
                                 </div>
                             </div>
                             <br clear="all"/>
@@ -60,8 +60,8 @@
                     </div>
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </form>
@@ -71,7 +71,7 @@
                 <br/>
                 <br/>
 
-                <div class="tabletitle">
+                <div class="table-title">
                     {{l10n "Usage statistics for each date"}}
                 </div>
 
@@ -142,7 +142,7 @@
                 <br/>
                 <br/>
 
-                <div class="tabletitle">{{l10n "Threads by operator"}}</div>
+                <div class="table-title">{{l10n "Threads by operator"}}</div>
                 <table class="statistics">
                     <thead>
                         <tr>
@@ -188,7 +188,7 @@
                 <br/>
                 <br/>
 
-                <div class="tabletitle">{{l10n "Chat threads by page"}}</div>
+                <div class="table-title">{{l10n "Chat threads by page"}}</div>
                 <table class="statistics">
                     <thead>
                         <tr>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/style_preview.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/style_preview.handlebars
index 187d0cbf..f078d001 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/style_preview.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/style_preview.handlebars
@@ -11,16 +11,16 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="preview" class="flabel">{{l10n "Choose style"}}</label>
-                                <div class="fvaluenodesc">
+                                <label for="preview" class="field-label">{{l10n "Choose style"}}</label>
+                                <div class="field-value-no-description">
                                     <select id="preview" name="preview" onchange="this.form.submit();">
                                         {{#each availablePreviews}}
                                             <option value="{{this}}"{{#ifEqual this ../formpreview}} selected="selected"{{/ifEqual}}>{{this}}</option>
@@ -30,8 +30,8 @@
                             </div>
                             {{#each screenshotsList}}
                                 <div class="field">
-                                    <div class="flabel">{{description}}</div>
-                                    <div class="fvalueframe">
+                                    <div class="field-label">{{description}}</div>
+                                    <div class="field-iframe-value">
                                         <img class="screenshot" alt="{{name}}" src="{{file}}" />
                                     </div>
                                 </div>
@@ -39,8 +39,8 @@
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/tracked.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/tracked.handlebars
index b9644056..85932944 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/tracked.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/tracked.handlebars
@@ -4,13 +4,13 @@
 
         <br/><br/>
 
-        <div class="logpane">
+        <div class="log-pane">
             <div class="header">
-                <div class="wlabel">
+                <div class="param-label">
                     {{l10n "Visitor came from"}}:
                 </div>
 
-                <div class="wvalue">
+                <div class="param-value">
                     {{#if entry}}
                         <a href="{{entry}}">{{entry}}</a>
                     {{else}}
@@ -32,7 +32,7 @@
                     <tbody>
                         {{#each history}}
                             <tr>
-                                <td class="notlast">{{date}}</td>
+                                <td class="not-last">{{date}}</td>
                                 <td><a href="{{link}}">{{link}}</a></td>
                             </tr>
                         {{/each}}
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/translation_edit.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/translation_edit.handlebars
index b2aaeefb..f7107b9a 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/translation_edit.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/translation_edit.handlebars
@@ -15,35 +15,35 @@
             <form name="translateForm" method="post" action="{{route "translation_edit_save" string_id=key}}">
                 {{csrfTokenInput}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="original" class="flabel">{{l10n "Source string"}}</label>
-                                <div class="fvaluenodesc">
+                                <label for="original" class="field-label">{{l10n "Source string"}}</label>
+                                <div class="field-value-no-description">
                                     <textarea id="original" name="original" disabled="disabled" cols="20" rows="5" class="wide">{{formoriginal}}</textarea>
                                 </div>
                             </div>
 
                             <div class="field">
-                                <label for="translation" class="flabel">{{localeName}}</label>
-                                <div class="fvaluenodesc">
+                                <label for="translation" class="field-label">{{localeName}}</label>
+                                <div class="field-value-no-description">
                                     <textarea id="translation" name="translation" cols="20" rows="5" class="wide">{{formtranslation}}</textarea>
                                 </div>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Save"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Save"}}"/>
                             </div>
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </form>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/translation_export.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/translation_export.handlebars
index 4ed70eac..824ca9b5 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/translation_export.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/translation_export.handlebars
@@ -15,13 +15,13 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             {{l10n "For language:"}}<br/>
                             <select name="target">
                                 {{#each localesList}}
@@ -30,15 +30,15 @@
                             </select>
                         </div>
 
-                        <div class="fieldForm">
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Download"}}"/>
+                        <div class="form-fields">
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Download"}}"/>
                             </div>
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/translation_import.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/translation_import.handlebars
index 5aadf8b2..a7c7aa4a 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/translation_import.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/translation_import.handlebars
@@ -10,7 +10,7 @@
         {{> _errors}}
 
         {{#if stored}}
-            <div id="formmessage">{{l10n "Translation imported"}}</div>
+            <div id="form-message">{{l10n "Translation imported"}}</div>
         {{/if}}
 
         <form  method="post" action="{{route "translation_import_process"}}" enctype="multipart/form-data">
@@ -19,13 +19,13 @@
             <div>
                 {{> _tabs}}
 
-                <div class="mform">
-                    <div class="formtop">
-                        <div class="formtopi"></div>
+                <div class="form-wrapper">
+                    <div class="form-header">
+                        <div class="form-header-inwards"></div>
                     </div>
 
-                    <div class="forminner">
-                        <div class="fieldForm">
+                    <div class="form-inwards">
+                        <div class="form-fields">
                             {{l10n "For language:"}}<br/>
                             <select name="target">
                                 {{#each localesList}}
@@ -34,35 +34,35 @@
                             </select>
                         </div>
 
-                        <div class="fieldForm">
+                        <div class="form-fields">
                             <div class="field">
-                                <label for="override" class="flabel">{{l10n "Override existing translations"}}</label>
-                                <div class="fvalue">
+                                <label for="override" class="field-label">{{l10n "Override existing translations"}}</label>
+                                <div class="field-value">
                                     <input id="override" type="checkbox" name="override" value="on"{{#if formoverride}} checked="checked"{{/if}}/>
                                 </div>
-                                <label for="override" class="fdescr"> &mdash; {{l10n "Replaces translated strings in the database with values from the imported file."}}</label>
+                                <label for="override" class="field-description"> &mdash; {{l10n "Replaces translated strings in the database with values from the imported file."}}</label>
                                 <br clear="all"/>
                             </div>
 
                             <div class="field">
-                                <label for="translation_file" class="flabel">
+                                <label for="translation-file" class="field-label">
                                     {{l10n "Upload translation"}}<span class="required">*</span>
                                 </label>
-                                <div class="fvalue">
-                                    <input id="translation_file" type="file" name="translation_file" size="40" value="{{formtranslationFile}}" class="formauth"/>
+                                <div class="field-value">
+                                    <input id="translation-file" type="file" name="translation_file" size="40" value="{{formtranslationFile}}" class="field-input"/>
                                 </div>
-                                <label for="translation_file" class="fdescr"> &mdash; {{l10n "Choose the translation file to upload."}}</label>
+                                <label for="translation-file" class="field-description"> &mdash; {{l10n "Choose the translation file to upload."}}</label>
                                 <br clear="all"/>
                             </div>
 
-                            <div class="fbutton">
-                                <input type="submit" name="save" class="submit-bg-button save-button" value="{{l10n "Upload"}}"/>
+                            <div class="form-button">
+                                <input type="submit" name="save" class="submit-button-background save-button" value="{{l10n "Upload"}}"/>
                             </div>
                         </div>
                     </div>
 
-                    <div class="formbottom">
-                        <div class="formbottomi"></div>
+                    <div class="form-footer">
+                        <div class="form-footer-inwards"></div>
                     </div>
                 </div>
             </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/translations.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/translations.handlebars
index 71e7c621..bc89d8f3 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/translations.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/translations.handlebars
@@ -10,13 +10,13 @@
         <form name="translateForm" method="get" action="{{route "translations"}}">
             {{> _tabs}}
 
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
-                    <div class="packedFormField">
+                <div class="form-inwards">
+                    <div class="packed-form-fields">
                         {{l10n "For language:"}}<br/>
                         <select name="target" onchange="this.form.submit();">
                             {{#each availableLocales}}
@@ -25,7 +25,7 @@
                         </select>
                     </div>
 
-                    <div class="packedFormField">
+                    <div class="packed-form-fields">
                         {{l10n "Sort by:"}}<br/>
                         <select name="sort" onchange="this.form.submit();">
                             {{#each availableOrders}}
@@ -38,8 +38,8 @@
 
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </form>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/update_intro.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/update_intro.handlebars
index 589a4355..62b3d3ea 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/update_intro.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/update_intro.handlebars
@@ -5,12 +5,12 @@
         <br/>
         <br/>
         <div id="install">
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
+                <div class="form-inwards">
                     <ol>
                         <li>{{l10n "Backup the database"}}</li>
                         <li>{{l10n "Backup the code"}}</li>
@@ -20,8 +20,8 @@
                     </ol>
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/update_progress.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/update_progress.handlebars
index a9cfb07c..12eea514 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/update_progress.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/update_progress.handlebars
@@ -10,12 +10,12 @@
         <br/>
 
         <div id="install">
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
+                <div class="form-inwards">
                     {{#ifAny done errors}}
                         {{l10n "Progress:"}}
                         <ul>
@@ -37,8 +37,8 @@
                     {{/if}}
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/updates.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/updates.handlebars
index ab0ce5b8..48a5da55 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/updates.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/updates.handlebars
@@ -8,12 +8,12 @@
         <br />
 
         <div>
-            <div class="mform">
-                <div class="formtop">
-                    <div class="formtopi"></div>
+            <div class="form-wrapper">
+                <div class="form-header">
+                    <div class="form-header-inwards"></div>
                 </div>
 
-                <div class="forminner">
+                <div class="form-inwards">
                     {{l10n "News:"}}<br/>
                     <div id="news"></div>
 
@@ -39,8 +39,8 @@
 
                 </div>
 
-                <div class="formbottom">
-                    <div class="formbottomi"></div>
+                <div class="form-footer">
+                    <div class="form-footer-inwards"></div>
                 </div>
             </div>
         </div>
diff --git a/src/mibew/styles/pages/default/templates_src/server_side/users.handlebars b/src/mibew/styles/pages/default/templates_src/server_side/users.handlebars
index c1a54f99..8fe8669a 100644
--- a/src/mibew/styles/pages/default/templates_src/server_side/users.handlebars
+++ b/src/mibew/styles/pages/default/templates_src/server_side/users.handlebars
@@ -15,7 +15,7 @@
         <div id="threads-region"></div>
 
         {{#if showvisitors}}
-            <div class="tabletitle">{{l10n "Visitors on site"}}</div>
+            <div class="table-title">{{l10n "Visitors on site"}}</div>
             {{l10n "The table below represents a list of visitors ready to chat on your site."}}
             <br/>
             {{l10n "To invite the visitor to chat click on his/her name in the list."}}