egroupware_official/mail/templates/pixelegg/app.less

/**
 * 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
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhard <stefan.reinhard@pixelegg.de>
 * @package mail
 * @version $Id$
 */

@import (reference) "../../../pixelegg/less/layout_definitions.less";
@import (reference) "../../../pixelegg/less/definitions.less";
@import (reference) "../../../pixelegg/less/def_mobile.less";
@import (less) "../default/app.css";

#popupMainDiv{
	padding: 5px;
	.et2_grid{
		tr{
			td{
			padding: 5px 0;
			}
		}
	}
}
/*##############################################
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #       iframe                  #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
##############################################
*/

/*Border around iframe*/
iframe#mail-display_mailDisplayBodySrc{
	height: 99%;
	/*border: 4px solid yellow;*/

}
/*Border around iframe*/
.mailDisplayContainer{
	border: 0px;
}

body {
	background-color: white;
}

#mail-index {

	/* Keeps the scrollbar in the window in chrome */
	margin-right: -10px;

	// Box mit Header und Liste
	div#mail-index_nm {
		// Header
		div.nextmatch_header {

			// Filter
			div.filters {
				// Fläche
				select {margin-top: 9px;}
			} // Ende Filter
		} // Ende Header

		// Bilder in den Listen
		tr.mail td img {
			max-height: 50px;
			.box_shadow_none;
			.border_none;
		}
		tr.mail td img[src*="svg"] { .gradient_vertical (@gray_70, @gray_70);}

		tr.mail div span {.box_shadow_none;}
	} // Ende: Box mit Header und Liste
	div.splitter-bar {
		background-color: rgba(179, 39, 39, 0);
		border-right: 0;
		border-top: 0;
		border-bottom: 0;
	}
	div.splitter-bar-horizontal {
		border-top:1px solid #B4B4B4;
		border-left:0;
	}

// Ansicht der Emails
	div#mail-index_mailPreview {
		margin: 0;
		// From
		div#mail-index_mailPreviewHeadersFrom {
			width: 50%;
		}

		// An
		div#mail-index_mailPreviewHeadersTo {
			width: 50%;
		}

		// Date
		div#mail-index_mailPreviewHeadersDate {
			position: absolute;
			right: 0px;
			margin: 3px 5px 0 0;
		}

		// Subject
		div#mail-index_mailPreviewHeadersSubject {
			width: 58%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		div#mail-index_mailPreviewHeadersSubject > span {
			white-space: nowrap;
		}
	} // Ende: Ansicht der Emails
} // iframe

/*##############################################
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#   Side     #                               #
#   bar      #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
#            #                               #
############################################## */

.egw_fw_ui_category_content {

	// Mail Liste der Postfächer
	span#mail-tree_target {
		max-height: 50%;
	}

	.dtree {
		.basefontfamily;
	}

	// color - selected tree item
	.selectedTreeRow, .selectedTreeRow_lor {background-color: @egw_color_1_a; color: @gray_90;text-decoration: none;}

	.standartTreeRow_lor {background-color: rgba(103, 159, 210, 0.2); color: @gray_90;text-decoration: none;}
} // Ende Sidebox

/* ##################################################################################
 *       E-Mail Dialog "Compose"
 *
 * ##################################################################################
 */


/*###########################################
#                                           #
#                                           #
#############################################
#                                           #
#                                           #
#                                           #
#                                           #
#                                           #
#                   dialog                  #
#                                           #
#                                           #
#############################################
#                                           #
#    buttons                                #
#                                           #
#                                           #
##############################################*/

#mail-compose_mail_plaintext {white-space: pre-wrap !important}

