From fb5c859b8ad8a984c9555fd3d5ec6d1463b911ec Mon Sep 17 00:00:00 2001
From: Ralf Becker <ralfbecker@outdoor-training.de>
Date: Mon, 20 Jan 2014 18:34:27 +0000
Subject: [PATCH] pixelegg changes from today

---
 mail/templates/default/compose.xet |  29 ++-
 mail/templates/pixelegg/app.css    | 264 ++++++++++++++++++++-----
 mail/templates/pixelegg/app.less   | 306 +++++++++++++++++------------
 3 files changed, 413 insertions(+), 186 deletions(-)
diff --git a/mail/templates/default/compose.xet b/mail/templates/default/compose.xet
index 520bc06b64..0f5d838891 100644
--- a/mail/templates/default/compose.xet
+++ b/mail/templates/default/compose.xet
@@ -5,26 +5,41 @@
 			<html id="msg" class="message"/>
 			<vbox class="mailCompose mailComposeHeaderSection" width="99%">
 				<hbox class="et2_toolbar ui-widget-header ui-corner-all mail-compose_toolbar">
-					<button class="et2_button ui-button mail-compose_button" label="Send" id="button[send]"/>
-					<buttononly class="et2_button ui-button" label="Save as Draft" value="saveAsDraft" id="button[saveAsDraft]" image="fileexport" onclick="app.mail.saveAsDraft"/>
-					<buttononly class="et2_button ui-button" label="Save as Draft and Print" value="saveAsDraftAndPrint" id="button[saveAsDraftAndPrint]" image="print" onclick="app.mail.saveAsDraftAndPrint"/>
+				<description class="email-button-group sent">	
+                                    <button class="et2_button ui-button mail-compose_button" label="Send" id="button[send]"/>
+				</description> 	
+                                <description class="email-button-group save">
+                                            <buttononly class="et2_button ui-button" label="Save as Draft" value="saveAsDraft" id="button[saveAsDraft]" image="fileexport" onclick="app.mail.saveAsDraft"/>
+                                            <buttononly class="et2_button ui-button" label="Save as Draft and Print" value="saveAsDraftAndPrint" id="button[saveAsDraftAndPrint]" image="print" onclick="app.mail.saveAsDraftAndPrint"/>
+                                </description>  
+                               <description class="email-button-group file">
 					<vfs-select class="$cont[vfsNotAvailable]" id="selectFromVFSForCompose" onchange="app.mail.vfsUploadForCompose"/>
 					<file class="mail-compose_fileselector" statustext="Select file to attach to message" multiple='true' progress='mailUploadProgress' onFinish="app.mail.uploadForCompose" id="uploadForCompose" drop_target ="mailUploadSection"/>
-					<description class="$cont[noSaveAsAvailable]" value="Save:"/>
-					<hbox class="$cont[noInfologAvailable]">
+				</description>
+                                <description class="email-button-group egw"> 	
+                                        <description class="$cont[noSaveAsAvailable]" value="Save:"/>
+				 
+                                        <hbox class="$cont[noInfologAvailable]">
 						<image class="et2_button ui-button et2_button_icon" label="Save as infolog on send" src="infolog/navbar" no_lang="1"/>
 						<checkbox statustext="check to save as infolog on send" id="to_infolog" options="on,off"/>
 					</hbox>
+                              
 					<hbox class="$cont[noTrackerAvailable]">
 						<image class="et2_button ui-button et2_button_icon" label="Save as tracker on send" src="tracker/navbar" no_lang="1"/>
 						<checkbox statustext="check to save as trackerentry on send" id="to_tracker" options="on,off"/>
 					</hbox>
-					<description value="Recieve notification"/>
+                                </description>
+                                  <description class="email-button-group notification">         
+                                    <description value="Recieve notification"/>
 					<checkbox statustext="check to recieve a notification when the message is read (note: not all clients support this and/or the reciever may not authorize the notification)" id="disposition" options="$cont[disposition]"/>
