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: 0px;
  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 .boxcontent
 258 {
 259   padding: 15px 10px 10px 10px;
 260   background-color: #F2F2F2;
 261 }
 262
 263 .boxcontent table td.title
 264 {
 265   color: #666;
 266   padding-right: 10px;
 267 }
 268
 269 .boxlistcontent
 270 {
 271   position: absolute;
 272   top: 20px;
 273   bottom: 22px;
 274   left: 0;
 275   right: 0;
 276   width: 100%;
 277   overflow-y: auto;
 278   overflow-x: hidden;
 279 }
 280
 281 .boxsubject
 282 {
 283   position: absolute;
 284   top: 0px;
 285   left: 0px;
 286   right: 0px;
 287   overflow: hidden;
 288   height: 22px;
 289   border-bottom: 1px solid #999;
 290   background: url(images/listheader.gif) top left repeat-x #CCC;
 291 }
 292
 293 .boxfooter
 294 {
 295   position: absolute;
 296   bottom: 0px;
 297   left: 0px;
 298   right: 0px;
 299   overflow: hidden;
 300   height: 22px;
 301   border-top: 1px solid #999;
 302   background: url(images/listheader.gif) top left repeat-x #CCC;
 303 }
 304
 305 .boxfooter a.button,
 306 .boxfooter a.buttonPas
 307 {
 308   display: block;
 309   float: left;
 310   width: 34px;
 311   height: 22px;
 312   padding: 0px;
 313   margin: 0;
 314   overflow: hidden;
 315   background: url(images/icons/groupactions.png) 0 0 no-repeat transparent;
 316   opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 317 }
 318
 319 .boxfooter a.groupactions
 320 {
 321   background-position: 0 -26px;
 322 }
 323
 324 .boxfooter a.buttonPas
 325 {
 326   opacity: 0.35;
 327 }
 328
 329 .pagenav
 330 {
 331   min-width: 250px;
 332 }
 333
 334 .pagenav span
 335 {
 336   color: #444;
 337   font-size: 11px;
 338   text-shadow: white 1px 1px;
 339   white-space: nowrap;
 340 }
 341
 342 .pagenav a.button,
 343 .pagenav a.buttonPas
 344 {
 345   display: block;
 346   float: left;
 347   width: 11px;
 348   height: 11px;
 349   padding: 0;
 350   margin: 1px;
 351   overflow: hidden;
 352   background: url(images/pagenav.gif) 0 0 no-repeat transparent;
 353   opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */
 354 }
 355
 356 .pagenav a.buttonPas {
 357   opacity: 0.35;
 358 }
 359
 360 .pagenav a.firstpageSel {
 361   background-position: 0 -11px;
 362 }
 363
 364 .pagenav a.prevpage {
 365   background-position: -11px 0;
 366 }
 367
 368 .pagenav a.prevpageSel {
 369   background-position: -11px -11px;
 370 }
 371
 372 .pagenav a.nextpage {
 373   background-position: -22px 0;
 374 }
 375
 376 .pagenav a.nextpageSel {
 377   background-position: -22px -11px;
 378 }
 379
 380 .pagenav a.lastpage {
 381   background-position: -33px 0;
 382 }
 383
 384 .pagenav a.lastpageSel {
 385   background-position: -33px -11px;
 386 }
 387
 388 .splitter
 389 {
 390   user-select: none;
 391   -moz-user-select: none;
 392   -khtml-user-select: none;
 393   position: absolute;
 394   background: url(images/dimple.png) center no-repeat;
 395 }
 396
 397 .splitter-h
 398 {
 399   cursor: n-resize; cursor: row-resize;
 400   background-position: center 2px;
 401 }
 402
 403 .splitter-v
 404 {
 405   cursor: e-resize; cursor: col-resize;
 406   background-position: 2px center;
 407 }
 408
 409 .popupmenu
 410 {
 411   position: absolute;
 412   top: 32px;
 413   left: 90px;
 414   width: auto;
 415   display: none;
 416   background-color: #fff;
 417   background-color: rgba(255, 255, 255, 0.95);
 418   border: 1px solid #999;
 419   padding: 4px;
 420   z-index: 240;
 421   border-radius: 3px;
 422   -moz-border-radius: 3px;
 423   -webkit-border-radius: 3px;
 424   -moz-box-shadow: 1px 1px 12px #999;
 425   -webkit-box-shadow: #999 1px 1px 12px;
 426 }
 427
 428 .popupmenu ul
 429 {
 430   margin: -4px 0;
 431   padding: 0;
 432   list-style: none;
 433 }
 434
 435 .popupmenu ul li
 436 {
 437   font-size: 11px;
 438   white-space: nowrap;
 439   min-width: 100px;
 440   margin: 3px -4px;
 441 }
 442
 443 .popupmenu li a
 444 {
 445   display: block;
 446   color: #a0a0a0;
 447   padding: 2px 10px;
 448   text-decoration: none;
 449   min-height: 14px;
 450 }
 451
 452 .popupmenu li a.active,
 453 .popupmenu li a.active:active,
 454 .popupmenu li a.active:visited
 455 {
 456   color: #333;
 457 }
 458
 459 .popupmenu li a.active:hover
 460 {
 461   color: #fff;
 462   background-color: #c00;
 463 }
 464
 465 .darkbg
 466 {
 467   background-color: #F2F2F2 !important;
 468 }
 469
 470 .dropbutton,
 471 .dropbutton span
 472 {
 473   float: left;
 474   height: 32px;
 475 }
 476
 477 .dropbutton:hover
 478 {
 479 /*  background: url(images/dbutton.png) 0 0 no-repeat transparent; */
 480 }
 481
 482 .dropbutton span
 483 {
 484   width: 9px;
 485   background: url(images/dbutton.png) -53px 0 no-repeat transparent;
 486 }
 487
 488 .dropbutton span:hover
 489 {
 490   cursor: pointer;
 491   background-position: -74px 0;
 492 }
 493
 494
 495 /***** common table settings ******/
 496
 497 table.records-table thead tr td
 498 {
 499   height: 20px;
 500   padding: 0px 4px 0px 4px;
 501   vertical-align: middle;
 502   border-bottom: 1px solid #999999;
 503   color: #333333;
 504   background: url(images/listheader.gif) top left repeat-x #CCC;
 505   font-size: 11px;
 506   font-weight: bold;
 507 }
 508
 509 table.records-table tbody tr td
 510 {
 511   height: 16px;
 512   padding: 2px 4px 2px 4px;
 513   font-size: 11px;
 514   white-space: nowrap;
 515   border-bottom: 1px solid #EBEBEB;
 516   overflow: hidden;
 517   text-align: left;
 518 }
 519
 520 table.records-table tr
 521 {
 522   background-color: #FFFFFF;
 523 }
 524
 525 table.records-table tr.selected td
 526 {
 527   color: #FFFFFF;
 528   background-color: #CC3333;
 529 }
 530
 531 table.records-table tr.focused td
 532 {
 533 }
 534
 535 table.records-table tr.unfocused td
 536 {
 537   color: #FFFFFF;
 538   background-color: #929292;
 539 }
 540
 541
 542 /***** mac-style quicksearch field *****/
 543
 544 #quicksearchbar
 545 {
 546   position: absolute;
 547   top: 55px;
 548   right: 20px;
 549   width: 182px;
 550   height: 20px;
 551   text-align: right;
 552   background: url(images/searchfield.gif) top left no-repeat;
 553 }
 554
 555 #searchreset
 556 {
 557   position: absolute;
 558   top: 3px;
 559   right: 4px;
 560   text-decoration: none;
 561 }
 562
 563 #searchmenulink
 564 {
 565  position: absolute;
 566  top: 3px;
 567  right: 160px;
 568 }
 569
 570 #quicksearchbar img
 571 {
 572   vertical-align: middle;
 573 }
 574
 575 #quicksearchbox
 576 {
 577   position: absolute;
 578   top: 2px;
 579   left: 24px;
 580   width: 140px;
 581   height: 15px;
 582   font-size: 11px;
 583   padding: 0px;
 584   border: none;
 585 }
 586
 587
 588 /***** roundcube webmail pre-defined classes *****/
 589
 590 #rcmversion
 591 {
 592   position: absolute;
 593   bottom: 10px;
 594   right: 20px;
 595   text-align: right;
 596   white-space: nowrap;
 597   font-size: 8pt;
 598   color: #999;
 599 }
 600
 601 #rcmdraglayer
 602 {
 603   min-width: 300px;
 604   width: auto !important;
 605   width: 300px;
 606   border: 1px solid #999999;
 607   background-color: #fff;
 608   padding-left: 8px;
 609   padding-right: 8px;
 610   padding-top: 3px;
 611   padding-bottom: 3px;
 612   font-size: 11px;
 613   white-space: nowrap;
 614   opacity: 0.82;
 615   border-radius: 3px;
 616   -moz-border-radius: 3px;
 617   -webkit-border-radius: 3px;
 618   -moz-box-shadow: 1px 1px 12px #999;
 619   -webkit-box-shadow: #999 1px 1px 12px;
 620 }
 621
 622 .draglayercopy:before
 623 {
 624   position: absolute;
 625   bottom: -5px;
 626   left: -6px;
 627   content: " ";
 628   width: 14px;
 629   height: 14px;
 630   background: url(images/messageactions.png) -2px -128px no-repeat;
 631 }
 632
 633 a.rcmContactAddress
 634 {
 635   text-decoration: none;
 636 }
 637
 638 a.rcmContactAddress:hover
 639 {
 640   text-decoration: underline;
 641 }
 642
 643 #rcmKSearchpane
 644 {
 645   background-color: #F9F9F9;
 646   border: 1px solid #CCCCCC;
 647 }
 648
 649 #rcmKSearchpane ul
 650 {
 651   margin: 0px;
 652   padding: 2px;
 653   list-style-image: none;
 654   list-style-type: none;
 655 }
 656
 657 #rcmKSearchpane ul li
 658 {
 659   display: block;
 660   height: 16px;
 661   font-size: 11px;
 662   padding-left: 6px;
 663   padding-top: 2px;
 664   padding-right: 6px;
 665   white-space: nowrap;
 666   cursor: pointer;
 667 }
 668
 669 #rcmKSearchpane ul li.selected
 670 {
 671   color: #ffffff;
 672   background-color: #CC3333;
 673 }
 674
 675 #login-form
 676 {
 677   margin-left: auto;
 678   margin-right: auto;
 679   margin-top: 50px;
 680   width: 400px;
 681   border: 1px solid #999;
 682 }
 683
 684 #login-form table td.title
 685 {
 686   text-align: right;
 687   white-space: nowrap;
 688 }
 689
 690 #login-form table
 691 {
 692   width: 1%;
 693   margin: auto;
 694 }
 695
 696 #rcmloginuser, #rcmloginpwd, #rcmloginhost
 697 {
 698   width: 200px;
 699 }
 700
 701 #console
 702 {
 703   opacity: 0.8;
 704 }
 705
 706 .disabled
 707 {
 708   color: #999;
 709 }
 710
 711 font.bold
 712 {
 713   font-weight: bold;
 714 }
 715
 716
 717 /***** onclick menu list *****/
 718
 719 ul.toolbarmenu
 720 {
 721   margin: -4px 0 -4px 0;
 722   padding: 0;
 723   list-style: none;
 724 }
 725
 726 ul.toolbarmenu li
 727 {
 728   font-size: 11px;
 729   white-space: nowrap;
 730   min-width: 130px;
 731   margin: 2px -4px;
 732 }
 733
 734 ul.toolbarmenu li a
 735 {
 736   display: block;
 737   color: #a0a0a0;
 738   padding: 1px 12px 3px 28px;
 739   text-decoration: none;
 740   min-height: 14px;
 741 }
 742
 743 ul.toolbarmenu li a.active,
 744 ul.toolbarmenu li a.active:active,
 745 ul.toolbarmenu li a.active:visited
 746 {
 747   color: #333;
 748 }
 749
 750 ul.toolbarmenu li input
 751 {
 752   vertical-align: middle;
 753 }
 754
 755 ul.toolbarmenu li hr
 756 {
 757   color: #ccc;
 758   width: 130px;
 759   height: 1px;
 760   margin: 2px 1px 2px 1px;
 761 }
 762
 763 ul.toolbarmenu li img
 764 {
 765   float: left;
 766   margin: 0 2px;
 767 }
 768
 769 div.popupmenu ul li.separator_below,
 770 ul.toolbarmenu li.separator_below
 771 {
 772   border-bottom: 1px solid #ccc;
 773   margin-bottom: 2px;
 774   padding-bottom: 2px;
 775 }
 776
 777 div.popupmenu ul li.separator_above,
 778 ul.toolbarmenu li.separator_above
 779 {
 780   border-top: 1px solid #ccc;
 781   margin-top: 2px;
 782   padding-top: 2px;
 783 }
 784
 785
 786 /***** tabbed interface elements *****/
 787
 788 div.tabsbar,
 789 #tabsbar
 790 {
 791   position: absolute;
 792   top: 50px;
 793   left: 220px;
 794   right: 20px;
 795   height: 22px;
 796   border-bottom: 1px solid #999999;
 797   white-space: nowrap;
 798 }
 799
 800 div.tabsbar
 801 {
 802   top: 35px;
 803   left: 12px;
 804   right: 12px;
 805 }
 806
 807 span.tablink,
 808 span.tablink-selected
 809 {
 810   float: left;
 811   height: 23px !important;
 812   height: 22px;
 813   overflow: hidden;
 814   background: url(images/tabs-left.gif) top left no-repeat;
 815 }
 816
 817 span.tablink
 818 {
 819   cursor: pointer;
 820 }
 821
 822 span.tablink-selected
 823 {
 824   cursor: default;
 825   background-position: 0px -23px;
 826 }
 827
 828 span.tablink a,
 829 span.tablink-selected a
 830 {
 831   display: block;
 832   padding: 5px 10px 0 5px;
 833   margin-left: 5px;
 834   height: 23px;
 835   color: #555555;
 836   max-width: 185px;
 837   text-decoration: none;
 838   overflow: hidden;
 839   text-overflow: ellipsis;
 840   -o-text-overflow: ellipsis;
 841   background: url(images/tabs-right.gif) top right no-repeat;
 842 }
 843
 844 span.tablink-selected a
 845 {
 846   cursor: inherit;
 847   color: #000000;
 848   background-position: right -23px;
 849 }
 850
 851 fieldset
 852 {
 853   margin-bottom: 1em;
 854   border: 1px solid #999999;
 855   padding: 4px 8px 9px 8px;
 856 }
 857
 858 legend
 859 {
 860   color: #999999;
 861 }
 862
 863 fieldset.tabbed
 864 {
 865   margin-top: 22px;
 866   padding-top: 12px;
 867 }
 868
 869 .quota_text {
 870   text-align: center;
 871   font-size: 10px;
 872   color: #666;
 873   border: 1px solid #999;
 874   cursor: default;
 875 }
 876 .quota_bg { background-color: white; }
 877 .quota_high { background-color: #F33131; }
 878 .quota_mid { background-color: #F5AD3C; }
 879 .quota_low { background-color: #91E164; }
 880 .quota_text_high { color: white; }
 881 .quota_text_mid { color: #666; }
 882 .quota_text_low { color: #666; }