css/general.css

   1 /*GENERAL CSS*/
   2
   3 * {
   4         /*Reset default browser styles*/
   5         margin: 0;
   6         padding: 0;
   7         border: none;
   8         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   9         -webkit-user-select: none;
  10 }
  11
  12 html, body {
  13         /*GLOBAL HTML and BODE Dimansions*/
  14         width: 100%;
  15         min-height: 100%;
  16 }
  17
  18 body {
  19         /*FONT FAMILY*/
  20         font-family: sans-serif;
  21         /*Defaul font size*/
  22         font-size: 16px;
  23         background-color: #000;
  24         color: #fff;
  25         overflow:hidden;
  26 }
  27
  28 /*Default style for all images*/
  29
  30 img {
  31         border-width: 0px;
  32         border-style: none;
  33         margin: 0px;
  34         padding: 0px;
  35         z-index: 1000;
  36         pointer-events: none;
  37 }
  38
  39 /*Default style for all DIVs*/
  40
  41 div {
  42         position: absolute;
  43         margin: 0;
  44         padding: 0;
  45 }
  46
  47 .windowText {
  48         top: 190px;
  49         width: 800px;
  50         font-size: 80px;
  51         color: white;
  52         text-align: center;
  53 }
  54
  55 /*FORD CONTAINER  DEFAULT DIMANSIONS */
  56
  57 #app {
  58         /*position:relative;*/
  59         width: 720px;
  60         height: 995px;
  61     top: 85px;
  62         /*overflow: hidden;
  63          Mac font smoothing */
  64         -webkit-font-smoothing: antialiased;
  65         /*margin: 25px auto;*/
  66 }
  67
  68
  69 /* TTS popUp*/
  70
  71 #TTSPopUp.TTSPopUp{
  72         opacity: 0;
  73         left: 500px;
  74         width: 295px;
  75         height: 100px;
  76         background-color: black;
  77         z-index: 1;
  78         border-radius: 10PX;
  79         border: #A6A6A6 solid 2px;
  80         top: 8px;
  81         -webkit-transition: opacity 1s ease-in-out;
  82         display: none;
  83 }
  84
  85 #TTSPopUp .popUp{
  86         width: 294px;
  87         height: 98px;
  88         border: 1px solid black;
  89         border-radius: 10px;
  90 }
  91
  92 #TTSPopUp .message{
  93         top: 10px;
  94         left: 10px;
  95         width: 278px;
  96         height: 81px;
  97 }
  98
  99 #TTSPopUp.active{
 100         opacity: 1;
 101         display: block;
 102 }
 103 /* Diver Distraction PopUp */
 104 #driverDistraction.driverDistractionWindow{
 105         left: 0;
 106         top: 0;
 107         width: 800px;
 108         height: 480px;
 109         background: rgba(0, 0, 0, 0.7);
 110         z-index: 30000;
 111         opacity: 0;
 112         display: none;
 113 }
 114
 115 #driverDistraction .driverDistraction{
 116         left: 200px;
 117         width: 400px;
 118         height: 200px;
 119         z-index: 2;
 120         top: 140px;
 121         -webkit-transition: opacity 1s ease-in-out;
 122         background-color: black;
 123         border: #A6A6A6 solid 2px;
 124         border-radius: 6px;
 125 }
 126
 127 #driverDistraction.active{
 128         opacity: 1;
 129         display: block;
 130 }
 131
 132 #driverDistraction .driverDistractionText{
 133         top: 224px;
 134         left: 210px;
 135         width: 374px;
 136         height: 20px;
 137         text-align: center;
 138         font-size: 28px;
 139         z-index: 2;
 140 }
 141 /* UI popUp*/
 142
 143 /* VR popUp*/
 144
 145 #VRPopUp.VRPopUp{
 146         opacity: 0;
 147         left: 50px;
 148         width: 700px;
 149         height: 340px;
 150         background-color: black;
 151         z-index: 2;
 152         border-radius: 10PX;
 153         top: 70px;
 154         -webkit-transition: opacity 1s ease-in-out;
 155         display: none;
 156 }
 157
 158 #VRPopUp span{
 159         margin-left: 15px;
 160 }
 161
 162 #VRPopUp .popUp{
 163         width: 698px;
 164         height: 338px;
 165         border: 1px solid white;
 166         border-radius: 10px;
 167 }
 168
 169 #VRPopUp .message1{
 170         top: 10px;
 171         left: 10px;
 172         width: 278px;
 173         height: 81px;
 174 }
 175
 176 #VRPopUp .message2{
 177         top: 40px;
 178         left: 10px;
 179         width: 278px;
 180         height: 81px;
 181 }
 182
 183 #VRPopUp.active{
 184         opacity: 1;
 185         display: block;
 186 }
 187
 188
 189 #VRPopUp .list{
 190         position: absolute;
 191         width: 629px;
 192         height: 251px;
 193         border-radius: 2px;
 194         left: 35px;
 195         top: 70px;
 196 }
 197
 198 #VRPopUp .list-content{
 199         border: none;
 200 }
 201
 202 #VRPopUp .list-item {
 203         position: relative;
 204         width: 100%;
 205         height: 48px;
 206         font-size: 20px;
 207         line-height: 50px;
 208         border: 1px solid #393939;
 209 }
 210
 211 #VRPopUp .list-content{
 212         width: 578px;
 213 }
 214
 215 #VRPopUp .VRLabel{
 216         top: 10px;
 217         width: 550px;
 218         left: 35px;
 219         height: 20px;
 220         padding: 15px;
 221         background: #393939;
 222 }
 223
 224 #VRPopUp .VRImage{
 225         right: 25px;
 226         width: 50px;
 227         height: 50px;
 228         top: 10px;
 229         background: url(../images/home/controlButtons/vrImage.png) no-repeat;
 230         background-size: contain;
 231 }
 232
 233 /*WRAPER FOR CONTENT VIEW*/
 234
 235 #app_active_view {
 236         position: absolute;
 237         width: 800px;
 238         height: 480px;
 239 }
 240
 241 #html5Player {
 242         position: absolute;
 243         z-index: 1;
 244         width:800px;
 245         height:480px;
 246         -webkit-transform: translateX(-810px);
 247         -moz-transform: translateX(-810px);
 248 }
 249 #html5Player.visible{
 250         -webkit-transform: translateX(0px) !important;
 251 }
 252 #mode {
 253         position: relative;
 254         margin: 150px auto;
 255         width: 150px;
 256 }
 257
 258 /* Image preloader block*/
 259
 260 #preloader{
 261         position: absolute;
 262         left: -9999px;
 263         top: -9999px;
 264 }
 265
 266 /*CLOCK*/
 267
 268 #clock {
 269         font-size: 28px;
 270         text-align: center;
 271         width: 225px;
 272         height: 50px;
 273         position: relative;
 274         float: left;
 275         pointer-events: all;
 276         cursor: pointer;
 277     display:none;
 278 }
 279
 280 #clock.mcs {
 281         width: 225px;
 282 }
 283
 284 #time_num {
 285         width: 100%;
 286         padding: 10px;
 287         margin-left: 5px;
 288 }
 289
 290 #app_top_menu_cont {
 291         z-index: 10000;
 292         top: 0px;
 293         left: 275px;
 294         position: relative;
 295         pointer-events: none;
 296 }
 297
 298 #top_controls {
 299         width: 322px;
 300         height: 58px;
 301         background: url("../images/common/header_bg.png") no-repeat;
 302         z-index: 2;
 303     display:none;
 304 }
 305
 306 .not-visible {
 307         visibility: hidden !important;
 308 }
 309
 310 /* Universal class to show hidden elements */
 311
 312 .visible {
 313         visibility: visible !important;
 314 }
 315
 316 /* Universal class to show transparent elements */
 317
 318 .show {
 319         opacity: 1 !important;
 320 }
 321
 322 .arrow-ico {
 323         position: absolute;
 324         right: 10px;
 325 }
 326
 327 .right_text {
 328         float: right;
 329         margin-right: 10px;
 330         font-style: italic;
 331 }
 332
 333 .helpmode_block {
 334         visibility: hidden;
 335 }
 336
 337 .helpmode_blur_cont div {
 338         visibility: hidden;
 339 }
 340
 341 .helpmode_blur_cont span {
 342         visibility: hidden;
 343 }
 344
 345 .helpmode_blur_cont img {
 346         visibility: hidden;
 347 }
 348
 349 .helpmode_box {
 350         border-radius: 0px !important;
 351         -moz-box-shadow: 0 0 5px 3px #f3c800;
 352         -webkit-box-shadow: 0 0 8px 5px #f3c800;
 353         box-shadow: 0 0 8px 5px #f3c800;
 354 }
 355
 356 .helpmode_blur_text { /* deep blur*/
 357         border: none !important;
 358         background: none !important;
 359         color: transparent !important;
 360         text-shadow: 0 0 6px #fff;
 361 }
 362
 363 .helpmode_blur_text_light { /* light blur*/
 364         color: transparent !important;
 365         text-shadow: 0 0 3px #fff;
 366 }
 367
 368 .helpmode_blur_black_text
 369 {
 370     color: transparent !important;
 371     text-shadow: 0 0 3px #000 !important;
 372 }
 373
 374 .helpmode_divider {
 375         background-color: #E8C803;
 376         position: absolute;
 377         z-index: 2002;
 378 }
 379
 380 .hidden_display{
 381         display: none !important ;
 382 }
 383
 384 .visible_display{
 385         display: block !important;
 386 }
 387
 388 /*STATUS BAR*/
 389
 390 .status_bar {
 391         z-index: 2001;
 392         line-height: 50px;
 393 }
 394
 395 .selected {
 396         display: none;
 397 }
 398
 399 /*BOTTOM Control BUTTONS*/
 400
 401 #app_bottom_controlls {
 402         z-index: 11000;
 403         bottom: 0px;
 404         left: 320px;
 405         width: 252px;
 406         height: 59px;
 407         /*background: url(../images/common/bottom_cont_bg.png) no-repeat;*/
 408         overflow: hidden;
 409         pointer-events: none;
 410     /* top:650px; */
 411     position:absolute;
 412 }
 413
 414 #home_active {
 415         z-index: 2002;
 416         bottom: 0px;
 417         left: 275px;
 418         width: 250px;
 419         height: 58px;
 420         background: url("../../images/common/home_active.png") no-repeat;
 421 }
 422
 423 #home_but {
 424         height: 59px;
 425         width: 73px;
 426         cursor: pointer;
 427         z-index: 1000;
 428         background: url(../images/home/bottom_controlls_full.png) no-repeat;
 429         background-position: -90px -59px;
 430         position: relative;
 431         float: left;
 432         pointer-events: none;
 433 }
 434
 435 #home_but.large {
 436         width: 126px;
 437         background-position: 0px -177px;
 438 }
 439
 440 #home_but.large.selected {
 441         width: 126px;
 442         background-position: 0px -118px;
 443 }
 444
 445 #home_but.selected {
 446         background-position: -90px 0px;
 447         display: block;
 448 }
 449
 450 #home_but_click {
 451         height: 59px;
 452         width: 73px;
 453         cursor: pointer;
 454         z-index: 1001;
 455         position: absolute;
 456         pointer-events: all;
 457
 458 }
 459
 460 #home_but_click.large {
 461         width: 125px;
 462         height: 115px;
 463         -webkit-transform: skew(0deg, -42deg);
 464 }
 465
 466 /*INFO BUTTON*/
 467
 468 #info_but_click {
 469         height: 117px;
 470         width: 88px;
 471         cursor: pointer;
 472         z-index: 1001;
 473         position: absolute;
 474         pointer-events: all;
 475         -webkit-transform: skew(0deg, -52deg);
 476 }
 477
 478 #info_but {
 479         height: 59px;
 480         width: 90px;
 481         cursor: pointer;
 482         background: url(../images/home/bottom_controlls_full.png) no-repeat;
 483         background-position: 0px -59px;
 484         position: relative;
 485         float: left;
 486         z-index: 1001;
 487         pointer-events: none;
 488         -webkit-border-top-left-radius: 10px;
 489 }
 490
 491 #info_but.selected {
 492         background-position: 0px 0px;
 493         display: block;
 494 }
 495
 496 /*SETTINGS BUTTON*/
 497
 498 #setting_but {
 499         width: 89px;
 500         height: 59px;
 501         cursor: pointer;
 502         background: url(../images/home/bottom_controlls_full.png) no-repeat;
 503         background-position: -162px -59px;
 504         position: relative;
 505         float: left;
 506         pointer-events: none;
 507 }
 508
 509 #setting_but.large {
 510         width: 126px;
 511         background-position: -126px -177px;
 512 }
 513
 514 #setting_but.large.selected {
 515         width: 126px;
 516         background-position: -126px -118px;
 517 }
 518
 519 #setting_but.selected {
 520         background-position: -162px 0px;
 521         display: block;
 522 }
 523
 524 #setting_but_click {
 525         width: 83px;
 526         height: 110px;
 527         cursor: pointer;
 528         position: absolute;
 529         -webkit-transform: skew(0deg, 52deg);
 530         left: 1px;
 531         top: 4px;
 532         z-index: 1000;
 533         pointer-events: all;
 534 }
 535
 536 #setting_but_click.large {
 537         width: 158px;
 538         height: 155px;
 539 }
 540
 541 /*HIDDEN FOR CONTENT BLOCKS*/
 542
 543 .hidden {
 544         -webkit-transform: translateX(-2000px);
 545         -moz-transform: translateX(-2000px);
 546 }
 547
 548 /*ACTIVE VISIBLE FOR CONTENT BLOCK*/
 549
 550 .inactive_state {
 551         -webkit-transform: translateX(-2000px);
 552         -moz-transform: translateX(-2000px);
 553 }
 554
 555 .active_state {
 556         -webkit-transform: translateX(0px) !important;
 557         -moz-transform: translateX(0px) !important;
 558 }
 559
 560 .passive_button_color {
 561         color: #999 !important;
 562 }
 563
 564 /*MEDIA BLOCK CONTAINER*/
 565
 566
 567 #media {
 568         width: 800px;
 569         height: 480px;
 570     display:block;
 571 }
 572
 573
 574 /****************************** FOR MEDIA VIEW************************************************/
 575
 576 /*#media, #browseUsbHD {
 577         background: url(../images/media/bg.png) no-repeat;
 578 }
 579
 580 #media_view {
 581         width: 800px;
 582         height: 480px;
 583 }
 584
 585 #media_view #cntrlMenu {
 586         position: relative;
 587         margin-top: 90px;
 588 }*/
 589
 590 /*Video Player*/
 591 /*******Player Controlls View********/
 592
 593
 594 #video_player_view {
 595         top: 85px;
 596         left: 93px;
 597         z-index: 2002;
 598         display: block;
 599 }
 600
 601 /*Holder for all progressbar elements*/
 602
 603 #video_player_view .progressline_holder {
 604         display: block;
 605         width: 537px;
 606         height: 10px;
 607         cursor: pointer;
 608         background: url(../images/player/player_prog_bg.png) no-repeat;
 609 }
 610
 611 /*Style to fix actual width for progress bar concerning width of progrees bar mark*/
 612
 613 .progressline_width_fix {
 614         width: 537px;
 615         position: absolute;
 616 }
 617
 618 /*Progressbar*/
 619
 620 #video_player_view .progressbar {
 621         display: block;
 622         height: 10px;
 623         background: url(../images/player/prog_ind.png) no-repeat;
 624         position: relative;
 625         float: left;
 626 }
 627
 628 /*Current time*/
 629
 630 .current_time {
 631         width: 33px;
 632         height: 15px;
 633         top: -4px;
 634         left: -55px;
 635         font-weight: bold;
 636 }
 637
 638 /*Total time*/
 639
 640 .total_time {
 641         width: 33px;
 642         height: 15px;
 643         left: 546px;
 644         top: -4px;
 645         font-weight: bold;
 646 }
 647
 648 /*Drag Area*/
 649
 650 .drag_area {
 651         width: 561px;
 652         position: relative;
 653         float: left;
 654         height: 10px;
 655 }
 656
 657 /*Progress bar mark*/
 658
 659 #mark {
 660         position: relative;
 661         float: left;
 662         bottom: 19px;
 663         left: -20px;
 664         background:url(../images/player/player_free_control.png) no-repeat;
 665         width:50px;
 666         height:50px;
 667 }
 668
 669 #mark.active{
 670         background:url(../images/player/player_active_control.png) no-repeat !important;
 671         bottom:20px !important;
 672         left:-21px !important;
 673         width:52px !important;
 674         height:52px !important;
 675 }
 676
 677 /*Back Button*/
 678
 679 #back {
 680         width: 80px;
 681         height: 50px;
 682         cursor: pointer;
 683         top: 60px;
 684         left: 140px;
 685         border:1px solid #393939;
 686 }
 687
 688 #back .ico {
 689         top: 13px;
 690         left: 20px;
 691         position: relative;
 692 }
 693
 694 /* Forward Button*/
 695
 696 #frw {
 697         width: 79px;
 698         height: 49px;
 699         cursor: pointer;
 700         top: 60px;
 701         left: 347px;
 702         border:1px solid #393939;
 703         -webkit-border-radius:3px;
 704 }
 705
 706 #frw .ico {
 707         top: 13px;
 708         left: 24px;
 709         position: relative;
 710 }
 711
 712 /*Play Button*/
 713
 714 #play {
 715         width: 79px;
 716         height: 49px;
 717         cursor: pointer;
 718         top: 60px;
 719         left: 244px;
 720         border:1px solid #393939;
 721         -webkit-border-radius:3px;
 722 }
 723
 724
 725 #play .play {
 726         top: 13px;
 727         left: 31px;
 728         position: relative;
 729 }
 730
 731 #play .pause {
 732         top: 10px;
 733         left: 28px;
 734         position: relative;
 735 }
 736
 737 /*Stop Button*/
 738
 739 #stop {
 740         width: 79px;
 741         height: 49px;
 742         cursor: pointer;
 743         top: -18px;
 744         left: 585px;
 745         border:1px solid #393939;
 746         -webkit-border-radius:3px;
 747 }
 748
 749 #stop .ico {
 750         top: 17px;
 751         left: 18px;
 752         position: relative;
 753 }
 754
 755 /********************FOR TEST PURPOSE ONLY********************/
 756
 757 .centered {
 758         position: absolute;
 759         width: 300px;
 760         height: 200px;
 761         border: 2px solid #999;
 762         color: white;
 763         text-align: center;
 764         margin: 100px auto;
 765         line-height: 190px;
 766         font-size: 24px;
 767         left: 240px;
 768 }
 769
 770 /**************************FOR LIST***************************/
 771
 772 /* List */
 773 .list {
 774         position: relative;
 775         overflow: hidden;
 776 }
 777
 778 .list-content {
 779         border-top: 1px solid #393939;
 780         border-left: 1px solid #393939;
 781         border-right: 1px solid #393939;
 782 }
 783
 784 /* List item */
 785 .list-item {
 786         position: relative;
 787         width: 100%;
 788         height: 49px;
 789         font-size: 20px;
 790         line-height: 50px;
 791         border-bottom: 1px solid #393939;
 792 }
 793
 794 /* List item background */
 795 .list-item.notpressed {
 796         background-image: url(../images/list/list_item_bg.png);
 797 }
 798
 799 .list-item .highLighted{
 800
 801 }
 802
 803 /*************************FOR SCROLLBAR*************************/
 804 /*
 805 .scrollBar{
 806         position: relative;
 807         width: 48px;
 808         background: black;
 809         border: 1px solid       #393939;
 810         border-top-right-radius: 1px;
 811         border-top-left-radius: 1px;
 812         border-bottom-right-radius: 1px;
 813         border-bottom-left-radius: 1px;
 814         float: right;
 815 }
 816 */
 817
 818 .scrollbar {
 819         position: absolute;
 820         top: 0px;
 821         right: 0px;
 822         width: 48px;
 823         background: black;
 824         border: 1px solid #393939;
 825         border-top-right-radius: 2px;
 826         border-top-left-radius: 2px;
 827         border-bottom-right-radius: 2px;
 828         border-bottom-left-radius: 2px;
 829 }
 830
 831 .sb-content {
 832         width: 48px;
 833         background: black;
 834         border: 1px solid #393939;
 835         border-top-right-radius: 2px;
 836         border-top-left-radius: 2px;
 837         border-bottom-right-radius: 2px;
 838         border-bottom-left-radius: 2px;
 839 }
 840
 841 /* Top button */
 842
 843 .sb-top {
 844         height: 48px;
 845         width: 48px;
 846         border-bottom: #393939 1px solid;
 847         position: relative;
 848         cursor: pointer;
 849 }
 850
 851 /* Background of scrollbar */
 852
 853 .sb-body {
 854         height: 148px;
 855         width: 46px;
 856         background-color: #262626;
 857         margin: 1px;
 858         position: relative;
 859 }
 860
 861 /* Bar */
 862
 863 .sb-bar {
 864         width: 46px;
 865         height: 146px;
 866         background: #464646;
 867         position: relative;
 868         bottom: 10px;
 869         -webkit-transition: top 0.2s ease-out;
 870 }
 871
 872 /* Bottom button */
 873
 874 .sb-bottom {
 875         height: 48px;
 876         width: 48px;
 877         border-top: #393939 1px solid;
 878         position: absolute;
 879         cursor: pointer;
 880         bottom: 0px;
 881 }
 882
 883 /* Buttons image position */
 884
 885
 886 .sb-bottom img, .sb-top img {
 887         margin-top: 13px;
 888         margin-left: 13px;
 889 }
 890
 891 /* List item  button background */
 892
 893 .list-item.pressed {
 894         background-image: url(../images/list/list_item_pressed.png);
 895 }
 896
 897 /** Background for pressed button */
 898
 899 .button.pressed {
 900         background-image: url(../images/list/list_item_pressed.png);
 901 }
 902
 903 /* Hide function */
 904
 905 .is-disabled {
 906         display: none;
 907 }
 908
 909 .hide {
 910         visibility: hidden;
 911 }
 912
 913 /* Disabled list items */
 914
 915 .disabled {
 916         color: #999;
 917 }
 918
 919 .disabled .ico,
 920 .disabled .right_ico  {
 921         opacity: .3;
 922 }
 923
 924 .disabled .arrow-ico {
 925         opacity: .3;
 926 }
 927
 928 /* HELP SIGN */
 929
 930 .help_dev {
 931         width: 4px;
 932         height: 53px;
 933         background: url(../images/help/help_devider.png) no-repeat;
 934         left: 159px;
 935         pointer-events: none;
 936 }
 937
 938 #help {
 939         width: 84px;
 940         height: 53px;
 941         left: 163px;
 942         cursor: pointer;
 943         z-index: 5000;
 944         overflow: hidden;
 945         pointer-events: none;
 946         background: none;
 947 }
 948
 949 #help.disabled {
 950         opacity: .3;
 951 }
 952
 953 #help-p {
 954         width: 93px;
 955         height: 53px;
 956         cursor: pointer;
 957         z-index: 5000;
 958         -webkit-transform: skewX(-43deg);
 959         pointer-events: all;
 960         left: -27px;
 961 }
 962
 963 #help.pressed {
 964         background: url(../images/help/help_pressed.png) no-repeat;
 965 }
 966
 967 #sing {
 968         width: 19px;
 969         height: 27px;
 970         left: 13px;
 971         top: 13px;
 972 }
 973
 974 #sing.white {
 975         background: url(../images/help/white_help.png) no-repeat;
 976 }
 977
 978 #sing.yellow {
 979         background: url(../images/help/yellow_help.png) no-repeat;
 980 }
 981
 982 #help .inact {
 983         position: absolute;
 984         left: 42px;
 985         top: 13px;
 986         width: 6px;
 987         height: 21px;
 988         background: url(../images/climate/ind_vert_def.png) no-repeat;
 989 }
 990
 991 #help .act {
 992         position: absolute;
 993         left: 35px;
 994         top: 8px;
 995         background: url(../images/climate/ind_vert_active.png) no-repeat;
 996         width: 19px;
 997         height: 32px;
 998 }
 999
