Mercurial > hg > rc2

comparison skins/larry/mail.css @ 0:4681f974d28b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
vanilla 1.3.3 distro, I hope
author Charlie Root
date Thu, 04 Jan 2018 15:52:31 -0500
parents
children bf99236cc5cd
comparison
equal deleted inserted replaced
-1:000000000000 0:4681f974d28b
1 /**
2 * Roundcube webmail styles for the Email section
3 *
4 * Copyright (c) 2012, The Roundcube Dev Team
5 * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
6 *
7 * The contents are subject to the Creative Commons Attribution-ShareAlike
8 * License. It is allowed to copy, distribute, transmit and to adapt the work
9 * by keeping credits to the original autors in the README file.
10 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
11 */
12
13 #mailview-left {
14 position: absolute;
15 top: 0;
16 left: 0;
17 width: 200px;
18 bottom: 0;
19 z-index: 2;
20 }
21
22 #mailview-right {
23 position: absolute;
24 top: 0;
25 left: 212px;
26 right: 0;
27 bottom: 0;
28 z-index: 3;
29 }
30
31 #mailview-right.fullwidth {
32 left: 0;
33 }
34
35 #mailview-top {
36 position: absolute;
37 top: 0;
38 left: 0;
39 right: 0;
40 bottom: 0px;
41 }
42
43 html.ie #mailview-top {
44 overflow: visible; /* fixes display issues of fixed list header in IE */
45 }
46
47 #mailview-bottom {
48 display: none;
49 position: absolute;
50 left: 0;
51 bottom: 0;
52 right: 0;
53 height: 0;
54 border-radius: 4px;
55 border-top: none;
56 }
57
58 #composeview-right #mailview-bottom {
59 border-radius: 0 0 4px 4px;
60 }
61
62 #mailboxcontainer,
63 #messagelistcontainer {
64 position: absolute;
65 top: 0;
66 left: 0;
67 width: 100%;
68 bottom: 0;
69 }
70
71 #messagelistcontainer {
72 top: 0;
73 bottom: 30px;
74 overflow: auto;
75 }
76
77 /* Real browsers accept this (not IE) */
78 html>/**/body #messagelist {
79 overflow: auto;
80 overflow-x: hidden;
81 }
82
83 #messagelistfooter {
84 position: absolute;
85 bottom: 0;
86 left: 0;
87 right: 0;
88 height: 22px;
89 padding: 4px 6px;
90 border-top: 1px solid #ddd;
91 background: #ebebeb;
92 background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
93 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebebeb), color-stop(100%,#c6c6c6));
94 background: -o-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
95 background: -ms-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
96 background: linear-gradient(to bottom, #ebebeb 0%, #c6c6c6 100%);
97 border-radius: 0 0 4px 4px;
98 white-space: nowrap;
99 }
100
101 #messagelistfooter.rightalign {
102 text-align: right;
103 }
104
105 #messagelistfooter #countcontrols {
106 display: inline-block;
107 }
108
109 #messagelistfooter #listcontrols,
110 #messagelistfooter #listselectors {
111 display: inline-block;
112 margin-right: 2em;
113 vertical-align: middle;
114 }
115
116 #messagelistfooter #listselectors .menuselector {
117 margin-top: -2px;
118 }
119
120 a.iconbutton.listmode {
121 width: 26px;
122 height: 20px;
123 background-position: 0 -477px;
124 }
125
126 a.iconbutton.threadmode {
127 width: 26px;
128 height: 20px;
129 background-position: 0 -497px;
130 }
131
132 a.iconbutton.listmode.selected {
133 background-position: -26px -477px;
134 }
135
136 a.iconbutton.threadmode.selected {
137 background-position: -26px -497px;
138 }
139
140 #mailboxlist > li:first-child {
141 border-top: 0;
142 }
143
144 html.mozilla #mailboxlist > li:first-child {
145 border-radius: 4px 4px 0 0;
146 }
147
148 .folderlist li.mailbox.unread > a {
149 padding-right: 36px;
150 }
151
152 .folderlist li.unread {
153 font-weight: bold;
154 }
155
156 .folderlist li.recent > a {
157 color: #017cb4;
158 }
159
160 .folderlist li.mailbox .unreadcount {
161 position: absolute;
162 top: 3px;
163 right: 6px;
164 min-width: 1.8em;
165 line-height: 15px;
166 padding: 2px 4px;
167 background: #82acb5;
168 background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%);
169 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f));
170 background: -o-linear-gradient(top, #82acb5 0%, #6a939f 100%);
171 background: -ms-linear-gradient(top, #82acb5 0%, #6a939f 100%);
172 background: linear-gradient(to bottom, #82acb5 0%, #6a939f 100%);
173 box-shadow: inset 0 1px 1px 0 #536d72;
174 -webkit-box-shadow: inset 0 1px 1px 0 #536d72;
175 border-radius: 9px;
176 color: #fff;
177 text-align: center;
178 font-weight: bold;
179 text-shadow: none;
180 }
181
182 .folderlist li.mailbox.selected > a .unreadcount {
183 background: #005d76;
184 background: -moz-linear-gradient(top, #005d76 0%, #004558 100%);
185 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005d76), color-stop(100%,#004558));
186 background: -o-linear-gradient(top, #005d76 0%, #004558 100%);
187 background: -ms-linear-gradient(top, #005d76 0%, #004558 100%);
188 background: linear-gradient(to bottom, #005d76 0%, #004558 100%);
189 box-shadow: inset 0 1px 1px 0 #003645;
190 -webkit-box-shadow: inset 0 1px 1px 0 #003645;
191 }
192
193 .folderlist li.mailbox.recent > a .unreadcount {
194 background: #017cb4;
195 background: -moz-linear-gradient(top, #017cb4 0%, #006ca4 100%);
196 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#017cb4), color-stop(100%,#006ca4));
197 background: -o-linear-gradient(top, #017cb4 0%, #006ca4 100%);
198 background: -ms-linear-gradient(top, #017cb4 0%, #006ca4 100%);
199 background: linear-gradient(to bottom, #017cb4 0%, #006ca4 100%);
200 box-shadow: inset 0 1px 1px 0 #005080;
201 -webkit-box-shadow: inset 0 1px 1px 0 #005080;
202 }
203
204 #searchfilter {
205 position: absolute;
206 right: 256px;
207 width: auto;
208 top: 2px;
209 }
210
211 #searchfilter select {
212 height: 26px;
213 }
214
215 #mailview-left select.mailboxlist {
216 position: relative;
217 top: 10px;
218 width: 100%;
219 }
220
221 #messagetoolbar {
222 position: absolute;
223 top: -6px;
224 left: 0;
225 height: 40px;
226 white-space: nowrap;
227 z-index: 10;
228 }
229
230 #messagetoolbar.fullwidth {
231 right: 0;
232 }
233
234 #messagesearchtools {
235 position: absolute;
236 right: 0;
237 top: 0;
238 }
239
240 #mailpreviewtoggle {
241 display: block;
242 position: absolute;
243 top: 7px;
244 right: 4px;
245 width: 20px;
246 height: 18px;
247 background: url(images/buttons.png?v=51d4.15699) -3px -458px no-repeat;
248 }
249
250 #mailpreviewtoggle.enabled {
251 background-position: -28px -458px;
252 }
253
254
255 /*** message list ***/
256
257 table.messagelist {
258 z-index: 1;
259 }
260
261 table.messagelist.fixedcopy {
262 z-index: 2;
263 }
264
265 .messagelist thead th:first-child {
266 border-radius: 4px 0 0 0; /* for Chrome */
267 }
268
269 .messagelist tr > .attachment,
270 .messagelist tr > .threads,
271 .messagelist tr > .status,
272 .messagelist tr > .flag,
273 .messagelist tr > .priority {
274 width: 20px;
275 padding: 2px 3px !important;
276 }
277
278 .messagelist tr > .threads {
279 width: 26px;
280 }
281
282 .messagelist tr > .threads + td,
283 .messagelist tr > .threads + th {
284 border-left: 0;
285 }
286
287 .messagelist tr > .size {
288 width: 60px;
289 text-align: right;
290 }
291
292 .messagelist thead tr th.size {
293 text-align: left;
294 }
295
296 .messagelist tr > .fromto,
297 .messagelist tr > .from,
298 .messagelist tr > .to,
299 .messagelist tr > .cc,
300 .messagelist tr > .replyto {
301 width: 200px;
302 }
303
304 .messagelist tr > .date {
305 width: 155px;
306 }
307
308 .messagelist tr > .folder {
309 width: 135px;
310 }
311
312 .messagelist tr > .hidden {
313 display: none;
314 }
315
316 .messagelist tr.message {
317 /* background-color: #fff; */
318 }
319
320 .messagelist tr.thread.expanded td {
321 background-color: #ededed;
322 }
323
324 .messagelist tr.unread {
325 font-weight: bold;
326 /* background-color: #fff; */
327 }
328
329 .messagelist tr.flagged th,
330 .messagelist tr.flagged td,
331 .messagelist tr.flagged td a {
332 color: #f30;
333 }
334
335 .messagelist thead tr th.sortedASC a,
336 .messagelist thead tr th.sortedDESC a {
337 color: #004458;
338 text-decoration: underline;
339 background-image: url(images/listicons.png?v=1877.13442);
340 background-repeat: no-repeat;
341 background-position: right -912px;
342 }
343
344 .messagelist thead tr th.sortedASC a {
345 background-position: right -944px;
346 }
347
348 .messagelist td img {
349 vertical-align: middle;
350 display: inline-block;
351 }
352
353 .messagelist tbody td a {
354 color: #333;
355 text-decoration: none;
356 white-space: nowrap;
357 cursor: default;
358 }
359
360 .messagelist tbody tr td.flag,
361 .messagelist tbody tr td.status,
362 .messagelist tbody tr td.subject span.status {
363 cursor: pointer;
364 }
365
366 .messagelist tr > .flag span,
367 .messagelist tr > .status span,
368 .messagelist tr > .attachment span,
369 .messagelist tr > .priority span {
370 display: block;
371 width: 20px;
372 text-indent: -5000px;
373 overflow: hidden;
374 }
375
376 .messagelist tr td div.collapsed,
377 .messagelist tr td div.expanded,
378 .messagelist tr > .threads .listmenu,
379 .messagelist tr > .attachment span.attachment,
380 .messagelist tr > .attachment span.report,
381 .messagelist tr > .priority span.priority,
382 .messagelist tr > .priority span.prio1,
383 .messagelist tr > .priority span.prio2,
384 .messagelist tr > .priority span.prio3,
385 .messagelist tr > .priority span.prio4,
386 .messagelist tr > .priority span.prio5,
387 .messagelist tr > .flag span.flagged,
388 .messagelist tr > .flag span.unflagged,
389 .messagelist tr > .flag span.unflagged:hover,
390 .messagelist tr > .status span.status,
391 .messagelist tr > .status span.msgicon,
392 .messagelist tr > .status span.deleted,
393 .messagelist tr > .status span.unread,
394 .messagelist tr > .status span.unreadchildren,
395 .messagelist tr > .subject span.msgicon,
396 .messagelist tr > .subject span.deleted,
397 .messagelist tr > .subject span.unread,
398 .messagelist tr > .subject span.replied,
399 .messagelist tr > .subject span.forwarded,
400 .messagelist tr > .subject span.unreadchildren {
401 display: inline-block;
402 vertical-align: middle;
403 height: 18px;
404 width: 20px;
405 padding: 0;
406 background: url(images/listicons.png?v=1877.13442) -100px 0 no-repeat;
407 }
408
409 .messagelist tbody tr td.attachment span.attachment {
410 background-position: 0 -996px;
411 }
412
413 .messagelist thead tr th.attachment span.attachment {
414 background-position: -24px -996px;
415 }
416
417 .messagelist tbody tr td.attachment span.report {
418 background-position: -24px -1116px;
419 }
420
421 .messagelist thead tr th.priority span.priority {
422 background-position: -25px -1845px;
423 }
424
425 .messagelist tr td.priority span.prio5 {
426 background-position: 0 -1905px;
427 }
428
429 .messagelist tr td.priority span.prio4 {
430 background-position: 0 -1885px;
431 }
432
433 .messagelist tr td.priority span.prio2 {
434 background-position: 0 -1865px;
435 }
436
437 .messagelist tr td.priority span.prio1 {
438 background-position: 0 -1845px;
439 }
440
441 .messagelist tbody tr td.flag span.flagged {
442 background-position: 0 -1036px;
443 }
444
445 .messagelist thead tr th.flag span.flagged {
446 background-position: -22px -1037px;
447 }
448
449 .messagelist tr:hover td.status span.msgicon {
450 background-position: -23px -1057px;
451 }
452
453 .messagelist tr:hover td.flag span.unflagged {
454 background-position: -23px -1076px;
455 }
456
457 .messagelist tr td.subject span.msgicon,
458 .messagelist tr td.subject span.unreadchildren {
459 background-position: 0 -1056px;
460 margin: 0 1px 0 0;
461 width: 24px;
462 }
463
464 .messagelist tr td.subject span.replied {
465 background-position: 0 -1076px;
466 }
467
468 .messagelist tr td.subject span.forwarded {
469 background-position: 0 -1096px;
470 }
471
472 .messagelist tr td.subject span.replied.forwarded {
473 background-position: 0 -1116px;
474 }
475
476 .messagelist tr td.status span.msgicon,
477 .messagelist tr td.flag span.unflagged,
478 .messagelist tr td.status span.unreadchildren {
479 background-position: 0 1056px; /* no icon */
480 }
481 /*
482 .messagelist tr td.status span.msgicon:hover {
483 background-position: 0 -272px;
484 }
485 */
486 .messagelist tr td.status span.deleted,
487 .messagelist tr:hover td.status span.deleted,
488 .messagelist tr td.subject span.deleted {
489 background-position: -21px -1096px;
490 }
491
492 .messagelist tr td.status span.status,
493 .messagelist tr td.status span.unread,
494 .messagelist tr td.subject span.unread,
495 .messagelist tr td.status span.unread:hover {
496 background-position: 0 -1017px !important;
497 }
498
499 .messagelist thead tr th.status span.status {
500 background-position: -23px -1017px;
501 }
502
503 .messagelist tr td div.collapsed {
504 background-position: 0 -1137px;
505 cursor: pointer;
506 }
507
508 .messagelist tr td div.expanded {
509 background-position: 0 -1157px;
510 cursor: pointer;
511 }
512
513 .messagelist tr th.threads .listmenu {
514 background-position: 4px -972px;
515 cursor: pointer;
516 width: 24px;
517 height: 21px;
518 overflow: hidden;
519 text-indent: -5000px;
520 margin: -3px -5px -2px -6px;
521 padding: 3px 5px 2px 6px;
522 }
523
524 .messagelist tr th.threads .listmenu:focus {
525 background-color: rgba(73,180,210,0.7);
526 outline: none;
527 }
528
529 .messagelist thead tr th.subject,
530 .messagelist tbody tr td.subject {
531 width: 99%;
532 white-space: nowrap;
533 }
534
535 .messagelist tbody tr td.subject a {
536 cursor: default;
537 vertical-align: middle; /* #1487091 */
538 }
539
540 /* thread parent message with unread children */
541 .messagelist tbody tr.unroot td.subject a {
542 text-decoration: underline;
543 }
544
545 /**** tree indicators ****/
546
547 .messagelist tbody tr td span.branch div {
548 display: inline-block;
549 }
550
551 .messagelist tbody tr td span.branch div.tree {
552 width: 15px;
553 }
554
555 #listoptions ul.proplist {
556 min-width: 16em;
557 }
558
559 /**** message view ****/
560
561 #mailpreviewframe {
562 display: none;
563 position: absolute;
564 top: 0;
565 left: 0;
566 width: 100%;
567 bottom: 0px;
568 }
569
570 #messagecontframe {
571 border: 0;
572 border-radius: 4px;
573 }
574
575 #messagecontent {
576 position: absolute;
577 top: 110px;
578 left: 0;
579 width: 100%;
580 bottom: 1px;
581 overflow: auto;
582 -webkit-overflow-scrolling: touch;
583 }
584
585 #messageheader,
586 #composeheaders {
587 position: relative;
588 padding: 3px 0;
589 background: #f9f9f9;
590 background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
591 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
592 background: -o-linear-gradient(top, #fff 0%, #f0f0f0 100%);
593 background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
594 background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
595 border-bottom: 1px solid #dfdfdf;
596 }
597
598 #mailview-right #messageheader {
599 border-radius: 4px 4px 0 0;
600 padding-left: 78px;
601 /* avoid headers eating up all the vertical space */
602 max-height: 50%;
603 overflow: auto;
604 }
605
606 h2.subject {
607 font-size: 15px;
608 margin: 0 15em 0 0;
609 padding: 4px 8px 2px 8px;
610 white-space: nowrap;
611 overflow: hidden;
612 text-overflow: ellipsis;
613 }
614
615 #mailview-right #messageheader h2.subject {
616 margin-left: -56px;
617 }
618
619 h3.subject {
620 font-size: 14px;
621 margin: 0 15em 0 0;
622 padding: 8px 8px 4px 8px;
623 white-space: nowrap;
624 overflow: hidden;
625 text-overflow: ellipsis;
626 }
627
628 .headers-table td {
629 color: #666;
630 padding: 2px 8px;
631 }
632
633 .headers-table td.header,
634 .ui-dialog-content.popup span.adr {
635 font-weight: bold;
636 }
637
638 .headers-table td.header-title {
639 white-space: nowrap;
640 }
641
642 .headers-table td.header a,
643 .ui-dialog-content.popup span.adr a {
644 color: #666;
645 text-decoration: none;
646 }
647
648 .headers-table td.header a:hover,
649 .ui-dialog-content.popup span.adr a:hover {
650 text-decoration: underline;
651 }
652
653 .headers-table td.subject {
654 color: #333;
655 font-size: 110%;
656 font-weight: bold;
657 }
658
659 .headers-table td.header span,
660 .ui-dialog-content.popup span.adr {
661 white-space: nowrap;
662 }
663
664 .headers-table td.header a.morelink {
665 color: #0069a6;
666 white-space: nowrap;
667 font-weight: normal;
668 }
669
670 .rcmaddcontact {
671 position: relative;
672 top: 1px;
673 margin-left: 0.5em;
674 }
675
676 .rcmaddcontact imp {
677 width: 20px;
678 height: 13px;
679 }
680
681 #preview-allheaders {
682 display: none;
683 }
684
685 #preview-allheaders td.header-title,
686 #preview-shortheaders td.header-title {
687 padding-left: 0;
688 }
689
690 #preview-shortheaders td.header {
691 padding-right: 18px;
692 }
693
694 .moreheaderstoggle {
695 display: block;
696 position: absolute;
697 top: 0;
698 left: 0;
699 bottom: 0;
700 width: 18px;
701 padding: 0;
702 outline: none;
703 background: #f2f2f2;
704 background: -moz-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
705 background: -webkit-gradient(linear, left top, right top, color-stop(0,#fbfbfb), color-stop(100%,#e9e9e9));
706 background: -o-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
707 background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
708 background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%);
709 border-right: 1px solid #dfdfdf;
710 border-radius: 3px 0 0 0; /* for Opera */
711 }
712
713 .moreheaderstoggle:focus {
714 background: #f2f2f2;
715 background: -moz-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
716 background: -webkit-gradient(linear, left top, right top, color-stop(0,#66bcd9), color-stop(100%,#49b3d2));
717 background: -o-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
718 background: -ms-linear-gradient(left, #66bcd9 0, #49b3d2 100%);
719 background: linear-gradient(left, #66bcd9 0, #49b3d2 100%);
720 border-right-color: #149cc5;
721 }
722
723 .moreheaderstoggle .iconlink {
724 display: inline-block;
725 position: absolute;
726 top: 8px;
727 left: 0;
728 width: 18px;
729 height: 16px;
730 background: url(images/buttons.png?v=51d4.15699) -27px -242px no-repeat;
731 }
732
733 .moreheaderstoggle.remove .iconlink {
734 top: auto;
735 bottom: 5px;
736 background-position: -5px -242px;
737 }
738
739 #full-headers {
740 position: relative;
741 }
742
743 div.more-headers {
744 position: absolute;
745 top: -12px;
746 right: 10px;
747 width: 12px;
748 height: 10px;
749 cursor: pointer;
750 background: url(images/buttons.png?v=51d4.15699) center -1579px no-repeat;
751 }
752
753 div.hide-headers {
754 background-position: center -1590px;
755 }
756
757 #all-headers {
758 position: relative;
759 margin: 4px 10px;
760 padding: 0;
761 height: 180px;
762 border: 1px solid #ccc;
763 border-radius: 4px;
764 background: #fdfdfd;
765 box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
766 -webkit-box-shadow: inset 0 0 1px 1px rgba(0,0,0, 0.1);
767 }
768
769 #headers-source {
770 display: none;
771 position: absolute;
772 top: 0;
773 left: 0;
774 right: 0;
775 bottom: 0;
776 padding: 3px 6px;
777 overflow: auto;
778 text-align: left;
779 color: #333;
780 }
781
782 #messageheader.previewheader #all-headers {
783 margin-left: 0;
784 }
785
786 #messageheader.previewheader {
787 position: relative;
788 height: auto;
789 min-height: 52px;
790 padding: 0 0 3px 72px;
791 }
792
793 #messageheader.previewheader h3.subject {
794 padding: 8px 8px 2px 0;
795 }
796
797 #messageheader.previewheader #contactphoto {
798 display: block;
799 position: absolute;
800 top: 11px;
801 left: 30px;
802 width: 32px;
803 height: 32px;
804 overflow: hidden;
805 background: url(images/contactpic_32px.png?v=6be9.274) center center no-repeat #fff;
806 border-radius: 3px;
807 }
808
809 #messageheader.previewheader #contactphoto img {
810 width: 32px;
811 height: auto;
812 border-radius: 3px;
813 }
814
815 #messageheader .message-headers {
816 min-height: 60px;
817 }
818
819 #messageheader #contactphoto {
820 display: block;
821 position: absolute;
822 top: 34px;
823 left: 30px;
824 width: 48px;
825 height: 48px;
826 overflow: hidden;
827 border-radius: 4px;
828 border: 1px solid #e6e6e6;
829 background: url(images/contactpic_48px.png?v=1bc4.353) center center no-repeat #fff;
830 }
831
832 #messageheader #contactphoto img {
833 width: 48px;
834 height: auto;
835 border-radius: 4px;
836 }
837
838 #messageheader #countcontrols,
839 #messageheader #formatcontrols {
840 position: absolute;
841 top: 8px;
842 right: 8px;
843 text-align: right;
844 white-space: nowrap;
845 }
846
847 #messageheader #formatcontrols {
848 top: 38px;
849 right: 8px;
850 }
851
852 #messageheader .pagenav .countdisplay {
853 padding-right: 0.5em;
854 white-space: nowrap;
855 }
856
857 #messagecontent .leftcol,
858 #messagepreview .leftcol {
859 margin-right: 252px;
860 }
861
862 #messagecontent .rightcol,
863 #messagepreview .rightcol {
864 float: right;
865 /*
866 position: absolute;
867 top: 10px;
868 right: 10px;
869 height: 90%;
870 */
871 width: 230px;
872 margin: 8px;
873 min-height: 200px;
874 background: #f0f0f0;
875 padding: 8px;
876 border-radius: 4px;
877 }
878
879 #messagebody {
880 position: relative;
881 margin: 8px;
882 }
883
884 #message-objects div,
885 #messagebody span.part-notice {
886 margin: 8px;
887 }
888
889 #message-objects div.notice {
890 display: block;
891 color: #960;
892 border: 1px solid #ffdf0e;
893 background-color: #fef893;
894 background-position: 5px -83px;
895 padding: 6px 12px 6px 30px;
896 white-space: normal;
897 }
898
899 #message-objects div a.button,
900 #messagebody span.part-notice a.button {
901 margin-left: 10px;
902 margin-top: -1px;
903 }
904
905 div.message-part,
906 div.message-htmlpart,
907 div.message-partheaders {
908 padding: 10px 2px;
909 border-top: 1px solid #ccc;
910 }
911
912 #messagebody div:first-child {
913 padding-top: 0;
914 border-top: 0;
915 }
916
917 div.message-part div.pre {
918 margin: 0;
919 padding: 0;
920 font-family: monospace;
921 font-size: 12px;
922 }
923
924 div.message-part span.sig {
925 color: #666;
926 }
927
928 div.message-part blockquote {
929 color: blue;
930 border-left: 2px solid blue;
931 border-right: 2px solid blue;
932 background-color: #F6F6F6;
933 margin: 2px 0;
934 padding: 0 0.4em;
935 overflow: hidden;
936 text-overflow: ellipsis;
937 }
938
939 div.message-part blockquote blockquote {
940 color: green;
941 border-left: 2px solid green;
942 border-right: 2px solid green;
943 }
944
945 div.message-part blockquote blockquote blockquote {
946 color: #900;
947 border-left: 2px solid #b00;
948 border-right: 2px solid #b00;
949 }
950
951 div.message-partheaders {
952 margin-top: 8px;
953 padding: 8px 0;
954 }
955
956 div.message-partheaders .headers-table {
957 width: 100%;
958 }
959
960 div.message-partheaders .headers-table td.header-title {
961 width: auto;
962 padding-left: 0;
963 }
964
965 div.message-partheaders .headers-table td.header {
966 width: 88%;
967 }
968
969 #messagebody > hr {
970 color: #fff;
971 background: #fff;
972 border: 0;
973 border-bottom: 2px solid #f0f0f0;
974 }
975
976 #messagebody fieldset.image-attachment {
977 border: 0;
978 border-top: 1px solid #ccc;
979 margin-top: 1em;
980 }
981
982 #messagebody fieldset.image-attachment p > img {
983 max-width: 80%;
984 }
985
986 #messagebody legend.image-filename {
987 color: #999;
988 font-size: 0.9em;
989 margin: 0 1em;
990 }
991
992 #messagebody p.image-attachment {
993 position: relative;
994 padding: 1em;
995 margin-bottom: 0;
996 border-top: 1px solid #ccc;
997 }
998
999 #messagebody p.image-attachment a.image-link {
1000 float: left;
1001 display: block;
1002 margin-right: 2em;
1003 min-width: 160px;
1004 min-height: 60px;
1005 text-align: center;
1006 }
1007
1008 #messagebody p.image-attachment .image-filename {
1009 display: block;
1010 font-weight: bold;
1011 line-height: 1.6em;
1012 }
1013
1014 #messagebody p.image-attachment .image-filesize {
1015 padding-right: 1em;
1016 }
1017
1018 #messagebody p.image-attachment .attachment-links a {
1019 margin-right: 0.6em;
1020 }
1021
1022 #messagepartcontainer {
1023 position: absolute;
1024 top: 0;
1025 left: 232px;
1026 right: 0;
1027 bottom: 0;
1028 }
1029
1030 #messagepartframe {
1031 border: 0;
1032 width: 100%;
1033 height: 100%;
1034 }
1035
1036 #messagepartheader {
1037 position: absolute;
1038 top: 0;
1039 left: 0;
1040 width: 220px;
1041 bottom: 0;
1042 }
1043
1044 #messagepartheader table {
1045 table-layout: fixed;
1046 overflow: hidden;
1047 }
1048
1049 #messagepartheader table td {
1050 text-overflow: ellipsis;
1051 overflow: hidden;
1052 }
1053
1054 #messagepartheader table td.title {
1055 width: 60px;
1056 padding-right: 0;
1057 }
1058
1059
1060 /*** message composition ***/
1061
1062 #composeview-left {
1063 position: absolute;
1064 top: 0;
1065 left: 0;
1066 width: 200px;
1067 bottom: 0;
1068 }
1069
1070 #composeview-right {
1071 position: absolute;
1072 top: 0;
1073 left: 212px;
1074 right: 0;
1075 bottom: 0;
1076 }
1077
1078 #compose-contacts {
1079 position: absolute;
1080 top: 0;
1081 left: 0;
1082 width: 100%;
1083 bottom: 0;
1084 }
1085
1086 #compose-contacts .listsearchbox {
1087 display: block;
1088 }
1089
1090 #compose-contacts #directorylist {
1091 border-bottom: 4px solid #c7e3ef;
1092 }
1093
1094 #compose-contacts .scroller {
1095 top: 65px;
1096 border-top: 1px solid #fff;
1097 }
1098
1099 #contacts-table {
1100 table-layout: fixed;
1101 }
1102
1103 #contacts-table td {
1104 width: 100%;
1105 }
1106
1107 #contacts-table td span {
1108 display: block;
1109 }
1110
1111 #contacts-table td span.email {
1112 display: inline;
1113 color: #69939e;
1114 font-style: italic;
1115 margin-left: 0.5em;
1116 }
1117
1118 #compose-contacts li a,
1119 #contacts-table td {
1120 background-image: url(images/listicons.png?v=1877.13442);
1121 background-position: -100px 0;
1122 background-repeat: no-repeat;
1123 overflow: hidden;
1124 text-overflow: ellipsis;
1125 }
1126
1127 #compose-contacts li a {
1128 padding-left: 36px;
1129 }
1130
1131 #contacts-table td.contactgroup a {
1132 color: #376572;
1133 text-decoration: none;
1134 }
1135
1136 #contacts-table td.contactgroup a span {
1137 display: inline-block;
1138 font-size: 16px;
1139 font-weight: bold;
1140 line-height: 11px;
1141 margin-left: 0.3em;
1142 }
1143
1144 #contacts-table tr:first-child td {
1145 border-top: 0;
1146 }
1147
1148 #compose-contacts li.addressbook a {
1149 background-position: 6px -766px;
1150 }
1151
1152 #compose-contacts li.addressbook a:focus,
1153 #compose-contacts li.addressbook.selected a {
1154 background-position: 6px -791px;
1155 }
1156
1157 #contacts-table td.contactgroup {
1158 background-position: 6px -1555px;
1159 }
1160
1161 #contacts-table tr.selected td.contactgroup {
1162 background-position: 6px -1579px;
1163 }
1164
1165 #contacts-table td.contact {
1166 background-position: 6px -1603px;
1167 }
1168
1169 #contacts-table tr.selected td.contact {
1170 background-position: 6px -1627px;
1171 }
1172
1173 #compose-content {
1174 position: absolute;
1175 top: 0;
1176 left: 0;
1177 right: 0;
1178 bottom: 0px;
1179 overflow: hidden;
1180 }
1181
1182 #composeheaders {
1183 border-radius: 4px 4px 0 0;
1184 padding-left: 19px;
1185 }
1186
1187 #composebuttons {
1188 position: absolute;
1189 top: 6px;
1190 right: 6px;
1191 width: auto;
1192 white-space: nowrap;
1193 z-index: 100;
1194 }
1195
1196 #composebuttons a.button.extwin {
1197 padding: 2px 3px;
1198 }
1199
1200 .compose-headers {
1201 width: 99%;
1202 margin-bottom: 2px;
1203 }
1204
1205 .compose-headers td {
1206 padding: 2px 4px;
1207 }
1208
1209 .compose-headers td.title {
1210 width: 11%;
1211 white-space: nowrap;
1212 padding-left: 6px;
1213 }
1214
1215 .compose-headers td.title label {
1216 float: left;
1217 }
1218
1219 .compose-headers td.title a.iconbutton {
1220 float: right;
1221 position: relative;
1222 top: -2px;
1223 width: 15px;
1224 }
1225
1226 .compose-headers td.editfield {
1227 width: 90%;
1228 padding-left: 4px;
1229 }
1230
1231 .compose-headers td.editfield a.iconlink {
1232 margin-left: 0.5em;
1233 }
1234
1235 .compose-headers td.formlinks {
1236 padding: 0 4px;
1237 }
1238
1239 .compose-headers td.top {
1240 vertical-align: top;
1241 padding-top: 10px;
1242 }
1243
1244 .compose-headers td textarea,
1245 .compose-headers td input {
1246 width: 100%;
1247 resize: none;
1248 }
1249
1250 #compose-cc, #compose-bcc, #compose-replyto, #compose-followupto {
1251 display: none;
1252 }
1253
1254 #composeoptions {
1255 display: none;
1256 padding: 2px 0 0 8px;
1257 white-space: normal;
1258 border-top: 1px solid #dfdfdf;
1259 box-shadow: inset 0 1px 0 0 #fff;
1260 -webkit-box-shadow: inset 0 1px 0 0 #fff;
1261 }
1262
1263 .composeoption {
1264 color: #666;
1265 padding-right: 22px;
1266 white-space: nowrap;
1267 }
1268
1269 #composeoptions .composeoption {
1270 display: inline-block;
1271 padding: 4px 22px 4px 0;
1272 }
1273
1274 #composeoptions .composeoption:last-child {
1275 padding-right: 4px;
1276 }
1277
1278 .mozilla .composeoption input {
1279 vertical-align: -3px;
1280 }
1281
1282 #composeview-bottom {
1283 position: relative;
1284 width: 100%;
1285 height: 200px;
1286 }
1287
1288 #composebodycontainer {
1289 position: absolute;
1290 top: 0;
1291 left: 0;
1292 right: 260px;
1293 bottom: 0;
1294 border-radius: 0 0 0 4px;
1295 }
1296
1297 #composebodycontainer.buttons {
1298 bottom: 42px;
1299 }
1300
1301 #composebody {
1302 position: absolute;
1303 top: 0;
1304 left: 0;
1305 bottom: 0;
1306 width: 99%;
1307 border: 0;
1308 border-radius: 0 0 0 4px;
1309 padding: 4px;
1310 resize: none;
1311 font-family: monospace;
1312 font-size: 9pt;
1313 outline: none;
1314 box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
1315 -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
1316 }
1317
1318 #composebody:active,
1319 #composebody:focus {
1320 box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
1321 -webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
1322 }
1323
1324 #compose-attachments {
1325 position: absolute;
1326 right: 0;
1327 top: 1px;
1328 bottom: 0;
1329 width: 240px;
1330 background: #f0f0f0;
1331 border-style: solid;
1332 border-color: #f0f0f0 #f0f0f0 #f0f0f0 #ddd;
1333 border-width: 1px;
1334 padding: 8px;
1335 overflow: auto;
1336 }
1337
1338 #compose-attachments.droptarget {
1339 background-image: url(images/filedrop.png?v=ba79.421);
1340 background-position: center bottom;
1341 background-repeat: no-repeat;
1342 }
1343
1344 #compose-attachments.droptarget.hover,
1345 #compose-attachments.droptarget.active {
1346 border-color: #019bc6;
1347 box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
1348 -webkit-box-shadow: 0 0 3px 2px rgba(71,135,177, 0.5);
1349 }
1350
1351 #compose-attachments.droptarget.hover {
1352 background-color: #d9ecf4;
1353 box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
1354 -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
1355 }
1356
1357 #composeview-bottom .formbuttons.floating {
1358 position: absolute;
1359 width: auto;
1360 right: 260px;
1361 z-index: 200;
1362 padding-bottom: 8px;
1363 }
1364
1365 #composebodycontainer .mce-tinymce {
1366 border: 0 !important;
1367 margin-top: 1px;
1368 }
1369
1370 #composebodycontainer .mce-panel {
1371 border-color: #ccc !important;
1372 background: #f0f0f0;
1373 }
1374
1375 #composebody_toolbargroup {
1376 border-bottom: 1px solid #ddd;
1377 }
1378
1379 #uploadform a.iconlink {
1380 margin-left: 1em;
1381 text-indent: -5000px;
1382 }
1383
1384 #uploadform form div {
1385 margin: 4px 0;
1386 }