diff --git a/pixelegg/content-element-library/index_navigation_left.html b/pixelegg/content-element-library/index_navigation_left.html
index 76bdeba981..6bc1e81d8f 100755
--- a/pixelegg/content-element-library/index_navigation_left.html
+++ b/pixelegg/content-element-library/index_navigation_left.html
@@ -70,7 +70,7 @@ and open the template in the editor.
              <ul class="navigation">
                  <li><a href="mail_main.html" target="Daten">MAIL Main</a></li>
                 <li><a href="mail_sidebar.html" target="Daten">MAIL Sidebar</a></li>
-
+                <li><a href="mail_view_preview.html" target="Daten">MAIL View Preview</a></li>
                 <li><a href="mail_view_display.html" target="Daten">MAIL View Display</a></li>
                 <li><a href="mail_view_compose.html" target="Daten">MAIL View Compose</a></li>
                 <li><a href="mail_dialog_new_account.html" target="Daten">MAIL Admin Dialog New Account</a></li>
diff --git a/pixelegg/content-element-library/mail_view_preview.html b/pixelegg/content-element-library/mail_view_preview.html
new file mode 100644
index 0000000000..87098a10ef
--- /dev/null
+++ b/pixelegg/content-element-library/mail_view_preview.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+[EGroupware] Content Element Library
+
+Author: Stefan Reinhardt (c) pixelegg
+-->
+<html>
+<html>
+    <head>
+
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
+
+
+
+        <title> [EGroupware] Content Element Library</title>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <meta name="keywords" content="EGroupware" />
+        <meta name="description" content="EGroupware" />
+        <meta name="keywords" content="EGroupware" />
+        <meta name="copyright" content="Stylite AG 2013, see http://www.stylite.de/EPL" />
+        <meta name="language" content="de" />
+        <meta name="author" content="Stylite AG www.stylite.de" />
+
+        <meta name="robots" content="none" />
+        <link rel="icon" href="/egroupware2/phpgwapi/templates/idots/images/favicon.ico" type="image/x-ico" />
+        <link rel="shortcut icon" href="/egroupware2/phpgwapi/templates/idots/images/favicon.ico" />
+        <link href="/egroupware2/phpgwapi/js/jscalendar/calendar-blue.css" type="text/css" rel="StyleSheet" />
+        <link href="/egroupware2/phpgwapi/js/dhtmlxtree/dhtmlxTree/codebase/dhtmlxtree.css" type="text/css" rel="StyleSheet" />
+        <link href="/egroupware2/phpgwapi/js/jquery/chosen/chosen.css" type="text/css" rel="StyleSheet" />
+        <link href="/egroupware2/phpgwapi/js/jquery/jquery-ui/redmond/jquery-ui-1.10.3.custom.css" type="text/css" rel="StyleSheet" />
+        <link href="/egroupware2/etemplate/templates/default/etemplate2.css" type="text/css" rel="StyleSheet" />
+        <link href="/egroupware2/pixelegg/css/pixelegg.css" type="text/css" rel="StyleSheet" />
+        <link href="/egroupware2/phpgwapi/templates/idots/print.css" type="text/css" rel="StyleSheet" />
+
+        <!--mail-->
+        <link type="text/css" rel="stylesheet" href="/egroupware2/mail/templates/pixelegg/app.css">
+
+        <link type="text/css" rel="stylesheet" href="/egroupware2/pixelegg/content-element-library/css/contentElementLibrary.css">
+
+
+
+    </head>
+    <body>
+        <hr  class="clearer">
+        <div class="headline1">Mail View Compose (Show Mail)</div>
+        
+         <hr id="1" class="clearer">
+         
+         <div class="et2_vbox et2_box_widget splitter-pane" style="position: absolute; z-index: 1; top: 389px; height: 561px; width: 1166px; display: block;" id="mail-index_mailPreview"><div class="et2_hbox et2_box_widget mailPreviewHeaders" id="mail-index_mailPreviewHeadersFrom" style="width: 100%;"><span class="et2_label">Von</span><a class="et2_textbox readonly" id="mail-index_previewFromAddress" href="mailto:1&amp;1 Internet AG &lt;transfers@registrar.1and1.info&gt;" target="_blank">1&amp;1 Internet AG &lt;transfers@registrar.1and1.info&gt;</a></div><div class="et2_hbox et2_box_widget mailPreviewHeaders" id="mail-index_mailPreviewHeadersSubject" style="width: 100%;"><span class="et2_label">Betreff</span><span class="et2_label" id="mail-index_previewSubject">Domainumzug zu 1&amp;1 - Zustimmung noch offen</span></div><div class="et2_hbox et2_box_widget mailPreviewHeaders" id="mail-index_mailPreviewHeadersDate"><time class="et2_date_ro et2_label" id="mail-index_previewDate" datetime="2014-01-07 16:55:27">07.01.2014 4:55 pm</time></div><div class="et2_hbox et2_box_widget mailPreviewHeaders" id="mail-index_mailPreviewHeadersTo" style="width: 100%;"><span class="et2_label">An</span><div class="et2_hbox et2_box_widget mail_extraEmails" id="mail-index_additionalToAddress"><a class="et2_textbox readonly" href="mailto:info@pixelegg.de" target="_blank">info@pixelegg.de</a></div><img class="et2_button et2_button_icon ui-button et2_clickable" alt="Show all Addresses" title="Show all Addresses" src="/egroupware2/phpgwapi/templates/default/images/foldertree_nolines_plus.gif" style="display: none;"></div><div class="et2_hbox et2_box_widget mailPreviewHeaders" id="mail-index_mailPreviewHeadersCC" style="display: none;"><span class="et2_label">Kopie</span><div class="et2_hbox et2_box_widget mail_extraEmails" id="mail-index_additionalCCAddress"></div><img class="et2_button et2_button_icon ui-button et2_clickable" alt="Show all Addresses" title="Show all Addresses" src="/egroupware2/phpgwapi/templates/default/images/foldertree_nolines_plus.gif" style="display: none;"></div><div class="et2_hbox et2_box_widget mailPreviewHeaders" id="mail-index_mailPreviewHeadersAttachments"><span class="et2_label">Dateien</span><table class="et2_grid previewAttachmentArea" id="mail-index_previewAttachmentArea" style="display: inline-table;"><tbody><tr><td class="et2_link" style="width: 50%;"><span class="et2_label et2_link et2_clickable" id="mail-index_0[filename]">whoisoutput.pdf</span></td><td style="width: 20%;"><span class="et2_label" id="mail-index_0[mimetype]">PDF Datei (application/pdf)</span></td><td align="right" style="width: 11%;"><span class="et2_label" id="mail-index_0[size]">10.0k</span></td><td style="width: 3%;"><img class="et2_button et2_button_icon et2_clickable" id="mail-index_0[save]" src="/egroupware2/mail/templates/pixelegg/images/fileexport.png" alt="" title=""></td><td style="width: 3%;"><img class="et2_button et2_button_icon et2_clickable" id="mail-index_0[saveAsVFS]" src="/egroupware2/filemanager/templates/pixelegg/images/navbar.png" alt="" title=""></td><td class="$row_cont[classSaveAllPossiblyDisabled]" colspan="2" style="width: 3%;"><img class="et2_button et2_button_icon mail_DisplayNone et2_clickable" id="mail-index_0[save_all]" src="/egroupware2/mail/templates/pixelegg/images/save_all.png" alt="" title=""></td></tr></tbody></table><img class="et2_button et2_button_icon ui-button et2_clickable" alt="Show all attachments" title="Show all attachments" src="/egroupware2/phpgwapi/templates/default/images/foldertree_nolines_plus.gif" style="display: none;"></div><div class="et2_hbox et2_box_widget" id="mail-index_mailPreviewIcons"><div class="et2_toolbar ui-widget-header ui-corner-all" id="mail-index_toolbar"><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-composeasnew" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/pixelegg/images/new.png" title="Als neu bearbeiten" class="et2_button_icon"></span></button><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-reply" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/mail/templates/pixelegg/images/mail_reply.png" title="Antworten nur an Absender" class="et2_button_icon"></span></button><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-reply_all" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/mail/templates/pixelegg/images/mail_replyall.png" title="Antworten an Alle" class="et2_button_icon"></span></button><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-forward" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/mail/templates/pixelegg/images/mail_forward.png" title="Inline weiterleiten" class="et2_button_icon"></span></button> <button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-flagged" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/mail/templates/pixelegg/images/unread_flagged_small.png" title="Markieren" class="et2_button_icon"></span></button><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-unflagged" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/mail/templates/pixelegg/images/read_flagged_small.png" title="Markierung entfernen" class="et2_button_icon"></span></button><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-delete" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/pixelegg/images/delete.png" title="Löschen" class="et2_button_icon"></span></button> <button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-print" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/pixelegg/images/print.png" title="Drucken" class="et2_button_icon"></span></button> <button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-infolog" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/infolog/templates/pixelegg/images/navbar.png" title="InfoLog" class="et2_button_icon"></span></button><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-tracker" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/tracker/templates/pixelegg/images/navbar.png" title="Verfolgungssystem" class="et2_button_icon"></span></button> <button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-save" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/mail/templates/pixelegg/images/fileexport.png" title="Nachricht auf Ihrem Computer speichern" class="et2_button_icon"></span></button><button class="et2_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toolbar-header" role="button" aria-disabled="false"><span class="ui-button-text"><img src="/egroupware2/mail/templates/pixelegg/images/kmmsgread.png" title="Kopfzeilen anzeigen" class="et2_button_icon"></span></button></div></div><div class="et2_box et2_box_widget" id="mail-index_mailPreviewContainer"></div></div> 
+         
+    </body>
+</html>
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index 7f708be156..99fb765022 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -1722,7 +1722,7 @@ action buttons, left aligned for "extra" controls
     display: inline;
   }
   .et2_link_to .et2_button_icon {
-    background-color: #f0f0f0;
+    /*.background_color_10_gray;*/
     -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
@@ -1737,7 +1737,7 @@ action buttons, left aligned for "extra" controls
     height: 32px;
   }
   .et2_link_to .et2_button_icon:hover {
-    background-color: #cccccc;
+    /*.background_color_20_gray;*/
     -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);
