web/ripple.css

   1 /*
   2  *  Copyright 2011 Research In Motion Limited.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 /* ------------------------------>
  17     Global */
  18
  19 html, body {
  20     margin: 0 !important;
  21     padding: 0 !important;
  22     border: 0 !important;
  23     width : 100%;
  24     height : 100%;
  25     overflow-y: auto;
  26     overflow-x: hidden;
  27 }
  28
  29 input, textarea, keygen, select, button, isindex, datagrid {
  30     font-size: 1em;
  31     margin-left: 0;
  32     margin-right: 0;
  33     resize: none;
  34 }
  35
  36 .logo {
  37     background-size: 40%;
  38     background-repeat: no-repeat;
  39     position: absolute;
  40     left: 395px;
  41     top: 8px;
  42     width: 200px;
  43     height: 70px;
  44 }
  45
  46 .beta {
  47     -webkit-transform: rotate(-35deg);
  48     -moz-transform: rotate(-35deg);
  49     -ms-transform: rotate(-35deg);
  50     -o-transform: rotate(-35deg);
  51     transform: rotate(-35deg);
  52     position: absolute;
  53     left: 390px;
  54     top: 7px;
  55 }
  56
  57 .main {
  58     font-size: 12px !important;
  59     -webkit-user-select: none;
  60     -moz-user-select: none;
  61     -ms-user-select: none;
  62     user-select: none;
  63 }
  64
  65 /* TODO: better css for this specificity */
  66 .main a {
  67     text-decoration: underline;
  68     outline: none;
  69     cursor: pointer;
  70 }
  71
  72 .main img { border: 0; margin: 0; padding: 0; }
  73
  74 .main table, .main tr, .main td, .main th {
  75     border: 0;
  76 }
  77
  78 .main table {
  79     font-size: 1.00em;
  80  }
  81
  82 .main select {
  83     padding: 0.4em 1em !important;
  84 }
  85
  86 .main input[type^=text], .main input[type^=number], .main textarea {
  87     -webkit-appearance: none;
  88     -moz-appearance: none;
  89     padding: 0.4em 1em !important;
  90 }
  91
  92 .main option {
  93     background-color: transparent;
  94 }
  95
  96 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
  97     outline: none;
  98 }
  99
 100 .main input[type^=checkbox] {
 101     margin: 6px 10px;
 102     padding: 0;
 103 }
 104
 105 .main label {
 106     padding: 0.4em 0.5em 0.4em 0;
 107 }
 108
 109 .main button:hover, .main select, .main input[type^=submit]:hover, .main input[type^=checkbox]:hover {
 110     cursor: pointer;
 111 }
 112
 113 .h1, .main h1 { font-size: 1.25em; font-weight: bold; }
 114
 115 .h2, .main h2, h3, .main h3 { font-size: 1.07em; font-weight: bold; }
 116
 117 .h4, .main h4 { font-size: 1em; font-weight: normal; }
 118
 119 .irrelevant { display: none; }
 120
 121 .text-is-selectable {
 122     -webkit-user-select: text;
 123     -moz-user-select: text;
 124     -ms-user-select: text;
 125     user-select: text;
 126 }
 127
 128 section, header, footer, aside, nav { display: block; }
 129
 130 /* ------------------------------>
 131     Top Section */
 132
 133 .top-content{
 134     margin: 0 auto;
 135     position: relative;
 136     width: 1px;
 137 }
 138
 139 .top-content img{
 140     position: absolute;
 141     top: 0;
 142     left: -160px;
 143     width: 200px;
 144 }
 145
 146 .irrelevant {
 147     display: none;
 148 }
 149
 150 /* ------------------------------>
 151     Tizen Logo */
 152 .tizen-logo {
 153     margin: 0 auto;
 154     top: 35px;
 155     position: relative;
 156     background-repeat: no-repeat;
 157     background-size: 100%;
 158     height: 36px;
 159     width: 301px;
 160 }
 161
 162 /* ------------------------------>
 163     Middle/Device Wrapper Section */
 164
 165 .middle {
 166     margin-left: 0;
 167     top: 50px;
 168     position: relative;
 169     width:100%;
 170     height:100%;
 171 }
 172
 173 .viewport-wrapper {
 174     -webkit-border-radius: 5px;
 175     -moz-border-radius: 5px;
 176     border-radius: 5px;
 177 }
 178
 179 .device-wrapper {
 180     position: relative;
 181     padding: 28px 28px 45px 28px;
 182     margin: 0 42px;
 183 }
 184
 185 #document {
 186     background: white;
 187     border: 0 none;
 188     width: inherit;
 189     height: inherit;
 190 }
 191
 192 .device-wrapper-landscape {
 193     padding: 28px 28px 28px 45px;
 194 }
 195
 196 /* ------------------------------>
 197     Panel (left/right) Section */
 198
 199 section.right, section.left{
 200     position: absolute;
 201     top: 14px;
 202     max-height: 100%;
 203     min-height: 26px;
 204     padding: 0;
 205     width: 344px;
 206 }
 207
 208 .top {
 209     position: absolute;
 210     margin: inherit auto inherit auto;
 211     top: 0;
 212 }
 213
 214 section.right { right: 0; }
 215
 216 section.left {
 217     left: 0;
 218     -moz-user-select: none;
 219     -webkit-user-select: none;
 220     -ms-user-select: none;
 221     user-select:none;
 222 }
 223
 224 .sortable > section:not(.ui-box-open):hover {
 225     opacity: 0.9;
 226 }
 227
 228 .ui-box {
 229     margin: 0;
 230     z-index: 50;
 231     position: relative;
 232     padding: 0 2px 0 2px;
 233 }
 234
 235 .ui-box-open {
 236     background-image: none !important;
 237     padding: 0 2px 2px 2px;
 238 }
 239
 240 .range-label-right {
 241     padding: 4px 0 0 0.75em;
 242     float: right;
 243     font-weight: bold;
 244 }
 245
 246 .range-label-left {
 247     margin-top: 1px;
 248     right: 150px;
 249     font-weight: bold;
 250     position: absolute;
 251 }
 252
 253 .info > h3 {
 254     margin-bottom: 0.25em;
 255 }
 256
 257 .panel-label {
 258     width: 40%;
 259     float: left;
 260     position: relative;
 261     top: 0.4em;
 262 }
 263
 264 .panel-bug-textarea {
 265     width: 90%;
 266 }
 267
 268 #info{
 269     overflow: auto;
 270 }
 271
 272 .info{
 273     padding: 0.5em 8px 1em 8px;
 274     margin: 0;
 275     word-wrap: break-word;
 276 }
 277
 278 .info-header{
 279     padding: 0;
 280     position: relative;
 281     cursor: pointer;
 282 }
 283
 284 .info section > span{
 285     font-style: normal;
 286     font-weight: bold;
 287     display: inline;
 288     padding-right: 8px;
 289 }
 290
 291 #preferences-list {
 292     overflow: auto ;
 293     max-height: 300px;
 294 }
 295
 296 .preferences-count {
 297     float: right;
 298     font-size: 1.08em;
 299     padding-top: .5em;
 300 }
 301
 302 .preferences-note{
 303     margin-top: .5em;
 304     float: right;
 305     clear: right;
 306 }
 307
 308 .preferences-table td {
 309     width: 35%;
 310     vertical-align: top;
 311 }
 312
 313 .preferences-table th {
 314     text-align: left;
 315 }
 316
 317 .preferences-table td:nth-child(2), .preferences-table th:nth-child(2) {
 318     width: 70%;
 319     word-break: break-all;
 320 }
 321
 322 /* ------------------------------>
 323     Panel UI */
 324
 325 .collapse-handle {
 326     padding: 5px 9px;
 327 }
 328
 329 .drag-handle:hover {
 330     opacity: 0.75;
 331 }
 332
 333 .drag-handle:active {
 334     opacity: 1.0;
 335 }
 336
 337 .drag-handle{
 338     position: absolute;
 339     z-index: 900;
 340     right: 7px;
 341     top: 4px;
 342     opacity: 0.4;
 343     cursor: pointer;
 344 }
 345
 346 .ui-sortable-highlight {
 347     height: 26px;
 348     margin: 5px;
 349     opacity: 0.9;
 350 }
 351
 352 /* ------------------------------>
 353     overlay UI */
 354
 355 .overlay {
 356     z-index: 10000;
 357     width: 100%;
 358     height: 100%;
 359     display: none;
 360     overflow-y: auto;
 361     background-color: white;
 362 }
 363
 364 .overlay-dialog {
 365     z-index: 10001;
 366     position: absolute;
 367     display: none;
 368     -webkit-box-orient: horizontal;
 369     -webkit-box-pack: center;
 370     -webkit-box-align: center;
 371     -moz-box-orient: horizontal;
 372     -moz-box-pack: center;
 373     -moz-box-align: center;
 374     -ms-box-orient: horizontal;
 375     -ms-box-pack: center;
 376     -ms-box-align: center;
 377     overflow-y: auto;
 378     background: rgba(0, 0, 0, 0.25);
 379 }
 380
 381 .overlay-dialog-bottomCenter {
 382     -webkit-box-orient: vertical;
 383     -webkit-box-pack: end;
 384     -moz-box-orient: vertical;
 385     -moz-box-pack: end;
 386     -ms-box-orient: vertical;
 387     -ms-box-pack: end;
 388 }
 389
 390 .overlay-dialog-topCenter {
 391     -webkit-box-orient: vertical;
 392     -webkit-box-pack: start;
 393     -moz-box-orient: vertical;
 394     -moz-box-pack: start;
 395     -ms-box-orient: vertical;
 396     -ms-box-pack: start;
 397 }
 398
 399 .overlay-dialog-middleCenter {
 400     -webkit-box-orient: vertical;
 401     -webkit-box-pack: center;
 402     -moz-box-orient: vertical;
 403     -moz-box-pack: center;
 404     -ms-box-orient: vertical;
 405     -ms-box-pack: center;
 406 }
 407
 408 .overlay-dialog-wrapper-full {
 409     height: 100%;
 410     width: 100%;
 411 }
 412
 413 .overlay-dialog-wrapper-large {
 414     height: 80%;
 415     width: 80%;
 416 }
 417
 418 .overlay-dialog-wrapper-medium {
 419     height: 50%;
 420     width: 50%;
 421 }
 422
 423 .overlay-dialog-wrapper-small {
 424     height: 20%;
 425     width: 20%;
 426 }
 427
 428 .overlay-dialog-wrapper-tall {
 429     height: 80%;
 430 }
 431
 432 .overlay-dialog-wrapper {
 433     color: #FFF;
 434     -webkit-border-radius: 8px;
 435     -moz-border-radius: 8px;
 436     border-radius: 8px;
 437     background: rgba(0,0,0,1.0);
 438 }
 439
 440 .overlay-dialog-box {
 441     padding: 5%;
 442     -webkit-border-radius: 8px;
 443     -moz-border-radius: 8px;
 444     border-radius: 8px;
 445     background: rgba(0,0,0,1.0);
 446 }
 447
 448 .overlay-dialog-title {
 449     margin: 0 5px;
 450     overflow: hidden;
 451     background: rgba(16,16,16,1.0);
 452 }
 453
 454 .overlay-dialog-message {
 455     width: 100%;
 456     max-height: 50%;
 457     display: block;
 458     overflow-y: auto;
 459     overflow-x: hidden;
 460 }
 461
 462 .overlay-dialog-buttons {
 463     padding-top: 10px;
 464     width:100%;
 465     text-align: center;
 466 }
 467
 468 .overlay-dialog-buttons > input{
 469     -webkit-border-radius: 4px;
 470     -moz-border-radius: 4px;
 471     border-radius: 4px;
 472     margin: 5px;
 473 }
 474
 475 .overlay-menu {
 476     z-index: 1000;
 477     position: absolute;
 478     display: none;
 479     overflow-y: auto;
 480     background: rgba(0, 0, 0, 0.25);
 481 }
 482
 483 .overlay-menu-box {
 484     position: absolute;
 485     bottom: 0;
 486     width: 100%;
 487     max-height: 80%;
 488     max-width: 50%;
 489     padding: 3% 0.5% 3% 0.5%;
 490     overflow-x: hidden;
 491     overflow-y: auto;
 492     color: #FFF;
 493     -webkit-border-top-right-radius: 8px;
 494     border-top-right-radius: 8px;
 495     background: rgba(0,0,0,1.0);
 496 }
 497
 498 .overlay-menu-box::-webkit-scrollbar {
 499     width: 0.50ex;
 500     -webkit-border-radius: 1ex;
 501     -moz-border-radius: 1ex;
 502     border-radius: 1ex;
 503 }
 504
 505 .overlay-menu-box::-webkit-scrollbar-thumb {
 506     background: #0f55ad;
 507     -webkit-border-radius: 1ex;
 508     -moz-border-radius: 1ex;
 509     border-radius: 1ex;
 510 }
 511
 512 .overlay-menu-item, .overlay-menu-item-default {
 513     width: 100%;
 514     display:block;
 515     font-size: 1.65em;
 516 }
 517
 518 .overlay-menu-item:hover, .overlay-menu-item-default:hover {
 519     background-color: #0f55ad;
 520     cursor: pointer;
 521 }
 522
 523 .overlay-menu-item-default {
 524     background-color: #1F1F1F;
 525 }
 526
 527 .overlay-menu-buttons > table {
 528     color: #FFF;
 529 }
 530
 531 /* ------------------------------>
 532     Notifications */
 533
 534 #panel-notification {
 535     position: absolute;
 536     width: 40%;
 537     min-height: 100px;
 538     top: 20%;
 539     left: 30%;
 540     padding: .5em 1em;
 541     font-size: 0.92em;
 542     -webkit-box-shadow: 0 1px 10px rgb(0,0,0);
 543     -moz-box-shadow: 0 1px 10px rgb(0,0,0);
 544     box-shadow: 0 1px 10px rgb(0,0,0);
 545     z-index: 1100;
 546 }
 547
 548 .panel-notification-closebtn {
 549     position: relative;
 550     float: right;
 551     z-index: 999;
 552     cursor: pointer;
 553     padding: 3px 5px;
 554     -webkit-border-radius: 6px;
 555     -moz-border-radius: 6px;
 556     border-radius: 6px;
 557 }
 558
 559 .panel-notification-closebtn:hover {
 560     text-decoration: underline;
 561 }
 562
 563 #panel-notification-text {
 564     word-wrap: break-word;
 565 }
 566
 567 #notification-info {
 568     margin-left : -15px;
 569 }
 570
 571 #progress-bar-box {
 572     width: 100px;
 573     height: 8px;
 574     float: left;
 575     border: 1px solid;
 576     margin-top: 2px;
 577     overflow: hidden;
 578 }
 579
 580 .progress-bar {
 581     height: 8px;
 582     background-color: #80AC27;
 583 }
 584
 585 #progress-bar-value {
 586     width: 35px;
 587     float: left;
 588     margin-left: 2px;
 589 }
 590
 591 .remove-notification-btn {
 592     width: 100%;
 593     border-radius: 5px;
 594     color: #80AC27;
 595     font-weight: bold;
 596 }
 597
 598 #remove-all-notifications-btn {
 599     width: 100%;
 600     margin-top: 10px;
 601     border-radius: 5px;
 602     color: #80AC27;
 603     font-weight: bold;
 604 }
 605
 606 /* ------------------------------>
 607     UI.Devices */
 608
 609 #layout-portrait, #layout-landscape {
 610     display: inline-block;
 611     width:16px;
 612     height:28px;
 613     cursor: pointer;
 614     padding: 0 10px 0 10px;
 615 }
 616
 617 #layout-landscape {
 618     -webkit-transform: rotate(-90deg);
 619     -moz-transform: rotate(-90deg);
 620     -o-transform: rotate(-90deg);
 621     -ms-transform: rotate(-90deg);
 622     transform: rotate(-90deg);
 623 }
 624
 625 .layout-selected {
 626     opacity: 1.0;
 627 }
 628
 629 .layout-not-selected {
 630     opacity: 0.4;
 631 }
 632
 633 /* ------------------------------>
 634     UI.Geo */
 635
 636 #geo-map {
 637     position: relative;
 638     width: 316px;
 639     height: 316px;
 640     border: 2px solid #999;
 641     overflow: hidden;
 642 }
 643
 644 #geo-map-container {
 645     width: 316px;
 646     height: 316px;
 647     z-index: 0;
 648 }
 649
 650 #geo-map-img {
 651     top: -80px;
 652     left: -80px;
 653     position: relative;
 654 }
 655
 656 #geo-map-arrow {
 657     width: 32px;
 658     height: 32px;
 659     background: url(images/compass.png);
 660     float: left;
 661     margin-top: 5px;
 662 }
 663
 664 #geo-map-direction-label {
 665     margin-left: 35px;
 666     z-index: 800;
 667 }
 668
 669 #geo-map-direction {
 670     position: absolute;
 671     top: 10px;
 672     left: 10px;
 673     width: 90px;
 674     font-weight: bold;
 675     font-size: 1.5em;
 676     color: #000;
 677     background-color: rgba(180,180,180,0.7);
 678     -webkit-border-radius: 5px;
 679     -moz-border-radius: 5px;
 680     border-radius: 5px;
 681     padding: 5px;
 682     z-index: 800;
 683 }
 684
 685 #geo-map-marker {
 686     position: absolute;
 687     top: 158px;
 688     left: 143px;
 689     background: url(images/arrow.png);
 690     width: 22px;
 691     height: 30px;
 692     z-index: 800;
 693 }
 694
 695 .geo-map-zoom-btn {
 696     font-weight: bold;
 697 }
 698
 699 .geo-map-zoom-controls {
 700     position: relative;
 701     margin-top: 10px;
 702 }
 703
 704 .geo-map-zoomlevel {
 705     position: absolute;
 706     right: 0;
 707     top: 10px;
 708 }
 709
 710 #clear-route-btn {
 711     position: absolute;
 712     height: 22px;
 713     top: 3px;
 714     right: 33px;
 715     z-index: 800;
 716 }
 717
 718 #set-route-btn {
 719     position: absolute;
 720     top: 1px;
 721     right: 3px;
 722     z-index: 800;
 723 }
 724
 725 #geo-map-zoom-decrease {
 726     width: 49px;
 727     position: absolute;
 728     bottom: 1px;
 729     left: 1px;
 730     z-index: 800;
 731 }
 732
 733 #geo-map-zoom-increase {
 734     position: absolute;
 735     bottom: 29px;
 736     left: 1px;
 737     z-index: 800;
 738 }
 739
 740 #route-control {
 741     width: 320px;
 742     height: 70px;
 743     border: 2px solid #999;
 744     border-top-width: 0px;
 745     text-align: center;
 746 }
 747
 748 #route-control button {
 749     height:20px;
 750     width:40px;
 751     margin-top:25px;
 752 }
 753
 754 #play-route-speed-label {
 755     margin-top: 1px;
 756     left: 22px;
 757     position: absolute;
 758     font-weight: bold;
 759 }
 760
 761 #play-route-speed {
 762     left: 55px;
 763     width: 260px;
 764     position: absolute;
 765 }
 766
 767
 768 /* ------------------------------>
 769     UI.WidgetConfig */
 770
 771 .ui-accordion-icons .ui-accordion-header a {
 772     padding: .25em .5em !important;
 773 }
 774
 775 #widget-config div > h3:hover {
 776     cursor: pointer;
 777 }
 778
 779 #widget-config h3 a{
 780     text-decoration: none !important;
 781 }
 782 #widget-config h3 a:hover {
 783     text-decoration: none !important;
 784 }
 785
 786 .configPass, .configFail {
 787     height: auto !important;
 788 }
 789
 790 .configPass:hover, .configFail:hover {
 791     opacity: 0.6;
 792 }
 793
 794 .config-accordion-node-content-value {
 795     padding-bottom: .5em;
 796 }
 797
 798 .config-attributes-name-value {
 799     padding-bottom: .5em;
 800 }
 801
 802 .config-accordion-node-content-attributes-title {
 803     padding-bottom: .25em;
 804     font-style: italic;
 805 }
 806
 807 .config-attributes-message {
 808     font-style: italic;
 809 }
 810
 811 .config-accordion-node-content-value-message > span,
 812 .config-accordion-node-content-value > span,
 813 .config-accordion-node-content-attributes-title {
 814     padding-right: 1em;
 815     font-weight: bold;
 816 }
 817
 818 .config-accordion-node-content-value-message {
 819     margin: 0.5em 0;
 820 }
 821
 822
 823 /* ------------------------------>
 824     UI.Information Table */
 825
 826 #information-sub-container {
 827     line-height: 20px;
 828 }
 829
 830 .information-widgeticon {
 831     float: right;
 832     clear: both;
 833 }
 834
 835 .information-widgetname {
 836     font-weight: bold;
 837 }
 838
 839 #emulator-booting {
 840     position: absolute;
 841     width: 100%;
 842     top: 0;
 843     left: 0;
 844     height: 100%;
 845     z-index: 1200;
 846     background: #FFFFFF url("images/load2.gif") center no-repeat;
 847 }
 848
 849 /* ------------------------------>
 850     Panel Table */
 851
 852 .panel-table {
 853     width: 100%;
 854     border-spacing:0;
 855 }
 856
 857 .panel-table th {
 858     text-align: left;
 859 }
 860
 861 .panel-table td input[type^=text], .panel-table td input[type^=number] {
 862     width: 100px;
 863 }
 864
 865 .panel-table td:nth-child(2) {
 866     width: 50%;
 867     text-align: right;
 868 }
 869
 870 .panel-table td {
 871     vertical-align: middle;
 872     height: 30px;
 873     border-width:0;
 874 }
 875
 876
 877 /* ------------------------------>
 878     UI.Platform */
 879
 880 #change-platform {
 881     width: 100%;
 882     margin: 0.5em 0;
 883 }
 884
 885 /* ------------------------------>
 886     Device Wrapper */
 887
 888 .device-wrapper {
 889     background: #1e1e1e;
 890     border: solid rgba(204, 204, 204, 0.9);
 891     -webkit-box-shadow: 0 0 15px rgba(153, 153, 153, 0.75);
 892     -moz-box-shadow: 0 0 15px rgba(153, 153, 153, 0.75);
 893     box-shadow: 0 0 15px rgba(153, 153, 153, 0.75);
 894 }
 895
 896 .viewport-wrapper {
 897     background: url(images/ui-bg-hashed.png) repeat;
 898     border: 2px solid rgba(204, 204, 204, 0.75);
 899 }
 900 /* ------------------------------>
 901     Panel collapse icons */
 902
 903 .right-panel-collapse, .left-panel-collapse {
 904     position: fixed;
 905     top: 0;
 906     margin-left: 0;
 907     margin-top: 0;
 908     opacity: 0.8;
 909     cursor: pointer;
 910     z-index: 499;
 911 }
 912
 913 .right-panel-collapse:hover, .left-panel-collapse:hover {
 914     opacity: 0.5;
 915 }
 916
 917 .right-panel-collapse:active, .left-panel-collapse:active {
 918     opacity: 1;
 919 }
 920
 921 .left-panel-collapse {
 922     top: 10px;
 923     left: 0;
 924 }
 925
 926 .right-panel-collapse {
 927     right: 345px;
 928 }
 929
 930 #options-menu {
 931     font-size: 1.2em;
 932     padding: 5px;
 933     width: 250px;
 934     top: 30px;
 935     right: 20px;
 936     position: absolute;
 937     -moz-box-shadow: 0 0 15px rgba(153, 153, 153, 0.75);
 938     -webkit-box-shadow: 0 0 15px rgba(153, 153, 153, 0.75);
 939     box-shadow: 0 0 15px rgba(153, 153, 153, 0.75);
 940 }
 941
 942 #options-menu-build-warning {
 943     color: #C44;
 944     display: none;
 945     text-align: center;
 946     font-variant:small-caps;
 947 }
 948
 949 #options-window {
 950     width: 100%;
 951     height: 100%;
 952     position: absolute;
 953     top: 0;
 954     display: none;
 955     opacity: 0;
 956     z-index: 950;
 957 }
 958
 959 /* ------------------------------>
 960     Error Window */
 961
 962 .error-window {
 963     z-index: 10000;
 964     width: 100%;
 965     height: 100%;
 966     position: absolute;
 967     top: 0;
 968     text-align:center;
 969     vertical-align: middle;
 970     display: none;
 971     background-color: #EFEFEF;
 972 }
 973
 974 .error-dialog {
 975     z-index: 10001;
 976     position: absolute;
 977     top: 150px;
 978     opacity: 1;
 979     width: 500px;
 980     height: auto;
 981     text-align: center;
 982     vertical-align: middle;
 983     margin: 0 auto;
 984     display: none;
 985     font-family: Helevetica, Arial;
 986 }
 987
 988 .error-dialog > button {
 989     margin: 0 .25em;
 990 }
 991
 992 .error-text h2 {
 993     font-size: 1.25em;
 994 }
 995
 996 .error-text p {
 997     font-size: 1.17em;
 998     text-align: left;
 999 }