#mail-compose {
	padding: 5px;
	max-height: 99%;

	// ##################################
	//	Identity
	.mailComposeHeaders:first-child {

		/*background-color: @gray-0;*/
		/*.gradient_thead;*/
	}

	// ##################################
	//	Toolbar
	.et2_toolbar button.toolbar_toggled {
		&:hover{
			background-color: white !important;
		}
	}

	#mail-compose_composeToolbar {

		// Senden Button
		button#composeToolbar-send {
			background-color: @color_positive_action;
			color: @gray_0;
			&:hover {.box_shadow_standard_light_hover; background-color:@color_positive_action;}
			&:disabled {background-color: @color_disabled !important;}
		}
		button#composeToolbar-to_infolog:hover,
		button#composeToolbar-to_tracker:hover,
		button#composeToolbar-disposition:hover,
		button#composeToolbar-to_calendar:hover {
			background-color: @egw_color_1_a;;
		}
	} // Toolbar Ende

	table.et2_grid  {display: inline-block;}
	/*// ###############################################################################*/
	/*// Mail Header*/

	.mailComposeHeaders,.mailComposeHeadersSection {
		margin: 2px 0;
		width: 98%;

		span {
			text-align: right;
			padding-right: 5px;
		}

		span.ms-close-btn, span.ms-edit-btn {
			padding-right: 0px;
		}

		div{ max-width: 770px; 	}

		// Automatische Auwahlliste
		span.ui-state-error {color: @color_error;}
		div.ms-res-item-active {
			background: @egw_color_2_a;
			span {color: #FFFFFF;}
		}

		/*Von*/
		select#mail-compose_mailaccount {width: 100%; height: 30px;}
		/*An*/
		#mail-compose_to input {width:auto;}
		/*Kopie*/
		span#mail-compose_cc_expander,
		/*Blindkopie*/
		span#mail-compose_bcc_expander,
		span#mail-compose_folder_expander,
		span#mail-compose_replyto_expander{
			.Complete_Button_normal;
			float: left;
			width: 55px;
			margin: 3px;
			font-size: 8px;
			margin-left: 12px;
			padding:0;
			&: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

	// Mail Body


	// Signature
	fieldset.mailSignature {
		font-size: 0.8em;
		border: none;
		margin: 8px 0;
		select {}
		span {margin:0px 8px;}
	}

	 // File sent as...
	div.mailUploadSection {
		border-top: 0px solid silver;
		margin-top: 16px;
		width: 99%;
		// File Compose Elements
		div.et2_hbox {
			margin: -11px 0 5px -4px;
			label { margin-right: 10%;}
		}
		// Table - attachments
		#mail-compose_attachments {
			border-top: 1px solid silver;
		}
	}

	fieldset.mailUploadSection {
		border-top: 0px solid silver;
		font-size: 0.8em;
		margin: 8px 0;
		border-bottom: none;
		border-left: none;
		border-right: none;
		width: 99%;
	}
} // Ende Dialog

/* ##################################################################################
 *       E-Mail Dialog "Ansehen"
 *          Preview
 * ##################################################################################
 */