@@ -1747,7 +1747,7 @@ action buttons, left aligned for "extra" controls
     border-radius: 3px;
   }
   .et2_link_to .et2_button_icon:active {
-    background-color: #b3b3b3 !important;
+    /*.background_color_30_gray;*/
     border: 1px solid rgba(0, 0, 0, 0.9);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
@@ -1755,6 +1755,7 @@ action buttons, left aligned for "extra" controls
     -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);
+    background-color: #1aa200;
   }
   .et2_link {
     cursor: pointer;
@@ -2103,7 +2104,7 @@ action buttons, left aligned for "extra" controls
   .nextmatch_header > .filters input[type=search] {
     background-color: #ffd44d;
     color: black;
-    /*height: 25px;*/
+    height: 22.21875px;
     float: left;
     margin: 5px 0 0 2px;
   }
@@ -2190,7 +2191,7 @@ action buttons, left aligned for "extra" controls
   .nextmatch_header > .filters .et2_button_icon {
     margin-top: 8px;
     vertical-align: middle;
-    background-color: #f0f0f0;
+    /*.background_color_10_gray;*/
     -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
@@ -2204,7 +2205,7 @@ action buttons, left aligned for "extra" controls
     padding: 2px;
   }
   .nextmatch_header > .filters .et2_button_icon:hover {
-    background-color: #cccccc;
+    /*.background_color_20_gray;*/
     -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);
@@ -2214,7 +2215,7 @@ action buttons, left aligned for "extra" controls
     border-radius: 3px;
   }
   .nextmatch_header > .filters .et2_button_icon:active {
-    background-color: #b3b3b3 !important;
+    /*.background_color_30_gray;*/
     border: 1px solid rgba(0, 0, 0, 0.9);
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
@@ -2222,6 +2223,7 @@ action buttons, left aligned for "extra" controls
     -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);