-					<description value="Priority"/>
+                                    </description>
+                                
+                                <description class="email-button-group priority">	
+                                        <description value="Priority"/>
 					<menulist>
 						<menupopup id="priority"/>
 					</menulist>
+                                </description>        
 				</hbox>
 				<grid  width="100%">
 					<columns>
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index 61bf32b7d6..3c2031f33b 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -2,7 +2,7 @@
  * EGroupware: CSS with less preprocessor
  *
  * Mail
- * 
+ *
  * Please do NOT change app.css directly, instead change app.less and compile it!
  *
  * @link http://www.egroupware.org
@@ -521,7 +521,6 @@ div.mailDisplayHeaders > div:first-parent {
   overflow: hidden;
 }
 div.mailDisplayHeaders > span:first-child,
-div.mailComposeHeaders > span:first-child,
 div.mailPreviewHeaders > span:first-child {
   width: 7em;
   display: inline-block;
@@ -529,6 +528,9 @@ div.mailPreviewHeaders > span:first-child {
 #mail-display_toolbar {
   display: inline-flex;
 }
+#mail-compose_mailaccount {
+  width: 80%;
+}
 div.mailComposeHeaders > span:first-child {
   width: 8em;
 }
@@ -648,7 +650,7 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
 #            #                               #
 ############################################## */
 .egw_fw_ui_category_content {
-  /*new mail in FOlder 
+  /*new mail in FOlder
     span.standartTreeRow b {color: @egw_color_2_a;}
   */
   /*move Mail*/
@@ -740,38 +742,63 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
 #mail-compose {
   width: 870px;
   padding: 5px;
-}
-#mail-compose img[src$="svg"] {
-  background-color: #679fd2;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjc5ZmQyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
-  background-image: -moz-linear-gradient(top, #679fd2, #679fd2);
-  background-image: -ms-linear-gradient(top, #679fd2, #679fd2);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#679fd2), to(#679fd2));
-  background-image: -webkit-linear-gradient(top, #679fd2, #679fd2);
-  background-image: -o-linear-gradient(top, #679fd2, #679fd2);
-  background-image: linear-gradient(top, #679fd2, #679fd2);
-  background-repeat: repeat-x;
+  /*// ###############################################################################*/
+  /*// Mail Header*/
 }
 #mail-compose .mailComposeHeaders:first-child {
   /*background-color: @gray-0;*/
-  /*.background-color-5-gray;*/
-  background: -moz-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
-  /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 240, 240, 0)), color-stop(100%, rgba(191, 191, 191, 0.65)));
-  /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
-  /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
-  /* Opera 11.10+ */
-  background: -ms-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
-  /* IE10+ */
-  background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
-  /* W3C */
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f0f0f0', endColorstr='#a6bfbfbf', GradientType=0);
-  /* IE6-9 */
+  /*.gradient_thead;*/
 }
 #mail-compose .mail-compose_toolbar {
-  height: 32px;
+  float: left;
+  width: 100%;
+  /*######################################*/
+  /*// Button senden -> dev_buttons.less*/
+  /*######################################*/
+  /*######################################*/
+  /*######################################*/
+  /*save / Speichern als */
+  /*######################################*/
+}
+#mail-compose .mail-compose_toolbar span.email-button-group {
+  margin: 3px 4px 4px 4px;
+  padding: 2px;
+  background-color: #cdcdcd;
+  /*.background_linear_gradient !important;*/
+  height: 24px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+#mail-compose .mail-compose_toolbar span.sent {
+  float: left;
+}
+#mail-compose .mail-compose_toolbar span.save {
+  float: left;
+}
+#mail-compose .mail-compose_toolbar span.file {
+  float: left;
+}
+#mail-compose .mail-compose_toolbar span.egw {
+  float: left;
+}
+#mail-compose .mail-compose_toolbar span.egw img {
+  height: 16px;
+  padding: 1px;
+  margin: 3px;
+  vertical-align: middle;
+}
+#mail-compose .mail-compose_toolbar span.notification {
+  float: left;
+}
+#mail-compose .mail-compose_toolbar span.notification span.et2_label {
+  line-height: 25px;
+}
+#mail-compose .mail-compose_toolbar span.priority {
+  float: left;
+}
+#mail-compose .mail-compose_toolbar span.priority span.et2_label {
+  line-height: 25px;
 }
 #mail-compose .mail-compose_toolbar button.et2_button {
   height: 24px;
