roundcubemail/skins/larry/mail.css

/**
 * Roundcube webmail styles for the Email section
 *
 * Copyright (c) 2012, The Roundcube Dev Team
 * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
 * License. It is allowed to copy, distribute, transmit and to adapt the work
 * by keeping credits to the original autors in the README file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 */

#mailview-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 220px;
	bottom: 0;
	z-index: 2;
}

#mailview-right {
	position: absolute;
	top: 0;
	left: 232px;
	right: 0;
	bottom: 0;
	z-index: 3;
}

#mailview-right.fullwidth {
	left: 0;
}

#mailview-top {
	position: absolute;
	top: 42px;
	left: 0;
	right: 0;
	bottom: 0px;
}

#mailview-bottom {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 0;
	border-radius: 4px;
	border-top: none;
}

#composeview-right #mailview-bottom {
	border-radius: 0 0 4px 4px;
}

#mailboxcontainer,
#messagelistcontainer {
	position: absolute;
	top: 42px;
	left: 0;
	width: 100%;
	bottom: 0;
}

#messagelistcontainer {
	top: 0;
	bottom: 30px;
	overflow: auto;
}

/* Real browsers accept this (not IE) */
html>/**/body #messagelist {
	overflow: auto;
	overflow-x: hidden;
}

#messagelistfooter {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 22px;
	padding: 4px 6px;
	border-top: 1px solid #ddd;
	background: #ebebeb;
	background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6));
	background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
	background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
	background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
	border-radius: 0 0 4px 4px;
}

#messagelistfooter.rightalign {
	text-align: right;
}

#messagelistfooter #countcontrols {
	display: inline-block;
}

#messagelistfooter #listcontrols,
#messagelistfooter #listselectors {
	display: inline-block;
	margin-right: 2em;
	vertical-align: middle;
}

#messagelistfooter #listselectors .menuselector {
	margin-top: -2px;
}

a.iconbutton.listmode {
	width: 26px;
	height: 20px;
	background-position: 0 -477px;
}

a.iconbutton.threadmode {
	width: 26px;
	height: 20px;
	background-position: 0 -497px;
}

a.iconbutton.listmode.selected {
	background-position: -26px -477px;
}

a.iconbutton.threadmode.selected {
	background-position: -26px -497px;
}

#mailboxlist li.mailbox {
	position: relative;
	background-repeat: no-repeat;
	background-position: 6px 2px;
}

#mailboxlist > li:first-child {
	border-radius: 4px 4px 0 0;
	border-top: 0;
}

#mailboxlist li.mailbox a {
	padding-left: 36px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-image: url(images/listicons.png);
	background-repeat: no-repeat;
	background-position: 6px 3px;
}

#mailboxlist li.mailbox.unread > a {
	padding-right: 36px;
}

#mailboxlist li.mailbox.selected > a {
	background-position: 6px -21px;
}

#mailboxlist li.mailbox.inbox > a {
	background-position: 6px -189px;
}

#mailboxlist li.mailbox.inbox.selected > a {
	background-position: 6px -213px;
}

#mailboxlist li.mailbox.drafts > a {
	background-position: 6px -238px;
}

#mailboxlist li.mailbox.drafts.selected > a {
	background-position: 6px -262px;
}

#mailboxlist li.mailbox.sent > a {
	background-position: 6px -286px;
}

#mailboxlist li.mailbox.sent.selected > a {
	background-position: 6px -310px;
}

#mailboxlist li.mailbox.junk > a {
	background-position: 6px -334px;
}

#mailboxlist li.mailbox.junk.selected > a {
	background-position: 6px -358px;
}

#mailboxlist li.mailbox.trash > a {
	background-position: 6px -382px;
}

#mailboxlist li.mailbox.trash.selected > a {
	background-position: 6px -406px;
}

#mailboxlist li.mailbox.trash.empty > a {
	background-position: 6px -1924px;
}

#mailboxlist li.mailbox.trash.empty.selected > a {
	background-position: 6px -1948px;
}

#mailboxlist li.mailbox.archive > a {
	background-position: 6px -1699px;
}

#mailboxlist li.mailbox.archive.selected > a {
	background-position: 6px -1723px;
}