#mail-display {
	//	gesamtbreite

	min-height: 768px;
	padding: 5px;

	/*Toolbar*/
	.et2_toolbar,
	#mail-display_toolbar,
	mail-display_displayToolbar {

	/*.gradient_thead;*/
	background-color: transparent;
	.color_100_gray;
	clear: both;
	height: 36px;

	// all buttons
	div.et2_toolbar_actionlist {
		margin-top: 0px;
		margin-left: 0px;
	}

	button {
		.Complete_Button_Icon_normal;
		height: 24px;
	}

	button[id*="toolbar-composeasnew"],
	button[id*="toolbar-reply"],
	button[id*="toolbar-reply_all"],
	button[id*="toolbar-forward"],
	button[id*="toolbar-print"],
	button[id*="toolbar-save"],
	button[id*="toolbar-header"]{
		&:active {background-color: @color_positive_action_active;}
	}

	button[id*="toolbar-unflagged"],
	button[id*="toolbar-delete"]{
		&:active {background-color: @color_negative_action_active;}
	}

	button[id*="toolbar-infolog"],
	button[id*="toolbar-tracker"],
	button[id*="toolbar-calendar"] {
		&:active {background-color: .background_color_15_gray;}
	}


	span.ui-state-default {
		float: left;
		background-image: none;
	}

	// Button ?

	// Button antworten

	// allen antworten

	// Forward
	#mail-display_forward_wrapper {

		&:hover {}
		&:focus {}
		li {
			a {
				img { width: 16px;margin-right: 3px;}
			}
		}
	}

	// speichern
	#mail-display_save_wrapper {
		&:hover {}
		&:focus {}
		// das Wort speichern
		button#mail-display_save {
			background-image: url('../pixelegg/images/speichern.png');
			background-position: left center;
			background-repeat: no-repeat;
			background-size: 16px 16px;
			box-shadow: none;
			&:hover {
				img {display: none; background-image: none;}
			}
			&:focus {box-shadow: none; }
		}
		li {
			a {
				img { width: 16px;margin-right: 3px;}
			}
		}
	}
	// anzeigen

	#mail-display_view_wrapper {
		&:hover {}
		&:focus {}
		button#mail-display_view {
			box-shadow: none;
			&:hover {
				img {display: none; background-image: none;}
			}
			&:focus {box-shadow: none; }
		}
		li {
			a {
				img { width: 16px;margin-right: 3px;}
			}
		}
	}
	// mark

	#mail-display_mark_wrapper {

		&:hover {}
		&:focus {}

		button#mail-display_mark{
			box-shadow: none;

			&:hover {
				img {display: none; background-image: none;}
			}

			&:focus {box-shadow: none; }
		}

		li {
			a {
				img { width: 16px;margin-right: 3px;}
			}
		}
	}

	/*OPEN SINGLE WINDOW AFTER CLICK ON MAIL*/
   // ###################### buttons##############################
   // #      #      #     #     #     #     #     #     #     ####
   // #      #      #     #     #     #     #     #     #     ####
   // ############################################################
   #toolbar-actionlist {

				   padding: 0px 3px;
				   span[data-group] {margin: 0px 40px 0 0;}
					button {
						   .Complete_Button_Icon_normal;
						   height: 27px;
							   [src*="svg"]{
								.gradient_vertical (@gray_90, @gray_90);
										   }
						   }
				   button[id*="toolbar-composeasnew"],
				   button[id*="toolbar-reply"],
				   button[id*="toolbar-reply_all"],
				   button[id*="toolbar-forward"],
				   button[id*="toolbar-print"],
				   button[id*="toolbar-save"],
				   button[id*="toolbar-header"]{
					   &:hover {background-color: @color_positive_action_active;}
					   &:active {background-color: @color_positive_action_active;}
				   }

				   button[id*="toolbar-unflagged"],
				   button[id*="toolbar-delete"]{
					   &:hover {background-color: @color_negative_action_active;}
					   &:active {background-color: @color_negative_action_active;}
				   }

				   button[id*="toolbar-infolog"],
				   button[id*="toolbar-tracker"],
				   button[id*="toolbar-calendar"]{
					   &:hover {background-color: @egw_color_1_a;}
					   &:active {background-color: .background_color_15_gray;}
				   }

	   }


	}
	// Dateianhänge

	.mailDisplayAttachments {
		//	background-color:#efefdf;
		max-height: 12%;
		position: fixed;
		border: 0px solid @egw_color_3_a;

		border-bottom: 0px;
		opacity: 1;
		-moz-opacity:1;
		//	filter: Alpha(opacity=100);
		margin-left: 10px;
		width:98%;
		img {width: 16px;}

	}
	.mail_DisplayNone{
		display: none;
	}

} // Ende Display


// Toolbar ...from Hadi
/**
* et2_toolbar
*/

.et2_toolbar-dropdown {
	background: @gray_10 !important;
	background-color: @gray_10 !important;
	button {
		background: @gray_10 !important;
		background-color: @gray_10 !important;
		&:hover{}
	}
}

.et2_toolbar-dropdown-menulist {
	button {
		background: @gray_10 !important;
		background-color: @gray_10 !important;
		&:nth-child(2){}
	}
	ul{ }
}


div.ui-toolbar-menulist {
	.border_normal;
}
.ui-toolbar-menulist {
	h {
		padding-bottom: 7px;
		margin: 0;
	}
	div{
		background-color: @gray_10 !important;
		.border_normal;
	}
}

// all used button in toolbar
.et2_toolbar_actionlist {
	// zusammengesetzte Buttons
	.et2_toolbar-dropdown {
		margin: -4px 5px 2px 1px;
		.rounded(3px);
		.et2_dropdown {
			.box_shadow_none;
			border: none !important;
			height: 24px !important;

			button {
				margin: 0px;
				padding-top: -3px !important;
				.box_shadow_none;
				background: @gray_10 !important;
				background-color: @gray_10 !important;
				img {
					.dimension_width_height_s;
					top: 3px;
				}
			}
		}
		.et2_button_icon
		{
		   .dimension_height_xs;
		}
	}
}