@@ -779,24 +806,63 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
              &:focus {.box_shadow_standard_light_inset; .background_color_15_gray;}*/
 }
 #mail-compose .mail-compose_toolbar img {
-  height: 16px;
+  height: 24px;
+}
+#mail-compose .mail-compose_toolbar img[src$="svg"] {
+  background-color: #aaaaaa;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOWI5YjliIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
+  background-image: -moz-linear-gradient(top, #b4b4b4, #9b9b9b);
+  background-image: -ms-linear-gradient(top, #b4b4b4, #9b9b9b);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b4b4b4), to(#9b9b9b));
+  background-image: -webkit-linear-gradient(top, #b4b4b4, #9b9b9b);
+  background-image: -o-linear-gradient(top, #b4b4b4, #9b9b9b);
+  background-image: linear-gradient(top, #b4b4b4, #9b9b9b);
+  background-repeat: repeat-x;
+  background-color: #696969;
+  height: 24px;
+}
+#mail-compose .mail-compose_toolbar img[src$="svg"]: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);
+  background-color: #189800;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMTg5ODAwIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMTg5ODAwIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
+  background-image: -moz-linear-gradient(top, #189800, #189800);
+  background-image: -ms-linear-gradient(top, #189800, #189800);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#189800), to(#189800));
+  background-image: -webkit-linear-gradient(top, #189800, #189800);
+  background-image: -o-linear-gradient(top, #189800, #189800);
+  background-image: linear-gradient(top, #189800, #189800);
+  background-repeat: repeat-x;
+}
+#mail-compose .mail-compose_toolbar span.et2_label {
+  font-size: 9px;
 }
 #mail-compose .mail-compose_toolbar .mail-compose_button {
-  margin-right: 15px !important;
+  /*margin-right: 15px !important;*/
   padding: 0 3px 0 0;
   text-align: left;
   font-weight: bold;
-  padding-left: 30px;
-  width: 7em;
+  padding-left: 20px;
+  width: 71px;
   background-image: url(images/mail_send.png) !important;
   background-position: left;
   background-repeat: no-repeat;
   background-size: 16px 16px;
+  background-color: #0c5da5;
+  color: #ffffff;
+}
+#mail-compose .mail-compose_toolbar .mail-compose_button: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);
+  background-color: #189800;
 }
 #mail-compose .mail-compose_toolbar img[id="mail-compose_button[saveAsDraftAndPrint]"],
 #mail-compose .mail-compose_toolbar img[id="mail-compose_button[saveAsDraft]"] {
   vertical-align: middle;
-  padding: 3px;
+  padding: 1px;
+  margin: 3px;
   /*.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);
@@ -805,6 +871,7 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
+  height: 16px;
 }
 #mail-compose .mail-compose_toolbar img[id="mail-compose_button[saveAsDraftAndPrint]"]:hover,
 #mail-compose .mail-compose_toolbar img[id="mail-compose_button[saveAsDraft]"]:hover {
@@ -814,9 +881,12 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
   background-color: #189800;
 }
 #mail-compose .mail-compose_toolbar img[id="mail-compose_selectFromVFSForCompose"] {
-  margin-left: 15px !important;
+  /*margin-left: 15px !important;*/
+  height: 16px;
+  padding: 1px;
+  margin: 3px;
   vertical-align: middle;
-  padding: 3px;
+  float: left;
   /*.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);
@@ -840,11 +910,12 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
 }
 #mail-compose .mail-compose_toolbar .et2_file,
 #mail-compose .mail-compose_toolbar .mail-compose_fileselector {
+  float: left;
   vertical-align: middle;
 }
 #mail-compose .mail-compose_toolbar .et2_file input#mail-compose_uploadForCompose,
 #mail-compose .mail-compose_toolbar .mail-compose_fileselector input#mail-compose_uploadForCompose {
-  font-size: 0.7em;
+  /*font-size: 0.7em;*/
   border: 1px solid rgba(0, 0, 0, 0.15);
   -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
@@ -874,8 +945,9 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
   height: 32px;
   background-image: url(images/attach.png) !important;
   background-color: #fafafa;
-  height: 20px;
-  margin-left: 5px;
+  height: 16px;
+  margin-left: 2px;
+  margin-top: 2px;
 }
 #mail-compose .mail-compose_toolbar .et2_file input#mail-compose_uploadForCompose:hover,
 #mail-compose .mail-compose_toolbar .mail-compose_fileselector input#mail-compose_uploadForCompose:hover {
@@ -893,13 +965,10 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
 }
 #mail-compose .mail-compose_toolbar .et2_file div.progress,
 #mail-compose .mail-compose_toolbar .mail-compose_fileselector div.progress {
-  width: 230px;
-}
-#mail-compose .mail-compose_toolbar span.et2_label {
-  font-size: 0.7em;
+  width: 212px;
 }
 #mail-compose .mail-compose_toolbar #mail-compose_to_infolog {
-  margin-right: 15px !important;
+  margin-right: 5px !important;
 }
 #mail-compose .mail-compose_toolbar #mail-compose_to_infolog:hover {
   -webkit-transform: scale(1.5);