#mailboxlist li.mailbox ul li.drafts > a {
	background-position: 23px -238px;
}

#mailboxlist li.mailbox ul li.drafts.selected > a {
	background-position: 23px -262px;
}

#mailboxlist li.mailbox ul li.sent > a {
	background-position: 23px -286px;
}

#mailboxlist li.mailbox ul li.sent.selected > a {
	background-position: 23px -310px;
}

#mailboxlist li.mailbox ul li.junk > a {
	background-position: 23px -334px;
}

#mailboxlist li.mailbox ul li.junk.selected > a {
	background-position: 23px -358px;
}

#mailboxlist li.mailbox ul li.trash > a {
	background-position: 23px -382px;
}

#mailboxlist li.mailbox ul li.trash.selected > a {
	background-position: 23px -406px;
}

#mailboxlist li.mailbox ul li.trash.empty > a {
	background-position: 23px -1924px;
}

#mailboxlist li.mailbox ul li.trash.empty.selected > a {
	background-position: 23px -1948px;
}

#mailboxlist li.mailbox ul li.archive > a {
	background-position: 23px -1699px;
}

#mailboxlist li.mailbox ul li.archive.selected > a {
	background-position: 23px -1723px;
}

#mailboxlist li.unread {
	font-weight: bold;
}

#mailboxlist li.virtual > a {
	color: #aaa;
}

#mailboxlist li.recent > a {
	color: #017cb4;
}

#mailboxlist li.mailbox div.treetoggle {
	top: 13px;
	left: 19px;
}

#mailboxlist li.mailbox ul li:last-child {
	border-bottom: 0;
}

/* nested mailboxes */

#mailboxlist li.mailbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid #bbd3da;
}

#mailboxlist li.mailbox ul li a {
	padding-left: 52px;  /* 36 + 1 x 16 */
	background-position: 22px -93px;  /* 6 + 1 x 16 */
}
#mailboxlist li.mailbox ul li.selected > a {
	background-position: 22px -117px;
}
#mailboxlist li.mailbox ul li div.treetoggle {
	left: 33px;
	top: 14px;
}

#mailboxlist li.mailbox ul ul li.mailbox a {
	padding-left: 68px;  /* 2x */
	background-position: 38px -93px;
}
#mailboxlist li.mailbox ul ul li.selected > a {
	background-position: 38px -117px;
}
#mailboxlist li.mailbox ul ul li div.treetoggle {
	left: 48px;
}

#mailboxlist li.mailbox ul ul ul li.mailbox a {
	padding-left: 84px;  /* 3x */
	background-position: 54px -93px;
}
#mailboxlist li.mailbox ul ul ul li.selected > a {
	background-position: 54px -117px;
}
#mailboxlist li.mailbox ul ul ul li div.treetoggle {
	left: 64px;
}

#mailboxlist li.mailbox ul ul ul ul li.mailbox a {
	padding-left: 100px;  /* 4x */
	background-position: 70px -93px;
}
#mailboxlist li.mailbox ul ul ul ul li.selected > a {
	background-position: 70px -117px;
}
#mailboxlist li.mailbox ul ul ul ul li div.treetoggle {
	left: 80px;
}

/* indent folders on levels > 4 */
#mailboxlist li.mailbox ul ul ul ul ul li {
	padding-left: 16px;
}
#mailboxlist li.mailbox ul ul ul ul ul li div.treetoggle {
	left: 96px;
}