+    background-color: #1aa200;
   }
   .et2_nextmatch .nextmatch_header {
     border: none;
@@ -2263,11 +2265,11 @@ action buttons, left aligned for "extra" controls
     -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
     -webkit-border-radius: 3px;
-    -webkit-border-top-left-radius: 20px;
+    -webkit-border-top-left-radius: 10px;
     -moz-border-radius: 3px;
-    -moz-border-radius-topleft: 20px;
+    -moz-border-radius-topleft: 10px;
     border-radius: 3px;
-    border-top-left-radius: 20px;
+    border-top-left-radius: 10px;
   }
   #admin-categories-index_filter {
     top: 8px;
@@ -2394,7 +2396,7 @@ action buttons, left aligned for "extra" controls
     margin: 0px 5px;
     height: 16px;
     padding: 3px;
-    background-color: #f0f0f0;
+    /*.background_color_10_gray;*/
     -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
@@ -2410,7 +2412,7 @@ action buttons, left aligned for "extra" controls
   .sidebox-favorites ul.favorites li img.sideboxstar {
     margin-right: 1ex;
     height: 16px;
-    background-color: #f0f0f0;
+    /*.background_color_10_gray;*/
     -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
@@ -2423,7 +2425,7 @@ action buttons, left aligned for "extra" controls
   }
   .sidebox-favorites ul.favorites li img.sideboxstar:hover {
     height: 16px;
-    background-color: #cccccc;
+    /*.background_color_20_gray;*/
     -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);