// aufgeklappte Toolbar
div#displayToolbar-menulist {
	.et2_dropdown {
		.box_shadow_none;
		border: none !important;
		button {.box_shadow_none;}
	}
	img {.dimension_width_height_sm; }
}

/* ##################################################################################
 *     Dialog: Subscripe Folder
 *
 * ##################################################################################
 */
#mail-subscribe, #mail-folder_management {
	table.et2_grid tr td {
		padding: 0px;
		/*Label*/
		.mail_subscription_header {
		   .headline_h2;
		   line-height: 2em;
		   font-weight: bold;
		   font-size: 150%;
		   padding-bottom: 20px;

		}
		// Folder List
		div.et2_box {
		 margin-top: 16px;
		 height: 484px;
		 overflow: auto;
		}
	}
	// color - selected tree item
	.selectedTreeRow,.selectedTreeRow_lor {background-color: @egw_color_1_a; color: @gray_90;text-decoration: none;}
	// color - hover over standard tree item
	.standartTreeRow_lor {background-color: rgba(103, 159, 210, 0.2); color: @gray_90;text-decoration: none;}
} // #mail-subscribe

.mail_subscription_header, .mail_folder_management_header
{
	font-weight: bold;
	font-size: 150%;
	padding-bottom: 20px;
}

/* ##################################################################################
 *       E-Mail
 *
 * ##################################################################################
 */

/* felamimail uses the styledefinitions below to format navButton/navSeparator */
tr.navbarBackground {
	background-color:#dddddd;
}

div.navButton {
	background-color:#dddddd;
	float:left;
	padding: 2px;
	margin: 2px;
	border: solid #dddddd 1px;
}

div.navButton:hover, div.navButtonHover {
	background-color:#eeeeee;
	float:left;
	padding: 2px;
	margin: 2px;
	border: solid white 1px;
	border-right: solid black 1px;
	border-bottom: solid black 1px;
	position: relative;
}

div.navButton:active, div.navButtonActive {
	background-color:#dddddd;
	float:left;
	padding: 2px;
	margin: 2px;
	border: solid white 1px;
	border-left: solid black 1px;
	border-top: solid black 1px;
	position: relative;
}

div.navSeparator {
	background-color:#dddddd;
	float:left;
	padding: 0px;
	margin: 2px;
	border: solid silver 1px;
	height:24px;
	position: relative;
}

/* Fixes z-index problem with the calendar year selection (displays behind selectboxes)*/
.calendar .combo {
	z-index: 1 !important;
}

//#############################################################################################
// mail/templates/app.css

textarea
{
	font-family: monospace, sans-serif;
	font-size: 110%;
}