#mailboxlist li.mailbox .unreadcount {
	position: absolute;
	top: 3px;
	right: 6px;
	min-width: 1.8em;
	padding: 2px 4px;
	background: #82acb5;
	background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f));
	background: -o-linear-gradient(top, #82acb5 0%, #6a939f 100%);
	background: -ms-linear-gradient(top, #82acb5 0%, #6a939f 100%);
	background: linear-gradient(top, #82acb5 0%, #6a939f 100%);
	box-shadow: inset 0 1px 1px 0 #536d72;
	-o-box-shadow: inset 0 1px 1px 0 #536d72;
	-webkit-box-shadow: inset 0 1px 1px 0 #536d72;
	-moz-box-shadow: inset 0 1px 1px 0 #536d72;
	border-radius: 9px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-shadow: none;
}

#mailboxlist li.mailbox.selected > a .unreadcount {
	background: #005d76;
	background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
	background: -o-linear-gradient(top, #005d76 0%, #004558 100%);
	background: -ms-linear-gradient(top, #005d76 0%, #004558 100%);
	background: linear-gradient(top, #005d76 0%, #004558 100%);
	box-shadow: inset 0 1px 1px 0 #003645;
	-o-box-shadow: inset 0 1px 1px 0 #003645;
	-webkit-box-shadow: inset 0 1px 1px 0 #003645;
	-moz-box-shadow: inset 0 1px 1px 0 #003645;
}

#mailboxlist li.mailbox.recent > a .unreadcount {
	background: #017cb4;
	background: -moz-linear-gradient(top, #017cb4 0%, #006ca4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#017cb4), color-stop(100%,#006ca4));
	background: -o-linear-gradient(top, #017cb4 0%, #006ca4 100%);
	background: -ms-linear-gradient(top, #017cb4 0%, #006ca4 100%);
	background: linear-gradient(top, #017cb4 0%, #006ca4 100%);
	box-shadow: inset 0 1px 1px 0 #005080;
	-o-box-shadow: inset 0 1px 1px 0 #005080;
	-webkit-box-shadow: inset 0 1px 1px 0 #005080;
	-moz-box-shadow: inset 0 1px 1px 0 #005080;
}

#searchfilter {
	position: absolute;
	right: 256px;
	width: auto;
	top: 2px;
}

#searchfilter select {
	height: 26px;
}

#mailview-left select.mailboxlist {
	position: relative;
	top: 10px;
	width: 100%;
}

#messagetoolbar {
	position: absolute;
	top: -6px;
	left: 0;
	height: 40px;
	white-space: nowrap;
	z-index: 10;
}

#messagetoolbar.fullwidth {
	right: 0;
}

#messagesearchtools {
	position: absolute;
	right: 0;
	top: 0;
}

#mailpreviewtoggle {
	display: block;
	position: absolute;
	top: 6px;
	right: 4px;
	width: 20px;
	height: 18px;
	background: url(images/buttons.png) -3px -458px no-repeat;
}

#mailpreviewtoggle.enabled {
	background-position: -28px -458px;
}


/*** message list ***/

table.messagelist {
	z-index: 1;
}

table.messagelist.fixedcopy {
	z-index: 2;
}

.messagelist thead td:first-child {
	border-radius: 4px 0 0 0; /* for Chrome */
}

.messagelist tr td.attachment,
.messagelist tr td.threads,
.messagelist tr td.status,
.messagelist tr td.flag,
.messagelist tr td.priority {
	width: 20px;
	padding: 2px 3px;
}

.webkit .messagelist tr td.attachment,
.webkit .messagelist tr td.threads,
.webkit .messagelist tr td.status,
.webkit .messagelist tr td.flag,
.webkit .messagelist tr td.priority {
	width: 26px;
}

.messagelist tr td.threads {
	width: 26px;
}

.webkit .messagelist tr td.threads {
	width: 30px;
}

.messagelist tr td.threads,
.messagelist tr td.threads + td {
	border-left: 0;
}

.messagelist tr td.size {
	width: 60px;
	text-align: right;
}

.messagelist thead tr td.size {
	text-align: left;
}

.messagelist tr td.fromto,
.messagelist tr td.from,
.messagelist tr td.to,
.messagelist tr td.cc,
.messagelist tr td.replyto {
	width: 200px;
}

.messagelist tr td.date {
	width: 155px;
}

.messagelist tr.message {
/*	background-color: #fff; */
}

.messagelist tr.thread.expanded td {
	background-color: #ededed;
}

.messagelist tr.unread {
	font-weight: bold;
/*	background-color: #fff; */
}

.messagelist tr.flagged td,
.messagelist tr.flagged td a {
	color: #f30;
}

.messagelist thead tr td.sortedASC a,
.messagelist thead tr td.sortedDESC a {
	color: #004458;
	text-decoration: underline;
	background: url(images/listicons.png) right -912px no-repeat;
}

