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