@@ -909,7 +978,7 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
   transform: scale(1.5);
 }
 #mail-compose .mail-compose_toolbar input[id="mail-compose_to_tracker"] {
-  margin-right: 10px !important;
+  margin-right: 5px !important;
 }
 #mail-compose .mail-compose_toolbar input[id="mail-compose_to_tracker"]:hover {
   -webkit-transform: scale(1.5);
@@ -919,7 +988,7 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
   transform: scale(1.5);
 }
 #mail-compose .mail-compose_toolbar #mail-compose_disposition {
-  margin-right: 10px !important;
+  margin-right: 0px !important;
 }
 #mail-compose .mail-compose_toolbar #mail-compose_disposition:hover {
   -webkit-transform: scale(1.5);
@@ -929,20 +998,25 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
   transform: scale(1.5);
 }
 #mail-compose .mail-compose_toolbar #mail-compose_priority {
-  /*            vertical-align: middle;
-            height: 20px;
-            padding: 3px 2px;
-            .Complete_Button_Icon_normal;*/
-  margin-right: 3px;
-  font-size: 0.8em;
+  margin-right: 0px;
+  font-size: 9px;
 }
 #mail-compose .mail-compose_toolbar #mail-compose_priority span.et2_label {
   margin-right: 3px;
 }
+#mail-compose table.et2_grid {
+  float: left;
+}
 #mail-compose .mailComposeHeaders,
 #mail-compose .mailComposeHeadersSection {
   margin: 2px 0;
   width: 98%;
+  /*Von*/
+  /*An*/
+  /*Kopie*/
+  /*Blindkopie*/
+  /*Betreff*/
+  /*HTML Box*/
 }
 #mail-compose .mailComposeHeaders span,
 #mail-compose .mailComposeHeadersSection span {
@@ -967,9 +1041,91 @@ div#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubje
 #mail-compose .mailComposeHeadersSection div.ms-res-item-active span {
   color: #FFFFFF;
 }