.messagelist thead tr td.sortedASC a {
	background-position: right -944px;
}

.messagelist td img {
	vertical-align: middle;
	display: inline-block;
}

.messagelist tbody td a {
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	cursor: default;
}

.messagelist tbody tr td.flag,
.messagelist tbody tr td.status,
.messagelist tbody tr td.subject span.status {
	cursor: pointer;
}

.messagelist tr td.flag span,
.messagelist tr td.status span,
.messagelist tr td.attachment span,
.messagelist tr td.priority span {
	display: block;
	width: 20px;
}

.messagelist tr td div.collapsed,
.messagelist tr td div.expanded,
.messagelist tr td.threads div.listmenu,
.messagelist tr td.attachment span.attachment,
.messagelist tr td.attachment span.report,
.messagelist tr td.priority span.priority,
.messagelist tr td.priority span.prio1,
.messagelist tr td.priority span.prio2,
.messagelist tr td.priority span.prio3,
.messagelist tr td.priority span.prio4,
.messagelist tr td.priority span.prio5,
.messagelist tr td.flag span.flagged,
.messagelist tr td.flag span.unflagged,
.messagelist tr td.flag span.unflagged:hover,
.messagelist tr td.status span.status,
.messagelist tr td.status span.msgicon,
.messagelist tr td.status span.deleted,
.messagelist tr td.status span.unread,
.messagelist tr td.status span.unreadchildren,
.messagelist tr td.subject span.msgicon,
.messagelist tr td.subject span.deleted,
.messagelist tr td.subject span.unread,
.messagelist tr td.subject span.replied,
.messagelist tr td.subject span.forwarded,
.messagelist tr td.subject span.unreadchildren {
	display: inline-block;
	vertical-align: middle;
	height: 18px;
	width: 20px;
	padding: 0;
	background: url(images/listicons.png) -100px 0 no-repeat;
}

.messagelist tbody tr td.attachment span.attachment {
	background-position: 0 -996px;
}

.messagelist thead tr td.attachment span.attachment {
	background-position: -24px -997px;
}

.messagelist tbody tr td.attachment span.report {
	background-position: -24px -1116px;
}

.messagelist thead tr td.priority span.priority {
	background-position: -24px -1845px;
}

.messagelist tr td.priority span.prio5 {
	background-position: 0 -1905px;
}

.messagelist tr td.priority span.prio4 {
	background-position: 0 -1885px;
}

.messagelist tr td.priority span.prio2 {
	background-position: 0 -1865px;
}

.messagelist tr td.priority span.prio1 {
	background-position: 0 -1845px;
}

.messagelist tbody tr td.flag span.flagged {
	background-position: 0 -1036px;
}

.messagelist thead tr td.flag span.flagged {
	background-position: -22px -1036px;
}

.messagelist tr td.status span.msgicon:hover {
	background-position: -23px -1056px;
}

.messagelist tr td.flag span.unflagged:hover {
	background-position: -23px -1076px;
}

.messagelist tr td.subject span.msgicon,
.messagelist tr td.subject span.unreadchildren {
	background-position: 0 -1056px;
	margin: 0 1px 0 0;
	width: 24px;
}

.messagelist tr td.subject span.replied {
	background-position: 0 -1076px;
}

.messagelist tr td.subject span.forwarded {
	background-position: 0 -1096px;
}

.messagelist tr td.subject span.replied.forwarded {
	background-position: 0 -1116px;
}

.messagelist tr td.status span.msgicon,
.messagelist tr td.flag span.unflagged,
.messagelist tr td.status span.unreadchildren {
	background-position: 0 1056px; /* no icon */
}
/*
.messagelist tr td.status span.msgicon:hover {
	background-position: 0 -272px;
}
*/
.messagelist tr td.status span.deleted,
.messagelist tr td.status span.deleted:hover,
.messagelist tr td.subject span.deleted {
	background-position: -22px -1096px;
}

.messagelist tr td.status span.status,
.messagelist tr td.status span.unread,
.messagelist tr td.subject span.unread,
.messagelist tr td.status span.unread:hover {
	background-position: 0 -1016px;
}