.defaultProfile { color:#000000; font-weight:bold !important; }
.quoted1 { color:#660066; }
.quoted2 { color:#007777; }
.quoted3 { color:#990000; }
.quoted4 { color:#000099; }
.quoted5 { color:#bb6600; }

tr.mail div {
	cursor: default;
	white-space: normal;
	text-overflow: ellipsis;
	span {text-overflow: ellipsis;white-space: noWrap;}
}

tr.mail a {
	cursor: pointer;
	white-space: nowrap;
	text-overflow: ellipsis;
}

tr.recent div,
tr.recent span,
tr.recent time,
tr.recent a,
tr.unseen div,
tr.unseen span,
tr.unseen time,
tr.unseen a {
	color: #003075;
	font-weight: bold;
}

tr.mail.labelone td:first-child {
	border-left:6px solid #ff0080 !important;
}
tr.mail.labeltwo td:first-child {
	border-left:6px solid #ff8000 !important;
}
tr.mail.labelthree td:first-child {
	border-left:6px solid #008000 !important;
}
tr.mail.labelfour td:first-child {
	border-left:6px solid #0000ff !important;
}
tr.mail.labelfive td:first-child {
	border-left:6px solid #8000ff !important;
}

tr.mail.flagged td:first-child {
	border-left:6px solid #ff0000 !important;
}

tr.mail.prio_high td:first-child {
	border-left:6px solid #ac0000 !important;
}

tr.mail.deleted td:first-child {
	border-left:6px solid silver;
	text-decoration : line-through;
}

span.status_img {
	display: inline-block;
	width: 12px;
	height: 12px;
	background-repeat: no-repeat;
	background-image: url(../pixelegg/images/kmmsgread.png);
	background-size: 12px 12px;
}

tr.deleted span.status_img {
	background-image: url(../pixelegg/images/kmmsgdel.png);
}

tr.unseen span.status_img {
	background-image: url(../pixelegg/images/kmmsgunseen.png);
}

tr.flagged_seen span.status_img {
	background-image: url(../pixelegg/images/read_flagged_small.png) !important;
}

tr.flagged_unseen span.status_img {
	background-image: url(../pixelegg/images/unread_flagged_small.png) !important;
}

tr.recent span.status_img {
	background-image: url(../pixelegg/images/kmmsgnew.png) !important;
}

tr.replied span.status_img {
	background-image: url(../pixelegg/images/kmmsgreplied.png) !important;
}

tr.forwarded span.status_img {
	background-image: url(../pixelegg/images/kmmsgforwarded.png) !important;
}

.subjectBold
{
	font-size: 12px;
	font-weight : bold;
	font-family : Arial;
}

.subject
{
	font-size: 12px;
	font-family : Arial;
}

TR.sieveRowActive
{
	font-size: 11px;
	height : 20px;
	padding: 0;
	background : White;
}

A.sieveRowActive
{
	font-size: 11px;
	height : 14px;
	padding: 0;
}

TR.sieveRowInActive
{
	font-size: 11px;
	height : 20px;
	padding: 0;
	background : White;
	color: Silver;
}

A.sieveRowInActive
{
	font-size: 11px;
	height : 14px;
	padding: 0;
	color: Silver;
}

.bodyDIV {
	position:absolute;
	background-color:white;
	top:134px;
	bottom:0px;
	width:100%;
	border-top: 1px solid #efefdf;
}

.bodyDIVAttachment {
	bottom:80px;
}

#attachmentSpanAllDIV{
	background-color:#efefdf;
	height:260px;
	overflow:auto;
}

#attachmentDIV {
	position:fixed;
	background-color:#efefdf;
	bottom:0px;
	min-height:80px;
	max-height:239px;
	width:100%;
	border-top: 1px solid silver;
	overflow:auto;
}

#popupattachmentDIV {
	background-color:#efefdf;
	bottom:0px;
	min-height:80px;
	max-height:239px;
	width:100%;
	border-top: 1px solid silver;
	overflow:auto;
}

pre {
	white-space: pre-wrap; /* Mozilla, since 1999 */
	white-space: -o-pre-wrap; /* Opera 7 */
	width: 99%;
}

/*
 avoid the vertical scrollbar within the sidebox section (triggered by the vertical dimension of the tree)
*/
.divSidebox {
	overflow: hidden;
}
.textSidebox {
	overflow-x: hidden;
	overflow-y: auto;
}
/*
 avoid the vertical scrollbar within the actual tablecontainer (of the tree)
*/
.containerTableStyle {
	width: 100%;
	overflow: hidden;
}


.dtree {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666;
	white-space: nowrap;

	div {
		width: 100%;
	}
	img {
		border: 0px;
		vertical-align: middle;
	}
	a {
		color: #333;
		text-decoration: none;
	}
	a.node, a.nodeSel {
		white-space: nowrap;
		padding: 1px 2px 1px 2px;

		&:hover{
			color: #333;
			text-decoration: underline;
		}
	}

	a.nodeSel {
		background-color: #c0d2ec;
	}
	.clip {
		overflow: hidden;
	}
	table, tr, td {
		border: none;
	}
	table {
		overflow: hidden;
		width: 100%;
		display: table-row;
	}

	// Ende dtree
}

.useEllipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	word-wrap: break-word;
}




#mail-index {
	position: relative
}

/*
 influence the tree display and scrolling behavior
*/
#mail-tree_target {
	min-height: 35px;
	max-height: 450px;
	display: block;
	display: -moz-inline-stack;
	display: -moz-box;
	width: 100%;
	overflow: hidden;
	overflow-y: auto;
	z-index:100;
}
/*
 we need the the image displayed with our buttons on the left side
*/
input[type=button] {
	background-position: left;
}