+#mail-compose .mailComposeHeaders select#mail-compose_mailaccount,
+#mail-compose .mailComposeHeadersSection select#mail-compose_mailaccount {
+  width: 100%;
+}
+#mail-compose .mailComposeHeaders span#mail-compose_cc_expander,
+#mail-compose .mailComposeHeadersSection span#mail-compose_cc_expander {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -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);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  color: #000000;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
+  background-color: #b4b4b4;
+  float: left;
+  width: 47px;
+  margin: 3px;
+  font-size: 8px;
+  margin-left: 12px;
+}
+#mail-compose .mailComposeHeaders span#mail-compose_cc_expander:hover,
+#mail-compose .mailComposeHeadersSection span#mail-compose_cc_expander: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);
+  background-color: #189800;
+  color: #ffffff;
+}
+#mail-compose .mailComposeHeaders span#mail-compose_bcc_expander,
+#mail-compose .mailComposeHeadersSection span#mail-compose_bcc_expander {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -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);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  color: #000000;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.5s;
+  -moz-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  transition-timing-function: linear;
+  background-color: #b4b4b4;
+  float: left;
+  width: 47px;
+  margin: 3px;
+  font-size: 8px;
+  margin-left: 12px;
+}
+#mail-compose .mailComposeHeaders span#mail-compose_bcc_expander:hover,
+#mail-compose .mailComposeHeadersSection span#mail-compose_bcc_expander: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);
+  background-color: #189800;
+  color: #ffffff;
+}
 #mail-compose .mailComposeHeaders input#mail-compose_subject,
 #mail-compose .mailComposeHeadersSection input#mail-compose_subject {
-  max-width: 750px;
+  max-width: 716px;
+}
+#mail-compose .mailComposeHeaders input#mail-compose_mimeType,
+#mail-compose .mailComposeHeadersSection input#mail-compose_mimeType {
+  margin-left: 12px;
 }
 #mail-compose fieldset.mailSignature {
   font-size: 0.8em;
diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less
index 032f321880..d04a5e6217 100755
--- a/mail/templates/pixelegg/app.less
+++ b/mail/templates/pixelegg/app.less
@@ -2,7 +2,7 @@
  * EGroupware: CSS with less preprocessor
  *
  * Mail
- * 
+ *
  * Please do NOT change app.css directly, instead change app.less and compile it!
  *
  * @link http://www.egroupware.org
@@ -85,7 +85,7 @@ div#mail-index{
                 // Filter
                 div.filters{
                     // Fläche
-                    
+
                     select {margin-top: 6px;}
 
                     select#mail-index_filter{
@@ -134,9 +134,9 @@ div#mail-index{
 
             margin: 0;
             .background_color_5_gray;
-            
-            
-            
+
+
+
             // From
             div#mail-index_mailPreviewHeadersFrom{
                 width: 50%;
@@ -212,7 +212,7 @@ div#mail-index{
     // Create Feld
     #mail-index_buttonmailcreate{
         margin-left: 0px;
-        
+
 
 
                     // #####################################################
@@ -220,7 +220,7 @@ div#mail-index{
 
                     button#mail-index_button[mailcreate],
                     button[id*="mailcreate"]{
-                             
+
                         .Complete_Button_add;
                                     background-image: url("images/write_mail_lighter.png") !important;
                                     background-position: right center !important;
@@ -237,15 +237,15 @@ div#mail-index{
                                 }
 
                         &:active {
-                                background-color: @color_positive_action_active !important;    
+                                background-color: @color_positive_action_active !important;
                                 .border_radius_button_lefttop ;
                                 .box_shadow_standard_light_inset;
-                                   
+
                                 }
                     }
-        
-        
-    } 
+
+
+    }
 
 
     // Mail Liste der Postfächer
@@ -256,16 +256,16 @@ div#mail-index{
     .dtree {
         .basefontfamily;
     }