1000
1001 /* ------------------------------>
1002     EULA Window */
1003
1004 .eula-window {
1005     z-index: 9000;
1006     width: 100%;
1007     height: 100%;
1008     position: absolute;
1009     top: 0;
1010     text-align:center;
1011     vertical-align: middle;
1012     display: none;
1013 }
1014
1015 .eula-dialog {
1016     z-index: 9001;
1017     position: absolute;
1018     top: 200px;
1019     padding: 20px 0 20px 130px;
1020     opacity: 1;
1021     width: 450px;
1022     height: auto;
1023     text-align: center;
1024     vertical-align: middle;
1025     margin: 0 auto;
1026     display: none;
1027 }
1028
1029     .eula-logo {
1030         background: url("images/ripplelogo_large.png") no-repeat 10px 10px;
1031         background-size: 100% 100%;
1032         position: absolute;
1033         width: 122px;
1034         height: 200px;
1035         top: 0;
1036         left: 0;
1037     }
1038
1039     .eula-dialog > button {
1040         margin: 0 .25em;
1041     }
1042
1043     .eula-text h2 {
1044         font-size: 1.25em;
1045     }
1046
1047     .eula-text p {
1048         font-size: 1.17em;
1049     }
1050
1051     .eula-text div {
1052         font-size: 1em;
1053         width: 90%;
1054         margin: 0 auto;
1055         height: 250px;
1056         overflow-y: auto;
1057         background-color: #e1e1e1;
1058         color: #1e1e1e;
1059         text-align: left;
1060     }
1061
1062
1063 /* ------------------------------>
1064     First Run Window */
1065 .wrong-browser {
1066     width: 540px;
1067     height: 100%;
1068     top: 150px;
1069     text-align: left;
1070     vertical-align: middle;
1071     display: none;
1072     margin: 0 auto;
1073     font-family: Arial, Verdana, Tahoma, Helevetica, Sans;
1074 }
1075
1076 .first-run-window {
1077     z-index: 9000;
1078     width: 100%;
1079     height: 100%;
1080     position: absolute;
1081     top: 0;
1082     text-align:center;
1083     vertical-align: middle;
1084     display: none;
1085 }
1086
1087 .platform-select-dialog {
1088     z-index: 9001;
1089     position: absolute;
1090     top: 250px;
1091     padding: 20px 0 20px 130px;
1092     opacity: 1;
1093     width: 450px;
1094     height: auto;
1095     text-align: center;
1096     vertical-align: middle;
1097     margin: 0 auto;
1098     display: none;
1099 }
1100
1101 .platform-select-logo {
1102     background: url("images/tizenlogo_large.png") no-repeat 10px 10px;
1103     background-size: 100% 100%;
1104     position: absolute;
1105     width: 122px;
1106     height: 200px;
1107     top: 0;
1108     left: 0;
1109 }
1110
1111 .platform-select-dialog > button {
1112     margin: 0 .25em;
1113 }
1114
1115 .platform-select-text h2 {
1116     font-size: 1.25em;
1117 }
1118
1119 .platform-select-text p {
1120     font-size: 1.17em;
1121 }
1122
1123
1124 /* ------------------------------>
1125     Main Scrolling */
1126
1127 ::-webkit-scrollbar {
1128     width: 0.5em;
1129     height: 0.5em;
1130     background-color: #bbbbbb;
1131     opacity: 0.5;
1132 }
1133
1134 ::-webkit-resizer {
1135     -webkit-border-radius: 4px;
1136     -moz-border-radius: 4px;
1137     border-radius: 4px;
1138     background-color: #333333;
1139 }
1140
1141 ::-webkit-scrollbar-thumb {
1142     min-height: 0.8em;
1143     min-width: 0.8em;
1144     margin: 0 .25em;
1145     -webkit-border-radius: 4px;
1146     -moz-border-radius: 4px;
1147     border-radius: 4px;
1148     background-color: #aaaaaa;
1149 }
1150
1151 ::-webkit-scrollbar-thumb:hover {
1152     background-color: #444444;
1153 }
1154
1155 ::-webkit-scrollbar-thumb:active {
1156     background-color: #555555;
1157 }
1158
1159 /* ------------------------------>
1160     Emulator UI Scrolling  */
1161
1162 #document::-webkit-scrollbar {
1163     width: 0;
1164     height: 0;
1165 }
1166
1167 #document::-webkit-scrollbar-thumb {
1168     min-height: 0;
1169     min-width: 0;
1170 }
1171
1172 /* ------------------------------>
1173     Omni Bar */
1174
1175 .omni-bar {
1176     position: fixed;
1177     width: 100%;
1178     min-width:780px;
1179     padding: 9px 0 8px 10px;
1180     z-index: 999;
1181     background-color: rgba(32, 41, 49, 1);
1182 }
1183
1184 .omni-bar .ui-icon-container {
1185     opacity: 1;
1186     display: inline-block;
1187     top: .3em;
1188     position: relative;
1189     padding: .3em .3em .1em .3em;
1190     cursor: pointer;
1191 }
1192
1193 .omni-bar .ui-icon-container:hover {
1194     opacity: 0.75;
1195 }
1196
1197 .omni-bar .ui-icon-container:active {
1198     opacity: 0.4;
1199 }
1200
1201 .omni-bar .ui-icon-container-left {
1202     margin-left: 0.25em;
1203 }
1204
1205 .omni-bar .ui-icon-container-right {
1206     margin-right: 0.25em;
1207 }
1208
1209 .omni-bar .ui-icon {
1210     display: inline-block;
1211 }
1212
1213 .omni-bar .options {
1214     float: right;
1215     margin-right: 16px;
1216 }
1217
1218 .progress {
1219     font-size: 1.5em;
1220     font-weight: bold;
1221     letter-spacing: 2px;
1222     float: right;
1223     padding-right: 5px;
1224 }
1225
1226 .omni-bar input {
1227     width: 60%;
1228     min-width:100px;
1229     height: 14px;
1230 }
1231
1232 /* ------------------------------>
1233     About Dialog */
1234 .about-logo {
1235     background-size: 100%;
1236     background-repeat: no-repeat;
1237     height: 70px;
1238     width: 263px;
1239 }
1240
1241 /* ------------------------------>
1242     fieldset */
1243
1244 fieldset {
1245     border-radius: 5px;
1246     margin: 5px 0;
1247 }
1248
1249 .not-ready {
1250     opacity: 0.2;
1251 }
1252
1253 .cap-text {
1254     text-transform: capitalize;
1255 }
1256
1257 /* ------------------------------>
1258     jQuery ToolTip Plugin CSS */
1259
1260 #tooltip {
1261     position: absolute;
1262     z-index: 1001;
1263     padding: 0.5em 1em;
1264     height: auto;
1265     max-width: 400px;
1266     word-wrap: break-word;
1267     font-size: 12px;
1268     cursor: pointer;
1269 }
1270
1271 #tooltip h3, #tooltip div { margin: 0; }
1272
1273
1274
1275 /* ------------Tenfour css------------- */
1276 .stage {
1277    height: 100%;
1278    background-size: 11px 11px;
1279    background-color: rgb(215,217,211);
1280    background-image: -webkit-repeating-linear-gradient(left,
1281         rgba(128,128,128,.1),
1282         transparent 1px,
1283         transparent 12px),
1284    -webkit-repeating-linear-gradient(top,
1285         rgba(128,128,128,.1),
1286         transparent 1px,
1287         transparent 12px);
1288    background-attachment: fixed;
1289 }
1290
1291 .PanelButtonStyle {
1292     font-size:12px;
1293     text-align:center;
1294     color:#424242;
1295     border:1px solid #a1a1a1;
1296     line-height:12px;
1297     padding:8px 20px 7px 20px;
1298     background-color: #fbfbfb;
1299     background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#ececec));
1300     background-image: -webkit-linear-gradient(top, #fbfbfb, #ececec);
1301     background-image: -moz-linear-gradient(top, #fbfbfb, #ececec);
1302     background-image: -ms-linear-gradient(top, #fbfbfb, #ececec);
1303     background-image: -o-linear-gradient(top, #fbfbfb, #ececec);
1304     background-image: linear-gradient(to bottom, #fbfbfb, #ececec);
1305     -webkit-border-radius: 6px;
1306     -moz-border-radius: 6px;
1307     border-radius: 6px;
1308     -webkit-background-clip: padding-box;
1309     text-decoration:none;
1310 }
1311
1312 .PanelButtonStyle:hover {
1313     color:#55555;
1314     background-color: #fbfbfb;
1315     border-color:#424242;
1316     background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#777777));
1317     background-image: -webkit-linear-gradient(top, #cccccc, #777777);
1318 }
1319
1320
1321 .PanelButtonStyle:active {
1322     color:#e0e0e0;
1323 }
1324
1325 .PanelButtonStyle:disabled {
1326     color: #d3d3d3;
1327 }
1328
1329 .PanelButtonStyle[disabled]:hover {
1330     color: #d3d3d3;
1331     border: 1px solid #a1a1a1;
1332     background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#ececec));
1333     background-image: -webkit-linear-gradient(top, #fbfbfb, #ececec);
1334 }
1335
1336 .urlBox {
1337     -webkit-border-radius: 5px;
1338     -moz-border-radius: 5px;
1339     border-radius: 5px;
1340     -webkit-box-shadow: inset 0 4px 2px -3px #999;
1341     -moz-box-shadow: inset 0 4px 2px -3px #999;
1342     box-shadow: inset 0 4px 2px -3px #999;
1343     border: none;
1344     padding:2px 5px 2px 6px;
1345     height:26px;
1346     width:300px;
1347     color:#a8a8a8;
1348     font-size:13px;
1349     font-family:sans-serif;
1350     font-style:italic;
1351 }
1352
1353 input.urlBox:focus {
1354     color:#424242;
1355 }
1356
1357
1358 .mainButtonContainer {
1359     -webkit-border-radius: 6px;
1360     -moz-border-radius: 6px;
1361     border-radius: 6px;
1362     min-width:300px;
1363     height:26px;
1364     padding:3px;
1365     background:#252f38;
1366     -webkit-box-shadow:  inset 1px 1px 0 0 #1d252c, inset -1px -1px 0 0 #414b53;
1367     -moz-box-shadow:  inset 1px 1px 0 0 #1d252c, inset -1px -1px 0 0 #414b53;
1368     box-shadow:  inset 1px 1px 0 0 #1d252c, inset -1px -1px 0 0 #414b53;
1369     position:relative;}
1370
1371 .button {
1372     height:26px;
1373     margin:0;
1374     padding:5px 10px 7px 10px;
1375     text-shadow: -1px -1px 1px #555;
1376     position:relative;
1377     float:left;
1378     color:#cbcbcb;
1379     font: 10px Sans-Serif;
1380     white-space: nowrap;
1381     vertical-align: middle;
1382     border:0;
1383     -webkit-box-shadow:  inset 1px 1px 0 0 #8a959d, inset -1px -1px 0 0 #262c2f ;
1384     -moz-box-shadow:  inset 1px 1px 0 0 #8a959d, inset -1px -1px 0 0 #262c2f ;
1385     box-shadow:  inset 1px 1px 0 0 #8a959d, inset -1px -1px 0 0 #262c2f ;
1386     background-color: #596674;
1387     background-image: -webkit-gradient(linear, left top, left bottom, from(#596674), to(#3f4852)); /* Saf4+, Chrome */
1388     background-image: -webkit-linear-gradient(top, #596674, #3f4852); /* Chrome 10+, Saf5.1+, iOS 5+ */
1389     cursor: pointer;}
1390
1391 .button:hover, .button:focus {
1392     -webkit-box-shadow:  inset 1px 1px 0 0 #7999a4, inset -1px -1px 0 0 #1e333b;
1393     -moz-box-shadow:  inset 1px 1px 0 0 #7999a4, inset -1px -1px 0 0 #1e333b;
1394     box-shadow:  inset 1px 1px 0 0 #7999a4, inset -1px -1px 0 0 #1e333b;
1395     background-color: #4a6c7e;
1396     background-image: -webkit-gradient(linear, left top, left bottom, from(#4a6c7e), to(#324f5c)); /* Saf4+, Chrome */
1397     background-image: -webkit-linear-gradient(top, #4a6c7e, #324f5c); /* Chrome 10+, Saf5.1+, iOS 5+ */}
1398
1399 .button:active {
1400     -webkit-box-shadow:  inset 2px 0 1px 0 rgba(0,0,0,.4), inset  -2px 0 1px 0 rgba(0,0,0,.4);
1401     -moz-box-shadow:  inset 2px 0 1px 0 rgba(0,0,0,.4), inset  -2px 0 1px 0 rgba(0,0,0,.4);
1402     box-shadow:  inset 2px 0 1px 0 rgba(0,0,0,.4), inset  -2px 0 1px 0 rgba(0,0,0,.4);
1403     padding:6px 9px 6px 11px;
1404     background-color: #4a6c7e;
1405     background-image: -webkit-gradient(linear, left top, left bottom, from(#4a6c7e), to(#324f5c)); /* Saf4+, Chrome */
1406     background-image: -webkit-linear-gradient(top, #4a6c7e, #324f5c); /* Chrome 10+, Saf5.1+, iOS 5+ */}
1407
1408 .cornerButton  {
1409     -webkit-border-radius: 5px 5px 5px 5px;
1410     -moz-border-radius: 5px 5px 5px 5px;
1411     border-radius: 5px 5px 5px 5px;
1412 }
1413
1414 .leftMostButton  {-webkit-border-radius: 5px 0 0 5px;}
1415 .rightMostButton {-webkit-border-radius: 0 5px 5px 0;}
1416
1417 .leftMostButton.button:active {
1418     -webkit-box-shadow:  none;
1419     -webkit-box-shadow:  inset  -2px 0 1px 0 rgba(0,0,0,.4);}
1420
1421 .rightMostButton.button:active {
1422     -webkit-box-shadow:  none;
1423     -webkit-box-shadow:  inset 2px 0 1px 0 rgba(0,0,0,.4);}
1424
1425 .titleBar {
1426     border-bottom:1px solid #9b9fa1;
1427     position:relative;
1428     height:20px;
1429     width:320px;
1430     background-image: -webkit-linear-gradient(top, #FFFFFF 41%, #E5E5E5 57%);
1431     background-image: -webkit-gradient(
1432         linear,
1433         left top,
1434         left bottom,
1435         color-stop(0.41, #FFFFFF),
1436         color-stop(0.57, #E5E5E5)
1437     );
1438 }
1439
1440 .actualTitle {
1441     display:block;
1442     font-size:11px;
1443     font-family:sans-serif;
1444     font-weight:bold;
1445     color:#333333;
1446     text-transform:uppercase;
1447     text-shadow: 1px 1px 1px #fff;
1448     white-space: nowrap;
1449     padding:4px 0;
1450     margin:0 15px 0 20px;
1451     height:12px;
1452     width:260px;
1453     text-decoration:none;
1454 }
1455
1456 .closedArrow {
1457     background:url(images/closedArrowIcon.png) no-repeat;
1458     width:10px;
1459     height:10px;
1460     display:block;
1461     position:absolute;
1462     top:6px;
1463     left:8px;
1464 }
1465
1466 .openArrow {
1467     background:url(images/openArrowIcon.png) no-repeat;
1468     width:10px;
1469     height:10px;
1470     display:block;
1471     position:absolute;
1472     top:7px;
1473     left:5px;
1474 }
1475
1476 .titleDragger {
1477     background:url(images/menuDraggerIcon.png) no-repeat;
1478     width:12px;
1479     height:8px;
1480     display:block;
1481     position:absolute;
1482     top:7px;
1483     right:8px;
1484 }
1485
1486
1487 .bottomDragBar {
1488     border-top:1px solid #9b9fa1;
1489     position:relative;
1490     height:20px;
1491     width:320px;
1492     background-image: -webkit-linear-gradient(top, #FFFFFF 21%, #E5E5E5 77%);
1493     background-image: -webkit-gradient(
1494         linear,
1495         left top,
1496         left bottom,
1497         color-stop(0.21, #FFFFFF),
1498         color-stop(0.77, #E5E5E5)
1499     );
1500 }
1501
1502 .bottomCloseIcon {
1503     background:url(images/sideCollapseIconLeftSide.png) 7px 6px no-repeat;
1504     width:20px;
1505     height:20px;
1506     display:block;
1507     position:absolute;
1508     top:0;
1509     right:0;
1510 }
1511
1512 .reloadBtn {
1513     margin: 0 0 0 10px;
1514 }
1515
1516 .PanelCollapseBar {
1517     margin-left: 0;
1518     top: 0;
1519     position:absolute;
1520     border-bottom:1px solid #9b9fa1;
1521     height:20px;
1522     width:346px;
1523     background-image: -webkit-linear-gradient(top, #FFFFFF 41%, #E5E5E5 57%);
1524     background-image: -webkit-gradient(
1525         linear,
1526         left top,
1527         left bottom,
1528         color-stop(0.41, #FFFFFF),
1529         color-stop(0.57, #E5E5E5)
1530     );
1531 }
1532
1533 .PanelCollapseBarCollapsed {
1534     margin-left: 0;
1535     top: 0;
1536     position:fixed;
1537     padding: 0;
1538     height:100%;
1539     width:16px;
1540     background-color:#fff;
1541     border-right: 1px solid #babab9;
1542 }
1543
1544 #left_div {
1545     margin-bottom:20px;
1546     z-index: 3;
1547     padding:0;
1548     background-color: #b7bbbd;
1549     border-right:1px;
1550     width:346px;
1551     height: 100%;
1552     overflow: auto;
1553     overflow-x:hidden;
1554     overflow-y:auto;
1555     position: relative;
1556 }
1557
1558 #middle_div {
1559     position: fixed;
1560     left: 0;
1561     top:0;
1562     margin:0;
1563     z-index: 0;
1564     padding:0;
1565     width:100%;
1566     height: 100%;
1567     overflow: auto;
1568     overflow-x:hidden;
1569     overflow-y:auto;
1570 }
1571
1572 .PanelSectionTitle {
1573     font-size: 12px;
1574     font-weight: bold;
1575     text-transform:uppercase;
1576     color: #2c7a94;
1577 }
1578
1579 select {
1580     -webkit-border-radius: 2px;
1581     -moz-border-radius: 2px;
1582     border-radius: 2px;
1583     -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1584     -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1585     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1586     border: 1px solid #AAA;
1587 }
1588
1589 input {
1590     border: 1px solid #AAA;
1591     -webkit-border-radius: 2px;
1592     -moz-border-radius: 2px;
1593     border-radius: 2px;
1594     -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1595     -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1596     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1597 }
1598
1599 textarea {
1600     border: 1px solid #AAA;
1601     -webkit-border-radius: 2px;
1602     -moz-border-radius: 2px;
1603     border-radius: 2px;
1604     -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1605     -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1606     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
1607 }
1608
1609 .tf_panel-table {
1610     width: 100%;
1611     border-spacing: 6px;
1612 }
1613
1614 .tf_panel-table th {
1615     text-align: left;
1616 }
1617
1618 .tf_panel-table td input[type^=text], .panel-table td input[type^=number] {
1619     width: 100px;
1620 }
1621
1622 .tf_panel-table td:nth-child(1) {
1623     width: 20%;
1624     text-align: right;
1625 }
1626
1627 .tf_panel-table td:nth-child(2) {
1628     width: 80%;
1629     text-align: left;
1630 }
1631
1632 .tf_panel-table td {
1633     vertical-align: middle;
1634     height: 30px;
1635 }
1636
1637
1638 .tf_panel-table2 {
1639     width: 100%;
1640     border-spacing: 6px;
1641 }
1642
1643 .tf_panel-table2 th {
1644     text-align: left;
1645 }
1646
1647 .tf_panel-table2 td input[type^=text], .panel-table td input[type^=number] {
1648     width: 100px;
1649 }
1650
1651 .tf_panel-table2 td:nth-child(1) {
1652     width: 40%;
1653     text-align: right;
1654 }
1655
1656 .tf_panel-table2 td:nth-child(2) {
1657     width: 60%;
1658     text-align: left;
1659 }
1660
1661 .tf_panel-table2 td {
1662     vertical-align: middle;
1663     height: 30px;
1664 }
1665
1666 .configure-window-panel-table {
1667     width: 100%;
1668     border-spacing: 6px;
1669 }
1670
1671 .configure-window-panel-table th {
1672     text-align: left;
1673 }
1674
1675 .configure-window-panel-table td input[type^=text], .configure-window-panel-table td input[type^=number] {
1676     width: 220px;
1677     padding-left:5px;
1678 }
1679
1680 .configure-window-panel-table td:nth-child(1) {
1681     width: 50%;
1682     text-align: left;
1683 }
1684
1685 .configure-window-panel-table td:nth-child(2) {
1686     width: 50%;
1687     text-align: left;
1688 }
1689
1690 .configure-window-panel-table td {
1691     vertical-align: middle;
1692     height: 40px;
1693 }
1694
1695 .configure-window-input {
1696     width: 200px;
1697     font-size: 16px;
1698     height: 30px;
1699 }
1700
1701 #settings-menu-popup {
1702     display: none;
1703     width: 306px;
1704     padding: 16px 8px 10px 8px;
1705     position: absolute;
1706     top: 50px;
1707     left: 700px;
1708     z-index: 1001;
1709     font-family: Arial, Helvetica, sans-serif;
1710     padding-left: 12px;
1711     background-color: #f3f3f3;
1712     -moz-box-shadow: 0px 10px 15px #555555; /* Firefox 3.6 and earlier */
1713     box-shadow: 0px 10px 15px #555555;
1714     -webkit-border-radius: 7px 7px 7px 7px;
1715     -moz-border-radius: 7px 7px 7px 7px;
1716     border-radius: 7px 7px 7px 7px;
1717 }
1718
1719 #settings-menu-container-div {
1720     z-index: 0;
1721     padding:0;
1722     background-color: #ffffff;
1723     border-top:1px solid #a1a1a1;
1724     border-left:1px solid #888888;
1725     border-right:1px solid #888888;
1726     border-bottom:1px solid #888888;
1727     width:292px;
1728     height:300px;
1729     overflow: auto;
1730     overflow-x:hidden;
1731     overflow-y:auto;
1732     position: relative;
1733 }
1734
1735 .settings-menu-content-table {
1736     width: 300px;
1737     color: #444444;
1738 }
1739
1740 .settings-menu-content-table td{
1741     font-size: 14px;
1742     width:300px;
1743     height: 36px;
1744     padding-left: 6px;
1745     border-bottom:1px solid #a1a1a1;
1746     border-style: dotted;
1747     -moz-user-select: none;
1748     -webkit-user-select: none;
1749     -ms-user-select: none;
1750     user-select:none;
1751 }
1752
1753 .settings-menu-content-table td:hover{
1754     background-color:#FFE680;
1755     cursor: pointer
1756 }
1757
1758 .settings-menu-tab-div{
1759     font-size:14px;
1760     font-weight:bold;
1761     background-color: #c6c6c6;
1762     color: #444444;
1763     width:160px;
1764     height:32px;
1765     padding: 0 0px 0px 0px;
1766     text-align:center;
1767     vertical-align: middle;
1768     display: table-cell;
1769     border-top-left-radius:0.7em;
1770     border-top-right-radius:0.7em;
1771 }
1772
1773 .settings-menu-button {
1774     color: #444444;
1775     font-size: 14px;
1776     padding: 5px;
1777     width: 70px;
1778     font-weight:bold;
1779     -moz-border-radius: 5px 5px 5px 5px;
1780     -webkit-border-radius: 5px 5px 5px 5px;
1781 }
1782
1783 .settings-menu-checkbox {
1784     width:25px;
1785     height:25px;
1786     vertical-align: -5px;
1787     display: table-cell;
1788 }
1789
1790 .settings-menu-checkallbox {
1791     width:25px;
1792     height:25px;
1793     vertical-align: -5px;
1794     display: table-cell;
1795 }
1796
1797 .settings-menu-close-btn {
1798     font-size: 12px;
1799     width: 24px;
1800     height: 20px;
1801 }
1802
1803 #configure-window-popup {
1804     display: none;
1805     width: 806px;
1806     padding: 16px 8px 10px 8px;
1807     position: absolute;
1808     top: 60px;
1809     left: 200px;
1810     z-index: 1001;
1811     font-family: Arial, Helvetica, sans-serif;
1812     padding-left: 12px;
1813     background-color: #f3f3f3;
1814     -moz-box-shadow: 0 10px 15px #555555; /* Firefox 3.6 and earlier */
1815     box-shadow: 0 10px 15px #555555;
1816     -webkit-border-radius: 7px 7px 7px 7px;
1817     -moz-border-radius: 7px 7px 7px 7px;
1818     border-radius: 7px 7px 7px 7px;
1819 }
1820
1821 #configure-window-container-div {
1822     z-index: 0;
1823     padding:0;
1824     background-color: #ffffff;
1825     border-top:1px solid #a1a1a1;
1826     border-left:1px solid #888888;
1827     border-right:1px solid #888888;
1828     border-bottom:1px solid #888888;
1829     width:792px;
1830     height:500px;
1831     overflow: auto;
1832     overflow-x:hidden;
1833     overflow-y:auto;
1834     position: relative;
1835 }
1836
1837
1838 .configuration-window-title-div {
1839     font-size:15px;
1840     font-weight:bold;
1841     background-color: #c6c6c6;
1842     color: #444444;
1843     width:802px;
1844     height:32px;
1845     padding: 5px 0 0 0;
1846     text-align:center;
1847     vertical-align: middle;
1848     display: table-cell;
1849     border-top-left-radius:0.7em;
1850     border-top-right-radius:0.7em;
1851 }
1852
1853 .configuration-window-done-button {
1854     color: #444444;
1855     font-size: 14px;
1856     padding: 5px;
1857     width: 70px;
1858     font-weight:bold;
1859     -moz-border-radius: 5px 5px 5px 5px;
1860     -webkit-border-radius: 5px 5px 5px 5px;
1861 }
1862
1863
1864 .configuration-window-close-btn {
1865     font-size: 12px;
1866     width: 24px;
1867     height: 20px;
1868 }
1869
1870
1871 #configure-window-content-panel-table {
1872     width: 800px;
1873     height: 100%;
1874     color: #444444;
1875     border-width: 0;
1876     border-style: solid;
1877     border-color: #55555;
1878     border-collapse: collapse;
1879 }
1880
1881 #configure-window-content-panel-table td{
1882     padding: 1px;
1883     border-color: gray;
1884     background-color: white;
1885 }
1886
1887 .configure-window-text-label {
1888     font-size: 16px;
1889     font-weight: bold;
1890     color: #000000;
1891 }
1892
1893 .configure-window-text-label2 {
1894     font-size: 16px;
1895     color: #000000;
1896 }
1897
1898 .configuration-window-item {
1899     display: inline-block;
1900     vertical-align: text-top;
1901     font-size:16px;
1902     font-weight:bold;
1903     width:200px;
1904     height: 30px;
1905     padding-left: 10px;
1906     padding-top: 12px;
1907     border-bottom:1px solid #a1a1a1;
1908     background-color: #eeeeee;
1909     color: #333333;
1910     -moz-user-select: none;
1911     -webkit-user-select: none;
1912     -ms-user-select: none;
1913     user-select:none;
1914 }
1915
1916 .configuration-window-item:hover{
1917     cursor: pointer
1918 }
1919
1920 .configuration-button-bar-div {
1921     vertical-align: middle;
1922     display: inline-block;
1923     padding-top:5px;
1924     padding-left:0;
1925     padding-right:10px;
1926     width:100%;
1927     height:100%;
1928     background-color:#dddddd;
1929     border-width:0;
1930 }
1931
1932 .configuration-window-content-div {
1933     display: none;
1934     vertical-align: text-top;
1935     vertical-align: top;
1936     padding: 5px 10px 5px 10px;
1937     height:442px;
1938     overflow: auto;
1939     overflow-x:hidden;
1940     overflow-y:auto;
1941 }
1942
1943 .configuration-window-content-panel {
1944     vertical-align: text-top;
1945     vertical-align: top;
1946     padding: 5px 10px 5px 10px;
1947 }
1948
1949
1950 #configure-window-done-popup {
1951     display: none;
1952     width: 400px;
1953     padding: 16px 8px 10px 8px;
1954     position: absolute;
1955     top: 60px;
1956     left: 200px;
1957     z-index: 1001;
1958     font-family: Arial, Helvetica, sans-serif;
1959     padding-left: 12px;
1960     background-color: #f3f3f3;
1961     -moz-box-shadow: 0 10px 15px #555555; /* Firefox 3.6 and earlier */
1962     box-shadow: 0 10px 15px #555555;
1963     -webkit-border-radius: 7px 7px 7px 7px;
1964     -moz-border-radius: 7px 7px 7px 7px;
1965     border-radius: 7px 7px 7px 7px;
1966 }
1967
1968 #configure-window-done-content {
1969     height:100%;
1970     padding: 20px;
1971     border-color: gray;
1972     background-color: white;
1973 }
1974
1975 #app-launching-history {
1976     display: none;
1977     width: 710px;
1978     position: absolute;
1979     top: 43px;
1980     left: 49px;
1981     z-index: 1001;
1982     font-family: Arial, Helvetica, sans-serif;
1983     background-color: #f3f3f3;
1984     -moz-box-shadow: 0 10px 15px #555555; /* Firefox 3.6 and earlier */
1985     box-shadow: 0 10px 15px #555555;
1986     -webkit-border-radius: 7px 7px 7px 7px;
1987     -moz-border-radius: 7px 7px 7px 7px;
1988     border-radius: 7px 7px 7px 7px;
1989 }
1990
1991 .app-launching-history-item {
1992     display: inline-block;
1993     vertical-align: text-top;
1994     font-size:13px;
1995     width:100%;
1996     height: 20px;
1997     padding-left: 12px;
1998     padding-top: 2px;
1999     border-bottom:1px solid #a1a1a1;
2000     background-color: #ffffff;
2001     color: #333333;
2002     -moz-user-select: none;
2003     -webkit-user-select: none;
2004     -ms-user-select: none;
2005     user-select:none;
2006     overflow: hidden;
2007     white-space: nowrap;
2008     text-overflow: ellipsis;
2009 }
2010
2011 .app-launching-history-item:hover{
2012     background-color:#FFE680;
2013     cursor: pointer
2014 }
2015
2016 .app-launching-history-item-empty {
2017     display: inline-block;
2018     vertical-align: text-top;
2019     font-size:13px;
2020     width:100%;
2021     height: 20px;
2022     padding-left: 12px;
2023     padding-top: 2px;
2024     border-bottom:1px solid #a1a1a1;
2025     background-color: #ffffff;
2026     color: #333333;
2027     -moz-user-select: none;
2028     -webkit-user-select: none;
2029     -ms-user-select: none;
2030     user-select:none;
2031     overflow: hidden;
2032     white-space: nowrap;
2033     text-overflow: ellipsis;
2034 }
2035
2036 .app-launching-history-item-empty:hover{
2037     background-color:#FFE680;
2038     cursor: pointer
2039 }
2040 .configure-window-session-title {
2041     font-size: 16px;
2042     font-weight: bold;
2043     text-transform:uppercase;
2044     color: #2c7a94;
2045 }
2046
2047 /* ------------------------------>
2048     Application message */
2049
2050 .app-dialog-table {
2051     border: 1px solid #5A99BA;
2052     -webkit-border-radius: 3px;
2053     -moz-border-radius: 3px;
2054     border-radius: 3px;
2055     -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2056     -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2057     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
2058 }
2059
2060 .app-dialog-table th {
2061     background-color: #5A99BA;
2062     background-radius: 6px;
2063     color: #FFFFFF;
2064 }
2065
2066 .app-dialog-table td:nth-child(1) {
2067     width: 20%;
2068     text-align: right;
2069     font-weight: bold;
2070 }
2071
2072 .app-dialog-table td:nth-child(2) {
2073     width: 80%;
2074     text-align: left;
2075 }
2076
2077 /* ------------------------------>
2078     Communication Panel */
2079
2080 #communication-viewport {
2081     background-color: #e1e1e1;
2082     position: relative;
2083 }
2084
2085 .communication-callContainer, .communication-messageContainer {
2086     width: 80%;
2087     height: 80%;
2088     position: absolute;
2089     top: 10%;
2090     left: 10%;
2091     background-color: #ffffff;
2092     text-align:center;
2093     vertical-align: middle;
2094     border: 3px solid black;
2095     -moz-box-shadow: 0px 10px 15px #555555; /* Firefox 3.6 and earlier */
2096     -webkit-box-shadow: 0px 10px 15px #555555;
2097     -moz-border-radius: 5px 5px 5px 5px;
2098     -webkit-border-radius: 5px 5px 5px 5px;
2099 }
2100
2101 .communication-callContainer table, .communication-messageContainer table {
2102     width: 100%;
2103     height: 100%;
2104     text-align: center;
2105     vertical-align: top;
2106 }
2107
2108 .communication-callContainer td, .communication-messageContainer td {
2109     font-size: 24px;
2110     font-weight: bold;
2111 }
2112
2113 .communication-callContainer tr:nth-child(2) td, .communication-messageContainer tr:nth-child(2) td {
2114     font-size: 18px;
2115     font-weight: normal;
2116     vertical-align: top;
2117 }
2118
2119 #communication-messageThread {
2120     width: 280px;
2121     font-size: 20px;
2122     font-weight: bold;
2123 }
2124
2125 .communication-msgOut td:nth-child(1), .communication-msgIn td:nth-child(3) {
2126     width: 40px;
2127     font-size: 20px;
2128     font-weight: bold;
2129 }
2130
2131 .communication-msgOut td:nth-child(2), .communication-msgIn td:nth-child(2) {
2132     margin: 0px;
2133     width: 20px;
2134 }
2135
2136 .communication-msgOut td:nth-child(3), .communication-msgIn td:nth-child(1) {
2137      font-size: 16px;
2138      font-weight: normal;
2139      width: 200px;
2140      border: 1px solid black;
2141      word-wrap: break-word;
2142      word-break: break-all;
2143      -webkit-border-radius: 5px 5px 5px 5px;
2144      -webkit-box-shadow: 5px 5px 5px #555555;
2145 }
2146
2147 /* ------------------------------>
2148     Network Management Panel */
2149
2150 .ui-buttonset {
2151      margin-right: 7px;
2152  }
2153  .ui-buttonset .ui-button {
2154      margin-left: 0;
2155      margin-right: -.3em;
2156  }
2157  .ui-helper-hidden-accessible {
2158      position: absolute !important;
2159      clip: rect(1px 1px 1px 1px);
2160      clip: rect(1px,1px,1px,1px);
2161  }
2162
2163 /* ------------------------------>
2164     Vehicle Management Panel */
2165
2166 #vehicle-container .ui-accordion .ui-accordion-content {
2167     padding: 0 5px 0 5px;
2168 }
2169
2170 #vehicle-container .vehicle-property-header {
2171     font-weight: bold;
2172     background-color: #DCDCDC;
2173     height: 25px;
2174     padding-left: 5px;
2175     border-radius: 10px;
2176 }
2177
2178 #vehicle-container .vehicle-property-label {
2179     padding-left: 10px;
2180 }
2181
2182 #vehicle-container .vehicle-property-value {
2183     text-align: right;
2184     height: 25px;
2185     padding-right: 10px;
2186 }
2187
2188 #vehicle-container .vehicle-property-value input {
2189     width: 120px;
2190     border-radius: 10px;
2191 }
2192
2193 #vehicle-container .vehicle-property-value select {
2194     width: 135px;
2195     background-color: #FFFFFF;
2196     border-radius: 10px;
2197 }
2198
2199 /*configuration*/
2200 #vehicle-container .vehicle-configuration-switch label {
2201     margin-left: 5px;
2202 }
2203
2204 #vehicle-container .vehicle-configuration-switch select {
2205     margin-left: 90px;
2206     border-radius: 5px;
2207     width: 35%;
2208 }
2209
2210 #vehicle-container #vehicle-configuration-show {
2211     width: 100%;
2212 }
2213
2214 /*supported*/
2215 #vehicle-container #vehicle-supported-query {
2216     width: 85%;
2217     margin-left: 10px;
2218     border-radius: 5px;
2219 }
2220
2221 #vehicle-container #vehicle-supported-show {
2222     width: 100%;
2223     margin: 5px 5px 5px 0;
2224 }
2225
2226 #vehicle-container #vehicle-supported-show td {
2227     border: 0;
2228     height: 25px;
2229     text-align: center;
2230     cursor: pointer;
2231     border-radius: 15px;
2232     width: 33%;
2233     word-break: break-all;
2234 }
2235
2236 #vehicle-container .vehicle-property-supported {
2237     background-color: #8ADA8A;
2238 }
2239
2240 #vehicle-container .vehicle-property-unsupported {
2241     background-color: #DCDCDC;
2242 }
2243
2244 /*auto*/
2245 #vehicle-container #vehicle-running-auto {
2246     border-radius: 10px;
2247     border: 1px solid #CDCDCD;
2248     height: 25px;
2249     width: 120px;
2250     cursor: pointer;
2251     margin: 5px 0 5px 10px;
2252     padding: 5px 0 0 30px;
2253 }
2254
2255 #vehicle-container #vehicle-running-show {
2256     width: 100%;
2257 }
2258
2259 #vehicle-container .vehicle-property-arrayItem {
2260     margin-left: 70px;
2261 }
2262
2263 #vehicle-container .vehicle-property-array button {
2264     width: 60px;
2265     border-radius: 8px;
2266 }
2267
2268 #vehicle-container .vehicle-property-array .vehicle-property-arrayOk {
2269     width: 100px;
2270     margin-left: 155px;
2271 }
2272
2273 #vehicle-container .vehicle-property-array input {
2274     width: 100px;
2275     border-radius: 5px;
2276     margin-left: 10px;
2277     margin-right: 10px;
2278 }
2279
2280 #vehicle-container .vehicle-properties-noSet {
2281     width: 100%;
2282     height: 85%;
2283     position: absolute;
2284     top: 0;
2285     left: 0;
2286     opacity: 0.6;
2287     background-color: #EBE9E9;
2288     font-weight: bold;
2289     font-size: 14px;
2290     padding-top: 90px;
2291     text-align: center;
2292 }
2293
2294 /* ------------------------------>
2295     UI.Battery */
2296
2297 .battery-block {
2298     width: 20px;
2299     height: 20px;
2300     border: solid thin black;
2301     float: left;
2302     margin-right: 2px;
2303     background-color: #000000;
2304 }
2305
2306 #simulate-low-battery-btn {
2307     width: 200px;
2308     height: 30px;
2309     margin: 5px;
2310 }
2311
2312 #stop-btn {
2313     height: 30px;
2314     width: 200px;
2315     margin: 5px;
2316     display: none;
2317     background-color: #D2691E;
2318     color: #ffffff;
2319 }
2320
2321 #simulate-low-battery {
2322     height: 180px;
2323     border: solid thin black;
2324     display: none;
2325     background: #ffffff;
2326 }
2327
2328 #low-battery-remain-time {
2329     height: 25px;
2330     width: 50px;
2331 }
2332
2333 #simulate-low-battery-cancel {
2334     height:30px;
2335     width:80px;
2336     margin:5px;
2337 }
2338
2339 #simulate-low-battery-start {
2340     height: 30px;
2341     width: 80px;
2342     margin: 5px;
2343 }
2344
2345 /* ------------------------------>
2346 /*sensors*/
2347
2348 #sensors input, #sensors select, #sensors button {
2349     margin-left: 5px;
2350 }
2351
2352 #accelerometer-canvas {
2353     width: 300px;
2354     height: 200px;
2355 }
2356
2357 #buttonContainer {
2358     border-top: #ccc 1px solid;
2359     border-bottom: #ccc 1px solid;
2360     padding: 10px;
2361     margin-top: 80px;
2362 }
2363
2364 #sensorsettings-content-container {
2365     border-top: #ccc 1px solid;
2366     border-bottom: #ccc 1px solid;
2367     padding:10px;
2368 }
2369 /* Hardware Key ----------------------->*/
2370
2371 #hwkeys-panel {
2372     width: 128px;
2373     padding: 8px 3px 6px 3px;
2374     position: absolute;
2375     top: 580px;
2376     left: 380px;
2377     font-family: Arial, Helvetica, sans-serif;
2378     background-color: #222222;
2379     -moz-box-shadow: 0px 10px 15px #888888; /* Firefox 3.6 and earlier */
2380     box-shadow: 0px 10px 15px #888888;
2381     -webkit-border-radius: 5px 5px 5px 5px;
2382     -moz-border-radius: 5px 5px 5px 5px;
2383     border-radius: 5px 5px 5px 5px;
2384 }
2385
2386 #hwkeys-container-div {
2387     z-index: 0;
2388     padding:0;
2389     background-color: #222222;
2390     border:1px solid #222222;
2391     width:124px;
2392     position: relative;
2393 }
2394
2395 .hwkeys-content-table {
2396     width:124px;
2397     font-size: 15px;
2398     color: #555555;
2399 }
2400
2401 .hwkeys-content-table td{
2402     width:124px;
2403     height: 40px;
2404     padding-left: 0px;
2405     border-width: 0;
2406     -moz-user-select: none;
2407     -webkit-user-select: none;
2408     -ms-user-select: none;
2409     user-select:none;
2410 }
2411
2412 .hwkeys-button:hover{
2413     cursor: pointer;
2414     background-color:#444444;
2415     background-image: -webkit-linear-gradient(top, #444444 41%, #222222 57%);
2416     background-image: -webkit-gradient(
2417         linear,
2418         left top,
2419         left bottom,
2420         color-stop(0.41, #444444),
2421         color-stop(0.57, #222222)
2422     );
2423 }
2424
2425 .hwkeys-button:active{
2426     cursor: pointer;
2427     background-color:#666666;
2428     background-image: -webkit-linear-gradient(top, #555555 41%, #333333 57%);
2429     background-image: -webkit-gradient(
2430         linear,
2431         left top,
2432         left bottom,
2433         color-stop(0.41, #555555),
2434         color-stop(0.57, #333333)
2435     );
2436 }
2437
2438 .hwkeys-title-div{
2439     font-size:14px;
2440     font-weight:bold;
2441     color: #dddddd;
2442     width:120px;
2443     height:30px;
2444     text-align:center;
2445     vertical-align: middle;
2446     display: table-cell;
2447     border-top-left-radius:0.8em;
2448     border-top-right-radius:0.8em;
2449 }
2450
2451 .hwkeys-button {
2452     color: #dddddd;
2453     background-color: #222222;
2454     font-size: 15px;
2455     padding: 7px;
2456     width: 119px;
2457     height: 36px;
2458     border:1px solid #a1a1a1;
2459     -moz-border-radius: 5px 5px 5px 5px;
2460     -webkit-border-radius: 5px 5px 5px 5px;
2461     background-image: -webkit-linear-gradient(top, #333333 41%, #111111 57%);
2462     background-image: -webkit-gradient(
2463         linear,
2464         left top,
2465         left bottom,
2466         color-stop(0.41, #333333),
2467         color-stop(0.57, #111111)
2468     );
2469 }
2470 /*
2471  *  Copyright 2011 Research In Motion Limited.
2472  *
2473  * Licensed under the Apache License, Version 2.0 (the "License");
2474  * you may not use this file except in compliance with the License.
2475  * You may obtain a copy of the License at
2476  *
2477  * http://www.apache.org/licenses/LICENSE-2.0
2478  *
2479  * Unless required by applicable law or agreed to in writing, software
2480  * distributed under the License is distributed on an "AS IS" BASIS,
2481  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2482  * See the License for the specific language governing permissions and
2483  * limitations under the License.
2484  */
2485 /* ------------------------------>
2486     Colt (848x1552) offset (268x84)*/
2487
2488 .viewport-wrapper-Colt {
2489     width: 768px;
2490     height: 1280px;
2491     border: none;
2492 }
2493
2494 .device-wrapper-Colt {
2495     position: relative;
2496     padding: 268px 0 0 84px;
2497     width: 848px;
2498     height: 1552px;
2499     margin: 0 auto;
2500     border: none;
2501     -webkit-box-shadow: none;
2502     -moz-box-shadow: none;
2503     box-shadow: none;
2504     background: url('images/Colt.png') no-repeat;
2505     background-size: 940px;
2506 }
2507
2508 .viewport-wrapper-landscape-Colt {
2509     width: 1280px;
2510     height: 768px;
2511     border: none;
2512 }
2513
2514 .device-wrapper-landscape-Colt {
2515     position: relative;
2516     padding: 88px 0 0 270px;
2517     width: 1552px;
2518     height: 848px;
2519     margin: 0 auto;
2520     border: none;
2521     -webkit-box-shadow: none;
2522     -moz-box-shadow: none;
2523     box-shadow: none;
2524     background: url('images/Colt-Landscape.png') no-repeat;
2525     background-size: 1821px;
2526 }
2527
2528 #document {
2529     border-radius: 7px;
2530 }
2531
2532 /*
2533  *  Copyright 2011 Research In Motion Limited.
2534  *
2535  * Licensed under the Apache License, Version 2.0 (the "License");
2536  * you may not use this file except in compliance with the License.
2537  * You may obtain a copy of the License at
2538  *
2539  * http://www.apache.org/licenses/LICENSE-2.0
2540  *
2541  * Unless required by applicable law or agreed to in writing, software
2542  * distributed under the License is distributed on an "AS IS" BASIS,
2543  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2544  * See the License for the specific language governing permissions and
2545  * limitations under the License.
2546  */
2547 /* ------------------------------>
2548     Curve9300 (373x674) offset (27x119)*/
2549
2550 .viewport-wrapper-Curve9300 {
2551     width: 320px;
2552     height: 240px;
2553     border: none;
2554 }
2555
2556 .menu-button-wrapper-Curve9300{
2557     position: relative;
2558     display: inline-block;
2559     margin: 30px 0 0 60px;
2560     width: 60px;
2561     height: 55px;
2562     cursor: pointer;
2563 }
2564
2565 .back-button-wrapper-Curve9300 {
2566     position: relative;
2567     display: inline-block;
2568     margin: 0 0 0 77px;
2569     width: 60px;
2570     height: 55px;
2571     cursor: pointer;
2572 }
2573
2574 .device-wrapper-Curve9300 {
2575     position: relative;
2576     padding: 119px 0 0 27px;
2577     width: 346px;
2578     height: 555px;
2579     margin: 0 auto;
2580     border: none;
2581     -webkit-box-shadow: none;
2582     -moz-box-shadow: none;
2583     box-shadow: none;
2584     background: url('images/Curve9300.png') no-repeat;
2585 }
2586
2587 /*
2588  *  Copyright 2011 Research In Motion Limited.
2589  *
2590  * Licensed under the Apache License, Version 2.0 (the "License");
2591  * you may not use this file except in compliance with the License.
2592  * You may obtain a copy of the License at
2593  *
2594  * http://www.apache.org/licenses/LICENSE-2.0
2595  *
2596  * Unless required by applicable law or agreed to in writing, software
2597  * distributed under the License is distributed on an "AS IS" BASIS,
2598  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2599  * See the License for the specific language governing permissions and
2600  * limitations under the License.
2601  */
2602 /* ------------------------------>
2603     Curve9350-9360-9370 (560x998) offset (42x172)*/
2604
2605 .viewport-wrapper-Curve9350-9360-9370 {
2606     width: 480px;
2607     height: 360px;
2608     border: none;
2609 }
2610
2611 .menu-button-wrapper-Curve9350-9360-9370{
2612     position: relative;
2613     display: inline-block;
2614     margin: 30px 0 0 85px;
2615     width: 100px;
2616     height: 80px;
2617     cursor: pointer;
2618 }
2619
2620 .back-button-wrapper-Curve9350-9360-9370 {
2621     position: relative;
2622     display: inline-block;
2623     margin: 0 0 0 105px;
2624     width: 100px;
2625     height: 80px;
2626     cursor: pointer;
2627 }
2628
2629 .device-wrapper-Curve9350-9360-9370 {
2630     position: relative;
2631     padding: 172px 0 0 42px;
2632     width: 518px;
2633     height: 826px;
2634     margin: 0 auto;
2635     border: none;
2636     -webkit-box-shadow: none;
2637     -moz-box-shadow: none;
2638     box-shadow: none;
2639     background: url('images/Curve9350-9360-9370.png') no-repeat;
2640 }
2641
2642 /*
2643  *  Copyright 2011 Research In Motion Limited.
2644  *
2645  * Licensed under the Apache License, Version 2.0 (the "License");
2646  * you may not use this file except in compliance with the License.
2647  * You may obtain a copy of the License at
2648  *
2649  * http://www.apache.org/licenses/LICENSE-2.0
2650  *
2651  * Unless required by applicable law or agreed to in writing, software
2652  * distributed under the License is distributed on an "AS IS" BASIS,
2653  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2654  * See the License for the specific language governing permissions and
2655  * limitations under the License.
2656  */
2657 /* ------------------------------>
2658     Bold9700 (561x1009) offset (40x181)*/
2659
2660 .viewport-wrapper-Bold9700 {
2661     width: 480px;
2662     height: 360px;
2663     border: none;
2664 }
2665
2666 .menu-button-wrapper-Bold9700{
2667     position: relative;
2668     display: inline-block;
2669     margin: 30px 0 0 85px;
2670     width: 100px;
2671     height: 80px;
2672     cursor: pointer;
2673 }
2674
2675 .back-button-wrapper-Bold9700 {
2676     position: relative;
2677     display: inline-block;
2678     margin: 0 0 0 105px;
2679     width: 100px;
2680     height: 80px;
2681     cursor: pointer;
2682 }
2683
2684 .device-wrapper-Bold9700 {
2685     position: relative;
2686     padding: 181px 0 0 40px;
2687     width: 521px;
2688     height: 828px;
2689     margin: 0 auto;
2690     border: none;
2691     -webkit-box-shadow: none;
2692     -moz-box-shadow: none;
2693     box-shadow: none;
2694     background: url('images/Bold9700.png') no-repeat;
2695 }
2696
2697 /*
2698  *  Copyright 2011 Research In Motion Limited.
2699  *
2700  * Licensed under the Apache License, Version 2.0 (the "License");
2701  * you may not use this file except in compliance with the License.
2702  * You may obtain a copy of the License at
2703  *
2704  * http://www.apache.org/licenses/LICENSE-2.0
2705  *
2706  * Unless required by applicable law or agreed to in writing, software
2707  * distributed under the License is distributed on an "AS IS" BASIS,
2708  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2709  * See the License for the specific language governing permissions and
2710  * limitations under the License.
2711  */
2712 /* ------------------------------>
2713     Pearl9100 (455x969) offset (47x139)*/
2714
2715 .viewport-wrapper-Pearl9100 {
2716     width: 360px;
2717     height: 400px;
2718     border: none;
2719 }
2720
2721 .menu-button-wrapper-Pearl9100{
2722     position: relative;
2723     display: inline-block;
2724     margin: 30px 0 0 65px;
2725     width: 65px;
2726     height: 75px;
2727     cursor: pointer;
2728 }
2729
2730 .back-button-wrapper-Pearl9100 {
2731     position: relative;
2732     display: inline-block;
2733     margin: 0 0 0 95px;
2734     width: 65px;
2735     height: 75px;
2736     cursor: pointer;
2737 }
2738
2739 .device-wrapper-Pearl9100 {
2740     position: relative;
2741     padding: 139px 0 0 47px;
2742     width: 408px;
2743     height: 830px;
2744     margin: 0 auto;
2745     border: none;
2746     -webkit-box-shadow: none;
2747     -moz-box-shadow: none;
2748     box-shadow: none;
2749     background: url('images/Pearl9100.png') no-repeat;
2750 }
2751
2752 /*
2753  *  Copyright 2011 Research In Motion Limited.
2754  *
2755  * Licensed under the Apache License, Version 2.0 (the "License");
2756  * you may not use this file except in compliance with the License.
2757  * You may obtain a copy of the License at
2758  *
2759  * http://www.apache.org/licenses/LICENSE-2.0
2760  *
2761  * Unless required by applicable law or agreed to in writing, software
2762  * distributed under the License is distributed on an "AS IS" BASIS,
2763  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2764  * See the License for the specific language governing permissions and
2765  * limitations under the License.
2766  */
2767 /* ------------------------------>
2768     Playbook Skin (860x1278) offset (128x130)*/
2769
2770 .viewport-wrapper-landscape-Playbook {
2771     height: 600px;
2772     width: 1024px;
2773     border: none;
2774 }
2775
2776 .device-wrapper-landscape-Playbook {
2777     position: relative;
2778     padding: 130px 0 0 127px;
2779     height: 732px;
2780     width: 1153px;
2781     margin: 0 auto;
2782     border: none;
2783     -webkit-box-shadow: none;
2784     -moz-box-shadow: none;
2785     box-shadow: none;
2786     background: url('images/Playbook_landscape.png') no-repeat;
2787 }
2788
2789 .viewport-wrapper-Playbook {
2790     height: 1024px;
2791     width: 600px;
2792     border: none;
2793 }
2794
2795
2796 .device-wrapper-Playbook {
2797     position: relative;
2798     padding: 128px 0 0 130px;
2799     width: 732px;
2800     height: 1153px;
2801     margin: 0 auto;
2802     border: none;
2803     -webkit-box-shadow: none;
2804     -moz-box-shadow: none;
2805     box-shadow: none;
2806     background: url('images/Playbook.png') no-repeat;
2807 }
2808
2809 /*
2810  *  Copyright 2011 Research In Motion Limited.
2811  *
2812  * Licensed under the Apache License, Version 2.0 (the "License");
2813  * you may not use this file except in compliance with the License.
2814  * You may obtain a copy of the License at
2815  *
2816  * http://www.apache.org/licenses/LICENSE-2.0
2817  *
2818  * Unless required by applicable law or agreed to in writing, software
2819  * distributed under the License is distributed on an "AS IS" BASIS,
2820  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2821  * See the License for the specific language governing permissions and
2822  * limitations under the License.
2823  */
2824 /* ------------------------------>
2825     Bold9900 (726x1258) offset (41x196)*/
2826
2827 .viewport-wrapper-Bold9900 {
2828     width: 640px;
2829     height: 480px;
2830     border: none;
2831 }
2832
2833 .menu-button-wrapper-Bold9900{
2834     position: relative;
2835     display: inline-block;
2836     margin: 30px 0 0 145px;
2837     width: 90px;
2838     height: 90px;
2839     cursor: pointer;
2840 }
2841
2842 .back-button-wrapper-Bold9900 {
2843     position: relative;
2844     display: inline-block;
2845     margin: 0 0 0 170px;
2846     width: 90px;
2847     height: 90px;
2848     cursor: pointer;
2849 }
2850
2851 .device-wrapper-Bold9900 {
2852     position: relative;
2853     padding: 196px 0 0 41px;
2854     width: 685px;
2855     height: 1062px;
2856     margin: 0 auto;
2857     border: none;
2858     -webkit-box-shadow: none;
2859     -moz-box-shadow: none;
2860     box-shadow: none;
2861     background: url('images/Bold9900.png') no-repeat;
2862 }
2863
2864 /*
2865  *  Copyright 2011 Research In Motion Limited.
2866  *
2867  * Licensed under the Apache License, Version 2.0 (the "License");
2868  * you may not use this file except in compliance with the License.
2869  * You may obtain a copy of the License at
2870  *
2871  * http://www.apache.org/licenses/LICENSE-2.0
2872  *
2873  * Unless required by applicable law or agreed to in writing, software
2874  * distributed under the License is distributed on an "AS IS" BASIS,
2875  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2876  * See the License for the specific language governing permissions and
2877  * limitations under the License.
2878  */
2879
2880 /* ------------------------------>
2881     Torch9810 Skin (591x1048) offset (55x191)*/
2882
2883 .viewport-wrapper-Torch9810 {
2884     width: 480px;
2885     height: 640px;
2886     border: none;
2887 }
2888
2889 .device-wrapper-Torch9810 {
2890     position: relative;
2891     padding: 191px 0 0 55px;
2892     width: 536px;
2893     height: 857px;
2894     margin: 0 auto;
2895     border: none;
2896     -webkit-box-shadow: none;
2897     -moz-box-shadow: none;
2898     box-shadow: none;
2899     background: url('images/Torch9810.png') no-repeat;
2900 }
2901
2902 .menu-button-wrapper-Torch9810 {
2903     position: relative;
2904     display: inline-block;
2905     margin: 45px 0 0 100px;
2906     width: 75px;
2907     height: 85px;
2908     cursor: pointer;
2909 }
2910
2911 .back-button-wrapper-Torch9810 {
2912     position: relative;
2913     display: inline-block;
2914     margin: 0 0 0 118px;
2915     width: 75px;
2916     height: 85px;
2917     cursor: pointer;
2918 }
2919
2920 .viewport-wrapper-landscape-Torch9810 {
2921     width: 640px;
2922     height: 480px;
2923     border: none;
2924 }
2925
2926 .device-wrapper-landscape-Torch9810 {
2927     position: relative;
2928     padding: 55px 0 0 191px;
2929     width: 857px;
2930     height: 536px;
2931     margin: 0 auto;
2932     border: none;
2933     -webkit-box-shadow: none;
2934     -moz-box-shadow: none;
2935     box-shadow: none;
2936     background: url('images/Torch9810_landscape.png') no-repeat;
2937 }
2938
2939 .menu-button-wrapper-landscape-Torch9810{
2940     position: relative;
2941     margin: -175px 0 0 685px;
2942     width: 85px;
2943     height: 75px;
2944     cursor: pointer;
2945 }
2946
2947 .back-button-wrapper-landscape-Torch9810 {
2948     position: relative;
2949     margin: -272px 0 0 685px;
2950     width: 85px;
2951     height: 75px;
2952     cursor: pointer;
2953 }
2954
2955
2956 /*
2957  *  Copyright 2011 Research In Motion Limited.
2958  *
2959  * Licensed under the Apache License, Version 2.0 (the "License");
2960  * you may not use this file except in compliance with the License.
2961  * You may obtain a copy of the License at
2962  *
2963  * http://www.apache.org/licenses/LICENSE-2.0
2964  *
2965  * Unless required by applicable law or agreed to in writing, software
2966  * distributed under the License is distributed on an "AS IS" BASIS,
2967  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2968  * See the License for the specific language governing permissions and
2969  * limitations under the License.
2970  */
2971
2972 /* ------------------------------>
2973     Torch 9860-9850 Skin (602x1149) offset (59x159)*/
2974
2975 .viewport-wrapper-Torch9860-9850 {
2976     width: 480px;
2977     height: 800px;
2978     border: none;
2979 }
2980
2981 .device-wrapper-Torch9860-9850 {
2982     position: relative;
2983     padding: 159px 0 0 59px;
2984     width: 543px;
2985     height: 990px;
2986     margin: 0 auto;
2987     border: none;
2988     -webkit-box-shadow: none;
2989     -moz-box-shadow: none;
2990     box-shadow: none;
2991     background: url('images/Torch9860-9850.png') no-repeat;
2992 }
2993
2994 .menu-button-wrapper-Torch9860-9850 {
2995     position: relative;
2996     display: inline-block;
2997     margin: 40px 0 0 98px;
2998     width: 80px;
2999     height: 62px;
3000     cursor: pointer;
3001 }
3002
3003 .back-button-wrapper-Torch9860-9850 {
3004     position: relative;
3005     display: inline-block;
3006     margin: 0 0 0 123px;
3007     width: 80px;
3008     height: 62px;
3009     cursor: pointer;
3010 }
3011
3012 .viewport-wrapper-landscape-Torch9860-9850 {
3013     margin: -99px 0 0 103px;
3014     width: 800px;
3015     height: 480px;
3016     border: none;
3017 }
3018
3019 .device-wrapper-landscape-Torch9860-9850 {
3020     position: relative;
3021     padding: 159px 0 0 60px;
3022     width: 1089px;
3023     height: 443px;
3024     margin: 0 auto;
3025     border: none;
3026     -webkit-box-shadow: none;
3027     -moz-box-shadow: none;
3028     box-shadow: none;
3029     background: url('images/Torch9860-9850_landscape.png') no-repeat;
3030 }
3031
3032 .menu-button-wrapper-landscape-Torch9860-9850 {
3033     position: relative;
3034     margin: -175px 0 0 940px;
3035     width: 60px;
3036     height: 80px;
3037     cursor: pointer;
3038 }
3039
3040 .back-button-wrapper-landscape-Torch9860-9850 {
3041     position: relative;
3042     margin: -288px 0 0 940px;
3043     width: 60px;
3044     height: 80px;
3045     cursor: pointer;
3046 }
3047
3048
3049 /*
3050  *  Copyright 2011 Research In Motion Limited.
3051  *
3052  * Licensed under the Apache License, Version 2.0 (the "License");
3053  * you may not use this file except in compliance with the License.
3054  * You may obtain a copy of the License at
3055  *
3056  * http://www.apache.org/licenses/LICENSE-2.0
3057  *
3058  * Unless required by applicable law or agreed to in writing, software
3059  * distributed under the License is distributed on an "AS IS" BASIS,
3060  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3061  * See the License for the specific language governing permissions and
3062  * limitations under the License.
3063  */
3064 /* ------------------------------>
3065     Style9670 (520x1338) offset (78x137)*/
3066
3067 .viewport-wrapper-Style9670 {
3068     width: 360px;
3069     height: 400px;
3070     border: none;
3071 }
3072
3073 .menu-button-wrapper-Style9670{
3074     position: relative;
3075     display: inline-block;
3076     margin: 210px 0 0 50px;
3077     width: 80px;
3078     height: 100px;
3079     cursor: pointer;
3080 }
3081
3082 .back-button-wrapper-Style9670 {
3083     position: relative;
3084     display: inline-block;
3085     margin: 0 0 0 100px;
3086     width: 80px;
3087     height: 100px;
3088     cursor: pointer;
3089 }
3090
3091 .device-wrapper-Style9670 {
3092     position: relative;
3093     padding: 137px 0 0 80px;
3094     width: 440px;
3095     height: 1201px;
3096     margin: 0 auto;
3097     border: none;
3098     -webkit-box-shadow: none;
3099     -moz-box-shadow: none;
3100     box-shadow: none;
3101     background: url('images/Style9670.png') no-repeat;
3102 }
3103
3104 /*
3105  *  Copyright 2011 Research In Motion Limited.
3106  *
3107  * Licensed under the Apache License, Version 2.0 (the "License");
3108  * you may not use this file except in compliance with the License.
3109  * You may obtain a copy of the License at
3110  *
3111  * http://www.apache.org/licenses/LICENSE-2.0
3112  *
3113  * Unless required by applicable law or agreed to in writing, software
3114  * distributed under the License is distributed on an "AS IS" BASIS,
3115  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3116  * See the License for the specific language governing permissions and
3117  * limitations under the License.
3118  */
3119
3120 /* ------------------------------>
3121     Torch9800 Skin (444x779) offset (40x142)*/
3122
3123 .viewport-wrapper-Torch9800 {
3124     width: 360px;
3125     height: 480px;
3126     border: none;
3127 }
3128
3129 .device-wrapper-Torch9800 {
3130     position: relative;
3131     padding: 142px 0 0 40px;
3132     width: 404px;
3133     height: 637px;
3134     margin: 0 auto;
3135     border: none;
3136     -webkit-box-shadow: none;
3137     -moz-box-shadow: none;
3138     box-shadow: none;
3139     background: url('images/Torch9800.png') no-repeat;
3140 }
3141
3142 .menu-button-wrapper-Torch9800 {
3143     position: relative;
3144     display: inline-block;
3145     margin: 32px 0 0 75px;
3146     width: 55px;
3147     height: 65px;
3148     cursor: pointer;
3149 }
3150
3151 .back-button-wrapper-Torch9800 {
3152     position: relative;
3153     display: inline-block;
3154     margin: 0 0 0 92px;
3155     width: 55px;
3156     height: 65px;
3157     cursor: pointer;
3158 }
3159
3160 .viewport-wrapper-landscape-Torch9800 {
3161     margin: -99px 0 0 103px;
3162     width: 480px;
3163     height: 360px;
3164     border: none;
3165 }
3166
3167 .device-wrapper-landscape-Torch9800 {
3168     position: relative;
3169     padding: 142px 0 0 40px;
3170     width: 739px;
3171     height: 302px;
3172     margin: 0 auto;
3173     border: none;
3174     -webkit-box-shadow: none;
3175     -moz-box-shadow: none;
3176     box-shadow: none;
3177     background: url('images/Torch9800_landscape.png') no-repeat;
3178 }
3179
3180 .menu-button-wrapper-landscape-Torch9800{
3181     position: relative;
3182     margin: -137px 0 0 618px;
3183     width: 55px;
3184     height: 65px;
3185     cursor: pointer;
3186 }
3187
3188 .back-button-wrapper-landscape-Torch9800 {
3189     position: relative;
3190     margin: -212px 0 0 618px;
3191     width: 55px;
3192     height: 65px;
3193     cursor: pointer;
3194 }
3195
3196