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