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