org.eclipse.rap.design.example/theme/fancy/fancy.css

   1 /*******************************************************************************
   2  * Copyright (c) 2008, 2015 Innoopract Informationssysteme GmbH and others.
   3  * All rights reserved. This program and the accompanying materials
   4  * are made available under the terms of the Eclipse Public License v1.0
   5  * which accompanies this distribution, and is available at
   6  * http://www.eclipse.org/legal/epl-v10.html
   7  *
   8  * Contributors:
   9  *    Innoopract Informationssysteme GmbH - initial API and implementation
  10  *    EclipseSource - ongoing development
  11  ******************************************************************************/
  12
  13 /* RAP fancy theme for all widgets */
  14
  15 * {
  16   color: #4a4a4a;
  17   background-color: white;
  18   background-image: none;
  19   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
  20 }
  21
  22 *:disabled {
  23   color: #CFCFCF;
  24 }
  25
  26 Widget-Badge {
  27   background-color: #ff0000;
  28   border: none;
  29   border-radius: 10px;
  30   font: 10px Arial, sans-serif;
  31   color: #ffffff;
  32 }
  33
  34 Widget-ToolTip {
  35   padding: 1px 3px 2px 3px;
  36   background-color: #e9f3d2;
  37   border: 1px solid #abe033;
  38   border-radius: 2px 2px 2px 2px;
  39   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
  40   color: #4a4a4a;
  41   opacity: 1;
  42   animation: fadeIn 200ms linear, fadeOut 600ms ease-out;
  43   box-shadow: 3px 4px 2px rgba( 0, 0, 0, 0.3 );
  44   text-align: center;
  45 }
  46
  47 Widget-ToolTip-Pointer {
  48   background-image: none;
  49 }
  50
  51 Display {
  52   rwt-shadow-color: #a7a6aa;
  53   rwt-highlight-color: #ffffff;
  54   rwt-darkshadow-color: #85878c;
  55   rwt-lightshadow-color: #dcdfe4;
  56   rwt-thinborder-color: #aca899;
  57   rwt-selectionmarker-color: #fec83c;
  58   rwt-infobackground-color: #ffffff;
  59
  60   rwt-error-image: url( theme/resources/dialog/error.png );
  61   rwt-information-image: url( theme/resources/dialog/information.png );
  62   rwt-question-image: url( theme/resources/dialog/question.png );
  63   rwt-warning-image: url( theme/resources/dialog/warning.png );
  64   rwt-working-image: url( theme/resources/dialog/information.png );
  65
  66   rwt-fontlist: 11px 'Segoe UI', Corbel, Calibri, Tahoma, 'Lucida Sans Unicode';
  67
  68   background-image: url( theme/fancy/icons/browser_bg.png );
  69   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
  70 }
  71
  72 /* Default theme for all controls */
  73
  74 * {
  75   border: none;
  76   padding: 0px;
  77 }
  78
  79 *[BORDER] {
  80   border: 1px solid #a4a4a4;
  81 }
  82
  83 /* Default theme for all composites */
  84
  85 Composite {
  86   padding: 0px;
  87   opacity: 1;
  88   background-color: #ffffff;
  89   background-image: none;
  90   background-repeat: repeat;
  91   background-position: left top;
  92   border: none;
  93   box-shadow: none;
  94   animation: none;
  95 }
  96
  97 Composite[BORDER] {
  98   background-color: white;
  99   background-image: none;
 100 }
 101
 102 /* Button default theme */
 103
 104 Button {
 105   background-image: none;
 106   background-repeat: repeat;
 107   background-position: left top;
 108   padding: 4px 5px;
 109   spacing: 2px;
 110   cursor: default;
 111   animation: none;
 112   color: #4a4a4a;
 113   background-color: white;
 114   opacity: 1;
 115   text-shadow: none;
 116   text-decoration: none;
 117   box-shadow: none;
 118 }
 119
 120 Button[PUSH], Button[TOGGLE], Button[BORDER] {
 121   border: 1px solid #A4A4A4;
 122   border-radius: 3px;
 123   padding: 2px 5px;
 124   background-image: gradient(
 125     linear, left top, left bottom,
 126     from( #ffffff ),
 127     color-stop( 48%, #f0f0f0 ),
 128     color-stop( 52%, #e0e0e0 ),
 129     to( #ffffff )
 130   );
 131   animation: hoverOut 500ms ease-out;
 132   cursor: pointer;
 133 }
 134
 135 Button[ARROW], Button[ARROW][BORDER] {
 136   border: 1px solid #A4A4A4;
 137   border-radius: 3px;
 138   padding: 4px;
 139   background-image: gradient(
 140     linear, left top, left bottom,
 141     from( #ffffff ),
 142     color-stop( 48%, #f0f0f0 ),
 143     color-stop( 52%, #e0e0e0 ),
 144     to( #ffffff )
 145   );
 146   animation: hoverOut 500ms ease-out;
 147   cursor: pointer;
 148 }
 149
 150 Button[ARROW]:disabled, Button[PUSH]:disabled, Button[TOGGLE]:disabled {
 151   cursor: default;
 152 }
 153
 154 Button[ARROW]:hover, Button[PUSH]:hover, Button[TOGGLE]:hover {
 155   background-image: gradient(
 156     linear, left top, left bottom,
 157     from( #ffffff ),
 158     color-stop( 48%, #f0f0f0 ),
 159     color-stop( 52%, #e0e0e0 ),
 160     to( #cccccc )
 161   );
 162 }
 163
 164 Button[ARROW]:pressed, Button[PUSH]:pressed, Button[TOGGLE]:pressed {
 165   animation: none;
 166   background-image: gradient(
 167     linear, left top, left bottom,
 168     from( #e0e0e0 ),
 169     color-stop( 52%, #e0e0e0 ),
 170     to( #b0b0b0 )
 171   );
 172   padding: 4px 5px 2px 7px;
 173 }
 174
 175 Button[TOGGLE]:selected {
 176   background-image: gradient(
 177     linear, left top, left bottom,
 178     from( #e0e0e0 ),
 179     color-stop( 30%, #f0f0f0 ),
 180     color-stop( 70%, #e0e0e0 ),
 181     to( #b0b0b0 )
 182   );
 183 }
 184
 185 Button[TOGGLE]:selected:hover {
 186   background-image: gradient(
 187     linear, left top, left bottom,
 188     from( #e0e0e0 ),
 189     color-stop( 52%, #e0e0e0 ),
 190     to( #b0b0b0 )
 191   );
 192 }
 193
 194 Button[CHECK], Button[RADIO] {
 195   spacing: 4px;
 196 }
 197
 198 Button[CHECK][BORDER], Button[RADIO][BORDER] {
 199   background-image: none;
 200 }
 201
 202 Button-CheckIcon {
 203   background-image: url( theme/resources/button/check-unselected.png );
 204 }
 205
 206 Button-CheckIcon:hover {
 207   background-image: url( theme/resources/button/check-unselected-hover.png );
 208 }
 209
 210 Button-CheckIcon:selected {
 211   background-image: url( theme/resources/button/check-selected.png );
 212 }
 213
 214 Button-CheckIcon:selected:hover {
 215   background-image: url( theme/resources/button/check-selected-hover.png );
 216 }
 217
 218 Button-CheckIcon:selected:grayed {
 219   background-image: url( theme/resources/button/check-grayed.png );
 220 }
 221
 222 Button-CheckIcon:selected:grayed:hover {
 223   background-image: url( theme/resources/button/check-grayed-hover.png );
 224 }
 225
 226 Button-RadioIcon {
 227   background-image: url( theme/resources/button/radio-unselected.png );
 228 }
 229
 230 Button-RadioIcon:hover {
 231   background-image: url( theme/resources/button/radio-unselected-hover.png );
 232 }
 233
 234 Button-RadioIcon:selected {
 235   background-image: url( theme/resources/button/radio-selected.png );
 236 }
 237
 238 Button-RadioIcon:selected:hover {
 239   background-image: url( theme/resources/button/radio-selected-hover.png );
 240 }
 241
 242 Button-ArrowIcon[UP] {
 243   background-image: url( theme/resources/button/arrow-up.png );
 244 }
 245
 246 Button-ArrowIcon[DOWN] {
 247   background-image: url( theme/resources/button/arrow-down.png );
 248 }
 249
 250 Button-ArrowIcon[LEFT] {
 251   background-image: url( theme/resources/button/arrow-left.png );
 252 }
 253
 254 Button-ArrowIcon[RIGHT] {
 255   background-image: url( theme/resources/button/arrow-right.png );
 256 }
 257
 258 Button-FocusIndicator[ARROW], Button-FocusIndicator[PUSH], Button-FocusIndicator[TOGGLE] {
 259   background-color: transparent;
 260   border: 1px dotted #b8b8b8;
 261   margin: 2px;
 262   padding: 0px;
 263   opacity: 1;
 264 }
 265
 266 Button-FocusIndicator[CHECK], Button-FocusIndicator[RADIO] {
 267   background-color: transparent;
 268   border: 1px dotted #b8b8b8;
 269   padding: 2px 2px 2px 1px;
 270   margin: 0px;
 271   opacity: 1;
 272 }
 273
 274 /* Combo default theme */
 275
 276 Combo {
 277   border: 1px solid #c1c1c1;
 278   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
 279   background-color: #fcfcfc;
 280   color: #464a4e;
 281   border-radius: 2px;
 282   background-image: gradient(
 283     linear, left top, left bottom,
 284     from( #e2e2e2 ),
 285     color-stop( 15%, #f8f8f8 ),
 286     to( #fbfbfb )
 287   );
 288   text-shadow: none;
 289   box-shadow: none;
 290 }
 291
 292 Combo[BORDER] {
 293   border: 1px solid #c1c1c1;
 294   border-radius: 2px;
 295 }
 296
 297 Combo[BORDER]:focused {
 298   box-shadow: none;
 299   border: 1px solid #c1c1c1;
 300 }
 301
 302 Combo-Button {
 303   cursor: default;
 304   background-color: transparent;
 305   border: none;
 306   border-left: none;
 307   border-radius: 0px 2px 2px 0px;
 308   background-image: gradient(
 309     linear, left top, left bottom,
 310     from( #ffffff ),
 311     color-stop( 48%, #f0f0f0 ),
 312     color-stop( 52%, #e0e0e0 ),
 313     to( #cccccc )
 314   );
 315   width: 18px;
 316 }
 317
 318 Combo-Button:pressed {
 319   background-image: gradient(
 320     linear, left top, left bottom,
 321     from( #e0e0e0 ),
 322     color-stop( 52%, #e0e0e0 ),
 323     to( #b0b0b0 )
 324   );
 325 }
 326
 327 Combo-Button-Icon {
 328   background-image: url( theme/resources/ccombo/down.png );
 329 }
 330
 331 Combo-Button-Icon:hover {
 332   background-image: url( theme/resources/ccombo/down-hover.png );
 333 }
 334
 335 Combo-List {
 336   border: 1px solid #c1c1c1;
 337   border-radius: 0px 0px 2px 2px;
 338   box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.4 );
 339 }
 340
 341 Combo-List-Item {
 342   color: inherit;
 343   background-color: transparent;
 344   background-image: none;
 345   text-decoration: none;
 346   text-shadow: none;
 347   padding: 3px 5px;
 348 }
 349
 350 Combo-List-Item:hover, Combo-List-Item:even:hover {
 351   background-image: gradient(
 352     linear, left top, left bottom,
 353     from( #e9f3d2 ),
 354     to( #d9e3c2 )
 355   );
 356 }
 357
 358 Combo-List-Item:selected, Combo-List-Item:even:selected {
 359   background-image: gradient(
 360     linear, left top, left bottom,
 361     from( #aee336 ),
 362     to( #88bd10 )
 363   );
 364 }
 365
 366 Combo-Field {
 367   padding: 2px 3px;
 368 }
 369
 370 Combo-FocusIndicator {
 371   background-color: transparent;
 372   border: 1px dotted #b8b8b8;
 373   margin: 1px 19px 1px 1px;
 374   opacity: 1;
 375 }
 376
 377 /* DropDown default theme */
 378
 379 DropDown {
 380   border: 1px solid #c1c1c1;
 381   border-radius: 0px;
 382   box-shadow: none;
 383 }
 384
 385 DropDown-Item {
 386   color: inherit;
 387   background-color: transparent;
 388   background-image: none;
 389   text-decoration: none;
 390   text-shadow: none;
 391   padding: 3px 5px;
 392 }
 393
 394 DropDown-Item:hover {
 395   background-image: gradient(
 396     linear, left top, left bottom,
 397     from( #e9f3d2 ),
 398     to( #d9e3c2 )
 399   );
 400 }
 401
 402 DropDown-Item:selected {
 403   background-image: gradient(
 404     linear, left top, left bottom,
 405     from( #aee336 ),
 406     to( #88bd10 )
 407   );
 408 }
 409
 410 /* CoolBar default theme */
 411
 412 CoolBar {
 413   background-image: none;
 414 }
 415
 416 CoolItem-Handle {
 417   border: 1px outset;
 418   width: 4px;
 419 }
 420
 421 /* CTabFolder default theme */
 422
 423 CTabFolder {
 424   border-color: #A4A4A4;
 425   border-radius: 2px;
 426 }
 427
 428 CTabItem {
 429   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
 430   color: #4a4a4a;
 431   background-color: white;
 432   background-image: none;
 433   padding: 2px 4px;
 434   spacing: 4px;
 435   text-shadow: none;
 436   text-decoration: none;
 437 }
 438
 439 CTabItem:selected {
 440   color: white;
 441   background-color: #00589f;
 442 }
 443
 444 /* Do not gray out disabled CTabItems, this is SWT behavior */
 445 CTabItem:disabled {
 446   color: black;
 447 }
 448
 449 CTabFolder-DropDownButton-Icon {
 450   background-image: url( theme/resources/ctabfolder/ctabfolder-dropdown.png );
 451 }
 452
 453 CTabFolder-DropDownButton-Icon:hover {
 454   background-image: url( theme/resources/ctabfolder/ctabfolder-dropdown-hover.png );
 455 }
 456
 457 /* Group default theme */
 458
 459 Group {
 460   color: #4a4a4a;
 461   background-color: white;
 462 }
 463
 464 Group-Frame {
 465   margin: 8px 0px 0px;
 466   padding: 8px 2px 2px;
 467   border: 1px solid #cccccc;
 468   border-radius: 2px 2px 2px 2px;
 469 }
 470
 471 Group-Label {
 472   padding: 0px 3px 0px 4px;
 473   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
 474   background-color: transparent;
 475   background-image: none;
 476   background-repeat: repeat;
 477   background-position: left top;
 478   border: none;
 479   border-radius: 0;
 480   color: #464a4e;
 481   margin: 1px 10px;
 482   text-shadow: none;
 483 }
 484
 485 /* Label default theme */
 486
 487 Label {
 488   color: #4a4a4a;
 489   background-color: white;
 490   background-image: none;
 491   background-repeat: repeat;
 492   background-position: left top;
 493   border: none;
 494   text-decoration: none;
 495   cursor: default;
 496   opacity: 1;
 497   text-shadow: none;
 498 }
 499
 500 Label[BORDER] {
 501   border: 1px solid #a4a4a4;
 502   border-radius: 2px;
 503 }
 504
 505 Label-SeparatorLine {
 506   background-image: none;
 507   background-color: #cccccc;
 508   border: none;
 509   border-radius: 0;
 510   width: 2px;
 511 }
 512
 513 /* Link default theme */
 514
 515 Link {
 516   color: #4a4a4a;
 517   background-color: #ffffff;
 518   background-image: none;
 519   background-repeat: repeat;
 520   background-position: left top;
 521   text-shadow: none;
 522 }
 523
 524 Link-Hyperlink {
 525   color: #93c12b;
 526   text-shadow: none;
 527   text-decoration: underline;
 528 }
 529
 530 Link-Hyperlink:disabled {
 531   color: #959595;
 532 }
 533
 534 /* List default theme */
 535
 536 List {
 537   background-color: white;
 538   border: none;
 539   color: #4a4a4a;
 540 }
 541
 542 List[BORDER] {
 543   border: 1px solid #a4a4a4;
 544 }
 545
 546 List-Item {
 547   background-color: transparent;
 548   color: inherit;
 549   background-image: none;
 550   background-repeat: repeat;
 551   background-position: left top;
 552   text-shadow: none;
 553   padding: 3px 5px;
 554 }
 555
 556 List-Item:hover {
 557   background-color: #dae9f7;
 558   background-image: gradient(
 559     linear, left top, left bottom,
 560     from( #dae9f7 ),
 561     to( #d2e0ee )
 562   );
 563 }
 564
 565 List-Item:selected {
 566   color: white;
 567   background-color: #00589f;
 568   background-image: gradient(
 569     linear, left top, left bottom,
 570     from( #0078Bf ),
 571     to( #00589f )
 572   );
 573 }
 574
 575 List-Item:selected:unfocused {
 576   background-color: #959595;
 577   color: white;
 578   background-image: gradient(
 579     linear, left top, left bottom,
 580     from( #A5A5A5 ),
 581     to( #858585 )
 582   );
 583 }
 584
 585 List-Item:even {
 586   background-color: #f3f3f4;
 587 }
 588
 589 List-Item:even:hover {
 590   background-color: #dae9f7;
 591 }
 592
 593 List-Item:even:selected {
 594   color: white;
 595   background-color: #00589f;
 596   background-image: gradient(
 597     linear, left top, left bottom,
 598     from( #0078Bf ),
 599     to( #00589f )
 600   );
 601 }
 602
 603 List-Item:even:selected:unfocused {
 604   background-color: #959595;
 605   color: white;
 606   background-image: gradient(
 607     linear, left top, left bottom,
 608     from( #A5A5A5 ),
 609     to( #858585 )
 610   );
 611 }
 612
 613 List-GridLine {
 614   color: transparent;
 615 }
 616
 617 /* Menu default theme */
 618
 619 Menu {
 620   background-image: none;
 621   padding: 2px 0px;
 622   opacity: 1;
 623   animation: none;
 624   color: #0059a5;
 625   background-color: white;
 626   border: 1px #0059a5;
 627   border-radius: 2px;
 628   box-shadow: 2px 2px 2px rgba( 0, 0, 0, 0.5 );
 629 }
 630
 631 MenuItem {
 632   background-image: none;
 633   color: black;
 634   background-color: transparent;
 635   opacity: 1;
 636   text-shadow: none;
 637   padding: 2px 4px;
 638 }
 639
 640 MenuItem[SEPARATOR] {
 641   padding: 0px 3px;
 642 }
 643
 644 MenuItem:hover {
 645   background-color: #dae9f7;
 646   color: #4a4a4a;
 647 }
 648
 649 MenuItem:pressed {
 650   background-color: #00589f;
 651   color: white;
 652 }
 653
 654 MenuItem-CheckIcon {
 655   background-image: url( theme/resources/menu/checkbox.gif );
 656 }
 657
 658 MenuItem-RadioIcon {
 659   background-image: url( theme/resources/menu/radiobutton.gif );
 660 }
 661
 662 MenuItem-CascadeIcon {
 663   background-image: url( theme/resources/menu/arrow.gif );
 664 }
 665
 666 /* ProgressBar default theme */
 667
 668 ProgressBar {
 669   background-color: #ffffff;
 670   background-image: none;
 671   border: 1px solid #A4A4A4;
 672   border-radius: 2px;
 673   width: 16px;
 674 }
 675
 676 ProgressBar-Indicator {
 677   background-color: #00589f;
 678   background-image: none;
 679   opacity: 1;
 680 }
 681
 682 ProgressBar-Indicator:paused {
 683   background-color: #ebebeb;
 684 }
 685
 686 ProgressBar-Indicator:error {
 687   background-color: #cb2020;
 688 }
 689
 690 /* Shell default theme */
 691
 692 Shell {
 693   animation: none;
 694   border: 1px black;
 695   background-color: white;
 696   padding: 0px;
 697   background-image: none;
 698   opacity: 1;
 699   box-shadow: none;
 700 }
 701
 702 Shell[TITLE], Shell[BORDER] {
 703   box-shadow: 5px 5px 3px rgba( 0, 0, 0, 0.5 );
 704   background-color: white;
 705   border: 2px solid #99c92c;
 706   border-radius: 6px;
 707   padding: 5px;
 708 }
 709
 710 Shell[BORDER]:inactive, Shell[TITLE]:inactive {
 711   border: 2px solid #4b4b4b;
 712   box-shadow: none;
 713 }
 714
 715 Shell:maximized, Shell:maximized:inactive {
 716   border: none;
 717   box-shadow: none;
 718   border-radius: 0px 0px 0px 0px;
 719 }
 720
 721 Shell-DisplayOverlay {
 722   animation: fadeIn 200ms linear, fadeOut 400ms ease-out;
 723   background-image: none;
 724   background-color: #808080;
 725   opacity: 0.2;
 726 }
 727
 728 /* Shell titlebar */
 729
 730 Shell-Titlebar {
 731   background-color: #0080c0;
 732   background-gradient-color: #0080c0;
 733   color: white;
 734   background-image: gradient( linear, left top, left bottom, from( #005fac ), to( #005092 ) );
 735   padding: 2px 5px 2px;
 736   margin: 0px;
 737   height: 22px;
 738   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
 739   border: none;
 740   border-radius: 1px 1px 0px 0px;
 741   text-shadow: none;
 742 }
 743
 744 Shell-Titlebar:inactive {
 745   background-color: #7996a5;
 746   background-gradient-color: #7996a5;
 747   color: #aaaaaa;
 748   background-image: gradient( linear, left top, left bottom,
 749                               from( #595959 ), to( #4b4b4b ) );
 750 }
 751
 752 /* Shell buttons */
 753
 754 /* Minimize button */
 755
 756 Shell-MinButton {
 757   background-image: url( theme/resources/window/shell-min.png );
 758   margin: 0px 6px 0px 0px;
 759 }
 760
 761 Shell-MinButton:hover {
 762   background-image: url( theme/resources/window/shell-min-hover.png );
 763 }
 764
 765 Shell-MinButton:inactive {
 766   background-image: url( theme/resources/window/shell-min.png );
 767   margin: 0px 6px 0px 0px;
 768 }
 769
 770 Shell-MinButton:inactive:hover {
 771   background-image: url( theme/resources/window/shell-min-hover.png );
 772 }
 773
 774 /* Maximize button */
 775
 776 Shell-MaxButton {
 777   background-image: url( theme/resources/window/shell-max.png );
 778   margin: 0px 6px 0px 0px;
 779 }
 780
 781 Shell-MaxButton:hover {
 782   background-image: url( theme/resources/window/shell-max-hover.png );
 783 }
 784
 785 Shell-MaxButton:inactive {
 786   background-image: url( theme/resources/window/shell-max.png );
 787   margin: 0px 6px 0px 0px;
 788 }
 789
 790 Shell-MaxButton:inactive:hover {
 791   background-image: url( theme/resources/window/shell-max-hover.png );
 792 }
 793
 794 /* Restore button */
 795
 796 Shell-MaxButton:maximized {
 797   background-image: url( theme/resources/window/shell-restore.png );
 798 }
 799
 800 Shell-MaxButton:maximized:hover {
 801   background-image: url( theme/resources/window/shell-restore-hover.png );
 802 }
 803
 804 Shell-MaxButton:maximized:inactive {
 805   background-image: url( theme/resources/window/shell-restore.png );
 806 }
 807
 808 Shell-MaxButton:maximized:inactive:hover {
 809   background-image: url( theme/resources/window/shell-restore-hover.png );
 810 }
 811
 812 /* Close button */
 813
 814 Shell-CloseButton {
 815   background-image: url( theme/resources/window/shell-close.png );
 816   margin: 0px 5px 0px 0px;
 817 }
 818
 819 Shell-CloseButton:hover {
 820   background-image: url( theme/resources/window/shell-close-hover.png );
 821 }
 822
 823 Shell-CloseButton:inactive {
 824   background-image: url( theme/resources/window/shell-close.png );
 825   margin: 0px 5px 0px 0px;
 826 }
 827
 828 Shell-CloseButton:inactive:hover {
 829   background-image: url( theme/resources/window/shell-close-hover.png );
 830 }
 831
 832 /* Spinner default theme */
 833
 834 Spinner {
 835   border: none;
 836   padding: 1px 2px;
 837   color: #464a4e;
 838   background-color: #fcfcfc;
 839   background-image: none;
 840   text-shadow: none;
 841   box-shadow: none;
 842 }
 843
 844 Spinner-Field {
 845   padding: 2px 3px;
 846 }
 847
 848 Spinner[BORDER] {
 849   border: 1px solid #a4a4a4;
 850   border-radius: 2px 2px 2px 2px;
 851   background-image: gradient(
 852     linear, left top, left bottom,
 853     from( #e2e2e2 ),
 854     color-stop( 15%, #f8f8f8 ),
 855     to( #fbfbfb )
 856   );
 857   box-shadow: none;
 858 }
 859
 860 Spinner[BORDER]:focused {
 861   box-shadow: none;
 862   border: 1px solid #a4a4a4;
 863 }
 864
 865 Spinner-UpButton {
 866   background-color: transparent;
 867   background-image: gradient(
 868     linear, left top, left bottom,
 869     from( #ffffff ),
 870     to( #e0e0e0 )
 871   );
 872   width: 18px;
 873   border: none;
 874   border-left: none;
 875   border-radius: 0px 2px 0px 0px;
 876   cursor: default;
 877 }
 878
 879 Spinner-UpButton:pressed {
 880   background-image: gradient(
 881     linear, left top, left bottom,
 882     from( #ffffff ),
 883     color-stop( 52%, #e0e0e0 ),
 884     to( #b0b0b0 )
 885   );
 886 }
 887
 888 Spinner-UpButton-Icon {
 889   background-image: url( theme/resources/spinner/up.png );
 890 }
 891
 892 Spinner-UpButton-Icon:hover {
 893   background-image: url( theme/resources/spinner/up-hover.png );
 894 }
 895
 896 Spinner-DownButton {
 897   background-color: transparent;
 898   background-image: gradient(
 899     linear, left top, left bottom,
 900     from( #e0e0e0 ),
 901     to( #ffffff )
 902   );
 903   width: 18px;
 904   border: none;
 905   border-left: none;
 906   border-radius: 0px 0px 2px 0px;
 907   cursor: default;
 908 }
 909
 910 Spinner-DownButton:pressed {
 911   background-image: gradient(
 912     linear, left top, left bottom,
 913     from( #b0b0b0 ),
 914     color-stop( 52%, #e0e0e0 ),
 915     to( #ffffff )
 916   );
 917 }
 918
 919 Spinner-DownButton-Icon {
 920   background-image: url( theme/resources/spinner/down.png );
 921 }
 922
 923 Spinner-DownButton-Icon:hover {
 924   background-image: url( theme/resources/spinner/down-hover.png );
 925 }
 926
 927 /* TabFolder default theme */
 928
 929 TabFolder {
 930   border: none;
 931 }
 932
 933 TabFolder[BORDER] {
 934   border: 1px solid #a4a4a4;
 935 }
 936
 937 TabFolder-ContentContainer {
 938   border: 1px solid #a4a4a4;
 939 }
 940
 941 TabItem {
 942   background-color: white;
 943   background-image: none;
 944   background-repeat: repeat;
 945   background-position: left top;
 946   text-shadow: none;
 947   padding: 4px 6px 2px 5px;
 948   margin: 7px 1px 1px 0px;
 949   border: 1px solid #a4a4a4;
 950   border-bottom: none;
 951 }
 952
 953 TabItem:bottom {
 954   margin: 1px 1px 7px 0px;
 955   border: 1px solid #a4a4a4;
 956   border-top: none;
 957 }
 958
 959 TabItem:selected {
 960   background-color: white;
 961   background-image: none;
 962   padding: 4px 8px 2px 7px;
 963   margin: 4px -1px 0px -2px;
 964   border: 1px solid #a4a4a4;
 965   border-top: 3px solid #abe033;
 966   border-bottom: none;
 967 }
 968
 969 TabItem:bottom:selected {
 970   margin: 0px -1px 4px -2px;
 971   border: 1px solid #a4a4a4;
 972   border-top: none;
 973   border-bottom: 3px solid #abe033;
 974 }
 975
 976 TabItem:selected:first {
 977   margin: 4px -1px 0px 0px;
 978 }
 979
 980 TabItem:bottom:selected:first {
 981   margin: 0px -1px 4px 0px;
 982 }
 983
 984 TabItem:hover {
 985   background-color: #dae9f7;
 986   background-image: none;
 987 }
 988
 989 /* Table default theme */
 990
 991 Table {
 992   background-color: white;
 993   background-image: none;
 994   color: #4a4a4a;
 995   border: none;
 996 }
 997
 998 Table[BORDER] {
 999   border: 1px solid #a4a4a4;
1000 }
1001
1002 TableItem {
1003   background-color: transparent;
1004   color: inherit;
1005   text-decoration: none;
1006   text-shadow: none;
1007   background-image: none;
1008   text-overflow: clip;
1009 }
1010
1011 TableItem:linesvisible:even {
1012   background-color: #f3f3f4;
1013 }
1014
1015 Table-RowOverlay {
1016   background-color: transparent;
1017   color: inherit;
1018   background-image: none;
1019 }
1020
1021 Table-RowOverlay:hover {
1022   background-color: #dae9f7;
1023 }
1024
1025 Table-RowOverlay:selected {
1026   color: white;
1027   background-color: #00589f;
1028 }
1029
1030 Table-RowOverlay:selected:unfocused {
1031   background-color: #959595;
1032   color: #ffffff;
1033 }
1034
1035 Table-RowOverlay:linesvisible:even:hover {
1036   background-color: #dae9f7;
1037 }
1038
1039 Table-RowOverlay:linesvisible:even:selected {
1040   background-color: #00589f;
1041   color: white;
1042 }
1043
1044 Table-RowOverlay:linesvisible:even:selected:unfocused {
1045   background-color: #959595;
1046   color: #ffffff;
1047 }
1048
1049 TableColumn {
1050   background-color: #f8f8ff;
1051   padding: 1px 2px;
1052   background-image: gradient(
1053     linear, left top, left bottom,
1054     from( #fbfcfd ),
1055     to( #ececec )
1056   );
1057   color: #666666;
1058   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1059   border-bottom:none;
1060   text-shadow: none;
1061   text-overflow: clip;
1062 }
1063
1064 TableColumn:hover {
1065   background-image: gradient(
1066     linear, left top, left bottom,
1067     from( #f4f5f6 ),
1068     to( #e6e6e6 )
1069   );
1070   border-bottom: none;
1071 }
1072
1073 TableColumn-SortIndicator {
1074   background-image: none;
1075 }
1076
1077 TableColumn-SortIndicator:up {
1078   background-image: url( theme/resources/column/sort-indicator-up.png );
1079 }
1080
1081 TableColumn-SortIndicator:down {
1082   background-image: url( theme/resources/column/sort-indicator-down.png );
1083 }
1084
1085 Table-Cell {
1086   spacing: 3px;
1087   padding: 4px 3px 3px 3px;
1088 }
1089
1090 Table-GridLine {
1091   color: #dedede;
1092 }
1093
1094 Table-GridLine:horizontal {
1095   color: transparent;
1096 }
1097
1098 Table-Checkbox {
1099   /*
1100   For backward compatibility we have to keep the width property.
1101   Deprecated, use "margin" instead.
1102   */
1103   width: 21px;
1104   margin: 0px;
1105   background-image: url( theme/resources/button/check-unselected.png );
1106 }
1107
1108 Table-Checkbox:hover {
1109   background-image: url( theme/resources/button/check-unselected-hover.png );
1110 }
1111
1112 Table-Checkbox:checked {
1113   background-image: url( theme/resources/button/check-selected.png );
1114 }
1115
1116 Table-Checkbox:checked:hover {
1117   background-image: url( theme/resources/button/check-selected-hover.png );
1118 }
1119
1120 Table-Checkbox:checked:grayed {
1121   background-image: url( theme/resources/button/check-grayed.png );
1122 }
1123
1124 Table-Checkbox:checked:grayed:hover {
1125   background-image: url( theme/resources/button/check-grayed-hover.png );
1126 }
1127
1128 /* Text default theme */
1129
1130 Text {
1131   border: none;
1132   padding: 2px 3px;
1133   color: #464a4e;
1134   background-color: #fcfcfc;
1135   background-image: none;
1136   background-repeat: repeat;
1137   background-position: left top;
1138   text-shadow: none;
1139   box-shadow: none;
1140 }
1141
1142 Text[BORDER] {
1143   border: 1px solid #a4a4a4;
1144   border-radius: 2px 2px 2px 2px;
1145   box-shadow: none;
1146   background-image: gradient(
1147     linear, left top, left bottom,
1148     from( #e2e2e2 ),
1149     color-stop( 15%, #f8f8f8 ),
1150     to( #fbfbfb )
1151   );
1152 }
1153
1154 Text[BORDER]:focused,
1155 Text[MULTI][BORDER]:focused {
1156   box-shadow: none;
1157   border: 1px solid #a4a4a4;
1158 }
1159
1160 Text[SINGLE] {
1161   /* padding: 2px 3px; */
1162 }
1163
1164 Text[MULTI] {
1165   /* padding: 0px 0px 0px 3px; */
1166   background-image: none;
1167 }
1168
1169 Text[MULTI][BORDER] {
1170   /* padding: 0px 0px 0px 4px; */
1171   box-shadow: none;
1172 }
1173
1174 Text-Message {
1175   color: #a7a6aa;
1176   text-shadow: none;
1177 }
1178
1179 Text-Search-Icon {
1180   background-image: url( theme/resources/text/find.png );
1181   spacing: 3px;
1182 }
1183
1184 Text-Cancel-Icon {
1185   background-image: url( theme/resources/text/clear.gif );
1186   spacing: 3px;
1187 }
1188
1189 /* ToolBar default theme */
1190
1191 ToolBar {
1192   color: black;
1193   padding: 0px;
1194   spacing: 0px;
1195   background-color: #ffffff;
1196   background-image: none;
1197   border: none;
1198   opacity: 1;
1199 }
1200
1201 ToolBar[BORDER] {
1202   border: 1px solid #a4a4a4;
1203   border-radius: 2px;
1204 }
1205
1206 ToolItem {
1207   color: inherit;
1208   background-color: transparent;
1209   background-image: none;
1210   border: none;
1211   border-radius: 0px;
1212   padding: 2px 3px;
1213   spacing: 4px;
1214   opacity: 1;
1215   animation: none;
1216   text-shadow: none;
1217 }
1218
1219 ToolItem[FLAT] {
1220   border: none;
1221   padding: 3px 4px;
1222 }
1223
1224 ToolItem:hover {
1225   background-color: white;
1226   border: 1px solid #a4a4a4;
1227   border-radius: 2px 2px 2px 2px;
1228   padding: 2px 3px;
1229 }
1230
1231 ToolItem:pressed, ToolItem:selected {
1232   border: 1px solid #a4a4a4;
1233   border-radius: 2px;
1234   padding: 3px 2px 1px 4px;
1235   background-image: url( theme/resources/toolbar/dotted_white.gif );
1236 }
1237
1238 ToolItem-DropDownIcon {
1239   background-image: url( theme/resources/arrows/down.gif );
1240   border: none;
1241 }
1242
1243 ToolItem-DropDownIcon:hover {
1244   border: 1px inset;
1245 }
1246
1247 ToolItem-Separator {
1248   width: 4px;
1249 }
1250
1251 /* Tree default theme */
1252
1253 Tree {
1254   background-color: white;
1255   border: none;
1256   color: #4a4a4a;
1257 }
1258
1259 Tree[BORDER] {
1260   border: 1px solid #a4a4a4;
1261 }
1262
1263 TreeItem {
1264   background-color: transparent;
1265   color: inherit;
1266   text-decoration: none;
1267   text-shadow: none;
1268   background-image: none;
1269   text-overflow: clip;
1270 }
1271
1272 TreeItem:linesvisible:even {
1273   background-color: #f3f3f4;
1274 }
1275
1276 Tree-RowOverlay {
1277   background-color: transparent;
1278   color: inherit;
1279   background-image: none;
1280 }
1281
1282 Table-RowOverlay:hover {
1283   background-color: #dae9f7;
1284 }
1285
1286 Table-RowOverlay:selected {
1287   background-color: #00589f;
1288   color: #ffffff;
1289 }
1290
1291 Table-RowOverlay:selected:unfocused {
1292   background-color: #959595;
1293   color: #ffffff;
1294 }
1295
1296 Table-RowOverlay:linesvisible:even:hover {
1297   background-color: #dae9f7;
1298 }
1299
1300 Table-RowOverlay:linesvisible:even:selected {
1301   background-color: #00589f;
1302   color: white;
1303 }
1304
1305 Table-RowOverlay:linesvisible:even:selected:unfocused {
1306   background-color: #959595;
1307   color: #ffffff;
1308 }
1309
1310 TreeColumn {
1311   background-color: #f8f8ff;
1312   padding: 1px 2px;
1313   background-image: gradient(
1314     linear, left top, left bottom,
1315     from( #fbfcfd ),
1316     to( #ececec )
1317   );
1318   color: #666666;
1319   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1320   border-bottom:none;
1321   text-shadow: none;
1322   text-overflow: clip;
1323 }
1324
1325 TreeColumn:hover {
1326   background-image: gradient(
1327     linear, left top, left bottom,
1328     from( #f4f5f6 ),
1329     to( #e6e6e6 )
1330   );
1331   border-bottom:none;
1332 }
1333
1334 TreeColumn-SortIndicator {
1335   background-image: none;
1336 }
1337
1338 TreeColumn-SortIndicator:up {
1339   background-image: url( theme/resources/column/sort-indicator-up.png );
1340 }
1341
1342 TreeColumn-SortIndicator:down {
1343   background-image: url( theme/resources/column/sort-indicator-down.png );
1344 }
1345
1346 Tree-Cell {
1347   spacing: 3px;
1348   padding: 2px 3px 3px 3px;
1349 }
1350
1351 Tree-GridLine {
1352   color: #d0d0d0;
1353 }
1354
1355 Tree-GridLine:horizontal {
1356   color: transparent;
1357 }
1358
1359 Tree-Checkbox {
1360   margin: 0px 2px 0px 0px;
1361   background-image: url( theme/resources/button/check-unselected.png );
1362 }
1363
1364 Tree-Checkbox:hover {
1365   background-image: url( theme/resources/button/check-unselected-hover.png );
1366 }
1367
1368 Tree-Checkbox:checked {
1369   background-image: url( theme/resources/button/check-selected.png );
1370 }
1371
1372 Tree-Checkbox:checked:hover {
1373   background-image: url( theme/resources/button/check-selected-hover.png );
1374 }
1375
1376 Tree-Checkbox:checked:grayed {
1377   background-image: url( theme/resources/button/check-grayed.png );
1378 }
1379
1380 Tree-Checkbox:checked:grayed:hover {
1381   background-image: url( theme/resources/button/check-grayed-hover.png );
1382 }
1383
1384 Tree-Indent {
1385   width: 16px;
1386   background-image: none;
1387 }
1388
1389 Tree-Indent:collapsed {
1390   background-image: url( theme/resources/tree/tree-collapsed.png );
1391 }
1392
1393 Tree-Indent:collapsed:hover {
1394   background-image: url( theme/resources/tree/tree-collapsed-hover.png );
1395 }
1396
1397 Tree-Indent:expanded {
1398   background-image: url( theme/resources/tree/tree-expanded.png );
1399 }
1400
1401 Tree-Indent:expanded:hover {
1402   background-image: url( theme/resources/tree/tree-expanded-hover.png );
1403 }
1404
1405 Tree-Indent:line {
1406   background-image: none;
1407 }
1408
1409 Tree-Indent:first {
1410   background-image: none;
1411 }
1412
1413 Tree-Indent:first:collapsed {
1414   background-image: url( theme/resources/tree/tree-collapsed.png );
1415 }
1416
1417 Tree-Indent:first:collapsed:hover {
1418   background-image: url( theme/resources/tree/tree-collapsed-hover.png );
1419 }
1420
1421 Tree-Indent:first:expanded {
1422   background-image: url( theme/resources/tree/tree-expanded.png );
1423 }
1424
1425 Tree-Indent:first:expanded:hover {
1426   background-image: url( theme/resources/tree/tree-expanded-hover.png );
1427 }
1428
1429 Tree-Indent:last {
1430   background-image: none;
1431 }
1432
1433 Tree-Indent:last:collapsed {
1434   background-image: url( theme/resources/tree/tree-collapsed.png );
1435 }
1436
1437 Tree-Indent:last:collapsed:hover {
1438   background-image: url( theme/resources/tree/tree-collapsed-hover.png );
1439 }
1440
1441 Tree-Indent:last:expanded {
1442   background-image: url( theme/resources/tree/tree-expanded.png );
1443 }
1444
1445 Tree-Indent:last:expanded:hover {
1446   background-image: url( theme/resources/tree/tree-expanded-hover.png );
1447 }
1448
1449 Tree-Indent:first:last {
1450   background-image: none;
1451 }
1452
1453 Tree-Indent:first:last:collapsed {
1454   background-image: url( theme/resources/tree/tree-collapsed.png );
1455 }
1456
1457 Tree-Indent:first:last:collapsed:hover {
1458   background-image: url( theme/resources/tree/tree-collapsed-hover.png );
1459 }
1460
1461 Tree-Indent:first:last:expanded {
1462   background-image: url( theme/resources/tree/tree-expanded.png );
1463 }
1464
1465 Tree-Indent:first:last:expanded:hover {
1466   background-image: url( theme/resources/tree/tree-expanded-hover.png );
1467 }
1468
1469 /* Scale default theme */
1470
1471 Scale {
1472   background-color: white;
1473   background-image: none;
1474   border-radius: 0;
1475 }
1476
1477 Scale-Thumb {
1478   background-color: #00589f;
1479   background-image: none;
1480   border: 1px solid #a4a4a4;
1481   border-radius: 2px 2px 2px 2px;
1482 }
1483
1484 /* DateTime default theme */
1485
1486 DateTime {
1487   color: #464a4e;
1488   background-color: #fcfcfc;
1489   border: none;
1490   padding: 1px 2px;
1491   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1492   background-image: none;
1493   text-shadow: none;
1494   box-shadow: none;
1495 }
1496
1497 DateTime-Field {
1498   color: inherit;
1499   background-color: transparent;
1500   padding: 2px 3px;
1501   text-shadow: none;
1502 }
1503
1504 DateTime[BORDER] {
1505   border: 1px solid #a4a4a4;
1506   border-radius: 2px 2px 2px 2px;
1507   background-image: gradient(
1508     linear, left top, left bottom,
1509     from( #e2e2e2 ),
1510     color-stop( 15%, #f8f8f8 ),
1511     to( #fbfbfb )
1512   );
1513 }
1514
1515 DateTime[BORDER]:focused {
1516   border: 1px solid #a4a4a4;
1517 }
1518
1519 DateTime-Calendar-Day {
1520   border: none;
1521   color: inherit;
1522   background-color: transparent;
1523   text-shadow: none;
1524 }
1525
1526 DateTime-Calendar-Day:today {
1527   border: 1px solid #ff0000;
1528 }
1529
1530 DateTime-Field:selected, DateTime-Calendar-Day:selected {
1531   background-color: #D2D2D2;
1532   color: #4a4a4a;
1533 }
1534
1535 DateTime-Calendar-Day:selected:hover {
1536   background-color: #00569c;
1537   color: white;
1538 }
1539
1540 DateTime-Calendar-Day:selected:unfocused {
1541   background-color: #c0c0c0;
1542 }
1543
1544 DateTime-Calendar-Day:otherMonth {
1545   background-color: transparent;
1546   color: #808080;
1547 }
1548
1549 DateTime-Calendar-Day:hover {
1550   background-color: #d9e3f3;
1551 }
1552
1553 DateTime-Calendar-Navbar {
1554   border: none;
1555   background-color: #00569c;
1556   color: white;
1557   font: bold 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1558   text-shadow: none;
1559   background-image: none;
1560 }
1561
1562 DateTime-Calendar-PreviousMonthButton {
1563   background-image: url( theme/resources/calendar/lastMonth.png );
1564   cursor: default;
1565 }
1566
1567 DateTime-Calendar-PreviousMonthButton:hover {
1568   background-image: url( theme/resources/calendar/lastMonth-hover.png );
1569 }
1570
1571 DateTime-Calendar-NextMonthButton {
1572   background-image: url( theme/resources/calendar/nextMonth.png );
1573   cursor: default;
1574 }
1575
1576 DateTime-Calendar-NextMonthButton:hover {
1577   background-image: url( theme/resources/calendar/nextMonth-hover.png );
1578 }
1579
1580 DateTime-Calendar-PreviousYearButton {
1581   background-image: url( theme/resources/calendar/lastYear.png );
1582   cursor: default;
1583 }
1584
1585 DateTime-Calendar-PreviousYearButton:hover {
1586   background-image: url( theme/resources/calendar/lastYear-hover.png );
1587 }
1588
1589 DateTime-Calendar-NextYearButton {
1590   background-image: url( theme/resources/calendar/nextYear.png );
1591   cursor: default;
1592 }
1593
1594 DateTime-Calendar-NextYearButton:hover {
1595   background-image: url( theme/resources/calendar/nextYear-hover.png );
1596 }
1597
1598 DateTime-UpButton {
1599   background-color: transparent;
1600   background-image: gradient(
1601     linear, left top, left bottom,
1602     from( #ffffff ),
1603     to( #e0e0e0 )
1604   );
1605   width: 18px;
1606   border: none;
1607   border-left: none;
1608   border-radius: 0px 2px 0px 0px;
1609   cursor: default;
1610 }
1611
1612 DateTime-UpButton:pressed {
1613   background-image: gradient(
1614     linear, left top, left bottom,
1615     from( #ffffff ),
1616     color-stop( 52%, #e0e0e0 ),
1617     to( #b0b0b0 )
1618   );
1619 }
1620
1621 DateTime-UpButton-Icon {
1622   background-image: url( theme/resources/spinner/up.png );
1623 }
1624
1625 DateTime-UpButton-Icon:hover {
1626   background-image: url( theme/resources/spinner/up-hover.png );
1627 }
1628
1629 DateTime-DownButton {
1630   background-color: transparent;
1631   background-image: gradient(
1632     linear, left top, left bottom,
1633     from( #e0e0e0 ),
1634     to( #ffffff )
1635   );
1636   width: 18px;
1637   border: none;
1638   border-left: none;
1639   border-radius: 0px 0px 2px 0px;
1640   cursor: default;
1641 }
1642
1643 DateTime-DownButton:pressed {
1644   background-image: gradient(
1645     linear, left top, left bottom,
1646     from( #b0b0b0 ),
1647     color-stop( 52%, #e0e0e0 ),
1648     to( #ffffff )
1649   );
1650 }
1651
1652 DateTime-DropDownButton {
1653   cursor: default;
1654   background-color: transparent;
1655   border: none;
1656   border-left: none;
1657   border-radius: 0px 2px 2px 0px;
1658   background-image: gradient(
1659     linear, left top, left bottom,
1660     from( #ffffff ),
1661     color-stop( 48%, #f0f0f0 ),
1662     color-stop( 52%, #e0e0e0 ),
1663     to( #cccccc )
1664   );
1665   width: 18px;
1666 }
1667
1668 DateTime-DropDownButton-Icon {
1669   background-image: url( theme/resources/spinner/down.png );
1670 }
1671
1672 DateTime-DropDownButton-Icon:hover {
1673   background-image: url( theme/resources/spinner/down-hover.png );
1674 }
1675
1676 DateTime-DownButton-Icon {
1677   background-image: url( theme/resources/spinner/down.png );
1678 }
1679
1680 DateTime-DownButton-Icon:hover {
1681   background-image: url( theme/resources/spinner/down-hover.png );
1682 }
1683
1684
1685 DateTime-DropDownCalendar {
1686   border: 1px #a7a6aa;
1687 }
1688
1689 /* ExpandBar default theme */
1690
1691 ExpandBar {
1692   color: #4a4a4a;
1693   background-color: white;
1694 }
1695
1696 ExpandBar[BORDER] {
1697   border: 1px solid #C1C1C1;
1698   border-radius: 0;
1699 }
1700
1701 ExpandItem {
1702   border: 1px solid #c1c1c1;
1703   border-radius: 0;
1704 }
1705
1706 ExpandItem-Header {
1707   border: none;
1708   border-radius: 0;
1709   cursor: pointer;
1710   background-image: gradient(
1711     linear, left top, left bottom,
1712     from( #ffffff ),
1713     color-stop( 55%, #e0e0e0 ),
1714     to( #f0f0f0 )
1715   );
1716   text-shadow: none;
1717 }
1718
1719 ExpandItem-Header:disabled {
1720   cursor: default;
1721 }
1722
1723 ExpandItem-Button {
1724   background-image: url( theme/resources/expanditem/expanditem-expand.png );
1725 }
1726
1727 ExpandItem-Button:hover {
1728   background-image: url( theme/resources/expanditem/expanditem-expand-hover.png );
1729 }
1730
1731 ExpandItem-Button:expanded {
1732   background-image: url( theme/resources/expanditem/expanditem-collapse.png );
1733 }
1734
1735 ExpandItem-Button:expanded:hover {
1736   background-image: url( theme/resources/expanditem/expanditem-collapse-hover.png );
1737 }
1738
1739 /* Sash default theme */
1740
1741 Sash {
1742   border: none;
1743   background-image: none;
1744   background-color: transparent;
1745 }
1746
1747 Sash[BORDER] {
1748   border: 1px solid #a4a4a4;
1749 }
1750
1751 Sash:hover {
1752   background-color: #dae9f7;
1753 }
1754
1755 Sash-Handle {
1756   background-image: none;
1757 }
1758
1759 /* Slider default theme */
1760
1761 Slider {
1762   border: none;
1763   border-radius: 0;
1764   background-color: #f3f3f4;
1765 }
1766
1767 /* Thumb */
1768
1769 Slider-Thumb {
1770   background-color: transparent;
1771   border: 1px solid #a4a4a4;
1772   border-radius: 2px 2px 2px 2px;
1773   background-image: none;
1774 }
1775
1776 Slider-Thumb[HORIZONTAL] {
1777   background-image: gradient(
1778     linear, left top, left bottom,
1779     from( #ffffff ),
1780     color-stop( 48%, #f0f0f0 ),
1781     color-stop( 52%, #e0e0e0 ),
1782     to( #cccccc )
1783   );
1784 }
1785
1786 Slider-Thumb[HORIZONTAL]:pressed {
1787   background-image: gradient(
1788     linear, left top, left bottom,
1789     from( #e0e0e0 ),
1790     color-stop( 52%, #e0e0e0 ),
1791     to( #b0b0b0 )
1792   );
1793 }
1794
1795 Slider-Thumb[VERTICAL] {
1796   background-image: gradient(
1797     linear, left top, right top,
1798     from( #ffffff ),
1799     color-stop( 48%, #f0f0f0 ),
1800     color-stop( 52%, #e0e0e0 ),
1801     to( #cccccc )
1802   );
1803 }
1804
1805 Slider-Thumb[VERTICAL]:pressed {
1806   background-image: gradient(
1807     linear, left top, right top,
1808     from( #e0e0e0 ),
1809     color-stop( 52%, #e0e0e0 ),
1810     to( #b0b0b0 )
1811   );
1812 }
1813
1814 /* Buttons */
1815
1816 Slider-UpButton, Slider-DownButton {
1817   background-color: transparent;
1818   border: 1px solid #a4a4a4;
1819   cursor: default;
1820   padding: 0;
1821 }
1822
1823 Slider-UpButton[HORIZONTAL], Slider-DownButton[HORIZONTAL] {
1824   background-image: gradient(
1825     linear, left top, left bottom,
1826     from( #ffffff ),
1827     color-stop( 48%, #f0f0f0 ),
1828     color-stop( 52%, #e0e0e0 ),
1829     to( #cccccc )
1830   );
1831 }
1832
1833 Slider-UpButton[VERTICAL], Slider-DownButton[VERTICAL] {
1834   background-image: gradient(
1835     linear, left top, right top,
1836     from( #ffffff ),
1837     color-stop( 48%, #f0f0f0 ),
1838     color-stop( 52%, #e0e0e0 ),
1839     to( #cccccc )
1840   );
1841 }
1842
1843 Slider-UpButton[HORIZONTAL]:pressed, Slider-DownButton[HORIZONTAL]:pressed {
1844   background-image: gradient(
1845     linear, left top, left bottom,
1846     from( #e0e0e0 ),
1847     color-stop( 52%, #e0e0e0 ),
1848     to( #b0b0b0 )
1849   );
1850 }
1851
1852 Slider-UpButton[VERTICAL]:pressed, Slider-DownButton[VERTICAL]:pressed {
1853   background-image: gradient(
1854     linear, left top, right top,
1855     from( #e0e0e0 ),
1856     color-stop( 52%, #e0e0e0 ),
1857     to( #b0b0b0 )
1858   );
1859 }
1860
1861 /* Rounded Borders */
1862
1863 Slider-UpButton[HORIZONTAL] {
1864   border-radius: 0px 2px 2px 0px;
1865 }
1866
1867 Slider-UpButton[VERTICAL] {
1868   border-radius: 0px 0px 2px 2px;
1869 }
1870
1871 Slider-DownButton[HORIZONTAL] {
1872   border-radius: 2px 0px 0px 2px;
1873 }
1874
1875 Slider-DownButton[VERTICAL] {
1876   border-radius: 2px 2px 0px 0px;
1877 }
1878
1879 /* Button Icons */
1880
1881 Slider-UpButton-Icon[HORIZONTAL] {
1882   background-image: url( theme/resources/slider/right.png );
1883 }
1884
1885 Slider-UpButton-Icon[HORIZONTAL]:hover {
1886   background-image: url( theme/resources/slider/right-hover.png );
1887 }
1888
1889 Slider-UpButton-Icon[VERTICAL] {
1890   background-image: url( theme/resources/spinner/down.png );
1891 }
1892
1893 Slider-UpButton-Icon[VERTICAL]:hover {
1894   background-image: url( theme/resources/spinner/down-hover.png );
1895 }
1896
1897 Slider-DownButton-Icon[HORIZONTAL] {
1898   background-image: url( theme/resources/slider/left.png );
1899 }
1900
1901 Slider-DownButton-Icon[HORIZONTAL]:hover {
1902   background-image: url( theme/resources/slider/left-hover.png );
1903 }
1904
1905 Slider-DownButton-Icon[VERTICAL] {
1906   background-image: url( theme/resources/spinner/up.png );
1907 }
1908
1909 Slider-DownButton-Icon[VERTICAL]:hover {
1910   background-image: url( theme/resources/spinner/up-hover.png );
1911 }
1912
1913 /* ToolTip default theme */
1914
1915 ToolTip {
1916   cursor: default;
1917   border: 1px solid #a4a4a4;
1918   border-radius: 5px 5px 5px 5px;
1919   padding: 3px 3px 3px 3px;
1920   opacity: 1;
1921   color: #000000;
1922   background-image : gradient(
1923     linear, left top, left bottom,
1924     from( #ffffff ),
1925     to( #e4e5f0 )
1926   );
1927   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1928   background-color: #fcfcfc;
1929   animation: fadeIn 200ms linear, fadeOut 600ms ease-out;
1930   box-shadow: 4px 4px 2px rgba( 0, 0, 0, 0.4 );
1931 }
1932
1933 ToolTip-Image[ICON_ERROR] {
1934   background-image: url( theme/resources/tooltip/error.png );
1935 }
1936
1937 ToolTip-Image[ICON_INFORMATION] {
1938   background-image: url( theme/resources/tooltip/information.png );
1939 }
1940
1941 ToolTip-Image[ICON_WARNING] {
1942   background-image: url( theme/resources/tooltip/warning.png );
1943 }
1944
1945 ToolTip-Text {
1946   color: #003399;
1947   font: bold 14px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1948   text-shadow: none;
1949 }
1950
1951 ToolTip-Message {
1952   color: #000000;
1953   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1954   text-shadow: none;
1955 }
1956
1957 /* CCombo default theme */
1958
1959 CCombo {
1960   border: none;
1961   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
1962   background-color: #fcfcfc;
1963   color: #464a4e;
1964   border-radius: 0;
1965   background-image: none;
1966   text-shadow: none;
1967   box-shadow: none;
1968 }
1969
1970 CCombo[BORDER] {
1971   border: 1px solid #c1c1c1;
1972   border-radius: 2px;
1973   background-image: gradient(
1974     linear, left top, left bottom,
1975     from( #e2e2e2 ),
1976     color-stop( 15%, #f8f8f8 ),
1977     to( #fbfbfb )
1978   );
1979   box-shadow: none
1980 }
1981
1982 CCombo[BORDER]:focused {
1983   box-shadow: none;
1984   border: 1px solid #c1c1c1;
1985 }
1986
1987 CCombo-Button {
1988   cursor: default;
1989   background-color: transparent;
1990   border: none;
1991   border-left: none;
1992   border-radius: 0px 2px 2px 0px;
1993   background-image: gradient(
1994     linear, left top, left bottom,
1995     from( #ffffff ),
1996     color-stop( 48%, #f0f0f0 ),
1997     color-stop( 52%, #e0e0e0 ),
1998     to( #cccccc )
1999   );
2000   width: 18px;
2001 }
2002
2003 CCombo-Button:pressed {
2004   background-image: gradient(
2005     linear, left top, left bottom,
2006     from( #e0e0e0 ),
2007     color-stop( 52%, #e0e0e0 ),
2008     to( #b0b0b0 )
2009   );
2010 }
2011
2012 CCombo-Button-Icon {
2013   background-image: url( theme/resources/ccombo/down.png );
2014 }
2015
2016 CCombo-Button-Icon:hover {
2017   background-image: url( theme/resources/ccombo/down-hover.png );
2018 }
2019
2020 CCombo-Button[FLAT] {
2021   border: none;
2022 }
2023
2024 CCombo-Button[FLAT]:hover {
2025   border: 1px outset;
2026 }
2027
2028 CCombo-List {
2029   border: 1px solid #c1c1c1;
2030   border-radius: 0px 0px 2px 2px;
2031   box-shadow: 3px 3px 3px rgba( 0, 0, 0, 0.4 );
2032 }
2033
2034 CCombo-List-Item {
2035   color: inherit;
2036   background-color: transparent;
2037   background-image: none;
2038   text-decoration: none;
2039   text-shadow: none;
2040   padding: 3px 5px;
2041 }
2042
2043 CCombo-List-Item:hover, CCombo-List-Item:even:hover {
2044   background-image: gradient(
2045     linear, left top, left bottom,
2046     from( #e9f3d2 ),
2047     to( #d9e3c2 )
2048   );
2049 }
2050
2051 CCombo-List-Item:selected, CCombo-List-Item:even:selected {
2052   background-image: gradient(
2053     linear, left top, left bottom,
2054     from( #aee336 ),
2055     to( #88bd10 )
2056   );
2057 }
2058
2059 CCombo-Field {
2060   padding: 2px 3px;
2061 }
2062
2063 CCombo-FocusIndicator {
2064   background-color: transparent;
2065   border: 1px dotted #b8b8b8;
2066   margin: 1px 19px 1px 1px;
2067   opacity: 1;
2068 }
2069
2070 /* CLabel default theme */
2071
2072 CLabel {
2073   color: #4a4a4a;
2074   background-color: white;
2075   background-image: none;
2076   background-repeat: repeat;
2077   background-position: left top;
2078   border: none;
2079   padding: 3px;
2080   spacing: 5px;
2081   cursor: default;
2082   opacity: 1;
2083   text-shadow: none;
2084 }
2085
2086 CLabel[BORDER] {
2087   border: 1px solid #a4a4a4;
2088   border-radius: 2px;
2089 }
2090
2091 /* Browser default theme */
2092
2093 Browser {
2094   border: none;
2095 }
2096
2097 Browser[BORDER] {
2098   border: 1px solid #a4a4a4;
2099 }
2100
2101 /* ScrollBar default theme */
2102
2103 ScrollBar {
2104   border: none;
2105   background-color: #f3f3f4;
2106   border-radius: 3px 3px 3px 3px;
2107   width: 15px;
2108   background-image: none;
2109   opacity: 1;
2110 }
2111
2112 ScrollBar-Thumb {
2113   background-color: transparent;
2114   border: 1px solid #b4b4b4;
2115   border-radius: 0px;
2116   background-image: none;
2117   min-height: 20px;
2118 }
2119
2120 ScrollBar-Thumb:pressed {
2121   border: 1px solid #999999;
2122 }
2123
2124 ScrollBar-UpButton, ScrollBar-DownButton {
2125   background-color: transparent;
2126   border: 1px solid #b4b4b4;
2127   cursor: default;
2128 }
2129
2130 /* Rounded Borders */
2131
2132 ScrollBar-UpButton[HORIZONTAL] {
2133   border-radius: 0px 3px 3px 0px;
2134 }
2135
2136 ScrollBar-UpButton[VERTICAL] {
2137   border-radius: 0px 0px 3px 3px;
2138 }
2139
2140 ScrollBar-DownButton[HORIZONTAL] {
2141   border-radius: 3px 0px 0px 3px;
2142 }
2143
2144 ScrollBar-DownButton[VERTICAL] {
2145   border-radius: 3px 3px 0px 0px;
2146 }
2147
2148 /* Icons */
2149
2150 ScrollBar-Thumb-Icon[VERTICAL] {
2151   background-image: url( theme/resources/scrollbar/v-knob.png );
2152 }
2153
2154 ScrollBar-Thumb-Icon[HORIZONTAL] {
2155   background-image: url( theme/resources/scrollbar/h-knob.png );
2156 }
2157
2158 ScrollBar-UpButton-Icon[VERTICAL] {
2159   background-image: url( theme/resources/spinner/down.png );
2160 }
2161
2162 ScrollBar-UpButton-Icon[VERTICAL]:hover {
2163   background-image: url( theme/resources/spinner/down-hover.png );
2164 }
2165
2166 ScrollBar-UpButton-Icon[HORIZONTAL] {
2167   background-image: url( theme/resources/scrollbar/right.png );
2168 }
2169
2170 ScrollBar-UpButton-Icon[HORIZONTAL]:hover {
2171   background-image: url( theme/resources/scrollbar/right-hover.png );
2172 }
2173
2174 ScrollBar-DownButton-Icon[VERTICAL] {
2175   background-image: url( theme/resources/spinner/up.png );
2176 }
2177
2178 ScrollBar-DownButton-Icon[VERTICAL]:hover {
2179   background-image: url( theme/resources/spinner/up-hover.png );
2180 }
2181
2182 ScrollBar-DownButton-Icon[HORIZONTAL] {
2183   background-image: url( theme/resources/scrollbar/left.png );
2184 }
2185
2186 ScrollBar-DownButton-Icon[HORIZONTAL]:hover {
2187   background-image: url( theme/resources/scrollbar/left-hover.png );
2188 }
2189
2190 /* Gradients */
2191
2192 ScrollBar-Thumb[VERTICAL], ScrollBar-UpButton[VERTICAL], ScrollBar-DownButton[VERTICAL] {
2193   background-image: gradient(
2194     linear, left top, right top,
2195     from( #ffffff ),
2196     color-stop( 38%, #f0f0f0 ),
2197     color-stop( 62%, #e0e0e0 ),
2198     to( #ffffff )
2199   );
2200 }
2201
2202 ScrollBar-Thumb[VERTICAL]:hover, ScrollBar-UpButton[VERTICAL]:hover, ScrollBar-DownButton[VERTICAL]:hover {
2203   background-image: gradient(
2204     linear, left top, right top,
2205     from( #ffffff ),
2206     color-stop( 42%, #f0f0f0 ),
2207     color-stop( 58%, #e0e0e0 ),
2208     to( #cccccc )
2209   );
2210 }
2211
2212 ScrollBar-Thumb[VERTICAL]:pressed, ScrollBar-UpButton[VERTICAL]:pressed, ScrollBar-DownButton[VERTICAL]:pressed {
2213   background-image: gradient(
2214     linear, left top, right top,
2215     from( #e0e0e0 ),
2216     color-stop( 52%, #e0e0e0 ),
2217     to( #b0b0b0 )
2218   );
2219 }
2220
2221 ScrollBar-Thumb[HORIZONTAL], ScrollBar-UpButton[HORIZONTAL], ScrollBar-DownButton[HORIZONTAL] {
2222   background-image: gradient(
2223     linear, left top, left bottom,
2224     from( #ffffff ),
2225     color-stop( 38%, #f0f0f0 ),
2226     color-stop( 62%, #e0e0e0 ),
2227     to( #ffffff )
2228   );
2229 }
2230
2231 ScrollBar-Thumb[HORIZONTAL]:hover, ScrollBar-UpButton[HORIZONTAL]:hover, ScrollBar-DownButton[HORIZONTAL]:hover{
2232   background-image: gradient(
2233     linear, left top, left bottom,
2234     from( #ffffff ),
2235     color-stop( 42%, #f0f0f0 ),
2236     color-stop( 58%, #e0e0e0 ),
2237     to( #cccccc )
2238   );
2239 }
2240
2241 ScrollBar-Thumb[HORIZONTAL]:pressed, ScrollBar-UpButton[HORIZONTAL]:pressed, ScrollBar-DownButton[HORIZONTAL]:pressed {
2242   background-image: gradient(
2243     linear, left top, left bottom,
2244     from( #e0e0e0 ),
2245     color-stop( 52%, #e0e0e0 ),
2246     to( #b0b0b0 )
2247   );
2248 }
2249
2250 /******************************************************************************
2251  * Custom variants for workbench styling
2252  ******************************************************************************/
2253
2254 /* Button */
2255
2256 Button[PUSH], Button[TOGGLE], Button[BORDER] {
2257   animation: hoverIn 100ms ease-in, hoverOut 500ms ease-out;
2258 }
2259
2260 Button.clearButton {
2261   background-color: transparent;
2262   background-image: none;
2263   border: none;
2264   padding: 2px;
2265 }
2266
2267 Button-FocusIndicator.clearButton {
2268   border: none;
2269 }
2270
2271 Button.clearButton:hover, Button.clearButton:selected, Button.clearButton:pressed {
2272   background-image: none;
2273 }
2274
2275 Button.configMenuButton {
2276   background-color: transparent;
2277   background-image: none;
2278   border: none;
2279   padding: 1px;
2280 }
2281
2282 Button.configMenuButton:hover, Button.configMenuButton:selected, Button.configMenuButton:pressed {
2283   background-image: none;
2284 }
2285
2286 Button-FocusIndicator.configMenuButton {
2287   border: none;
2288 }
2289
2290 Button.viewClose {
2291   background-color: transparent;
2292   background-image: url( img/fancy/stack_tab_active_close_active.png );
2293   border: none;
2294   padding: 2px;
2295 }
2296
2297 Button.viewClose:pressed {
2298   background-image: url( img/fancy/stack_tab_active_close_active.png );
2299 }
2300
2301 Button.viewClose:hover {
2302   background-image: url( img/fancy/stack_tab_active_close_active_hover.png );
2303 }
2304
2305 Button-FocusIndicator.viewClose {
2306   border: none;
2307 }
2308
2309 Button.viewCloseInactive {
2310   background-color: transparent;
2311   background-image: url( img/fancy/stack_tab_inactive_close_active.png );
2312   border: none;
2313 }
2314
2315 Button.viewCloseInactive:pressed {
2316   background-image: url( img/fancy/stack_tab_inactive_close_active.png );
2317 }
2318
2319 Button.viewCloseInactive:hover {
2320   background-image: url( img/fancy/stack_tab_inactive_close_active_hover.png );
2321 }
2322
2323 Button-FocusIndicator.viewCloseInactive {
2324   border: none;
2325 }
2326
2327 Button.toolbarOverflowInactive {
2328   background-color: transparent;
2329   background-image: url( img/fancy/toolbar_overflow.png );
2330   border: none;
2331   padding: 2px;
2332 }
2333
2334 Button.toolbarOverflowInactive:pressed {
2335   background-image: url( img/fancy/toolbar_overflow.png );
2336 }
2337
2338 Button.toolbarOverflowInactive:hover {
2339   background-image: url( img/fancy/toolbar_overflow_hover.png );
2340 }
2341
2342 Button-FocusIndicator.toolbarOverflowInactive {
2343   border: none;
2344 }
2345
2346 Button.toolbarOverflowActive {
2347   background-color: transparent;
2348   background-image: url( img/fancy/toolbar_overflow_active.png );
2349   border: none;
2350   padding: 2px;
2351 }
2352
2353 Button.toolbarOverflowActive:pressed {
2354   background-image: url( img/fancy/toolbar_overflow_active.png );
2355 }
2356
2357 Button.toolbarOverflowActive:hover {
2358   background-image: url( img/fancy/toolbar_overflow_hover_active.png );
2359 }
2360
2361 Button-FocusIndicator.toolbarOverflowActive {
2362   border: none;
2363 }
2364
2365 Button.partActive {
2366   background-color: transparent;
2367   background-image: none;
2368   border: none;
2369   color: #3e4042;
2370   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2371 }
2372
2373 Button.partActive:pressed, Button.partActive:hover {
2374   background-image: none;
2375 }
2376
2377 Button-FocusIndicator.partActive {
2378   border: none;
2379 }
2380
2381 Button.partInActiveActive {
2382   background-color: transparent;
2383   background-image: none;
2384   border: none;
2385   color: #495f15;
2386   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2387 }
2388
2389 Button.partInActiveActive:pressed, Button.partInActiveActive:hover {
2390   background-image: none;
2391 }
2392
2393 Button-FocusIndicator.partInActiveActive {
2394   border: none;
2395 }
2396
2397 Button.partInactive {
2398   background-color: transparent;
2399   background-image: none;
2400   border: none;
2401   color: #ffffff;
2402   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2403 }
2404
2405 Button.partInactive:pressed, Button.partInactive:hover {
2406   background-image: none;
2407 }
2408
2409 Button-FocusIndicator.partInactive {
2410   border: none;
2411 }
2412
2413 Button.perspective {
2414   background-color: transparent;
2415   background-image: none;
2416   border: none;
2417   color: #cccccc;
2418   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2419 }
2420
2421 Button.perspective:hover {
2422   font: bold 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2423   background-image: none;
2424 }
2425
2426 Button.perspective:pressed {
2427   background-image: none;
2428 }
2429
2430 Button-FocusIndicator.perspective {
2431   border: none;
2432 }
2433
2434 Button.perspectiveActive {
2435   color: #70c6f3;
2436   background-color: transparent;
2437   background-image: none;
2438   border: none;
2439   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2440 }
2441
2442 Button.perspectiveActive:hover, Button.perspectiveActive:pressed, Button.perspectiveActive:selected {
2443   background-image: none;
2444 }
2445
2446 Button-FocusIndicator.perspectiveActive {
2447   border: none;
2448 }
2449
2450 Button.tabOverflowActive {
2451   background-color: transparent;
2452   border: none;
2453   padding: 2px;
2454   background-image: url( img/fancy/stack_tab_overflow_active.png );
2455 }
2456
2457 Button.tabOverflowActive:pressed {
2458   background-image: url( img/fancy/stack_tab_overflow_active.png );
2459 }
2460
2461 Button.tabOverflowActive:hover {
2462   background-image: url( img/fancy/stack_tab_overflow_active_hover.png );
2463 }
2464
2465 Button-FocusIndicator.tabOverflowActive {
2466   border: none;
2467 }
2468
2469 Button.tabOverflowInactive {
2470   background-color: transparent;
2471   border: none;
2472   padding: 2px;
2473   background-image: url( img/fancy/stack_tab_overflow_inactive.png );
2474 }
2475
2476 Button.tabOverflowInactive:pressed {
2477   background-image: url( img/fancy/stack_tab_overflow_inactive.png );
2478 }
2479
2480 Button.tabOverflowInactive:hover {
2481   background-image: url( img/fancy/stack_tab_overflow_inactive_hover.png );
2482 }
2483
2484 Button-FocusIndicator.tabOverflowInactive {
2485   border: none;
2486 }
2487
2488 /* Shell */
2489
2490 Shell-Titlebar {
2491   background-image: gradient( linear, left top, left bottom,
2492                               from( #a8dd32 ), to( #87b127 ) );
2493 }
2494
2495 Shell-Titlebar:inactive {
2496   color: #aaaaaa;
2497   background-image: gradient( linear, left top, left bottom,
2498                               from( #595959 ), to( #4b4b4b ) );
2499 }
2500
2501 Shell-DisplayOverlay {
2502   animation: fadeIn 150ms linear, fadeOut 400ms ease-out;
2503   background-image: none;
2504   background-color: #FFFFFF;
2505   opacity: 0.5;
2506 }
2507
2508 Shell-CloseButton {
2509   background-image: url( "theme/fancy/icons/shell-close.png" );
2510 }
2511
2512 Shell-MaxButton {
2513   background-image: url( "theme/fancy/icons/shell-max.png" );
2514 }
2515
2516 Shell-MinButton {
2517   background-image: url( "theme/fancy/icons/shell-min.png" );
2518 }
2519
2520 Shell-CloseButton:hover {
2521   background-image: url( "theme/fancy/icons/shell-close-hover.png" );
2522 }
2523
2524 Shell-MaxButton:hover {
2525   background-image: url( "theme/fancy/icons/shell-max-hover.png" );
2526 }
2527
2528 Shell-MinButton:hover {
2529   background-image: url( "theme/fancy/icons/shell-min-hover.png" );
2530 }
2531
2532 .shellGray {
2533   background-color: #ffffff;
2534 }
2535
2536 Shell.toolbarLayer {
2537   background-color: #ffffff;
2538   border: none;
2539 }
2540
2541 Shell-DisplayOverlay.confDialog {
2542   animation: fadeIn 150ms linear, fadeOut 400ms ease-out;
2543   background-image: none;
2544   background-color: #999999;
2545   opacity: 0.5;
2546 }
2547
2548 /* Tree */
2549
2550 Tree[BORDER] {
2551   border: 1px solid #C1C1C1;
2552 }
2553
2554 TreeItem {
2555   background-color: transparent;
2556   color: inherit;
2557 }
2558
2559 Tree-RowOverlay:hover {
2560   background-color: #e9f3d2;
2561 }
2562
2563 Tree-RowOverlay:selected {
2564   background-color: #abe033;
2565   color: #ffffff;
2566 }
2567
2568 Tree-RowOverlay:selected:unfocused {
2569   background-color: #959595;
2570   color: #ffffff;
2571 }
2572
2573 TreeColumn {
2574   background-image: url( "theme/fancy/icons/table-column.png" );
2575   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2576   border-bottom:none;
2577   padding: 1px 2px;
2578 }
2579
2580 TreeColumn:hover {
2581   background-image: url( "theme/fancy/icons/table-column-hover.png" );
2582   border-bottom:none;
2583 }
2584
2585 TreeColumn-SortIndicator:up {
2586   background-image: url( theme/fancy/icons/sort-indicator-up.png );
2587 }
2588
2589 TreeColumn-SortIndicator:down {
2590   background-image: url( theme/fancy/icons/sort-indicator-down.png );
2591 }
2592
2593 Tree-Indent:collapsed {
2594   background-image: url( theme/fancy/icons/tree-collapsed.png );
2595 }
2596
2597 Tree-Indent:expanded {
2598   background-image: url( theme/fancy/icons/tree-expanded.png );
2599 }
2600
2601 Tree-Indent:collapsed:hover {
2602   background-image: url( theme/fancy/icons/tree-collapsed-hover.png );
2603 }
2604
2605 Tree-Indent:expanded:hover {
2606   background-image: url( theme/fancy/icons/tree-expanded-hover.png );
2607 }
2608
2609 Tree-Indent:first:collapsed {
2610   background-image: url( theme/fancy/icons/tree-collapsed.png );
2611 }
2612
2613 Tree-Indent:first:expanded {
2614   background-image: url( theme/fancy/icons/tree-expanded.png );
2615 }
2616
2617 Tree-Indent:first:collapsed:hover {
2618   background-image: url( theme/fancy/icons/tree-collapsed-hover.png );
2619 }
2620
2621 Tree-Indent:first:expanded:hover {
2622   background-image: url( theme/fancy/icons/tree-expanded-hover.png );
2623 }
2624
2625 Tree-Indent:last:collapsed {
2626   background-image: url( theme/fancy/icons/tree-collapsed.png );
2627 }
2628
2629 Tree-Indent:last:expanded {
2630   background-image: url( theme/fancy/icons/tree-expanded.png );
2631 }
2632
2633 Tree-Indent:last:collapsed:hover {
2634   background-image: url( theme/fancy/icons/tree-collapsed-hover.png );
2635 }
2636
2637 Tree-Indent:last:expanded:hover {
2638   background-image: url( theme/fancy/icons/tree-expanded-hover.png );
2639 }
2640
2641 Tree-Indent:first:last:collapsed {
2642   background-image: url( theme/fancy/icons/tree-collapsed.png );
2643 }
2644
2645 Tree-Indent:first:last:expanded {
2646   background-image: url( theme/fancy/icons/tree-expanded.png );
2647 }
2648
2649 Tree-Indent:first:last:collapsed:hover {
2650   background-image: url( theme/fancy/icons/tree-collapsed-hover.png );
2651 }
2652
2653 Tree-Indent:first:last:expanded:hover {
2654   background-image: url( theme/fancy/icons/tree-expanded-hover.png );
2655 }
2656
2657 /* Table */
2658
2659 TableColumn {
2660   background-image: url( "theme/fancy/icons/table-column.png" );
2661 }
2662
2663 TableColumn:hover {
2664   background-image: url( "theme/fancy/icons/table-column-hover.png" );
2665 }
2666
2667 Table-RowOverlay:hover {
2668   background-color: #e9f3d2;
2669 }
2670
2671 Table-RowOverlay:selected {
2672   background-color: #abe033;
2673 }
2674
2675 Table-RowOverlay:selected:unfocused {
2676   background-color: #959595;
2677 }
2678
2679 TableItem:even {
2680   background-color: #f3f3f4;
2681 }
2682
2683 Table-RowOverlay:even:hover {
2684   background-color: #e9f3d2;
2685 }
2686
2687 Table-RowOverlay:even:selected {
2688   background-color: #abe033;
2689 }
2690
2691 Table-RowOverlay:even:selected:unfocused {
2692   background-color: #959595;
2693 }
2694
2695 Table-Checkbox {
2696   width: 21px;
2697   background-image: url( theme/fancy/icons/check-unselected.png );
2698 }
2699
2700 Table-Checkbox:hover {
2701   background-image: url( theme/fancy/icons/check-unselected-hover.png );
2702 }
2703
2704 Table-Checkbox:checked {
2705   background-image: url( theme/fancy/icons/check-selected.png );
2706 }
2707
2708 Table-Checkbox:checked:hover {
2709   background-image: url( theme/fancy/icons/check-selected-hover.png );
2710 }
2711
2712 Table-Checkbox:checked:grayed {
2713   background-image: url( theme/fancy/icons/check-grayed.png );
2714 }
2715
2716 Table-Checkbox:checked:grayed:hover {
2717   background-image: url( theme/fancy/icons/check-grayed-hover.png );
2718 }
2719
2720 TableColumn-SortIndicator:up {
2721   background-image: url( theme/fancy/icons/sort-indicator-up.png );
2722 }
2723
2724 TableColumn-SortIndicator:down {
2725   background-image: url( theme/fancy/icons/sort-indicator-down.png );
2726 }
2727
2728 /* List */
2729
2730 List-Item:hover {
2731   background-color: #e9f3d2;
2732   background-image: gradient(
2733     linear, left top, left bottom,
2734     from( #e9f3d2 ),
2735     to( #d9e3c2 )
2736   );
2737 }
2738
2739 List-Item:selected {
2740   background-color: #abe033;
2741   background-image: gradient(
2742     linear, left top, left bottom,
2743     from( #aee336 ),
2744     to( #88bd10 )
2745   );
2746 }
2747
2748 List-Item:selected:unfocused {
2749   background-color: #959595;
2750   background-image: gradient(
2751     linear, left top, left bottom,
2752     from( #A5A5A5 ),
2753     to( #858585 )
2754   );
2755 }
2756
2757 List-Item:even:hover {
2758   background-color: #e9f3d2;
2759 }
2760
2761 List-Item:even:selected {
2762   background-color: #abe033;
2763   background-image: gradient(
2764     linear, left top, left bottom,
2765     from( #aee336 ),
2766     to( #88bd10 )
2767   );
2768 }
2769
2770 List-Item:even:selected:unfocused {
2771   background-color: #959595;
2772   background-image: gradient(
2773     linear, left top, left bottom,
2774     from( #A5A5A5 ),
2775     to( #858585 )
2776   );
2777 }
2778
2779 /* Check Buttons */
2780
2781 Button-CheckIcon {
2782   background-image: url( theme/fancy/icons/check-unselected.png );
2783 }
2784
2785 Button-CheckIcon:selected {
2786   background-image: url( theme/fancy/icons/check-selected.png );
2787 }
2788
2789 Button-CheckIcon:hover {
2790   background-image: url( theme/fancy/icons/check-unselected-hover.png );
2791 }
2792
2793 Button-CheckIcon:selected:hover {
2794   background-image: url( theme/fancy/icons/check-selected-hover.png );
2795 }
2796
2797 Button-CheckIcon:selected:grayed {
2798   background-image: url( theme/fancy/icons/check-grayed.png );
2799 }
2800
2801 Button-CheckIcon:selected:grayed:hover {
2802   background-image: url( theme/fancy/icons/check-grayed-hover.png );
2803 }
2804
2805 /* Radio Buttons */
2806
2807 Button-RadioIcon {
2808   background-image: url( theme/fancy/icons/radio-unselected.png );
2809 }
2810
2811 Button-RadioIcon:selected {
2812   background-image: url( theme/fancy/icons/radio-selected.png );
2813 }
2814
2815 Button-RadioIcon:hover {
2816   background-image: url( theme/fancy/icons/radio-unselected-hover.png );
2817 }
2818
2819 Button-RadioIcon:selected:hover {
2820   background-image: url( theme/fancy/icons/radio-selected-hover.png );
2821 }
2822
2823 /* Menu */
2824 Menu {
2825   color: #0059a5;
2826   background-color: white;
2827   border: 1px #abe033;
2828   border-radius: 2px;
2829 }
2830
2831 MenuItem:hover {
2832   background-color: #e9f3d2;
2833   color: #4a4a4a;
2834 }
2835
2836 /* Label */
2837
2838 Label.menuBorder {
2839   background-color: #dddddd;
2840 }
2841
2842 Label.stackBorder {
2843   background-color: #ebebeb;
2844 }
2845
2846 Label.standaloneView {
2847   background-color: transparent;
2848   border: none;
2849   color: #ffffff;
2850   font: 11px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
2851 }
2852
2853 /* Custom Variants */
2854
2855 Composite.compGray {
2856   background-color: #ffffff;
2857 }
2858
2859 .compTrans {
2860   background-color: transparent;
2861 }
2862
2863 .partBorder {
2864   border: #eb0000;
2865 }
2866
2867 /* Expand Bar */
2868
2869 ExpandItem-Button {
2870   background-image: url( theme/fancy/icons/expanditem-expand.png );
2871 }
2872
2873 ExpandItem-Button:hover {
2874   background-image: url( theme/fancy/icons/expanditem-expand-hover.png );
2875 }
2876
2877 ExpandItem-Button:expanded {
2878   background-image: url( theme/fancy/icons/expanditem-collapse.png );
2879 }
2880
2881 ExpandItem-Button:expanded:hover {
2882   background-image: url( theme/fancy/icons/expanditem-collapse-hover.png );
2883 }
2884
2885 /* Combo */
2886
2887 /* Combo always shows a border, the BORDER style flag is ignored by SWT */
2888
2889 Combo, CCombo {
2890   color: #4a4a4a;
2891 }
2892
2893 Combo-Button-Icon, CCombo-Button-Icon {
2894   background-image: url( theme/fancy/icons/down.png );
2895 }
2896
2897 Combo-Button-Icon:hover, CCombo-Button-Icon:hover {
2898   background-image: url( theme/fancy/icons/down-hover.png );
2899 }
2900
2901 /* Spinner */
2902
2903 Spinner-DownButton-Icon {
2904   background-image: url( theme/fancy/icons/down.png );
2905 }
2906
2907 Spinner-DownButton-Icon:hover {
2908   background-image: url( theme/fancy/icons/down-hover.png );
2909 }
2910
2911 Spinner-UpButton-Icon {
2912   background-image: url( theme/fancy/icons/up.png );
2913 }
2914
2915 Spinner-UpButton-Icon:hover {
2916   background-image: url( theme/fancy/icons/up-hover.png );
2917 }
2918
2919 /* DateTime */
2920
2921 DateTime {
2922   color: #4a4a4a;
2923 }
2924
2925 DateTime-Calendar-Day:hover {
2926   background-color: #e9f3d2;
2927 }
2928
2929 DateTime-Calendar-Navbar {
2930   background-color: #abe033;
2931   border-radius: 0;
2932 }
2933
2934 DateTime-Calendar-PreviousMonthButton {
2935   background-image: url( theme/fancy/icons/lastMonth.png );
2936 }
2937
2938 DateTime-Calendar-PreviousMonthButton:hover {
2939   background-image: url( theme/fancy/icons/lastMonth-hover.png );
2940 }
2941
2942 DateTime-Calendar-NextMonthButton {
2943   background-image: url( theme/fancy/icons/nextMonth.png );
2944 }
2945
2946 DateTime-Calendar-NextMonthButton:hover {
2947   background-image: url( theme/fancy/icons/nextMonth-hover.png );
2948 }
2949
2950 DateTime-Calendar-PreviousYearButton {
2951   background-image: url( theme/fancy/icons/lastYear.png );
2952 }
2953
2954 DateTime-Calendar-PreviousYearButton:hover {
2955   background-image: url( theme/fancy/icons/lastYear-hover.png );
2956 }
2957
2958 DateTime-Calendar-NextYearButton {
2959   background-image: url( theme/fancy/icons/nextYear.png );
2960 }
2961
2962 DateTime-Calendar-NextYearButton:hover {
2963   background-image: url( theme/fancy/icons/nextYear-hover.png );
2964 }
2965
2966 DateTime-DownButton-Icon {
2967   background-image: url( theme/fancy/icons/down.png );
2968 }
2969
2970 DateTime-DownButton-Icon:hover {
2971   background-image: url( theme/fancy/icons/down-hover.png );
2972 }
2973
2974 DateTime-UpButton-Icon {
2975   background-image: url( theme/fancy/icons/up.png );
2976 }
2977
2978 DateTime-UpButton-Icon:hover {
2979   background-image: url( theme/fancy/icons/up-hover.png );
2980 }
2981
2982 DateTime-DropDownButton-Icon {
2983   background-image: url( theme/fancy/icons/down.png );
2984 }
2985
2986 DateTime-DropDownButton-Icon:hover {
2987   background-image: url( theme/fancy/icons/down-hover.png );
2988 }
2989
2990 DateTime-Calendar-Day:selected:hover {
2991   background-color: #abe033;
2992 }
2993
2994 /* Progress Bar */
2995
2996 ProgressBar-Indicator {
2997   background-color: #abe033;
2998   background-image: url( theme/fancy/icons/progress.png );
2999 }
3000
3001 ProgressBar-Indicator:paused {
3002   background-color: #ebebeb;
3003 }
3004
3005 /* Composite */
3006
3007 Composite.tabActive {
3008   border: 1px solid #ffffff;
3009   border-radius: 5px 5px 0px 0px;
3010   background-color: #ffffff;
3011 }
3012
3013 Composite.tabInactive {
3014   border: 1px solid #ffffff;
3015   border-radius: 5px 5px 0px 0px;
3016   background-color: #ffffff;
3017 }
3018
3019 Composite.inactiveButton {
3020   background-color: transparent;
3021   border: none;
3022 }
3023
3024 /* Slider */
3025
3026 Slider-DownButton-Icon[HORIZONTAL] {
3027   background-image: url( theme/fancy/icons/left.png );
3028 }
3029
3030 Slider-DownButton-Icon[HORIZONTAL]:hover {
3031   background-image: url( theme/fancy/icons/left-hover.png );
3032 }
3033
3034 Slider-UpButton-Icon[HORIZONTAL] {
3035   background-image: url( theme/fancy/icons/right.png );
3036 }
3037
3038 Slider-UpButton-Icon[HORIZONTAL]:hover {
3039   background-image: url( theme/fancy/icons/right-hover.png );
3040 }
3041
3042 Slider-DownButton-Icon[VERTICAL] {
3043   background-image: url( theme/fancy/icons/up.png );
3044 }
3045
3046 Slider-DownButton-Icon[VERTICAL]:hover {
3047   background-image: url( theme/fancy/icons/up-hover.png );
3048 }
3049
3050 Slider-UpButton-Icon[VERTICAL] {
3051   background-image: url( theme/fancy/icons/down.png );
3052 }
3053
3054 Slider-UpButton-Icon[VERTICAL]:hover {
3055   background-image: url( theme/fancy/icons/down-hover.png );
3056 }
3057
3058 /* CTabFolder, TabFolder */
3059
3060 TabItem {
3061   color: #4a4a4a;
3062   background-color: white;
3063 }
3064
3065 TabItem:selected {
3066   border-top-color: #abe033;
3067   border-bottom-color: #abe033;
3068 }
3069
3070 TabItem:hover {
3071   background-color: #e9f3d2;
3072 }
3073
3074 CTabItem:selected {
3075   background-color: #97c72c;
3076 }
3077
3078 CTabFolder-DropDownButton-Icon {
3079   background-image: url( theme/fancy/icons/ctabfolder-dropdown.png );
3080 }
3081
3082 CTabFolder-DropDownButton-Icon:hover {
3083   background-image: url( theme/fancy/icons/ctabfolder-dropdown-hover.png );
3084 }
3085
3086 /* Header Toolbar */
3087
3088 ToolBar.header-toolbar {
3089   padding: 0px 0px 0px 25px;
3090   color: white;
3091   spacing: 25px;
3092 }
3093
3094 ToolItem.header-toolbar {
3095   color: white;
3096   border: none;
3097   padding: 5px 5px 5px 5px;
3098   spacing: 10px;
3099 }
3100
3101 ToolItem.header-toolbar:hover {
3102   background-color: transparent;
3103   color: white;
3104   border: 1px solid #3b8fc2;
3105   border-radius: 5px 5px 0px 0px;
3106   padding: 5px 5px 5px 5px;
3107 }
3108
3109 ToolItem-DropDownIcon.header-toolbar {
3110   background-image: url( img/fancy/toolbar_arrow.png );
3111   border: none;
3112 }
3113
3114 ToolItem-DropDownIcon.header-toolbar:hover {
3115   background-image: url( img/fancy/toolbar_arrow.png );
3116   border: 1px solid #3b8fc2;
3117 }
3118
3119 Menu.header-toolbar {
3120   color: #3b8fc2;
3121   background-color: white;
3122   border: 1px solid #3b8fc2;
3123   border-radius: 0px 0px 5px 5px;
3124 }
3125
3126 MenuItem.header-toolbar {
3127   color: #656565;
3128 }
3129
3130 MenuItem.header-toolbar:hover {
3131   color: #3b8fc2;
3132   background-color: transparent;
3133 }
3134
3135
3136 /* Header overflow toolbar */
3137
3138 ToolItem.header-overflow {
3139   color: #656565;
3140   border: none;
3141   padding: 0px 25px 0px 0px;
3142 }
3143
3144 ToolItem.header-overflow:hover {
3145   background-color: transparent;
3146   color: #3b8fc2;
3147   border: none;
3148 }
3149
3150 ToolItem-DropDownIcon.header-overflow {
3151   background-image: url( img/fancy/toolbar_overflow_arrow.png );
3152 }
3153
3154 ToolItem-DropDownIcon.header-overflow:hover {
3155   background-image: url( img/fancy/toolbar_overflow_arrow.png );
3156   border: none;
3157 }
3158
3159 Menu.header-overflow {
3160   color: #656565;
3161   background-color: white;
3162   border: 1px #69b0df;
3163   border-radius: 5px;
3164 }
3165
3166 MenuItem.header-overflow {
3167   color: #656565;
3168 }
3169
3170 MenuItem.header-overflow:hover {
3171   color: #3b8fc2;
3172   background-color: transparent;
3173 }
3174
3175 /* MenuBar */
3176
3177 ToolBar.menuBar {
3178   background-color: transparent;
3179   padding: 0px;
3180   color: #656565;
3181   spacing: 25px;
3182 }
3183
3184 ToolItem.menuBar {
3185   background-color: transparent;
3186   background-image: none;
3187   border: none;
3188   color: #656565;
3189   padding: 0px 10px 0px 10px;
3190   spacing: 5px;
3191 }
3192
3193 ToolItem.menuBar:hover {
3194   background-color: transparent;
3195     background-image: gradient(
3196     linear, left top, left bottom,
3197     from( #9acd2b ),
3198     to( #8fbe29 )
3199   );
3200   border: 1px solid #83a438;
3201   border-radius: 3px 3px 0px 0px;
3202   color: white;
3203   padding: 0px 10px 0px 10px;
3204 }
3205
3206 ToolItem-DropDownIcon.menuBar {
3207   background-image: url( img/fancy/menu_arrow.png );
3208 }
3209
3210 ToolItem-DropDownIcon.menuBar:hover {
3211   background-image: url( img/fancy/menu_arrow_hover.png );
3212   border: 1px solid #83a438;
3213 }
3214
3215 Menu.menuBar {
3216   color: #656565;
3217   background-color: #f1fbdb;
3218   border: 1px solid #83a438;
3219   border-radius: 0px 0px 3px 3px;
3220   animation: slideIn 250ms ease-out, slideOut 50ms ease-out;
3221 }
3222
3223 MenuItem.menuBar {
3224   color: #656565;
3225 }
3226
3227 MenuItem.menuBar:hover {
3228   color: #8fbe29;
3229   background-color: transparent;
3230 }
3231
3232 /* Sash */
3233 Sash:hover {
3234   background-color: #e9f3d2;
3235 }
3236
3237 /* View ToolBar */
3238
3239 ToolBar.viewToolbar {
3240   background-color: transparent;
3241   padding: 0px 2px;
3242   spacing: 2px;
3243 }
3244
3245 ToolItem.viewToolbar {
3246   border: none;
3247 }
3248
3249 ToolItem:selected.viewToolbar {
3250   padding: 0px;
3251   border: 1px solid #8fbe29;
3252 }
3253
3254 ToolItem-DropDownIcon.viewToolbar {
3255   background-image: url( img/fancy/viewMenu.png );
3256   border: none;
3257 }
3258
3259 /* FileUpload */
3260
3261 FileUpload {
3262   font: 12px Verdana, "Lucida Sans", Arial, Helvetica, sans-serif;
3263   border: 1px solid #A4A4A4;
3264   border-radius: 3px;
3265   padding: 2px 5px;
3266   spacing: 2px;
3267   color: #4a4a4a;
3268   background-color: #ffffff;
3269   background-image: gradient(
3270     linear, left top, left bottom,
3271     from( #ffffff ),
3272     color-stop( 48%, #f0f0f0 ),
3273     color-stop( 52%, #e0e0e0 ),
3274     to( #ffffff )
3275   );
3276   background-repeat: repeat;
3277   background-position: left top;
3278   animation: hoverOut 500ms ease-out;
3279   cursor: pointer;
3280   text-shadow: none;
3281   opacity: 1;
3282 }
3283
3284 FileUpload:disabled {
3285   cursor: default;
3286 }
3287
3288 FileUpload:hover {
3289   background-image: gradient(
3290     linear, left top, left bottom,
3291     from( #ffffff ),
3292     color-stop( 48%, #f0f0f0 ),
3293     color-stop( 52%, #e0e0e0 ),
3294     to( #cccccc )
3295   );
3296 }
3297
3298 FileUpload:pressed {
3299   animation: none;
3300   background-image: gradient(
3301     linear, left top, left bottom,
3302     from( #e0e0e0 ),
3303     color-stop( 52%, #e0e0e0 ),
3304     to( #b0b0b0 )
3305   );
3306   padding: 4px 5px 2px 7px;
3307 }
3308
3309 FileUpload-FocusIndicator {
3310   background-color: transparent;
3311   border: 1px dotted #b8b8b8;
3312   margin: 2px;
3313   padding: 0px;
3314   opacity: 1;
3315 }
3316
3317 SystemMessage-DisplayOverlay {
3318   background-color: rgba( 128, 128, 128, 0.3 );
3319   background-image: none;
3320 }