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