Mercurial > hg > rc1

comparison skins/larry/mail.css @ 0:1e000243b222

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