From cb61fa7d4e8795c983186f7f5527e230350e7148 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hn@stylite.de>
Date: Thu, 4 Feb 2016 16:31:34 +0000
Subject: [PATCH] Mobile theme W.I.P.: - Fix couple of issues regarding iOS and
 Safari - Fix not fullscreen view mode

---
 phpgwapi/js/jsapi/app_base.js |   4 +-
 pixelegg/css/mobile.css       | 272 ++++------
 pixelegg/css/mobile.less      | 986 ++++++++++++++++------------------
 pixelegg/css/pixelegg.css     |   8 +-
 pixelegg/head_mobile.tpl      |   3 +-
 5 files changed, 566 insertions(+), 707 deletions(-)

diff --git a/phpgwapi/js/jsapi/app_base.js b/phpgwapi/js/jsapi/app_base.js
index b632e3b723..004a2f3f7e 100644
--- a/phpgwapi/js/jsapi/app_base.js
+++ b/phpgwapi/js/jsapi/app_base.js
@@ -421,9 +421,11 @@ var AppJS = Class.extend(
 					height:"100%",
 					background:"white",
 					display:'block',
-					position:'absolute',
+					position:'fixed',
 					top:0,
 					left:0,
+					bottom:0,
+					right:0,
 					overflow:'auto',
 					"padding-top":'60px'})
 				.attr('id','popupMainDiv')
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 53ee7df713..bf81cd661f 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -6572,66 +6572,6 @@ span.egw_tutorial_title {
     /*BOF close/back button styling*/
     /*EOF close/back button styling*/
   }
-  body .pt-page-moveToLeft {
-    -webkit-animation: moveToLeft .6s ease both;
-    animation: moveToLeft .6s ease both;
-  }
-  body .pt-page-moveFromLeft {
-    -webkit-animation: moveFromLeft .6s ease both;
-    animation: moveFromLeft .6s ease both;
-  }
-  body .pt-page-moveToRight {
-    -webkit-animation: moveToRight .6s ease both;
-    animation: moveToRight .6s ease both;
-  }
-  body .pt-page-moveFromRight {
-    -webkit-animation: moveFromRight .6s ease both;
-    animation: moveFromRight .6s ease both;
-  }
-  @-webkit-keyframes moveToLeft {
-    to {
-      -webkit-transform: translateX(-100%);
-    }
-  }
-  @keyframes moveToLeft {
-    to {
-      -webkit-transform: translateX(-100%);
-      transform: translateX(-100%);
-    }
-  }
-  @-webkit-keyframes moveFromLeft {
-    from {
-      -webkit-transform: translateX(-100%);
-    }
-  }
-  @keyframes moveFromLeft {
-    from {
-      -webkit-transform: translateX(-100%);
-      transform: translateX(-100%);
-    }
-  }
-  @-webkit-keyframes moveToRight {
-    to {
-      -webkit-transform: translateX(100%);
-    }
-  }
-  @keyframes moveToRight {
-    to {
-      -webkit-transform: translateX(100%);
-      transform: translateX(100%);
-    }
-  }
-  @-webkit-keyframes moveFromRight {
-    from {
-      -webkit-transform: translateX(100%);
-    }
-  }
-  @keyframes moveFromRight {
-    from {
-      -webkit-transform: translateX(100%);
-      transform: translateX(100%);
-    }
-  }
   body div.egw_fw_mobile_iOS_popup_appHeader {
     padding-top: 15px;
   }
@@ -6696,13 +6636,13 @@ span.egw_tutorial_title {
     padding-left: 5px;
     font-weight: bold;
   }
-  #egw_fw_basecontainer {
+  body #egw_fw_basecontainer {
     background: white;
   }
-  #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
+  body #egw_fw_basecontainer #egw_fw_main #egw_fw_tabs {
     margin-top: -3px;
   }
-  #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header {
+  body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header {
     max-height: 60px;
     width: 60%;
     margin-left: 0;
@@ -6714,7 +6654,7 @@ span.egw_tutorial_title {
     top: 15px;
     height: 50px;
   }
-  #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header span {
+  body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header span {
     margin: 0;
     overflow: visible;
     height: 38px;
@@ -6723,19 +6663,19 @@ span.egw_tutorial_title {
     border: none;
     border-radius: 10px;
   }
-  #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header span img {
+  body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header span img {
     height: 32px !important;
     width: 32px !important;
   }
-  #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header span h1 {
+  body #egw_fw_basecontainer #egw_fw_top_toolbar div.egw_fw_ui_tabs_header span h1 {
     display: none;
   }
-  #egw_fw_basecontainer .egw_fw_top_toolbar > div:hover {
+  body #egw_fw_basecontainer .egw_fw_top_toolbar > div:hover {
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
   }
-  #egw_fw_basecontainer div#egw_fw_menu {
+  body #egw_fw_basecontainer div#egw_fw_menu {
     background-image: url(../images/topmenu_items/mobile/menu_active.png);
     cursor: pointer;
     position: fixed;
@@ -6747,20 +6687,20 @@ span.egw_tutorial_title {
     background-repeat: no-repeat;
     z-index: 999;
   }
-  #egw_fw_basecontainer div#egw_fw_menu:hover {
+  body #egw_fw_basecontainer div#egw_fw_menu:hover {
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
   }
-  #egw_fw_basecontainer div#egw_fw_menu:focus {
+  body #egw_fw_basecontainer div#egw_fw_menu:focus {
     outline: none;
   }
