skins/default/mail.css

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