/**
 *
 * Mail - Mobile
 *
 * Please do NOT change app.css directly, instead change app.less and compile it!
 * Pixleegg Template app.css
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Hadi Nategh <hn@stylite.de>
 * @package Mail
 * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
 */



@import (reference) "../../../pixelegg/less/def_buttons.less";
@import (reference) "../../../pixelegg/less/def_mobile.less";
@import (less) "../pixelegg/app.css";

/* tablets and smartphones  */
@media only screen and (max-device-width:1024px) {
	div.mailDisplayContainer{
		margin-top: 30px;
		margin-left:0;
		height: auto;
	}

	#mail-display.et2_container {
		min-height: initial;
		padding: 0;
	}

	.mailDisplayHeaders, .mailDisplayAttachments > * {
		font-size: large !important;
	}
	/*compose dialog*/
	body {
		#popupMainDiv {
			padding: 1px 8px 0 8px;
			background: none;
			
			div.et2_toolbar.et2_head_toolbar {
				padding: 1px 5px 5px 10px !important;
				button {
					width:46px;
					height:46px;
					background-size: 18px 18px;
				}
				button.et2_toolbar_hasCaption {
					width:auto;
				}
				div.et2_toolbar_actionlist {
					margin-left: 50px;
				}
				div.et2_toolbar_more {

					h.ui-state-hover {
						background:none;
					}
					h.ui-toolbar-menulistHeader {
						color:transparent;
						border: none;
						height: 46px;
						width: 35px;
						padding: 0 !important;
						margin-right: 15px;
						margin-top: -7px;
						&:hover {

						}
						&:after {
							font-size:18pt;
							content:"\205D";
							font-weight: bold;
							color:white;
						}
					}
					span {
						display: none;
					}
				}
			}
			#mail-compose_composeToolbar{
				// Senden Button
				button#composeToolbar-send{
					height: 46px;
					width: auto;
					margin-top: 0.7px !important;
					padding: 0 3px 0 0;
					text-align: left;
					font-weight: normal;
					padding-left: 20px;
					background-image: url(images/mail_send.png);
					background-position: left;
					background-repeat: no-repeat;
					background-size: 16px 16px;
					background-color: #fafafa;
					color: black;
					&:hover {box-shadow: none; background-color:none;}
					&:disabled {background-color: none;}
				}
			}
			
				
			#mail-display{
				.mail-d-h1{
					padding-bottom: 15px;
					border-bottom: 1px solid silver;
					span {
						.mob-fontsize-l;
					}
					.mob-fontsize-l;
					padding-top: 10px;
					font-weight: bold;
				}
				.mail-d-h2{
					padding-top: 5px;
					.mob-fontsize-n;
					color: grey;
					a,span,.et2_label {
						color: grey;
						.mob-fontsize-n;
					}
					a#mail-display_FROM>* {
						color:black;
						padding-top: 15px;
						.mob-fontsize-l;
					}
					
				}
				.et2_details {
					width: 50%;
					display: inline-block;
				}
				.et2_details.et2_details_expanded {
					width: 100%;
					display: block;
				}
				span.et2_details_title {
						color:#26537c;
						.mob-fontsize-n;
					}
				div#mail-display_mailDisplayHeadersFrom>*, {
					color:black;
					padding-top: 15px;
				}
				.mailDisplayAttachments {
					position: initial;
					padding: 0;
					margin-top: 10px;
				}
				button[id="displayToolbar-delete"] {
					margin-left: 0;
				}

				.mailDisplay {
					position: initial;
					margin-top: 20px;
				}
				#mail-display_mailDisplayBodySrc {
					display: none;
				}
				#tempPrintDiv {
					
					div:first-child {
						height:auto !important;
					}
					td, textarea {
						font-family: Verdana, Arial, Helvetica, sans-serif;

					}
					.td_display {
						font-family: Verdana, Arial, Helvetica, sans-serif;
						font-size: 120%;
						color: black;
						background-color: #FFFFFF;
					}
				}
				
			} 
		}
		
		.dtree {
			div.containerTableStyle {
				overflow: hidden;
			}
		}
		#mail-compose {
			.cke_chrome {
				border:none;
				box-shadow: none;
			}
			span#cke_1_top {
				display: none;
			}
			.mailComposeHeaderSection > table {
				padding: 0;
				tr.mailComposeHeaders.subjectContainer td:first-child::after {
					content: '';
				}
				tr.mailComposeHeaders {
					span {
						.mob-fontsize-n;
					}
					border-bottom: 1px solid silver;
					.subjectContainer:first-child::after{
						content: ':';
					}
					&:first-child {
						border-top: 1px solid silver;
					}
					span#mail-compose_cc_expander, span#mail-compose_cc_expander,
					span#mail-compose_bcc_expander, span#mail-compose_bcc_expander, 
					span#mail-compose_folder_expander, span#mail-compose_folder_expander,
					span#mail-compose_replyto_expander, span#mail-compose_replyto_expander
					{
						background: transparent;
						border: none;
						color: #26537c;
						text-decoration: underline;
						.mob-fontsize-n;
						width: 65px;
						height:25px;
					}
				}
				div.et2_taglist > *, #mail-compose_subject, #mail-compose_mailaccount {
					border:none;
					box-shadow: none;
					.mob-fontsize-n;
				}
				#mail-compose_subject:focus {
					outline-color: transparent;
				}
			}
		}
	}
	
	#mail-index {
		table.egwGridView_outer tbody {
			span.et2_date_ro.et2_label {
				font-size: 9px;
			}
			td {
				padding-top: 8px;
				padding-bottom: 8px;
				a[id^='mail-index_'][id$='fromaddress]']{
					color:@gray_80;
					.mob-fontsize-l;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 98%;
				}
				span[id^='mail-index_'][id$='attachments]'] {
					float: right;
					img {
						width: 16px;
						height: 16px;
					}
				}
				span[id^='mail-index_'][id$='subject]'] {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 98%;
					.mob-fontsize-n;
					color: @gray_50 !important;
					font-weight: normal !important;
				}
				label[id^='mail-index_'][id$='date]']{
					padding-top: 0;
				}
			}
			tr{
				height:55px;
				div.recent ,
				span.recent ,
				time.recent ,
				a.recent,
				div.unseen ,
				span.unseen ,
				time.unseen ,
				a.unseen  {
					color: black !important;
					font-weight: bold;
				}
				span.mail.mobile_cat_col {
					background: #F5F5F5;
				}
				span.mail.labelone.mobile_cat_col  {
					background: #ff0080;
				}
				span.mail.labeltwo.mobile_cat_col{
					background: #ff8000;
				}
				span.mail.labelthree.mobile_cat_col {
					background: #008000;
				}
				span.mail.labelfour.mobile_cat_col {
					background: #0000ff;
				}
				span.mail.labelfive.mobile_cat_col {
					background: #8000ff;
				}

				span.mail.flagged.mobile_cat_col  {
					background: #ff0000;
				}

				span.mail.prio_high.mobile_cat_col {
					background: #ac0000;
				}

				span.mail.deleted.mobile_cat_col {
					background: silver;
					text-decoration : line-through;
				}
				span.status_img {
				padding:0 2px 2px 0;
				}
				span.deleted.status_img {
					background-image: url(images/kmmsgdel.png);
				}
				span.unseen.status_img {
					background-image: url(images/kmmsgunseen.png);
				}
				span.flagged_seen.status_img {
					background-image: url(images/read_flagged_small.png);
				}
				span.flagged_unseen.status_img {
					background-image: url(images/unread_flagged_small.png);
				}
				span.recent.status_img {
					background-image: url(images/kmmsgnew.png);
				}
				span.replied.status_img {
					background-image: url(images/kmmsgreplied.png);
				}
				span.forwarded.status_img {
					background-image: url(images/kmmsgforwarded.png);
				}
			}
		}
	}
}