1000 /******************** FOR FAQ ********************************/
1001
1002 #faq_btn {
1003         cursor: pointer;
1004         width: 145px;
1005         height: 53px;
1006         background: url(../images/help/faq_top_btn.png) no-repeat;
1007         top: 0;
1008         left: 110px;
1009         z-index: 0;
1010         pointer-events: none;
1011         -webkit-transition: left 0.5s ease-in-out;
1012 }
1013
1014 .faq-pressed {
1015         left: 0px !important;
1016 }
1017
1018 #faq_btn.pressed {
1019         background: url(../images/help/faq_top_btn_pressed.png) no-repeat !important;
1020 }
1021
1022 #faq_btn .ico {
1023         position: absolute;
1024         right: 32px;
1025         top: 8px;
1026 }
1027
1028 #faq_btn_c {
1029         width: 118px;
1030         height: 50px;
1031         -webkit-transform: skewX(-43deg);
1032         z-index: 1;
1033         cursor: pointer;
1034         pointer-events: all;
1035 }
1036
1037 #faq_btn .ind_inact {
1038         background: url(../images/help/ind_vert_def.png) no-repeat;
1039         position: absolute;
1040         right: 32px;
1041         top: 8px;
1042         width: 19px;
1043         height: 32px;
1044 }
1045
1046 #faq_btn .ind_act {
1047         background: url(../images/help/ind_vert_active.png) no-repeat;
1048         position: absolute;
1049         right: 32px;
1050         top: 8px;
1051         width: 19px;
1052         height: 32px;
1053 }
1054
1055 .button {
1056         background-image: url(../images/list/list_item_bg.png);
1057         cursor: pointer;
1058 }
1059
1060 .button  img{
1061         float: left;
1062 }
1063
1064 /* default style */
1065
1066 * {
1067         margin: 0;
1068         padding: 0;
1069         border: 0;
1070         -webkit-user-select: none;
1071 }
1072
1073 /******************* For FAQ View *******************/
1074 #fag_view {
1075         font-size: 20px;
1076         display: block;
1077         background: url(../images/help/faq_bg.png) no-repeat;
1078         width: 800px;
1079         height: 384px;
1080         position: absolute;
1081         top: 48px;
1082 }
1083
1084 #faq_view_list {
1085         position: relative;
1086         margin-left: 115px;
1087         margin-top: 34px;
1088         height: 251px;
1089         width: 630px;
1090         float: left;
1091 }
1092
1093 #faq_view_list .list-content {
1094         width: 570px;
1095 }
1096
1097 #fag_view .list-item {
1098         position: relative;
1099         width: 570px;
1100         height: 49px;
1101         font-size: 20px;
1102         line-height: 50px;
1103         border-bottom: 1px solid #393939;
1104         cursor: pointer;
1105         float: left;
1106 }
1107
1108 #fag_view .list-item span{
1109         left: 5px;
1110         margin-top: 18px;
1111         margin-left: 17px;
1112 }
1113
1114 /* Faq bottom text*/
1115 #faq_bottom {
1116         bottom: 19px;
1117         width: 764px;
1118         height: 50px;
1119         font-size: 18px;
1120         float: left;
1121         margin-top: 31px;
1122         margin-left: 36px;
1123 }
1124
1125 #faq_bottom div{
1126         float: left;
1127         width: 764px;
1128 }
1129
1130 #faq_bottom .second-line{
1131         top: 22px;
1132 }
1133 #settings_view {
1134         width: 800px;
1135         height: 480px;
1136 }
1137
1138 .block {
1139         display: block !important;
1140 }
1141
1142 .test_blur {
1143         width: 800px;
1144         height: 480px;
1145         top: -55px;
1146         z-index: 1001;
1147         opacity: .6;
1148         background-color: black;
1149         box-shadow: 3px;
1150 }
1151
1152 .pointer {
1153         cursor: pointer !important;
1154 }
1155
1156 /*CAUTION MESSAGE*/
1157 #warning_view{width: 800px;height: 480px;z-index: 12001;
1158 background-image: -webkit-gradient(
1159         linear,
1160         left bottom,
1161         left top,
1162         color-stop(0, rgb(218,218,218)),
1163         color-stop(0.3, rgb(0,0,0))
1164 );}
1165
1166 #warning_view.fr .text{
1167         font-size: 23px;
1168 }
1169
1170 #warning_view .message{ width:744px; height:340px; position:relative; margin:0 auto; top:15px;}
1171 #warning_view .warning_text{ position: relative;margin: 0 auto;width: 216px;font-size: 42px;font-weight: bold;top: 20px;  text-shadow: 1px 1px 3px white; color: #CC2A2A;}
1172 #warning_view .text{ font-size:25px; position:relative; top:15px; font-weight:bold;}
1173 #warning_view .okbut{width: 130px;height: 51px;position: relative;top: 30px;cursor: pointer;float:right; margin-right:83px; display:none; font-size: 20px;
1174 text-align: center;
1175 line-height: 50px;}
1176
1177 .hideWarning{
1178    width: 0px !important;
1179    overflow: hidden;
1180    z-index:-1 !important;
1181
1182 }
1183
1184
1185 .fadeWarning {
1186         opacity: 0;
1187         transition:opacity 1s;
1188         -moz-transition:opacity 1s;
1189         -webkit-transition:opacity 1s;
1190         -o-transition:opacity 1s;
1191 }
1192
1193 #warning_view.fadeAnimation{
1194
1195         -webkit-animation-name: opacity;
1196         -webkit-animation-duration:1s;
1197         -webkit-animation-timing-function:linear;
1198         -webkit-animation-fill-mode:forwards;
1199 }
1200
1201 @-webkit-keyframes opacity {
1202     from {
1203                 opacity: 1;
1204     }
1205     to {
1206                 opacity: 0;
1207     }
1208 }
1209
1210 /* Welcome Orientation View*/
1211
1212
1213 #app_welcome_orientation_view{
1214         width:800px;
1215         height:480px;
1216         z-index:12000;
1217 }
1218
1219 #app_welcome_orientation_balck_mask_view {
1220         width:800px;
1221         height:480px;
1222         background:#000;
1223         opacity:0.75;
1224 }
1225
1226
1227 #app_welcome_orientation_popup_text{
1228         position: relative;
1229         margin: 0px auto;
1230         font-size: 30px;
1231         text-align: center;
1232         width: 410px;
1233         margin-top:18px;
1234 }
1235
1236 #app_welcome_orientation_denypopup_text{
1237         position: relative;
1238         margin: 0px auto;
1239         font-size: 28px;
1240         text-align: center;
1241         width: 460px;
1242         margin-top: 53px;
1243 }
1244
1245 #app_welcome_orientation_popup_buttons{
1246         width: 266px;
1247         height: 53px;
1248         border: 1px solid #333;
1249         position: relative;
1250         margin: 20px auto 0px;
1251 }
1252
1253 #app_welcome_orientation_popup_lable{
1254         position: relative;
1255         width: 479px;
1256         height: 70px;
1257         border:1px solid #fff;
1258         text-align: center;
1259         margin: 0px auto;
1260         margin-top:70px;
1261         font-size:25px;
1262         font-family:Helvetica;
1263 }
1264
1265 #app_welcome_orientation_popup_lable span {
1266         position:relative;
1267         top: 5px;
1268         width: 432px;
1269 }
1270
1271 #app_welcome_orientation_popup_view, #wo_denypopup{
1272         width: 546px;
1273         height: 346px;
1274         background: #000;
1275         z-index: 12002;
1276         left: 134px;
1277         top: 46px;
1278         border: 2px solid #A28542;
1279         -webkit-border-radius: 4px;
1280 }
1281
1282 #wo_popup_btn_divider{
1283         width: 4px;
1284         height: 48px;
1285         background: url(../images/common/divider.png) no-repeat;
1286         left: 131px;
1287         z-index: 1;
1288 }
1289
1290 #wo_popup_yes_button , #wo_popup_no_button{height: 52px;
1291         width:132px;
1292         cursor: pointer;
1293         position: relative;
1294         float: left;
1295         font-size: 20px;
1296         text-align: center;
1297         line-height: 52px;
1298 }
1299
1300 #wo_popup_yes_button {
1301         border-right:1px solid #000;
1302 }
1303
1304 #wo_popup_no_button {
1305         border-left:1px solid #393939;
1306 }
1307
1308 #wo_popup_denypopup_ok_button{
1309         width: 238px;
1310         height:48px;
1311         background: url(../images/common/bt_bg.png) repeat-x;
1312         cursor: pointer;
1313         position: relative;
1314         float: left;
1315         font-size: 20px;
1316         font-weight: bold;
1317         text-align: center;
1318         line-height: 50px;
1319         border:1px solid #333;
1320         left: 155px;
1321         top: 80px;
1322         -webkit-border-radius: 4px;
1323 }
1324
1325 #woSkippButton{
1326         width: 80px;
1327         height: 50px;
1328         cursor: pointer;
1329         top: 370px;
1330         left: 710px;
1331         font-size: 21px;
1332         text-align: center;
1333         line-height: 48px;
1334         z-index: 10000;
1335         border: 1px solid white;
1336         -webkit-border-radius: 3px;
1337         background:url(../images/common/skippbuttonbg_pressed.png) no-repeat;
1338         opacity:0.75;
1339         display:none;
1340 }
1341
1342
1343 #woSkippButton .right_text{
1344         margin-top:2px;
1345 }
1346
1347 #woSkippButton.pressed{
1348         background:url(../images/common/skippbuttonbg_pressed.png) no-repeat !important;
1349 }
1350
1351
1352 #wo_popup_yes_button.pressed , #wo_popup_no_button.pressed, #wo_popup_denypopup_ok_button.pressed {
1353         background:url(../images/common/bt_bg_pressed.png) repeat-x !important;
1354 }
1355 /* END Welcome Orientation View*/
1356
1357
1358 /* Video Error Popup*/
1359
1360 #video_error_popup{
1361         background: black;
1362         border: 1px solid #A03333;
1363         -webkit-border-radius: 3px;
1364         font-size: 23px;
1365         font-weight: bold;
1366         left: 308px;
1367         text-align: center;
1368         top: 170px;
1369         z-index: 12100;
1370         position: absolute;
1371         padding: 10px;
1372         display:none;
1373 }
1374
1375 .mft_indicator {
1376         opacity: 0;
1377 }
1378
1379 /* Lable plus Button*/
1380 .lablePlusButton .button {
1381         float:          right;
1382         right:          0px;
1383         width:          323px;
1384         height:            49px;
1385         border-left:  1px solid #393939;
1386 }
1387
1388 .lablePlusButton .lable span,
1389 .lablePlusButton .button span {
1390         margin-left:  13px;
1391 }
1392
1393 .lablePlusButton .button.single {
1394         width: 148px;
1395         height: 28px;
1396         border: 1px solid #393939;
1397         border-radius: 2px;
1398         margin-top: 10px;
1399         margin-right: 10px;
1400         text-align: center;
1401         line-height: 28px;
1402         float: right;
1403 }
1404
1405 .lablePlusButton .button.single span{
1406         margin:  0px;
1407 }
1408
1409 /* ****************Select System Popup *********************** */
1410
1411 #select_sysytem_view{
1412         width: 796px;
1413         height: 475px;
1414         top:1px;
1415         border: 2px solid #926100;
1416         background:#000;
1417         z-index:12002;
1418         -webkit-border-radius: 4px;
1419 }
1420
1421 /* header lable*/
1422 #select_system_heading_lable{
1423         position:relative;
1424         font-size:30px;
1425         text-align:center;
1426         margin-top:25px;
1427         margin-bottom:30px;
1428 }
1429
1430 /* content container*/
1431 #select_system_container {
1432         width:756px;
1433         height:200px;
1434         position:relative;
1435         margin: 0px auto;
1436         border: 1px solid #393939;
1437 }
1438
1439 /* vehicle select list*/
1440 #settings_list{
1441         height: 130px;
1442         position:relative;
1443 }
1444
1445 /* vehicle select list container*/
1446 #select_system_list{
1447         width: 545px;
1448         position:relative;
1449         float:right;
1450         margin-top:15px;
1451         margin-right:20px;
1452 }
1453
1454 /* vehicle select list buttons*/
1455 #settings_list .button{
1456         position:relative;
1457         width:135px;
1458         height:48px;
1459         font-size:20px;
1460         text-align:center;
1461         line-height: 48px;
1462         float:left;
1463         border-right:1px solid #393939;
1464         border-top:1px solid #393939;
1465         border-bottom:1px solid #393939;
1466 }
1467
1468 #settings_list .button.left-border{
1469         border-left: 1px solid #393939;
1470 }
1471
1472 #settings_list .button.active{
1473         background: url(../images/settings/btn-48h-gray-active.png) repeat-x !important;
1474         color: #000;
1475 }
1476
1477 #settings_list .button.bottom{
1478         margin-top:2px;
1479 }
1480 /* select climate style lable*/
1481 #select_system_label{
1482         font-size: 20px;
1483         width:135px;
1484         position:relative;
1485         float:left;
1486         margin-left:10px;
1487         margin-top:15px;
1488 }
1489
1490
1491 /* Navigation select block*/
1492 #navsdcard{
1493         height: 70px;
1494         position:relative;
1495         border-bottom: 1px solid #393939;
1496
1497 }
1498 /* Navigation select block button container*/
1499 #sdnav_buttons{
1500         position:relative;
1501         float:right;
1502         margin-top:10px;
1503         margin-right:20px;
1504 }
1505 /* Navigation select block button*/
1506 #navsdcard .button {
1507         width: 120px;
1508         height: 48px;
1509         border: 1px solid #393939;
1510         text-align: center;
1511         font-size: 20px;
1512         line-height: 48px;
1513         font-weight:bold;
1514 }
1515
1516 #navsdcard .button.active{
1517         background: url(../images/settings/btn-48h-gray-active.png) repeat-x !important;
1518         color: #000;
1519 }
1520
1521 #navsdcard_no_btn{
1522         position:relative;
1523         float:right;
1524 }
1525
1526 #navsdcard_yes_btn{
1527         position:relative;
1528         float:left;
1529 }
1530 /* navigation select lable*/
1531 #sdnav_label{
1532         position:relative;
1533         float:left;
1534         font-size:20px;
1535         margin-top:15px;
1536         margin-left:10px;
1537 }
1538
1539 /* Submit button*/
1540 #select_system_submit{
1541         width: 130px;
1542         height: 50px;
1543         z-index: 12002;
1544         position:relative;
1545         border: 1px solid #393939;
1546         text-align: center;
1547         font-size: 25px;
1548         font-weight: bold;
1549         line-height: 50px;
1550         margin: 50px auto;
1551 }
1552 /* Info Lable*/
1553 #select_system_info{
1554         position:relative;
1555         text-align:center;
1556         font-size:25px;
1557         margin-top:25px;
1558 }
1559
1560 #select_system_info span {
1561         border:1px solid #fff;
1562         padding: 5px 15px 5px 15px;
1563 }