.messagelist thead tr td.status span.status {
	background-position: -23px -1017px;
}

.messagelist tr td div.collapsed {
	background-position: 0 -1137px;
	cursor: pointer;
}

.messagelist tr td div.expanded {
	background-position: 0 -1157px;
	cursor: pointer;
}

.messagelist tr td.threads div.listmenu {
	background-position: 0 -976px;
	cursor: pointer;
	width: 26px;
}

.messagelist thead tr td.subject,
.messagelist tbody tr td.subject {
	width: 99%;
	white-space: nowrap;
}

.messagelist tbody tr td.subject a {
	cursor: default;
	vertical-align: middle; /* #1487091 */
}

/* thread parent message with unread children */
.messagelist tbody tr.unroot td.subject a {
	text-decoration: underline;
}

/**** tree indicators ****/

.messagelist tbody tr td span.branch div {
	display: inline-block;
}

.messagelist tbody tr td span.branch div.tree {
	width: 15px;
}

#listoptions ul.proplist {
	min-width: 16em;
}

/**** message view ****/

#mailpreviewframe {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	bottom: 0px;
}

#messagecontframe {
	border: 0;
	border-radius: 4px 4px 0 0;
}

#messagecontent {
	position: absolute;
	top: 110px;
	left: 0;
	width: 100%;
	bottom: 1px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#messageheader,
#composeheaders {
	position: relative;
	padding: 3px 0;
	background: #f9f9f9;
	background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
	background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(top, #fff 0%, #f0f0f0 100%);
	border-bottom: 1px solid #dfdfdf;
}

#mailview-right #messageheader {
	border-radius: 4px 4px 0 0;
	padding-left: 78px;
	/* avoid headers eating up all the vertical space */
	max-height: 50%;
	overflow: auto;
}

h2.subject {
	font-size: 15px;
	margin: 0 15em 0 0;
	padding: 4px 8px 2px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#mailview-right #messageheader h2.subject {
	margin-left: -56px;
}

h3.subject {
	font-size: 14px;
	margin: 0 12em 0 0;
	padding: 8px 8px 4px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.headers-table td {
	color: #666;
	padding: 2px 8px;
}

.headers-table td.header,
.ui-dialog-content.popup span.adr {
	font-weight: bold;
}

.headers-table td.header-title {
	white-space: nowrap;
}

.headers-table td.header a,
.ui-dialog-content.popup span.adr a {
	color: #666;
	text-decoration: none;
}

.headers-table td.header a:hover,
.ui-dialog-content.popup span.adr a:hover {
	text-decoration: underline;
}

.headers-table td.subject {
	color: #333;
	font-size: 110%;
	font-weight: bold;
}

.headers-table td.header span,
.ui-dialog-content.popup span.adr {
	white-space: nowrap;
}

.headers-table td.header a.morelink {
	color: #0069a6;
	white-space: nowrap;
	font-weight: normal;
}

.rcmaddcontact {
	position: relative;
	top: 1px;
	margin-left: 0.5em;
}

.rcmaddcontact imp {
	width: 20px;
	height: 13px;
}

#preview-allheaders {
	display: none;
}

#preview-allheaders td.header-title,
#preview-shortheaders td.header-title {
	padding-left: 0;
}

#preview-shortheaders td.header {
	padding-right: 18px;
}

.moreheaderstoggle {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 18px;
	padding: 0;
	outline: none;
	background: #f2f2f2;
	background: -moz-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0,#fbfbfb), color-stop(100%,#e9e9e9));
	background: -o-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
	background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
	background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
	border-right: 1px solid #dfdfdf;
	border-radius: 3px 0 0 0; /* for Opera */
}

.moreheaderstoggle .iconlink {
	display: inline-block;
	position: absolute;
	top: 8px;
	left: 0;
	width: 18px;
	height: 16px;
	background: url(images/buttons.png) -27px -242px no-repeat;
}

.moreheaderstoggle.remove .iconlink {
	top: auto;
	bottom: 5px;
	background-position: -5px -242px;
}

#full-headers {
	position: relative;
}