-  #egw_fw_basecontainer div#egw_fw_menu:active {
+  body #egw_fw_basecontainer div#egw_fw_menu:active {
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items {
     width: 280px;
     display: inline;
     float: left;
@@ -6768,24 +6708,24 @@ span.egw_tutorial_title {
     padding-left: 55px;
     padding-top: 13px;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul {
     display: inline;
     padding: 0;
     margin: 0;
     list-style-type: none;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul li {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul li {
     display: -webkit-inline-box;
     display: -moz-inline-box;
     display: inline-block;
     padding: 2px;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul li:hover {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul li:hover {
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_logout:before {
     content: "";
     background-image: url(../images/logout.png);
     background-repeat: no-repeat;
@@ -6795,7 +6735,7 @@ span.egw_tutorial_title {
     display: inline-block;
     background-position: center;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_home:before {
     content: " ";
     background-image: url(../images/topmenu_items/mobile/home.png);
     background-repeat: no-repeat;
@@ -6805,7 +6745,7 @@ span.egw_tutorial_title {
     /*display:inline-block;*/
     display: none;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_prefs:before {
     content: "";
     background-image: url(../images/topmenu_items/mobile/setup.png);
     background-repeat: no-repeat;
@@ -6815,7 +6755,7 @@ span.egw_tutorial_title {
     display: inline-block;
     background-position: center;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_acl:before {
     content: "";
     background-repeat: no-repeat;
     width: 32px;
@@ -6825,7 +6765,7 @@ span.egw_tutorial_title {
     display: inline-block;
     background-position: center;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_cats:before {
     background-image: url(../images/topmenu_items/mobile/category.png);
     content: "";
     background-repeat: no-repeat;
@@ -6835,7 +6775,7 @@ span.egw_tutorial_title {
     display: inline-block;
     background-position: center;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_password:before {
     background-image: url(../images/topmenu_items/mobile/password.png);
     content: "";
     background-repeat: no-repeat;
@@ -6845,7 +6785,7 @@ span.egw_tutorial_title {
     display: inline-block;
     background-position: center;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_manual:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_manual:before {
     background-image: url(../images/topmenu_items/mobile/help.png);
     content: "";
     background-repeat: no-repeat;
@@ -6854,7 +6794,7 @@ span.egw_tutorial_title {
     background-size: 24px 24px;
     display: inline-block;
   }
-  #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search:before {
+  body #egw_fw_basecontainer div#egw_fw_topmenu_items ul a#topmenu_search:before {
     background-image: url(../images/topmenu_items/mobile/search.png);
     content: "";
     background-repeat: no-repeat;
@@ -6864,7 +6804,7 @@ span.egw_tutorial_title {
     display: inline-block;
     background-position: center;
   }
-  .egw_fw_ui_tabs_header {
+  body .egw_fw_ui_tabs_header {
     margin: 0px 0 0 0;
     padding: 1px 1px 0px 0px;
     background-position: bottom;
@@ -6873,21 +6813,21 @@ span.egw_tutorial_title {
     height: 34px;
     /*Active Tabs*/
   }
-  .egw_fw_ui_tabs_header h1 {
+  body .egw_fw_ui_tabs_header h1 {
     display: inline;
     width: 100%;
     text-align: center;
     -webkit-margin-before: 0;
     -webkit-margin-after: 0;
   }
-  .egw_fw_ui_tabs_header img {
+  body .egw_fw_ui_tabs_header img {
     text-align: center;
     float: none;
     margin: 0 auto;
     width: 32px;
     height: 32px;
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header {
     padding-left: 0;
     position: relative;
     background: transparent;
@@ -6902,22 +6842,22 @@ span.egw_tutorial_title {
     height: 38px;
     width: 97%;
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:hover {
     background-color: none !important;
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:active {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header:active {
     -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
     -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header h1 {
     font-size: 14.3px;
     line-height: 1em;
     margin: 0 15px 2px 2px;
     vertical-align: super;
     padding-left: 25px;
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header img.egw_fw_ui_tab_icon {
     display: inline-block;
     width: 32px;
     height: 32px;
@@ -6933,7 +6873,7 @@ span.egw_tutorial_title {
     filter: gray;
     /* IE 6-9 */
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header object {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header object {
     width: 32px;
     height: 32px;
     margin: 8px 1px 0 5px;
@@ -6951,15 +6891,15 @@ span.egw_tutorial_title {
     border-top-left-radius: 5px;
     /*.background-clip(padding-box);*/
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active {
     border-width: 1px 1px 0px 1px !important;
     background-color: #ffd140;
     /*Active object*/
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active:hover {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active:hover {
     background-color: #ffd140;
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active img.egw_fw_ui_tab_icon {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active img.egw_fw_ui_tab_icon {
     display: inline-block;
     width: 32px;
     height: 32px;
@@ -6968,7 +6908,7 @@ span.egw_tutorial_title {
     -moz-filter: contrast(2);
     -o-filter: contrast(2);
   }
-  .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active object {
+  body .egw_fw_ui_tabs_header .egw_fw_ui_tab_header_active object {
     width: 32px;
     height: 32px;
     margin: 0px 1px 0 5px;
@@ -6987,11 +6927,11 @@ span.egw_tutorial_title {
     /*.background-clip(padding-box);*/
     background-color: #b4b4b4;
   }
-  #egw_fw_sidebar {
+  body #egw_fw_sidebar {
     top: 76px;
     bottom: 5px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu {
+  body #egw_fw_sidebar #egw_fw_sidemenu {
     position: absolute;
     top: 0px;
     bottom: 4px;
@@ -7002,22 +6942,30 @@ span.egw_tutorial_title {
     padding-top: 0.6em;
     font-size: 0.9em;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_apps .egw_fw_ui_sidemenu_entry_header {
+    margin: 0px 5px 0px 2px;
+    padding: 4px 10px 0 16px;
+    overflow: visible;
+    height: 38px;
+    border: none;
     display: block;
-    margin: 0 0;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header:hover {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_apps .egw_fw_ui_sidemenu_entry_header img {
+    height: 32px !important;
+    width: 32px !important;
+  }
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_apps .egw_fw_ui_sidemenu_entry_header:hover {
     background-color: #d9d9d9;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
+    -webkit-border-radius: 0px;
+    -moz-border-radius: 0px;
+    border-radius: 0px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header:active {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_apps .egw_fw_ui_sidemenu_entry_header:active {
     -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
     box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header h1 {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_apps .egw_fw_ui_sidemenu_entry_header h1 {
     margin: 0 0 10px 0;
     padding-top: 0.31em;
     padding-left: 3em;
@@ -7025,12 +6973,12 @@ span.egw_tutorial_title {
     font-size: 14.3px;
     line-height: 17px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header object {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_apps .egw_fw_ui_sidemenu_entry_header object {
     background-color: #ffffff;
     width: 24px;
     height: 24px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active {
     cursor: pointer;
     background-image: url("../images/clear.png");
     background-position: 95% -3000px;
@@ -7044,18 +6992,18 @@ span.egw_tutorial_title {
     border-bottom: none;
     height: 33px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active img {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active img {
     padding-left: 9px;
     padding-top: 6px;
     height: 18px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active h1 {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active h1 {
     text-transform: uppercase;
     font-size: 1.4em;
     color: #000000;
     padding-top: .8em;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:hover {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:hover {
     -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
@@ -7073,7 +7021,7 @@ span.egw_tutorial_title {
     border-top-left-radius: 27px;
     /*.background-clip(padding-box);*/
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:active {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:active {
     -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
     box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
@@ -7091,7 +7039,7 @@ span.egw_tutorial_title {
     border-top-left-radius: 27px;
     /*.background-clip(padding-box);*/
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:focus {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:focus {
     background-image: url("../images/ajax-loader.gif");
     background-repeat: no-repeat;
     background-position: 90% 50%;
@@ -7100,7 +7048,7 @@ span.egw_tutorial_title {
     box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
     background-color: #bfbfbf;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active object {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active object {
     margin-left: 14px;
     margin-top: 8px;
     -webkit-border-radius: 3px;
@@ -7109,10 +7057,10 @@ span.egw_tutorial_title {
     width: 16px;
     height: 16px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active .egw_fw_ui_ajaxloader {
     margin-top: -26px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content {
     display: block;
     background-image: none;
     -webkit-border-top-right-radius: 0;
@@ -7134,16 +7082,16 @@ span.egw_tutorial_title {
     margin: 0 0 2em 0;
     /*######################*/
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content:nth-last-of-type(-n+3) {
     padding: 5px 0.3em 1.5em 0.3em;
     margin: 0 0 10px 0;
     background-color: #b3b3b3 !important;
     border-color: #b4b4b4;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content > div {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content > div {
     background-color: #b3b3b3 !important;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category {
     margin: 4px 5px 5px 5px;
     padding: 0.5em 1em 0.5em 0;
     cursor: pointer;
@@ -7163,7 +7111,7 @@ span.egw_tutorial_title {
     border-top-left-radius: 3px;
     /*.background-clip(padding-box);*/
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category h1 {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category h1 {
     margin: 5px 0px 3px 5px;
     padding: 0px 0px 0px 15px;
     line-height: 1em;
@@ -7172,17 +7120,17 @@ span.egw_tutorial_title {
     background-repeat: no-repeat;
     background-position: left center;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category div.egw_fw_ui_category:nth-last-of-type(-n+3) img.egw_fw_ui_sidemenu_listitem_icon {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category div.egw_fw_ui_category:nth-last-of-type(-n+3) img.egw_fw_ui_sidemenu_listitem_icon {
     display: block;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content div.egw_fw_ui_category_content {
     border-radius: 0;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category:hover {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category:hover {
     background-color: #999999;
     padding: 0.5em 1em 0.5em 0;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active {
     border-bottom-width: 0px;
     margin-top: 4px;
     background-color: #0c5da5;
@@ -7201,19 +7149,19 @@ span.egw_tutorial_title {
     border-top-left-radius: 3px !important;
     /*.background-clip(padding-box);*/
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 {
     background-image: url(../images/arrow_down.png);
     line-height: 1em;
     font-size: 12px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 a {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 a {
     color: #FFF;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 a img {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 a img {
     width: 16px;
     height: 16px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 a:hover {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active h1 a:hover {
     padding: 5px 30px 5px 0px;
     width: 200px;
     background-color: #f0f0f0;
@@ -7223,21 +7171,21 @@ span.egw_tutorial_title {
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
     background-color: inherit;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active:hover {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active:hover {
     background-color: #408dd2;
     -webkit-transition: all 0.2s ease-out;
     -moz-transition: all 0.2s ease-out;
     -o-transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content_bottom {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content_bottom {
     border-width: 0px 1px 1px 1px;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_bottom {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_bottom {
     border-width: 0px;
     border-color: #ffffff;
   }
-  #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_icon {
+  body #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_icon {
     display: inline-block;
     height: 24px;
     padding-left: 0;
@@ -7255,57 +7203,48 @@ span.egw_tutorial_title {
     filter: gray;
     /* IE 6-9 */
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu {
+  body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu {
     width: 82px !important;
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content,
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header {
+  body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_content {
     display: none !important;
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header {
-    height: 38px;
-    width: 54px;
-    text-overflow: ellipsis;
-    border-radius: 0px 15px 15px 0px;
+  body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active:hover {
+    border-radius: 0;
+    background-image: url("../images/ajax-loader.gif");
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header img {
-    src: url(../images/topmenu_items/setup.png) !important;
-    height: 32px !important;
-    width: 32px !important;
+  body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active img {
+    padding: 0;
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_tabs_header span {
+  body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header {
     margin: 0px 5px 0px 2px;
+    padding: 4px 10px 0 16px;
     overflow: visible;
     height: 38px;
     width: 50px;
     border: none;
-    border-radius: 10px;
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_tabs_header span img {
+  body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header img {
     height: 32px !important;
     width: 32px !important;
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_tabs_header span h1 {
+  body .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header h1 {
     display: none;
   }
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu #egw_fw_splitter,
-  .sidebar-toggle #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_sidemenu_entry_header_active h1 {
-    display: none;
-  }
-  .sidebar-toggle #egw_fw_topmenu_items {
+  body .sidebar-toggle #egw_fw_topmenu_items {
     display: none !important;
   }
-  #egw_fw_footer {
+  body #egw_fw_footer {
     display: none;
   }
-  .egw_fw_ui_app_header_container {
+  body .egw_fw_ui_app_header_container {
     display: none;
   }
-  .egw_fw_content_browser_div {
+  body .egw_fw_content_browser_div {
     padding: 0;
     background-color: white;
   }
-  .egw_fw_mobile_popup_container {
+  body .egw_fw_mobile_popup_container {
     width: 100%;
     height: 100%;
     position: fixed;
@@ -7314,12 +7253,14 @@ span.egw_tutorial_title {
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
   }
-  .egw_fw_mobile_popup_container .egw_fw_mobile_popupFrame {
+  body .egw_fw_mobile_popup_container .egw_fw_mobile_popupFrame {
     width: 100%;
     height: 100%;
     visibility: hidden;
+    display: block;
+    background: white;
   }
-  .dialogHeadbar {
+  body .dialogHeadbar {
     height: 50px;
     box-shadow: 0px 4px 5px 2px silver;
     position: fixed;
@@ -7329,20 +7270,20 @@ span.egw_tutorial_title {
     right: 0;
     z-index: 1;
   }
-  .dialogHeadbar .et2_button_with_image,
-  .dialogHeadbar .et2_button_text {
+  body .dialogHeadbar .et2_button_with_image,
+  body .dialogHeadbar .et2_button_text {
     height: 46px;
     margin: 1px;
     margin-left: 3px;
   }
-  .dialogHeadbar td {
+  body .dialogHeadbar td {
     margin-left: 70px;
     display: block;
   }
-  #mail-display {
+  body #mail-display {
     min-height: initial !important;
   }
-  #mail-display .mailDisplayContainer {
+  body #mail-display .mailDisplayContainer {
     top: 140px;
   }
 }
@@ -8030,6 +7971,9 @@ span.egw_tutorial_title {
   body .et2_taglist .ms-sel-ctn {
     background: white;
   }
+  body .et2_mobile_view {
+    display: block;
+  }
   body .et2_mobile_view .et2_mobile-view-container {
     padding: 0 14px 0 7px;
   }
diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less
index 80971aa60c..18861f755d 100644
--- a/pixelegg/css/mobile.less
+++ b/pixelegg/css/mobile.less
@@ -38,58 +38,6 @@
 @media all {
 	body{
 		
-		
-		.pt-page-moveToLeft {
-			-webkit-animation: moveToLeft .6s ease both;
-			animation: moveToLeft .6s ease both;
-		}
-
-		.pt-page-moveFromLeft {
-			-webkit-animation: moveFromLeft .6s ease both;
-			animation: moveFromLeft .6s ease both;
-		}
-
-		.pt-page-moveToRight {
-			-webkit-animation: moveToRight .6s ease both;
-			animation: moveToRight .6s ease both;
-		}
-
-		.pt-page-moveFromRight {
-			-webkit-animation: moveFromRight .6s ease both;
-			animation: moveFromRight .6s ease both;
-		}
-		@-webkit-keyframes moveToLeft {
-			from { }
-			to { -webkit-transform: translateX(-100%); }
-		}
-		@keyframes moveToLeft {
-			from { }
-			to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
-		}
-
-		@-webkit-keyframes moveFromLeft {
-			from { -webkit-transform: translateX(-100%); }
-		}
-		@keyframes moveFromLeft {
-			from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
-		}
-
-		@-webkit-keyframes moveToRight { 
-			from { }
-			to { -webkit-transform: translateX(100%); }
-		}
-		@keyframes moveToRight { 
-			from { }
-			to { -webkit-transform: translateX(100%); transform: translateX(100%); }
-		}
-
-		@-webkit-keyframes moveFromRight {
-			from { -webkit-transform: translateX(100%); }
-		}
-		@keyframes moveFromRight {
-			from { -webkit-transform: translateX(100%); transform: translateX(100%); }
-		}
-		
 		background-color: transparent;
 		// iOS appHeader class
 		div.egw_fw_mobile_iOS_popup_appHeader{
@@ -172,380 +120,377 @@
 			background-image: none;
 		}
 		/*EOF close/back button styling*/
-	}
-	#egw_fw_basecontainer{
-		background:white;
 
-		#egw_fw_main {
-			#egw_fw_tabs {
-				margin-top:-3px;
+		#egw_fw_basecontainer{
+			background:white;
+
+			#egw_fw_main {
+				#egw_fw_tabs {
+					margin-top:-3px;
+				}
 			}
-		}
-		//###################
-		//#					#
-		//#		TOOLBAR		#
-		//#					#
-		//###################
-		#egw_fw_top_toolbar{
-			
-			div.egw_fw_ui_tabs_header{
-				max-height: 60px;
-				width: 60%;
-				margin-left: 0;
-				overflow-x: scroll;
-				position: initial;
-				white-space: nowrap;
-				position: fixed;
-				left: 83%;
-				top: 15px;
-				height: 50px;
-				span{
-					margin:0;
-					overflow: visible;
-					height:38px;
-					width:50px;
-					border-width: 1px 1px 1px 1px;
-					border:none;
-					border-radius: 10px;
+			//###################
+			//#					#
+			//#		TOOLBAR		#
+			//#					#
+			//###################
+			#egw_fw_top_toolbar{
 
-					img{
-						height:32px !important;
-						width:32px !important;
-					}
-					h1{
-						display:none;
+				div.egw_fw_ui_tabs_header{
+					max-height: 60px;
+					width: 60%;
+					margin-left: 0;
+					overflow-x: scroll;
+					position: initial;
+					white-space: nowrap;
+					position: fixed;
+					left: 83%;
+					top: 15px;
+					height: 50px;
+					span{
+						margin:0;
+						overflow: visible;
+						height:38px;
+						width:50px;
+						border-width: 1px 1px 1px 1px;
+						border:none;
+						border-radius: 10px;
+
+						img{
+							height:32px !important;
+							width:32px !important;
+						}
+						h1{
+							display:none;
+						}
 					}
 				}
 			}
-		}
 
-		.egw_fw_top_toolbar>div:hover{
-			-webkit-box-shadow: none;
-			-moz-box-shadow: none;
-			box-shadow: none;
-		}
-
-
-		//FW Menu
-		div#egw_fw_menu{
-			background-image: url(../images/topmenu_items/mobile/menu_active.png);
-			cursor: pointer;
-			position: fixed;
-			left: 13px;
-			top: 13px;
-			width: 65px;
-			height: 50px;
-			background-size: 32px 32px;
-			background-repeat: no-repeat;
-			z-index: 999;
-			&:hover {
+			.egw_fw_top_toolbar>div:hover{
 				-webkit-box-shadow: none;
 				-moz-box-shadow: none;
 				box-shadow: none;
 			}
-			&:focus {
-				outline: none;
-			}
-		}
-		div#egw_fw_menu:active {
-			-webkit-box-shadow: none;
-			-moz-box-shadow: none;
-			box-shadow: none;
-		}
-		div#egw_fw_topmenu_items{
-			width: 280px;
-			display: inline;
-			float: left;
-			position: fixed;
-			padding-left: 55px;
-			padding-top: 13px;
-			ul{
-				display:inline;
-				padding:0;
-				margin:0;
-				list-style-type: none;
-				li{
-					display: -webkit-inline-box;
-					display: -moz-inline-box;
-					display: inline-block;
-					padding:2px;
-					&:hover {
-						-webkit-box-shadow: none;
-						-moz-box-shadow: none;
-						box-shadow: none;
-					}
-				}
-				a#topmenu_logout{
-					&:before {
-						content: "";
-						background-image: url(../images/logout.png);
-						background-repeat: no-repeat;
-						width: 32px;
-						height: 32px;
-						background-size: 24px 24px;
-						display: inline-block;
-						background-position: center;
-					}
-				}
-				a#topmenu_home:before {
-					content: " ";
-					background-image: url(../images/topmenu_items/mobile/home.png);
-					background-repeat: no-repeat;
-					width: 32px;
-					height: 32px;
-					background-size: 24px 24px;
-					/*display:inline-block;*/
-					display:none;
-				}
-				a#topmenu_prefs {
-					&:before {
-						content: "";
-						background-image: url(../images/topmenu_items/mobile/setup.png);
-						background-repeat: no-repeat;
-						width: 32px;
-						height: 32px;
-						background-size: 24px 24px;
-						display: inline-block;
-						background-position: center;
-					}
-				}
 
-				a#topmenu_acl:before {
-					content: "";
-					background-repeat: no-repeat;
-					width: 32px;
-					height: 32px;
-					background-size: 24px 24px;
-					background-image: url(../images/topmenu_items/mobile/access.png);
-					display: inline-block;
-					background-position: center;
-				}
 
-				a#topmenu_cats:before {
-					background-image: url(../images/topmenu_items/mobile/category.png);
-					content: "";
-					background-repeat: no-repeat;
-					width: 32px;
-					height: 32px;
-					background-size: 24px 24px;
-					display: inline-block;
-					background-position: center;
+			//FW Menu
+			div#egw_fw_menu{
+				background-image: url(../images/topmenu_items/mobile/menu_active.png);
+				cursor: pointer;
+				position: fixed;
+				left: 13px;
+				top: 13px;
+				width: 65px;
+				height: 50px;
+				background-size: 32px 32px;
+				background-repeat: no-repeat;
+				z-index: 999;
+				&:hover {
+					-webkit-box-shadow: none;
+					-moz-box-shadow: none;
+					box-shadow: none;
 				}
-				a#topmenu_password:before {
-					background-image: url(../images/topmenu_items/mobile/password.png);
-					content: "";
-					background-repeat: no-repeat;
-					width: 32px;
-					height: 32px;
-					background-size: 24px 24px;
-					display: inline-block;
-					background-position: center;
-				}
-
-				a#topmenu_manual:before {
-					background-image: url(../images/topmenu_items/mobile/help.png);
-					content: "";
-					background-repeat: no-repeat;
-					width: 32px;
-					height: 32px;
-					background-size: 24px 24px;
-					display: inline-block;
-				}
-
-				a#topmenu_search{
-					&:before {
-						background-image: url(../images/topmenu_items/mobile/search.png);
-						content: "";
-						background-repeat: no-repeat;
-						width: 32px;
-						height: 32px;
-						background-size: 24px 24px;
-						display: inline-block;
-						background-position: center;
-					}
+				&:focus {
+					outline: none;
 				}
 			}
-		}
-	}//End of toolbar
-
-	// ######################tabs header ##########################
-	// #      #      #     #     #     #     #     #     #     ####
-	// #      #      #     #     #     #     #     #     #     ####
-	// #  tab header #     #     #     #     #     #     #     ####
-	// #      #      #     #     #     #     #     #     #     ####
-	// ############################################################
-	// Div Tabs
-
-	.egw_fw_ui_tabs_header {
-		margin: 0px 0 0 0;
-		padding: 1px 1px 0px 0px;
-		background-position: bottom;
-		background-repeat: repeat-x;
-		background-color: transparent;
-		height: 34px;
-
-			h1 {
+			div#egw_fw_menu:active {
+				-webkit-box-shadow: none;
+				-moz-box-shadow: none;
+				box-shadow: none;
+			}
+			div#egw_fw_topmenu_items{
+				width: 280px;
 				display: inline;
-				width: 100%;
-				text-align: center;
-				-webkit-margin-before: 0;
-				-webkit-margin-after: 0;
-			}
-
-			img{
-				text-align:center;
-				float: none;
-				margin: 0 auto;
-				.dimension_width_height_l;
-			}
-
-		// Tab
-		// ##########
-		// #        #
-		// #        #
-		// ##########
-		// Inactive
-
-
-
-		.egw_fw_ui_tab_header {
-			padding-left: 0;
-			position: relative;
-			background: transparent;
-			display: inline-block;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			margin: 0px 5px 0px 0px;
-			padding: 2px 5px 7px 2px;
-			cursor: pointer;
-			background-repeat:repeat-x;
-			height: 38px;
-			width: 97%;
-			&:hover {
-				background-color: none !important;
-			 }
-			 &:active {
-				-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
-				-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
-				box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
-			 }
-			// APP Name
-			h1 {
-				.fontsize_xl;
-				line-height: 1em;
-				margin:0 15px 2px 2px;
-				vertical-align: super;
-				padding-left: 25px;
-			}
-
-			// Images
-			img.egw_fw_ui_tab_icon {
-				display: inline-block;
-				.dimension_width_height_l;
-				margin: 5px 1px 0 1em;
-
-				.img_filter_gray;
-			}
-
-			// FOR SVG IMG
-			object {
-			.dimension_width_height_l;
-			margin: 8px 1px 0 5px;
-			.border_radius(5px,0, 0, 5px);
-
-
-			}
-
-
-		}
-
-		// ##########
-		// #        #
-		// #        #
-		// ##########
-		/*Active Tabs*/
-		.egw_fw_ui_tab_header_active {
-			border-width: 1px 1px 0px 1px !important;
-			.background_color_egw_light;
-			&:hover {.background_color_egw_light ;}
-
-
-			// Active image
-			img.egw_fw_ui_tab_icon {
-				display: inline-block;
-				.dimension_width_height_l;
-				-webkit-filter: contrast(2);
-				-ms-filter:contrast(2);
-				-moz-filter:contrast(2);
-				-o-filter:contrast(2);
-			}
-			 /*Active object*/
-			 object {
-			.dimension_width_height_l;
-			margin: 0px 1px 0 5px;
-			.border_radius(2px,0, 0, 2px);
-
-			background-color: @gray_30;
-			}
-		}
-	}
-	//###################
-	//#					#
-	//#		SIDEBAR		#
-	//#					#
-	//###################
-	#egw_fw_sidebar{
-		top: 76px;
-		bottom: 5px;
-		//SIDE AREA
-		#egw_fw_sidemenu {
-			position: absolute;
-			top: 0px;
-			bottom: 4px;
-			left: 0;
-			right: 0;
-			overflow-y: auto;
-			z-index: 0;
-			padding-top: 0.6em;
-			font-size: 0.9em;
-
-				//####################################################
-				// All Tabs
-				.egw_fw_ui_sidemenu_entry_header
-				{
-					display: block;
-					margin: 0 0;
-					&:hover {
-						.background_color_15_gray;
-						.rounded(5px);
+				float: left;
+				position: fixed;
+				padding-left: 55px;
+				padding-top: 13px;
+				ul{
+					display:inline;
+					padding:0;
+					margin:0;
+					list-style-type: none;
+					li{
+						display: -webkit-inline-box;
+						display: -moz-inline-box;
+						display: inline-block;
+						padding:2px;
+						&:hover {
+							-webkit-box-shadow: none;
+							-moz-box-shadow: none;
+							box-shadow: none;
+						}
+					}
+					a#topmenu_logout{
+						&:before {
+							content: "";
+							background-image: url(../images/logout.png);
+							background-repeat: no-repeat;
+							width: 32px;
+							height: 32px;
+							background-size: 24px 24px;
+							display: inline-block;
+							background-position: center;
+						}
+					}
+					a#topmenu_home:before {
+						content: " ";
+						background-image: url(../images/topmenu_items/mobile/home.png);
+						background-repeat: no-repeat;
+						width: 32px;
+						height: 32px;
+						background-size: 24px 24px;
+						/*display:inline-block;*/
+						display:none;
+					}
+					a#topmenu_prefs {
+						&:before {
+							content: "";
+							background-image: url(../images/topmenu_items/mobile/setup.png);
+							background-repeat: no-repeat;
+							width: 32px;
+							height: 32px;
+							background-size: 24px 24px;
+							display: inline-block;
+							background-position: center;
+						}
 					}
 
-					&:active {.box_shadow_standard_light_inset;}
-
-					h1 {
-						margin: 0 0 10px 0;
-						padding-top: 0.31em;
-						padding-left: 3em;
-						.color_40_gray;
-						.fontsize_xl;
-						line-height: 17px;
+					a#topmenu_acl:before {
+						content: "";
+						background-repeat: no-repeat;
+						width: 32px;
+						height: 32px;
+						background-size: 24px 24px;
+						background-image: url(../images/topmenu_items/mobile/access.png);
+						display: inline-block;
+						background-position: center;
 					}
 
-					object {background-color: @gray_0; .dimension_width_height_m;}
+					a#topmenu_cats:before {
+						background-image: url(../images/topmenu_items/mobile/category.png);
+						content: "";
+						background-repeat: no-repeat;
+						width: 32px;
+						height: 32px;
+						background-size: 24px 24px;
+						display: inline-block;
+						background-position: center;
+					}
+					a#topmenu_password:before {
+						background-image: url(../images/topmenu_items/mobile/password.png);
+						content: "";
+						background-repeat: no-repeat;
+						width: 32px;
+						height: 32px;
+						background-size: 24px 24px;
+						display: inline-block;
+						background-position: center;
+					}
+
+					a#topmenu_manual:before {
+						background-image: url(../images/topmenu_items/mobile/help.png);
+						content: "";
+						background-repeat: no-repeat;
+						width: 32px;
+						height: 32px;
+						background-size: 24px 24px;
+						display: inline-block;
+					}
+
+					a#topmenu_search{
+						&:before {
+							background-image: url(../images/topmenu_items/mobile/search.png);
+							content: "";
+							background-repeat: no-repeat;
+							width: 32px;
+							height: 32px;
+							background-size: 24px 24px;
+							display: inline-block;
+							background-position: center;
+						}
+					}
+				}
+			}
+		}//End of toolbar
+
+		// ######################tabs header ##########################
+		// #      #      #     #     #     #     #     #     #     ####
+		// #      #      #     #     #     #     #     #     #     ####
+		// #  tab header #     #     #     #     #     #     #     ####
+		// #      #      #     #     #     #     #     #     #     ####
+		// ############################################################
+		// Div Tabs
+
+		.egw_fw_ui_tabs_header {
+			margin: 0px 0 0 0;
+			padding: 1px 1px 0px 0px;
+			background-position: bottom;
+			background-repeat: repeat-x;
+			background-color: transparent;
+			height: 34px;
+
+				h1 {
+					display: inline;
+					width: 100%;
+					text-align: center;
+					-webkit-margin-before: 0;
+					-webkit-margin-after: 0;
+				}
+
+				img{
+					text-align:center;
+					float: none;
+					margin: 0 auto;
+					.dimension_width_height_l;
+				}
+
+			// Tab
+			// ##########
+			// #        #
+			// #        #
+			// ##########
+			// Inactive
+
+
+
+			.egw_fw_ui_tab_header {
+				padding-left: 0;
+				position: relative;
+				background: transparent;
+				display: inline-block;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				margin: 0px 5px 0px 0px;
+				padding: 2px 5px 7px 2px;
+				cursor: pointer;
+				background-repeat:repeat-x;
+				height: 38px;
+				width: 97%;
+				&:hover {
+					background-color: none !important;
+				 }
+				 &:active {
+					-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
+					-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
+					box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);
+				 }
+				// APP Name
+				h1 {
+					.fontsize_xl;
+					line-height: 1em;
+					margin:0 15px 2px 2px;
+					vertical-align: super;
+					padding-left: 25px;
+				}
+
+				// Images
+				img.egw_fw_ui_tab_icon {
+					display: inline-block;
+					.dimension_width_height_l;
+					margin: 5px 1px 0 1em;
+
+					.img_filter_gray;
+				}
+
+				// FOR SVG IMG
+				object {
+				.dimension_width_height_l;
+				margin: 8px 1px 0 5px;
+				.border_radius(5px,0, 0, 5px);
+
+
 				}
 
 
+			}
+
+			// ##########
+			// #        #
+			// #        #
+			// ##########
+			/*Active Tabs*/
+			.egw_fw_ui_tab_header_active {
+				border-width: 1px 1px 0px 1px !important;
+				.background_color_egw_light;
+				&:hover {.background_color_egw_light ;}
+
+
+				// Active image
+				img.egw_fw_ui_tab_icon {
+					display: inline-block;
+					.dimension_width_height_l;
+					-webkit-filter: contrast(2);
+					-ms-filter:contrast(2);
+					-moz-filter:contrast(2);
+					-o-filter:contrast(2);
+				}
+				 /*Active object*/
+				 object {
+				.dimension_width_height_l;
+				margin: 0px 1px 0 5px;
+				.border_radius(2px,0, 0, 2px);
+
+				background-color: @gray_30;
+				}
+			}
+		}
+		//###################
+		//#					#
+		//#		SIDEBAR		#
+		//#					#
+		//###################
+		#egw_fw_sidebar{
+			top: 76px;
+			bottom: 5px;
+			//SIDE AREA
+			#egw_fw_sidemenu {
+				position: absolute;
+				top: 0px;
+				bottom: 4px;
+				left: 0;
+				right: 0;
+				overflow-y: auto;
+				z-index: 0;
+				padding-top: 0.6em;
+				font-size: 0.9em;
+				.egw_fw_ui_sidemenu_entry_apps {
+					.egw_fw_ui_sidemenu_entry_header
+					{
+						margin:0px 5px 0px 2px;
+						padding: 4px 10px 0 16px;
+						overflow: visible;
+						height:38px;
+						border:none;
+						img{
+							height:32px !important;
+							width:32px !important;
+						}
+						display: block;
+
+						&:hover {
+							.background_color_15_gray;
+							.rounded(0px);
+						}
+
+						&:active {.box_shadow_standard_light_inset;}
+
+						h1 {
+							margin: 0 0 10px 0;
+							padding-top: 0.31em;
+							padding-left: 3em;
+							.color_40_gray;
+							.fontsize_xl;
+							line-height: 17px;
+						}
+
+						object {background-color: @gray_0; .dimension_width_height_m;}
+					}
+				}
 
-				// ####################################
-				// ####                               #
-				// ###   IMG  |  ADD NAME             #
-				// ###                                #
-				// ###                                #
-				// ####################################
-				// Active APP
-				// Active Tab
-				// rounded Corner Left Top
 				.egw_fw_ui_sidemenu_entry_header_active {
 					//
 					cursor: pointer;
@@ -588,32 +533,6 @@
 
 				}
 
-				//####################################################
-				// egw_fw_ui_sidemenu_entry_content
-				// ########################################
-				// ##                                    ##
-				// ##                                    ##
-				// ########################################
-
-				// ########################################
-				// ##                                    ##
-				// ##                                    ##
-				// ########################################
-
-				// ########################################
-				// ##                                    ##
-				// ##                                    ##
-				// ########################################
-
-				// ########################################
-				//  ##        div.egw_fw_ui_category     ##
-				//   ##       &:nth-last-of-type(-n+3)   ##
-				//    #####################################
-
-
-
-
-
 				.egw_fw_ui_sidemenu_entry_content {
 					display: block;
 					background-image: none;
@@ -637,7 +556,7 @@
 					//###################################################
 					// has round corners
 					div.egw_fw_ui_category:nth-last-of-type(-n+3) {
-						
+
 					}
 
 					//###################################################
@@ -668,7 +587,7 @@
 							 }
 						}
 					}
-					
+
 					div.egw_fw_ui_category_content {
 						border-radius: 0;
 					}
@@ -740,42 +659,36 @@
 					/*filter grey*/
 					.img_filter_gray;
 				}
+			} // SIDEMENU End
+		}//End of Sidebar
+		//ToggleClass
 
+		.sidebar-toggle{
+			#egw_fw_top_toolbar div#egw_fw_menu{
 
-		} // SIDEMENU End
-	}//End of Sidebar
-	//ToggleClass
-
-	.sidebar-toggle{
-		#egw_fw_top_toolbar div#egw_fw_menu{
-			
-		}
-		#egw_fw_sidebar{
-			#egw_fw_sidemenu{
-				width:82px !important;
-				.egw_fw_ui_sidemenu_entry_content, .egw_fw_ui_sidemenu_entry_header{
-					display:none !important;
-				}
-				
-				.egw_fw_ui_sidemenu_entry_header{
-					height: 38px;
-					width: 54px;
-					text-overflow: ellipsis;
-					border-radius: 0px 15px 15px 0px;
-					img{
-						src: url(../images/topmenu_items/setup.png) !important;
-						height:32px !important;
-						width:32px !important;
+			}
+			#egw_fw_sidebar{
+				#egw_fw_sidemenu{
+					width:82px !important;
+					.egw_fw_ui_sidemenu_entry_content{
+						display:none !important;
 					}
-				}
-				.egw_fw_ui_tabs_header{
-					span{
+					.egw_fw_ui_sidemenu_entry_header_active {
+						&:hover {
+							border-radius:0;
+							background-image: url("../images/ajax-loader.gif");
+						}
+						img{
+							padding:0;
+						}
+					}
+					.egw_fw_ui_sidemenu_entry_header{
 						margin:0px 5px 0px 2px;
+						padding: 4px 10px 0 16px;
 						overflow: visible;
 						height:38px;
 						width:50px;
 						border:none;
-						border-radius: 10px;
 						img{
 							height:32px !important;
 							width:32px !important;
@@ -785,93 +698,92 @@
 						}
 					}
 				}
-				#egw_fw_splitter, .egw_fw_ui_sidemenu_entry_header_active h1{
-					display:none;
-				}
+			}
+			#egw_fw_topmenu_items {
+				display:none !important;
 			}
 		}
-		#egw_fw_topmenu_items {
-			display:none !important;
+
+		//###################################
+		//#									#
+		//#			FOOTER					#
+		//#									#
+		//###################################
+		#egw_fw_footer {
+			display:none;
 		}
-	}
 
-	//###################################
-	//#									#
-	//#			FOOTER					#
-	//#									#
-	//###################################
-	#egw_fw_footer {
-		display:none;
-	}
+		//###################################
+		//#									#
+		//#			APP HEADER NAVIGATOR	#
+		//#									#
+		//###################################
+		.egw_fw_ui_app_header_container {
+			display:none;
+		}
 
-	//###################################
-	//#									#
-	//#			APP HEADER NAVIGATOR	#
-	//#									#
-	//###################################
-	.egw_fw_ui_app_header_container {
-		display:none;
-	}
+		.egw_fw_content_browser_div {
+			padding: 0;
+			background-color: white;
+		}
 
-	.egw_fw_content_browser_div {
-		padding: 0;
-		background-color: white;
-	}
-	
-	//###################################
-	//#									#
-	//#			POPUP FRAME				#
-	//#									#
-	//###################################
-	.egw_fw_mobile_popup_container{
-		width:100%;
-		height:100%;
-		position:fixed;
-		display: none;
-		z-index: 999;
-		-webkit-overflow-scrolling: touch;
-		overflow-y:scroll;
-		.egw_fw_mobile_popupFrame {
+		//###################################
+		//#									#
+		//#			POPUP FRAME				#
+		//#									#
+		//###################################
+		.egw_fw_mobile_popup_container{
+			width:100%;
+			height:100%;
+			position:fixed;
+			display: none;
+			z-index: 999;
+			-webkit-overflow-scrolling: touch;
+			overflow-y:scroll;
+			.egw_fw_mobile_popupFrame {
+				width: 100%;
+				height: 100%;
+				visibility: hidden;
+				display: block;
+				background: white;
+			}
+
+		}
+		//###################################
+		//#									#
+		//#		popup dialog headbar		#
+		//#									#
+		//###################################
+		.dialogHeadbar {
+			height: 50px;
+			box-shadow: 0px 4px 5px 2px silver;
+			position: fixed;
 			width: 100%;
-			height: 100%;
-			visibility: hidden;
+			background: #0c5da5;
+			top:0;
+			right:0;
+			z-index:1;
+			.et2_button_with_image, .et2_button_text {
+				height: 46px;
+				margin: 1px;
+				margin-left: 3px;
+			}
+			td {
+				margin-left:70px;
+				display: block;
+			}
 		}
-		
-	}
-	//###################################
-	//#									#
-	//#		popup dialog headbar		#
-	//#									#
-	//###################################
-	.dialogHeadbar {
-		height: 50px;
-		box-shadow: 0px 4px 5px 2px silver;
-		position: fixed;
-		width: 100%;
-		background: #0c5da5;
-		top:0;
-		right:0;
-		z-index:1;
-		.et2_button_with_image, .et2_button_text {
-			height: 46px;
-			margin: 1px;
-			margin-left: 3px;
-		}
-		td {
-			margin-left:70px;
-			display: block;
-		}
-	}
-	
-	//###################################
-	//#									#
-	//#		Mail App specific style		#
-	//#									#
-	//###################################
-	#mail-display {
-		min-height: initial !important;
-		.mailDisplayContainer {
-			top:140px;
+
+		//###################################
+		//#									#
+		//#		Mail App specific style		#
+		//#									#
+		//###################################
+		#mail-display {
+			min-height: initial !important;
+			.mailDisplayContainer {
+				top:140px;
+			}
 		}
 	}
 }
@@ -1682,6 +1594,8 @@
 			
 			/* View mode styles*/
 			.et2_mobile_view {
+				display:block;
+				
 				.et2_mobile-view-container {
 					padding:0 14px 0 7px;
 				}
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 61e058792d..1f0d84ac38 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -4227,7 +4227,7 @@ td.message span.message {
   text-decoration: none;
   height: 32px;
   /*font-size: 1.1em;*/
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   line-height: 1.5em;
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@@ -4251,7 +4251,7 @@ td.message span.message {
 }
 #egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
   padding-right: 20px;
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   content: " ";
   background-image: url(../images/topmenu_items/home.png);
   background-repeat: no-repeat;
@@ -4649,7 +4649,7 @@ td.message span.message {
   padding-left: 3em;
   color: #999999;
   /*font-size: 12px;*/
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   line-height: 17px;
 }
 #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@@ -4820,7 +4820,7 @@ td.message span.message {
   margin: 5px 0px 3px 5px;
   padding: 0px 0px 0px 15px;
   line-height: 1em;
-  font-size: 12.100000000000001px;
+  font-size: 12.1px;
   background-image: url(../images/arrow_left.png);
   background-repeat: no-repeat;
   background-position: left center;
diff --git a/pixelegg/head_mobile.tpl b/pixelegg/head_mobile.tpl
index 417c89e668..b9d338c3f6 100644
--- a/pixelegg/head_mobile.tpl
+++ b/pixelegg/head_mobile.tpl
@@ -37,8 +37,7 @@
 				</div>
 				</div>
 			<div id="egw_fw_sidebar">
-				<div id="egw_fw_sidemenu">
-				</div>
+				<div id="egw_fw_sidemenu"></div>
 			</div>
 			<div id="egw_fw_main">