#mail-index_messageIFRAME {
	width: 100%;
	height: 100%;
	border: 0;
}

//#mail-index_button\[mailcreate\]

#mail-index_button[id*="mailcreate"] {
	width: 99%;
	text-align: left;
	font-weight: bold;
	padding-left: 25px;
	background-image: url(../pixelegg/images/write_mail.png) !important;
	background-position: left;
	background-repeat: no-repeat;
}

//#mail-compose_button[id*="send"] {
//	text-align: left;
//	font-weight: bold;
//	padding-left: 30px;
//	width: 80px;
//	margin: 0px !important;
//	background-image: url(images/mail_send.png) !important;
//	background-position: left;
//	background-repeat: no-repeat;
//}
.mailDisplay {
	position: relative;
	background-color: transparent;
	width: 100%;
}
#mail-index_mail-index-header_right {
	display: inline-flex;
}
#mail-index_mailPreview {
	overflow: hidden;
	position: relative;
	margin-top: 5px;
}
#mail-compose_fileselector {
	width: 245px !important;
}

.mailPreviewIcons {
	position: absolute;
	right: 0;
	top: 0;
}

// Headerbereich grau hinterlegt
#mail-index_mailPreviewContainer {
	position: absolute;
	border-top: 1px solid silver;
	bottom: 0;
	left: 0px;
	right: 5px;
}

/*#######################################################*/
/*# ICON # ICON # ICON # ICON #ICON # ICON# ICON # ICON #*/
/*#######################################################*/

 /*Toolbar der Email*/
#mail-display_toolbar {
	padding: 0px;
}
#mail-display_toolbar > button > span {
	padding: .2em .4em;
}
#mail-display_toolbar > button > span > img {
	width: 16px;
	padding: 0px;
	height: auto;
}


// Button Toolbar - always visible
#mail-index_toolbar {
    background: none;
	height:35px;
    // alle Buttons / drag + drop
    #toolbar-actionlist{
        margin-top: 3px;
    }
    /* Elemente */
	button {
		height: 24px !important;
		img[src$="svg"] {
			.gradient_vertical (@gray_60, @gray_60);
			background-color: @gray_100;
		}
		span {
			padding: 0;

			img {
				.dimension_width_height_s ;
				padding: 0px;

			}
		}
	}

	button[id*="toolbar-composeasnew"],
	button[id*="toolbar-reply"],
	button[id*="toolbar-reply_all"],
	button[id*="toolbar-forward"],
	button[id*="toolbar-flagged"],
	button[id*="toolbar-print"],
	button[id*="toolbar-save"],
	button[id*="toolbar-header"] {
		&:focus {
			background-color: @color_positive_action;
			.gradient_vertical (@color_positive_action, @color_positive_action);
			img[src$="svg"] {
				.gradient_vertical (@color_positive_action, @color_positive_action);
				background-color: @color_positive_action;
			}
		}
		&:hover {
			background-color: @color_positive_action;
			.gradient_vertical (@color_positive_action, @color_positive_action);
			img[src$="svg"] {
				.gradient_vertical (@color_positive_action, @color_positive_action);
				background-color: @color_positive_action;
			}
			color:white;
		}
		&:active {
			background-color: @color_positive_action;
			.gradient_vertical (@color_positive_action, @color_positive_action);
			img[src$="svg"]{
			   .gradient_vertical (@color_positive_action, @color_positive_action);
			   background-color: @color_positive_action;
			}
		}
	}

	button[id*="toolbar-unflagged"],
	button[id*="toolbar-delete"]{
						&:focus {
			background-color: @color_negative_action;;
			.gradient_vertical (@color_negative_action, @color_negative_action);
					img[src$="svg"]{
				   .gradient_vertical (@color_negative_action, @color_negative_action);
				   background-color: @color_negative_action;
				   }

		}
		&:hover {
			background-color: @color_negative_action;
			.gradient_vertical (@color_negative_action, @color_negative_action);
					img[src$="svg"]{
				   .gradient_vertical (@color_negative_action, @color_negative_action);
				   background-color: @color_negative_action;
				   }
			color:white;

		}
		&:active {
			background-color: @color_negative_action;;
			.gradient_vertical (@color_negative_action, @color_negative_action);
					img[src$="svg"]{
				   .gradient_vertical (@color_negative_action, @color_negative_action);
				   background-color: @color_negative_action;
				   }

		}
	}

	button[id*="toolbar-infolog"],
	button[id*="toolbar-tracker"],
	button[id*="toolbar-calendar"] {
		&:focus {
			background-color: @egw_color_1_a;
			.gradient_vertical (@egw_color_1_a, @egw_color_1_a);
			img[src$="svg"] {
				.gradient_vertical (@egw_color_1_a, @egw_color_1_a);
				background-color: @egw_color_1_a;
			}
		}
		&:hover {
			background-color: @egw_color_1_a;
			.gradient_vertical (@egw_color_1_a, @egw_color_1_a);
			img[src$="svg"] {
				.gradient_vertical (@egw_color_1_a, @egw_color_1_a);
				background-color: @egw_color_1_a;
			}
		}
		&:active {
			background-color: @egw_color_1_a;
			.gradient_vertical (@egw_color_1_a, @egw_color_1_a);
			img[src$="svg"] {
				.gradient_vertical (@egw_color_1_a, @egw_color_1_a);
				background-color: @egw_color_1_a;
			}
		}
	}
}