div.more-headers {
	position: absolute;
	top: -12px;
	right: 10px;
	width: 12px;
	height: 10px;
	cursor: pointer;
	background: url(images/buttons.png) center -1579px no-repeat;
}

div.hide-headers {
	background-position: center -1590px;
}

#all-headers {
	position: relative;
	margin: 4px 10px;
	padding: 0;
	height: 180px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fdfdfd;
	-moz-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
	-webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
	-o-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
	box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
}

#headers-source {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 6px;
	overflow: auto;
	text-align: left;
	color: #333;
}

#messageheader.previewheader #all-headers {
	margin-left: 0;
}

#messageheader.previewheader {
	position: relative;
	height: auto;
	min-height: 52px;
	padding: 0 0 3px 72px;
}

#messageheader.previewheader h3.subject {
	padding: 8px 8px 2px 0;
}

#messageheader.previewheader #contactphoto {
	display: block;
	position: absolute;
	top: 11px;
	left: 30px;
	width: 32px;
	height: 32px;
	overflow: hidden;
	background: url(images/contactpic_32px.png) center center no-repeat #fff;
	border-radius: 3px;
}

#messageheader.previewheader #contactphoto img {
	width: 32px;
	height: auto;
	border-radius: 3px;
}

#messageheader .message-headers {
	min-height: 60px;
}

#messageheader #contactphoto {
	display: block;
	position: absolute;
	top: 34px;
	left: 30px;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid #e6e6e6;
	background: url(images/contactpic_48px.png) center center no-repeat #fff;
}

#messageheader #contactphoto img {
	width: 48px;
	height: auto;
	border-radius: 4px;
}

#messageheader #countcontrols,
#messageheader #formatcontrols {
	position: absolute;
	top: 8px;
	right: 8px;
	text-align: right;
	white-space: nowrap;
}

#messageheader #formatcontrols {
	top: 38px;
	right: 8px;
}

#messageheader .pagenav .countdisplay {
	min-width: 0;
	padding-right: 0.5em;
	white-space: nowrap;
}

#messagecontent .leftcol,
#messagepreview .leftcol {
	margin-right: 252px;
	overflow-x: auto;
}

#messagecontent .rightcol,
#messagepreview .rightcol {
	float: right;
/*
	position: absolute;
	top: 10px;
	right: 10px;
	height: 90%;
*/
	width: 230px;
	margin: 8px;
	min-height: 200px;
	background: #f0f0f0;
	padding: 8px;
	border-radius: 4px;
}

#messagebody {
	position: relative;
	margin: 8px;
}

#message-objects div,
#messagebody span.part-notice {
	margin: 8px;
}

#message-objects div.notice,
#message-buttons div.notice {
	display: block;
	color: #960;
	border: 1px solid #ffdf0e;
	background-color: #fef893;
	background-position: 5px -83px;
	padding: 6px 12px 4px 30px;
	white-space: normal;
}

#message-objects div a.button,
#messagebody span.part-notice a.button {
	margin-left: 10px;
}

div.message-part,
div.message-htmlpart,
div.message-partheaders {
	padding: 10px 2px;
	border-top: 1px solid #ccc;
}

#messagebody div:first-child {
	padding-top: 0;
	border-top: 0;
}

div.message-part pre,
div.message-htmlpart pre,
div.message-part div.pre {
	margin: 0;
	padding: 0;
	font-family: monospace;
	font-size: 12px;
	white-space: -moz-pre-wrap !important;
	white-space: pre-wrap !important;
	white-space: pre;
}

div.message-part span.sig {
	color: #666;
}

div.message-part blockquote {
	color: blue;
	border-left: 2px solid blue;
	border-right: 2px solid blue;
	background-color: #F6F6F6;
	margin: 2px 0 2px 0;
	padding: 1px 8px 1px 10px;
}

div.message-part blockquote blockquote {
	color: green;
	border-left: 2px solid green;
	border-right: 2px solid green;
}

div.message-part blockquote blockquote blockquote {
	color: #900;
	border-left: 2px solid #b00;
	border-right: 2px solid #b00;
}

div.message-partheaders {
	margin-top: 8px;
	padding: 8px 0;
}

div.message-partheaders .headers-table {
	width: 100%;
}