@@ -2453,7 +2455,7 @@ action buttons, left aligned for "extra" controls
     padding: 0.5em 1em 0.5em 0;
   }
   .sidebox-favorites .ui-menu-icons .ui-menu-item a:hover {
-    background-color: #cccccc;
+    /*.background_color_20_gray;*/
     -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);
@@ -2773,7 +2775,7 @@ action buttons, left aligned for "extra" controls
  */
   textarea,
   textarea.description {
-    background-color: #ffe180;
+    background-color: rgba(255, 221, 115, 0.1);
     padding: 0.3em 0 0 0.3em;
   }
   /*#################################### ADMIN PART #####################################################*/
@@ -2828,7 +2830,8 @@ option:checked {
 /* Component containers
 ----------------------------------*/
 .ui-widget {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+  font-family: Verdana, Helvetica, Sans-Serif;
+  /*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
   font-size: 1.1em;
 }
 .ui-widget .ui-widget {
@@ -2838,7 +2841,8 @@ option:checked {
 .ui-widget select,
 .ui-widget textarea,
 .ui-widget button {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+  font-family: Verdana, Helvetica, Sans-Serif;
+  /*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
   font-size: 1em;
 }
 .ui-widget-content {
@@ -2910,7 +2914,7 @@ option:checked {
   border-right: solid 1px 1px;
   border-bottom: solid 1px 1px;
   border-color: #e6e6e6;
-  background: #ffc200 !important;
+  background: #ffc200;
   background-image: none !important;
   color: #000000;
 }
@@ -3468,6 +3472,11 @@ td.message span.message {
   height: auto;
   width: 100%;
 }
+/*popup Messsage*/
+div#egwpopup_message {
+  background-color: .color_gray_0;
+  padding: 1em;
+}
 /**
  * EGroupware: CSS with less preprocessor
  *
@@ -3500,11 +3509,12 @@ body {
   padding: 0px !important;
   width: 100% !important;
   height: 100% !important;
-  font-size: 80.5%;
+  font-size: 11px;
 }
 body,
 textarea {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+  font-family: Verdana, Helvetica, Sans-Serif;
+  /*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
 }
 #egw_fw_basecontainer {
   position: fixed;
@@ -3512,7 +3522,8 @@ textarea {
   height: 100%;
   padding: 0px;
   margin: 0px;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+  font-family: Verdana, Helvetica, Sans-Serif;
+  /*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
   background-color: #fafafa;
 }
 input {
@@ -3526,7 +3537,8 @@ input {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif !important;
+  font-family: Verdana, Helvetica, Sans-Serif !important;
+  /*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
 }
 input:hover {
   -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
@@ -3665,7 +3677,8 @@ div.selectbox-wrapper ul li {
   -moz-appearance: none;
   appearance: none;
   cursor: pointer;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+  font-family: Verdana, Helvetica, Sans-Serif;
+  /*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
   font-size: 1.2em;
   font-weight: normal;
   height: 30px;
@@ -4687,7 +4700,7 @@ table.egwGridView_grid tbody tr:nth-child(even) {
   background: #ffffff;
 }
 table.egwGridView_grid tbody tr:nth-child(odd) {
-  background: #ebebeb;
+  background: #f7f7f7;
 }
 table.egwGridView_grid tbody tr.selected {
   background: rgba(255, 221, 115, 0.2) !important;
@@ -4833,11 +4846,11 @@ table.egwGridView_grid span.arrow.loading {
 #loginMainDiv div#centerBox #loginCdMessage {
   margin: 1em;
   -webkit-border-radius: 3px;
-  -webkit-border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 10px;
   -moz-border-radius: 3px;
-  -moz-border-radius-topleft: 20px;
+  -moz-border-radius-topleft: 10px;
   border-radius: 3px;
-  border-top-left-radius: 20px;
+  border-top-left-radius: 10px;
   color: red;
   text-align: center;
 }
@@ -4856,11 +4869,11 @@ table.egwGridView_grid span.arrow.loading {
   -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
   -webkit-border-radius: 3px;
-  -webkit-border-top-left-radius: 20px;
+  -webkit-border-top-left-radius: 10px;
   -moz-border-radius: 3px;
-  -moz-border-radius-topleft: 20px;
+  -moz-border-radius-topleft: 10px;
   border-radius: 3px;
-  border-top-left-radius: 20px;
+  border-top-left-radius: 10px;
 }
 #loginMainDiv div#centerBox form table.divLoginbox td {
   padding: 0.5em;
@@ -5892,7 +5905,7 @@ img {
 }
 .egw_fw_ui_sidemenu_listitem div a:nth-child(2):hover {
   background-color: #ff0000;
-  background-color: #cccccc;
+  /*.background_color_20_gray;*/
   -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);
