|
1 /* |
|
2 � Copyright 2008 Nokia Corporation. All rights reserved. |
|
3 |
|
4 IMPORTANT: The kia 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, 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-size: inherit; |
|
53 font-family: inherit; |
|
54 font-style: 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: 70; |
|
172 } |
|
173 |
|
174 /* Rules for title bar element / right */ |
|
175 .TitleBarControl { |
|
176 padding: 0px 0px 0px 0px; |
|
177 margin: 0px 0px 0px 0px; |
|
178 min-height: 70; |
|
179 background: url("title.png") no-repeat left top; |
|
180 } |
|
181 |
|
182 /* Control assembly rules (assemblyElement) */ |
|
183 .ControlAssembly { |
|
184 background: url("ControlAssemblyBackground.png") repeat-x; |
|
185 padding: 1px 5px; |
|
186 min-height: 60; |
|
187 } |
|
188 |
|
189 /* Control assembly in normal state */ |
|
190 .ControlAssemblyNormal { |
|
191 background-position: 0px 0px; |
|
192 } |
|
193 |
|
194 /* Control assembly in focused state */ |
|
195 .ControlAssemblyFocus { |
|
196 background-position: 0px -250px; |
|
197 } |
|
198 |
|
199 /* Control assembly in hovering state */ |
|
200 .ControlAssemblyHover { |
|
201 background-position: 0px -500px; |
|
202 } |
|
203 |
|
204 /* Control assembly in disabled state */ |
|
205 .ControlAssemblyDisabled { |
|
206 background-position: 0px 0px; |
|
207 } |
|
208 |
|
209 /* Caption for controls (captionElement) */ |
|
210 .ControlCaption { |
|
211 font-weight: bold; |
|
212 padding: 3px 0px 0px 3px; |
|
213 } |
|
214 |
|
215 /* Caption for controls in normal state */ |
|
216 .ControlCaptionNormal { |
|
217 |
|
218 } |
|
219 |
|
220 /* Caption for controls when focused */ |
|
221 .ControlCaptionFocus { |
|
222 color: rgb(0,0,0); |
|
223 } |
|
224 |
|
225 /* Caption for controls when hovering */ |
|
226 .ControlCaptionHover { |
|
227 |
|
228 } |
|
229 |
|
230 /* Caption for controls when disabled */ |
|
231 .ControlCaptionDisabled { |
|
232 color: rgb(125,125,125); |
|
233 } |
|
234 |
|
235 /* Control element rules (controlElement) */ |
|
236 .ControlElement { |
|
237 padding: 3px 3px 3px 3px; |
|
238 } |
|
239 |
|
240 /******************************************************************************/ |
|
241 /* Label */ |
|
242 |
|
243 /* Rules for the text value of a Label control */ |
|
244 .LabelText { |
|
245 |
|
246 } |
|
247 |
|
248 /******************************************************************************/ |
|
249 /* TextPane */ |
|
250 |
|
251 /* Rules for the text value of a TextPane control */ |
|
252 .TextPane { |
|
253 background: transparent; |
|
254 font: normal 15px Arial, sans-serif; |
|
255 } |
|
256 |
|
257 /******************************************************************************/ |
|
258 /* ContentPanel */ |
|
259 |
|
260 /* Caption area rules for non-foldable content panels */ |
|
261 .ContentPanelCaptionNonFoldable { |
|
262 padding: 3px 0px 0px 3px; |
|
263 } |
|
264 |
|
265 /* Caption area rules for foldable content panels */ |
|
266 .ContentPanelCaptionFoldable { |
|
267 padding: 4px 0px 3px 3px; |
|
268 } |
|
269 |
|
270 /* Rules for fold toggling element in content panel */ |
|
271 .ContentPanelFoldToggle { |
|
272 background: url("ContentPanelFoldIcons.png") no-repeat; |
|
273 padding-left: 16px; |
|
274 } |
|
275 |
|
276 /* Collapsed fold */ |
|
277 .ContentPanelFoldToggleCollapsed { |
|
278 background-position: 0px 5px; |
|
279 } |
|
280 |
|
281 /* Expanded fold */ |
|
282 .ContentPanelFoldToggleExpanded { |
|
283 background-position: 0px -195px; |
|
284 } |
|
285 |
|
286 /* Rules for the content panel caption text */ |
|
287 .ContentPanelCaptionText { |
|
288 font-weight: bold; |
|
289 } |
|
290 |
|
291 /* Caption text for content panel in normal state */ |
|
292 .ContentPanelCaptionTextNormal { |
|
293 |
|
294 } |
|
295 |
|
296 /* Caption text for content panel when focused */ |
|
297 .ContentPanelCaptionTextFocus { |
|
298 color: rgb(0,0,0); |
|
299 } |
|
300 |
|
301 /* Caption text for content panel when hovering */ |
|
302 .ContentPanelCaptionTextHover { |
|
303 |
|
304 } |
|
305 |
|
306 /* Caption text for content panel when disabled */ |
|
307 .ContentPanelCaptionTextDisabled { |
|
308 color: rgb(125,125,125); |
|
309 } |
|
310 |
|
311 /* Rules for content in the content panel */ |
|
312 .ContentPanelContent { |
|
313 padding: 2px 2px 2px 8px; |
|
314 font-size: 15px; |
|
315 } |
|
316 |
|
317 /* Rules for content in the content panel */ |
|
318 .ContentPanelContent a.hover{ |
|
319 background-color: #87CDFF; |
|
320 } |
|
321 |
|
322 /******************************************************************************/ |
|
323 /* FormButton */ |
|
324 |
|
325 /* Rules for form button */ |
|
326 .FormButton { |
|
327 |
|
328 } |
|
329 |
|
330 /* Rules for form button control element */ |
|
331 .FormButtonControlElement { |
|
332 |
|
333 } |
|
334 |
|
335 /* Rules for form button table (table) */ |
|
336 .FormButtonTable { |
|
337 width: 100%; |
|
338 border-spacing: 0px; |
|
339 padding: 0px; |
|
340 table-layout: fixed; |
|
341 } |
|
342 |
|
343 /* Form button row (tr) */ |
|
344 .FormButtonRow { |
|
345 padding: 0px; |
|
346 } |
|
347 |
|
348 /* Rules for form button left cell (td) */ |
|
349 .FormButtonLeftCell { |
|
350 width: 8px; |
|
351 height: 60px; |
|
352 background: url("FormButtonLeftLarge.png") no-repeat; |
|
353 padding: 0px; |
|
354 } |
|
355 |
|
356 /* Rules for form button center cell (td) */ |
|
357 .FormButtonCenterCell { |
|
358 height: 60px; |
|
359 background: url("FormButtonCenterLarge.png") repeat-x; |
|
360 padding: 0px; |
|
361 vertical-align: middle; |
|
362 text-align: center; |
|
363 } |
|
364 |
|
365 /* Rules for form button right cell (td) */ |
|
366 .FormButtonRightCell { |
|
367 width: 8px; |
|
368 height: 60px; |
|
369 background: url("FormButtonRightLarge.png") no-repeat; |
|
370 padding: 0px; |
|
371 } |
|
372 |
|
373 /* Rules for form button left cell in normal state (td) */ |
|
374 .FormButtonLeftCellNormal { |
|
375 background-position: 0px 0px; |
|
376 } |
|
377 |
|
378 /* Rules for form button left cell in focused state (td) */ |
|
379 .FormButtonLeftCellFocus { |
|
380 background-position: 0px -120px; |
|
381 } |
|
382 |
|
383 /* Rules for form button left cell in hover state (td) */ |
|
384 .FormButtonLeftCellHover { |
|
385 background-position: 0px -240px; |
|
386 } |
|
387 |
|
388 /* Rules for form button left cell in disabled state (td) */ |
|
389 .FormButtonLeftCellDisabled { |
|
390 background-position: 0px -360px; |
|
391 } |
|
392 |
|
393 /* Rules for form button center cell in normal state (td) */ |
|
394 .FormButtonCenterCellNormal { |
|
395 background-position: 0px 0px; |
|
396 } |
|
397 |
|
398 /* Rules for form button center cell in focused state (td) */ |
|
399 .FormButtonCenterCellFocus { |
|
400 background-position: 0px -120px; |
|
401 } |
|
402 |
|
403 /* Rules for form button center cell in hover state (td) */ |
|
404 .FormButtonCenterCellHover { |
|
405 background-position: 0px -240px; |
|
406 } |
|
407 |
|
408 /* Rules for form button center cell in disabled state (td) */ |
|
409 .FormButtonCenterCellDisabled { |
|
410 background-position: 0px -360px; |
|
411 } |
|
412 |
|
413 /* Rules for form button left cell in normal state (td) */ |
|
414 .FormButtonRightCellNormal { |
|
415 background-position: 0px 0px; |
|
416 } |
|
417 |
|
418 /* Rules for form button left cell in focused state (td) */ |
|
419 .FormButtonRightCellFocus { |
|
420 background-position: 0px -120px; |
|
421 } |
|
422 |
|
423 /* Rules for form button left cell in hover state (td) */ |
|
424 .FormButtonRightCellHover { |
|
425 background-position: 0px -240px; |
|
426 } |
|
427 |
|
428 /* Rules for form button left cell in disabled state (td) */ |
|
429 .FormButtonRightCellDisabled { |
|
430 background-position: 0px -360px; |
|
431 } |
|
432 |
|
433 /* Rules for form button text */ |
|
434 .FormButtonText { |
|
435 font-weight: bold; |
|
436 } |
|
437 |
|
438 /* Form button text in normal state */ |
|
439 .FormButtonTextNormal { |
|
440 color: rgb(255,255,255); |
|
441 } |
|
442 |
|
443 /* Form button text when focused */ |
|
444 .FormButtonTextFocus { |
|
445 color: rgb(255,255,255); |
|
446 } |
|
447 |
|
448 /* Form button text when hovering */ |
|
449 .FormButtonTextHover { |
|
450 color: rgb(255,255,255); |
|
451 } |
|
452 |
|
453 /* Form button text when disabled */ |
|
454 .FormButtonTextDisabled { |
|
455 color: rgb(200,200,200); |
|
456 } |
|
457 |
|
458 |
|
459 /******************************************************************************/ |
|
460 /* NavigationButton */ |
|
461 |
|
462 /* Rules for navigation button */ |
|
463 .NavigationButton { |
|
464 min-height: 50px; |
|
465 } |
|
466 |
|
467 /* Rules for navigation button control element */ |
|
468 .NavigationButtonControlElement { |
|
469 padding: 3px 3px 3px 3px; |
|
470 } |
|
471 |
|
472 /* Rules for navigation button table (table) */ |
|
473 .NavigationButtonTable { |
|
474 border-spacing: 0px; |
|
475 padding: 0px; |
|
476 } |
|
477 |
|
478 /* Navigation button row (tr) */ |
|
479 .NavigationButtonRow { |
|
480 padding: 0px; |
|
481 } |
|
482 |
|
483 /* Rules for navigation button image cell (td) */ |
|
484 .NavigationButtonImageCell { |
|
485 line-height: 1px; |
|
486 font-size: 1px; |
|
487 vertical-align: middle; |
|
488 } |
|
489 |
|
490 /* Rules for navigation button text cell (td) */ |
|
491 .NavigationButtonTextCell { |
|
492 vertical-align: middle; |
|
493 padding: 0px; |
|
494 } |
|
495 |
|
496 /* Rules for navigation button image */ |
|
497 .NavigationButtonImage { |
|
498 padding: 0px 5px 0px 0px; |
|
499 } |
|
500 |
|
501 /* Rules for navigation button text */ |
|
502 .NavigationButtonText { |
|
503 font-weight: bold; |
|
504 } |
|
505 |
|
506 /* Navigation button text in normal state */ |
|
507 .NavigationButtonTextNormal { |
|
508 |
|
509 } |
|
510 |
|
511 /* Navigation button text when focused */ |
|
512 .NavigationButtonTextFocus { |
|
513 color: rgb(0,0,0); |
|
514 } |
|
515 |
|
516 /* Navigation button text when hovering */ |
|
517 .NavigationButtonTextHover { |
|
518 |
|
519 } |
|
520 |
|
521 /* Navigation button text when disabled */ |
|
522 .NavigationButtonTextDisabled { |
|
523 color: rgb(125,125,125); |
|
524 } |
|
525 |
|
526 |
|
527 /******************************************************************************/ |
|
528 /* TextField */ |
|
529 |
|
530 /* Rules for textField */ |
|
531 .TextField { |
|
532 width: 100%; |
|
533 min-height: 50px; |
|
534 border: 1px solid rgb(0,0,0); |
|
535 background: rgb(255,255,255); |
|
536 margin: 0px 0px 3px 0px; |
|
537 } |
|
538 |
|
539 /* TextField in normal state */ |
|
540 .TextFieldNormal { |
|
541 |
|
542 } |
|
543 |
|
544 /* TextField in focus state */ |
|
545 .TextFieldFocus { |
|
546 |
|
547 } |
|
548 |
|
549 /* TextField in hover state */ |
|
550 .TextFieldHover { |
|
551 |
|
552 } |
|
553 |
|
554 /* TextField in disabled state */ |
|
555 .TextFieldDisabled { |
|
556 color: rgb(50,50,50); |
|
557 background: rgb(200,200,200); |
|
558 } |
|
559 |
|
560 |
|
561 /******************************************************************************/ |
|
562 /* TextArea */ |
|
563 |
|
564 /* Rules for TextArea */ |
|
565 .TextArea { |
|
566 width: 100%; |
|
567 border: 1px solid rgb(0,0,0); |
|
568 background: rgb(255,255,255); |
|
569 margin: 0px 0px 3px 0px; |
|
570 } |
|
571 |
|
572 /* TextArea in normal state */ |
|
573 .TextAreaNormal { |
|
574 |
|
575 } |
|
576 |
|
577 /* TextArea in focus state */ |
|
578 .TextAreaFocus { |
|
579 |
|
580 } |
|
581 |
|
582 /* TextArea in hover state */ |
|
583 .TextAreaHover { |
|
584 |
|
585 } |
|
586 |
|
587 /* TextArea in disabled state */ |
|
588 .TextAreaDisabled { |
|
589 color: rgb(50,50,50); |
|
590 background: rgb(200,200,200); |
|
591 } |
|
592 |
|
593 |
|
594 /******************************************************************************/ |
|
595 /* Separator */ |
|
596 |
|
597 /* Rules for Separator (table) */ |
|
598 .Separator { |
|
599 width: 100%; |
|
600 padding: 0px; |
|
601 border-spacing: 0px; |
|
602 table-layout: fixed; |
|
603 margin: 3px 0px; |
|
604 } |
|
605 |
|
606 /* Separator row (tr) */ |
|
607 .SeparatorRow { |
|
608 padding: 0px; |
|
609 } |
|
610 |
|
611 /* Separator left cell (td) */ |
|
612 .SeparatorLeftCell { |
|
613 width: 5px; |
|
614 height: 2px; |
|
615 background: url("SeparatorLeft.png") no-repeat; |
|
616 padding: 0px; |
|
617 } |
|
618 |
|
619 /* Separator center cell (td) */ |
|
620 .SeparatorCenterCell { |
|
621 height: 2px; |
|
622 background: url("SeparatorCenter.png") repeat-x; |
|
623 padding: 0px; |
|
624 } |
|
625 |
|
626 /* Separator right cell (td) */ |
|
627 .SeparatorRightCell { |
|
628 width: 6px; |
|
629 height: 2px; |
|
630 background: url("SeparatorRight.png") no-repeat; |
|
631 padding: 0px; |
|
632 } |
|
633 |
|
634 |
|
635 /******************************************************************************/ |
|
636 /* SelectionMenu */ |
|
637 |
|
638 /* Rules for SelectionMenu select element */ |
|
639 .SelectionMenu { |
|
640 width: 100%; |
|
641 border: 1px solid rgb(0,0,0); |
|
642 background: rgb(255,255,255); |
|
643 margin: 0px 0px 3px 0px; |
|
644 } |
|
645 |
|
646 /* SelectionMenu in normal state */ |
|
647 .SelectionMenuNormal { |
|
648 |
|
649 } |
|
650 |
|
651 /* SelectionMenu in focus state */ |
|
652 .SelectionMenuFocus { |
|
653 |
|
654 } |
|
655 |
|
656 /* SelectionMenu in hover state */ |
|
657 .SelectionMenuHover { |
|
658 |
|
659 } |
|
660 |
|
661 /* SelectionMenu in disabled state */ |
|
662 .SelectionMenuDisabled { |
|
663 color: rgb(50,50,50); |
|
664 background: rgb(200,200,200); |
|
665 } |
|
666 |
|
667 /* Rules for SelectionMenu option elements */ |
|
668 .SelectionMenuOption { |
|
669 min-height: 60; |
|
670 background: rgb(255,255,255); |
|
671 } |
|
672 |
|
673 /* SelectionMenu option in normal state */ |
|
674 .SelectionMenuOptionNormal { |
|
675 |
|
676 } |
|
677 |
|
678 /* SelectionMenu option in focus state */ |
|
679 .SelectionMenuOptionFocus { |
|
680 |
|
681 } |
|
682 |
|
683 /* SelectionMenu option in hover state */ |
|
684 .SelectionMenuOptionHover { |
|
685 |
|
686 } |
|
687 |
|
688 /* SelectionMenu option in disabled state */ |
|
689 .SelectionMenuOptionDisabled { |
|
690 color: rgb(50,50,50); |
|
691 background: rgb(200,200,200); |
|
692 } |
|
693 |
|
694 |
|
695 /******************************************************************************/ |
|
696 /* SelectionList */ |
|
697 |
|
698 /* SelectionList option list element */ |
|
699 .SelectionList { |
|
700 |
|
701 } |
|
702 |
|
703 /* SelectionList option list element in normal state */ |
|
704 .SelectionListNormal { |
|
705 |
|
706 } |
|
707 |
|
708 /* SelectionList option list element in focus state */ |
|
709 .SelectionListFocus { |
|
710 |
|
711 } |
|
712 |
|
713 /* SelectionList option list element in hover state */ |
|
714 .SelectionListHover { |
|
715 |
|
716 } |
|
717 |
|
718 /* SelectionList option list element in disabled state */ |
|
719 .SelectionListDisabled { |
|
720 |
|
721 } |
|
722 |
|
723 /* SelectionList option element in single selection mode */ |
|
724 .SelectionListOptionSingle { |
|
725 padding-left: 19px; |
|
726 background: url("RadioButton.png") no-repeat; |
|
727 min-height: 50px; |
|
728 } |
|
729 |
|
730 /* SelectionList option element in single selection mode, unchecked normal state */ |
|
731 .SelectionListOptionSingleUncheckedNormal { |
|
732 background-position: 0px 10px; |
|
733 } |
|
734 |
|
735 /* SelectionList option element in single selection mode, unchecked focus state */ |
|
736 .SelectionListOptionSingleUncheckedFocus { |
|
737 background-position: 0px -40px; |
|
738 } |
|
739 |
|
740 /* SelectionList option element in single selection mode, unchecked diabled state */ |
|
741 .SelectionListOptionSingleUncheckedDisabled { |
|
742 background-position: 0px -90px; |
|
743 } |
|
744 |
|
745 /* SelectionList option element in single selection mode, checked normal state */ |
|
746 .SelectionListOptionSingleCheckedNormal { |
|
747 background-position: 0px -140px; |
|
748 } |
|
749 |
|
750 /* SelectionList option element in single selection mode, checked focus state */ |
|
751 .SelectionListOptionSingleCheckedFocus { |
|
752 background-position: 0px -190px; |
|
753 } |
|
754 |
|
755 /* SelectionList option element in single selection mode, checked diabled state */ |
|
756 .SelectionListOptionSingleCheckedDisabled { |
|
757 background-position: 0px -240px; |
|
758 } |
|
759 |
|
760 /* SelectionList option element in multi selection mode */ |
|
761 .SelectionListOptionMulti { |
|
762 padding-left: 19px; |
|
763 background: url("CheckBox.png") no-repeat; |
|
764 min-height: 50px; |
|
765 } |
|
766 |
|
767 /* SelectionList option element in multi selection mode, unchecked normal state */ |
|
768 .SelectionListOptionMultiUncheckedNormal { |
|
769 background-position: 0px 0px; |
|
770 } |
|
771 |
|
772 /* SelectionList option element in multi selection mode, unchecked focus state */ |
|
773 .SelectionListOptionMultiUncheckedFocus { |
|
774 background-position: 0px -50px; |
|
775 } |
|
776 |
|
777 /* SelectionList option element in multi selection mode, unchecked diabled state */ |
|
778 .SelectionListOptionMultiUncheckedDisabled { |
|
779 background-position: 0px -100px; |
|
780 } |
|
781 |
|
782 /* SelectionList option element in multi selection mode, checked normal state */ |
|
783 .SelectionListOptionMultiCheckedNormal { |
|
784 background-position: 0px -150px; |
|
785 } |
|
786 |
|
787 /* SelectionList option element in multi selection mode, checked focus state */ |
|
788 .SelectionListOptionMultiCheckedFocus { |
|
789 background-position: 0px -200px; |
|
790 } |
|
791 |
|
792 /* SelectionList option element in multi selection mode, checked diabled state */ |
|
793 .SelectionListOptionMultiCheckedDisabled { |
|
794 background-position: 0px -250px; |
|
795 } |
|
796 |
|
797 /* SelectionList option text */ |
|
798 .SelectionListOptionText { |
|
799 |
|
800 } |
|
801 |
|
802 /* SelectionList option text in normal state */ |
|
803 .SelectionListOptionTextNormal { |
|
804 |
|
805 } |
|
806 |
|
807 /* SelectionList option text in focus state */ |
|
808 .SelectionListOptionTextFocus { |
|
809 color: rgb(0,0,0); |
|
810 } |
|
811 |
|
812 /* SelectionList option text in hover state */ |
|
813 .SelectionListOptionTextHover { |
|
814 |
|
815 } |
|
816 |
|
817 /* SelectionList option text in disabled state */ |
|
818 .SelectionListOptionTextDisabled { |
|
819 color: rgb(125,125,125); |
|
820 } |
|
821 |
|
822 |
|
823 /******************************************************************************/ |
|
824 /* Scrollbar */ |
|
825 |
|
826 /* Scrollbar root element */ |
|
827 .Scrollbar { |
|
828 position: absolute; |
|
829 height: 100%; |
|
830 width: 7px; |
|
831 } |
|
832 |
|
833 /* Top portion of scrollbar track */ |
|
834 .ScrollbarTrackTop { |
|
835 position: absolute; |
|
836 background: url("ScrollbarTrackTop.png") no-repeat; |
|
837 width: 7px; |
|
838 height: 4px; |
|
839 } |
|
840 |
|
841 /* Middle portion of scrollbar track */ |
|
842 .ScrollbarTrackMiddle { |
|
843 position: absolute; |
|
844 background: url("ScrollbarTrackMiddle.png") repeat-y; |
|
845 width: 7px; |
|
846 } |
|
847 |
|
848 /* Bottom portion of scrollbar track */ |
|
849 .ScrollbarTrackBottom { |
|
850 position: absolute; |
|
851 background: url("ScrollbarTrackBottom.png") no-repeat; |
|
852 width: 7px; |
|
853 height: 4px; |
|
854 } |
|
855 |
|
856 /* Top portion of scrollbar thumb */ |
|
857 .ScrollbarThumbTop { |
|
858 position: absolute; |
|
859 background: url("ScrollbarThumbTop.png") no-repeat; |
|
860 width: 7px; |
|
861 height: 5px; |
|
862 } |
|
863 |
|
864 /* Middle portion of scrollbar thumb */ |
|
865 .ScrollbarThumbMiddle { |
|
866 position: absolute; |
|
867 background: url("ScrollbarThumbMiddle.png") repeat-y; |
|
868 width: 7px; |
|
869 } |
|
870 |
|
871 /* Bottom portion of scrollbar thumb */ |
|
872 .ScrollbarThumbBottom { |
|
873 position: absolute; |
|
874 background: url("ScrollbarThumbBottom.png") no-repeat; |
|
875 width: 7px; |
|
876 height: 5px; |
|
877 } |
|
878 |
|
879 |
|
880 /******************************************************************************/ |
|
881 /* NotificationPopup */ |
|
882 |
|
883 /* Container that defines the area for the popup dialog */ |
|
884 .NotificationPopupContainer { |
|
885 position: fixed; |
|
886 bottom: 0px; |
|
887 left: 50%; |
|
888 margin-left: -115px; |
|
889 width: 230px; |
|
890 height: 85px; |
|
891 } |
|
892 |
|
893 /* Notification popup dialog */ |
|
894 .NotificationPopup { |
|
895 position: absolute; |
|
896 width: 230px; |
|
897 height: 85px; |
|
898 background: url("NotificationPopupBackground.png") repeat-x; |
|
899 border: 1px solid rgb(0,0,0); |
|
900 } |
|
901 |
|
902 /* Notification type indicator */ |
|
903 .NotificationPopupTypeIndicator { |
|
904 position: absolute; |
|
905 left: 195px; |
|
906 top: 10px; |
|
907 width: 24px; |
|
908 height: 34px; |
|
909 background: url("NotificationPopupTypeIndicator.png") no-repeat; |
|
910 } |
|
911 |
|
912 /* Notification type indicator for notifications of undefined type */ |
|
913 .NotificationPopupTypeIndicatorNone { |
|
914 background-position: 0px 0px; |
|
915 } |
|
916 |
|
917 /* Notification type indicator for info notifications */ |
|
918 .NotificationPopupTypeIndicatorInfo { |
|
919 background-position: 0px -50px; |
|
920 } |
|
921 |
|
922 /* Notification type indicator for warning notifications */ |
|
923 .NotificationPopupTypeIndicatorWarning { |
|
924 background-position: 0px -100px; |
|
925 } |
|
926 |
|
927 /* Notification type indicator for wait notifications */ |
|
928 .NotificationPopupTypeIndicatorWait { |
|
929 background-position: 0px -150px; |
|
930 } |
|
931 |
|
932 /* Notification text area */ |
|
933 .NotificationPopupText { |
|
934 position: absolute; |
|
935 left: 10px; |
|
936 top: 8px; |
|
937 width: 180px; |
|
938 height: 50px; |
|
939 } |
|
940 |
|
941 /* Progress bar */ |
|
942 .NotificationPopupProgressBar { |
|
943 position: absolute; |
|
944 left: 6px; |
|
945 top: 60px; |
|
946 width: 218px; |
|
947 height: 16px; |
|
948 } |
|
949 |
|
950 |
|
951 table.historytable { |
|
952 width: 99%; |
|
953 } |
|
954 table.historytable, |
|
955 table.historytable tbody, |
|
956 table.historytable tr, |
|
957 table.historytable th, |
|
958 table.historytable td { |
|
959 border-bottom:1px solid #AAAAAA; |
|
960 border-collapse:collapse; |
|
961 border-spacing:1px; |
|
962 border-top:1px solid #AAAAAA; |
|
963 clear:both; |
|
964 margin-bottom:2px; |
|
965 padding-top: 3px; |
|
966 padding-bottom: 3px; |
|
967 } |
|
968 |
|
969 table.historytable th { |
|
970 font-weight: bold; |
|
971 } |
|
972 |
|
973 .language { |
|
974 font-size: 1.2em; |
|
975 } |