.preview-header {
	padding: 0 ($padding-large - 5px) 0 $padding-large;
	border-bottom: 1px solid $grey;
}
.preview-header .x-panel-body {
	/* we cannot set this padding on the .preview-header because it will fuck up the collapse/expand animation */
	padding-bottom: $padding-medium;
}

/***************************************
 *  scrollbars for Webkit
 ***************************************/
.preview-header ::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}

.preview-header ::-webkit-scrollbar-button:vertical {
	border: 1px solid #fff;
	background-color: #fff;
	background-repeat: no-repeat;
	height: 15px;
	border-radius: 2px;
}
.preview-header ::-webkit-scrollbar-button:vertical:hover {
	border: 1px solid $grey2;
}
.preview-header ::-webkit-scrollbar-button:vertical:increment {
	/* this is the arrow_down_s.png icon */
	/* putting this webkit rule in app-icons.extensions.json would break the rule on IE11 */
	/* so we're cheating a little and adding this one here */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAYAAABbNsX4AAAAHElEQVR4AWMKDAz8j46ZGBgYGBlQASMTjIFMAwD7JAnFXwG1BAAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: center center;
}
.preview-header ::-webkit-scrollbar-button:vertical:decrement {
	/* this is the arrow_up_s.png icon */
	/* putting this webkit rule in app-icons.extensions.json would break the rule on IE11 */
	/* so we're cheating a little and adding this one here */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAADCAYAAABbNsX4AAAAGElEQVR4AWMIDAyE4f8wNkIAgRnAAugYAIFDFzUC5hyIAAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: center center;
}
.preview-header ::-webkit-scrollbar-button:vertical:increment:disabled {
	background-color: red;
}
.preview-header ::-webkit-scrollbar-button:vertical:active {
	background-color: $grey3;
}
.preview-header ::-webkit-scrollbar-thumb {
	border: none;
	border-radius: 2px;
}

/***************************************
 *  scrollbars for IE
 ***************************************/
.preview-header {
	scrollbar-base-color: $background-color-main;
	scrollbar-arrow-color: #333;
	scrollbar-shadow-color: $background-color-main;
	scrollbar-darkshadow-color: $background-color-main;
	scrollbar-highlight-color: $background-color-main;
	scrollbar-3dlight-color: $background-color-main;
}


/* the expand/collapse button */
$preview-header-collapse-button-width	: $font-line-height-large;
$preview-header-collapse-button-height	: $preview-header-collapse-button-width;
$preview-header-collapse-icon-width		: 9;
$preview-header-collapse-icon-height	: 5;

.preview-header-collapse {
	float: right;
	width: $preview-header-collapse-button-width;
	height: $preview-header-collapse-button-height;
	margin: (-$padding-large) (-$padding-large) 0 $padding-large; /* pulling it to the top and the right to be able to create a larger click area */
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.preview-header-titlebox,
.preview-header-title .preview-title {
	font-size: $font-size-large !important;
	line-height: $font-line-height-large;
	min-height: $font-line-height-large; /* set a min-height, so mails without a subject will not look strange) */
	margin-right: 5px;
}

/* Subject field */
.preview-header-title .preview-title {
	font-weight: bold;
}

.preview-header-titlebox{
	padding: ($header-height - $font-line-height-large )/2 0;
}
.preview-header-senderbox .preview-from{
	display: block;
	padding-bottom: $padding-medium;
}
.preview-header-recipients, .preview-header-meeting, .preview-header-attachments {
	display: block;
	margin-top: $padding-medium;

}

.preview-header-recipients .preview-recipient-title,
.preview-header-attachments .preview-attachment-title {
	float:left;
}


.preview-header-sentinfo .preview-timestamp-title,
.preview-header-recipients .preview-recipient-title,
.preview-header-attachments .preview-attachment-title,
.preview-header-meeting .preview-when .preview-when-title,
.preview-header-meeting .preview-proposed .preview-proposed-title,
.preview-header-meeting .preview-location .preview-location-title {
	display: inline-block;
	min-width: 36px;
	font-weight: normal;
	padding-right: $padding-medium;
}

.preview-recipient-data{
	line-height: 16px;
}

.preview-body {
	padding: 0;
}

/* Overflow for recipients / attachments */
.preview-header-recipients .preview-recipient-data,
.preview-header-attachments .preview-attachment-data {
	overflow-y: auto;
}

/* Attachments: */
.preview-header-attachmentbox {
	line-height:18px;
	padding-top:2px;
}

/* Force width/height of iframe to be 100% so the content fits the iframe */
.preview-iframe {
	height: 100%;
	width: 100%;
}

/* Top header infobox  */
.preview-header-extrainfobox {
	background-color: $light-blue;
	margin-bottom: $padding-small;
	padding: $padding-medium $padding-large $padding-medium $padding-large;
}

/* Corrupt message case */
.preview-header-extrainfobox-item-over {
	cursor: pointer;
}

/* Preview header email address */
span.zarafa-emailaddress-link {
	cursor: pointer;
}

span.zarafa-emailaddress-link:hover {
	// FIXME: SASS Color
	color: #0000FF;
	text-decoration: underline;
}

.preview-title-hr {
	margin: 2px 0;
}

.preview-recipient-data {
	word-wrap: break-word;
}

.preview-header-attachments .zarafa-attachment-link {
	// FIXME: sassify
	border-radius: 4px;
	border: 1px solid #d3d2d2;
	background-color: #ebeaeb;
	color: #00a;
	padding: 1px 5px;
	margin: 1px;
	box-shadow: 0 0 1px #ddd inset;
	cursor: pointer;
}

.preview-header-attachments .zarafa-attachment-link-over {
	// FIXME: sassify
	background-color: #ddd;
}

.preview-header-task .preview-from {
	.task-info-container {
		span {
			min-width: 80px;
			padding-top: 5px;
			display: inline-block;
			&.minwidth120{
				min-width: 120px;
			}
			&.label{
				color: #7F7F7F;
			}
		}
	}

	input {
		&.zarafa-task-date-completed {
			border: 1px solid #dadada;
			width: 150px;
			padding: 3px;
		}
	}
}

.task-attachment-info-panel {
	.preview-attachment-title {
		color: #7F7F7F;
	}
	.preview-header-attachments {
		margin-top: 0px;
	}
}
