Aleksander Machniak
2014-09-18 e7af012bc22722dbe63e9e79729f546d4efa934c
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%);
96     background: linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
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
e654d9 148 #mailboxlist li.mailbox.unread > a {
6efab0 149     padding-right: 36px;
T 150 }
151
dcf23b 152 #mailboxlist li.unread {
TB 153     font-weight: bold;
154 }
155
b6837c 156 #mailboxlist li.recent > a {
T 157     color: #017cb4;
e654d9 158 }
TB 159
13ed1e 160 #mailboxlist li.mailbox .unreadcount {
T 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%);
172     background: linear-gradient(top, #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
3c9e90 182 #mailboxlist 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%);
188     background: linear-gradient(top, #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
2fdc7c 193 #mailboxlist li.mailbox.recent > a .unreadcount {
T 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(top, #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
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 {
72afe3 496     background-position: 0 -1017px;
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%);
594     background: linear-gradient(top, #fff 0%, #f0f0f0 100%);
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;
TB 860     overflow-x: auto;
c7dcb3 861 }
T 862
dd5258 863 #messagecontent .rightcol,
b540ed 864 #messagepreview .rightcol {
c7dcb3 865     float: right;
T 866 /*
867     position: absolute;
868     top: 10px;
869     right: 10px;
870     height: 90%;
871 */
872     width: 230px;
873     margin: 8px;
874     min-height: 200px;
875     background: #f0f0f0;
876     padding: 8px;
406bec 877     border-radius: 4px;
c7dcb3 878 }
T 879
880 #messagebody {
14d00d 881     position: relative;
c7dcb3 882     margin: 8px;
T 883 }
884
885 #message-objects div,
886 #messagebody span.part-notice {
887     margin: 8px;
888 }
889
519213 890 #message-objects div.notice {
b540ed 891     display: block;
c7dcb3 892     color: #960;
T 893     border: 1px solid #ffdf0e;
894     background-color: #fef893;
bbdd62 895     background-position: 5px -83px;
cfc84e 896     padding: 6px 12px 6px 30px;
543ccb 897     white-space: normal;
c7dcb3 898 }
T 899
900 #message-objects div a.button,
901 #messagebody span.part-notice a.button {
902     margin-left: 10px;
cfc84e 903     margin-top: -1px;
519213 904 }
TB 905
c7dcb3 906 div.message-part,
a8a72e 907 div.message-htmlpart,
TB 908 div.message-partheaders {
909     padding: 10px 2px;
e327eb 910     border-top: 1px solid #ccc;
c7dcb3 911 }
T 912
913 #messagebody div:first-child {
a8a72e 914     padding-top: 0;
c7dcb3 915     border-top: 0;
T 916 }
917
918 div.message-part div.pre {
2f1d6c 919     margin: 0;
VB 920     padding: 0;
c7dcb3 921     font-family: monospace;
f69eb5 922     font-size: 12px;
c7dcb3 923 }
T 924
925 div.message-part span.sig {
2f1d6c 926     color: #666;
c7dcb3 927 }
T 928
929 div.message-part blockquote {
930     color: blue;
931     border-left: 2px solid blue;
932     border-right: 2px solid blue;
933     background-color: #F6F6F6;
c0a5aa 934     margin: 2px 0;
eda92e 935     padding: 0 0.4em;
AM 936     overflow: hidden;
937     text-overflow: ellipsis;
c7dcb3 938 }
T 939
940 div.message-part blockquote blockquote {
941     color: green;
942     border-left: 2px solid green;
943     border-right: 2px solid green;
944 }
945
946 div.message-part blockquote blockquote blockquote {
2f1d6c 947     color: #900;
VB 948     border-left: 2px solid #b00;
949     border-right: 2px solid #b00;
c7dcb3 950 }
T 951
a8a72e 952 div.message-partheaders {
TB 953     margin-top: 8px;
954     padding: 8px 0;
955 }
956
957 div.message-partheaders .headers-table {
958     width: 100%;
959 }
960
961 div.message-partheaders .headers-table td.header-title {
962     width: auto;
963     padding-left: 0;
964 }
965
966 div.message-partheaders .headers-table td.header {
967     width: 88%;
968 }
969
c7dcb3 970 #messagebody > hr {
T 971     color: #fff;
972     background: #fff;
973     border: 0;
b540ed 974     border-bottom: 2px solid #f0f0f0;
c7dcb3 975 }
T 976
031491 977 #messagebody fieldset.image-attachment {
TB 978     border: 0;
979     border-top: 1px solid #ccc;
980     margin-top: 1em;
981 }
982
983 #messagebody fieldset.image-attachment p > img {
c7dcb3 984     max-width: 80%;
T 985 }
986
031491 987 #messagebody legend.image-filename {
TB 988     color: #999;
989     font-size: 0.9em;
990     margin: 0 1em;
991 }
992
993 #messagebody p.image-attachment {
994     position: relative;
995     padding: 1em;
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
c7dcb3 1022 #messagepartcontainer {
T 1023     position: absolute;
f8a9c2 1024     top: 0;
049428 1025     left: 232px;
2f1d6c 1026     right: 0;
VB 1027     bottom: 0;
c7dcb3 1028 }
T 1029
1030 #messagepartframe {
1031     border: 0;
d9f180 1032     width: 100%;
TB 1033     height: 100%;
74d4c7 1034 }
T 1035
049428 1036 #messagepartheader {
AM 1037     position: absolute;
f8a9c2 1038     top: 0;
049428 1039     left: 0;
AM 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;
94b113 1051     overflow: hidden;
049428 1052 }
AM 1053
1054 #messagepartheader table td.title {
ad052b 1055     width: 60px;
AM 1056     padding-right: 0;
049428 1057 }
AM 1058
1059
74d4c7 1060 /*** message composition ***/
T 1061
1062 #composeview-left {
1063     position: absolute;
1064     top: 0;
1065     left: 0;
a292e4 1066     width: 200px;
74d4c7 1067     bottom: 0;
T 1068 }
1069
1070 #composeview-right {
1071     position: absolute;
1072     top: 0;
a292e4 1073     left: 212px;
74d4c7 1074     right: 0;
T 1075     bottom: 0;
1076 }
1077
af05fe 1078 #compose-contacts {
T 1079     position: absolute;
f8a9c2 1080     top: 0;
af05fe 1081     left: 0;
T 1082     width: 100%;
1083     bottom: 0;
1084 }
1085
041da2 1086 #compose-contacts .listsearchbox {
AM 1087     display: block;
1088 }
1089
7961f8 1090 #compose-contacts #directorylist {
T 1091     border-bottom: 4px solid #c7e3ef;
1092 }
1093
071c78 1094 #compose-contacts .scroller {
T 1095     top: 65px;
1096     border-top: 1px solid #fff;
1097 }
1098
7961f8 1099 #contacts-table {
T 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
83f2f6 1111 #contacts-table td span.email {
TB 1112     display: inline;
1113     color: #69939e;
1114     font-style: italic;
1115     margin-left: 0.5em;
1116 }
1117
ea0866 1118 #compose-contacts li a,
TB 1119 #contacts-table td {
1120     background-image: url(images/listicons.png);
1121     background-position: -100px 0;
1122     background-repeat: no-repeat;
7961f8 1123     overflow: hidden;
T 1124     text-overflow: ellipsis;
ea0866 1125 }
TB 1126
1127 #compose-contacts li a {
1128     padding-left: 36px;
7961f8 1129 }
T 1130
86552f 1131 #contacts-table td.contactgroup a {
TB 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
071c78 1144 #contacts-table tr:first-child td {
T 1145     border-top: 0;
1146 }
1147
7961f8 1148 #compose-contacts li.addressbook a {
T 1149     background-position: 6px -766px;
1150 }
1151
ea0866 1152 #compose-contacts li.addressbook a:focus,
7961f8 1153 #compose-contacts li.addressbook.selected a {
T 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;
ea0866 1171 }
TB 1172
74d4c7 1173 #compose-content {
T 1174     position: absolute;
f8a9c2 1175     top: 0;
74d4c7 1176     left: 0;
9e36fb 1177     right: 0;
34003c 1178     bottom: 0px;
74d4c7 1179     overflow: hidden;
T 1180 }
1181
1182 #composeheaders {
1183     border-radius: 4px 4px 0 0;
edfe79 1184     padding-left: 19px;
74d4c7 1185 }
T 1186
1187 #composebuttons {
1188     position: absolute;
edfe79 1189     top: 6px;
TB 1190     right: 6px;
74d4c7 1191     width: auto;
T 1192     white-space: nowrap;
1193     z-index: 100;
1194 }
1195
3bc6ae 1196 #composebuttons a.button.extwin {
TB 1197     padding: 2px 3px;
1198 }
1199
74d4c7 1200 .compose-headers {
T 1201     width: 99%;
edfe79 1202     margin-bottom: 2px;
74d4c7 1203 }
T 1204
1205 .compose-headers td {
edfe79 1206     padding: 2px 4px;
74d4c7 1207 }
T 1208
1209 .compose-headers td.title {
1210     width: 11%;
1211     white-space: nowrap;
edfe79 1212     padding-left: 6px;
74d4c7 1213 }
T 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;
edfe79 1256     padding: 2px 0 0 8px;
74d4c7 1257     white-space: normal;
edfe79 1258     border-top: 1px solid #dfdfdf;
TB 1259     box-shadow: inset 0 1px 0 0 #fff;
1260     -webkit-box-shadow: inset 0 1px 0 0 #fff;
74d4c7 1261 }
T 1262
1263 .composeoption {
edfe79 1264     color: #666;
74d4c7 1265     padding-right: 22px;
T 1266     white-space: nowrap;
1267 }
1268
1269 #composeoptions .composeoption {
1270     display: inline-block;
edfe79 1271     padding: 4px 22px 4px 0;
74d4c7 1272 }
T 1273
1274 #composeoptions .composeoption:last-child {
1275     padding-right: 4px;
1276 }
1277
9e2ff8 1278 .mozilla .composeoption input {
AM 1279     vertical-align: -3px;
74d4c7 1280 }
T 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;
34003c 1294     border-radius: 0 0 0 4px;
74d4c7 1295 }
T 1296
edfe79 1297 #composebodycontainer.buttons {
TB 1298     bottom: 42px;
1299 }
1300
74d4c7 1301 #composebody {
T 1302     position: absolute;
03970b 1303     top: 0;
74d4c7 1304     left: 0;
T 1305     bottom: 0;
1306     width: 99%;
1307     border: 0;
34003c 1308     border-radius: 0 0 0 4px;
74d4c7 1309     padding: 8px 0 8px 8px;
T 1310     resize: none;
1311     font-family: monospace;
1312     font-size: 9pt;
188634 1313     outline: none;
edfe79 1314     box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
TB 1315     -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2);
188634 1316 }
T 1317
1318 #composebody:active,
1319 #composebody:focus {
edfe79 1320     box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
TB 1321     -webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
74d4c7 1322 }
T 1323
1324 #compose-attachments {
1325     position: absolute;
1326     right: 0;
bab043 1327     top: 1px;
74d4c7 1328     bottom: 0;
T 1329     width: 240px;
1330     background: #f0f0f0;
ae6d2d 1331     border-style: solid;
TB 1332     border-color: #f0f0f0 #f0f0f0 #f0f0f0 #ddd;
1333     border-width: 1px;
74d4c7 1334     padding: 8px;
T 1335     overflow: auto;
1336 }
1337
ae6d2d 1338 #compose-attachments.droptarget {
TB 1339     background-image: url(images/filedrop.png);
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
edfe79 1357 #composeview-bottom .formbuttons.floating {
TB 1358     position: absolute;
1359     width: auto;
1360     right: 260px;
1361     z-index: 200;
1362     padding-bottom: 8px;
1363 }
1364
6fa5b4 1365 #composebodycontainer .mce-tinymce {
188634 1366     border: 0 !important;
b21f8b 1367     margin-top: 1px;
188634 1368 }
74d4c7 1369
6fa5b4 1370 #composebodycontainer .mce-panel {
AM 1371     border-color: #ccc !important;
9e2ff8 1372     background: #f0f0f0;
edfe79 1373 }
TB 1374
bab043 1375 #composebody_toolbargroup {
T 1376     border-bottom: 1px solid #ddd;
1377 }
1378
f5521a 1379 #uploadform a.iconlink {
T 1380     margin-left: 1em;
900e62 1381     text-indent: -5000px;
f5521a 1382 }
bab043 1383
f5521a 1384 #uploadform form div {
T 1385     margin: 4px 0;
1386 }
bab043 1387