-    
-    
-    /*new mail in FOlder 
+
+
+    /*new mail in FOlder
     span.standartTreeRow b {color: @egw_color_2_a;}
-  */  
+  */
     /*move Mail*/
     .draggedOver {
-        background-color: @color_hint;  
+        background-color: @color_hint;
     }
- 
+
 
 } // Ende Sidebox
 
@@ -273,9 +273,9 @@ div#mail-index{
  *       E-Mail Dialog "Compose"
  *
  * ##################################################################################
- */    
-    
-    
+ */
+
+
 /*###########################################
 #                                           #
 #                                           #
@@ -301,112 +301,155 @@ div#mail-index{
     //	gesamtbreite
     width: 870px;
     padding: 5px;
-    
-    img[src$="svg"]{
-            .gradient_vertical (@egw_color_2_e, @egw_color_2_e);
-}
-    
-    
+
+
+
+
     // ##################################
     //	Identity
     .mailComposeHeaders:first-child{
-        
+
         /*background-color: @gray-0;*/
-        .gradient_thead;
+        /*.gradient_thead;*/
     }
-    
+
 
 
     // ##################################
     //	Toolbar
 
     .mail-compose_toolbar{
-        
-        .dimension_height_l;
-        
+
+        float: left;
+        width: 100%;
+
+        span.email-button-group {
+            margin: 3px 4px 4px 4px;
+            padding: 2px;
+            background-color: @gray_20;
+            /*.background_linear_gradient !important;*/
+            .dimension_height_m;
+            .rounded (5px);
+        }
+
+        span.sent {float: left;}
+        span.save {float: left;}
+        span.file {float: left;}
+        span.egw {float: left;
+                  img{
+                        .dimension_height_s;
+                        padding: 1px;
+                        margin: 3px;
+                        vertical-align: middle;
+                  }
+        }
+        span.notification {float: left;
+                    span.et2_label {line-height: 25px;}       
+        }
+        span.priority {float: left;
+                    span.et2_label {line-height: 25px;}    
+        }
+
         button.et2_button {
             .dimension_height_m;
 /*             &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
              &:focus {.box_shadow_standard_light_inset; .background_color_15_gray;}*/
         }
-        
-        img{
-             .dimension_height_s;
 
+        img{.dimension_height_m;}
+        img[src$="svg"]{ 
+            .gradient_vertical (@gray_30, @gray_40); 
+            background-color: @gray_60; 
+            .dimension_height_m;
+            &:hover {
+                .box_shadow_standard_light_hover; 
+                background-color:@color_positive_action;
+                .gradient_vertical (@color_positive_action, @color_positive_action); 
+            }
         }
-        
-        
-        // Button senden -> dev_buttons.less
+
+        span.et2_label {font-size: 9px;}
+
+        /*######################################*/
+        /*// Button senden -> dev_buttons.less*/
         .mail-compose_button{
-            margin-right: 15px !important;
+            /*margin-right: 15px !important;*/
             padding: 0 3px 0 0;
             text-align: left;
             font-weight: bold;
-            padding-left: 30px;
-            width: 7em;
+            padding-left: 20px;
+            width: 71px;
 
             background-image: url(images/mail_send.png) !important;
             background-position: left;
             background-repeat: no-repeat;
             background-size: 16px 16px;
-
-        }
-
-        // Save + Print
-        img[id="mail-compose_button[saveAsDraftAndPrint]"],
-        img[id="mail-compose_button[saveAsDraft]"]{
-            vertical-align: middle;
-            padding: 3px;
-            .Complete_Button_Icon_normal;
+            background-color: @egw_color_2_a;
+            color: @gray_0;
             &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
 
         }
+        /*######################################*/
+        // Save + Print
+
+        img[id="mail-compose_button[saveAsDraftAndPrint]"],
+        img[id="mail-compose_button[saveAsDraft]"]{
+            vertical-align: middle;
+            padding: 1px;
+            margin: 3px;
+            .Complete_Button_Icon_normal;
+            .dimension_height_s;
+            
+            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
+
+        }
+        /*######################################*/
+        // file
 
-        
-        
-        
         // Dateimanager
         img[id="mail-compose_selectFromVFSForCompose"] {
-            margin-left: 15px !important;
+            /*margin-left: 15px !important;*/
+            .dimension_height_s;
+            padding: 1px;
+            margin: 3px;
             vertical-align: middle;
-            padding: 3px;
+            float: left;
             .Complete_Button_Icon_normal;
             &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
             &:focus {.box_shadow_standard_light_inset; .background_color_15_gray;}
         }
-        
 
         // Dateien Upload
         .et2_file,
         .mail-compose_fileselector{
-            
-            
+
+            float: left;
             vertical-align: middle;
-            
+
             input#mail-compose_uploadForCompose{
 
-                        font-size: 0.7em;
+                        /*font-size: 0.7em;*/
                         .Complete_Button_text_icon_before;
                         background-image: url(images/attach.png) !important;
                         .background_color_5_gray;
-                        height: 20px;
-                        margin-left: 5px;
+                        height: 16px;
+                        margin-left: 2px;
+                        margin-top: 2px;
                         &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
 
                         &:focus {.box_shadow_standard_light_inset; .background_color_15_gray;}
 
               }
 
-            div.progress {width: 230px;}
+            div.progress {width: 212px;}
         }
 
-        // Speichern als
-        span.et2_label {font-size: 0.7em;}
-
+        /*######################################*/
+        /*save / Speichern als */
         //als Infolog
         #mail-compose_to_infolog{
-
-            margin-right: 15px !important;
+            
+            margin-right: 5px !important;
             &:hover{
             .scale;
             }
@@ -414,19 +457,16 @@ div#mail-index{
         //als Ticket
         input[id="mail-compose_to_tracker"]{
 
-            margin-right: 10px !important;
+            margin-right: 5px !important;
             &:hover {
-               .scale;
-                
+                .scale;
             }
-
         }
-
-
+        /*######################################*/
         // Empfangsbenachrichtigung
         #mail-compose_disposition{
 
-            margin-right: 10px !important;
+            margin-right: 0px !important;
             &:hover {
                 .scale;
             }
@@ -435,24 +475,16 @@ div#mail-index{
 
         // Priorität
         #mail-compose_priority{
-/*            vertical-align: middle;
-            height: 20px;
-            padding: 3px 2px;
-            .Complete_Button_Icon_normal;*/
-            margin-right: 3px;
-            font-size: 0.8em;
-
+            margin-right: 0px;
+            font-size: 9px;
             span.et2_label {margin-right: 3px;}
-
-
         }
