|
1 @charset "utf-8"; |
|
2 body { |
|
3 background-image: url(../images/Gradient0Background.png); |
|
4 background-repeat: repeat-x; |
|
5 margin: 0px; |
|
6 font-family: "Nokia Sans", "Nokia Sans SemiBold", "Arial Narrow"; |
|
7 padding: 0px; |
|
8 overflow: hidden; |
|
9 } |
|
10 .hide{ |
|
11 display:none; |
|
12 } |
|
13 .show{ |
|
14 display:block; |
|
15 } |
|
16 |
|
17 code{ |
|
18 background-color: #ffffa6; |
|
19 color: #000000; |
|
20 padding: 3px; |
|
21 display: block; |
|
22 font-size: 110%; |
|
23 margin: 3px 0px; |
|
24 } |
|
25 |
|
26 #DisplaySFKWrapper{ |
|
27 overflow: hidden; |
|
28 } |
|
29 #DisplayArea { |
|
30 margin-right: auto; |
|
31 margin-left: auto; |
|
32 overflow: hidden; |
|
33 |
|
34 } |
|
35 |
|
36 #WidgetArea{ |
|
37 position: relative; |
|
38 z-index: 99; |
|
39 } |
|
40 #WidgetArea iframe{ |
|
41 width: 100%; |
|
42 height: 100%; |
|
43 border: 0px; |
|
44 margin-left: auto; |
|
45 margin-top: auto; |
|
46 } |
|
47 |
|
48 #WidgetArea.hs_portrait{ |
|
49 background-image: url(../images/device/360x640/hs-portrait.png); |
|
50 background-repeat: no-repeat; |
|
51 } |
|
52 |
|
53 #WidgetArea.hs_landscape{ |
|
54 background-image: url(../images/device/360x640/hs-landscape.png); |
|
55 background-repeat: no-repeat; |
|
56 } |
|
57 #WidgetArea.hs_portrait iframe{ |
|
58 width: 306px; |
|
59 height: 76px; |
|
60 margin-left: 26px; |
|
61 margin-top: 321px; |
|
62 overflow: hidden !important; |
|
63 } |
|
64 |
|
65 #WidgetArea.hs_landscape iframe{ |
|
66 width: 306px; |
|
67 height: 76px; |
|
68 margin-left: 322px !important; |
|
69 margin-top: 151px !important; |
|
70 overflow: hidden !important; |
|
71 } |
|
72 |
|
73 #iframeMask |
|
74 { |
|
75 width: 328px; |
|
76 height: 100px; |
|
77 position: absolute; |
|
78 z-index: 900; |
|
79 background-image: url(../images/hs-iframeMask.png); |
|
80 background-repeat: no-repeat; |
|
81 background-position: top left; |
|
82 } |
|
83 |
|
84 #iframeMask:hover |
|
85 { |
|
86 background-repeat: no-repeat; |
|
87 background-position: bottom left; |
|
88 } |
|
89 |
|
90 |
|
91 #WidgetArea.hs_portrait #iframeMask{ |
|
92 margin-left: 16px !important; |
|
93 margin-top: 310px !important; |
|
94 } |
|
95 #WidgetArea.hs_landscape #iframeMask{ |
|
96 margin-left: 312px !important; |
|
97 margin-top: 140px !important; |
|
98 } |
|
99 |
|
100 |
|
101 #SoftKeys{ |
|
102 height: 50px; |
|
103 width: 240px; |
|
104 margin-right: auto; |
|
105 margin-left: auto; |
|
106 margin-top: 10px; |
|
107 } |
|
108 |
|
109 div.clear{ |
|
110 clear: both; |
|
111 } |
|
112 #DeviceDisplayLayout { |
|
113 background-repeat: no-repeat; |
|
114 background-position: center center; |
|
115 margin-right: auto; |
|
116 margin-left: auto; |
|
117 margin-top: 0px; |
|
118 overflow: hidden; |
|
119 } |
|
120 |
|
121 #DeviceDisplayLayout.portrait_240x320 { |
|
122 background-image: url(../images/device/240x320/Portrait.png); |
|
123 width: 600px; |
|
124 height: 536px; |
|
125 } |
|
126 |
|
127 #DeviceDisplayLayout.landscape_240x320 { |
|
128 background-image: url(../images/device/240x320/Landscape.png); |
|
129 width: 848px; |
|
130 height: 408px; |
|
131 } |
|
132 |
|
133 #SoftKeysArea{ |
|
134 z-index: 101; |
|
135 position: relative; |
|
136 /* background-image: url(../images/device/menuKeys-bg.png); |
|
137 background-repeat: no-repeat; |
|
138 background-position: center top; |
|
139 */ |
|
140 background-color: #666666; |
|
141 } |
|
142 |
|
143 #SoftKeysArea ul{ |
|
144 list-style: none; |
|
145 margin: 0px; |
|
146 padding: 0px; |
|
147 |
|
148 } |
|
149 |
|
150 #SoftKeysArea ul li{ |
|
151 margin: 0px; |
|
152 font-weight: bold; |
|
153 font-size: 15px; |
|
154 float: left; |
|
155 padding: 5px; |
|
156 } |
|
157 |
|
158 |
|
159 #SoftKeysArea ul li a{ |
|
160 color: #FFFFFF; |
|
161 text-decoration: none; |
|
162 display: block; |
|
163 } |
|
164 |
|
165 li#RskLabel{ |
|
166 text-align: right; |
|
167 } |
|
168 |
|
169 #MenuItemsArea{ |
|
170 z-index: 100; |
|
171 display: none; |
|
172 } |
|
173 |
|
174 #MenuItemsArea ul{ |
|
175 margin: 0px; |
|
176 padding: 5px; |
|
177 list-style-position: inside; |
|
178 list-style-image: none; |
|
179 list-style-type: none; |
|
180 background-color: #CCCCCC; |
|
181 } |
|
182 |
|
183 #MenuItemsArea ul li{ |
|
184 font-size: 13px; |
|
185 font-weight: bold; |
|
186 } |
|
187 |
|
188 #MenuItemsArea li.active{ |
|
189 background-color: #75ea00; |
|
190 } |
|
191 |
|
192 #MenuItemsArea a{ |
|
193 color: #000; |
|
194 text-decoration: none; |
|
195 display: block; |
|
196 padding: 5px; |
|
197 height: 14px; |
|
198 } |
|
199 #MenuItemsArea a:hover{ |
|
200 background-color: #75ea00; |
|
201 } |
|
202 |
|
203 #MenuItemsArea a.subMenuItem{ |
|
204 background-image: url(../images/sub-menu-arrow.png); |
|
205 background-repeat: no-repeat; |
|
206 background-position: right 0px; |
|
207 } |
|
208 |
|
209 #MenuItemsArea a.subMenuItem:hover{ |
|
210 background-position: right -20px; |
|
211 } |
|
212 #MenuItemsArea a.subMenuItem:active{ |
|
213 background-position: right -40px; |
|
214 } |
|
215 |
|
216 #MenuItemsArea li.active a.subMenuItem{ |
|
217 background-position: right -20px; |
|
218 } |
|
219 div#IconArea{ |
|
220 display: none; |
|
221 font-size: 0.9em; |
|
222 font-weight: bold; |
|
223 background-repeat: no-repeat; |
|
224 } |
|
225 |
|
226 div#IconArea.portrait240x320{ |
|
227 background-image: url(../images/statusBar_240x320.png); |
|
228 } |
|
229 div#IconArea.landscape240x320{ |
|
230 background-image: url(../images/statusBar_320x240.png); |
|
231 } |
|
232 |
|
233 div#IconArea.portrait320x240{ |
|
234 background-image: url(../images/statusBar_320x240.png); |
|
235 } |
|
236 div#IconArea.landscape320x240{ |
|
237 background-image: url(../images/statusBar_240x320.png); |
|
238 } |
|
239 |
|
240 div#IconArea.portrait360x640{ |
|
241 background-image: url(../images/statusBar_360x640.png); |
|
242 } |
|
243 div#IconArea.landscape360x640{ |
|
244 background-image: url(../images/statusBar_640x360.png); |
|
245 } |
|
246 |
|
247 div#IconArea.landscape800x352{ |
|
248 background-image: url(../images/statusBar_800x352.png); |
|
249 } |
|
250 |
|
251 |
|
252 div.IconFile{ |
|
253 margin-left: auto; |
|
254 margin-right: auto; |
|
255 text-align: center; |
|
256 padding: 20px; |
|
257 } |
|
258 |
|
259 div.IconFile:hover{ |
|
260 background-image: url(../images/IconArea-hover.png); |
|
261 background-position: center center; |
|
262 background-repeat: no-repeat; |
|
263 } |
|
264 |
|
265 div.IconFile p{ |
|
266 margin: 0px; |
|
267 } |
|
268 |
|
269 |
|
270 |
|
271 p.highlight span{ |
|
272 background-color: #fbf7a2; |
|
273 font-weight: normal; |
|
274 font-size: 0.8em; |
|
275 padding: 3px; |
|
276 } |
|
277 |
|
278 /* |
|
279 preferences CSS |
|
280 */ |
|
281 |
|
282 div#PreferencesBtn{ |
|
283 width: 75px; |
|
284 height: 85px; |
|
285 background-image: url(../images/settings-icon.png); |
|
286 position: absolute; |
|
287 top: 10px; |
|
288 left: 10px; |
|
289 background-position: left bottom; |
|
290 z-index: 200; |
|
291 } |
|
292 |
|
293 div#PreferencesBtn:hover{ |
|
294 background-position: left top; |
|
295 } |
|
296 |
|
297 div#loaderDiv{ |
|
298 padding: 10px; |
|
299 font-size: 1.1em; |
|
300 position: absolute; |
|
301 top: 0px; |
|
302 right: 0px; |
|
303 display: none; |
|
304 z-index: 202; |
|
305 } |
|
306 |
|
307 div#loaderDiv.green{ |
|
308 background-color: #5abd2b; |
|
309 color: #FFFFFF; |
|
310 } |
|
311 |
|
312 div#loaderDiv.yellow{ |
|
313 background-color: #ffff00; |
|
314 color: #000000; |
|
315 } |
|
316 |
|
317 div#orientationIcon{ |
|
318 background-image: url(../images/normal-orientation-icon.png); |
|
319 background-repeat: no-repeat; |
|
320 width: 191px; |
|
321 height: 72px; |
|
322 float: left; |
|
323 position: absolute; |
|
324 left: 10px; |
|
325 top: 0px; |
|
326 display: none; |
|
327 } |
|
328 div#orientationIcon:hover{ |
|
329 background-image: url(../images/active-orientation-icon.png); |
|
330 } |
|
331 |
|
332 table{ |
|
333 border-top: 1px solid #808080; |
|
334 border-left: 1px solid #808080; |
|
335 } |
|
336 |
|
337 table a.link{ |
|
338 background-color: #20c41c; |
|
339 color: #ffffff; |
|
340 font-weight: bold; |
|
341 border: 1px solid #4e872c; |
|
342 padding: 3px 2px; |
|
343 text-decoration: none; |
|
344 font-size: 80%; |
|
345 } |
|
346 |
|
347 table th, table td{ |
|
348 padding: 6px 5px; |
|
349 border-bottom: 1px solid #808080; |
|
350 border-right: 1px solid #808080; |
|
351 font-size: 0.9em; |
|
352 } |
|
353 table th{ |
|
354 width: 150px; |
|
355 text-align: left; |
|
356 background-image: url(../images/th-bg-gradient.png); |
|
357 background-repeat: repeat-x; |
|
358 background-position: left bottom; |
|
359 } |
|
360 |
|
361 #NotificationDiv p{ |
|
362 color: #ffffff; |
|
363 font-size: 95%; |
|
364 padding: 5px; |
|
365 } |
|
366 |
|
367 strong{ |
|
368 color: #eee46c; |
|
369 } |
|
370 |
|
371 #BrowserNotificationBar{ |
|
372 z-index: 2000; |
|
373 background-color: #f2eb8e; |
|
374 border-bottom: 2px solid #f0d25e; |
|
375 display: none; |
|
376 position: absolute; |
|
377 left: 0; |
|
378 top: 0; |
|
379 width: 100%; |
|
380 font-size: 80%; |
|
381 font-weight: bolder; |
|
382 text-align: right; |
|
383 margin: 0px; |
|
384 opacity: 0.9; |
|
385 } |
|
386 #BrowserNotificationBar a{ |
|
387 height: 10px; |
|
388 width: 10px; |
|
389 float: right; |
|
390 background-image: url(../images/BrowserNotificationBar-Toogle.gif); |
|
391 background-position: 0px -10px; |
|
392 margin : 4px 15px 0px 10px; |
|
393 cursor: hand; |
|
394 overflow: hidden; |
|
395 } |
|
396 /* |
|
397 Event Triggering CSS |
|
398 */ |
|
399 |
|
400 h2{ |
|
401 font-size: 120%; |
|
402 margin: 3px 0px; |
|
403 padding: 0px; |
|
404 } |
|
405 |
|
406 #tabs-1, #tabs-2{ |
|
407 height: 223px; |
|
408 overflow: auto; |
|
409 } |
|
410 |
|
411 #connect-charger-icon, #dis-connect-charger-icon{ |
|
412 background-repeat: no-repeat; |
|
413 background-position: left top; |
|
414 width: 165px; |
|
415 height: 36px; |
|
416 margin: 5px auto; |
|
417 } |
|
418 |
|
419 #connect-charger-icon{ |
|
420 background-image: url(../images/connect-charger-icon.png); |
|
421 } |
|
422 |
|
423 #dis-connect-charger-icon{ |
|
424 background-image: url(../images/dis-connect-charger-icon.png); |
|
425 } |
|
426 |
|
427 #connect-charger-icon:hover, #dis-connect-charger-icon:hover{ |
|
428 background-position: left bottom; |
|
429 } |
|
430 |
|
431 div#event-battery, div#event-messaging, div#event-memory{ |
|
432 float: left; |
|
433 width: 150px; |
|
434 height: 50px; |
|
435 background-position: left top; |
|
436 margin: 10px; |
|
437 background-repeat: no-repeat; |
|
438 border: 1px solid #6f6f6f; |
|
439 } |
|
440 |
|
441 div#event-battery.active:hover, div#event-messaging.active:hover, div#event-memory.active:hover{ |
|
442 background-position: 0px -50px; |
|
443 border: 1px solid #75ea4f; |
|
444 } |
|
445 |
|
446 div#event-messaging.inactive, div#event-memory.inactive{ |
|
447 background-position: 0px -100px; |
|
448 border: 1px solid #676767; |
|
449 } |
|
450 |
|
451 |
|
452 div#event-battery{ |
|
453 background-image: url(../images/battery-icon.png); |
|
454 } |
|
455 |
|
456 div#event-messaging{ |
|
457 background-image: url(../images/messaging-icon.png); |
|
458 } |
|
459 |
|
460 div#event-memory{ |
|
461 background-image: url(../images/memory-icon.png); |
|
462 } |
|
463 |
|
464 div.ui-panel{ |
|
465 height:30px; |
|
466 } |
|
467 |
|
468 a.ui-button, a.ui-button-fixed { |
|
469 background:#555555 url(../script/jquery-ui/css/ui-darkness/images/555555_40x100_textures_02_glass_20.png) repeat-x scroll 0 50%; |
|
470 border:1px solid #666666; |
|
471 color:#EEEEEE; |
|
472 cursor:pointer; |
|
473 font-size:0.9em; |
|
474 font-weight:bolder; |
|
475 line-height:1.4em; |
|
476 margin:0.5em 8px 0.5em 0; |
|
477 padding:0.2em 0.6em 0.3em; |
|
478 text-decoration: none; |
|
479 } |
|
480 a.ui-button:hover, a.ui-button-fixed:hover { |
|
481 background:#0078A3 url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png) repeat-x scroll 0 50%; |
|
482 border:1px solid #4bd94b; |
|
483 color:#FFFFFF; |
|
484 } |
|
485 |
|
486 a.ui-button-fixed{ |
|
487 float: left; |
|
488 padding: 0.4em 0.6em 0.8em; |
|
489 text-align: center; |
|
490 width: 145px !important; |
|
491 } |
|
492 |
|
493 div#slider-value-panel{ |
|
494 text-align: center; |
|
495 margin-top: 10px; |
|
496 } |
|
497 |
|
498 div#slider-value-panel span{ |
|
499 padding: 3px; |
|
500 background:#0078A3 url(../script/jquery-ui/css/ui-darkness/images/0078a3_40x100_textures_02_glass_40.png) repeat-x scroll 0 50%; |
|
501 border:1px solid #4bd94b; |
|
502 color:#FFFFFF; |
|
503 font-weight: bolder; |
|
504 } |
|
505 |
|
506 |
|
507 /* |
|
508 Console UI |
|
509 */ |
|
510 #preview-ui-top{ |
|
511 overflow:auto; |
|
512 } |
|
513 |
|
514 #preview-ui-bottom{ |
|
515 overflow:hidden; |
|
516 display: none; |
|
517 } |
|
518 #preview-ui-bottom-header{ |
|
519 background-color: #aeaeae; |
|
520 background-image: url(../images/console-icon.gif); |
|
521 background-repeat: repeat-x; |
|
522 background-position: 0px -28px; |
|
523 } |
|
524 span#Console-Toggle-Button{ |
|
525 height: 9px; |
|
526 width: 15px; |
|
527 float: right; |
|
528 background-repeat: no-repeat; |
|
529 margin : 12px 8px 0px 0px; |
|
530 cursor: hand; |
|
531 } |
|
532 |
|
533 span#Console-Toggle-Button.open{ |
|
534 background-position: 0px 0px; |
|
535 background-image: url(../images/console-close-icon.png); |
|
536 } |
|
537 |
|
538 span#Console-Toggle-Button.open:hover{ |
|
539 background-position: 0px -9px; |
|
540 } |
|
541 |
|
542 span#Console-Toggle-Button.open:active{ |
|
543 background-position: 0px -18px; |
|
544 } |
|
545 |
|
546 |
|
547 span#Console-Toggle-Button.close{ |
|
548 background-position: 0px 0px; |
|
549 background-image: url(../images/console-open-icon.png); |
|
550 } |
|
551 |
|
552 span#Console-Toggle-Button.close:hover{ |
|
553 background-position: 0px -9px; |
|
554 } |
|
555 |
|
556 span#Console-Toggle-Button.close:active{ |
|
557 background-position: 0px -18px; |
|
558 } |
|
559 |
|
560 |
|
561 span#Console-Clear-Button{ |
|
562 height: 16px; |
|
563 width: 39px; |
|
564 float: right; |
|
565 background-image: url(../images/console-clear-button.png); |
|
566 background-repeat: no-repeat; |
|
567 margin : 10px 10px 0px 0px; |
|
568 cursor: hand; |
|
569 } |
|
570 span#Console-Clear-Button:hover{ |
|
571 background-position: -0px -16px; |
|
572 } |
|
573 |
|
574 #preview-ui-bottom-body{ |
|
575 overflow:auto; |
|
576 background-color: #ffffff; |
|
577 display: none; |
|
578 } |
|
579 |
|
580 #preview-ui-bottom-body p{ |
|
581 font-family: "Courier New", Courier, monospace; |
|
582 font-size: 11px; |
|
583 padding: 2px 5px; |
|
584 border-bottom: 1px solid silver; |
|
585 margin: 0px; |
|
586 } |
|
587 |
|
588 #preview-ui-bottom-body p.log{ |
|
589 |
|
590 } |
|
591 |
|
592 #preview-ui-bottom-body p.info{ |
|
593 background-image: url(../images/infoIcon.png); |
|
594 background-repeat: no-repeat; |
|
595 background-position: 5px center; |
|
596 padding-left: 26px; |
|
597 } |
|
598 #preview-ui-bottom-body p.warn{ |
|
599 background: #00ffff url(../images/warningIcon.png); |
|
600 background-repeat: no-repeat; |
|
601 background-position: 5px center; |
|
602 padding-left: 26px; |
|
603 } |
|
604 #preview-ui-bottom-body p.error{ |
|
605 background: #ffffe0 url(../images/errorIcon.png); |
|
606 background-repeat: no-repeat; |
|
607 background-position: 5px center; |
|
608 padding-left: 26px; |
|
609 color: #ff0000; |
|
610 } |
|
611 |
|
612 |
|
613 #preview-ui-bottom-header div{ |
|
614 float: left; |
|
615 margin: 9px; |
|
616 color: #ffffff; |
|
617 font-size: 11px; |
|
618 font-weight: bolder; |
|
619 font-family: "Arial"; |
|
620 } |
|
621 |
|
622 |
|
623 span#wrt-help{ |
|
624 height: 28px; |
|
625 width: 28px; |
|
626 float: right; |
|
627 background-repeat: no-repeat; |
|
628 background-image: url(../images/wrt-help-icon.png); |
|
629 } |
|
630 |
|
631 span#wrt-help:hover{ |
|
632 background-position: -28px 0px; |
|
633 } |