div.message-partheaders .headers-table td.header-title {
	width: auto;
	padding-left: 0;
}

div.message-partheaders .headers-table td.header {
	width: 88%;
}

#messagebody > hr {
	color: #fff;
	background: #fff;
	border: 0;
	border-bottom: 2px solid #f0f0f0;
}

#messagebody fieldset.image-attachment {
	border: 0;
	border-top: 1px solid #ccc;
	margin-top: 1em;
}

#messagebody fieldset.image-attachment p > img {
	max-width: 80%;
}

#messagebody legend.image-filename {
	color: #999;
	font-size: 0.9em;
	margin: 0 1em;
}

#messagebody p.image-attachment {
	position: relative;
	padding: 1em;
	border-top: 1px solid #ccc;
}

#messagebody p.image-attachment a.image-link {
	float: left;
	display: block;
	margin-right: 2em;
	min-width: 160px;
	min-height: 60px;
	text-align: center;
}

#messagebody p.image-attachment .image-filename {
	display: block;
	font-weight: bold;
	line-height: 1.6em;
}

#messagebody p.image-attachment .image-filesize {
	padding-right: 1em;
}

#messagebody p.image-attachment .attachment-links a {
	margin-right: 0.6em;
}

#messagepartcontainer {
	position: absolute;
	top: 42px;
	left: 232px;
	right: 0;
	bottom: 0;
}

#messagepartframe {
	border: 0;
	width: 100%;
	height: 100%;
}

#messagepartheader {
	position: absolute;
	top: 42px;
	left: 0;
	width: 220px;
	bottom: 0;
}

#messagepartheader table {
	table-layout: fixed;
	overflow: hidden;
}

#messagepartheader table td {
	text-overflow: ellipsis;
	overflow: hidden;
}

#messagepartheader table td.title {
	width: 60px;
	padding-right: 0;
}


/*** message composition ***/

#composeview-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 250px;
	bottom: 0;
}

#composeview-right {
	position: absolute;
	top: 0;
	left: 262px;
	right: 0;
	bottom: 0;
}

#compose-contacts {
	position: absolute;
	top: 42px;
	left: 0;
	width: 100%;
	bottom: 0;
}

#composequicksearch {
	position: relative;
	padding: 4px;
	background: #c7e3ef;
}

#composequicksearch .searchbox input {
	width: 100%;
	height: 26px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#composequicksearch #searchmenulink {
	width: 15px;
}

#compose-contacts #directorylist {
	border-bottom: 4px solid #c7e3ef;
}

#compose-contacts .scroller {
	top: 65px;
	border-top: 1px solid #fff;
}

#contacts-table {
	table-layout: fixed;
}

#contacts-table td {
	width: 100%;
}

#contacts-table td span {
	display: block;
}

#contacts-table td span.email {
	display: inline;
	color: #69939e;
	font-style: italic;
	margin-left: 0.5em;
}

#compose-contacts li a, #contacts-table td {
	background: url(images/listicons.png) -100px 0 no-repeat;
	overflow: hidden;
	padding-left: 36px;
	text-overflow: ellipsis;
}

#contacts-table td.contactgroup a {
	color: #376572;
	text-decoration: none;
}

#contacts-table td.contactgroup a span {
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	line-height: 11px;
	margin-left: 0.3em;
}

#contacts-table tr:first-child td {
	border-top: 0;
}

#compose-contacts li.addressbook a {
	background-position: 6px -766px;
}

#compose-contacts li.addressbook.selected a {
	background-position: 6px -791px;
}

#contacts-table td.contactgroup {
	background-position: 6px -1555px;
}

#contacts-table tr.unfocused td.contactgroup,
#contacts-table tr.selected td.contactgroup {
	background-position: 6px -1579px;
}

#contacts-table td.contact {
	background-position: 6px -1603px;
}

#contacts-table tr.unfocused td.contact,
#contacts-table tr.selected td.contact {
	background-position: 6px -1627px;
}

#compose-content {
	position: absolute;
	top: 42px;
	left: 0;
	right: 0;
	bottom: 0px;
	overflow: hidden;
}

#composeheaders {
	border-radius: 4px 4px 0 0;
	padding-left: 19px;
}