-
-
     } // Toolbar Ende
 
 
-    // #############################
-    // Mail Header
+    /*// ###############################################################################*/
+    /*// Mail Header*/
+    table.et2_grid {float: left;}
 
     .mailComposeHeaders,.mailComposeHeadersSection{
         margin: 2px 0;
@@ -460,7 +492,6 @@ div#mail-index{
 
         span { width: 8em; font-size: 0.8em; text-align: right; padding-right: 5px;}
 
-
         div{ max-width: 770px; 	}
 
         // Automatische Auwahlliste
@@ -470,10 +501,35 @@ div#mail-index{
             span {color: #FFFFFF;}
         }
 
-
-        // Betreff
-        input#mail-compose_subject { max-width: 750px;}
-
+        /*Von*/
+        select#mail-compose_mailaccount {width: 100%;}
+        /*An*/
+        
+        /*Kopie*/
+        span#mail-compose_cc_expander{
+            .Complete_Button_normal;
+            float: left;
+            width: 47px;
+            margin: 3px;
+            font-size: 8px;
+            margin-left: 12px;
+            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action; color: @gray_0;}
+        }
+        /*Blindkopie*/
+        span#mail-compose_bcc_expander{
+            .Complete_Button_normal;
+            float: left;
+            width: 47px;
+            margin: 3px;
+            font-size: 8px;
+            margin-left: 12px;
+            &:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;color: @gray_0;}
+        }
+        /*Betreff*/
+        input#mail-compose_subject { max-width: 716px;}
+        
+        /*HTML Box*/
+        input#mail-compose_mimeType {margin-left: 12px;}
 
     } // Ende Header
 
