skins/default/common.css

   1 /***** Roundcube|Mail basic styles *****/
   2
   3 body
   4 {
   5   margin: 8px;
   6   background-color: #F6F6F6;
   7   color: #000000;
   8 }
   9
  10 body.iframe
  11 {
  12   margin: 20px 0 0 0;
  13   background-color: #FFF;
  14 }
  15
  16 body.extwin
  17 {
  18   margin: 10px;
  19 }
  20
  21 body, td, th, div, p, h3, select, input, textarea
  22 {
  23   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  24   font-size: 12px;
  25 }
  26
  27 th
  28 {
  29   font-weight: normal;
  30 }
  31
  32 h3
  33 {
  34   font-size: 18px;
  35 }
  36
  37 a, a:active, a:visited
  38 {
  39   color: #000000;
  40   outline: none;
  41 }
  42
  43 a.button, a.button:visited, a.tab, a.tab:visited, a.axislist
  44 {
  45   color: #000000;
  46   text-decoration: none;
  47 }
  48
  49 a.tab
  50 {
  51   width: 80px;
  52   display: block;
  53   text-align: center;
  54 }
  55
  56 hr
  57 {
  58   height: 1px;
  59   background-color: #666666;
  60   border-style: none;
  61 }
  62
  63 input[type="text"],
  64 input[type="button"],
  65 input[type="password"],
  66 textarea
  67 {
  68   border: 1px solid #666666;
  69   color: #333333;
  70   background-color: #ffffff;
  71 }
  72
  73 input, textarea
  74 {
  75   color: black;
  76   padding: 1px 3px;
  77 }
  78
  79 input.button
  80 {
  81   height: 20px;
  82   color: #333333;
  83   font-size: 12px;
  84   padding-left: 8px;
  85   padding-right: 8px;
  86   background: url(images/buttons/bg.gif) repeat-x #f0f0f0;
  87   border: 1px solid #a4a4a4;
  88 }
  89
  90 input.button:hover
  91 {
  92   color: black;
  93 }
  94
  95 input.mainaction
  96 {
  97   font-weight: bold;
  98   border: 1px solid #999;
  99 }
 100
 101 img
 102 {
 103   border: 0;
 104 }
 105
 106 .alttext
 107 {
 108   font-size: 11px;
 109 }
 110
 111 .hint
 112 {
 113   color: #666;
 114   font-size: 11px;
 115 }
 116
 117 /** common user interface objects */
 118
 119 #mainscreen
 120 {
 121   position: absolute;
 122   top: 85px;
 123   right: 20px;
 124   bottom: 20px;
 125   left: 20px;
 126 }
 127
 128 #header
 129 {
 130   position: absolute;
 131   top: 8px;
 132   left: 19px;
 133   width: 170px;
 134   height: 40px;
 135   z-index: 100;
 136 }
 137
 138 #taskbar
 139 {
 140   position: absolute;
 141   top: 0px;
 142   right: 0px;
 143   height: 24px;
 144   width: 100%;
 145   background: url(images/taskbar.png) top right no-repeat;
 146   padding: 10px 4px 5px 0px;
 147   text-align: right;
 148   white-space: nowrap;
 149   z-index: 2;
 150 }
 151
 152 #taskbar a
 153 {
 154   font-size: 11px;
 155   color: #666666;
 156   text-decoration: none;
 157   padding: 6px 12px 6px 26px;
 158   background: url(images/taskicons.gif) no-repeat;
 159 }
 160
 161 #taskbar a:hover
 162 {
 163   color: #333333;
 164 }
 165
 166 #taskbar a.button-mail
 167 {
 168   background-position: 0 0;
 169 }
 170
 171 #taskbar a.button-addressbook
 172 {
 173   background-position: 0 -25px;
 174 }
 175
 176 #taskbar a.button-settings
 177 {
 178   background-position: 0 -50px;
 179 }
 180
 181 #taskbar a.button-logout
 182 {
 183   background-position: 0 -75px;
 184 }
 185
 186 #message
 187 {
 188   position: absolute;
 189   display: none;
 190   top: -1px;
 191   margin-left: -225px;
 192   left: 50%;
 193   z-index: 5000;
 194   opacity: 0.85;
 195 }
 196
 197 #message div
 198 {
 199   width: 400px;
 200   margin: 0px;
 201   min-height: 22px;
 202   padding: 8px 10px 8px 46px;
 203 }
 204
 205 #message div.notice,
 206 #remote-objects-message
 207 {
 208   background: url(images/display/icons.png) 6px 3px no-repeat;
 209   background-color: #F7FDCB;
 210   border: 1px solid #C2D071;
 211 }
 212
 213 #message div.error,
 214 #message div.warning
 215 {
 216   background: url(images/display/icons.png) 6px -97px no-repeat;
 217   background-color: #EF9398;
 218   border: 1px solid #DC5757;
 219 }
 220
 221 #message div.confirmation
 222 {
 223   background: url(images/display/icons.png) 6px -47px no-repeat;
 224   background-color: #A6EF7B;
 225   border: 1px solid #76C83F;
 226 }
 227
 228 #message div.loading
 229 {
 230   background: url(images/display/loading.gif) 6px 3px no-repeat;
 231   background-color: #EBEBEB;
 232   border: 1px solid #CCCCCC;
 233 }
 234
 235 .box
 236 {
 237   border: 1px solid #999;
 238 }
 239
 240 .boxtitle
 241 {
 242   height: 12px !important;
 243   padding: 2px 10px 5px 5px;
 244   border-bottom: 1px solid #999;
 245   color: #333;
 246   font-size: 11px;
 247   font-weight: bold;
 248   overflow: hidden;
 249   background: url(images/listheader.gif) top left repeat-x #CCC;
 250 }
 251
 252 .boxtitle .rightalign
 253 {
 254   float: right;
 255 }
 256
 257 body.iframe .boxtitle
 258 {
 259   position: fixed;
 260   top: 0;
 261   left: 0;
 262   width: 100%;
 263 }
 264
 265 .boxcontent
 266 {
 267   padding: 15px 10px 10px 10px;
 268   background-color: #F2F2F2;
 269 }
 270
 271 .boxcontent table td.title
 272 {
 273   color: #666;
 274   padding-right: 10px;
 275 }
 276
 277 .boxlistcontent
 278 {
 279   position: absolute;
 280   top: 20px;
 281   bottom: 22px;
 282   left: 0;
 283   right: 0;
 284   width: 100%;
 285   overflow-y: auto;
 286   overflow-x: hidden;
 287 }
 288
 289 .boxsubject
 290 {
 291   position: absolute;
 292   top: 0px;
 293   left: 0px;
 294   right: 0px;
 295   overflow: hidden;
 296   height: 22px;
 297   border-bottom: 1px solid #999;
 298   background: url(images/listheader.gif) top left repeat-x #CCC;
 299 }
 300
 301 .boxfooter
 302 {
 303   position: absolute;
 304   bottom: 0px;
 305   left: 0px;
 306   right: 0px;
 307   overflow: hidden;
 308   height: 22px;
 309   border-top: 1px solid #999;
 310   background: url(images/listheader.gif) top left repeat-x #CCC;
 311 }
 312
 313 .boxfooter a.button,
 314 .boxfooter a.buttonPas
 315 {
 316   display: block;
 317   float: left;
 318   width: 34px;
 319   height: 22px;
 320   padding: 0px;
 321   margin: 0;
 322   overflow: hidden;
 323   background: url(images/icons/groupactions.png) 0 0 no-repeat transparent;
 324   opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 325 }
 326
 327 .boxfooter a.groupactions
 328 {
 329   background-position: 0 -26px;
 330 }
 331
 332 .boxfooter a.buttonPas
 333 {
 334   opacity: 0.35;
 335 }
 336
 337 .pagenav
 338 {
 339   min-width: 250px;
 340 }
 341
 342 .pagenav span
 343 {
 344   color: #444;
 345   font-size: 11px;
 346   text-shadow: white 1px 1px;
 347   white-space: nowrap;
 348 }
 349
 350 .pagenav a.button,
 351 .pagenav a.buttonPas
 352 {
 353   display: block;
 354   float: left;
 355   width: 11px;
 356   height: 11px;
 357   padding: 0;
 358   margin: 1px;
 359   overflow: hidden;
 360   background: url(images/pagenav.gif) 0 0 no-repeat transparent;
 361   opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 362 }
 363
 364 .pagenav a.buttonPas {
 365   opacity: 0.35;
 366 }
 367
 368 .pagenav a.firstpageSel {
 369   background-position: 0 -11px;
 370 }
 371
 372 .pagenav a.prevpage {
 373   background-position: -11px 0;
 374 }
 375
 376 .pagenav a.prevpageSel {
 377   background-position: -11px -11px;
 378 }
 379
 380 .pagenav a.nextpage {
 381   background-position: -22px 0;
 382 }
 383
 384 .pagenav a.nextpageSel {
 385   background-position: -22px -11px;
 386 }
 387
 388 .pagenav a.lastpage {
 389   background-position: -33px 0;
 390 }
 391
 392 .pagenav a.lastpageSel {
 393   background-position: -33px -11px;
 394 }
 395
 396 .splitter
 397 {
 398   user-select: none;
 399   -moz-user-select: none;
 400   -khtml-user-select: none;
 401   position: absolute;
 402   background: url(images/dimple.png) center no-repeat;
 403 }
 404
 405 .splitter-h
 406 {
 407   cursor: n-resize; cursor: row-resize;
 408   background-position: center 2px;
 409 }
 410
 411 .splitter-v
 412 {
 413   cursor: e-resize; cursor: col-resize;
 414   background-position: 2px center;
 415 }
 416
 417 .popupmenu
 418 {
 419   position: absolute;
 420   top: 32px;
 421   left: 90px;
 422   width: auto;
 423   display: none;
 424   background-color: #fff;
 425   background-color: rgba(255, 255, 255, 0.95);
 426   border: 1px solid #999;
 427   padding: 4px;
 428   z-index: 240;
 429   border-radius: 3px;
 430   -moz-border-radius: 3px;
 431   -webkit-border-radius: 3px;
 432   -moz-box-shadow: 1px 1px 12px #999;
 433   -webkit-box-shadow: #999 1px 1px 12px;
 434 }
 435
 436 .popupmenu ul
 437 {
 438   margin: -4px 0;
 439   padding: 0;
 440   list-style: none;
 441 }
 442
 443 .popupmenu ul li
 444 {
 445   font-size: 11px;
 446   white-space: nowrap;
 447   min-width: 100px;
 448   margin: 3px -4px;
 449 }
 450
 451 .popupmenu li a
 452 {
 453   display: block;
 454   color: #a0a0a0;
 455   padding: 2px 10px;
 456   text-decoration: none;
 457   min-height: 14px;
 458 }
 459
 460 .popupmenu li a.active,
 461 .popupmenu li a.active:active,
 462 .popupmenu li a.active:visited
 463 {
 464   color: #333;
 465 }
 466
 467 .popupmenu li a.active:hover
 468 {
 469   color: #fff;
 470   background-color: #c00;
 471 }
 472
 473 .darkbg
 474 {
 475   background-color: #F2F2F2 !important;
 476 }
 477
 478 .dropbutton,
 479 .dropbutton span
 480 {
 481   float: left;
 482   height: 32px;
 483 }
 484
 485 .dropbutton:hover
 486 {
 487 /*  background: url(images/dbutton.png) 0 0 no-repeat transparent; */
 488 }
 489
 490 .dropbutton span
 491 {
 492   width: 9px;
 493   background: url(images/dbutton.png) -53px 0 no-repeat transparent;
 494 }
 495
 496 .dropbutton span:hover
 497 {
 498   cursor: pointer;
 499   background-position: -74px 0;
 500 }
 501
 502
 503 /***** common table settings ******/
 504
 505 table.records-table thead tr td
 506 {
 507   height: 20px;
 508   padding: 0px 4px 0px 4px;
 509   vertical-align: middle;
 510   border-bottom: 1px solid #999999;
 511   color: #333333;
 512   background: url(images/listheader.gif) top left repeat-x #CCC;
 513   font-size: 11px;
 514   font-weight: bold;
 515 }
 516
 517 table.records-table tbody tr td
 518 {
 519   height: 16px;
 520   padding: 2px 4px 2px 4px;
 521   font-size: 11px;
 522   white-space: nowrap;
 523   border-bottom: 1px solid #EBEBEB;
 524   overflow: hidden;
 525   text-align: left;
 526 }
 527
 528 table.records-table tr
 529 {
 530   background-color: #FFFFFF;
 531 }
 532
 533 table.records-table tr.selected td
 534 {
 535   color: #FFFFFF;
 536   background-color: #CC3333;
 537 }
 538
 539 table.records-table tr.focused td
 540 {
 541 }
 542
 543 table.records-table tr.unfocused td
 544 {
 545   color: #FFFFFF;
 546   background-color: #929292;
 547 }
 548
 549
 550 /***** mac-style quicksearch field *****/
 551
 552 #quicksearchbar
 553 {
 554   position: absolute;
 555   top: 55px;
 556   right: 20px;
 557   width: 182px;
 558   height: 20px;
 559   text-align: right;
 560   background: url(images/searchfield.gif) top left no-repeat;
 561 }
 562
 563 #searchreset
 564 {
 565   position: absolute;
 566   top: 3px;
 567   right: 4px;
 568   text-decoration: none;
 569 }
 570
 571 #searchmenulink
 572 {
 573  position: absolute;
 574  top: 3px;
 575  right: 160px;
 576 }
 577
 578 #quicksearchbar img
 579 {
 580   vertical-align: middle;
 581 }
 582
 583 #quicksearchbox
 584 {
 585   position: absolute;
 586   top: 2px;
 587   left: 24px;
 588   width: 140px;
 589   height: 15px;
 590   font-size: 11px;
 591   padding: 0px;
 592   border: none;
 593 }
 594
 595
 596 /***** roundcube webmail pre-defined classes *****/
 597
 598 #rcmversion
 599 {
 600   position: absolute;
 601   bottom: 10px;
 602   right: 20px;
 603   text-align: right;
 604   white-space: nowrap;
 605   font-size: 8pt;
 606   color: #999;
 607 }
 608
 609 #rcmdraglayer
 610 {
 611   min-width: 300px;
 612   width: auto !important;
 613   width: 300px;
 614   border: 1px solid #999999;
 615   background-color: #fff;
 616   padding-left: 8px;
 617   padding-right: 8px;
 618   padding-top: 3px;
 619   padding-bottom: 3px;
 620   font-size: 11px;
 621   white-space: nowrap;
 622   opacity: 0.82;
 623   border-radius: 3px;
 624   -moz-border-radius: 3px;
 625   -webkit-border-radius: 3px;
 626   -moz-box-shadow: 1px 1px 12px #999;
 627   -webkit-box-shadow: #999 1px 1px 12px;
 628 }
 629
 630 .draglayercopy:before
 631 {
 632   position: absolute;
 633   bottom: -5px;
 634   left: -6px;
 635   content: " ";
 636   width: 14px;
 637   height: 14px;
 638   background: url(images/messageactions.png) -2px -128px no-repeat;
 639 }
 640
 641 a.rcmContactAddress
 642 {
 643   text-decoration: none;
 644 }
 645
 646 a.rcmContactAddress:hover
 647 {
 648   text-decoration: underline;
 649 }
 650
 651 #rcmKSearchpane
 652 {
 653   background-color: #F9F9F9;
 654   border: 1px solid #CCCCCC;
 655 }
 656
 657 #rcmKSearchpane ul
 658 {
 659   margin: 0px;
 660   padding: 2px;
 661   list-style-image: none;
 662   list-style-type: none;
 663 }
 664
 665 #rcmKSearchpane ul li
 666 {
 667   display: block;
 668   height: 16px;
 669   font-size: 11px;
 670   padding-left: 6px;
 671   padding-top: 2px;
 672   padding-right: 6px;
 673   white-space: nowrap;
 674   cursor: pointer;
 675 }
 676
 677 #rcmKSearchpane ul li.selected
 678 {
 679   color: #ffffff;
 680   background-color: #CC3333;
 681 }
 682
 683 #login-form
 684 {
 685   margin-left: auto;
 686   margin-right: auto;
 687   margin-top: 50px;
 688   width: 400px;
 689   border: 1px solid #999;
 690 }
 691
 692 #login-form table td.title
 693 {
 694   text-align: right;
 695   white-space: nowrap;
 696 }
 697
 698 #login-form table
 699 {
 700   width: 1%;
 701   margin: auto;
 702 }
 703
 704 #rcmloginuser, #rcmloginpwd, #rcmloginhost
 705 {
 706   width: 200px;
 707 }
 708
 709 #console
 710 {
 711   opacity: 0.8;
 712 }
 713
 714 .disabled
 715 {
 716   color: #999;
 717 }
 718
 719 font.bold
 720 {
 721   font-weight: bold;
 722 }
 723
 724
 725 /***** onclick menu list *****/
 726
 727 ul.toolbarmenu
 728 {
 729   margin: -4px 0 -4px 0;
 730   padding: 0;
 731   list-style: none;
 732 }
 733
 734 ul.toolbarmenu li
 735 {
 736   font-size: 11px;
 737   white-space: nowrap;
 738   min-width: 130px;
 739   margin: 2px -4px;
 740 }
 741
 742 ul.toolbarmenu li a
 743 {
 744   display: block;
 745   color: #a0a0a0;
 746   padding: 1px 12px 3px 28px;
 747   text-decoration: none;
 748   min-height: 14px;
 749 }
 750
 751 ul.toolbarmenu li a.active,
 752 ul.toolbarmenu li a.active:active,
 753 ul.toolbarmenu li a.active:visited
 754 {
 755   color: #333;
 756 }
 757
 758 ul.toolbarmenu li input
 759 {
 760   vertical-align: middle;
 761 }
 762
 763 ul.toolbarmenu li hr
 764 {
 765   color: #ccc;
 766   width: 130px;
 767   height: 1px;
 768   margin: 2px 1px 2px 1px;
 769 }
 770
 771 ul.toolbarmenu li img
 772 {
 773   float: left;
 774   margin: 0 2px;
 775 }
 776
 777 div.popupmenu ul li.separator_below,
 778 ul.toolbarmenu li.separator_below
 779 {
 780   border-bottom: 1px solid #ccc;
 781   margin-bottom: 2px;
 782   padding-bottom: 2px;
 783 }
 784
 785 div.popupmenu ul li.separator_above,
 786 ul.toolbarmenu li.separator_above
 787 {
 788   border-top: 1px solid #ccc;
 789   margin-top: 2px;
 790   padding-top: 2px;
 791 }
 792
 793
 794 /***** tabbed interface elements *****/
 795
 796 div.tabsbar,
 797 #tabsbar
 798 {
 799   position: absolute;
 800   top: 50px;
 801   left: 220px;
 802   right: 20px;
 803   height: 22px;
 804   border-bottom: 1px solid #999999;
 805   white-space: nowrap;
 806 }
 807
 808 div.tabsbar
 809 {
 810   top: 35px;
 811   left: 12px;
 812   right: 12px;
 813 }
 814
 815 span.tablink,
 816 span.tablink-selected
 817 {
 818   float: left;
 819   height: 23px !important;
 820   height: 22px;
 821   overflow: hidden;
 822   background: url(images/tabs-left.gif) top left no-repeat;
 823 }
 824
 825 span.tablink
 826 {
 827   cursor: pointer;
 828 }
 829
 830 span.tablink-selected
 831 {
 832   cursor: default;
 833   background-position: 0px -23px;
 834 }
 835
 836 span.tablink a,
 837 span.tablink-selected a
 838 {
 839   display: inline-block;
 840   padding: 5px 10px 0 5px;
 841   margin-left: 5px;
 842   height: 23px;
 843   color: #555555;
 844   max-width: 185px;
 845   text-decoration: none;
 846   overflow: hidden;
 847   text-overflow: ellipsis;
 848   -o-text-overflow: ellipsis;
 849   background: url(images/tabs-right.gif) top right no-repeat;
 850 }
 851
 852 span.tablink-selected a
 853 {
 854   cursor: inherit;
 855   color: #000000;
 856   background-position: right -23px;
 857 }
 858
 859 fieldset
 860 {
 861   margin-bottom: 1em;
 862   border: 1px solid #999999;
 863   padding: 4px 8px 9px 8px;
 864 }
 865
 866 legend
 867 {
 868   color: #999999;
 869 }
 870
 871 fieldset.tabbed
 872 {
 873   margin-top: 22px;
 874   padding-top: 12px;
 875 }
 876
 877 .quota_text {
 878   text-align: center;
 879   font-size: 10px;
 880   color: #666;
 881   border: 1px solid #999;
 882   cursor: default;
 883 }
 884 .quota_bg { background-color: white; }
 885 .quota_high { background-color: #F33131; }
 886 .quota_mid { background-color: #F5AD3C; }
 887 .quota_low { background-color: #91E164; }
 888 .quota_text_high { color: white; }
 889 .quota_text_mid { color: #666; }
 890 .quota_text_low { color: #666; }