skins/default/mail.css

   1 /***** RoundCube|Mail mail task styles *****/
   2
   3
   4 #messagetoolbar
   5 {
   6   position: absolute;
   7   top: 47px;
   8   left: 200px;
   9   right: 200px;
  10   height: 35px;
  11   white-space: nowrap;
  12 /*  border: 1px solid #cccccc; */
  13   /* css hack for IE */
  14   width: expression((parseInt(document.documentElement.clientWidth)-400)+'px');
  15 }
  16
  17 #messagetoolbar a
  18 {
  19   padding-right: 10px;
  20 }
  21
  22 #messagetoolbar select
  23 {
  24   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  25   font-size: 11px;
  26   color: #333333;
  27 }
  28
  29 #messagetoolbar select.mboxlist
  30 {
  31   position: absolute;
  32   left: 375px;
  33   top: 8px;
  34 }
  35
  36 #messagetoolbar select.mboxlist option
  37 {
  38   padding-left: 15px;
  39 }
  40
  41 #messagetoolbar select.mboxlist option[value="0"]
  42 {
  43   padding-left: 2px;
  44 }
  45
  46 #markmessagemenu
  47 {
  48   position: absolute;
  49   top: 32px;
  50   left: 90px;
  51   width: auto;
  52   visibility: hidden;
  53   background-color: #F9F9F9;
  54   border: 1px solid #CCC;
  55   padding: 1px;
  56   opacity: 0.9;
  57   filter:alpha(opacity=90);
  58   z-index: 240;
  59 }
  60
  61 ul.toolbarmenu
  62 {
  63   margin: 0;
  64   padding: 0;
  65   list-style: none;
  66 }
  67
  68 ul.toolbarmenu li
  69 {
  70   font-size: 11px;
  71   white-space: nowrap;
  72   min-width: 130px;
  73   width: auto !important;
  74   width: 130px;
  75 }
  76
  77 ul.toolbarmenu li a
  78 {
  79   display: block;
  80   color: #a0a0a0;
  81   padding: 2px 8px 3px 12px;
  82   text-decoration: none;
  83 }
  84
  85 ul.toolbarmenu li a.active:hover
  86 {
  87   background-color: #ddd;
  88 }
  89
  90 #searchfilter
  91 {
  92   position: absolute;
  93   right: 18px;
  94   top: 8px;
  95   width: 240px;
  96   text-align: right;
  97 }
  98
  99 #searchfilter label
 100 {
 101   font-size: 11px;
 102 }
 103
 104 #listcontrols a,
 105 #listcontrols a:active,
 106 #listcontrols a:visited,
 107 #mailboxcontrols a,
 108 #mailboxcontrols a:active,
 109 #mailboxcontrols a:visited,
 110 td.formlinks a,
 111 td.formlinks a:visited
 112 {
 113   color: #999999;
 114   font-size: 11px;
 115   text-decoration: none;
 116 }
 117
 118 #listcontrols a.active,
 119 #listcontrols a.active:active,
 120 #listcontrols a.active:visited,
 121 #mailboxcontrols a.active,
 122 #mailboxcontrols a.active:active,
 123 #mailboxcontrols a.active:visited,
 124 ul.toolbarmenu li a.active,
 125 ul.toolbarmenu li a.active:active,
 126 ul.toolbarmenu li a.active:visited,
 127 td.formlinks a,
 128 td.formlinks a:visited
 129 {
 130   color: #CC0000;
 131 }
 132
 133 #listcontrols a.active:hover,
 134 #mailboxcontrols a.active:hover
 135 {
 136   text-decoration: underline;
 137 }
 138
 139 #listcontrols,
 140 #mailboxcontrols
 141 {
 142   padding-right: 2em;
 143 }
 144
 145 #messagecountbar
 146 {
 147   position: absolute;
 148   bottom: 16px;
 149   right: 20px;
 150   width: 300px;
 151   height: 20px;
 152   text-align: right;
 153   white-space: nowrap;
 154 }
 155
 156 #messagecountbar span
 157 {
 158   font-size: 11px;
 159   color: #333333;
 160 }
 161
 162 #mainscreen
 163 {
 164   position: absolute;
 165   top: 85px;
 166   right: 20px;
 167   bottom: 40px;
 168   left: 20px;
 169   /* css hack for IE */
 170   width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
 171   height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
 172 }
 173
 174 #mailrightcontainer
 175 {
 176   position: absolute;
 177   top: 0px;
 178   left: 170px;
 179   bottom: 0px;
 180   right: 0px;
 181   /* css hack for IE */
 182   width: expression((parseInt(this.parentNode.offsetWidth)-170)+'px');
 183   height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 184 }
 185
 186 #messagepartcontainer
 187 {
 188   position: absolute;
 189   top: 80px;
 190   left: 20px;
 191   right: 20px;
 192   bottom: 20px;
 193   /* css hack for IE */
 194   width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
 195   height: expression((parseInt(document.documentElement.clientHeight)-100)+'px');
 196 }
 197
 198 #mailcontframe
 199 {
 200   position: absolute;
 201   width: 100%;
 202   top: 0px;
 203   bottom: 0px;
 204   border: 1px solid #999999;
 205   background-color: #F9F9F9;
 206   overflow: auto;
 207   /* css hack for IE */
 208   height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 209 }
 210
 211 #mailpreviewframe
 212 {
 213   position: absolute;
 214   width: 100%;
 215   top: 205px;
 216   bottom: 0px;
 217   border: 1px solid #999999;
 218   background-color: #F9F9F9;
 219   /* css hack for IE */
 220   height: expression((parseInt(this.parentNode.offsetHeight)-205)+'px');
 221 }
 222
 223 #messagecontframe
 224 {
 225   position: relative;
 226   top: 0px;
 227   left: 0px;
 228   right: 0px;
 229   bottom: 0px;
 230   width: 100%;
 231   height: 100%;
 232 }
 233
 234 #messagepartframe
 235 {
 236   width: 100%;
 237   height: 100%;
 238   border: 1px solid #999999;
 239   background-color: #F9F9F9;
 240 }
 241
 242
 243 #partheader
 244 {
 245   position: absolute;
 246   top: 10px;
 247   left: 220px;
 248   right: 20px;
 249   height: 40px;
 250   /* css hack for IE */
 251   width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
 252 }
 253
 254 #partheader table td
 255 {
 256   padding-left: 2px;
 257   padding-right: 4px;
 258   vertical-align: middle;
 259   font-size: 11px;
 260 }
 261
 262 #partheader table td.title
 263 {
 264   color: #666666;
 265   font-weight: bold;
 266 }
 267
 268
 269 /** mailbox list styles */
 270
 271 #mailboxlist-header
 272 {
 273   display: block;
 274   height: 12px;
 275   margin: 0;
 276   padding: 3px 10px 4px 10px;
 277   background-color: #EBEBEB;
 278   background-image: url(images/listheader_aqua.gif);
 279   border-bottom: 1px solid #999;
 280   color: #333333;
 281   font-size: 11px;
 282   font-weight: bold;
 283 }
 284
 285 #mailboxlist-container
 286 {
 287   position: absolute;
 288   top: 0px;
 289   left: 0px;
 290   width: 160px;
 291   bottom: 0px;
 292   border: 1px solid #999;
 293   background-color: #F9F9F9;
 294   overflow: auto;
 295   /* css hack for IE */
 296   height: expression(parseInt(this.parentNode.offsetHeight)+'px');
 297 }
 298
 299 #mailboxlist
 300 {
 301   position:relative;
 302   height: auto;
 303   margin: 0px;
 304   padding: 0px;
 305   list-style-image: none;
 306   list-style-type: none;
 307   overflow: hidden;
 308   white-space: nowrap;
 309 }
 310
 311 #mailboxlist li
 312 {
 313   display: block;
 314   position: relative;
 315   font-size: 11px;
 316   background: url(images/icons/folder-closed.png) no-repeat;
 317   background-position: 5px 1px;
 318   border-bottom: 1px solid #EBEBEB;
 319 }
 320
 321 #mailboxlist li div
 322 {
 323   position: absolute;
 324   left: 8px !important;
 325   left: -16px;
 326   top: 2px;
 327   width: 14px;
 328   height: 16px;
 329 }
 330
 331 #mailboxlist li div.collapsed,
 332 #mailboxlist li div.expanded
 333 {
 334   cursor: pointer;
 335 }
 336
 337 #mailboxlist li div.collapsed
 338 {
 339   background: url(images/icons/collapsed.png) bottom right no-repeat;
 340 }
 341
 342 #mailboxlist li div.expanded
 343 {
 344   background: url(images/icons/expanded.png) bottom right no-repeat;
 345 }
 346
 347 #mailboxlist li.inbox
 348 {
 349   background-image: url(images/icons/folder-inbox.png);
 350 }
 351
 352 #mailboxlist li.drafts
 353 {
 354   background-image: url(images/icons/folder-drafts.png);
 355 }
 356
 357 #mailboxlist li.sent
 358 {
 359   background-image: url(images/icons/folder-sent.png);
 360 }
 361
 362 #mailboxlist li.junk
 363 {
 364   background-image: url(images/icons/folder-junk.png);
 365 }
 366
 367 #mailboxlist li.trash
 368 {
 369   background-image: url(images/icons/folder-trash.png);
 370 }
 371
 372 #mailboxlist li a
 373 {
 374   cursor: default;
 375   display: block;
 376   position: relative;
 377   padding-left: 25px;
 378   padding-top: 2px;
 379   padding-bottom: 2px;
 380   text-decoration: none;
 381 }
 382
 383 #mailboxlist li.unread
 384 {
 385   font-weight: bold;
 386 }
 387
 388 #mailboxlist li.virtual > a
 389 {
 390   color: #666;
 391 }
 392
 393 #mailboxlist li.selected,
 394 #mailboxlist li.droptarget li.selected
 395 {
 396   background-color: #929292;
 397 }
 398
 399 #mailboxlist li.selected > a,
 400 #mailboxlist li.droptarget li.selected a
 401 {
 402   color: #FFF;
 403   font-weight: bold;
 404 }
 405
 406 #mailboxlist li.droptarget
 407 {
 408   background-color: #FFFFA6;
 409 }
 410
 411 /* styles for nested folders */
 412 #mailboxlist ul {
 413   list-style: none;
 414   padding: 0;
 415   margin:0;
 416   border-top: 1px solid #EBEBEB;
 417   padding-left: 15px;
 418   background-position: 25px 1px;
 419   background-color: #F9F9F9;
 420   color: blue;
 421   font-weight: normal;
 422 }
 423
 424
 425 #mailfooter
 426 {
 427   position: absolute;
 428   left: 20px;
 429   right: 20px;
 430   bottom: 18px;
 431   height: 20px;
 432   /* css hack for IE */
 433   width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
 434 }
 435
 436 #mailfooter table tr td
 437 {
 438   white-space: nowrap;
 439   vertical-align: bottom;
 440 }
 441
 442 #mailboxcontrols,
 443 #listcontrols,
 444 #countcontrols,
 445 #quotabox
 446 {
 447   white-space: nowrap;
 448   font-size: 11px;
 449 }
 450
 451
 452 /** message list styles */
 453
 454 body.messagelist
 455 {
 456   margin: 0px;
 457   background-color: #F9F9F9;
 458 }
 459
 460 #messagelist
 461 {
 462   width: 100%;
 463   display: table;
 464   table-layout: fixed;
 465   /* css hack for IE */
 466   width: expression('auto');
 467 }
 468
 469 #messagelist thead tr td
 470 {
 471   height: 20px;
 472   padding-top: 0px;
 473   padding-bottom: 0px;
 474   padding-left: 2px;
 475   padding-right: 4px;
 476   vertical-align: middle;
 477   border-bottom: 1px solid #999999;
 478   color: #333333;
 479   background-color: #EBEBEB;
 480   background-image: url(images/listheader_aqua.gif);
 481   font-size: 11px;
 482   font-weight: bold;
 483 }
 484
 485 #messagelist thead tr td.sortedASC,
 486 #messagelist thead tr td.sortedDESC
 487 {
 488   background-image: url(images/listheader_dark.gif);
 489 }
 490
 491 #messagelist thead tr td.sortedASC a
 492 {
 493   background: url(images/sort_asc.gif) top right no-repeat;
 494 }
 495
 496 #messagelist thead tr td.sortedDESC a
 497 {
 498   background: url(images/sort_desc.gif) top right no-repeat;
 499 }
 500
 501 #messagelist thead tr td a
 502 {
 503   display: block;
 504   width: auto !important;
 505   width: 100%;
 506   color: #333333;
 507   text-decoration: none;
 508 }
 509
 510 #messagelist tbody tr td
 511 {
 512   height: 16px;
 513   padding: 2px;
 514   padding-right: 4px;
 515   font-size: 11px;
 516   overflow: hidden;
 517   white-space: nowrap;
 518   text-overflow: ellipsis;
 519   border-bottom: 1px solid #EBEBEB;
 520   cursor: default;
 521 }
 522
 523 #messagelist tbody tr td a
 524 {
 525   color: #000;
 526   text-decoration: none;
 527   white-space: nowrap;
 528   cursor: inherit;
 529 }
 530
 531 #messagelist tbody tr td.subject a
 532 {
 533   cursor: default;
 534 }
 535
 536 #messagelist col
 537 {
 538   display: table-column;
 539   text-align: left;
 540   vertical-align: middle;
 541 }
 542
 543 #messagelist tr td.icon,
 544 #messagelist tr td.flag
 545 {
 546   width: 16px;
 547   vertical-align: middle;
 548   cursor: pointer;
 549 }
 550
 551 #messagelist tbody tr td.flag img:hover,
 552 #messagelist thead tr td.flag img
 553 {
 554   background: url(images/icons/unflagged.png) center no-repeat;
 555 }
 556
 557 #messagelist tr td.subject
 558 {
 559   overflow: hidden;
 560   vertical-align: middle;
 561 }
 562
 563 #messagelist tr td.size
 564 {
 565   width: 70px;
 566   text-align: right;
 567   vertical-align: middle;
 568 }
 569
 570 #messagelist thead tr td.size
 571 {
 572   text-align: left;
 573 }
 574
 575 #messagelist tr td.from,
 576 #messagelist tr td.to
 577 {
 578   width: 180px;
 579   vertical-align: middle;
 580 }
 581
 582 #messagelist tr td.date
 583 {
 584   width: 118px;
 585   vertical-align: middle;
 586 }
 587
 588 #messagelist tr.message
 589 {
 590   background-color: #FFFFFF;
 591 }
 592
 593 /*
 594 #messagelist tr.odd
 595 {
 596   background-color: #F9F9F9;
 597 }
 598 */
 599
 600 #messagelist tr.unread
 601 {
 602   font-weight: bold;
 603   background-color: #FFFFFF;
 604 }
 605
 606 #messagelist tr.flagged td,
 607 #messagelist tr.flagged td a
 608 {
 609   color: #CC0000;
 610 }
 611
 612 #messagelist tr.selected td
 613 {
 614   color: #FFFFFF;
 615   background-color: #CC3333;
 616 }
 617
 618 #messagelist tr.unfocused td
 619 {
 620   color: #FFFFFF;
 621   background-color: #929292;
 622 }
 623
 624 #messagelist tr.selected td a
 625 {
 626   color: #FFFFFF;
 627 }
 628
 629 #messagelist tr.unfocused td a
 630 {
 631   color: #FFFFFF;
 632 }
 633
 634 #messagelist tr.deleted td,
 635 #messagelist tr.deleted td a
 636 {
 637   color: #CCCCCC;
 638 }
 639
 640 /* safari hacks \*/
 641 html>body*#messagelist[id$="messagelist"]:not([class="none"]) { width: 99.8%; }
 642 html>body*#messagelist[id$="messagelist"]:not([class="none"]) tr td.flag,
 643 html>body*#messagelist[id$="messagelist"]:not([class="none"]) tr td.icon { width: 20px; }
 644 html>body*input[type$="file"]:not([class="none"]) { background-color: transparent; border: 0; }
 645 /**/
 646
 647 #quotadisplay
 648 {
 649   color: #666666;
 650   font-size: 11px;
 651 }
 652
 653 #quotadisplay img
 654 {
 655   vertical-align: middle;
 656   margin-left: 4px;
 657   border: 1px solid #999;
 658 }
 659
 660
 661 /** message view styles */
 662
 663 #messageframe
 664 {
 665   position: absolute;
 666   top: 0px;
 667   left: 170px;
 668   right: 0px;
 669   bottom: 0px;
 670   border: 1px solid #999;
 671   background-color: #FFF;
 672   overflow: auto;
 673   /* css hack for IE */
 674   width: expression((parseInt(this.parentNode.offsetWidth)-170)+'px');
 675   height: expression((parseInt(this.parentNode.offsetHeight))+'px');
 676 }
 677
 678 #messagecanvas
 679 {
 680   /* css hack for IE */
 681   width: expression((parseInt(this.parentNode.offsetWidth)-20)+'px');
 682 }
 683
 684 #printmessageframe
 685 {
 686   position: absolute;
 687   top: 0px;
 688   left: 0px;
 689   right: 0px;
 690   bottom: 0px;
 691   border: 1px solid #999;
 692   background-color: #FFF;
 693   overflow: auto;
 694   /* css hack for IE */
 695   width: expression((parseInt(document.documentElement.clientWidth)-220)+'px');
 696   height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
 697 }
 698
 699 div.messageheaderbox
 700 {
 701   margin: 6px 8px 0px 8px;
 702   border: 1px solid #ccc;
 703 }
 704
 705 table.headers-table
 706 {
 707   width: 100%;
 708   background-color: #EBEBEB;
 709   table-layout: fixed;
 710 }
 711
 712 #messagebody table.headers-table
 713 {
 714   width: auto;
 715   margin: 6px 8px;
 716   background-color: #F4F4F4;
 717   border: 1px solid #ccc;
 718 }
 719
 720 #messageframe table.headers-table
 721 {
 722   border-bottom: 1px solid #ccc;
 723 }
 724
 725 table.headers-table tr td
 726 {
 727   font-size: 11px;
 728   border-bottom:1px solid #FFFFFF;
 729 }
 730
 731 table.headers-table td.header-title
 732 {
 733   width: 80px;
 734   color: #666666;
 735   font-weight: bold;
 736   text-align: right;
 737   white-space: nowrap;
 738   padding-right: 4px;
 739 }
 740
 741 table.headers-table tr td.subject
 742 {
 743   width: 90%;
 744   font-weight: bold;
 745 }
 746
 747 table.headers-table tr td.all
 748 {
 749   width: 100%;
 750   color: #666666;
 751   text-align: left;
 752   padding-right: 10px;
 753   vertical-align: center;
 754   text-align: center;
 755 }
 756
 757 #attachment-list
 758 {
 759   margin: 0px;
 760   padding: 0px 0px 0px 72px;
 761   min-height: 16px;
 762   list-style-image: none;
 763   list-style-type: none;
 764   background: url(images/icons/attachment.png) 60px 2px no-repeat #DFDFDF;
 765   /* IE6 hack */
 766   _height: expression(Math.min(16, parseInt(document.documentElement.clientHeight))+'px');
 767 }
 768
 769 #attachment-list:after
 770 {
 771   content: ".";
 772   display: block;
 773   height: 0;
 774   font-size: 0;
 775   clear: both;
 776   visibility: hidden;
 777 }
 778
 779 #attachment-list li
 780 {
 781   float: left;
 782   height: 18px;
 783   font-size: 11px;
 784   padding: 2px 0px 0px 15px;
 785   white-space: nowrap;
 786 }
 787
 788 #attachment-list li a
 789 {
 790   text-decoration: none;
 791 }
 792
 793 #attachment-list li a:hover
 794 {
 795   text-decoration: underline;
 796 }
 797
 798 #messagebody
 799 {
 800   position:relative;
 801   padding-bottom: 10px;
 802   background-color: #FFFFFF;
 803 }
 804
 805 div.message-part
 806 {
 807   padding: 10px 8px;
 808   border-top: 1px solid #ccc;
 809 /*  overflow: hidden; */
 810 }
 811
 812 #messagebody div:first-child
 813 {
 814   border-top: 0;
 815 }
 816
 817 div.message-part a,
 818 div.message-htmlpart a
 819 {
 820   color: #0000CC;
 821 }
 822
 823 div.message-part pre,
 824 div.message-part div.pre
 825 {
 826   margin: 0px;
 827   padding: 0px;
 828   font-family: monospace;
 829   white-space: -moz-pre-wrap !important;
 830   white-space: -o-pre-wrap !important;
 831   white-space: pre-wrap !important;
 832   white-space: pre;
 833   word-wrap: break-word; /* IE (and Safari) */
 834 }
 835
 836 div.message-part blockquote
 837 {
 838   color: blue;
 839   border-left: 2px solid blue;
 840   border-right: 2px solid blue;
 841   background-color: #F6F6F6;
 842   margin: 2px 0px 2px 0px;
 843   padding: 1px 8px 1px 10px;
 844 }
 845
 846 div.message-part blockquote blockquote
 847 {
 848   color: green;
 849   border-left: 2px solid green;
 850   border-right: 2px solid green;
 851 }
 852
 853 div.message-part blockquote blockquote blockquote
 854 {
 855   color: #990000;
 856   border-left: 2px solid #bb0000;
 857   border-right: 2px solid #bb0000;
 858 }
 859
 860 body.iframe
 861 {
 862   /* css hack for IE */
 863   width: expression((parseInt(document.documentElement.clientWidth))+'px');
 864 }
 865
 866 body.iframe div.message-htmlpart
 867 {
 868   margin: 8px;
 869 }
 870
 871 div.message-htmlpart div.rcmBody
 872 {
 873   margin: 8px;
 874 }
 875
 876 #remote-objects-message
 877 {
 878   display: none;
 879   margin: 8px;
 880   min-height: 20px;
 881   padding: 10px 10px 6px 46px;
 882 }
 883
 884 #remote-objects-message a
 885 {
 886   color: #666666;
 887   padding-left: 10px;
 888 }
 889
 890 #remote-objects-message a:hover
 891 {
 892   color: #333333;
 893 }
 894
 895 #messageviewlink
 896 {
 897   position: absolute;
 898   top: 8px;
 899   right: 10px;
 900   width: 15px;
 901   height: 15px;
 902   border: 0;
 903 }
 904
 905 /** message compose styles */
 906
 907 #compose-toolbar
 908 {
 909   white-space: nowrap;
 910 }
 911
 912 #priority-selector,
 913 #receipt-selector
 914 {
 915   padding-left: 30px;
 916 }
 917
 918 #compose-container
 919 {
 920   position: absolute;
 921   top: 90px;
 922   left: 200px;
 923   right: 25px;
 924   bottom: 30px;
 925   margin: 0px;
 926   /* css hack for IE */
 927   width: expression((parseInt(document.documentElement.clientWidth)-220)+'px');
 928   height: expression((parseInt(document.documentElement.clientHeight)-120)+'px');
 929 }
 930
 931 #compose-div
 932 {
 933   position: absolute;
 934   top: 110px;
 935   bottom: 40px;
 936   width: 100%;
 937   vertical-align: top;
 938 }
 939
 940 #compose-headers
 941 {
 942   width: 100%;
 943 }
 944
 945 #compose-headers td.top
 946 {
 947   vertical-align: top;
 948 }
 949
 950 #compose-headers td.title,
 951 #compose-subject td.title
 952 {
 953   width: 80px !important;
 954   color: #666666;
 955   font-size: 11px;
 956   font-weight: bold;
 957   padding-right: 10px;
 958   white-space: nowrap;
 959 }
 960
 961 #compose-body,
 962 #compose-headers td textarea,
 963 #compose-headers td input
 964 {
 965   width: 100%;
 966   width: expression('99%');
 967 }
 968
 969 #compose-headers td textarea
 970 {
 971   height: 38px;
 972 }
 973
 974 #compose-cc,
 975 #compose-bcc,
 976 #compose-replyto
 977 {
 978   display: none;
 979 }
 980
 981 #compose-body
 982 {
 983   min-height: 100px;
 984   height: 100%;
 985   font-size: 9pt;
 986   font-family: "Courier New", Courier, monospace;
 987 }
 988
 989 #compose-attachments
 990 {
 991   position: absolute;
 992   top: 100px;
 993   left: 20px;
 994   width: 160px;
 995 }
 996
 997 #compose-attachments ul
 998 {
 999   margin: 0px;
1000   padding: 0px;
1001   border: 1px solid #CCCCCC;
1002   background-color: #F9F9F9;
1003   list-style-image: none;
1004   list-style-type: none;
1005 }
1006
1007 #compose-attachments ul li
1008 {
1009   height: 18px;
1010   font-size: 11px;
1011   padding-left: 2px;
1012   padding-top: 2px;
1013   padding-right: 4px;
1014   border-bottom: 1px solid #EBEBEB;
1015   white-space: nowrap;
1016   overflow: hidden;
1017 }
1018
1019 #attachment-title
1020 {
1021   background: url(images/icons/attachment.png) top left no-repeat;
1022   padding: 0px 0px 3px 22px;
1023 }
1024
1025 #attachment-form
1026 {
1027   position: absolute;
1028   top: 150px;
1029   left: 20px;
1030   z-index: 200;
1031   padding: 6px;
1032   visibility: hidden;
1033   border: 1px solid #CCCCCC;
1034   background-color: #F9F9F9;
1035 }
1036
1037 #attachment-form div
1038 {
1039   padding: 2px;
1040 }
1041
1042 #attachment-form div.buttons
1043 {
1044   margin-top: 4px;
1045 }
1046
1047 table.headers-table tr td.more-headers
1048 {
1049   cursor: pointer;
1050   width: 100%;
1051   height: 8px;
1052   border-bottom: 0;
1053 }
1054
1055 table.headers-table tr td.all
1056 {
1057   padding: 2px 6px 4px 6px;
1058   border-bottom: 0;
1059 }
1060
1061 td.show-headers
1062 {
1063   background: url(images/icons/down_small.gif) no-repeat center;
1064 }
1065
1066 td.hide-headers
1067 {
1068   background: url(images/icons/up_small.gif) no-repeat center;
1069 }
1070
1071 #all-headers
1072 {
1073   height: 150px;
1074   display: none;
1075 }
1076
1077 #headers-source
1078 {
1079   margin: 0 5px;
1080   padding: 0.5em;
1081   height: 145px;
1082   background: white;
1083   overflow: auto;
1084   font-size: 11px;
1085   white-space: nowrap;
1086   border: 1px solid #999999;
1087   display: none;
1088   text-align: left;
1089   color: #333;
1090 }
1091
1092 font.bold
1093 {
1094   font-weight: bold;
1095 }