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