@@ -493,13 +549,13 @@ div#mail-index{
 
     // Anhang
     fieldset.mailUploadSection{
-        
+
         font-size: 0.8em;
         border: none;
         margin: 8px 0;
         .background_color_15_gray;
     }
-    
+
 
 
 } // Ende Dialog
@@ -516,9 +572,9 @@ div#mail-index{
     .mailDisplayHeaderSection{
         top: 0;
         position: relative;
-        
-        
-        
+
+
+
         /*Toolbar*/
         #mail-display_toolbar{
             background-color: @egw_color_2_e;
@@ -530,7 +586,7 @@ div#mail-index{
                 .Complete_Button_Icon_normal;
                 height: 20px;
             }
-            
+
             button[id*="toolbar-composeasnew"],
             button[id*="toolbar-reply"],
             button[id*="toolbar-reply_all"],
@@ -545,13 +601,13 @@ div#mail-index{
             button[id*="toolbar-delete"]{
                 &:active {background-color: @color_negative_action_active;}
             }
-            
+
             button[id*="toolbar-infolog"],
             button[id*="toolbar-tracker"]{
                 &:active {background-color: .background_color_15_gray;}
             }
-            
-            
+
+
             span.ui-state-default{
                 float: left;
                 background-image: none;
@@ -1204,27 +1260,27 @@ input[type=button] {
     padding: 0px;
     height: auto;
 }
- 
- 
- 
+
+
+
 #mail-index_toolbar {
     padding: 0px;
     background: none;
     margin: 5px 5px 0 0;
     border: none;
 
-    
+
     /* Elemente */
-      
+
            button {
                 .dimension_width_height_m !important;
                 background-color: @gray_10;
-                
+
                 img[src$="svg"]{
             .gradient_vertical (@gray_30, @gray_100);
-                }                
+                }
+
 
-                
                     span {
                             padding: 0;
 
@@ -1234,12 +1290,12 @@ input[type=button] {
 
                             }
                         }
-             
-                    
-     
-                    
+
+
+
+
             }
-            
+
             button[id*="toolbar-composeasnew"],
             button[id*="toolbar-reply"],
             button[id*="toolbar-reply_all"],
@@ -1259,14 +1315,14 @@ input[type=button] {
                 &:hover {background-color: @color_negative_action;}
                 &:active {background-color: @color_negative_action;}
             }
-            
+
             button[id*="toolbar-infolog"],
             button[id*="toolbar-tracker"]{
                 &:focus {background-color: @egw_color_1_a;}
                 &:hover {background-color: @egw_color_1_a;}
                 &:active {background-color: @egw_color_1_a;}
             }
-    
+
 
 }
 
@@ -1279,11 +1335,11 @@ div.mailPreviewHeaders div.mail_extraEmails {
     max-width: 50%;
     overflow: hidden;
     text-overflow: ellipsis;
-    
+
     img.et2_button_icon {
-        
+
         .dimension_width_height_m;
-        
+
     }
 }
 
@@ -1309,10 +1365,10 @@ div.mailPreviewHeaders div.mail_extraEmails {
 
 /* Button after field*/
 #mail-index_mailPreviewHeadersAttachments{
-    
-    
+
+
     img.et2_button_icon {.dimension_width_height_xs;}
-    
+
 }
 
 
@@ -1357,7 +1413,7 @@ div.mailComposeHeaders > span:first-child {
 }
 div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > * {
     margin-left: 3px;}
-    
+
 #mail-importMessage{
 	.et2_button_icon{
         			height: auto;
