git.maemo.org Git - ptas/blob - zouba/wrt/WRTKit/Resources/UI.css

   1 /*\r
   2 � Copyright 2008 Nokia Corporation. All rights reserved.\r
   3 \r
   4 IMPORTANT:  The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia\r
   5 Corporation (�Nokia�) in consideration of your agreement to the following terms. Your use, installation\r
   6 and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If\r
   7 you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example\r
   8 Widget files.\r
   9 \r
  10 In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia\r
  11 grants you a personal, non-exclusive license, under Nokia�s copyrights in the WRTKit and Example\r
  12 Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,\r
  13 CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60\r
  14 Widgets.\r
  15 \r
  16 If you redistribute the WRTKit and Example files, you must retain this entire notice in all such\r
  17 redistributions of the WRTKit and Example files.\r
  18 \r
  19 You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products\r
  20 that include the WRTKit and Example files without the prior written explicit agreement with Nokia.\r
  21 Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by\r
  22 Nokia herein, including but not limited to any patent rights that may be infringed by your products that\r
  23 incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files\r
  24 may be incorporated.\r
  25 \r
  26 The WRTKit and Example files are provided on an "AS IS" basis.  NOKIA MAKES NO\r
  27 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED\r
  28 WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A\r
  29 PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION\r
  30 ALONE OR IN COMBINATION WITH YOUR PRODUCTS.\r
  31 \r
  32 IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR\r
  33 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF\r
  34 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS\r
  35 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR\r
  36 DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY\r
  37 OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,\r
  38 EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\r
  39 \r
  40 */\r
  41 \r
  42 /******************************************************************************/\r
  43 /*        Definition of visuals for the WRTKit user interface toolkit         */\r
  44 /******************************************************************************/\r
  45 \r
  46 /******************************************************************************/\r
  47 /* Document body rules */\r
  48 \r
  49 body {\r
  50     margin: 0px;\r
  51     background: url("DocumentBackground.png") repeat-x fixed;\r
  52     font: normal 12px Arial, sans-serif;\r
  53     color: rgb(0,0,0);\r
  54 }\r
  55 \r
  56 \r
  57 /******************************************************************************/\r
  58 /* Override default WRT styling for HTML form controls */\r
  59 \r
  60 /* Textarea when focused */\r
  61 textarea:focus {\r
  62     outline: none;\r
  63 }\r
  64 \r
  65 /* Textarea when hovering */\r
  66 textarea:hover {\r
  67     outline: none;\r
  68 }\r
  69 \r
  70 /* Select elements when focused */\r
  71 select:focus {\r
  72     outline: none;\r
  73 }\r
  74 \r
  75 /* Select elements when hovering */\r
  76 select:hover {\r
  77     outline: none;\r
  78 }\r
  79 \r
  80 /* Input elements when focused */\r
  81 input:focus {\r
  82     outline: none;\r
  83 }\r
  84 \r
  85 /* Input elements when hovering */\r
  86 input:hover {\r
  87     outline: none;\r
  88 }\r
  89 \r
  90 /* Link elements */\r
  91 a {\r
  92     text-decoration: none;\r
  93     color: rgb(0,0,0);\r
  94 }\r
  95 \r
  96 /* Links when focused */\r
  97 a:focus {\r
  98     background: none;\r
  99     outline: none;\r
 100 }\r
 101 \r
 102 /* Links when hovering */\r
 103 a:hover {\r
 104     background: none;\r
 105     outline: none;\r
 106 }\r
 107 \r
 108 \r
 109 /******************************************************************************/\r
 110 /* Rules for default view and document scrollbar containers */\r
 111 \r
 112 /* Default view container rules */\r
 113 .ViewContainer {\r
 114     margin: 0px 0px 0px 0px;\r
 115 }\r
 116 \r
 117 /* Default document scrollbar container rules */\r
 118 .DocumentScrollbarContainer {\r
 119     position: fixed;\r
 120     right: 0px;\r
 121     top: 0px;\r
 122     height: 100%;\r
 123     width: 7px;\r
 124 }\r
 125 \r
 126 \r
 127 /******************************************************************************/\r
 128 /* View style rules */\r
 129 \r
 130 /* Rules for the list view */\r
 131 .ListView {\r
 132     margin: 0px 0px 0px 0px;\r
 133 }\r
 134 \r
 135 /* Rules for the list view caption */\r
 136 .ListViewCaption {\r
 137     background: url("ListViewCaptionBackground.png");\r
 138     height: 35px;\r
 139 }\r
 140 \r
 141 /* Rules for the list view caption text */\r
 142 .ListViewCaptionText {\r
 143     font-size: 18px;\r
 144     font-weight: bold;\r
 145     padding: 7px 0px 0px 11px;\r
 146 }\r
 147 \r
 148 /* Rules for the list view control list element */\r
 149 .ListViewControlList {\r
 150     margin: 1px 10px 1px 3px;\r
 151 }\r
 152 \r
 153 \r
 154 /******************************************************************************/\r
 155 /* Control style rules */\r
 156 \r
 157 /* Rules for control root element (rootElement) */\r
 158 .Control {\r
 159     \r
 160 }\r
 161 \r
 162 /* Control assembly rules (assemblyElement) */\r
 163 .ControlAssembly {\r
 164     background: url("ControlAssemblyBackground.png") repeat-x;\r
 165     padding: 1px 5px;\r
 166 }\r
 167 \r
 168 /* Control assembly in normal state */\r
 169 .ControlAssemblyNormal {\r
 170     background-position: 0px 0px;\r
 171 }\r
 172 \r
 173 /* Control assembly in focused state */\r
 174 .ControlAssemblyFocus {\r
 175     background-position: 0px -250px;\r
 176 }\r
 177 \r
 178 /* Control assembly in hovering state */\r
 179 .ControlAssemblyHover {\r
 180     background-position: 0px -500px;\r
 181 }\r
 182 \r
 183 /* Control assembly in disabled state */\r
 184 .ControlAssemblyDisabled {\r
 185     background-position: 0px 0px;\r
 186 }\r
 187 \r
 188 /* Caption for controls (captionElement) */\r
 189 .ControlCaption {\r
 190     font-weight: bold;\r
 191     padding: 3px 0px 0px 3px;\r
 192 }\r
 193 \r
 194 /* Caption for controls in normal state */\r
 195 .ControlCaptionNormal {\r
 196     \r
 197 }\r
 198 \r
 199 /* Caption for controls when focused */\r
 200 .ControlCaptionFocus {\r
 201     color: rgb(255,255,255);\r
 202 }\r
 203 \r
 204 /* Caption for controls when hovering */\r
 205 .ControlCaptionHover {\r
 206     \r
 207 }\r
 208 \r
 209 /* Caption for controls when disabled */\r
 210 .ControlCaptionDisabled {\r
 211     color: rgb(125,125,125);\r
 212 }\r
 213 \r
 214 /* Control element rules (controlElement) */\r
 215 .ControlElement {\r
 216     padding: 3px 3px 3px 3px;\r
 217 }\r
 218 \r
 219 /******************************************************************************/\r
 220 /* Label */\r
 221 \r
 222 /* Rules for the text value of a Label control */\r
 223 .LabelText {\r
 224     \r
 225 }\r
 226 \r
 227 \r
 228 /******************************************************************************/\r
 229 /* ContentPanel */\r
 230 \r
 231 /* Caption area rules for non-foldable content panels */\r
 232 .ContentPanelCaptionNonFoldable {\r
 233     padding: 3px 0px 0px 3px;\r
 234 }\r
 235 \r
 236 /* Caption area rules for foldable content panels */\r
 237 .ContentPanelCaptionFoldable {\r
 238     padding: 4px 0px 3px 3px;\r
 239 }\r
 240 \r
 241 /* Rules for fold toggling element in content panel */\r
 242 .ContentPanelFoldToggle {\r
 243     background: url("ContentPanelFoldIcons.png") no-repeat;\r
 244     padding-left: 16px;\r
 245 }\r
 246 \r
 247 /* Collapsed fold */\r
 248 .ContentPanelFoldToggleCollapsed {\r
 249     background-position: 0px 0px;\r
 250 }\r
 251 \r
 252 /* Expanded fold */\r
 253 .ContentPanelFoldToggleExpanded {\r
 254     background-position: 0px -50px;\r
 255 }\r
 256 \r
 257 /* Rules for the content panel caption text */\r
 258 .ContentPanelCaptionText {\r
 259     font-weight: bold;\r
 260 }\r
 261 \r
 262 /* Caption text for content panel in normal state */\r
 263 .ContentPanelCaptionTextNormal {\r
 264     \r
 265 }\r
 266 \r
 267 /* Caption text for content panel when focused */\r
 268 .ContentPanelCaptionTextFocus {\r
 269     color: rgb(255,255,255);\r
 270 }\r
 271 \r
 272 /* Caption text for content panel when hovering */\r
 273 .ContentPanelCaptionTextHover {\r
 274     \r
 275 }\r
 276 \r
 277 /* Caption text for content panel when disabled */\r
 278 .ContentPanelCaptionTextDisabled {\r
 279     color: rgb(125,125,125);\r
 280 }\r
 281 \r
 282 /* Rules for content in the content panel */\r
 283 .ContentPanelContent {\r
 284     padding: 2px 2px 2px 8px;\r
 285 }\r
 286 \r
 287 \r
 288 /******************************************************************************/\r
 289 /* FormButton */\r
 290 \r
 291 /* Rules for form button */\r
 292 .FormButton {\r
 293     \r
 294 }\r
 295 \r
 296 /* Rules for form button control element */\r
 297 .FormButtonControlElement {\r
 298     \r
 299 }\r
 300 \r
 301 /* Rules for form button table (table) */\r
 302 .FormButtonTable {\r
 303     width: 100%;\r
 304     border-spacing: 0px;\r
 305     padding: 0px;\r
 306     table-layout: fixed;\r
 307 }\r
 308 \r
 309 /* Form button row (tr) */\r
 310 .FormButtonRow {\r
 311     padding: 0px;\r
 312 }\r
 313 \r
 314 /* Rules for form button left cell (td) */\r
 315 .FormButtonLeftCell {\r
 316     width: 8px;\r
 317     height: 26px;\r
 318     background: url("FormButtonLeft.png") no-repeat;\r
 319     padding: 0px;\r
 320 }\r
 321 \r
 322 /* Rules for form button center cell (td) */\r
 323 .FormButtonCenterCell {\r
 324     height: 26px;\r
 325     background: url("FormButtonCenter.png") repeat-x;\r
 326     padding: 0px;\r
 327     vertical-align: middle;\r
 328     text-align: center;\r
 329 }\r
 330 \r
 331 /* Rules for form button right cell (td) */\r
 332 .FormButtonRightCell {\r
 333     width: 8px;\r
 334     height: 26px;\r
 335     background: url("FormButtonRight.png") no-repeat;\r
 336     padding: 0px;\r
 337 }\r
 338 \r
 339 /* Rules for form button left cell in normal state (td) */\r
 340 .FormButtonLeftCellNormal {\r
 341     background-position: 0px 0px;\r
 342 }\r
 343 \r
 344 /* Rules for form button left cell in focused state (td) */\r
 345 .FormButtonLeftCellFocus {\r
 346     background-position: 0px -50px;\r
 347 }\r
 348 \r
 349 /* Rules for form button left cell in hover state (td) */\r
 350 .FormButtonLeftCellHover {\r
 351     background-position: 0px -100px;\r
 352 }\r
 353 \r
 354 /* Rules for form button left cell in disabled state (td) */\r
 355 .FormButtonLeftCellDisabled {\r
 356     background-position: 0px -150px;\r
 357 }\r
 358 \r
 359 /* Rules for form button center cell in normal state (td) */\r
 360 .FormButtonCenterCellNormal {\r
 361     background-position: 0px 0px;\r
 362 }\r
 363 \r
 364 /* Rules for form button center cell in focused state (td) */\r
 365 .FormButtonCenterCellFocus {\r
 366     background-position: 0px -50px;\r
 367 }\r
 368 \r
 369 /* Rules for form button center cell in hover state (td) */\r
 370 .FormButtonCenterCellHover {\r
 371     background-position: 0px -100px;\r
 372 }\r
 373 \r
 374 /* Rules for form button center cell in disabled state (td) */\r
 375 .FormButtonCenterCellDisabled {\r
 376     background-position: 0px -150px;\r
 377 }\r
 378 \r
 379 /* Rules for form button left cell in normal state (td) */\r
 380 .FormButtonRightCellNormal {\r
 381     background-position: 0px 0px;\r
 382 }\r
 383 \r
 384 /* Rules for form button left cell in focused state (td) */\r
 385 .FormButtonRightCellFocus {\r
 386     background-position: 0px -50px;\r
 387 }\r
 388 \r
 389 /* Rules for form button left cell in hover state (td) */\r
 390 .FormButtonRightCellHover {\r
 391     background-position: 0px -100px;\r
 392 }\r
 393 \r
 394 /* Rules for form button left cell in disabled state (td) */\r
 395 .FormButtonRightCellDisabled {\r
 396     background-position: 0px -150px;\r
 397 }\r
 398 \r
 399 /* Rules for form button text */\r
 400 .FormButtonText {\r
 401     font-weight: bold;\r
 402 }\r
 403 \r
 404 /* Form button text in normal state */\r
 405 .FormButtonTextNormal {\r
 406     color: rgb(255,255,255);\r
 407 }\r
 408 \r
 409 /* Form button text when focused */\r
 410 .FormButtonTextFocus {\r
 411     color: rgb(255,255,255);\r
 412 }\r
 413 \r
 414 /* Form button text when hovering */\r
 415 .FormButtonTextHover {\r
 416     color: rgb(255,255,255);\r
 417 }\r
 418 \r
 419 /* Form button text when disabled */\r
 420 .FormButtonTextDisabled {\r
 421     color: rgb(200,200,200);\r
 422 }\r
 423 \r
 424 \r
 425 /******************************************************************************/\r
 426 /* NavigationButton */\r
 427 \r
 428 /* Rules for navigation button */\r
 429 .NavigationButton {\r
 430     \r
 431 }\r
 432 \r
 433 /* Rules for navigation button control element */\r
 434 .NavigationButtonControlElement {\r
 435     padding: 3px 3px 3px 3px;\r
 436 }\r
 437 \r
 438 /* Rules for navigation button table (table) */\r
 439 .NavigationButtonTable {\r
 440     border-spacing: 0px;\r
 441     padding: 0px;\r
 442 }\r
 443 \r
 444 /* Navigation button row (tr) */\r
 445 .NavigationButtonRow {\r
 446     padding: 0px;\r
 447 }\r
 448 \r
 449 /* Rules for navigation button image cell (td) */\r
 450 .NavigationButtonImageCell {\r
 451     line-height: 1px;\r
 452     font-size: 1px;\r
 453     vertical-align: middle;\r
 454 }\r
 455 \r
 456 /* Rules for navigation button text cell (td) */\r
 457 .NavigationButtonTextCell {\r
 458     vertical-align: middle;\r
 459     padding: 0px;\r
 460 }\r
 461 \r
 462 /* Rules for navigation button image */\r
 463 .NavigationButtonImage {\r
 464     padding: 0px 5px 0px 0px;\r
 465 }\r
 466 \r
 467 /* Rules for navigation button text */\r
 468 .NavigationButtonText {\r
 469     font-weight: bold;\r
 470 }\r
 471 \r
 472 /* Navigation button text in normal state */\r
 473 .NavigationButtonTextNormal {\r
 474     \r
 475 }\r
 476 \r
 477 /* Navigation button text when focused */\r
 478 .NavigationButtonTextFocus {\r
 479     color: rgb(255,255,255);\r
 480 }\r
 481 \r
 482 /* Navigation button text when hovering */\r
 483 .NavigationButtonTextHover {\r
 484     \r
 485 }\r
 486 \r
 487 /* Navigation button text when disabled */\r
 488 .NavigationButtonTextDisabled {\r
 489     color: rgb(125,125,125);\r
 490 }\r
 491 \r
 492 \r
 493 /******************************************************************************/\r
 494 /* TextField */\r
 495 \r
 496 /* Rules for textField */\r
 497 .TextField {\r
 498     width: 100%;\r
 499     border: 1px solid rgb(0,0,0);\r
 500     background: rgb(255,255,255);\r
 501     margin: 0px 0px 3px 0px;\r
 502 }\r
 503 \r
 504 /* TextField in normal state */\r
 505 .TextFieldNormal {\r
 506     \r
 507 }\r
 508 \r
 509 /* TextField in focus state */\r
 510 .TextFieldFocus {\r
 511     \r
 512 }\r
 513 \r
 514 /* TextField in hover state */\r
 515 .TextFieldHover {\r
 516     \r
 517 }\r
 518 \r
 519 /* TextField in disabled state */\r
 520 .TextFieldDisabled {\r
 521     color: rgb(50,50,50);\r
 522     background: rgb(200,200,200);\r
 523 }\r
 524 \r
 525 \r
 526 /******************************************************************************/\r
 527 /* TextArea */\r
 528 \r
 529 /* Rules for TextArea */\r
 530 .TextArea {\r
 531     width: 100%;\r
 532     border: 1px solid rgb(0,0,0);\r
 533     background: rgb(255,255,255);\r
 534     margin: 0px 0px 3px 0px;\r
 535 }\r
 536 \r
 537 /* TextArea in normal state */\r
 538 .TextAreaNormal {\r
 539     \r
 540 }\r
 541 \r
 542 /* TextArea in focus state */\r
 543 .TextAreaFocus {\r
 544     \r
 545 }\r
 546 \r
 547 /* TextArea in hover state */\r
 548 .TextAreaHover {\r
 549     \r
 550 }\r
 551 \r
 552 /* TextArea in disabled state */\r
 553 .TextAreaDisabled {\r
 554     color: rgb(50,50,50);\r
 555     background: rgb(200,200,200);\r
 556 }\r
 557 \r
 558 \r
 559 /******************************************************************************/\r
 560 /* Separator */\r
 561 \r
 562 /* Rules for Separator (table) */\r
 563 .Separator {\r
 564     width: 100%;\r
 565     padding: 0px;\r
 566     border-spacing: 0px;\r
 567     table-layout: fixed;\r
 568     margin: 3px 0px;\r
 569 }\r
 570 \r
 571 /* Separator row (tr) */\r
 572 .SeparatorRow {\r
 573     padding: 0px;\r
 574 }\r
 575 \r
 576 /* Separator left cell (td) */\r
 577 .SeparatorLeftCell {\r
 578     width: 5px;\r
 579     height: 2px;\r
 580     background: url("SeparatorLeft.png") no-repeat;\r
 581     padding: 0px;\r
 582 }\r
 583 \r
 584 /* Separator center cell (td) */\r
 585 .SeparatorCenterCell {\r
 586     height: 2px;\r
 587     background: url("SeparatorCenter.png") repeat-x;\r
 588     padding: 0px;\r
 589 }\r
 590 \r
 591 /* Separator right cell (td) */\r
 592 .SeparatorRightCell {\r
 593     width: 6px;\r
 594     height: 2px;\r
 595     background: url("SeparatorRight.png") no-repeat;\r
 596     padding: 0px;\r
 597 }\r
 598 \r
 599 \r
 600 /******************************************************************************/\r
 601 /* SelectionMenu */\r
 602 \r
 603 /* Rules for SelectionMenu select element */\r
 604 .SelectionMenu {\r
 605     width: 100%;\r
 606     border: 1px solid rgb(0,0,0);\r
 607     background: rgb(255,255,255);\r
 608     margin: 0px 0px 3px 0px;\r
 609 }\r
 610 \r
 611 /* SelectionMenu in normal state */\r
 612 .SelectionMenuNormal {\r
 613     \r
 614 }\r
 615 \r
 616 /* SelectionMenu in focus state */\r
 617 .SelectionMenuFocus {\r
 618     \r
 619 }\r
 620 \r
 621 /* SelectionMenu in hover state */\r
 622 .SelectionMenuHover {\r
 623     \r
 624 }\r
 625 \r
 626 /* SelectionMenu in disabled state */\r
 627 .SelectionMenuDisabled {\r
 628     color: rgb(50,50,50);\r
 629     background: rgb(200,200,200);\r
 630 }\r
 631 \r
 632 /* Rules for SelectionMenu option elements */\r
 633 .SelectionMenuOption {\r
 634     background: rgb(255,255,255);\r
 635 }\r
 636 \r
 637 /* SelectionMenu option in normal state */\r
 638 .SelectionMenuOptionNormal {\r
 639     \r
 640 }\r
 641 \r
 642 /* SelectionMenu option in focus state */\r
 643 .SelectionMenuOptionFocus {\r
 644     \r
 645 }\r
 646 \r
 647 /* SelectionMenu option in hover state */\r
 648 .SelectionMenuOptionHover {\r
 649     \r
 650 }\r
 651 \r
 652 /* SelectionMenu option in disabled state */\r
 653 .SelectionMenuOptionDisabled {\r
 654     color: rgb(50,50,50);\r
 655     background: rgb(200,200,200);\r
 656 }\r
 657 \r
 658 \r
 659 /******************************************************************************/\r
 660 /* SelectionList */\r
 661 \r
 662 /* SelectionList option list element */\r
 663 .SelectionList {\r
 664     \r
 665 }\r
 666 \r
 667 /* SelectionList option list element in normal state */\r
 668 .SelectionListNormal {\r
 669     \r
 670 }\r
 671 \r
 672 /* SelectionList option list element in focus state */\r
 673 .SelectionListFocus {\r
 674     \r
 675 }\r
 676 \r
 677 /* SelectionList option list element in hover state */\r
 678 .SelectionListHover {\r
 679     \r
 680 }\r
 681 \r
 682 /* SelectionList option list element in disabled state */\r
 683 .SelectionListDisabled {\r
 684     \r
 685 }\r
 686 \r
 687 /* SelectionList option element in single selection mode */\r
 688 .SelectionListOptionSingle {\r
 689     padding-left: 19px;\r
 690     background: url("RadioButton.png") no-repeat;\r
 691     height: 16px;\r
 692 }\r
 693 \r
 694 /* SelectionList option element in single selection mode, unchecked normal state */\r
 695 .SelectionListOptionSingleUncheckedNormal {\r
 696     background-position: 0px 0px;\r
 697 }\r
 698 \r
 699 /* SelectionList option element in single selection mode, unchecked focus state */\r
 700 .SelectionListOptionSingleUncheckedFocus {\r
 701     background-position: 0px -50px;\r
 702 }\r
 703 \r
 704 /* SelectionList option element in single selection mode, unchecked diabled state */\r
 705 .SelectionListOptionSingleUncheckedDisabled {\r
 706     background-position: 0px -100px;\r
 707 }\r
 708 \r
 709 /* SelectionList option element in single selection mode, checked normal state */\r
 710 .SelectionListOptionSingleCheckedNormal {\r
 711     background-position: 0px -150px;\r
 712 }\r
 713 \r
 714 /* SelectionList option element in single selection mode, checked focus state */\r
 715 .SelectionListOptionSingleCheckedFocus {\r
 716     background-position: 0px -200px;\r
 717 }\r
 718 \r
 719 /* SelectionList option element in single selection mode, checked diabled state */\r
 720 .SelectionListOptionSingleCheckedDisabled {\r
 721     background-position: 0px -250px;\r
 722 }\r
 723 \r
 724 /* SelectionList option element in multi selection mode */\r
 725 .SelectionListOptionMulti {\r
 726     padding-left: 19px;\r
 727     background: url("CheckBox.png") no-repeat;\r
 728     height: 16px;\r
 729 }\r
 730 \r
 731 /* SelectionList option element in multi selection mode, unchecked normal state */\r
 732 .SelectionListOptionMultiUncheckedNormal {\r
 733     background-position: 0px 0px;\r
 734 }\r
 735 \r
 736 /* SelectionList option element in multi selection mode, unchecked focus state */\r
 737 .SelectionListOptionMultiUncheckedFocus {\r
 738     background-position: 0px -50px;\r
 739 }\r
 740 \r
 741 /* SelectionList option element in multi selection mode, unchecked diabled state */\r
 742 .SelectionListOptionMultiUncheckedDisabled {\r
 743     background-position: 0px -100px;\r
 744 }\r
 745 \r
 746 /* SelectionList option element in multi selection mode, checked normal state */\r
 747 .SelectionListOptionMultiCheckedNormal {\r
 748     background-position: 0px -150px;\r
 749 }\r
 750 \r
 751 /* SelectionList option element in multi selection mode, checked focus state */\r
 752 .SelectionListOptionMultiCheckedFocus {\r
 753     background-position: 0px -200px;\r
 754 }\r
 755 \r
 756 /* SelectionList option element in multi selection mode, checked diabled state */\r
 757 .SelectionListOptionMultiCheckedDisabled {\r
 758     background-position: 0px -250px;\r
 759 }\r
 760 \r
 761 /* SelectionList option text */\r
 762 .SelectionListOptionText {\r
 763     \r
 764 }\r
 765 \r
 766 /* SelectionList option text in normal state */\r
 767 .SelectionListOptionTextNormal {\r
 768     \r
 769 }\r
 770 \r
 771 /* SelectionList option text in focus state */\r
 772 .SelectionListOptionTextFocus {\r
 773     color: rgb(255,255,255);\r
 774 }\r
 775 \r
 776 /* SelectionList option text in hover state */\r
 777 .SelectionListOptionTextHover {\r
 778     \r
 779 }\r
 780 \r
 781 /* SelectionList option text in disabled state */\r
 782 .SelectionListOptionTextDisabled {\r
 783     color: rgb(125,125,125);\r
 784 }\r
 785 \r
 786 \r
 787 /******************************************************************************/\r
 788 /* Scrollbar */\r
 789 \r
 790 /* Scrollbar root element */\r
 791 .Scrollbar {\r
 792     position: absolute;\r
 793     height: 100%;\r
 794     width: 7px;\r
 795 }\r
 796 \r
 797 /* Top portion of scrollbar track */\r
 798 .ScrollbarTrackTop {\r
 799     position: absolute;\r
 800     background: url("ScrollbarTrackTop.png") no-repeat;\r
 801     width: 7px;\r
 802     height: 4px;\r
 803 }\r
 804 \r
 805 /* Middle portion of scrollbar track */\r
 806 .ScrollbarTrackMiddle {\r
 807     position: absolute;\r
 808     background: url("ScrollbarTrackMiddle.png") repeat-y;\r
 809     width: 7px;\r
 810 }\r
 811 \r
 812 /* Bottom portion of scrollbar track */\r
 813 .ScrollbarTrackBottom {\r
 814     position: absolute;\r
 815     background: url("ScrollbarTrackBottom.png") no-repeat;\r
 816     width: 7px;\r
 817     height: 4px;\r
 818 }\r
 819 \r
 820 /* Top portion of scrollbar thumb */\r
 821 .ScrollbarThumbTop {\r
 822     position: absolute;\r
 823     background: url("ScrollbarThumbTop.png") no-repeat;\r
 824     width: 7px;\r
 825     height: 5px;\r
 826 }\r
 827 \r
 828 /* Middle portion of scrollbar thumb */\r
 829 .ScrollbarThumbMiddle {\r
 830     position: absolute;\r
 831     background: url("ScrollbarThumbMiddle.png") repeat-y;\r
 832     width: 7px;\r
 833 }\r
 834 \r
 835 /* Bottom portion of scrollbar thumb */\r
 836 .ScrollbarThumbBottom {\r
 837     position: absolute;\r
 838     background: url("ScrollbarThumbBottom.png") no-repeat;\r
 839     width: 7px;\r
 840     height: 5px;\r
 841 }\r
 842 \r
 843 \r
 844 /******************************************************************************/\r
 845 /* NotificationPopup */\r
 846 \r
 847 /* Container that defines the area for the popup dialog */\r
 848 .NotificationPopupContainer {\r
 849     position: fixed;\r
 850     bottom: 0px;\r
 851     left: 50%;\r
 852     margin-left: -115px;\r
 853     width: 230px;\r
 854     height: 85px;\r
 855 }\r
 856 \r
 857 /* Notification popup dialog */\r
 858 .NotificationPopup {\r
 859     position: absolute;\r
 860     width: 230px;\r
 861     height: 85px;\r
 862     background: url("NotificationPopupBackground.png") repeat-x;\r
 863     border: 1px solid rgb(0,0,0);\r
 864 }\r
 865 \r
 866 /* Notification type indicator */\r
 867 .NotificationPopupTypeIndicator {\r
 868     position: absolute;\r
 869     left: 195px;\r
 870     top: 10px;\r
 871     width: 24px;\r
 872     height: 34px;\r
 873     background: url("NotificationPopupTypeIndicator.png") no-repeat;\r
 874 }\r
 875 \r
 876 /* Notification type indicator for notifications of undefined type */\r
 877 .NotificationPopupTypeIndicatorNone {\r
 878     background-position: 0px 0px;\r
 879 }\r
 880 \r
 881 /* Notification type indicator for info notifications */\r
 882 .NotificationPopupTypeIndicatorInfo {\r
 883     background-position: 0px -50px;\r
 884 }\r
 885 \r
 886 /* Notification type indicator for warning notifications */\r
 887 .NotificationPopupTypeIndicatorWarning {\r
 888     background-position: 0px -100px;\r
 889 }\r
 890 \r
 891 /* Notification type indicator for wait notifications */\r
 892 .NotificationPopupTypeIndicatorWait {\r
 893     background-position: 0px -150px;\r
 894 }\r
 895 \r
 896 /* Notification text area */\r
 897 .NotificationPopupText {\r
 898     position: absolute;\r
 899     left: 10px;\r
 900     top: 8px;\r
 901     width: 180px;\r
 902     height: 50px;\r
 903 }\r
 904 \r
 905 /* Progress bar */\r
 906 .NotificationPopupProgressBar {\r
 907     position: absolute;\r
 908     left: 6px;\r
 909     top: 60px;\r
 910     width: 218px;\r
 911     height: 16px;\r
 912 }\r