#composebuttons {
	position: absolute;
	top: 6px;
	right: 6px;
	width: auto;
	white-space: nowrap;
	z-index: 100;
}

#composebuttons a.button.extwin {
	padding: 2px 3px;
}

.compose-headers {
	width: 99%;
	margin-bottom: 2px;
}

.compose-headers td {
	padding: 2px 4px;
}

.compose-headers td.title {
	width: 11%;
	white-space: nowrap;
	padding-left: 6px;
}

.compose-headers td.title label {
	float: left;
}

.compose-headers td.title a.iconbutton {
	float: right;
	position: relative;
	top: -2px;
	width: 15px;
}

.compose-headers td.editfield {
	width: 90%;
	padding-left: 4px;
}

.compose-headers td.editfield a.iconlink {
	margin-left: 0.5em;
}

.compose-headers td.formlinks {
	padding: 0 4px;
}

.compose-headers td.top {
	vertical-align: top;
	padding-top: 10px;
}

.compose-headers td textarea,
.compose-headers td input {
	width: 100%;
	resize: none;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#compose-cc, #compose-bcc, #compose-replyto, #compose-followupto {
	display: none;
}

#composeoptions {
	display: none;
	padding: 2px 0 0 8px;
	white-space: normal;
	border-top: 1px solid #dfdfdf;
	box-shadow: inset 0 1px 0 0 #fff;
	-o-box-shadow: inset 0 1px 0 0 #fff;
	-webkit-box-shadow: inset 0 1px 0 0 #fff;
	-moz-box-shadow: inset 0 1px 0 0 #fff;

}

.composeoption {
	color: #666;
	padding-right: 22px;
	white-space: nowrap;
}

#composeoptions .composeoption {
	display: inline-block;
	padding: 4px 22px 4px 0;
}

#composeoptions .composeoption:last-child {
	padding-right: 4px;
}

.mozilla .composeoption input {
	vertical-align: -3px;
}

#composeview-bottom {
	position: relative;
	width: 100%;
	height: 200px;
}

#composebodycontainer {
	position: absolute;
	top: 0;
	left: 0;
	right: 260px;
	bottom: 0;
	border-radius: 0 0 0 4px;
}

#composebodycontainer.buttons {
	bottom: 42px;
}

#composebody {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 99%;
	border: 0;
	border-radius: 0 0 0 4px;
	padding: 8px 0 8px 8px;
	resize: none;
	font-family: monospace;
	font-size: 9pt;
	outline: none;
	box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
	-moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
	-webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
	-o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
}

#composebody:active,
#composebody:focus {
	box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
	-moz-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
	-webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
	-o-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
}

#compose-attachments {
	position: absolute;
	right: 0;
	top: 1px;
	bottom: 0;
	width: 240px;
	background: #f0f0f0;
	border-style: solid;
	border-color: #f0f0f0 #f0f0f0 #f0f0f0 #ddd;
	border-width: 1px;
	padding: 8px;
	overflow: auto;
}

#compose-attachments.droptarget {
	background-image: url(images/filedrop.png);
	background-position: center bottom;
	background-repeat: no-repeat;
}

#compose-attachments.droptarget.hover,
#compose-attachments.droptarget.active {
	border-color: #019bc6;
	box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
	-moz-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
	-webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
	-o-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
}

#compose-attachments.droptarget.hover {
	background-color: #d9ecf4;
	box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
	-moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
	-webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
	-o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}

#composeview-bottom .formbuttons.floating {
	position: absolute;
	width: auto;
	right: 260px;
	z-index: 200;
	padding-bottom: 8px;
}

.defaultSkin table.mceLayout,
.defaultSkin table.mceLayout tr.mceLast td {
	border: 0 !important;
}

.defaultSkin td.mceToolbar {
	border: 0 !important;
}

.defaultSkin table.mceLayout tr.mceFirst td {
	background: #f0f0f0;
}

#composebody_toolbargroup {
	border-bottom: 1px solid #ddd;
}

#uploadform a.iconlink {
	margin-left: 1em;
	text-indent: -5000px;
}

#uploadform form div {
	margin: 4px 0;
}