/*AN / To*/
div.mailPreviewHeaders div.mail_extraEmails {
	display: inline-block;
	max-height: 1.3em;
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	img.et2_button_icon {
		.dimension_width_height_m;
	}
}

div.mailPreviewHeaders img.et2_button_icon {
	background-color: inherit;
}
// Anhänge an Email

#mail-index_previewAttachmentArea {
	//	background-color:#efefdf;
	.background_color_10_gray;
	border-color: @gray_10;
	.border_normal;
	max-height: 3.6em;
	//	filter: Alpha(opacity=100);

	img {.dimension_width_height_s;}
	td{padding: 2px;}

}
#mail-index_previewAttachmentArea.noContent {
	border:0px !important;
}

/* Button after field*/
#mail-index_mailPreviewHeadersAttachments {
	img.et2_button_icon {.dimension_width_height_xs; background-color: inherit;}
}

/*######################################################*/
/*Diplay : View                                         */
.mailDisplayContainer, .mailDisplayAttachments {
	display: block;
	display: -moz-inline-stack;
	display: -moz-box;
	width: 99%;
	overflow: hidden;
	overflow-y: auto;
	left: 3px;
	right: 3px;
	z-index: 100;
}
.mailDisplayContainer {
	position: fixed;
	overflow: hidden;
	overflow-y: auto;
	border-top: 2px solid silver;
	top: 120px;
	bottom: 108px;
	border-bottom: 1px solid silver;
	width: 98%;
	background-color: white;
	margin-left: 10px;
}

.mailDisplayHeaders {
	overflow: hidden;
}
.mailDisplayHeaderSection {
	position: absolute;
	top: 12px;
}
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;
}
div.mailComposeHeaders > span:first-child {
	width: 8em;
}
div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > * {
	margin-left: 3px;
}
div.mailDisplayHeaders div.mail_extraEmails {
	display: inline-block;
	max-height: 1.3em;
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
}
div.mailDisplayHeaders div.mail_extraEmails.visible {
	position: fixed;
	left: 7em;
	display: block;
	max-height: 8em;
	min-width: 30em;
	z-index: 999;
	overflow-y: auto;
	background-color: white;
}
#mail-importMessage{
	.et2_button_icon {
		height: auto;
		width: 24px;
	}
}
div.mailComposeHeaderSection > table {
	padding-top: 10px;
}

/* transition delay breaks splitter resize, because it doesn't get the right height
	in a right time. So we reduce the delay to 0.1 to fix the timing issue.
	The delay should not be set to 0 or none because it wil conflict with blueimp gallery plugin (Expose).
*/
:hover {
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}