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