@@ -5974,7 +5987,8 @@ div#calendar-container div.calendar table {
   cursor: default;
   padding: 0.3em;
   background-color: #fafafa;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+  font-family: Verdana, Helvetica, Sans-Serif;
+  /*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
 }
 div#calendar-container div.calendar table thead .title {
   background-color: #ffc200;
diff --git a/pixelegg/images/note.png b/pixelegg/images/note.png
index 529b0e4965..ad9b59d937 100755
Binary files a/pixelegg/images/note.png and b/pixelegg/images/note.png differ
diff --git a/pixelegg/images/note.svg b/pixelegg/images/note.svg
new file mode 100755
index 0000000000..8d92834e46
--- /dev/null
+++ b/pixelegg/images/note.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="28.347px" height="28.347px" viewBox="0 0 28.347 28.347" enable-background="new 0 0 28.347 28.347" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M24.437,0H3.91C1.75,0,0,1.751,0,3.91v20.527
+	c0,2.159,1.75,3.909,3.91,3.909h20.527c2.159,0,3.91-1.75,3.91-3.909V3.91C28.347,1.751,26.596,0,24.437,0z M4.729,24.562
+	l1.798-6.301l4.497,4.501L4.729,24.562z M22.685,8.329l0.536,0.537c0.309,0.309,0.381,0.755,0.263,1.167l0.129,0.129l-0.448,0.449
+	L12.102,21.684l-4.497-4.501L17.887,6.89L16.923,5.9l-5.426,5.432l-1.1-1.102l6.449-6.455l3.071,2.004
+	c0.182,0.046,0.353,0.132,0.494,0.273l0.545,0.546l2.82-2.823l1.729,1.731L22.685,8.329z"/>
+</svg>
diff --git a/pixelegg/images/phone.png b/pixelegg/images/phone.png
index addde1668f..f4feaab212 100755
Binary files a/pixelegg/images/phone.png and b/pixelegg/images/phone.png differ
diff --git a/pixelegg/images/phone.svg b/pixelegg/images/phone.svg
new file mode 100755
index 0000000000..a21a22f17b
--- /dev/null
+++ b/pixelegg/images/phone.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="28.347px" height="28.347px" viewBox="0 0 28.347 28.347" enable-background="new 0 0 28.347 28.347" xml:space="preserve">
+<g>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M24.437,0H3.91C1.75,0,0,1.75,0,3.91v20.527
+		c0,2.16,1.75,3.91,3.91,3.91h20.527c2.159,0,3.91-1.75,3.91-3.91V3.91C28.347,1.75,26.596,0,24.437,0z M24.289,22.143
+		c0,0.816-0.646,1.479-1.445,1.479H5.502c-0.798,0-1.445-0.663-1.445-1.479v-2.218c0-0.816,0.647-1.479,1.445-1.479h1.042
+		l2.237-5.177c0-0.815,1.27-1.478,1.945-1.478h6.893c0.674,0,1.944,0.662,1.944,1.478l2.237,5.177h1.043
+		c0.798,0,1.445,0.663,1.445,1.479V22.143z M23.205,13.243c-1.725,0-3.131-1.44-3.24-3.259c-0.385-0.377-0.893-0.612-1.456-0.612
+		h-8.67c-0.562,0-1.07,0.235-1.456,0.612c-0.109,1.819-1.516,3.259-3.24,3.259c-1.796,0-3.252-1.561-3.252-3.484
+		c0-1.576,0.976-2.905,2.314-3.336c0.98-1.049,2.333-1.698,3.828-1.698h12.284c1.495,0,2.848,0.648,3.829,1.698
+		c1.338,0.432,2.313,1.76,2.313,3.336C26.457,11.683,25.001,13.243,23.205,13.243z"/>
+	<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M14.173,12.53c2.394,0,4.335,1.986,4.335,4.436
+		c0,2.451-1.941,4.438-4.335,4.438c-2.395,0-4.335-1.987-4.335-4.438C9.838,14.517,11.779,12.53,14.173,12.53z"/>
+</g>
+</svg>
diff --git a/pixelegg/images/task.png b/pixelegg/images/task.png
index dc637ed309..ade5c74c95 100755
Binary files a/pixelegg/images/task.png and b/pixelegg/images/task.png differ
diff --git a/pixelegg/images/task.svg b/pixelegg/images/task.svg
new file mode 100755
index 0000000000..66db3cad6a
--- /dev/null
+++ b/pixelegg/images/task.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="28.347px" height="28.347px" viewBox="0 0 28.347 28.347" enable-background="new 0 0 28.347 28.347" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" fill="#ECEDED" d="M24.437,0H3.91C1.75,0,0,1.75,0,3.91v20.528
+	c0,2.158,1.75,3.908,3.91,3.908h20.527c2.159,0,3.91-1.75,3.91-3.908V3.91C28.347,1.75,26.596,0,24.437,0z M23.625,11.887
+	l-10.872,9.06c-0.364,0.303-0.804,0.482-1.265,0.602c-0.28,0.094-0.566,0.148-0.857,0.141c-0.805,0.01-1.612-0.23-2.226-0.742
+	c-0.996-1.006-2.999-3.506-2.999-3.506c-0.975-0.975-0.975-2.556,0-3.532c0.975-0.975,2.556-0.975,3.531,0l1.62,1.62l8.719-7.266
+	c1.201-1.001,3.147-1.001,4.349,0C24.825,9.264,24.825,10.886,23.625,11.887z"/>
+</svg>
diff --git a/pixelegg/less/def_buttons.less b/pixelegg/less/def_buttons.less
index 1a9fae8f2f..85b177c71a 100755
--- a/pixelegg/less/def_buttons.less
+++ b/pixelegg/less/def_buttons.less
@@ -234,24 +234,27 @@
 // Buttons nur Icon
 
 .Complete_Button_Icon_normal {
-    .background_color_10_gray;
+    /*.background_color_10_gray;*/
     .box_shadow_standard_light;
     .border_normal;
