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