mypackage_wrt/preview/css/style.css
changeset 42 20be4dd42b12
equal deleted inserted replaced
41:315255cd1aef 42:20be4dd42b12
       
     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 }