+    
     .border_radius_button_normal;
 }
 
 .Complete_Button_Icon_hover  {
-    .background_color_20_gray;
+    /*.background_color_20_gray;*/
     .box_shadow_standard_light_hover;
     .border_hover;
     .border_radius_button_normal;
 }
 
 .Complete_Button_Icon_active {
-    .background_color_30_gray;
+    /*.background_color_30_gray;*/
     .border_active;
     .border_radius_button_normal;
     .box_shadow_standard_light_inset;
+    
+    background-color: @color_positive_action_active;
 }
 
 // #############################
diff --git a/pixelegg/less/def_design_pattern_color_font_shadow.less b/pixelegg/less/def_design_pattern_color_font_shadow.less
index 466daf9d27..2705557d6b 100755
--- a/pixelegg/less/def_design_pattern_color_font_shadow.less
+++ b/pixelegg/less/def_design_pattern_color_font_shadow.less
@@ -129,14 +129,14 @@
 @color_hint : @egw_color_1_a;
 
 /*optional / can field*/
-@color_optional : lighten(@egw_color_1_a, 25%);
+@color_optional : fade(@egw_color_1_e, 10%);
 
 
 
 /*Listenausgabe*/   
 
 @color_even : @gray_0;
-@color_odd : darken(@gray_0, 8%); 
+@color_odd : darken(@gray_0, 3%); 
 
 
 // aktiverte Zeilen in allen APP mit Listenausgabe
