css/calc.css

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 @font-face {
  11     font-family: OpenSans-Light;
  12     src: url("../fonts/OpenSans-Light.ttf");
  13 }
  14
  15 @font-face {
  16     font-family: OpenSans-Regular;
  17     src: url("../fonts/OpenSans-Regular.ttf");
  18 }
  19
  20 @font-face {
  21     font-family: OpenSans-Semibold;
  22     src: url("../fonts/OpenSans-Semibold.ttf");
  23 }
  24
  25 body {
  26     position: absolute;
  27     margin: 0px;
  28     top: 0%;
  29     left: 0%;
  30 }
  31
  32 /* hack for landscape mode in simulator */
  33 @media (orientation: landscape) {
  34   body {
  35     margin: 0px;
  36     overflow: visible;
  37     -webkit-user-select: none;
  38     background-color: "white";
  39     box-shadow: 5px 5px 20px black;
  40     top: 50%;
  41     left: 50%;
  42     position: absolute;
  43     width: 1280px;
  44     height: 720px;
  45     -webkit-box-align: center;
  46     -webkit-box-pack: center;
  47     -webkit-box-orient: vertical;
  48     display: -webkit-box;
  49   /* 320 x 480 */
  50     -webkit-transform: translate(-50%, -50%) scale(0.375, 0.4444);
  51   }
  52 }
  53 /* 730 x 410 */
  54 @media (orientation: landscape) and (min-height: 410px) and (min-width: 730px) {
  55   body { -webkit-transform: translate(-50%, -50%) scale(0.57, 0.57);}
  56 }
  57 /* 800 x 480 */
  58 @media (orientation: landscape) and (min-height: 480px) and (min-width: 800px) {
  59   body { -webkit-transform: translate(-50%, -50%) scale(0.625, 0.6666);}
  60 }
  61 /* 989 x 600 */
  62 @media (orientation: landscape) and (min-width: 600px) and (min-height: 989px) {
  63   body { -webkit-transform: translate(-50%, -50%) scale(0.77266, 0.8333); }
  64 }
  65 /* 1024 x 600 */
  66 @media (orientation: landscape) and (min-height: 600px) and (min-width: 1024px) {
  67   body { -webkit-transform: translate(-50%, -50%) scale(0.8, 0.8333);}
  68 }
  69 /* 1230 x 720 */
  70 @media (orientation: landscape) and (min-height: 720px) and (min-width: 1230px) {
  71   body { -webkit-transform: translate(-50%, -50%) scale(0.9609, 1.0);}
  72 }
  73 /* 1280 x 720 */
  74 @media (orientation: landscape) and (min-height: 720px) and (min-width: 1280px) {
  75   body { -webkit-transform: translate(-50%, -50%) scale(1.0, 1.0);}
  76 }
  77
  78
  79 /* hack for landscape mode in emulator */
  80 /* 320 x 480 */
  81 @media (orientation: portrait) {
  82   body { -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.4444, 0.375) translate(50%, -50%);}
  83 }
  84 /* 410 x 730 */
  85 @media (orientation: portrait) and (min-width: 410px) and (min-height: 730px) {
  86   body { -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.57, 0.57) translate(50%, -50%);}
  87 }
  88 /* 480 x 800 */
  89 @media (orientation: portrait) and (min-width: 480px) and (min-height: 800px) {
  90   body { -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.6666, 0.625) translate(50%, -50%);}
  91 }
  92 /* 989 x 600 */
  93 @media (orientation: portrait) and (min-width: 600px) and (min-height: 989px) {
  94   body { -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.77266, 0.8333) translate(50%, -50%); }
  95 }
  96 /* 600 x 1024 */
  97 @media (orientation: portrait) and (min-width: 600px) and (min-height: 1024px) {
  98   body { -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.8, 0.8333) translate(50%, -50%);}
  99 }
 100 /* 720 x 1230 */
 101 @media (orientation: portrait) and (min-width: 720px) and (min-height: 1230px) {
 102   body { -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(0.9609, 1.0) translate(50%, -50%);}
 103 }
 104 /* 720 x 1280 */
 105 @media (orientation: portrait) and (min-width: 720px) and (min-height: 1280px) {
 106   body { -webkit-transform: translate(-50%, -50%) rotate(90deg) scale(1.0, 1.0) translate(50%, -50%);}
 107 }
 108
 109 sup, sub {
 110     position: relative;
 111     vertical-align: baseline;
 112 }
 113
 114 sup {
 115     font-size: 50%;
 116     bottom: 2ex;
 117 }
 118
 119 sub {
 120     font-size: 50%;
 121     top: 0.8ex;
 122 }
 123
 124 /* Button classes */
 125
 126 .buttonblackshort {
 127     width: 104px;
 128     height: 64px;
 129     color: #ebebe9;
 130     font-family: "OpenSans-Light";
 131     font-size: 36px;
 132     border-style: none;
 133     background-image: url("../images/bt_blackSmall_land.png");
 134     background-color: transparent;
 135     background-repeat: no-repeat;
 136 }
 137
 138 .buttonblackshort:active {
 139     background-image: url("../images/bt_blackSmall_land_press.png");
 140 }
 141
 142 .buttontogglebackgroundA, .buttontogglebackgroundB {
 143     width: 80px;
 144     height: 36px;
 145     font-family: "OpenSans-Light";
 146     font-size: 24px;
 147     background-color: transparent;
 148     background-repeat: no-repeat;
 149 }
 150
 151 .buttontogglebackgroundA {
 152     color: #727272;
 153 }
 154
 155 .buttontogglebackgroundB {
 156     color: #d9e2d0;
 157 }
 158
 159 .switchleftactive {
 160     width: 160px;
 161     height: 36px;
 162     background-image: url("../images/switch_land_left_act.png");
 163 }
 164
 165 .switchrightactive {
 166     width: 160px;
 167     height: 36px;
 168     background-image: url("../images/switch_land_right_act.png");
 169 }
 170
 171 .switchleftactive:active, .switchrightactive:active{
 172     background-image: url("../images/switch_land_press.png");
 173 }
 174
 175 .buttonyellow {
 176     width: 104px;
 177     height: 64px;
 178     color: #ebebe9;
 179     font-family: "OpenSans-Light";
 180     font-size: 36px;
 181     border-style: none;
 182     background-image: url("../images/bt_yellow_land.png");
 183     background-color: transparent;
 184     background-repeat: no-repeat;
 185 }
 186
 187 .buttonyellow:active {
 188     background-image: url("../images/bt_yellow_land_press.png");
 189 }
 190
 191 .buttonred {
 192     width: 104px;
 193     height: 72px;
 194     color: #ebebe9;
 195     font-family: "OpenSans-Light";
 196     font-size: 46px;
 197     border-style: none;
 198     background-image: url("../images/bt_red_land.png");
 199     background-color: transparent;
 200     background-repeat: no-repeat;
 201 }
 202
 203
 204 .buttonred:active {
 205     background-image: url("../images/bt_red_land_press.png");
 206 }
 207
 208 .buttonblack {
 209     width: 104px;
 210     height: 72px;
 211     color: #ebebe9;
 212     font-family: "OpenSans-Light";
 213     font-size: 36px;
 214     border-style: none;
 215     background-image: url("../images/bt_black_land.png");
 216     background-color: transparent;
 217     background-repeat: no-repeat;
 218 }
 219
 220 .buttonblack:active {
 221     background-image: url("../images/bt_black_land_press.png");
 222 }
 223
 224 .buttonwhite {
 225     width: 104px;
 226     height: 72px;
 227     color: #000000;
 228     font-family: "OpenSans-Regular";
 229     font-size: 46px;
 230     border-style: none;
 231     background-image: url("../images/bt_white_land.png");
 232     background-color: transparent;
 233     background-repeat: no-repeat;
 234 }
 235
 236 .buttonwhite:active {
 237     background-image: url("../images/bt_white_land_press.png");
 238 }
 239
 240 .buttonblue {
 241     width: 104px;
 242     height: 72px;
 243     color: #ebebe9;
 244     font-family: "OpenSans-Light";
 245     font-size: 56px;
 246     border-style: none;
 247     background-image: url("../images/bt_blue_land.png");
 248     background-color: transparent;
 249     background-repeat: no-repeat;
 250 }
 251
 252 .buttonblue:active {
 253     background-image: url("../images/bt_blue_land_press.png");
 254 }
 255
 256 .buttonpurple {
 257     width: 104px;
 258     height: 72px;
 259     border-style: none;
 260     background-image: url("../images/bt_purple_land.png");
 261     background-color: transparent;
 262     background-repeat: no-repeat;
 263 }
 264
 265 .buttonpurple:active {
 266     background-image: url("../images/bt_purple_land_press.png");
 267 }
 268
 269 .buttonblueequal {
 270     width: 104px;
 271     height: 156px;
 272     color: #ebebe9;
 273     font-family: "OpenSans-Light";
 274     font-size: 56pt;
 275     border-style: none;
 276     background-image: url("../images/bt_equals_land.png");
 277     background-color: transparent;
 278     background-repeat: no-repeat;
 279 }
 280
 281 .buttonblueequal:active {
 282     background-image: url("../images/bt_equals_land_press.png");
 283 }
 284
 285 .buttonclose {
 286     width: 64px;
 287     height: 64px;
 288     border-style: none;
 289     background-image: url("../images/bt_bin.png");
 290     background-color: transparent;
 291     background-repeat: no-repeat;
 292 }
 293
 294 .buttonclose:active {
 295     background-image: url("../images/bt_bin_press.png");
 296 }
 297
 298 .memoryentrypane {
 299     position: relative;
 300     float: left;
 301     width: 610px;
 302     height: 104px;
 303     top: 12px;
 304     left:10px;
 305 }
 306
 307 .buttonmemory {
 308     position: absolute;
 309     float: left;
 310     left: 10px;
 311     width: 104px;
 312     height: 93px;
 313     color: #727272;
 314     font-family: "OpenSans-Light";
 315     font-size: 36px;
 316     border-style: none;
 317     background-image: url("../images/bt_mem_list_land.png");
 318     background-color: transparent;
 319     background-repeat: no-repeat;
 320 }
 321
 322 .buttonmemory:active {
 323     background-image: url("../images/bt_mem_list_land_press.png");
 324 }
 325
 326 .memorypane {
 327     position: absolute;
 328     background-image: url("../images/bg_memory_slot_land.png");
 329     width: 476px;
 330     height: 92px;
 331     left: 124px;
 332 }
 333
 334 .memory {
 335     position: relative;
 336     float: left;
 337     width: 276px;
 338     height: 45px;
 339 }
 340
 341 .memorytext {
 342     position: relative;
 343     float: left;
 344     width: 268px;
 345     height: 45px;
 346     color: #d9e2d0;
 347     font-family: "OpenSans-Regular";
 348     font-size: 36px;
 349     left: 8px;
 350     top: 6px;
 351     overflow: hidden;
 352     text-overflow: ellipsis;
 353 }
 354
 355 .buttonmemoryclose {
 356     position: absolute;
 357     float: right;
 358     width: 64px;
 359     height: 64px;
 360     left: 294px;
 361     top: 14px;
 362     border-style: none;
 363     background-image: url("../images/clear_memory_disable.png");
 364     background-color: transparent;
 365     background-repeat: no-repeat;
 366 }
 367
 368 .buttonmemorycloseenabled {
 369     position: absolute;
 370     float: right;
 371     width: 64px;
 372     height: 64px;
 373     left: 294px;
 374     top: 14px;
 375     border-style: none;
 376     background-image: url("../images/clear_memory.png");
 377     background-color: transparent;
 378     background-repeat: no-repeat;
 379 }
 380
 381 .buttonmemorycloseenabled:active {
 382     background-image: url("../images/clear_memory_press.png");
 383 }
 384
 385 .memorydivisor {
 386     position: relative;
 387     float: left;
 388     width: 160px;
 389     height: 2px;
 390     background-image: url("../images/LineVertical184Green.png");
 391     background-color: transparent;
 392     background-repeat: no-repeat;
 393 }
 394
 395 .memorydescription {
 396     position: relative;
 397     float: left;
 398     width: 276px;
 399     height: 45px;
 400 }
 401
 402 .memorydescriptiontext {
 403     position: relative;
 404     float: left;
 405     width: 265px;
 406     height: 40px;
 407     color: #d9e2d0;
 408     font-family: "OpenSans-Light";
 409     font-size: 24px;
 410     overflow: hidden;
 411     text-overflow: ellipsis;
 412     left:8px;
 413     top:2px;
 414 }
 415
 416 .memorydescriptioninput {
 417     position: relative;
 418     float: left;
 419     border: none;
 420     color: #d9e2d0;
 421     font-family: "OpenSans-Light";
 422     font-size: 24px;
 423     background-color: transparent;
 424     display: none;
 425 }
 426
 427 .buttonmemoryedit {
 428     position: absolute;
 429     width: 64px;
 430     height: 64px;
 431     left: 394px;
 432     top: 14px;
 433     border-style: none;
 434     background-image: url("../images/pencil_disable.png");
 435     background-color: transparent;
 436     background-repeat: no-repeat;
 437 }
 438
 439 .buttonmemoryeditenabled{
 440     position: absolute;
 441     width: 64px;
 442     height: 64px;
 443     left: 394px;
 444     top: 14px;
 445     border-style: none;
 446     background-image: url("../images/pencil.png");
 447     background-color: transparent;
 448     background-repeat: no-repeat;
 449 }
 450
 451 .buttonmemoryeditenabled:active{
 452     background-image: url("../images/pencil_press.png");
 453 }
 454
 455 /* Backgrounds */
 456
 457 #background
 458 {
 459     position: relative;
 460     float: left;
 461     width: 1280px;
 462     height: 720px;
 463     left: 0px;
 464     top: 0px;
 465     background-image: url("../images/bg_land.png");
 466     background-repeat: no-repeat;
 467 }
 468
 469 #calculationpane {
 470     position: relative;
 471     float: left;
 472     width: 1280px;
 473     height: 720px;
 474     left: 0px;
 475     top: 0px;
 476 }
 477
 478 #calculationpane #LCD_Upper {
 479     position: absolute;
 480     float: left;
 481     width: 1248px;
 482     height: 690px;
 483     left: 16px;
 484     top: 16px;
 485     background-image: url("../images/bg_history_land.png");
 486     background-repeat:no-repeat;
 487     z-index: 2;
 488     overflow: hidden;
 489     }
 490
 491 #calculationpane #LCD_Lower {
 492     position: relative;
 493     float: left;
 494     width: 1248px;
 495     height: 212px;
 496     left: 16px;
 497     top: 16px;
 498     background-image: url("../images/bg_display_land.png");
 499     background-repeat: no-repeat;
 500 }
 501
 502 #calculationpane #keyboard {
 503     position: relative;
 504     float: left;
 505     width: 1248px;
 506     height: 450px;
 507     left: 16px;
 508     top: 44px;
 509     background-repeat: no-repeat;
 510     background-image: url("../images/bg_keyboard_land.png");
 511 }
 512
 513 #calculationpane #keyboard #keyboardleft{
 514     position: relative;
 515     float: left;
 516     width: 512px;
 517     height: 450px;
 518     left: 0px;
 519     top: 0px;
 520 }
 521
 522 #calculationpane #keyboard #keyboardright{
 523     position: relative;
 524     float: right;
 525     width: 732px;
 526     height: 450px;
 527     top: 0px;
 528     left:0px;
 529 }
 530
 531 #calculationpane #keyboard #keyboardsplitter{
 532     position:relative;
 533     width: 4px;
 534     float: left;
 535     height:440px;
 536     top:4px;
 537     left:0px;
 538     background-repeat: no-repeat;
 539     background-image: url("../images/line_keyboard_land.png");
 540 }
 541
 542 #calculationpane #keyboard #keyboardleft #leftmostpane {
 543     position: relative;
 544     float: left;
 545     width: 360px;
 546     height: 400px;
 547     left: 20px;
 548     top: 36px;
 549 }
 550
 551 #calculationpane #keyboard #keyboardleft #centerleftpane {
 552     position: relative;
 553     float: left;
 554     width: 104px;
 555     height: 430px;
 556     left: 40px;
 557     top: 10px;
 558 }
 559
 560 #calculationpane #keyboard #keyboardright #centerrightpane {
 561     position: relative;
 562     float: left;
 563     width: 225px;
 564     height: 330px;
 565     top: 20px;
 566     left: 16px;
 567 }
 568
 569 #calculationpane #keyboard #keyboardright #rightpane {
 570     position: relative;
 571     float: left;
 572     width: 335px;
 573     height: 420px;
 574     left: 40px;
 575     top: 20px;
 576 }
 577
 578 #calculationpane #keyboard #keyboardright #rightmostpane {
 579     position: relative;
 580     float: right;
 581     width: 104px;
 582     height: 420px;
 583     top: 20px;
 584     right:16px;
 585 }
 586
 587 #calculationpane #keyboard #keyboardleft #leftmostpane #statetransition {
 588     position: relative;
 589     width: 360px;
 590     height: 36px;
 591     top:0px;
 592     left:0px;
 593 }
 594
 595 #calculationpane #keyboard #keyboardleft #leftmostpane #statetransition #degradswitch{
 596     position: relative;
 597     float: left;
 598     width: 160px;
 599     height: 36px;
 600 }
 601
 602 #calculationpane #keyboard #keyboardleft #leftmostpane #statetransition #traghypswitch{
 603     position: relative;
 604     float: right;
 605     width: 160px;
 606     height: 36px;
 607     left:6px;
 608 }
 609
 610 #memorypage
 611 {
 612     position: absolute;
 613     float: left;
 614     width: 1280px;
 615     height: 720px;
 616     left: 0px;
 617     top: 0px;
 618     background-image: url("../images/bg_land.png");
 619     background-repeat: no-repeat;
 620 }
 621
 622 #memorypage #memorypane {
 623     position: relative;
 624     float: left;
 625     left:20px;
 626     top: 28px;
 627     width: 1248px;
 628     height: 518px;
 629     background-image: url("../images/bg_memory_list_land.png");
 630     background-repeat: no-repeat;
 631 }
 632
 633 #memorypage #memorypane #logo {
 634     position: relative;
 635     float: left;
 636     width: 244px;
 637     height: 33px;
 638     background-image: url("../images/Logo.png");
 639     background-repeat: no-repeat;
 640 }
 641
 642 .dialogAbuttonPurple{
 643     position:absolute;
 644     width: 201px;
 645     height: 64px;
 646     border-style: none;
 647     background-image: url("../images/bt_dialogA_purple.png");
 648     background-color: transparent;
 649     background-repeat: no-repeat;
 650     font-family: "OpenSans-Light";
 651     font-size: 36px;
 652     color:#EBEBE9;
 653 }
 654
 655 .dialogAbuttonPurple:active{
 656     background-image: url("../images/bt_dialogA_purple_press.png");
 657 }
 658
 659 #memorypage #memoryclearall {
 660     position: relative;
 661     float: left;
 662     left: 20px;
 663     top: 14px;
 664     width: 201px;
 665     height: 64px;
 666     }
 667
 668 .dialogAbuttonBlack{
 669     position:absolute;
 670     width: 201px;
 671     height: 64px;
 672     border-style: none;
 673     background-image: url("../images/bt_dialogA_black.png");
 674     background-color: transparent;
 675     background-repeat: no-repeat;
 676     font-family: "OpenSans-Light";
 677     font-size: 36px;
 678     color:#EBEBE9;
 679 }
 680
 681 .dialogAbuttonBlack:active{
 682     background-image: url("../images/bt_dialogA_black_press.png");
 683 }
 684
 685 #memorypage #memoryClose {
 686     position: relative;
 687     float: right;
 688     right: 24px;
 689     top: 14px;
 690     width: 201px;
 691     height: 64px;
 692     }
 693
 694 #memorypage #memorypagelcd{
 695     position: relative;
 696     float: left;
 697     width: 1248px;
 698     height: 144px;
 699     left: 20px;
 700     top:16px;
 701     background-image: url("../images/bg_display_memory_land.png");
 702     background-repeat: no-repeat;
 703 }
 704
 705 #memorypage #memorypagelcd #mpclosebutton #mplcdbuttonclose {
 706     position: relative;
 707     left: 28px;
 708 }
 709
 710 #memorypage #memorypagelcd #mpmainentry {
 711     position: absolute;
 712     right: 16px;
 713     left: 150px;
 714     top:10px;
 715     font-family: "OpenSans-Semibold";
 716     font-size: 84px;
 717     text-align: right;
 718 }
 719
 720 #memorypage #memorypagelcd #mpopenhistorybutton{
 721     position: absolute;
 722     float: left;
 723     width: 130px;
 724     height: 56px;
 725     left: 4px;
 726     top: 82px;
 727 }
 728
 729 /* Upper LCD display */
 730
 731 .jspTrack {
 732     background: #c4ccbc;
 733     height: 670px;
 734 }
 735
 736 .jspDrag {
 737     background: #000000;
 738     border-radius:10px;
 739 }
 740
 741 .jspVerticalBar {
 742     width: 10px;
 743 }
 744
 745 #LCD_Upper #calculationhistory {
 746     float: left;
 747     left: 3px;
 748     top: 8px;
 749     overflow: visible;
 750 }
 751
 752 #LCD_Upper #historyverticalline  {
 753     position: relative;
 754     float: right;
 755     width: 2px;
 756     height: 680px;
 757     right: 37px;
 758     top:4px;
 759     background-image: url("../images/line_history_vert_land.png");
 760     background-repeat: no-repeat;
 761 }
 762
 763 .thickdivisor {
 764     position: relative;
 765     float: left;
 766     width: 1206px;
 767     height: 4px;
 768     left:1px;
 769     background-image: url("../images/line_history_hor4px_land.png");
 770     background-repeat: no-repeat;
 771 }
 772
 773 .calculationpane {
 774     position: relative;
 775     float: left;
 776     width: 1210px;
 777     max-height: 108px;
 778     min-height: 68px;
 779     overflow: hidden;
 780 }
 781
 782 .calculation {
 783     position: relative;
 784     float: left;
 785     width: 1210px;
 786 }
 787
 788 .calculationtext{
 789     position: relative;
 790     float: right;
 791     color: #000000;
 792     font-family: "OpenSans-Regular";
 793     font-size: 36px;
 794     right:16px;
 795     top:5px;
 796     text-align: right;
 797 }
 798
 799 .shortverticaldivisor {
 800     position: relative;
 801     float: right;
 802     width: 2px;
 803     height: 72px;
 804     top:-72px;
 805     left: -1px;
 806     background-image: url("../images/line_history_vert_land.png");
 807     background-repeat: no-repeat;
 808 }
 809
 810 .emptycalculationpane {
 811     position: relative;
 812     float: left;
 813     width: 30px;
 814     height: 19px;
 815 }
 816
 817 .thindivisor {
 818     position: relative;
 819     float: left;
 820     width: 1206px;
 821     height: 2px;
 822     left:1px;
 823     background-image: url("../images/line_history_hor2px_land.png");
 824     background-repeat: no-repeat;
 825 }
 826
 827 .resultpane {
 828     position: relative;
 829     float: left;
 830     width: 1210px;
 831     height: 82px;
 832 }
 833
 834 .result {
 835     position: relative;
 836     float: left;
 837     width: 1210px;
 838     height: 82px;
 839 }
 840
 841 .resulttext{
 842     position: relative;
 843     float: right;
 844     color: #000000;
 845     font-family: "OpenSans-Semibold";
 846     font-size: 56px;
 847     right:16px;
 848 }
 849
 850 .longverticaldivisor {
 851     position: relative;
 852     float: right;
 853     width: 2px;
 854     height: 86px;
 855     top:-86px;
 856     left: -1px;
 857     background-image: url("../images/line_history_vert_land.png");
 858     background-repeat: no-repeat;
 859 }
 860
 861 .historyresulttomainentry {
 862     position: relative;
 863     float: left;
 864     top: 15px;
 865     left: 8px;
 866     width: 30px;
 867     height: 38px;
 868 }
 869
 870 .buttonhistoryresulttomainentry {
 871     position: relative;
 872     float: left;
 873     width: 14px;
 874     height: 11px;
 875     border-style: none;
 876     background-image: url("../images/Button_Arrow_Green_Down.png");
 877     background-color: transparent;
 878     background-repeat: no-repeat;
 879 }
 880
 881 .historyresulttomemory {
 882     position: relative;
 883     float: left;
 884     top: 15px;
 885     left: 8px;
 886     width: 29px;
 887     height: 38px;
 888 }
 889
 890 .buttonhistoryresulttomemory {
 891     position: relative;
 892     float: left;
 893     width: 14px;
 894     height: 11px;
 895     border-style: none;
 896     background-image: url("../images/Button_Arrow_Green_Right.png");
 897     background-color: transparent;
 898     background-repeat: no-repeat;
 899 }
 900
 901 /* Lower LCD display */
 902
 903 #LCD_Lower #upperpane {
 904     position: relative;
 905     float: left;
 906     width: 1248px;
 907     height: 72px;
 908 }
 909
 910 #LCD_Lower #upperpane #closebutton {
 911     position: relative;
 912     float: left;
 913     width: 112px;
 914     height: 72px;
 915     left: 0px;
 916 }
 917
 918 #LCD_Lower #upperpane #closebutton #buttonclosecurrentformula {
 919     position: relative;
 920     float: left;
 921     left: 28px;
 922 }
 923
 924 .currentformulashort {
 925     position: relative;
 926     float: right;
 927     width: 1134px;
 928     height: 62px;
 929     right: 16px;
 930     top: 7px;
 931     font-family: "OpenSans-Regular";
 932     font-size: 44px;
 933     text-align: right;
 934     color:#000000;
 935     overflow: hidden;
 936 }
 937
 938 .currentformulalong {
 939     position: relative;
 940     float: left;
 941     width: 1134px;
 942     height: 72px;
 943     right: 16px;
 944     top: 7px;
 945     font-family: "OpenSans-Regular";
 946     font-size: 44px;
 947     text-align: right;
 948     color:#000000;
 949     overflow: hidden;
 950 }
 951
 952 #LCD_Lower #upperpane #verticaldivider {
 953     position: relative;
 954     float: left;
 955     width: 1px;
 956     height: 30px;
 957     background-image: url("../images/LineVertical30Black.png");
 958     background-repeat: no-repeat;
 959 }
 960
 961 #LCD_Lower #horizontaldivider {
 962     position: relative;
 963     float: left;
 964     width: 1240px;
 965     height: 2px;
 966     left: 4px;
 967     background-image: url("../images/line_display_land.png");
 968     background-repeat: no-repeat;
 969 }
 970
 971 #LCD_Lower #lowerpane {
 972     position: relative;
 973     float: left;
 974     width: 1248px;
 975     height: 138px;
 976 }
 977
 978 #LCD_Lower #lowerpane #closebutton {
 979     position: relative;
 980     float: left;
 981     width: 112px;
 982     height: 76px;
 983 }
 984
 985 #LCD_Lower #lowerpane #closebutton #buttonclosemainentry {
 986     position: relative;
 987     float: left;
 988     left: 28px;
 989 }
 990
 991 .mainentryshort {
 992     position: relative;
 993     float: right;
 994     width: 1098px;
 995     height: 114px;
 996     right: 16px;
 997     top: 9px;
 998     font-family: "OpenSans-Semibold";
 999     font-size: 84px;
1000     text-align: right;
1001     color: #000000;
1002     overflow: hidden;
1003 }
1004
1005 #LCD_Lower #lowerpane #verticaldivider {
1006     position: relative;
1007     float: left;
1008     width: 1px;
1009     height: 60px;
1010     background-image: url("../images/LineVertical60Black.png");
1011     background-repeat: no-repeat;
1012 }
1013
1014 #LCD_Lower #lowerpane #buttonmainentrymemoryadd {
1015     position: relative;
1016     left: 6px;
1017     top: 20px;
1018     border-style: none;
1019     background-image: url("../images/Button_Arrow_Black.png");
1020     background-color: transparent;
1021     background-repeat: no-repeat;
1022 }
1023
1024 /* Buttons and their backgrounds */
1025
1026 /* Exponential and logarithmic function buttons */
1027
1028 #expandlog {
1029     position: relative;
1030     width: 360px;
1031     height: 150px;
1032     left: 0px;
1033     top: 52px;
1034 }
1035
1036 #buttonlog {
1037     position: relative;
1038     left: 0px;
1039     top: 0px;
1040 }
1041
1042 #buttonlog2 {
1043     position: relative;
1044     left: 20px;
1045     top: 0px;
1046 }
1047
1048 #buttonln {
1049     position: relative;
1050     left: 40px;
1051     top: 0px;
1052 }
1053
1054 #button10x {
1055     position: relative;
1056     left: 0px;
1057     top: 20px;
1058 }
1059
1060 #button2x {
1061     position: relative;
1062     left: 20px;
1063     top: 20px;
1064 }
1065
1066 #buttonex {
1067     position: relative;
1068     left: 40px;
1069     top: 20px;
1070 }
1071
1072 /* Trigonometric function buttons */
1073
1074 #trigonometric {
1075     position: relative;
1076     width: 360px;
1077     height: 150px;
1078     left:0px;
1079     top:32px;
1080 }
1081
1082 #buttonsin {
1083     position: relative;
1084     left: 0px;
1085     top: 0px;
1086 }
1087
1088 #buttoncos {
1089     position: relative;
1090     left: 20px;
1091     top: 0px;
1092 }
1093
1094 #buttontan {
1095     position: relative;
1096     left: 40px;
1097     top: 0px;
1098 }
1099
1100 #buttonarcsin {
1101     position: relative;
1102     left: 0px;
1103     top: 20px;
1104 }
1105
1106 #buttonarccos {
1107     position: relative;
1108     left: 20px;
1109     top: 20px;
1110 }
1111
1112 #buttonarctan {
1113     position: relative;
1114     left: 40px;
1115     top: 20px;
1116 }
1117
1118 /* Hyperbolic function buttons */
1119
1120 #hyperbolic {
1121     position: relative;
1122     width: 360px;
1123     height: 150px;
1124     left: 0px;
1125     top: 32px;
1126     display: none;
1127 }
1128
1129 #buttonsinh {
1130     position: relative;
1131     left: 0px;
1132     top: 0px;
1133 }
1134
1135 #buttoncosh {
1136     position: relative;
1137     left: 20px;
1138     top: 0px;
1139 }
1140
1141 #buttontanh {
1142     position: relative;
1143     left: 40px;
1144     top: 0px;
1145 }
1146
1147 #buttonasinh {
1148     position: relative;
1149     left: 0px;
1150     top: 20px;
1151 }
1152
1153 #buttonacosh {
1154     position: relative;
1155     left: 20px;
1156     top: 20px;
1157 }
1158
1159 #buttonatanh {
1160     position: relative;
1161     left: 40px;
1162     top: 20px;
1163 }
1164
1165 /* State transition toggle buttons */
1166
1167 #statetransition {
1168     position: relative;
1169     width: 370px;
1170     height: 210px;
1171     left: 10px;
1172     top: 10px;
1173 }
1174
1175 #buttondeg {
1176     position: relative;
1177     width:80px;
1178     height:36px;
1179     text-align: center;
1180 }
1181
1182 #buttonrad {
1183     position: absolute;
1184     left: 80px;
1185     width:80px;
1186     height:36px;
1187     top: 0px;
1188     text-align: center;
1189 }
1190
1191 #buttontrig {
1192     position: relative;
1193     width:80px;
1194     height:36px;
1195     text-align: center;
1196     }
1197
1198 #buttonhyp {
1199     position: absolute;
1200     left: 80px;
1201     width:80px;
1202     height:36px;
1203     top:0px;
1204     text-align: center;
1205 }
1206
1207 /* Power and root function buttons */
1208
1209 #powerandroot {
1210     position: relative;
1211     width: 104px;
1212     height: 148px;
1213     left: 0px;
1214     top: 10px;
1215 }
1216
1217 #buttonsquare {
1218     position: relative;
1219     left: 0px;
1220     top: 0px;
1221 }
1222
1223 #buttonsquareroot {
1224     position: relative;
1225     left: 0px;
1226     top: 20px;
1227 }
1228
1229 /* Nth power and nth root function buttons */
1230
1231 #nthpowerandnthroot {
1232     position: relative;
1233     width: 104px;
1234     height: 168px;;
1235     left: 0px;
1236     top: 10px;
1237 }
1238
1239 #buttonnthpower {
1240     position: relative;
1241     left: 0px;
1242     top: 20px;
1243 }
1244
1245 #buttonnthroot {
1246     position: relative;
1247     left: 0px;
1248     top: 40px;
1249 }
1250
1251 /* Center right pane buttons */
1252 #buttonclear {
1253     position: relative;
1254     left: 0px;
1255     top: -6px;
1256 }
1257
1258 #buttonmemorylist {
1259     position: relative;
1260     left: 0px;
1261     top: 0px;
1262     color: #ebebe9;
1263     font-family: "OpenSans-Light";
1264     font-size: 36px;
1265 }
1266
1267 #buttondelete {
1268     position: relative;
1269     left: 0px;
1270     top: 0px;
1271 }
1272
1273 #buttonmemorize {
1274     position: relative;
1275     left: 14px;
1276     top: 0px;
1277     color: #000000;
1278     font-family: "OpenSans-Light";
1279     font-size: 36px;
1280 }
1281
1282 #buttonleftparenthesis {
1283     position: relative;
1284     left: 0px;
1285     top: 12px;
1286 }
1287
1288 #buttonrightparenthesis {
1289     position: relative;
1290     left: 14px;
1291     top: 12px;
1292 }
1293
1294 #buttonfactorial {
1295     position: relative;
1296     left: 0px;
1297     top: 24px;
1298 }
1299
1300 #buttoninverse {
1301     position: relative;
1302     left: 14px;
1303     top: 24px;
1304 }
1305
1306 #buttonpi {
1307     position: relative;
1308     left: 0px;
1309     top: 36px;
1310 }
1311
1312 #buttonpercentage {
1313     position: relative;
1314     left: 14px;
1315     top: 36px;
1316 }
1317
1318 /* Right pane buttons */
1319
1320 #button7 {
1321     position: relative;
1322     left: 0px;
1323     top: 12px;
1324 }
1325
1326 #button8 {
1327     position: relative;
1328     left: 8px;
1329     top: 12px;
1330 }
1331
1332 #button9 {
1333     position: relative;
1334     left: 16px;
1335     top: 12px;
1336 }
1337
1338 #buttondivide {
1339     position: relative;
1340     left: 8px;
1341     top: 0px;
1342 }
1343
1344 #button4 {
1345     position: relative;
1346     left: 0px;
1347     top: 24px;
1348 }
1349
1350 #button5 {
1351     position: relative;
1352     left: 8px;
1353     top: 24px;
1354 }
1355
1356 #button6 {
1357     position: relative;
1358     left: 16px;
1359     top: 24px;
1360 }
1361
1362 #buttonmultiply {
1363     position: relative;
1364     left: 16px;
1365     top: 0px;
1366 }
1367
1368 #button1 {
1369     position: relative;
1370     left: 0px;
1371     top: 36px;
1372 }
1373
1374 #button2 {
1375     position: relative;
1376     left: 8px;
1377     top: 36px;
1378 }
1379
1380 #button3 {
1381     position: relative;
1382     left: 16px;
1383     top: 36px;
1384 }
1385
1386 #buttonsubtract {
1387     position: relative;
1388     left: 0px;
1389     top: 20px;
1390 }
1391
1392 #button0 {
1393     position: relative;
1394     left: 0px;
1395     top: 40px;
1396 }
1397
1398 #button00 {
1399     position: relative;
1400     left: 12px;
1401     top: 34px;
1402 }
1403
1404 #buttondot {
1405     position: relative;
1406     left: 8px;
1407     top: 48px;
1408 }
1409
1410 #buttonadd {
1411     position: relative;
1412     left: 0px;
1413     top: 32px;
1414 }
1415
1416 /* Rightmost pane buttons */
1417
1418 #buttonplusminus {
1419     position: relative;
1420     left: 16px;
1421     top: 48px;
1422 }
1423
1424 #buttonequal {
1425     position: relative;
1426     left: 0px;
1427     top: 44px;
1428 }
1429
1430 /* Hide the grammar div. */
1431
1432 #grammar {
1433     display: none;
1434 }
1435
1436
1437 /* open/close history button */
1438 .historybutton {
1439     position:absolute;
1440     width: 130px;
1441     height: 56px;
1442     border-style: none;
1443     background-image: url("../images/bt_history_exp_land.png");
1444     background-color: transparent;
1445     background-repeat: no-repeat;
1446 }
1447
1448 .historybutton:active{
1449     background-image: url("../images/bt_history_exp_land_press.png");
1450 }
1451
1452 .historybuttonclose {
1453     position:absolute;
1454     width: 130px;
1455     height: 56px;
1456     border-style: none;
1457     background-image: url("../images/bt_history_contr_land.png");
1458     background-color: transparent;
1459     background-repeat: no-repeat;
1460 }
1461
1462 .historybuttonclose:active{
1463     background-image: url("../images/bt_history_contr_land_press.png");
1464 }
1465
1466 #LCD_Upper #closehistorybutton{
1467     position: absolute;
1468     float: left;
1469     width: 130px;
1470     height: 56px;
1471     left: 4px;
1472     top: 629px;
1473     z-index: 3;
1474 }
1475
1476 #LCD_Lower #lowerpane #openhistorybutton{
1477     position: absolute;
1478     float: left;
1479     width: 130px;
1480     height: 56px;
1481     left: 4px;
1482     top: 76px;
1483 }
1484
1485 @
1486 -webkit-keyframes historyAnimationOpen {
1487 0% {
1488     height: 0px;
1489     }
1490 100% {
1491     height: 390px;
1492     }
1493 }
1494
1495 @-webkit-keyframes historyAnimationClose {
1496     0% {
1497         height: 390px;
1498     }
1499
1500     100% {
1501         height: 0px;
1502     }
1503 }
1504
1505 /* clear all memory slots confirmation dialog */
1506 #clearconfirmationdialog #clearconfirmationdialogbg
1507 {
1508     position: absolute;
1509     width: 688px;
1510     height: 362px;
1511     left: 296px;
1512     top: 179px;
1513     background-image: url("../images/bg_dialog.png");
1514     background-repeat: no-repeat;
1515 }
1516
1517 #clearconfirmationdialog #dialogheading{
1518     position: relative;
1519     width: 660px;
1520     height: 56px;
1521     left: 16px;
1522     top: 20px;
1523     color: #EBEBE9;
1524     font-family: "OpenSans-Semibold";
1525     font-size: 36px;
1526 }
1527
1528 #clearconfirmationdialog #dialogcontent {
1529     position: relative;
1530     float: left;
1531     width: 680px;
1532     height: 270px;
1533     left:5px;
1534     top:30px;
1535     background-repeat: no-repeat;
1536     font-family: "OpenSans-Light";
1537     font-size: 36px;
1538     color:#EBEBE9;
1539 }
1540
1541 #clearconfirmationdialog #dialogcontent #dialogcontenttext{
1542     position: relative;
1543     width:660px;
1544     height: 150px;
1545     left: 16px;
1546     top: 50px;
1547     color: #EBEBE9;
1548     font-family: "OpenSans-Light";
1549     font-size: 36px;
1550 }
1551
1552 .dialogBpurplebutton{
1553     position:absolute;
1554     width: 264px;
1555     height: 64px;
1556     border-style: none;
1557     background-image: url("../images/bt_dialogB_purple.png");
1558     background-color: transparent;
1559     background-repeat: no-repeat;
1560     font-family: "OpenSans-Light";
1561     font-size: 36px;
1562     color:#EBEBE9;
1563 }
1564
1565 .dialogBblackbutton{
1566     position:absolute;
1567     width: 264px;
1568     height: 64px;
1569     border-style: none;
1570     background-image: url("../images/bt_dialogB_blacks.png");
1571     background-color: transparent;
1572     background-repeat: no-repeat;
1573     font-family: "OpenSans-Light";
1574     font-size: 36px;
1575     color:#EBEBE9;
1576 }
1577
1578 .dialogBpurplebutton:active{
1579     background-image: url("../images/bt_dialogB_purple_press.png");
1580 }
1581
1582 .dialogBblackbutton:active{
1583     background-image: url("../images/bt_dialogB_black_press.png");
1584 }
1585
1586 #clearconfirmationdialog #dialogcontent #dialogokbutton{
1587     position: relative;
1588     float: left;
1589     width: 264px;
1590     height: 64px;
1591     left: 20px;
1592 }
1593
1594 #clearconfirmationdialog #dialogcontent #dialogcancelbutton{
1595     position: relative;
1596     float: right;
1597     width: 264px;
1598     height: 64px;
1599     right: 20px;
1600 }
1601
1602 /* memory note editor page */
1603
1604 #memorynoteeditor{
1605     position: absolute;
1606     float: left;
1607     width: 1280px;
1608     height: 720px;
1609     left: 0px;
1610     top: 0px;
1611     background-image: url("../images/bg_land.png");
1612     background-repeat: no-repeat;
1613 }
1614
1615 #memorynoteeditor #mnememorypane{
1616     position: relative;
1617     top:20px;
1618     left:316px;
1619     height:94px;
1620     width:648px;
1621     background-image: url("../images/bg_memory_note.png");
1622     background-repeat: no-repeat;
1623 }
1624
1625 #memorynoteeditor #mnememorypane #mnebutton{
1626     position: relative;
1627     top:18px;
1628     left:12px;
1629     color:#EBEBE9;
1630     font-family: "OpenSans-Light";
1631     font-size: 36px;
1632 }
1633
1634 #memorynoteeditor #mnememorypane #mnetext{
1635     position:absolute;
1636     color:#ffffff;
1637     left:122px;
1638     width:533px;
1639     height:45px;
1640     top:8px;
1641 }
1642
1643 #memorynoteeditor #mnememorypane #mnedescription{
1644     position:absolute;
1645     color:#000000;
1646     left:122px;
1647     top:45px;
1648     width:533px;
1649     height:45px;
1650 }
1651
1652 #memorynoteeditor #mnememorypane #mnedescriptioninput{
1653     position:absolute;
1654     color:#000000;
1655     left:118px;
1656     top:49px;
1657     width:480px;
1658     height:36px;
1659     background-color: transparent;
1660     font-size: 20px;
1661     border: hidden;
1662 }
1663
1664 #memorynoteeditor #mnememorypane #mnedescriptiondelete{
1665     position:absolute;
1666     left:603px;
1667     top:48px;
1668     width:40px;
1669     height:40px;
1670     background-image: url("../images/clear_text.png");
1671     background-repeat: no-repeat;
1672     background-color: transparent;
1673 }
1674
1675 #memorynoteeditor #mnememorypane #mnedescriptiondelete:active{
1676     background-image: url("../images/clear_text_press.png");
1677 }
1678
1679 #memorynoteeditor #mnesave{
1680     position: absolute;
1681     left:316px;
1682     top:144px;
1683     width:201px;
1684     height:64px;
1685 }
1686
1687 #memorynoteeditor #mnecancel{
1688     position: relative;
1689     float:right;
1690     right:316px;
1691     top: 144px;
1692     width:201px;
1693     height:64px;
1694 }
1695
1696 .buttonlefticon{
1697     position: relative;
1698     height: 26px;
1699     width: 26px;
1700     float:left;
1701     left: 10px;
1702     top:10px;
1703 }
1704
1705 .buttonrighticon{
1706     position: relative;
1707     height: 26px;
1708     width: 26px;
1709     top:0px;
1710     right: 20px;
1711     float:right;
1712     top: 10px;
1713 }
1714
1715 .buttonrighttext{
1716     position:relative;
1717     float:right;
1718     right:5px;
1719 }
1720
1721 .buttonlefttext{
1722     position:relative;
1723     width: 50px;
1724     float:left;
1725     left:5px;
1726     top:-2px;
1727 }
1728
1729 #mnebuttondownarrow{
1730     position: relative;
1731     height: 26px;
1732     width: 26px;
1733     float:left;
1734     top:30px;
1735     left:10px;
1736 }
1737
1738 #wrapper {
1739         position:absolute;
1740         top:5px; left:0px;
1741         width:1232px;
1742         height: 680px;
1743         overflow: visible;
1744 }
1745
1746 #scroller {
1747         position:absolute;
1748         width:100%;
1749         padding:0;
1750 }
1751
1752 .dialogbackground
1753 {
1754     position: absolute;
1755     float: left;
1756     width: 1280px;
1757     height: 720px;
1758     left: 0px;
1759     top: 0px;
1760     background-image: url("../images/bg_land.png");
1761     background-repeat: no-repeat;
1762     opacity: 0.5;
1763 }
1764
1765 /**
1766  *
1767  * Vertical Scrollbar
1768  *
1769  */
1770 .customScrollbarV {
1771     position:absolute;
1772     z-index:110;
1773     width:8px;bottom:7px;top:2px;right:1px
1774 }
1775
1776 .customScrollbarV > div {
1777     position:absolute;
1778     z-index:100;
1779     width:100%;
1780
1781     background:black;
1782     box-sizing:border-box;
1783     border-radius:4px;
1784 }
1785
1786 /* license page */
1787
1788 #licensebtnl {
1789     position: absolute;
1790     top: 640px;
1791     left: 580px;
1792     width: 40px;
1793     height: 40px;
1794     text-align: center;
1795     line-height: 40px;
1796     cursor: pointer;
1797     -webkit-border-radius: 40px;
1798     border: solid 3px #dddddd;
1799     opacity: 0.3;
1800     color: #dddddd;
1801     font: 35px Arial, Helvetica, sans-serif;
1802 }
1803
1804 #licensebtnl:active {
1805     opacity: 1.0;
1806 }
1807
1808 #licensepage {
1809     position: absolute;
1810     width: 1280px;
1811     height: 720px;
1812     left: 0px;
1813     top: 0px;
1814     background: -webkit-gradient(linear, left top, right top, from(#3f4140), to(#1d2021));
1815     z-index: 99;
1816 }
1817
1818 #licensetext {
1819     width: 98.5%;
1820     height: 88%;
1821     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #c4ccbc));
1822     -webkit-border-radius: 12px;
1823     border-radius: 12px;
1824     box-shadow: inset 1px 1px 2px 1px black;
1825     margin-bottom: 2px;
1826     padding-left: 10px;
1827     padding-bottom: 10px;
1828     overflow: hidden;
1829     cursor: move;
1830 }
1831
1832 #licensescroll {
1833     position: relative;
1834     font: 25px/100% Arial, Helvetica, sans-serif;
1835     text-align: center;
1836 }
1837
1838 .licensebtn {
1839     position: absolute;
1840     color: #d7d7d7;
1841     border: solid 1px #333;
1842     text-align: center;
1843     text-decoration: none;
1844     font: 50px/100% Arial, Helvetica, sans-serif;
1845     text-shadow: 0 1px 1px rgba(0,0,0,.3);
1846     -webkit-border-radius: 12px;
1847     border-radius: 12px;
1848     background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
1849     height: 64px;
1850     width: 100px;
1851     line-height: 60px;
1852     cursor: pointer;
1853     box-shadow: 2px 2px 14px #000;
1854 }
1855
1856 .licensebtn:hover {
1857     background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
1858 }
1859
1860 .licensebtn:active {
1861     color: #666;
1862     background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
1863 }
1864
1865 #licensebtnq {
1866     left: 440px;
1867     width: 400px;
1868 }
1869
1870 /* help dialog */
1871
1872 .helpdialog {
1873     position: absolute;
1874     top: 0%;
1875     left: 0%;
1876     width: 100%;
1877     height: 100%;
1878     background-color: rgba(0,0,0,0);
1879     color: white;
1880     font-family: Sans;
1881     visibility: hidden;
1882 }
1883
1884 .helpdialog .column1 {
1885     position: relative;
1886     float: left;
1887     width: 50%;
1888 }
1889
1890 .helpdialog .column2 {
1891     position: relative;
1892     float: right;
1893     width: 50%;
1894 }
1895
1896 .helpdialog.shown {
1897     visibility: visible;
1898     -webkit-transition: background-color 0.5s;
1899     background-color: rgba(0,0,0,.33);
1900     z-index: 99;
1901 }
1902
1903 .helpdialog .inner {
1904     position: absolute;
1905     top: 10%;
1906     left : 8%;
1907     height: 65%;
1908     width: 80%;
1909     border: 20px solid #131516;
1910     background-color: #2a2b2a;
1911     padding: 10px;
1912     opacity: 0;
1913 }
1914
1915 .helpdialog.shown .inner {
1916     -webkit-transition: opacity 0.5s;
1917     opacity: 1;
1918 }
1919
1920 .helpdialog .inner .contents {
1921     font-family: Arial;
1922     font-size: 20px;
1923     color: #ffffff;
1924     cursor: default;
1925 }
1926
1927 .helpdialog .inner .contents .black {
1928     color: #000000;
1929     font-family: "OpenSans-Light";
1930     font-size: 26pt;
1931     line-height: 72px;
1932 }
1933
1934 .helpdialog .inner .contents .white {
1935     color: #ebebe9;
1936     font-family: "OpenSans-Light";
1937     font-size: 36px;
1938     line-height: 72px;
1939 }
1940
1941 .helpdialog .inner .contents .white2 {
1942     color: #ebebe9;
1943     font-family: "OpenSans-Light";
1944     font-size: 36px;
1945     line-height: 64px;
1946 }
1947
1948 .helpdialog .inner .contents .exampleclose {
1949     width: 64px;
1950     height: 64px;
1951     border: 2px solid white;
1952     background-image: url("../images/clear_memory_disable.png");
1953     background-color: black;
1954     background-repeat: no-repeat;
1955 }
1956
1957 .helpdialog .inner .contents .exampleedit {
1958     width: 64px;
1959     height: 64px;
1960     border: 2px solid white;
1961     background-image: url("../images/pencil_disable.png");
1962     background-color: black;
1963     background-repeat: no-repeat;
1964 }
1965
1966 .helpdialog .inner .close {
1967     position: absolute;
1968     width: 60px;
1969     height: 60px;
1970     top: -7%;
1971     left: 96%;
1972     font-family: Sans;
1973     font-weight: 900;
1974     font-size: 90px;
1975     text-align: center;
1976     border: solid 10px #131516;
1977     background-color: #131516;
1978     -webkit-border-radius: 60px;
1979     line-height: 45px;
1980     cursor: pointer;
1981     color: #dddddd;
1982 }
1983
1984 .helpdialog .inner .close:active {
1985     color: #ffffff;
1986 }
1987
1988 .helplaunch {
1989     position: absolute;
1990     width: 40px;
1991     height: 40px;
1992     text-align: center;
1993     line-height: 40px;
1994     cursor: pointer;
1995     -webkit-border-radius: 40px;
1996     border: solid 3px #dddddd;
1997     color: #dddddd;
1998     opacity: 0.3;
1999     font: 35px Arial, Helvetica, sans-serif;
2000 }
2001
2002 #home_help {
2003     top: 640px;
2004     left: 700px;
2005 }
2006
2007 #home_help:active {
2008     opacity: 1;
2009 }
2010
2011 button[disabled] {
2012     opacity: 0.5;
2013 }