@@ -183,8 +183,8 @@
 // Schriften
 
 .basefontfamily{
-    //font-family: Verdana, Helvetica, Sans-Serif;
-    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
+    font-family: Verdana, Helvetica, Sans-Serif;
+/*    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;*/
     //	 font-size: 16px;
 
 }
@@ -195,11 +195,11 @@
 
 .border_radius_button_lefttop {
     -webkit-border-radius: 3px;
-    -webkit-border-top-left-radius: 20px;
+    -webkit-border-top-left-radius: 10px;
     -moz-border-radius: 3px;
-    -moz-border-radius-topleft: 20px;
+    -moz-border-radius-topleft: 10px;
     border-radius: 3px;
-    border-top-left-radius: 20px;
+    border-top-left-radius: 10px;
 }
 
 .border_radius_button_righttop {
@@ -618,5 +618,30 @@
 }
 
 
+// Vertical gradient using CSS where possible, and base64-encoded SVG for IE9 (enables use of this in combination with border-radius)
+// Based on this by Phil Brown: http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/
+// Also based on a mixin from Twitter Bootstrap: https://github.com/twitter/bootstrap
+ 
+.gradient-vertical(@startColor, @endColor) {
+ 
+// IE9 prep
+@dataPrefix: ~"url(data:image/svg+xml;base64,";
+@dataSuffix: ~")";
+@dataContent: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g743" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop stop-color="@{startColor}" offset="0"/><stop stop-color="@{endColor}" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g743)"/></svg>';
+@b64Out: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataPrefix}','@{dataContent}','@{dataSuffix}')`;
+ 
+background-color: mix(@startColor, @endColor, 60%); // Base solid colour fallback
+background-image: ~"@{b64Out}"; // IE9
+background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
+background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
+background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
+background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+background-image: linear-gradient(top, @startColor, @endColor); // The standard
+background-repeat: repeat-x;
+ 
+}
+
+
 //
-//                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
\ No newline at end of file
+// 
\ No newline at end of file
diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less
index 1cf792b6d3..3875647eda 100755
--- a/pixelegg/less/etemplate2.less
+++ b/pixelegg/less/etemplate2.less
@@ -998,7 +998,7 @@ div.message.floating {
 .nextmatch_header > .filters input[type=search] { 
     .background_color_search;
     color: black;
-    /*height: 25px;*/
+    height: 22.21875px;
     float: left;
     margin: 5px 0 0 2px;
 }
diff --git a/pixelegg/less/jquery-ui.less b/pixelegg/less/jquery-ui.less
index ccb3c078b9..6eb0c6d5ac 100755
--- a/pixelegg/less/jquery-ui.less
+++ b/pixelegg/less/jquery-ui.less
@@ -109,7 +109,7 @@ option:checked {background-color: @egw_color_1_e;}
     .bordered(1px, 1px, 1px,1px);
     border-color: @gray_10;
     //	background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
-    background: @color_hint !important;
+    background: @color_hint;
     background-image: none !important;
     //	font-size: 105%;
     .color_100_gray;
diff --git a/pixelegg/less/layout_content_elements.less b/pixelegg/less/layout_content_elements.less
index c85ba970b9..02ef6cfbb7 100755
--- a/pixelegg/less/layout_content_elements.less
+++ b/pixelegg/less/layout_content_elements.less
@@ -42,7 +42,7 @@ body{
     padding: 0px !important;
     width: 100% !important;
     height: 100% !important;
-    font-size: 80.5%;
+    font-size: 11px;
     
 }
 
@@ -516,6 +516,9 @@ img
 }
 
 
+
+
+
 input,button,select
 {
     border: solid 1px #bbbbbb;
diff --git a/pixelegg/less/layout_messages.less b/pixelegg/less/layout_messages.less
index 9efd6320ef..a217402b49 100755
--- a/pixelegg/less/layout_messages.less
+++ b/pixelegg/less/layout_messages.less
@@ -76,4 +76,13 @@
      
  }
  
+ 
+ /*popup Messsage*/
+ div#egwpopup_message {
+     
+     background-color: .color_gray_0;
+     padding: 1em;
+     
+     
+ }
  //
\ No newline at end of file
