summaryrefslogtreecommitdiff
path: root/src/components/HMI/css
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/HMI/css')
-rw-r--r--src/components/HMI/css/buttonControls.css546
-rw-r--r--src/components/HMI/css/general.css1560
-rw-r--r--src/components/HMI/css/info.css671
-rw-r--r--src/components/HMI/css/mcs.css3703
-rw-r--r--src/components/HMI/css/media.css528
-rw-r--r--src/components/HMI/css/navigation.css102
-rw-r--r--src/components/HMI/css/phone.css300
-rw-r--r--src/components/HMI/css/sdl.css1254
-rw-r--r--src/components/HMI/css/settings.css129
9 files changed, 8793 insertions, 0 deletions
diff --git a/src/components/HMI/css/buttonControls.css b/src/components/HMI/css/buttonControls.css
new file mode 100644
index 0000000000..39ef852853
--- /dev/null
+++ b/src/components/HMI/css/buttonControls.css
@@ -0,0 +1,546 @@
+/**
+ * buttonControls module CSS
+ *
+ * @category Style Sheets
+ * @filesource css/buttonControls.css
+ * @version 2.0
+ */
+#buttonControls.buttonControls {
+ width: 270px;
+ height: 200px;
+ top: 0px;
+ left: 790px;
+}
+
+#driverDistractionControl.driverDistractionControl {
+ width: 302px;
+ height: 20px;
+ top: 423px;
+ left: 810px;
+}
+
+#driverDistractionControl .driverDistractionControlLabel {
+ left: 20px;
+}
+
+#keyboard_view .back-button{
+ top: 58px;
+}
+
+#keyboard_view .controlls{
+ top: 350px;
+ width: 800px;
+ height: 75px;
+}
+
+#keyboard_view .controll{
+ margin: 10px;
+ height: 60px;
+ border: 1px solid #333;
+ text-align: center;
+ line-height: 60px;
+ border-radius: 3px;
+}
+
+#keyboard_view .controlls .leftBtn{
+ width: 130px;
+ left: 0px;
+}
+
+#keyboard_view .controlls .numericBtn{
+ width: 60px;
+ left: 145px;
+}
+
+#keyboard_view .controlls .symbolBtn{
+ width: 60px;
+ left: 220px;
+}
+
+#keyboard_view .controlls .spaceBtn{
+ width: 215px;
+ left: 295px;
+}
+
+#keyboard_view .controlls .caseSwitchBtn{
+ width: 60px;
+ left: 525px;
+}
+
+#keyboard_view .controlls .localisationBtn{
+ width: 60px;
+ left: 600px;
+}
+
+#keyboard_view .controlls .searchBtn{
+ width: 100px;
+ left: 677px;
+}
+
+#keyboard_view .keyboardLayout{
+ width: 750px;
+ height: 185px;
+ top: 170px;
+ left: 25px;
+}
+
+#keyboard_view .keyboardLayout.wide{
+ left: 5px !important;
+}
+
+#keyboard_view .searchBar{
+ top: 58px;
+ width: 666px;
+ height: 49px;
+ left: 120px;
+}
+
+#keyboard_view input{
+ width: 597px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ background: rgba(119, 119, 119, 0.42);
+ cursor: pointer;
+ font-size: 32px;
+ color: #FFF;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+#keyboard_view .microphone{
+ text-align: center;
+ line-height: 49px;
+}
+
+#keyboard_view .clearBtn{
+ right: 0px;
+ top: 0px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ font-size: 32px;
+ text-align: center;
+ line-height: 50px;
+}
+
+#keyboard_view .microphone{
+ left: 63px;
+ top: 58px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+}
+
+#keyboard_view .keyboardLayout .ffw-button{
+ width: 60px;
+ height: 50px;
+ border-radius: 3px;
+ border: 1px solid #333;
+ margin: 5px;
+ font-size: 42px;
+ text-align: center;
+ line-height: 50px;
+}
+#keyboard_view .keyboardLayout .k1{
+ left: 75px;
+}
+#keyboard_view .keyboardLayout .k2{
+ left: 150px;
+}
+#keyboard_view .keyboardLayout .k3{
+ left: 225px;
+}
+#keyboard_view .keyboardLayout .k4{
+ left: 300px;
+}
+#keyboard_view .keyboardLayout .k5{
+ left: 375px;
+}
+#keyboard_view .keyboardLayout .k6{
+ left: 450px;
+}
+#keyboard_view .keyboardLayout .k7{
+ left: 525px;
+}
+#keyboard_view .keyboardLayout .k8{
+ left: 600px;
+}
+#keyboard_view .keyboardLayout .k9{
+ left: 675px;
+}
+#keyboard_view .keyboardLayout .k10{
+ left: 38px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k11{
+ left: 113px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k12{
+ left: 188px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k13{
+ left: 263px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k14{
+ left: 338px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k15{
+ left: 413px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k16{
+ left: 488px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k17{
+ left: 563px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k18{
+ left: 638px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k19{
+ left: 713px;
+ top: 62px;
+}
+#keyboard_view .keyboardLayout .k20{
+ left: 0px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k21{
+ left: 75px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k22{
+ left: 150px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k23{
+ left: 225px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k24{
+ left: 300px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k25{
+ left: 375px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k26{
+ left: 450px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k27{
+ left: 525px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k28{
+ left: 600px;
+ top: 124px;
+}
+#keyboard_view .keyboardLayout .k29{
+ left: 675px;
+ top: 124px;
+}
+#infoTable.infoTable {
+ width: 400px;
+ height: 96px;
+ top: 308px;
+ left: 801px;
+ background-color: #383737;
+ color: white;
+ border: 1px solid gray;
+ overflow: hidden;
+}
+
+#infoTable .sdlGPLabel {
+ width: 190px;
+ border-right: 1px solid #14100F;
+ height: 96px;
+ position: relative;
+ float: left;
+}
+
+#infoTable .sdlGPData {
+ position: relative;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 203px;
+ height: 18px;
+}
+
+#buttonControls .ContainerControlls {
+ left: 34px;
+ background:
+ url(../images/home/controlButtons/backGroundControllButtons.png)
+ no-repeat;
+ width: 200px;
+ height: 200px;
+}
+
+#buttonControls .UpBtn {
+ background: url(../images/home/controlButtons/UpButton.png) no-repeat;
+ background-position: -32px 0;
+ width: 137px;
+ height: 64px;
+ left: 32px;
+ -webkit-transition: 0.2s;
+}
+
+#TUNEUP.pressed {
+ background: url(../images/home/controlButtons/UpButton_pressed.png)
+ !important;
+ background-position: -32px 0 !important;
+ width: 137px !important;
+ height: 69px !important;
+ left: 32px !important;
+}
+
+#buttonControls .DownBtn {
+ background: url(../images/home/controlButtons/DownButton.png) no-repeat;
+ background-position: -32px -132px;
+ width: 137px;
+ height: 65px;
+ top: 132px;
+ left: 32px;
+ -webkit-transition: 0.2s;
+}
+
+#TUNEDOWN.pressed {
+ background: url(../images/home/controlButtons/DownButton_pressed.png)
+ no-repeat;
+ background-position: -32px -132px !important;
+ width: 137px !important;
+ height: 65px !important;
+ top: 132px !important;
+ left: 32px !important;
+}
+
+#buttonControls .LeftBtn {
+ background: url(../images/home/controlButtons/LeftButton.png) no-repeat;
+ width: 63px;
+ height: 138px;
+ background-position: -3px -31px;
+ left: 3px;
+ top: 31px;
+ -webkit-transition: 0.2s;
+}
+
+#SEEKLEFT.pressed {
+ background: url(../images/home/controlButtons/LeftButton_pressed.png)
+ no-repeat;
+ width: 63px !important;
+ height: 138px !important;
+ background-position: -3px -31px !important;
+ left: 3px !important;
+ top: 31px !important;
+}
+
+#buttonControls .RightBtn {
+ background: url(../images/home/controlButtons/RightButton.png) no-repeat;
+ background-position: -131px -31px;
+ width: 68px;
+ height: 139px;
+ left: 131px;
+ top: 31px;
+ -webkit-transition: 0.2s;
+}
+
+#SEEKRIGHT.pressed {
+ background: url(../images/home/controlButtons/RightButton_pressed.png)
+ no-repeat;
+ background-position: -131px -31px !important;
+ width: 68px !important;
+ height: 139px !important;
+ left: 131px !important;
+ top: 31px !important;
+}
+
+#buttonControls .OkBtn {
+ background: url(../images/home/controlButtons/OkButton.png) no-repeat;
+ background-position: -55px -55px;
+ width: 89px;
+ height: 90px;
+ left: 55px;
+ top: 55px;
+ -webkit-transition: 0.2s;
+}
+
+#OK.pressed {
+ background: url(../images/home/controlButtons/OkButton_pressed.png)
+ no-repeat;
+ background-position: -55px -55px !important;
+ width: 89px !important;
+ height: 90px !important;
+ left: 55px !important;
+ top: 55px !important;
+}
+
+#app_controlButtons{
+ z-index: 2;
+}
+#app_controlButtons .systemRequest {
+ top: 252px !important;
+ left: 1059px !important;
+ width: 135px !important;
+ font-size: 16px !important;
+ text-align: center;
+ line-height: 48px;
+}
+
+#app_controlButtons .btnNotPressed {
+ width: 40px;
+ height: 40px;
+ left: 0px;
+ top: 200px;
+ -webkit-transition: 0.2s;
+ border-radius: 8px;
+ background-color: #1D1D1D;
+ border: 1px solid #383737;
+ box-shadow: inset 5px 5px 10px #383737, inset -3px -3px 10px black;
+ -webkit-transition: 0.2s;
+ font-size: 38px;
+ line-height: 42px;
+ text-align: center;
+ position: relative;
+ float: left;
+ margin-left: 10px;
+ margin-top: 10px;
+}
+
+}
+#app_controlButtons .languageSelect {
+ position: absolute;
+ width: 150px;
+ height: 30px;
+ color: white;
+ background: #393939;
+}
+
+#app_controlButtons .languageSelect option {
+ background: #393939;
+}
+
+#UILanguages.languageSelect {
+ top: 110px;
+ left: 1028px;
+}
+
+#TTSVRLanguages.languageSelect {
+ top: 170px;
+ left: 1028px;
+}
+
+#app_controlButtons .UILanguagesLabel {
+ top: 91px;
+ left: 1028px;
+ width: 150px;
+}
+
+#app_controlButtons .TTSVRLanguagesLabel {
+ top: 151px;
+ left: 1028px;
+ width: 160px;
+}
+
+#app_controlButtons .appUILanguagesLabel {
+ top: 91px;
+ left: 1195px;
+ width: 250px;
+}
+
+#app_controlButtons .appTTSVRLanguagesLabel {
+ top: 151px;
+ left: 1195px;
+ width: 250px;
+}
+
+#app_controlButtons .appUILang {
+ top: 117px;
+ left: 1195px;
+ width: 150px;
+}
+
+#app_controlButtons .appTTSVRLang {
+ top: 176px;
+ left: 1195px;
+ width: 150px;
+}
+
+#app_controlButtons .sendDataCheckBox {
+ left: 1158px;
+ position: absolute;
+ top: 275px;
+}
+
+#app_controlButtons .sendDataLabel {
+ top: 275px;
+ left: 1180px;
+ width: 160px;
+}
+
+#buttonControls .btnNotPressed.pressed {
+ box-shadow: inset 5px 5px 10px black, inset -3px -3px 10px #383737;
+ line-height: 45px;
+}
+
+#app_controlButtons .languageSelect {
+ position: absolute;
+ width: 150px;
+ height: 30px;
+ color: white;
+ background: #393939;
+}
+
+#app_controlButtons .languageSelect option {
+ background: #393939;
+}
+
+#UILanguages.languageSelect {
+ top: 110px;
+ left: 1028px;
+}
+
+#TTSVRLanguages.languageSelect {
+ top: 170px;
+ left: 1028px;
+}
+
+#app_controlButtons .UILanguagesLabel {
+ top: 91px;
+ left: 1028px;
+ width: 150px;
+}
+
+#app_controlButtons .TTSVRLanguagesLabel {
+ top: 151px;
+ left: 1028px;
+ width: 160px;
+}
+
+#app_controlButtons .phone_call_button{
+ height: 40px;
+ width: 163px;
+ font-size: 20px;
+ line-height: 41px;
+ border: 1px solid #FFFF30;
+ top: 2px;
+ color: #FFFF30;
+ padding-left: 10px;
+ left: 244px;
+ transition: left 2s;
+}
+
+#app_controlButtons .phone_call_button.expand{
+ left: 156px;
+} \ No newline at end of file
diff --git a/src/components/HMI/css/general.css b/src/components/HMI/css/general.css
new file mode 100644
index 0000000000..1eab49e6e1
--- /dev/null
+++ b/src/components/HMI/css/general.css
@@ -0,0 +1,1560 @@
+/*GENERAL CSS*/
+* {
+ /*Reset default browser styles*/
+ margin: 0;
+ padding: 0;
+ border: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-user-select: none;
+}
+
+html, body {
+ /*GLOBAL HTML and BODE Dimansions*/
+ width: 100%;
+ min-height: 100%;
+}
+
+body {
+ /*FONT FAMILY*/
+ font-family: sans-serif;
+ /*Defaul font size*/
+ font-size: 16px;
+ background-color: #000;
+ color: #fff;
+ overflow: hidden;
+}
+
+/*Default style for all images*/
+img {
+ border-width: 0px;
+ border-style: none;
+ margin: 0px;
+ padding: 0px;
+ z-index: 1000;
+ pointer-events: none;
+}
+
+/*Default style for all DIVs*/
+div {
+ position: absolute;
+ margin: 0;
+ padding: 0;
+}
+
+.ffw-button {
+ cursor: pointer;
+ background: url(../images/common/button.png) repeat-x;
+}
+
+.ffw-button.pressed {
+ background-position: bottom;
+}
+
+.windowText {
+ top: 190px;
+ width: 800px;
+ font-size: 80px;
+ color: white;
+ text-align: center;
+}
+
+/* Home view */
+#home {
+ background: url(../images/home/home_main_image.png) no-repeat;
+ width: 800px;
+ height: 369px;
+ top: 56px;
+}
+
+/* Climate Status */
+#status_climate {
+ bottom: 0px;
+ right: 0px;
+ text-align: right;
+ font-size: 21px;
+ width: 324px;
+ height: 48px;
+ cursor: pointer;
+ background: url(../images/common/climate-status-bg.png) no-repeat;
+ z-index: 1;
+}
+
+#status_climate_label {
+ display: block;
+ width: 100%;
+ visibility: hidden;
+}
+
+#status_climate_label span {
+ padding-right: 11px;
+}
+
+/* Navigation Status */
+#status_nav {
+ top: 0px;
+ right: 0px;
+ text-align: right;
+ font-size: 21px;
+ width: 324px;
+ height: 48px;
+ cursor: pointer;
+ background: url(../images/common/nav-status-bg.png) no-repeat;
+ z-index: 1;
+}
+
+#navigation_status_label {
+ width: 100%;
+ display: block;
+ visibility: hidden;
+}
+
+#navigation_status_label span {
+ padding-right: 11px;
+}
+
+/*FORD CONTAINER DEFAULT DIMANSIONS */
+#app {
+ /*position:relative;*/
+ width: 800px;
+ height: 480px;
+ /*overflow: hidden;
+ Mac font smoothing */
+ -webkit-font-smoothing: antialiased;
+ /*margin: 25px auto;*/
+}
+
+/* TTS popUp*/
+#TTSPopUp.TTSPopUp {
+ opacity: 0;
+ left: 500px;
+ width: 295px;
+ height: 100px;
+ z-index: 1;
+ border-radius: 10 PX;
+ top: 8px;
+ -webkit-transition: opacity 1s ease-in-out;
+ display: none;
+}
+
+#TTSPopUp .popUp {
+ width: 294px;
+ height: 98px;
+ border: 1px solid black;
+ border-radius: 10px;
+ background-color: black;
+ border: #A6A6A6 solid 2px;
+ color: white;
+}
+
+#TTSPopUp .message {
+ top: 10px;
+ right: 10px;
+ width: 278px;
+ height: 81px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#TTSPopUp .timerText {
+ color: #FFD93F;
+ margin-top: 3px;
+ right: 5px;
+ font-size: 30px;
+}
+
+#TTSPopUp .checkBoxLabel {
+ color: white;
+ top: 106px;
+ width: 72px;
+ height: 35px;
+ left: 25px;
+ background-color: rgb(90, 90, 90);
+ border-radius: 3px;
+ border: 1px solid rgb(255,255,255);
+ padding: 2px;
+}
+
+#TTSPopUp .checkBoxTTS {
+ top: 118px;
+ position: absolute;
+ left: 8px;
+}
+
+#TTSPopUp .okButton {
+ right: 52px;
+ width: 113px;
+ height: 19px;
+ padding: 10px;
+ border-radius: 4px;
+ border: 1px solid white;
+}
+
+#TTSPopUp.active {
+ opacity: 1;
+ display: block;
+ z-index: 10000;
+}
+
+/* Diver Distraction PopUp */
+#driverDistraction.driverDistractionWindow {
+ left: 0;
+ top: 0;
+ width: 800px;
+ height: 480px;
+ background: rgba(0, 0, 0, 0.7);
+ z-index: 30000;
+ opacity: 0;
+ display: none;
+}
+
+#driverDistraction .driverDistraction {
+ left: 200px;
+ width: 400px;
+ height: 200px;
+ z-index: 2;
+ top: 140px;
+ -webkit-transition: opacity 1s ease-in-out;
+ background-color: black;
+ border: #A6A6A6 solid 2px;
+ border-radius: 6px;
+}
+
+#driverDistraction.active {
+ opacity: 1;
+ display: block;
+}
+
+#driverDistraction .driverDistractionText {
+ top: 224px;
+ left: 210px;
+ width: 374px;
+ height: 20px;
+ text-align: center;
+ font-size: 28px;
+ z-index: 2;
+}
+
+/* UI popUp*/
+/* VR popUp*/
+#VRPopUp.VRPopUp {
+ opacity: 0;
+ left: 50px;
+ width: 700px;
+ height: 340px;
+ background-color: black;
+ z-index: 2;
+ border-radius: 10 PX;
+ top: 70px;
+ -webkit-transition: opacity 1s ease-in-out;
+ display: none;
+}
+
+#VRPopUp span {
+ margin-left: 15px;
+}
+
+#VRPopUp .popUp {
+ width: 698px;
+ height: 338px;
+ border: 1px solid white;
+ border-radius: 10px;
+}
+
+#VRPopUp .message1 {
+ top: 10px;
+ left: 10px;
+ width: 278px;
+ height: 81px;
+}
+
+#VRPopUp .message2 {
+ top: 40px;
+ left: 10px;
+ width: 278px;
+ height: 81px;
+}
+
+#VRPopUp.active {
+ opacity: 1;
+ display: block;
+ transition: all 1s;
+}
+
+#VRPopUp .list {
+ position: absolute;
+ width: 629px;
+ height: 251px;
+ border-radius: 2px;
+ left: 35px;
+ top: 70px;
+}
+
+#VRPopUp .list-content {
+ border: none;
+}
+
+#VRPopUp .list-item {
+ position: relative;
+ width: 100%;
+ height: 48px;
+ font-size: 20px;
+ line-height: 50px;
+ border: 1px solid #393939;
+}
+
+#VRPopUp .list-content {
+ width: 578px;
+}
+
+#VRPopUp .VRLabel {
+ top: 10px;
+ width: 550px;
+ left: 35px;
+ height: 20px;
+ padding: 15px;
+ background: #393939;
+}
+
+#VRPopUp .VRImage {
+ right: 25px;
+ width: 50px;
+ height: 50px;
+ top: 10px;
+ background: url(../images/home/controlButtons/vrImage.png) no-repeat;
+ background-size: contain;
+}
+
+/*WRAPER FOR CONTENT VIEW*/
+#app_active_view {
+ position: absolute;
+ width: 800px;
+ height: 480px;
+}
+
+#html5Player {
+ position: absolute;
+ z-index: 1;
+ width: 800px;
+ height: 480px;
+}
+
+#html5Player.visible {
+ -webkit-transform: translateX(0px) !important;
+}
+
+#mode {
+ position: relative;
+ margin: 150px auto;
+ width: 150px;
+}
+
+/* Image preloader block*/
+#preloader {
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+}
+
+/*CLOCK*/
+#clock {
+ font-size: 28px;
+ text-align: center;
+ width: 225px;
+ height: 50px;
+ position: relative;
+ float: left;
+ pointer-events: all;
+ cursor: pointer;
+}
+
+#clock.mcs {
+ width: 225px;
+}
+
+#time_num {
+ width: 100%;
+ padding: 10px;
+ margin-left: 5px;
+}
+
+#app_top_menu_cont {
+ z-index: 10000;
+ top: 0px;
+ left: 275px;
+ position: relative;
+ pointer-events: none;
+}
+
+#top_controls {
+ width: 322px;
+ height: 58px;
+ background: url("../images/common/header_bg.png") no-repeat;
+ z-index: 2;
+}
+
+.not-visible {
+ visibility: hidden !important;
+}
+
+/* Universal class to show hidden elements */
+.visible {
+ visibility: visible !important;
+}
+
+/* Universal class to show transparent elements */
+.show {
+ opacity: 1 !important;
+}
+
+.arrow-ico {
+ position: absolute;
+ right: 10px;
+}
+
+.right_text {
+ float: right;
+ margin-right: 5px;
+}
+
+.hidden_display {
+ display: none !important;
+}
+
+.visible_display {
+ display: block !important;
+}
+
+/*STATUS BAR*/
+.status_bar {
+ z-index: 2001;
+ line-height: 50px;
+}
+
+.selected {
+ display: none;
+}
+
+/*BOTTOM Control BUTTONS*/
+#app_bottom_controlls {
+ z-index: 11000;
+ bottom: 0px;
+ left: 275px;
+ width: 252px;
+ height: 59px;
+ /*background: url(../images/common/bottom_cont_bg.png) no-repeat;*/
+ overflow: hidden;
+ pointer-events: none;
+}
+
+#home_active {
+ z-index: 2002;
+ bottom: 0px;
+ left: 275px;
+ width: 250px;
+ height: 58px;
+ background: url("../../images/common/home_active.png") no-repeat;
+}
+
+#home_but {
+ height: 59px;
+ width: 73px;
+ cursor: pointer;
+ z-index: 1000;
+ background: url(../images/home/bottom_controlls_full.png) no-repeat;
+ background-position: -90px -59px;
+ position: relative;
+ float: left;
+ pointer-events: none;
+}
+
+#home_but.large {
+ width: 126px;
+ background-position: 0px -177px;
+}
+
+#home_but.large.selected {
+ width: 126px;
+ background-position: 0px -118px;
+}
+
+#home_but.selected {
+ background-position: -90px 0px;
+ display: block;
+}
+
+#home_but_click {
+ height: 59px;
+ width: 73px;
+ cursor: pointer;
+ z-index: 1001;
+ position: absolute;
+ pointer-events: all;
+}
+
+#home_but_click.large {
+ width: 125px;
+ height: 115px;
+ -webkit-transform: skew(0deg, -42deg);
+}
+
+/*INFO BUTTON*/
+#info_but_click {
+ height: 117px;
+ width: 88px;
+ cursor: pointer;
+ z-index: 1001;
+ position: absolute;
+ pointer-events: all;
+ -webkit-transform: skew(0deg, -52deg);
+}
+
+#info_but {
+ height: 59px;
+ width: 90px;
+ cursor: pointer;
+ background: url(../images/home/bottom_controlls_full.png) no-repeat;
+ background-position: 0px -59px;
+ position: relative;
+ float: left;
+ z-index: 1001;
+ pointer-events: none;
+ -webkit-border-top-left-radius: 10px;
+}
+
+#info_but.selected {
+ background-position: 0px 0px;
+ display: block;
+}
+
+/*SETTINGS BUTTON*/
+#setting_but {
+ width: 89px;
+ height: 59px;
+ cursor: pointer;
+ background: url(../images/home/bottom_controlls_full.png) no-repeat;
+ background-position: -162px -59px;
+ position: relative;
+ float: left;
+ pointer-events: none;
+}
+
+#setting_but.large {
+ width: 126px;
+ background-position: -126px -177px;
+}
+
+#setting_but.large.selected {
+ width: 126px;
+ background-position: -126px -118px;
+}
+
+#setting_but.selected {
+ background-position: -162px 0px;
+ display: block;
+}
+
+#setting_but_click {
+ width: 83px;
+ height: 110px;
+ cursor: pointer;
+ position: absolute;
+ -webkit-transform: skew(0deg, 52deg);
+ left: 1px;
+ top: 4px;
+ z-index: 1000;
+ pointer-events: all;
+}
+
+#setting_but_click.large {
+ width: 158px;
+ height: 155px;
+}
+
+/*HIDDEN FOR CONTENT BLOCKS*/
+.hidden {
+ -webkit-transform: translateX(-2000px);
+ -moz-transform: translateX(-2000px);
+}
+
+/*ACTIVE VISIBLE FOR CONTENT BLOCK*/
+.inactive_state {
+ -webkit-transform: translateX(-2000px);
+ -moz-transform: translateX(-2000px);
+ overflow: hidden;
+}
+
+.active_state {
+ -webkit-transform: translateX(0px) !important;
+ -moz-transform: translateX(0px) !important;
+}
+
+.passive_button_color {
+ color: #999 !important;
+}
+
+/*MEDIA BLOCK CONTAINER*/
+#media {
+ width: 800px;
+ height: 480px;
+ background: url(../images/media/bg.png) no-repeat;
+}
+
+/****************************** FOR MEDIA VIEW************************************************/
+/*#media, #browseUsbHD {
+background: url(../images/media/bg.png) no-repeat;
+}
+
+#media_view {
+width: 800px;
+height: 480px;
+}
+
+#media_view #cntrlMenu {
+position: relative;
+margin-top: 90px;
+}*/
+/*Video Player*/
+/*******Player Controlls View********/
+#video_player_view {
+ top: 85px;
+ left: 93px;
+ z-index: 2002;
+ display: block;
+}
+
+/*Holder for all progressbar elements*/
+#video_player_view .progressline_holder {
+ display: block;
+ width: 537px;
+ height: 10px;
+ cursor: pointer;
+ background: url(../images/player/player_prog_bg.png) no-repeat;
+}
+
+/*Style to fix actual width for progress bar concerning width of progrees bar mark*/
+.progressline_width_fix {
+ width: 537px;
+ position: absolute;
+}
+
+/*Progressbar*/
+#video_player_view .progressbar {
+ display: block;
+ height: 10px;
+ background: url(../images/player/prog_ind.png) no-repeat;
+ position: relative;
+ float: left;
+}
+
+/*Current time*/
+.current_time {
+ width: 33px;
+ height: 15px;
+ top: -4px;
+ left: -55px;
+ font-weight: bold;
+}
+
+/*Total time*/
+.total_time {
+ width: 33px;
+ height: 15px;
+ left: 546px;
+ top: -4px;
+ font-weight: bold;
+}
+
+/*Drag Area*/
+.drag_area {
+ width: 561px;
+ position: relative;
+ float: left;
+ height: 10px;
+}
+
+/*Progress bar mark*/
+#mark {
+ position: relative;
+ float: left;
+ bottom: 19px;
+ left: -20px;
+ background: url(../images/player/player_free_control.png) no-repeat;
+ width: 50px;
+ height: 50px;
+}
+
+#mark.active {
+ background: url(../images/player/player_active_control.png) no-repeat !important;
+ bottom: 20px !important;
+ left: -21px !important;
+ width: 52px !important;
+ height: 52px !important;
+}
+
+/*Back Button*/
+#back {
+ width: 80px;
+ height: 50px;
+ cursor: pointer;
+ top: 60px;
+ left: 140px;
+ border: 1px solid #393939;
+}
+
+#back .ico {
+ top: 13px;
+ left: 20px;
+ position: relative;
+}
+
+/* Forward Button*/
+#frw {
+ width: 79px;
+ height: 49px;
+ cursor: pointer;
+ top: 60px;
+ left: 347px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+}
+
+#frw .ico {
+ top: 13px;
+ left: 24px;
+ position: relative;
+}
+
+/*Play Button*/
+#play {
+ width: 79px;
+ height: 49px;
+ cursor: pointer;
+ top: 60px;
+ left: 244px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+}
+
+#play .play {
+ top: 13px;
+ left: 31px;
+ position: relative;
+}
+
+#play .pause {
+ top: 10px;
+ left: 28px;
+ position: relative;
+}
+
+/*Stop Button*/
+#stop {
+ width: 79px;
+ height: 49px;
+ cursor: pointer;
+ top: -18px;
+ left: 585px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+}
+
+#stop .ico {
+ top: 17px;
+ left: 18px;
+ position: relative;
+}
+
+/********************FOR TEST PURPOSE ONLY********************/
+.centered {
+ position: absolute;
+ width: 300px;
+ height: 200px;
+ border: 2px solid #999;
+ color: white;
+ text-align: center;
+ margin: 100px auto;
+ line-height: 190px;
+ font-size: 24px;
+ left: 240px;
+}
+
+/**************************FOR LIST***************************/
+/* List */
+.list {
+ position: relative;
+ overflow: hidden;
+}
+
+.list-content {
+ border-top: 1px solid #393939;
+ border-left: 1px solid #393939;
+ border-right: 1px solid #393939;
+}
+
+/* List item */
+.list-item {
+ position: relative;
+ width: 100%;
+ height: 49px;
+ font-size: 20px;
+ line-height: 50px;
+ border-bottom: 1px solid #393939;
+}
+
+.list-item .ico {
+ height: 49px;
+ float: left;
+}
+
+.list-item span {
+ /*position: absolute*/
+}
+
+/* List item background */
+.list-item.notpressed {
+ background-image: url(../images/list/list_item_bg.png);
+}
+
+.list-item .highLighted {
+
+}
+
+/*************************FOR SCROLLBAR*************************/
+/*
+.scrollBar{
+ position: relative;
+ width: 48px;
+ background: black;
+ border: 1px solid #393939;
+ border-top-right-radius: 1px;
+ border-top-left-radius: 1px;
+ border-bottom-right-radius: 1px;
+ border-bottom-left-radius: 1px;
+ float: right;
+}
+*/
+.scrollbar {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ width: 48px;
+ background: black;
+ border: 1px solid #393939;
+ border-top-right-radius: 2px;
+ border-top-left-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+.sb-content {
+ width: 48px;
+ background: black;
+ border: 1px solid #393939;
+ border-top-right-radius: 2px;
+ border-top-left-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+/* Top button */
+.sb-top {
+ height: 48px;
+ width: 48px;
+ border-bottom: #393939 1px solid;
+ position: relative;
+ cursor: pointer;
+}
+
+/* Background of scrollbar */
+.sb-body {
+ height: 148px;
+ width: 46px;
+ background-color: #262626;
+ margin: 1px;
+ position: relative;
+}
+
+/* Bar */
+.sb-bar {
+ width: 46px;
+ height: 146px;
+ background: #464646;
+ position: relative;
+ bottom: 10px;
+ -webkit-transition: top 0.2s ease-out;
+}
+
+/* Bottom button */
+.sb-bottom {
+ height: 48px;
+ width: 48px;
+ border-top: #393939 1px solid;
+ position: absolute;
+ cursor: pointer;
+ bottom: 0px;
+}
+
+/* Buttons image position */
+.sb-bottom img, .sb-top img {
+ margin-top: 13px;
+ margin-left: 13px;
+}
+
+/* List item button background */
+.list-item.pressed {
+ background-image: url(../images/list/list_item_pressed.png);
+}
+
+/** Background for pressed button */
+.button.pressed {
+ background-image: url(../images/list/list_item_pressed.png);
+}
+
+/* Hide function */
+.is-disabled {
+ display: none;
+}
+
+.hide {
+ visibility: hidden;
+ display: none;
+}
+
+/* Disabled list items */
+.disabled {
+ color: #999;
+ cursor: default!important;
+}
+
+.disabled .ico, .disabled .right_ico {
+ opacity: .3;
+}
+
+.disabled .arrow-ico {
+ opacity: .3;
+}
+
+#sing {
+ width: 19px;
+ height: 27px;
+ left: 13px;
+ top: 13px;
+}
+
+#sing.white {
+ background: url(../images/help/white_help.png) no-repeat;
+}
+
+#sing.yellow {
+ background: url(../images/help/yellow_help.png) no-repeat;
+}
+
+/******************** FOR FAQ ********************************/
+#faq_btn {
+ cursor: pointer;
+ width: 145px;
+ height: 53px;
+ background: url(../images/help/faq_top_btn.png) no-repeat;
+ top: 0;
+ left: 110px;
+ z-index: 0;
+ pointer-events: none;
+ -webkit-transition: left 0.5s ease-in-out;
+}
+
+.faq-pressed {
+ left: 0px !important;
+}
+
+#faq_btn.pressed {
+ background: url(../images/help/faq_top_btn_pressed.png) no-repeat !important;
+}
+
+#faq_btn .ico {
+ position: absolute;
+ right: 32px;
+ top: 8px;
+}
+
+#faq_btn_c {
+ width: 118px;
+ height: 50px;
+ -webkit-transform: skewX(-43deg);
+ z-index: 1;
+ cursor: pointer;
+ pointer-events: all;
+}
+
+#faq_btn .ind_inact {
+ background: url(../images/help/ind_vert_def.png) no-repeat;
+ position: absolute;
+ right: 32px;
+ top: 8px;
+ width: 19px;
+ height: 32px;
+}
+
+#faq_btn .ind_act {
+ background: url(../images/help/ind_vert_active.png) no-repeat;
+ position: absolute;
+ right: 32px;
+ top: 8px;
+ width: 19px;
+ height: 32px;
+}
+
+.button {
+ background-image: url(../images/list/list_item_bg.png);
+ cursor: pointer;
+}
+
+.button img {
+ float: left;
+}
+
+/* default style */
+* {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ -webkit-user-select: none;
+}
+
+/******************* For FAQ View *******************/
+#fag_view {
+ font-size: 20px;
+ display: block;
+ background: url(../images/help/faq_bg.png) no-repeat;
+ width: 800px;
+ height: 384px;
+ position: absolute;
+ top: 48px;
+}
+
+#faq_view_list {
+ position: relative;
+ margin-left: 115px;
+ margin-top: 34px;
+ height: 251px;
+ width: 630px;
+ float: left;
+}
+
+#faq_view_list .list-content {
+ width: 570px;
+}
+
+#fag_view .list-item {
+ position: relative;
+ width: 570px;
+ height: 49px;
+ font-size: 20px;
+ line-height: 50px;
+ border-bottom: 1px solid #393939;
+ cursor: pointer;
+ float: left;
+}
+
+#fag_view .list-item span {
+ left: 5px;
+ margin-top: 18px;
+ margin-left: 17px;
+}
+
+/* Faq bottom text*/
+#faq_bottom {
+ bottom: 19px;
+ width: 764px;
+ height: 50px;
+ font-size: 18px;
+ float: left;
+ margin-top: 31px;
+ margin-left: 36px;
+}
+
+#faq_bottom div {
+ float: left;
+ width: 764px;
+}
+
+#faq_bottom .second-line {
+ top: 22px;
+}
+
+#settings_view {
+ width: 800px;
+ height: 480px;
+}
+
+.block {
+ display: block !important;
+}
+
+.test_blur {
+ width: 800px;
+ height: 480px;
+ top: -55px;
+ z-index: 1001;
+ opacity: .6;
+ background-color: black;
+ box-shadow: 3px;
+}
+
+.pointer {
+ cursor: pointer !important;
+}
+
+/*CAUTION MESSAGE*/
+#warning_view {
+ width: 800px;
+ height: 480px;
+ z-index: 12001;
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(218, 218, 218)), color-stop(0.3, rgb(0, 0, 0)));
+}
+
+#warning_view.fr .text {
+ font-size: 23px;
+}
+
+#warning_view .message {
+ width: 744px;
+ height: 340px;
+ position: relative;
+ margin: 0 auto;
+ top: 15px;
+}
+
+#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;
+}
+
+#warning_view .text {
+ font-size: 25px;
+ position: relative;
+ top: 15px;
+ font-weight: bold;
+}
+
+#warning_view .okbut {
+ width: 130px;
+ height: 51px;
+ position: relative;
+ top: 30px;
+ cursor: pointer;
+ float: right;
+ margin-right: 83px;
+ display: none;
+ font-size: 20px;
+ text-align: center;
+ line-height: 50px;
+}
+
+#warning_view .components{
+ margin-top: 20px;
+ width: 420px;
+}
+
+#warning_view .component{
+ width: 200px;
+ height: 20px;
+ float: right;
+ position: relative;
+}
+
+#warning_view .item{
+ position: relative;
+ float: left;
+ margin-left: 10px;
+}
+
+.hideWarning {
+ width: 0px !important;
+ overflow: hidden;
+ z-index: -1 !important;
+}
+
+.fadeWarning {
+ opacity: 0;
+ transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ -webkit-transition: opacity 1s;
+ -o-transition: opacity 1s;
+}
+
+#warning_view.fadeAnimation {
+ -webkit-animation-name: opacity;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-timing-function: linear;
+ -webkit-animation-fill-mode: forwards;
+}
+
+@
+-webkit-keyframes opacity {
+
+from {
+ opacity: 1;
+
+}
+
+to {
+ opacity: 0;
+}
+
+ }
+
+/* Welcome Orientation View*/
+#app_welcome_orientation_view {
+ width: 800px;
+ height: 480px;
+ z-index: 12000;
+}
+
+#app_welcome_orientation_balck_mask_view {
+ width: 800px;
+ height: 480px;
+ background: #000;
+ opacity: 0.75;
+}
+
+#app_welcome_orientation_popup_text {
+ position: relative;
+ margin: 0px auto;
+ font-size: 30px;
+ text-align: center;
+ width: 410px;
+ margin-top: 18px;
+}
+
+#app_welcome_orientation_denypopup_text {
+ position: relative;
+ margin: 0px auto;
+ font-size: 28px;
+ text-align: center;
+ width: 460px;
+ margin-top: 53px;
+}
+
+#app_welcome_orientation_popup_buttons {
+ width: 266px;
+ height: 53px;
+ border: 1px solid #333;
+ position: relative;
+ margin: 20px auto 0px;
+}
+
+#app_welcome_orientation_popup_lable {
+ position: relative;
+ width: 479px;
+ height: 70px;
+ border: 1px solid #fff;
+ text-align: center;
+ margin: 0px auto;
+ margin-top: 70px;
+ font-size: 25px;
+ font-family: Helvetica;
+}
+
+#app_welcome_orientation_popup_lable span {
+ position: relative;
+ top: 5px;
+ width: 432px;
+}
+
+#app_welcome_orientation_popup_view, #wo_denypopup {
+ width: 546px;
+ height: 346px;
+ background: #000;
+ z-index: 12002;
+ left: 134px;
+ top: 46px;
+ border: 2px solid #A28542;
+ -webkit-border-radius: 4px;
+}
+
+#wo_popup_btn_divider {
+ width: 4px;
+ height: 48px;
+ background: url(../images/common/divider.png) no-repeat;
+ left: 131px;
+ z-index: 1;
+}
+
+#wo_popup_yes_button, #wo_popup_no_button {
+ height: 52px;
+ width: 132px;
+ cursor: pointer;
+ position: relative;
+ float: left;
+ font-size: 20px;
+ text-align: center;
+ line-height: 52px;
+}
+
+#wo_popup_yes_button {
+ border-right: 1px solid #000;
+}
+
+#wo_popup_no_button {
+ border-left: 1px solid #393939;
+}
+
+#wo_popup_denypopup_ok_button {
+ width: 238px;
+ height: 48px;
+ background: url(../images/common/bt_bg.png) repeat-x;
+ cursor: pointer;
+ position: relative;
+ float: left;
+ font-size: 20px;
+ font-weight: bold;
+ text-align: center;
+ line-height: 50px;
+ border: 1px solid #333;
+ left: 155px;
+ top: 80px;
+ -webkit-border-radius: 4px;
+}
+
+#woSkippButton {
+ width: 80px;
+ height: 50px;
+ cursor: pointer;
+ top: 370px;
+ left: 710px;
+ font-size: 21px;
+ text-align: center;
+ line-height: 48px;
+ z-index: 10000;
+ border: 1px solid white;
+ -webkit-border-radius: 3px;
+ background: url(../images/common/skippbuttonbg_pressed.png) no-repeat;
+ opacity: 0.75;
+ display: none;
+}
+
+#woSkippButton .right_text {
+ margin-top: 2px;
+}
+
+#woSkippButton.pressed {
+ background: url(../images/common/skippbuttonbg_pressed.png) no-repeat !important;
+}
+
+#wo_popup_yes_button.pressed, #wo_popup_no_button.pressed, #wo_popup_denypopup_ok_button.pressed {
+ background: url(../images/common/bt_bg_pressed.png) repeat-x !important;
+}
+
+/* END Welcome Orientation View*/
+/* Video Error Popup*/
+#video_error_popup {
+ background: black;
+ border: 1px solid #A03333;
+ -webkit-border-radius: 3px;
+ font-size: 23px;
+ font-weight: bold;
+ left: 308px;
+ text-align: center;
+ top: 170px;
+ z-index: 12100;
+ position: absolute;
+ padding: 10px;
+ display: none;
+}
+
+.mft_indicator {
+ opacity: 0;
+}
+
+/* Lable plus Button*/
+.lablePlusButton .button {
+ float: right;
+ right: 0px;
+ width: 323px;
+ height: 49px;
+ border-left: 1px solid #393939;
+}
+
+.lablePlusButton .lable span, .lablePlusButton .button span {
+ margin-left: 13px;
+}
+
+.lablePlusButton .button.single {
+ width: 148px;
+ height: 28px;
+ border: 1px solid #393939;
+ border-radius: 2px;
+ margin-top: 10px;
+ margin-right: 10px;
+ text-align: center;
+ line-height: 28px;
+ float: right;
+}
+
+.lablePlusButton .button.single span {
+ margin: 0px;
+}
+
+/* ****************Select System Popup *********************** */
+#select_sysytem_view {
+ width: 796px;
+ height: 475px;
+ top: 1px;
+ border: 2px solid #926100;
+ background: #000;
+ z-index: 12002;
+ -webkit-border-radius: 4px;
+}
+
+/* header lable*/
+#select_system_heading_lable {
+ position: relative;
+ font-size: 30px;
+ text-align: center;
+ margin-top: 25px;
+ margin-bottom: 30px;
+}
+
+/* content container*/
+#select_system_container {
+ width: 756px;
+ height: 200px;
+ position: relative;
+ margin: 0px auto;
+ border: 1px solid #393939;
+}
+
+/* vehicle select list*/
+#settings_list {
+ height: 130px;
+ position: relative;
+}
+
+/* vehicle select list container*/
+#select_system_list {
+ width: 545px;
+ position: relative;
+ float: right;
+ margin-top: 15px;
+ margin-right: 20px;
+}
+
+/* vehicle select list buttons*/
+#settings_list .button {
+ position: relative;
+ width: 135px;
+ height: 48px;
+ font-size: 20px;
+ text-align: center;
+ line-height: 48px;
+ float: left;
+ border-right: 1px solid #393939;
+ border-top: 1px solid #393939;
+ border-bottom: 1px solid #393939;
+}
+
+#settings_list .button.left-border {
+ border-left: 1px solid #393939;
+}
+
+#settings_list .button.active {
+ background: url(../images/settings/btn-48h-gray-active.png) repeat-x !important;
+ color: #000;
+}
+
+#settings_list .button.bottom {
+ margin-top: 2px;
+}
+
+/* select climate style lable*/
+#select_system_label {
+ font-size: 20px;
+ width: 135px;
+ position: relative;
+ float: left;
+ margin-left: 10px;
+ margin-top: 15px;
+}
+
+/* Navigation select block*/
+#navsdcard {
+ height: 70px;
+ position: relative;
+ border-bottom: 1px solid #393939;
+}
+
+/* Navigation select block button container*/
+#sdnav_buttons {
+ position: relative;
+ float: right;
+ margin-top: 10px;
+ margin-right: 20px;
+}
+
+/* Navigation select block button*/
+#navsdcard .button {
+ width: 120px;
+ height: 48px;
+ border: 1px solid #393939;
+ text-align: center;
+ font-size: 20px;
+ line-height: 48px;
+ font-weight: bold;
+}
+
+#navsdcard .button.active {
+ background: url(../images/settings/btn-48h-gray-active.png) repeat-x !important;
+ color: #000;
+}
+
+#navsdcard_no_btn {
+ position: relative;
+ float: right;
+}
+
+#navsdcard_yes_btn {
+ position: relative;
+ float: left;
+}
+
+/* navigationApp select lable*/
+#sdnav_label {
+ position: relative;
+ float: left;
+ font-size: 20px;
+ margin-top: 15px;
+ margin-left: 10px;
+}
+
+/* Submit button*/
+#select_system_submit {
+ width: 130px;
+ height: 50px;
+ z-index: 12002;
+ position: relative;
+ border: 1px solid #393939;
+ text-align: center;
+ font-size: 25px;
+ font-weight: bold;
+ line-height: 50px;
+ margin: 50px auto;
+}
+
+/* Info Lable*/
+#select_system_info {
+ position: relative;
+ text-align: center;
+ font-size: 25px;
+ margin-top: 25px;
+}
+
+#select_system_info span {
+ border: 1px solid #fff;
+ padding: 5px 15px 5px 15px;
+}
diff --git a/src/components/HMI/css/info.css b/src/components/HMI/css/info.css
new file mode 100644
index 0000000000..34776e6cbf
--- /dev/null
+++ b/src/components/HMI/css/info.css
@@ -0,0 +1,671 @@
+#status_info {
+ top: 0px;
+ right: 0px;
+ text-align: right;
+ font-size: 21px;
+ width: 324px;
+ height: 48px;
+ cursor: pointer;
+ background: url(../images/common/nav-status-bg.png) no-repeat;
+ z-index: 1;
+}
+
+#status_info_label {
+ width: 100%;
+ display: block;
+}
+
+#status_info_label span {
+ padding-right: 11px;
+}
+
+#info_view {
+ width: 800px;
+ height: 480px;
+}
+
+#info_view.green_bg {
+ background: url(../images/nav/bg.png) no-repeat;
+}
+
+#info_leftMenu {
+ background: #333;
+ width: 150px;
+ height: 300px;
+ top: 90px;
+}
+
+#info_leftMenu .menu-item.info_active {
+ background: url("../images/info/menu_active.png") repeat-x;
+}
+
+#info_leftMenu .menu-item {
+ z-index: 201;
+ position: relative;
+ width: 150px;
+ height: 50px;
+ cursor: pointer;
+}
+
+#info_leftMenu .menu-item span {
+ position: absolute;
+ left: 50px;
+ width: 100px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 50px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+#info_leftMenu .ico {
+ height: 50px;
+ width: 50px;
+}
+
+#info_leftMenu .settings_active {
+ background: url("../images/settings/menu_active.png") repeat-x;
+}
+
+#info_right_menu {
+ left: 183px;
+ top: 6px;
+}
+
+#info_sync_services {
+ font-size: 32px;
+ width: 280px;
+}
+
+#info_traff {
+ font-size: 20px;
+ width: 410px;
+ top: 36px;
+}
+
+#info_traffic_report {
+ width: 300px;
+ top: 85px;
+ font-size: 20px;
+ color: #a6a6a6;
+}
+
+#info_traffic_pts {
+ width: 400px;
+ top: 120px;
+ font-size: 20px;
+ color: #65cdd9;
+}
+
+#info_traffic_hear {
+ width: 355px;
+ top: 192px;
+ font-size: 20px;
+ color: #a6a6a6;
+}
+
+#info_connect {
+ width: 300px;
+ top: 241px;
+ font-size: 20px;
+ left: 15px;
+}
+
+#info_log {
+ width: 500px;
+ top: 285px;
+ font-size: 20px;
+}
+
+#info_left_menu {
+ top: 6px;
+}
+
+#info_left_menu div {
+ font-size: 20px;
+ left: 49px;
+}
+
+#info_left_services {
+ top: 17px;
+}
+
+#info_left_travel_link {
+ top: 66px;
+ width: 200px;
+}
+
+#info_left_alerts {
+ top: 118px;
+}
+
+#info_left_calendar {
+ top: 166px;
+}
+
+#info_left_apps {
+ top: 216px;
+}
+
+/******************* For Info.Services *******************/
+#info_services_view {
+ top: 48px;
+ left: 153px;
+ background: url(../images/info/info_services_bg.png) no-repeat 0px 39px;
+ height: 384px;
+ width: 647px;
+}
+
+#info_services_view .inner-content {
+ left: 30px;
+ top: 49px;
+}
+
+/******************* For Info.travelLink *******************/
+#info_travelLink {
+ position: absolute;
+ top: 48px;
+ left: 153px;
+ width: 647px;
+ height: 384px;
+ float: left;
+ z-index: 1001;
+}
+
+#info_travelLink_logo {
+ margin-top: 48px;
+ margin-left: 22px;
+}
+
+#info_travelLink .inner-content {
+ top: 71px;
+}
+
+#info_travelLink .block-header-title {
+ top: 21px;
+ left: 75px;
+}
+
+#info_travelLink .list {
+ width: 308px;
+ border-radius: 2px;
+ max-height: 248px;
+ border: 1px solid #393939;
+}
+
+#info_travelLink .list .list-item:last-of-type {
+ height: 50px;
+ border: none;
+}
+
+#info_travelLink .list-content {
+ position: relative;
+ float: left;
+ width: 100%;
+ border: none;
+}
+
+#info_travelLink_listLeft {
+ left: 12px;
+ top: 92px;
+}
+
+#info_travelLink_listRight {
+ position: absolute;
+ top: 43px;
+ right: 5px;
+ width: 310px;
+}
+
+#info_travelLink_listLeft .list-item span,#info_travelLink_listRight .list-item span
+ {
+ margin-left: 44px;
+}
+
+#info_travelLink.fr #info_travelLink_listLeft .list-item span,#info_travelLink.fr #info_travelLink_listRight .list-item span
+ {
+ margin-left: 22px;
+}
+
+#info_travelLink_listRight_item0 span {
+ margin-left: 0px !important;
+}
+
+#info_travelLink_listRight_item0 {
+ text-align: center;
+}
+
+#info_travelLink_listRight .list-item:first-of-type {
+ height: 48px !important;
+}
+
+/******************* For Info.Alerts menu *****************/
+ /******************* For Info.Calendar menu ***************/
+#info_calendar {
+ left: 153px;
+ top: 48px;
+ width: 647px;
+ height: 384px;
+ background-image: url(../images/info/view_info_calendar.png);
+ background-repeat: no-repeat;
+ background-position: 4px 38px;
+}
+
+#info_calendar .inner-wrapper {
+ left: 99px;
+ top: 99px;
+}
+
+#info_calendar .c-btn {
+ width: 90px;
+ height: 34px;
+ background: url(../images/info/callendar-btn.png) no-repeat 0px 0px;
+ text-align: center;
+ line-height: 33px;
+}
+
+#info_calendar .c-btn.active {
+ background: #3b3b3b url(../images/common/btn-28h-gray-active.png)
+ repeat-x 0 5px !important;
+}
+
+#info_calendar .date {
+ white-space: nowrap;
+ font-size: 26px;
+ top: -43px;
+ left: 178px;
+}
+
+#info_calendar .today {
+ white-space: nowrap;
+ top: -58px;
+ left: 414px;
+ height: 48px;
+ width: 130px;
+ font-size: 20px;
+ line-height: 48px;
+ border: 1px #333 solid;
+ text-align: center;
+ border-radius: 2px;
+}
+
+#info_calendar .day {
+ width: 89px;
+ height: 36px;
+ text-align: center;
+ top: 5px;
+ line-height: 25px;
+}
+
+#info_calendar .day.active {
+ background: #f28b06;
+}
+
+#info_calendar .day-1 {
+ left: -86px;
+}
+
+#info_calendar .day-2 {
+ left: 3px;
+}
+
+#info_calendar .day-3 {
+ left: 93px;
+}
+
+#info_calendar .day-4 {
+ left: 183px;
+}
+
+#info_calendar .day-5 {
+ left: 272px;
+}
+
+#info_calendar .day-6 {
+ left: 363px;
+}
+
+#info_calendar .day-7 {
+ left: 453px;
+}
+
+#info_calendar .btn-1 {
+ left: -88px;
+ top: 40px;
+}
+
+#info_calendar .btn-8 {
+ left: -88px;
+ top: 75px;
+}
+
+#info_calendar .btn-15 {
+ left: -87px;
+ top: 108px;
+}
+
+#info_calendar .btn-22 {
+ left: -88px;
+ top: 141px;
+}
+
+#info_calendar .btn-29 {
+ left: -88px;
+ top: 174px;
+}
+
+#info_calendar .btn-7 {
+ left: 452px;
+ top: 40px;
+}
+
+#info_calendar .btn-14 {
+ left: 452px;
+ top: 75px;
+}
+
+#info_calendar .btn-21 {
+ left: 452px;
+ top: 108px;
+}
+
+#info_calendar .btn-28 {
+ left: 452px;
+ top: 141px;
+}
+
+#info_calendar .btn-6 {
+ left: 362px;
+ top: 40px;
+}
+
+#info_calendar .btn-13 {
+ left: 362px;
+ top: 75px;
+}
+
+#info_calendar .btn-20 {
+ left: 362px;
+ top: 108px;
+}
+
+#info_calendar .btn-27 {
+ left: 362px;
+ top: 141px;
+}
+
+#info_calendar .btn-5 {
+ left: 272px;
+ top: 40px;
+}
+
+#info_calendar .btn-12 {
+ left: 272px;
+ top: 75px;
+}
+
+#info_calendar .btn-19 {
+ left: 272px;
+ top: 108px;
+}
+
+#info_calendar .btn-26 {
+ left: 272px;
+ top: 141px;
+}
+
+#info_calendar .btn-4 {
+ left: 182px;
+ top: 40px;
+}
+
+#info_calendar .btn-11 {
+ left: 182px;
+ top: 75px;
+}
+
+#info_calendar .btn-18 {
+ left: 182px;
+ top: 108px;
+}
+
+#info_calendar .btn-25 {
+ left: 182px;
+ top: 141px;
+}
+
+#info_calendar .btn-3 {
+ left: 92px;
+ top: 40px;
+}
+
+#info_calendar .btn-10 {
+ left: 92px;
+ top: 75px;
+}
+
+#info_calendar .btn-17 {
+ left: 92px;
+ top: 108px;
+}
+
+#info_calendar .btn-24 {
+ left: 92px;
+ top: 141px;
+}
+
+#info_calendar .btn-31 {
+ left: 92px;
+ top: 174px;
+}
+
+#info_calendar .btn-2 {
+ left: 2px;
+ top: 40px;
+}
+
+#info_calendar .btn-9 {
+ left: 2px;
+ top: 75px;
+}
+
+#info_calendar .btn-16 {
+ left: 2px;
+ top: 108px;
+}
+
+#info_calendar .btn-23 {
+ left: 2px;
+ top: 141px;
+}
+
+#info_calendar .btn-30 {
+ left: 2px;
+ top: 174px;
+}
+
+/******************* For Info.DeviceList *******************/
+#info_view .info_apps_deviceList_view {
+ background: black;
+ width: 800px;
+ height: 480px;
+ z-index: 201;
+}
+
+#info_apps_deviceList_view .backButton {
+ top: 80px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ left: 5px;
+}
+
+#info_apps_deviceList_view .backButton .ico {
+ margin-top: 13px;
+ margin-left: 8px;
+}
+
+#info_apps_deviceList_view .list {
+ position: absolute;
+ width: 629px;
+ height: 251px;
+ border-radius: 2px;
+ left: 100px;
+ top: 154px;
+}
+
+#info_apps_deviceList_view .list-content {
+ width: 578px;
+ border: none;
+}
+
+#info_apps_deviceList_view .list-item {
+ border: 1px solid #393939 !important;
+}
+
+/******************* For Info.Apps menu*******************/
+#info_apps {
+ position: absolute;
+ top: 48px;
+ left: 153px;
+ width: 647px;
+ height: 384px;
+ float: left;
+ z-index: 1001;
+}
+
+#info_apps .backButton {
+ top: 59px;
+}
+
+#info_apps .block-header-title {
+ top: 67px;
+ left: 73px;
+}
+
+#info_apps_pushToTalk_buttton {
+ top: 80px;
+ right: 5px;
+ height: 48px;
+ width: 48px;
+ border: 1px solid #4bffff;
+ border-radius: 2px;
+}
+
+#info_apps_list {
+ top: 70px;
+ left: 13px;
+}
+
+#info_appst {
+ height: 250px;
+ position: relative;
+ float: left;
+ margin-top: 5px;
+ width: 554px;
+}
+
+#info_apps .list {
+ width: 629px;
+ height: 251px;
+}
+
+#info_apps_list .list-item .ico {
+ width: 50px;
+ height: 50px;
+ position: absolute;
+}
+
+#info_apps_list .list-item span {
+ margin-left: 50px;
+}
+
+#info_apps_list .list-item {
+ height: 48px !important;
+ border: 1px solid #393939;
+}
+
+#info_apps_list .list-content {
+ width: 279px;
+ border: none !important;
+}
+
+#info_apps .leftButtons {
+ width: 278px;
+ float: left;
+ margin-right: 10px;
+ height: 51px;
+ font-size: 20px;
+ line-height: 50px;
+ border: 1px solid #393939;
+ cursor: pointer;
+ left: 10px;
+}
+
+#info_apps .vehicleHealthReport {
+ top: 70px;
+}
+
+#info_apps .Asist911 {
+ top: 122px;
+}
+
+#info_apps .installButton {
+ top: 174px;
+}
+
+#info_apps .findNewApps {
+ top: 226px;
+}
+
+#info_apps .findNewApps img {
+ margin: 9px;
+ width: 32px;
+}
+
+#info_apps .getDeviceList {
+ top: 278px;
+}
+
+#info_apps .getDeviceList img {
+ width: 38px;
+ margin: 6px;
+}
+
+#info_apps .list {
+ float: right;
+ margin-right: 41px;
+ width: 330px
+}
+
+#info_apps_install_Button span {
+ position: absolute;
+}
+
+#info_apps.fr #info_apps_install_Button span {
+ position: absolute;
+ line-height: 20px;
+ width: 170px;
+ top: 3px;
+}
+
+#info_apps .list-item .ico {
+ float: left;
+}
+
+#info_apps .list-item span {
+ height: 23px;
+}
+
+#info_apps .inner-wrapper {
+ left: 100px;
+ top: 71px;
+}
+
+#info_apps_install_Button {
+ border: 1px solid #393939;
+ border-radius: 2px;
+ top: 269px;
+ left: 303px;
+} \ No newline at end of file
diff --git a/src/components/HMI/css/mcs.css b/src/components/HMI/css/mcs.css
new file mode 100644
index 0000000000..304e2ee8d6
--- /dev/null
+++ b/src/components/HMI/css/mcs.css
@@ -0,0 +1,3703 @@
+/*** Multi Contour Seat ** */
+#back-button {
+ background: url(../images/common/page-back-button.png) no-repeat center
+ 12px, url(../images/common/btn-48h.png);
+ width: 48px;
+ z-index: 5000;
+ left: -107px;
+ top: -72px;
+}
+
+#back-button.pressed {
+ background: url(../images/common/page-back-button.png) no-repeat center
+ 12px, url(../images/common/btn-48h-pressed.png);
+}
+
+#MultiContourSeat_customMassage {
+ visibility: hidden;
+ background-color: #000;
+ z-index: 200;
+ width: 800px;
+ height: 345px;
+ position: absolute;
+ top: -60px;
+ left: -112px;
+}
+
+#MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#MultiContourSeat_customMassage_caption2 {
+ top: 35px;
+ width: 350px;
+ text-align: center;
+ left: 225px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .MultiContourSeat_customMassage_previewButton
+ {
+ top: 172px;
+ left: 620px;
+ width: 120px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .MultiContourSeat_customMassage_previewButtonTop
+ {
+ top: 113px;
+ left: 535px;
+ width: 120px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .MultiContourSeat_customMassage_previewButtonBottom
+ {
+ top: 239px;
+ left: 535px;
+ width: 120px;
+ text-align: center;
+}
+
+#MultiContourSeat_customMassage_backButton {
+ top: 220px;
+ left: 535px;
+ width: 120px;
+ text-align: center;
+}
+
+#MultiContourSeat_customMassage_backButtonCenter {
+ bottom: 10px;
+ left: 340px;
+ width: 120px;
+ text-align: center;
+}
+
+#MultiContourSeatContainer .led {
+ width: 12px;
+ height: 40px;
+ background: url("../images/common/seat-act-led.png") no-repeat;
+ position: relative !important;
+ float: left;
+ background-position: -4px 0;
+}
+
+#MultiContourSeatContainer .led-inactive {
+ background: url("../images/common/seat-inact-led.png") no-repeat;
+ background-position: 3px 8px;
+ width: 12px;
+ height: 40px;
+ position: relative !important;
+ float: left;
+}
+
+#MultiContourSeat_customMassage .led {
+ /*background-position: -4px -6px;*/
+
+}
+
+#MultiContourSeat_customMassage .led-inactive {
+ /*background-position: 3px 2px;*/
+
+}
+
+#contentMCS {
+ top: 83px;
+ left: 112px;
+}
+
+#MultiContourSeatContainer {
+ position: absolute;
+ background-color: black;
+ width: 800px;
+ height: 384px;
+ top: -38px;
+ left: -160px;
+ z-index: 1001;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .block-header-title {
+ font-size: 26px;
+ width: 400px;
+ top: -72px;
+ left: -38px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .view_settings_vehicle_MultiContourSeat-left-s
+ {
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat-left-s.png)
+ no-repeat;
+ width: 193px;
+ height: 263px;
+ left: -70px;
+ top: -40px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .view_settings_vehicle_MultiContourSeat-Massage-left-s
+ {
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat-driver_massage_seat.png)
+ no-repeat;
+ width: 193px;
+ height: 263px;
+ left: -70px;
+ top: -40px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .notActiveSeat {
+ opacity: 0.5;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .not_selected .active {
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .driver {
+ width: 158px;
+ left: -54px;
+ top: 226px;
+ text-align: center;
+ line-height: 49px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .btn-48.active {
+ background: url(../images/common/btn-48h-active-gray.png) repeat-x
+ !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .btn-28.active {
+ background: url(../images/settings/btn-28h-gray-active.png) repeat-x
+ !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .adjust {
+ width: 158px;
+ left: -54px;
+ top: 226px;
+ text-align: center;
+ line-height: 49px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .massage {
+ width: 144px;
+ left: 299px;
+ top: -60px;
+ text-align: center;
+ line-height: 49px;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+ -webkit-border-top-right-radius: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ -moz-border-radius-topright: 3px;
+ -moz-border-radius-bottomright: 3px;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .adjust {
+ width: 144px;
+ left: 154px;
+ top: -60px;
+ text-align: center;
+ line-height: 49px;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ border-radius: 0;
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ -moz-border-radius-topleft: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .passenger {
+ width: 158px;
+ left: 496px;
+ top: 227px;
+ text-align: center;
+ line-height: 49px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .pressed {
+ background: url(../images/common/btn-48h-pressed.png) bottom repeat-x
+ !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-1 {
+ width: 32px;
+ height: 39px;
+ left: 414px;
+ top: 3px;
+ background: url(../images/settings/seats.png) no-repeat;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-2 {
+ width: 32px;
+ height: 39px;
+ left: 414px;
+ top: 61px;
+ background: url(../images/settings/seats.png) no-repeat 0 -61px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-3 {
+ width: 32px;
+ height: 39px;
+ left: 414px;
+ top: 118px;
+ background: url(../images/settings/seats.png) no-repeat 0 -117px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-4 {
+ width: 32px;
+ height: 39px;
+ left: 414px;
+ top: 179px;
+ background: url(../images/settings/seats.png) no-repeat 0 -177px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-5 {
+ width: 32px;
+ height: 39px;
+ left: 414px;
+ top: 236px;
+ background: url(../images/settings/seats.png) no-repeat 0 -233px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-message-1 {
+ width: 32px;
+ height: 38px;
+ left: 414px;
+ top: 3px;
+ background: url(../images/settings/seats-message.png) no-repeat;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-message-2 {
+ width: 32px;
+ height: 38px;
+ left: 414px;
+ top: 63px;
+ background: url(../images/settings/seats-message.png) no-repeat 0 -61px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seat-right {
+ width: 193px;
+ height: 263px;
+ left: 480px;
+ top: -40px;
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat-right-s.png)
+ no-repeat;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .massage-seat-right {
+ width: 193px;
+ height: 263px;
+ left: 480px;
+ top: -40px;
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat-Passenger_massage_seat.png)
+ no-repeat;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control {
+ width: 238px;
+ height: 41px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+
+#MultiContourSeat_customMassage .control {
+ width: 213px;
+ /*height: 28px;*/
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .indButtonMCS.active,#view_settings_vehicle_MultiContourSeat_Adjust .seats-message-actions.active,#view_settings_vehicle_MultiContourSeat_Adjust .control.active
+ {
+ border: 1px solid #ff9900;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control .minus {
+ width: 58px;
+ height: 41px;
+ border-right: 1px solid #393939;
+ -webkit-border-top-right-radius: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ -moz-border-radius-topright: 3px;
+ -moz-border-radius-bottomright: 3px;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ top: 0;
+ left: 0;
+ background: url(../images/common/btn-48h.png);
+ position: relative;
+ float: left;
+ cursor: pointer;
+}
+
+#MultiContourSeat_customMassage .control .minus { /* height: 28px;*/
+
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .ledContainer {
+ position: relative;
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control .plus {
+ width: 58px;
+ height: 41px;
+ border-left: 1px solid #393939;
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-bottom-left-radius: 3px;
+ -moz-border-radius-topleft: 3px;
+ -moz-border-radius-bottomleft: 3px;
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ top: 0px;
+ right: 0;
+ background: url(../images/common/btn-48h.png);
+ cursor: pointer;
+}
+
+#MultiContourSeat_customMassage .control .plus { /* height: 28px;*/
+
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control .minus .ico {
+ top: 19px;
+ left: 20px;
+ position: absolute;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control .plus .ico {
+ top: 12px;
+ left: 20px;
+ position: absolute;
+}
+
+#MultiContourSeat_customMassage .control .minus .ico { /*top: 13px;*/
+
+}
+
+#MultiContourSeat_customMassage .control .plus .ico { /*top: 6px;;*/
+
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control-1 {
+ top: 1px;
+ left: 155px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control-2 {
+ top: 60px;
+ left: 155px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control-3 {
+ top: 119px;
+ left: 155px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control-4 {
+ top: 177px;
+ left: 155px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .control-5 {
+ top: 235px;
+ left: 154px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-1 {
+ left: 60px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-2 {
+ left: 71px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-3 {
+ left: 82px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-4 {
+ left: 93px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-5 {
+ left: 104px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-6 {
+ left: 115px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-7 {
+ left: 126px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-8 {
+ left: 137px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-9 {
+ left: 148px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .led-10 {
+ left: 159px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-message-actions {
+ width: 238px;
+ height: 48px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ left: 154px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-message-actions-1
+ {
+ top: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .seats-message-actions-2
+ {
+ top: 60px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .quality {
+ width: 79px;
+ height: 48px;
+ background: url(../images/common/btn-48h.png);
+ font-size: 20px;
+ text-align: center;
+ line-height: 48px;
+ cursor: pointer;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .delim {
+ width: 4px;
+ height: 48px;
+ background: url(../images/common/delim.png) no-repeat;
+ z-index: 100;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .active.quality {
+ background: url(../images/common/btn-48h-active-gray.png) !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .delim-0 {
+ left: 76px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .delim-1 {
+ left: 158px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .button0 {
+ left: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .button1 {
+ left: 80px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust .button2 {
+ left: 159px;
+}
+
+#MultiContourSeatContainer .indButtonMCS {
+ width: 84px;
+ height: 49px;
+ cursor: pointer;
+}
+
+#MultiContourSeatContainer .indButtonMCS .ico {
+ top: 1px;
+ left: 26px;
+ position: absolute;
+}
+
+#MultiContourSeatContainer .indButtonMCS div {
+ width: 22px;
+ height: 17px;
+ top: 35px;
+ left: 25px;
+ position: relative;
+ float: left;
+ margin-left: -9px;
+}
+
+#MultiContourSeatContainer .indButtonMCS div.small_ind_def {
+ background: url(../images/climate/small_ind_def.png) no-repeat;
+}
+
+#MultiContourSeatContainer .indButtonMCS div.small_ind_active {
+ background: url(../images/climate/small_ind_active.png) no-repeat;
+}
+
+#MultiContourSeatContainer .indButtonMCS.notpressed {
+ background: url(../images/common/btn-48h.png);
+ background-size: contain;
+ border-radius: 3px;
+ border: 1px solid #393939;
+}
+
+#MultiContourSeatContainer .indButtonMCS.pressed {
+ background: url(../images/climate/left_person_control/rb_bg_pressed.png)
+ no-repeat;
+}
+
+/* BEGIN concept 1.1 */
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-actions
+ {
+ left: 186px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .massageTop1
+ {
+ width: 18px;
+ height: 27px;
+ left: 150px;
+ background-image: url(../images/settings/massageTop.png) !important;
+ background-repeat: no-repeat;
+ top: 8px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .massageTop2
+ {
+ width: 30px;
+ height: 27px;
+ left: 150px;
+ background-image: url(../images/settings/massageBottom.png) !important;
+ background-repeat: no-repeat;
+ top: 52px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .massageTop3
+ {
+ width: 30px;
+ height: 27px;
+ left: 143px;
+ background-image: url(../images/settings/massageVertical.png) !important;
+ background-repeat: no-repeat;
+ top: 96px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .dividerBlocks
+ {
+ width: 292px;
+ height: 0px;
+ border: 1px solid #525252;
+ left: 154px;
+ top: 139px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .massageBottom1
+ {
+ width: 29px;
+ height: 21px;
+ left: 143px;
+ background-image: url(../images/settings/MassageCircle.png) !important;
+ background-repeat: no-repeat;
+ top: 162px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .massageBottom2
+ {
+ width: 29px;
+ height: 30px;
+ left: 144px;
+ background-image: url(../images/settings/massageRound.png) !important;
+ background-repeat: no-repeat;
+ top: 200px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .massageBottom3
+ {
+ width: 27px;
+ height: 30px;
+ left: 144px;
+ background-image: url(../images/settings/massageHorisontal.png)
+ !important;
+ background-repeat: no-repeat;
+ top: 245px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-1
+ {
+ top: 46px;
+ left: 428px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-2
+ {
+ top: 196px;
+ left: 428px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .quality
+ {
+ width: 56px;
+ height: 38px;
+ line-height: 38px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-actions
+ {
+ width: 224px;
+ height: 38px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-actions-top2
+ {
+ top: 45px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-actions-top3
+ {
+ top: 90px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-actions-bottom1
+ {
+ top: 150px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-actions-bottom2
+ {
+ top: 195px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .seats-message-actions-bottom3
+ {
+ top: 240px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .delim
+ {
+ height: 38px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .delim-0
+ {
+ left: 54px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .delim-1
+ {
+ left: 110px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .delim-2
+ {
+ left: 166px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .button0
+ {
+ left: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .button1
+ {
+ left: 56px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .button2
+ {
+ left: 112px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1 .button3
+ {
+ left: 168px;
+}
+
+/* END concept 1.1 */ /* BEGIN concept 1.2 */
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .seats-message-actions
+ {
+ left: 154px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .seats-message-1
+ {
+ top: 35px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .seats-message-2
+ {
+ top: 203px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .quality
+ {
+ width: 56px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .quality img
+ {
+ margin-top: 10px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .seats-message-actions
+ {
+ width: 224px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .seats-message-actions-top2
+ {
+ top: 60px;
+ left: 210px;
+ width: 168px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .seats-message-actions-bottom1
+ {
+ top: 170px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .seats-message-actions-bottom2
+ {
+ top: 230px;
+ left: 210px;
+ width: 168px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .delim-0
+ {
+ left: 54px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .delim-1
+ {
+ left: 110px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .delim-2
+ {
+ left: 166px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .button0
+ {
+ left: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .button1
+ {
+ left: 56px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .button2
+ {
+ left: 112px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2 .button3
+ {
+ left: 168px;
+}
+
+/* END concept 1.2 */ /* BEGIN concept 1.3 */
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .indButtonMCS div.small_ind_active
+ {
+ background: url(../images/climate/small_ind_green.png) no-repeat;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .patternTextIndicator
+ {
+ top: -29px;
+ width: 80px;
+ text-align: center;
+ font-size: 18px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .patternTextTop
+ {
+ left: 280px;
+ width: 150px;
+ text-align: center;
+ font-size: 18px;
+ top: 30px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .patternTextBottom
+ {
+ left: 280px;
+ width: 150px;
+ text-align: center;
+ font-size: 18px;
+ top: 140px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-actions
+ {
+ left: 154px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-1
+ {
+ top: 35px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-2
+ {
+ top: 203px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .quality
+ {
+ width: 56px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .quality img
+ {
+ margin-top: 10px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-actions
+ {
+ width: 224px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-actions-top1
+ {
+ left: 159px;
+ top: 60px;
+ width: 78px;
+ height: 20px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-actions-top2
+ {
+ left: 270px;
+ top: 60px;
+ width: 168px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-actions-bottom1
+ {
+ top: 170px;
+ left: 159px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .seats-message-actions-bottom2
+ {
+ top: 170px;
+ left: 270px;
+ width: 168px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .delim-0
+ {
+ left: 54px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .delim-1
+ {
+ left: 110px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .delim-2
+ {
+ left: 166px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .button0
+ {
+ left: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .button1
+ {
+ left: 56px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .button2
+ {
+ left: 112px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_3 .button3
+ {
+ left: 168px;
+}
+
+/* END concept 1.3 */ /* BEGIN concept 1.4 */
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .patternText1
+ {
+ width: 78px;
+ height: 20px;
+ top: 65px;
+ left: 270px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .pattern1
+ {
+ background-image: url('../images/settings/massageTop.png');
+ background-repeat: no-repeat;
+ background-position: 53px 0px;
+ background-size: contain;
+ width: 83px;
+ height: 20px;
+ top: 65px;
+ left: 209px;
+ text-align: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .pattern2
+ {
+ background-image: url('../images/settings/massageBottom.png');
+ background-repeat: no-repeat;
+ background-position: 53px 0px;
+ background-size: contain;
+ width: 83px;
+ height: 20px;
+ top: 65px;
+ left: 209px;
+ text-align: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .pattern3
+ {
+ background-image: url('../images/settings/massageVertical.png');
+ background-repeat: no-repeat;
+ background-position: 52px 0px;
+ background-size: contain;
+ width: 83px;
+ height: 20px;
+ top: 65px;
+ left: 202px;
+ text-align: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .patternbottom1
+ {
+ background-image: url('../images/settings/massageCircle.png');
+ background-repeat: no-repeat;
+ background-position: 53px 0px;
+ background-size: contain;
+ width: 83px;
+ height: 20px;
+ top: 165px;
+ left: 196px;
+ text-align: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .patternbottom2
+ {
+ background-image: url('../images/settings/massageRound.png');
+ background-repeat: no-repeat;
+ background-position: 55px 0px;
+ background-size: contain;
+ width: 83px;
+ height: 20px;
+ top: 165px;
+ left: 196px;
+ text-align: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .patternbottom3
+ {
+ background-image: url('../images/settings/massageHorisontal.png');
+ background-repeat: no-repeat;
+ background-position: 55px 0px;
+ background-size: contain;
+ width: 83px;
+ height: 20px;
+ top: 165px;
+ left: 202px;
+ text-align: left;
+}
+
+#seatsMassageView1_4 .seatsMassageView1_4_seatLabel {
+ top: 172px;
+ left: 45px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .seats-message-2
+ {
+ top: 105px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .patternText2
+ {
+ width: 78px;
+ height: 20px;
+ top: 165px;
+ left: 271px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .labelTitle
+ {
+ width: 600px;
+ text-align: left;
+ height: 30px;
+ line-height: 30px;
+ font-size: 26px;
+ left: 74px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Settings
+ {
+ top: 200px;
+ left: 197px;
+ width: 138px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Settings span
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Settings .ico
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Massage
+ {
+ text-align: center;
+ height: 48px;
+ line-height: 48px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Massage.button0
+ {
+ top: 70px;
+ left: 45px;
+ width: 200px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Massage.button1
+ {
+ top: 130px;
+ left: 45px;
+ width: 200px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Massage.button2
+ {
+ top: 190px;
+ left: 45px;
+ width: 200px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5Back
+ {
+ top: 280px;
+ left: 45px;
+ width: 200px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .concept1_5SettingsScreen
+ {
+ top: -60px;
+ left: -112px;
+ width: 800px;
+ height: 345px;
+ background: black;
+ z-index: 100;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .btn-48
+ {
+ line-height: 48px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .show
+ {
+ visibility: visible !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .hide
+ {
+ visibility: hidden;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .quality
+ {
+ width: 56px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .quality img
+ {
+ margin-top: 10px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .seats-message-actions-top
+ {
+ left: 355px;
+ top: 120px;
+ width: 168px !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .seats-message-actions-bottom
+ {
+ left: 355px;
+ top: 210px;
+ width: 168px !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .seats-message-actions
+ {
+ width: 224px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .seats-message-actions-2
+ {
+ top: 100px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .delim-0
+ {
+ left: 54px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .delim-1
+ {
+ left: 110px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .delim-2
+ {
+ left: 166px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .button0
+ {
+ left: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .button1
+ {
+ left: 56px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .button2
+ {
+ left: 112px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 .button3
+ {
+ left: 168px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 #alternatingMassage .seats-message-1
+ {
+ width: 32px;
+ height: 38px;
+ top: 126px;
+ background: url(../images/settings/seats-message.png) no-repeat;
+ left: 285px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_4 #alternatingMassage .seats-message-2
+ {
+ width: 32px;
+ height: 38px;
+ top: 216px;
+ left: 285px;
+ background: url(../images/settings/seats-message.png) no-repeat 0 -61px;
+}
+
+/* END concept 1.4 */ /* BEGIN concept 1.5 */
+#seatsMassageView1_5 .seatsMassageView1_5_seatLabel {
+ top: 160px;
+ left: 0px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .labelTitle
+ {
+ width: 600px;
+ text-align: left;
+ height: 30px;
+ line-height: 30px;
+ font-size: 26px;
+ left: 74px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .labelText
+ {
+ top: 97px;
+ width: 672px;
+ text-align: center;
+ left: 140px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Settings
+ {
+ top: 120px;
+ left: 205px;
+ width: 138px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Settings span
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Settings .ico
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Massage
+ {
+ text-align: center;
+ height: 48px;
+ line-height: 48px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Massage.button0
+ {
+ top: 147px;
+ left: 240px;
+ width: 150px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Massage.button1
+ {
+ top: 147px;
+ left: 400px;
+ width: 150px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Massage.button2
+ {
+ top: 147px;
+ left: 560px;
+ width: 150px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5Back
+ {
+ top: 280px;
+ left: 45px;
+ width: 200px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .concept1_5SettingsScreen
+ {
+ top: -60px;
+ left: -112px;
+ width: 800px;
+ height: 345px;
+ background: black;
+ z-index: 100;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .concept1_5Settings .ico
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .btn-48
+ {
+ line-height: 48px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .show
+ {
+ visibility: visible !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView1_5 .hide
+ {
+ visibility: hidden;
+}
+
+/* END concept 1.5 */ /* BEGIN HMI concept 2.1 */
+#seatsMassageView2_1 .seatsMassageView2_1_seatLabel {
+ top: 160px;
+ left: 0px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#seatsMassageView2_1 .MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#seatsMassageView2_1 .control {
+ width: 237px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .quality
+ {
+ width: 50px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .seats-message-actions
+ {
+ width: 250px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .delim-0
+ {
+ left: 48px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .delim-1
+ {
+ left: 98px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .delim-2
+ {
+ left: 148px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .button0
+ {
+ left: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .button1
+ {
+ left: 50px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .button2
+ {
+ left: 100px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .button3
+ {
+ left: 150px;
+ width: 100px;
+}
+
+#seatsMassageView2_1_settingsButton {
+ width: 210px;
+ left: 175px;
+ top: 130px;
+ line-height: 49px;
+}
+
+#seatsMassageView2_1_settingsButton .ico {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .control-11
+ {
+ top: 60px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .control-12
+ {
+ top: 105px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .control-13
+ {
+ top: 150px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .control-14
+ {
+ top: 210px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_1 .control-15
+ {
+ top: 255px;
+ left: 370px;
+}
+
+#seatsMassageView2_1 #MultiContourSeat_customMassage .seats-message-1 {
+ left: 150px;
+ top: 107px;
+}
+
+#seatsMassageView2_1 #MultiContourSeat_customMassage .seats-message-2 {
+ left: 150px;
+ top: 234px;
+}
+
+#seatsMassageView2_1_upperLabel {
+ top: 73px;
+ left: 645px;
+}
+
+#seatsMassageView2_1_middleLabel {
+ top: 117px;
+ left: 645px;
+}
+
+#seatsMassageView2_1_lowerLabel {
+ top: 162px;
+ left: 645px;
+}
+
+#seatsMassageView2_1_frontLabel {
+ top: 223px;
+ left: 645px;
+}
+
+#seatsMassageView2_1_rearLabel {
+ top: 266px;
+ left: 645px;
+}
+
+/* END HMI concept 2.1 */ /* BEGIN HMI concept 2.2 */
+#seatsMassageView2_2 .MultiContourSeat_customMassage_previewButtonTop {
+ top: 134px;
+ left: 625px;
+ width: 120px;
+ text-align: center;
+}
+
+#seatsMassageView2_2 .MultiContourSeat_customMassage_previewButtonBottom
+ {
+ top: 282px;
+ left: 625px;
+ width: 120px;
+ text-align: center;
+}
+
+#seatsMassageView2_2 .control {
+ width: 240px;
+ /*height: 28px;*/
+}
+
+#seatsMassageView2_2 .seatsMassageView2_2_seatLabel {
+ top: 172px;
+ left: 0px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .quality
+ {
+ width: 100px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .seats-message-actions
+ {
+ width: 200px;
+ left: 198px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .delim-0
+ {
+ left: 98px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .button0
+ {
+ left: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .button1
+ {
+ left: 100px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .control-11
+ {
+ top: 80px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .control-12
+ {
+ top: 125px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .control-13
+ {
+ top: 170px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .control-14
+ {
+ top: 253px;
+ left: 370px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView2_2 .control-15
+ {
+ top: 298px;
+ left: 370px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .seats-message-1 {
+ left: 230px;
+ top: 128px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .seats-message-2 {
+ left: 720px;
+ top: 275px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .seats-message-actions-3
+ {
+ top: 45px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .seats-message-actions-4
+ {
+ top: 218px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .seats-message-actions
+ {
+ left: 358px;
+ width: 265px;
+ height: 28px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .quality {
+ width: 50px;
+ height: 28px;
+ line-height: 29px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .delim {
+ height: 28px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .delim-0 {
+ left: 48px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .delim-1 {
+ left: 98px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .delim-2 {
+ left: 148px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .button0 {
+ left: 0;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .button1 {
+ left: 50px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .button2 {
+ left: 100px;
+}
+
+#seatsMassageView2_2 #MultiContourSeat_customMassage .button3 {
+ left: 150px;
+ width: 115px;
+}
+
+#seatsMassageView2_2_upperLabel {
+ top: 93px;
+ left: 645px;
+}
+
+#seatsMassageView2_2_middleLabel {
+ top: 138px;
+ left: 645px;
+}
+
+#seatsMassageView2_2_lowerLabel {
+ top: 182px;
+ left: 645px;
+}
+
+#seatsMassageView2_2_frontLabel {
+ top: 266px;
+ left: 645px;
+}
+
+#seatsMassageView2_2_rearLabel {
+ top: 310px;
+ left: 645px;
+}
+
+#seatsMassageView2_2_settingsButton {
+ width: 210px;
+ left: 192px;
+ top: 130px;
+ line-height: 49px;
+}
+
+#seatsMassageView2_2_settingsButton .ico {
+ float: left;
+}
+
+/* END HMI concept 2.2 */ /* BEGIN HMI concept 4.1 */
+#seatsMassageView4_1 .seatsMassageView4_1_seatLabel {
+ top: 172px;
+ left: 45px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#seatsMassageView4_1_settingsButton {
+ width: 140px;
+ left: 200px;
+ top: 130px;
+ line-height: 49px;
+}
+
+#seatsMassageView4_1_settingsButton .ico {
+ float: left;
+}
+
+#seatsMassageView4_1 #MultiContourSeat_customMassage .seats-message-actions
+ {
+ left: 280px;
+}
+
+#seatsMassageView4_1 #MultiContourSeat_customMassage .seats-message-actions-3
+ {
+ top: 115px;
+}
+
+#seatsMassageView4_1 #MultiContourSeat_customMassage .seats-message-actions-4
+ {
+ top: 205px;
+}
+
+#seatsMassageView4_1 #MultiContourSeat_customMassage .seats-message-3 {
+ right: 220px;
+ top: 120px;
+ width: 32px;
+ height: 38px;
+ background: url(../images/settings/seats-message.png) no-repeat;
+}
+
+#seatsMassageView4_1 #MultiContourSeat_customMassage .seats-message-4 {
+ right: 220px;
+ top: 210px;
+ width: 32px;
+ height: 38px;
+ background: url(../images/settings/seats-message.png) no-repeat 0 -61px;
+}
+
+/* END HMI concept 4.1 */ /* BEGIN HMI concept 5.1 */
+#seatsMassageView5_1 .MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#seatsMassageView5_1 .seatsMassageView5_1_seatLabel {
+ top: 187px;
+ left: 0px;
+ font-size: 24px;
+ width: 140px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 #MultiContourSeat_customMassage_backButtonCenter
+ {
+ bottom: 0px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .lableToggleButton
+ {
+ height: 48px;
+ border: 1px solid gray;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .lableToggleButton .btn-48
+ {
+ height: 46px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .lableToggleButton .lableToggle
+ {
+ line-height: 30px;
+ margin-left: 10px;
+ margin-top: 10px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .toogleButtonContainer
+ {
+ width: 100px;
+ margin: 0px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .toogleButtonContainer .toggles
+ {
+ position: absolute;
+ float: left;
+ width: 50px;
+ height: 28px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .seatsMassageView_settingsButton
+ {
+ width: 140px;
+ left: 200px;
+ top: 130px;
+ line-height: 49px;
+ text-align: left !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .seatsMassageView_settingsButton span
+ {
+ position: absolute;
+ line-height: 50px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .toogleButtonContainer span
+ {
+ position: absolute;
+ width: 50px;
+ margin-top: 0px;
+ text-align: center;
+ line-height: 28px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .seats-message-actions-3
+ {
+ left: 247px;
+ margin-top: 10px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .concept1_5Settings
+ {
+ top: 200px;
+ left: 197px;
+ width: 138px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .concept1_5Settings span
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .concept1_5Settings .ico
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .concept1_5Massage
+ {
+ text-align: center;
+ height: 48px;
+ line-height: 48px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist {
+ top: 76px;
+ left: 139px;
+ height: 251px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-content {
+ width: 674px;
+ border-right: none;
+ border-top: none;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item:first-child,#seatsMassageView5_1 .MCSSettingslist .soundButton:first-child
+ {
+ border-top: 1px solid #393939;
+ height: 48px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item {
+ position: relative;
+ width: 577px;
+ float: left;
+ height: 49px;
+ border-bottom: 1px solid #393939;
+ border-right: 1px solid #393939;
+ line-height: 50px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item.soundButton {
+ width: 48px;
+ border-left: 1px solid #393939;
+ margin-left: 10px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item.soundButton .ico {
+ border: none;
+ margin-top: 12px;
+ margin-right: 11px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item.pressed {
+ background: url(../images/phone/phone_button_bg_active.png) repeat-x
+ !important;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item>span {
+ margin-left: 13px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item .ico {
+ float: right;
+ border: 1px solid #393939;
+ border-radius: 2px;
+ margin-top: 9px;
+ margin-right: 9px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .list-item.big-ico img {
+ float: right;
+ border: none;
+ margin-top: 4px;
+ margin-right: 9px;
+}
+
+#seatsMassageView5_1 .MCSSettingslist .toggles,#seatsMassageView5_1 .MCSSettingslist .toggles span
+ {
+ width: 148px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .MCSSettingslist .button1
+ {
+ left: 148px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .MCSSettingslist .delim
+ {
+ height: 29px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .MCSSettingslist .delim-0
+ {
+ left: 147px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .toogleButtonContainer .button1
+ {
+ left: 50px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .toogleButtonContainer .delim-0
+ {
+ left: 48px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .concept1_5Back
+ {
+ top: 280px;
+ left: 45px;
+ width: 200px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .concept1_5SettingsScreen
+ {
+ top: -60px;
+ left: 154px;
+ width: 291px;
+ height: 345px;
+ background: black;
+ z-index: 100;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .btn-48
+ {
+ line-height: 48px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .show
+ {
+ visibility: visible !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView5_1 .hide
+ {
+ visibility: hidden;
+}
+
+/* END HMI concept 5.1 */ /* BEGIN HMI concept 5.2 */
+#seatsMassageView5_2_settingsButton {
+ width: 140px;
+ left: 200px;
+ top: 130px;
+ line-height: 49px;
+}
+
+#seatsMassageView5_2 .MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#seatsMassageView5_2 .seatsMassageView5_2_seatLabel {
+ top: 160px;
+ left: 0px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#seatsMassageView5_2_settingsButton .ico {
+ float: left;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .seats-message-actions
+ {
+ left: 275px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .seats-message-actions-3
+ {
+ top: 90px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .seats-message-actions-4
+ {
+ top: 190px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .quality {
+ width: 50px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .seats-message-actions
+ {
+ width: 250px;
+}
+
+#MultiContourSeat_customMassage_5_2_topLabel {
+ top: 65px;
+ left: 275px;
+ width: 250px;
+ text-align: center;
+}
+
+#MultiContourSeat_customMassage_5_2_bottomLabel {
+ top: 165px;
+ left: 275px;
+ width: 250px;
+ text-align: center;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .delim-0 {
+ left: 48px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .delim-1 {
+ left: 98px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .delim-2 {
+ left: 148px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .delim-3 {
+ left: 198px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .button0 {
+ left: 0;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .button1 {
+ left: 50px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .button2 {
+ left: 100px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .button3 {
+ left: 150px;
+}
+
+#seatsMassageView5_2 #MultiContourSeat_customMassage .button4 {
+ left: 200px;
+}
+
+/* END HMI concept 5.2 */ /* BEGIN HMI concept 6.1 */
+#seatsMassageView6_1 #settingsScreen .seatsMassageView6_1_seatLabel {
+ top: 13px;
+ left: 600px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#seatsMassageView6_1 .mySettingsPopUpTitle {
+ width: 143px;
+ height: 25px;
+ position: absolute;
+ top: 163px;
+ left: 216px !important;
+ background: gray;
+ text-align: center;
+ line-height: 25px;
+ font-size: 16px !important;
+ font-weight: bold;
+}
+
+#seatsMassageView6_1 .mySettingsLabel {
+ z-index: 100;
+ left: 102px;
+}
+
+#seatsMassageView6_1 .MultiContourSeat_customMassage .btn-28.active {
+ background: url(../images/common/btn-48h-active-gray.png) repeat-x
+ !important;
+}
+
+#seatsMassageView6_1 #settingsScreen .durationButtons .quality,#seatsMassageView6_1 #settingsScreen .pauseButtons .quality
+ {
+ width: 60px;
+}
+
+#seatsMassageView6_1 #settingsScreen .quality {
+ height: 35px;
+ width: 130px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+}
+
+#seatsMassageView6_1 #settingsScreen .btn-28 {
+ text-align: center;
+ line-height: 34px;
+}
+
+#seatsMassageView6_1 .settingsScreen {
+ width: 800px;
+ height: 368px;
+ top: -15px;
+ background: black;
+ visibility: hidden;
+}
+
+#seatsMassageView6_1 .settingsScreen2 {
+ width: 800px;
+ height: 368px;
+ top: -15px;
+ background: black;
+ visibility: hidden;
+}
+
+#seatsMassageView6_1 #settingsScreen .seats-message-actions {
+ height: 39px;
+ border: none;
+}
+
+#seatsMassageView6_1 #settingsScreen .button0 {
+ left: 0;
+}
+
+#seatsMassageView6_1 #settingsScreen .button1 {
+ left: 140px;
+}
+
+#seatsMassageView6_1 #settingsScreen .button2 {
+ left: 280px;
+}
+
+#seatsMassageView6_1 #settingsScreen .button3 {
+ left: 420px;
+}
+
+#seatsMassageView6_1 #settingsScreen .durationButtons .button0,#seatsMassageView6_1 #settingsScreen .pauseButtons .button0
+ {
+ left: 0;
+}
+
+#seatsMassageView6_1 #settingsScreen .durationButtons .button1,#seatsMassageView6_1 #settingsScreen .pauseButtons .button1
+ {
+ left: 70px;
+}
+
+#seatsMassageView6_1 #settingsScreen .durationButtons .button2,#seatsMassageView6_1 #settingsScreen .pauseButtons .button2
+ {
+ left: 140px;
+}
+
+#seatsMassageView6_1 #settingsScreen .durationButtons .button3,#seatsMassageView6_1 #settingsScreen .pauseButtons .button3
+ {
+ left: 210px;
+}
+
+#seatsMassageView6_1 #settingsScreen .durationButtons .button4,#seatsMassageView6_1 #settingsScreen .pauseButtons .button4
+ {
+ left: 280px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .control-11
+ {
+ top: 60px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .control-12
+ {
+ top: 105px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .control-13
+ {
+ top: 150px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .control-14
+ {
+ top: 230px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .control-15
+ {
+ top: 275px;
+ left: 350px;
+}
+
+#seatsMassageView6_1 #settingsScreen2 .seats-message-1 {
+ left: 280px;
+ top: 110px;
+}
+
+#seatsMassageView6_1 #settingsScreen2 .seats-message-2 {
+ left: 280px;
+ top: 252px;
+}
+
+#seatsMassageView6_1 .seatsMassageView6_1_seatLabel {
+ top: 172px;
+ left: 45px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#seatsMassageView6_1 .MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#seatsMassageView6_1 .seatsMassageView6_1_upperLabel {
+ top: 73px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_1 .seatsMassageView6_1_middleLabel {
+ top: 118px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_1 .seatsMassageView6_1_lowerLabel {
+ top: 163px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_1 .seatsMassageView6_1_frontLabel {
+ top: 243px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_1 .seatsMassageView6_1_rearLabel {
+ top: 287px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_1 .label {
+ font-size: 26px;
+ left: 20px;
+}
+
+#seatsMassageView6_1 .massageLabel {
+ top: 51px;
+}
+
+#seatsMassageView6_1 .pattern {
+ top: 91px;
+}
+
+#seatsMassageView6_1 .intensity {
+ top: 131px;
+}
+
+#seatsMassageView6_1 .speed {
+ top: 211px;
+}
+
+#seatsMassageView6_1 .duration {
+ top: 251px;
+}
+
+#seatsMassageView6_1 .pause {
+ top: 291px;
+}
+
+#seatsMassageView6_1 .editMenu {
+ left: 70px;
+ width: 240px;
+ top: 12px;
+ text-align: center;
+}
+
+#seatsMassageView6_1 .massageButtons {
+ top: 50px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_1 .massageButtons img {
+ height: 34px;
+}
+
+#seatsMassageView6_1 .patternButtons {
+ top: 90px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_1 .intensityButtons {
+ top: 130px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_1 .intensityEditCustom {
+ top: 170px;
+ left: 520px;
+ width: 270px;
+ height: 34px;
+}
+
+#seatsMassageView6_1 .speedButtons {
+ top: 210px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_1 .durationButtons {
+ top: 250px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_1 .pauseButtons {
+ top: 290px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_1 .preview {
+ top: 330px;
+ left: 289px;
+ width: 214px;
+ height: 34px;
+}
+
+#seatsMassageView6_1 .MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#seatsMassageView6_1 .settingsScreen2 .MultiContourSeat_customMassage_caption
+ {
+ top: 14px;
+}
+
+#seatsMassageView6_1 .SettingsBlocks {
+ margin-left: auto;
+ margin-right: auto;
+ width: 315px;
+ height: 50px;
+ position: relative;
+ -webkit-transition: width 1s;
+}
+
+#seatsMassageView6_1 .MultiContourSeat_customMassage {
+ visibility: hidden;
+ background-color: #000;
+ z-index: 200;
+ width: 800px;
+ height: 345px;
+ position: absolute;
+ top: -60px;
+ left: -112px;
+ background-image: url('../images/settings/mcsBlockBackArrow6_1.png');
+ background-position: 339px 39px;
+ background-repeat: no-repeat;
+}
+
+#seatsMassageView6_1 .btn-48 {
+ line-height: 48px;
+ text-align: center;
+}
+
+#seatsMassageView6_1 .show {
+ visibility: visible !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButtonUp
+ {
+ width: 200px;
+ left: 560px;
+ top: 101px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButtonDown
+ {
+ width: 200px;
+ left: 560px;
+ bottom: 143px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButtonEdit
+ {
+ width: 250px;
+ left: 275px;
+ bottom: 40px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButtonNew
+ {
+ width: 100px;
+ left: 275px;
+ bottom: 0px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButtonTrash
+ {
+ width: 140px;
+ left: 385px;
+ bottom: 0px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsBlock
+ {
+ width: 220px;
+ top: 130px;
+ text-align: center !important;
+ transition: 1s;
+ -webkit-transition: top 1s; /* Safari and Chrome */
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButton
+ {
+ width: 159px;
+ left: 154px;
+ top: 205px;
+ line-height: 49px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButton2
+ {
+ width: 50px;
+ left: 365px;
+ top: 205px;
+ line-height: 49px;
+ text-align: left !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .seatsMassageView_settingsButton3
+ {
+ width: 50px;
+ left: 403px;
+ top: 130px;
+ line-height: 49px;
+ text-align: left !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .hide
+ {
+ visibility: hidden;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_1 .captionMySettings
+ {
+ top: 157px;
+ left: 138px;
+ width: 300px;
+ height: 90px;
+ border: 1px solid;
+ padding: 8px 13px 13px 13px;
+ font-size: 26px;
+}
+
+/* END HMI concept 6.1 */ /* BEGIN HMI concept 6.2 */
+#seatsMassageView6_2 #settingsScreen .seatsMassageView6_2_seatLabel {
+ top: 13px;
+ left: 600px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#seatsMassageView6_2 .MultiContourSeat_customMassage .seatsMassageView6_2_seatLabel_custom
+ {
+ top: 60px;
+ left: 300px !important;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .seatsMassageView_settingsButton
+ {
+ width: 159px;
+ left: 154px;
+ top: 205px;
+ line-height: 49px;
+ z-index: 1;
+}
+
+#seatsMassageView6_2 .mySettingsPopUpTitle {
+ width: 143px;
+ height: 25px;
+ position: absolute;
+ top: 163px;
+ left: 216px !important;
+ background: gray;
+ text-align: center;
+ line-height: 25px;
+ font-size: 16px !important;
+ font-weight: bold;
+}
+
+#seatsMassageView6_2 .mySettingsLabel {
+ z-index: 100;
+ left: 102px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .captionMySettings
+ {
+ top: 157px;
+ left: 138px;
+ width: 300px;
+ height: 90px;
+ border: 1px solid;
+ padding: 8px 13px 13px 13px;
+ font-size: 26px;
+}
+
+#seatsMassageView6_2 #settingsScreen .durationButtons .quality,#seatsMassageView6_2 #settingsScreen .pauseButtons .quality
+ {
+ width: 60px;
+}
+
+#seatsMassageView6_2 #settingsScreen .quality {
+ height: 35px;
+ width: 130px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+}
+
+#seatsMassageView6_2 #settingsScreen .btn-28 {
+ text-align: center;
+ line-height: 34px;
+}
+
+#seatsMassageView6_2 .settingsScreen {
+ width: 800px;
+ height: 368px;
+ top: -15px;
+ background: black;
+ visibility: hidden;
+}
+
+#seatsMassageView6_2 .settingsScreen2 {
+ width: 800px;
+ height: 368px;
+ top: -15px;
+ background: black;
+ visibility: hidden;
+}
+
+#seatsMassageView6_2 #settingsScreen .seats-message-actions {
+ height: 39px;
+ border: none;
+}
+
+#seatsMassageView6_2 #settingsScreen .button0 {
+ left: 0;
+}
+
+#seatsMassageView6_2 #settingsScreen .button1 {
+ left: 140px;
+}
+
+#seatsMassageView6_2 #settingsScreen .button2 {
+ left: 280px;
+}
+
+#seatsMassageView6_2 #settingsScreen .button3 {
+ left: 420px;
+}
+
+#seatsMassageView6_2 #settingsScreen .durationButtons .button0,#seatsMassageView6_2 #settingsScreen .pauseButtons .button0
+ {
+ left: 0;
+}
+
+#seatsMassageView6_2 #settingsScreen .durationButtons .button1,#seatsMassageView6_2 #settingsScreen .pauseButtons .button1
+ {
+ left: 70px;
+}
+
+#seatsMassageView6_2 #settingsScreen .durationButtons .button2,#seatsMassageView6_2 #settingsScreen .pauseButtons .button2
+ {
+ left: 140px;
+}
+
+#seatsMassageView6_2 #settingsScreen .durationButtons .button3,#seatsMassageView6_2 #settingsScreen .pauseButtons .button3
+ {
+ left: 210px;
+}
+
+#seatsMassageView6_2 #settingsScreen .durationButtons .button4,#seatsMassageView6_2 #settingsScreen .pauseButtons .button4
+ {
+ left: 280px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .control-11
+ {
+ top: 60px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .control-12
+ {
+ top: 105px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .control-13
+ {
+ top: 150px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .control-14
+ {
+ top: 230px;
+ left: 350px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .control-15
+ {
+ top: 275px;
+ left: 350px;
+}
+
+#seatsMassageView6_2 #settingsScreen2 .seats-message-1 {
+ left: 280px;
+ top: 110px;
+}
+
+#seatsMassageView6_2 #settingsScreen2 .seats-message-2 {
+ left: 280px;
+ top: 252px;
+}
+
+#seatsMassageView6_2 .seatsMassageView6_2_seatLabel {
+ top: 172px;
+ left: 45px;
+ font-size: 24px;
+ width: 199px;
+ text-align: center;
+}
+
+#seatsMassageView6_2 .MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#seatsMassageView6_2 .seatsMassageView6_2_upperLabel {
+ top: 73px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_2 .seatsMassageView6_2_middleLabel {
+ top: 118px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_2 .seatsMassageView6_2_lowerLabel {
+ top: 163px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_2 .seatsMassageView6_2_frontLabel {
+ top: 243px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_2 .seatsMassageView6_2_rearLabel {
+ top: 287px;
+ left: 615px !important;
+ font-size: 18px !important;
+}
+
+#seatsMassageView6_2 .label {
+ font-size: 26px;
+ left: 20px;
+}
+
+#seatsMassageView6_2 .massageLabel {
+ top: 51px;
+}
+
+#seatsMassageView6_2 .pattern {
+ top: 91px;
+}
+
+#seatsMassageView6_2 .intensity {
+ top: 131px;
+}
+
+#seatsMassageView6_2 .speed {
+ top: 211px;
+}
+
+#seatsMassageView6_2 .duration {
+ top: 251px;
+}
+
+#seatsMassageView6_2 .pause {
+ top: 291px;
+}
+
+#seatsMassageView6_2 .editMenu {
+ width: 240px;
+ top: 12px;
+ text-align: center;
+ left: 70px;
+}
+
+#seatsMassageView6_2 .massageButtons {
+ top: 50px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_2 .massageButtons img {
+ height: 34px;
+}
+
+#seatsMassageView6_2 .patternButtons {
+ top: 90px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_2 .intensityButtons {
+ top: 130px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_2 .intensityEditCustom {
+ top: 170px;
+ left: 520px;
+ width: 270px;
+ height: 34px;
+}
+
+#seatsMassageView6_2 .speedButtons {
+ top: 210px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_2 .durationButtons {
+ top: 250px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_2 .pauseButtons {
+ top: 290px;
+ left: 240px;
+ width: 560px;
+}
+
+#seatsMassageView6_2 .preview {
+ top: 330px;
+ left: 289px;
+ width: 214px;
+ height: 34px;
+}
+
+#seatsMassageView6_2 .settingsScreen2 .MultiContourSeat_customMassage_caption
+ {
+ top: 14px;
+}
+
+#seatsMassageView6_2 .MultiContourSeat_customMassage_caption {
+ width: 600px;
+ height: 28px;
+ line-height: 29px;
+ left: 74px;
+ font-size: 26px;
+}
+
+#seatsMassageView6_2 .SettingsBlocks {
+ margin-left: auto;
+ margin-right: auto;
+ width: 315px;
+ height: 50px;
+ position: relative;
+ -webkit-transition: width 1s;
+}
+
+#seatsMassageView6_2 .MultiContourSeat_customMassage {
+ visibility: hidden;
+ background-color: #000;
+ z-index: 200;
+ width: 800px;
+ height: 345px;
+ position: absolute;
+ top: -60px;
+ left: -112px;
+ background-image: url('../images/settings/mcsBlockBackArrow6_2.png');
+ background-position: 39px 145px;
+ background-repeat: no-repeat;
+}
+
+#seatsMassageView6_2 .btn-48 {
+ line-height: 48px;
+ text-align: center;
+}
+
+#seatsMassageView6_2 .show {
+ visibility: visible !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .seatsMassageView_settingsButtonNew
+ {
+ width: 100px;
+ left: 270px;
+ bottom: 20px;
+ line-height: 49px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .seatsMassageView_settingsButtonTrash
+ {
+ width: 71px;
+ left: 446px;
+ bottom: 5px;
+ line-height: 49px;
+ height: 78px;
+ background-image: url("../images/settings/trash.png");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .seatsMassageView_settingsButtonSave
+ {
+ width: 100px;
+ left: 480px;
+ bottom: 20px;
+ line-height: 49px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .seatsMassageView_settingsBlock
+ {
+ width: 100px;
+ top: 130px;
+ line-height: 49px;
+ text-align: center !important;
+ transition: left 1s;
+ -webkit-transition: left 1s; /* Safari and Chrome */
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .seatsMassageView_settingsButton2
+ {
+ width: 50px;
+ left: 365px;
+ top: 205px;
+ line-height: 49px;
+ text-align: left !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .seatsMassageView_settingsButton3
+ {
+ width: 50px;
+ left: 403px;
+ top: 130px;
+ line-height: 49px;
+ text-align: left !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView6_2 .hide
+ {
+ visibility: hidden;
+}
+
+/* END HMI concept 6.2 */ /* BEGIN HMI concept 7.1 */
+#seatsMassageView7_1_appendix .localBack {
+ background: url(../images/common/page-back-button.png) no-repeat center
+ 12px, url(../images/common/btn-48h.png);
+ width: 48px;
+ z-index: 5000;
+ left: 5px;
+ top: 59px;
+ visibility: hidden;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .seatsMassageView_settingsButton2
+ {
+ width: 50px;
+ left: 365px;
+ top: 205px;
+ line-height: 49px;
+ text-align: left !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .seatsMassageView_settingsButton
+ {
+ width: 159px;
+ left: 154px;
+ top: 205px;
+ line-height: 49px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .captionMySettings
+ {
+ top: 157px;
+ left: 138px;
+ width: 300px;
+ height: 90px;
+ border: 1px solid;
+ padding: 8px 13px 13px 13px;
+ font-size: 26px;
+}
+
+#seatsMassageView7_1 .mySettingsPopUpTitle {
+ width: 143px;
+ height: 25px;
+ position: absolute;
+ top: 163px;
+ left: 216px !important;
+ background: gray;
+ text-align: center;
+ line-height: 25px;
+ font-size: 16px !important;
+ font-weight: bold;
+}
+
+#seatsMassageView7_1 .mySettingsLabel {
+ z-index: 100;
+ left: 102px;
+}
+
+#seatsMassageView7_1_appendix .btn-48 {
+ line-height: 48px;
+ text-align: center;
+}
+
+#seatsMassageView7_1_appendix .seats-message-actions-3 {
+ top: 165px;
+ left: 59px;
+}
+
+#seatsMassageView7_1_appendix .show {
+ visibility: visible !important;
+}
+
+#seatsMassageView7_1_appendix {
+ z-index: 2003;
+}
+
+#seatsMassageView7_1_appendix .SeatsMassageDialogView {
+ visibility: hidden;
+ background-color: whiteSmoke;
+ width: 350px;
+ height: 368px;
+ position: absolute;
+ top: 56px;
+ left: 305px !important;
+ background: black;
+ border: #A6A6A6 solid 2px;
+ border-radius: 6px;
+ font-size: 18px;
+ font-family: Arial;
+}
+
+#seatsMassageView7_1_appendix .titleQuestion {
+ font-size: 21px;
+ font-family: Arial;
+ width: 350px;
+ text-align: center;
+ top: 25px;
+}
+
+#seatsMassageView7_1_appendix .question {
+ font-size: 18px;
+ font-family: Arial;
+ width: 350px;
+ text-align: center;
+ top: 65px;
+}
+
+#seatsMassageView7_1_appendix .titleAnswer {
+ font-size: 21px;
+ font-family: Arial;
+ width: 350px;
+ text-align: center;
+ top: 103px;
+}
+
+#seatsMassageView7_1_appendix .View1 .seats-message-actions-3 {
+ top: 194px;
+ left: 7px;
+}
+
+#seatsMassageView7_1_appendix .View1 .titleQuestion {
+ left: 0px;
+ width: 500px;
+ top: 40px;
+}
+
+#seatsMassageView7_1_appendix .View1 .question {
+ left: 0px;
+ top: 90px;
+ text-align: center;
+ width: 500px;
+}
+
+#seatsMassageView7_1_appendix .View1 .titleAnswer {
+ left: 0px;
+ width: 500px;
+ top: 134px;
+}
+
+#seatsMassageView7_1_appendix .View1 .button0 {
+ left: 0;
+ top: 0 !important;
+}
+
+#seatsMassageView7_1_appendix .View1 .button1 {
+ left: 0;
+ top: 45px !important;
+}
+
+#seatsMassageView7_1_appendix .View1 .button2 {
+ left: 0;
+ top: 90px !important;
+}
+
+#seatsMassageView7_1_appendix .View1 .button3 {
+ left: 258px !important;
+ top: 0px !important;
+}
+
+#seatsMassageView7_1_appendix .View1 .button4 {
+ left: 258px !important;
+ top: 45px !important;
+}
+
+#seatsMassageView7_1_appendix .View1 .button5 {
+ left: 258px !important;
+ top: 90px !important;
+}
+
+#seatsMassageView7_1_appendix .View1 .btn-48 {
+ height: 35px !important;
+ line-height: 35px !important;
+}
+
+#seatsMassageView7_1_appendix .seatsMassageDialogView4 {
+ visibility: hidden;
+ font-size: 26px !important;
+ font-family: Arial;
+ font-size: 18px;
+ font-family: Arial;
+ left: 300px;
+ top: 140px;
+ width: 232px;
+ height: 127px;
+ background: white;
+ border-radius: 6px;
+ border: 1px solid gray;
+ color: black;
+ text-align: center;
+ padding: 10px;
+}
+
+#seatsMassageView7_1_appendix .seatsMassageDialogView5 {
+ visibility: hidden;
+ font-size: 26px !important;
+ font-family: Arial;
+ font-size: 18px;
+ font-family: Arial;
+ left: 300px;
+ top: 132px;
+ width: 326px;
+ height: 165px;
+ background: white;
+ border-radius: 6px;
+ border: 1px solid gray;
+ color: black;
+ text-align: center;
+ padding: 10px;
+}
+
+#seatsMassageView7_1_appendix .SeatsMassageDialogView.View1 {
+ visibility: hidden;
+ background-color: whiteSmoke;
+ width: 520px;
+ height: 368px;
+ position: absolute;
+ top: 56px;
+ left: 265px !important;
+ background: black;
+ border: #A6A6A6 solid 2px;
+ border-radius: 6px;
+}
+
+#seatsMassageView7_1_appendix .SeatsMassageDialogView .button0 {
+ left: 0;
+ top: 0;
+}
+
+#seatsMassageView7_1_appendix .SeatsMassageDialogView .button1 {
+ left: 0;
+ top: 60px;
+}
+
+#seatsMassageView7_1_appendix .SeatsMassageDialogView .button2 {
+ left: 0;
+ top: 120px;
+}
+
+#seatsMassageView7_1_appendix .SeatsMassageDialogView .button3 {
+ left: 0;
+ top: 180px;
+}
+
+#seatsMassageView7_1_appendix .SeatsMassageDialogView .button {
+ width: 245px;
+ border-radius: 3px;
+ border: 1px solid #393939;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .concept1_5Settings
+ {
+ top: 200px;
+ left: 197px;
+ width: 138px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .concept1_5Settings span
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .concept1_5Settings .ico
+ {
+ float: left;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .concept1_5Massage
+ {
+ text-align: center;
+ height: 48px;
+ line-height: 48px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .toogleButtonContainer .button1
+ {
+ left: 50px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .toogleButtonContainer .delim-0
+ {
+ left: 48px;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .concept1_5SettingsScreen
+ {
+ top: -60px;
+ left: 154px;
+ width: 291px;
+ height: 345px;
+ background: black;
+ z-index: 100;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .btn-48
+ {
+ line-height: 48px;
+ text-align: center;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .show
+ {
+ visibility: visible !important;
+}
+
+#view_settings_vehicle_MultiContourSeat_Adjust #seatsMassageView7_1 .hide
+ {
+ visibility: hidden;
+}
+
+/* END HMI concept 7.1 */ /* lumbars */ /* driver */
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion1 .active {
+ background: url(../images/settings/TopLumbar_WhiteOutline_driver.png)
+ no-repeat;
+ width: 38px;
+ height: 29px;
+ top: 70px;
+ left: 22px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion2 .active {
+ background: url(../images/settings/MiddleLumbar_WhiteOutline_driver.png)
+ no-repeat;
+ width: 34px;
+ height: 30px;
+ top: 84px;
+ left: 18px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion3 .active {
+ background: url(../images/settings/LowerLumbar_WhiteOutline_driver.png)
+ no-repeat;
+ width: 33px;
+ height: 36px;
+ top: 99px;
+ left: 14px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion4 .active {
+ background: url(../images/settings/lumbar_cushion_top-active.png)
+ no-repeat;
+ width: 70px;
+ height: 70px;
+ top: 71px;
+ left: -2px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion5 .active {
+ background: url(../images/settings/lumbar_cushion_bot-active.png)
+ no-repeat;
+ width: 91px;
+ height: 59px;
+ top: 112px;
+ left: -37px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion6 .active {
+ background: url(../images/settings/whiteOutline_driver-lumbar-all.png)
+ no-repeat;
+ width: 47px;
+ height: 68px;
+ top: 70px;
+ left: 16px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion7 .active {
+ background: url(../images/settings/Cushion_WhiteOutline_driver.png)
+ no-repeat;
+ width: 74px;
+ height: 36px;
+ top: 119px;
+ left: -32px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion1 .lumbar {
+ background: url(../images/settings/driver-lumbar-top.png) no-repeat;
+ width: 36px;
+ height: 31px;
+ top: 69px;
+ left: 22px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion2 .lumbar {
+ background: url(../images/settings/driver-lumbar-mid.png) no-repeat;
+ width: 34px;
+ height: 31px;
+ top: 84px;
+ left: 17px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion3 .lumbar {
+ background: url(../images/settings/driver-lumbar-low.png) no-repeat;
+ width: 31px;
+ height: 35px;
+ top: 99px;
+ left: 15px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion4 .lumbar {
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat_adj1.png)
+ no-repeat;
+ width: 70px;
+ height: 70px;
+ top: 68px;
+ left: -4px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion5 .lumbar {
+ background: url(../images/settings/lumbar_cushion.png) no-repeat;
+ width: 91px;
+ height: 59px;
+ top: 111px;
+ left: -36px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion6 .lumbar {
+ background: url(../images/settings/driver-lumbar-all.png) no-repeat;
+ width: 47px;
+ height: 68px;
+ top: 68px;
+ left: 12px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_driverSeat_cushion7 .lumbar {
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat_adj2.png)
+ no-repeat;
+ width: 73px;
+ height: 37px;
+ top: 119px;
+ left: -30px;
+ opacity: 0;
+}
+
+/* passenger */
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion1 .active {
+ background: url(../images/settings/TopLumbar_WhiteOutline_passenger.png)
+ no-repeat;
+ width: 38px;
+ height: 29px;
+ top: 70px;
+ left: 541px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion2 .active {
+ background:
+ url(../images/settings/MiddleLumbar_WhiteOutline_passenger.png)
+ no-repeat;
+ width: 34px;
+ height: 30px;
+ top: 84px;
+ left: 549px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion3 .active {
+ background:
+ url(../images/settings/LowerLumbar_WhiteOutline_passenger.png)
+ no-repeat;
+ width: 33px;
+ height: 36px;
+ top: 99px;
+ left: 555px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion4 .active {
+ background:
+ url(../images/settings/lumbar_cushion_top_passenger-active.png)
+ no-repeat;
+ width: 70px;
+ height: 70px;
+ top: 71px;
+ left: 535px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion5 .active {
+ background:
+ url(../images/settings/lumbar_cushion_bot_passanger-active.png)
+ no-repeat;
+ width: 91px;
+ height: 59px;
+ top: 112px;
+ left: 546px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion6 .active {
+ background:
+ url(../images/settings/WhiteOutline_passenger-lumbar-all.png)
+ no-repeat;
+ width: 47px;
+ height: 68px;
+ top: 70px;
+ left: 544px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion7 .active {
+ background: url(../images/settings/Cushion_WhiteOutline_passenger.png)
+ no-repeat;
+ width: 74px;
+ height: 36px;
+ top: 120px;
+ left: 558px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion1 .lumbar {
+ background: url(../images/settings/passenger-lumbar-top.png) no-repeat;
+ width: 37px;
+ height: 31px;
+ top: 68px;
+ left: 542px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion2 .lumbar {
+ background: url(../images/settings/passenger-lumbar-mid.png) no-repeat;
+ width: 34px;
+ height: 31px;
+ top: 84px;
+ left: 550px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion3 .lumbar {
+ background: url(../images/settings/passenger-lumbar-low.png) no-repeat;
+ width: 32px;
+ height: 35px;
+ top: 99px;
+ left: 555px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion4 .lumbar {
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat_adj1_passenger.png)
+ no-repeat;
+ width: 69px;
+ height: 69px;
+ top: 70px;
+ left: 535px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion5 .lumbar {
+ background: url(../images/settings/passenger_lumbar_cushion.png)
+ no-repeat;
+ width: 91px;
+ height: 59px;
+ top: 111px;
+ left: 546px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion6 .lumbar {
+ background: url(../images/settings/passenger-lumbar-all.png) no-repeat;
+ width: 47px;
+ height: 68px;
+ top: 68px;
+ left: 540px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_passengerSeat_cushion7 .lumbar {
+ background:
+ url(../images/settings/view_settings_vehicle_MultiContourSeat_adj2_passenger.png)
+ no-repeat;
+ width: 72px;
+ height: 37px;
+ top: 119px;
+ left: 559px;
+ opacity: 0;
+}
+
+/* CUSTOM MASSAGE */ /* Driver cushions */
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion6 .active
+ {
+ background: url(../images/settings/TopLumbar_WhiteOutline_driver.png)
+ no-repeat;
+ width: 38px;
+ height: 29px;
+ top: 70px;
+ left: 22px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion7 .active
+ {
+ background: url(../images/settings/MiddleLumbar_WhiteOutline_driver.png)
+ no-repeat;
+ width: 34px;
+ height: 30px;
+ top: 84px;
+ left: 18px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion8 .active
+ {
+ background: url(../images/settings/LowerLumbar_WhiteOutline_driver.png)
+ no-repeat;
+ width: 33px;
+ height: 36px;
+ top: 99px;
+ left: 14px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion9 .active
+ {
+ background: url(../images/settings/driver-lumbar-m-top-selected.png)
+ no-repeat;
+ width: 77px;
+ height: 41px;
+ top: 119px;
+ left: -30px;
+ z-index: 1;
+ opacity: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion10 .active
+ {
+ background: url(../images/settings/driver-lumbar-m-bottom-selected.png)
+ no-repeat;
+ width: 77px;
+ height: 41px;
+ top: 119px;
+ left: -30px;
+ z-index: 1;
+ opacity: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion6 .lumbar
+ {
+ background: url(../images/settings/driver-lumbar-top.png) no-repeat;
+ width: 36px;
+ height: 31px;
+ top: 69px;
+ left: 22px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion7 .lumbar
+ {
+ background: url(../images/settings/driver-lumbar-mid.png) no-repeat;
+ width: 34px;
+ height: 31px;
+ top: 84px;
+ left: 17px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion8 .lumbar
+ {
+ background: url(../images/settings/driver-lumbar-low.png) no-repeat;
+ width: 31px;
+ height: 35px;
+ top: 99px;
+ left: 15px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion9 .lumbar
+ {
+ background: url(../images/settings/driver-lumbar-m-top.png) no-repeat;
+ width: 73px;
+ height: 37px;
+ top: 119px;
+ left: -30px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_driverSeat_cushion10 .lumbar
+ {
+ background: url(../images/settings/driver-lumbar-m-bottom.png) no-repeat;
+ width: 73px;
+ height: 37px;
+ top: 119px;
+ left: -30px;
+ opacity: 0;
+}
+
+/* Passenger cushions */
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion6 .active
+ {
+ background: url(../images/settings/TopLumbar_WhiteOutline_passenger.png)
+ no-repeat;
+ width: 38px;
+ height: 29px;
+ top: 70px;
+ left: 541px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion7 .active
+ {
+ background:
+ url(../images/settings/MiddleLumbar_WhiteOutline_passenger.png)
+ no-repeat;
+ width: 34px;
+ height: 30px;
+ top: 84px;
+ left: 549px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion8 .active
+ {
+ background:
+ url(../images/settings/LowerLumbar_WhiteOutline_passenger.png)
+ no-repeat;
+ width: 33px;
+ height: 36px;
+ top: 99px;
+ left: 555px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion9 .active
+ {
+ background: url(../images/settings/passenger-lumbar-m-top-selected.png)
+ no-repeat;
+ width: 77px;
+ height: 41px;
+ top: 120px;
+ left: 558px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion10 .active
+ {
+ background:
+ url(../images/settings/passenger-lumbar-m-bottom-selected.png)
+ no-repeat;
+ width: 77px;
+ height: 41px;
+ top: 120px;
+ left: 558px;
+ z-index: 1;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion6 .lumbar
+ {
+ background: url(../images/settings/passenger-lumbar-top.png) no-repeat;
+ width: 36px;
+ height: 31px;
+ top: 70px;
+ left: 541px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion7 .lumbar
+ {
+ background: url(../images/settings/passenger-lumbar-mid.png) no-repeat;
+ width: 34px;
+ height: 31px;
+ top: 84px;
+ left: 549px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion8 .lumbar
+ {
+ background: url(../images/settings/passenger-lumbar-low.png) no-repeat;
+ width: 31px;
+ height: 35px;
+ top: 99px;
+ left: 555px;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion9 .lumbar
+ {
+ background: url(../images/settings/passenger-lumbar-m-top.png) no-repeat;
+ width: 77px;
+ height: 41px;
+ top: 120px;
+ left: 558px;;
+ opacity: 0;
+}
+
+#view_settings_vehicle_MultiContourSeat_customMassage_passengerSeat_cushion10 .lumbar
+ {
+ background: url(../images/settings/passenger-lumbar-m-bottom.png)
+ no-repeat;
+ width: 77px;
+ height: 41px;
+ top: 120px;
+ left: 558px;
+ opacity: 0;
+} \ No newline at end of file
diff --git a/src/components/HMI/css/media.css b/src/components/HMI/css/media.css
new file mode 100644
index 0000000000..85688d5e6b
--- /dev/null
+++ b/src/components/HMI/css/media.css
@@ -0,0 +1,528 @@
+#media_leftmenu {
+ z-index: 301;
+ position: absolute;
+ top: 90px;
+ left: 0px;
+ width: 150px;
+ height: 300px;
+ background: #333;
+}
+
+#media_cdButton {
+ font-size: 18px;
+ padding-left: 48px;
+ line-height: 48px;
+}
+
+#media_sdlButton {
+ font-size: 18px;
+ line-height: 48px;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#media_sdlButton span {
+ margin-left: 50px;
+}
+
+#media_status {
+ bottom: 0px;
+ left: 0px;
+ font-size: 21px;
+ width: 324px;
+ height: 48px;
+ cursor: pointer;
+ background: url(../images/common/media-status-bg.png) no-repeat;
+ z-index: 1;
+}
+
+#media_status_homestatus {
+ position: absolute;
+ visibility: hidden;
+ width: 100%;
+ line-height: 50px;
+}
+
+#media_status_homestatus span {
+ padding-left: 11px;
+}
+
+.ls_border {
+ z-index: 201;
+ position: absolute;
+ top: -3px;
+ left: 0px;
+ width: 153px;
+ height: 306px;
+ background: url(../images/common/ls_border.png) no-repeat;
+}
+
+.media-ls-items {
+ position: relative;
+ width: 150px;
+ height: 300px;
+}
+
+.media-ls-item {
+ z-index: 201;
+ position: relative;
+ height: 50px;
+ cursor: pointer;
+ background: url(../images/media/ls-item_bg.png) no-repeat;
+}
+
+.media-ls-item.active_state {
+ background: url(../images/media/ls-item_bg_act.png) no-repeat !important;
+}
+
+.media-ls-item>.bg {
+ z-index: 201;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 150px;
+ height: 50px;
+}
+
+.media-ls-item>.ico {
+ z-index: 299;
+ position: absolute;
+ left: 0px;
+ width: 50px;
+ height: 50px;
+}
+
+.media-ls-item>.ico.more {
+ left: 50px;
+}
+
+.media-ls-item>p {
+ z-index: 298;
+ position: absolute;
+ left: 48px;
+ width: 86px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 50px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.media-ls-item>.led {
+ z-index: 299;
+ position: absolute;
+ top: 0px;
+ right: 8px;
+ width: 24px;
+ height: 50px;
+}
+
+.media-ls-item.empty {
+ background: #333333;
+}
+
+.main-preset-buttons-wraper {
+ position: relative;
+ width: 468px;
+ height: 100px;
+ float: left;
+ left: 165px;
+ top: 290px;
+ z-index: 503;
+}
+
+.main-preset-buttons-wraper .preset-items {
+ position: relative;
+ width: 467px;
+ height: 99px;
+ border: 1px solid #393939;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ z-index: 1;
+}
+
+.main-preset-buttons-wraper .preset-item {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ border-right: 1px solid #393939;
+ border-bottom: 1px solid #393939;
+ width: 92.6px;
+ height: 49px;
+ cursor: pointer;
+}
+
+.main-preset-buttons-wraper .preset-item.a0 {
+ background: url(../images/media/bcs-item_bgL.png) no-repeat;
+ border-right: 1px solid #393939;
+ border-bottom: 1px solid #393939;
+}
+
+.main-preset-buttons-wraper .preset-item.a0.pressed {
+ background: url(../images/media/bcs-item_bgL_pressed.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a0.active {
+ background: url(../images/media/bcs-item_bg_act.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a1 {
+ background: url(../images/media/bcs-item_bgS.png) no-repeat;
+ border-right: 1px solid #393939;
+ border-bottom: 1px solid #393939;
+ width: 157px;
+}
+
+.main-preset-buttons-wraper .preset-item.a1.pressed {
+ background: url(../images/media/bcs-item_bgS_pressed.png) no-repeat;
+ width: 157px;
+}
+
+.main-preset-buttons-wraper .preset-item.a1.active {
+ background: url(../images/media/bcs-item_bg_act.png) repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a2 {
+ background: url(../images/media/bcs-item_bgR.png) no-repeat;
+ border-bottom: 1px solid #393939;
+ width: 153px;
+}
+
+.main-preset-buttons-wraper .preset-item.a2.pressed {
+ background: url(../images/media/bcs-item_bgR_pressed.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a2.active {
+ background: url(../images/media/bcs-item_bg_act.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a3 {
+ background: url(../images/media/bcs-item_bgL.png) no-repeat;
+ border-right: 1px solid #393939;
+}
+
+.main-preset-buttons-wraper .preset-item.a3.pressed {
+ background: url(../images/media/bcs-item_bgL_pressed.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a3.active {
+ background: url(../images/media/bcs-item_bg_act.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a4 {
+ background: url(../images/media/bcs-item_bgS.png) no-repeat;
+ border-right: 1px solid #393939;
+ width: 157px;
+}
+
+.main-preset-buttons-wraper .preset-item.a4.pressed {
+ background: url(../images/media/bcs-item_bgS_pressed.png) no-repeat;
+ width: 157px;
+}
+
+.main-preset-buttons-wraper .preset-item.a4.active {
+ background: url(../images/media/bcs-item_bg_act.png) repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a5 {
+ background: url(../images/media/bcs-item_bgR.png) no-repeat;
+ width: 153px;
+}
+
+.main-preset-buttons-wraper .preset-item.a5.pressed {
+ background: url(../images/media/bcs-item_bgR_pressed.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item.a5.active {
+ background: url(../images/media/bcs-item_bg_act.png) no-repeat;
+}
+
+.main-preset-buttons-wraper .preset-item>.bg {
+ z-index: 201;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 155px;
+ height: 49px;
+}
+
+.main-preset-buttons-wraper .preset-item>span {
+ z-index: 202;
+ display: block;
+ position: absolute;
+ left: 10px;
+ width: 30px;
+ height: 50px;
+ font-size: 32px;
+ line-height: 50px;
+ white-space: nowrap;
+ overflow: hidden;
+ color: #999;
+}
+
+.main-preset-buttons-wraper .preset-item>p {
+ z-index: 202;
+ position: absolute;
+ left: 40px;
+ width: 100px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 50px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.home-preset-buttons-wraper {
+ top: 82px;
+ left: 34px;
+ z-index: 50;
+}
+
+.home-preset-buttons-wraper .preset-items {
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ border: 1px solid #393939;
+ width: 328px;
+ height: 79px;
+}
+
+.bc-item2>p {
+ z-index: 202;
+ position: absolute;
+ left: 40px;
+ width: 100px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 50px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.bc-item-big {
+ position: relative;
+ float: left;
+ width: 156px;
+ height: 100px;
+ line-height: 100px;
+ text-align: center;
+ font-size: 20px;
+}
+
+.bc-item-big.prevcd,.bc-item-big.prevusb,.bc-item-big.prevsd,.bc-item-big.prevblue
+ {
+ width: 155px;
+ height: 98px;
+ border-right: 1px solid #393939;
+ cursor: pointer;
+ background: url(../images/media/cd-prev-btn.png) no-repeat;
+}
+
+.bc-item-big.prevcd.pressed,.bc-item-big.prevusb.pressed,.bc-item-big.prevsd.pressed,.bc-item-big.prevblue.pressed
+ {
+ background: url(../images/media/cd-prev-btn_pressed.png) no-repeat;
+}
+
+.bc-item-big.playcd {
+ width: 157px;
+ height: 98px;
+ border-right: 1px solid #393939;
+ cursor: pointer;
+ background: url(../images/media/cd_play_btn.png) no-repeat;
+}
+
+.playIcon {
+ position: absolute;
+ left: 66px;
+}
+
+.playIcon.hideicon {
+ visibility: hidden;
+}
+
+.playIcon.showicon {
+ visibility: visible;
+}
+
+.bc-item-big.playcd.pressed,.bc-item-big.playusb.pressed,.bc-item-big.playsd.pressed,.bc-item-big.playblue.pressed
+ {
+ background: url(../images/media/cd_play_btn_pressed.png) no-repeat;
+}
+
+.bc-item-big.nextcd,.bc-item-big.nextusb,.bc-item-big.nextsd,.bc-item-big.nextblue
+ {
+ width: 154px;
+ height: 98px;
+ cursor: pointer;
+ background: url(../images/media/cd-next-btn.png) no-repeat;
+}
+
+.bc-item-big.nextcd.pressed,.bc-item-big.nextusb.pressed,.bc-item-big.nextsd.pressed,.bc-item-big.nextblue.pressed
+ {
+ background: url(../images/media/cd-next-btn_pressed.png) no-repeat;
+}
+
+#bt-bg {
+ position: relative;
+ float: left;
+ margin-left: 10px;
+ margin-top: -8px;
+}
+
+#bt-dis-controls {
+ background: url(../images/media/disabled_player_controls.png) no-repeat;
+ width: 470px;
+ height: 100px;
+ position: relative;
+ bottom: 17px;
+ float: left;
+ margin-left: 13px;
+}
+
+#avin-line {
+ z-index: 200;
+ position: relative;
+ width: 151px;
+ height: 297px;
+ margin-top: 100px;
+ margin-left: 171px;
+}
+
+.player_controlls {
+ z-index: 199;
+ position: absolute;
+ top: 237px;
+ left: 13px;
+ width: 468px;
+ height: 99px;
+ background: url("../images/media/btn_bg.png") repeat;
+ border: 1px solid #393939;
+ -webkit-border-radius: 3px;
+}
+
+#sdl_view_container .track-info {
+ left: 165px;
+ top: 55px;
+}
+
+#sdl_view_container .list-content {
+ border: none;
+}
+
+#sdl_view_container .list-item {
+ position: relative;
+ width: 100%;
+ height: 48px;
+ font-size: 20px;
+ line-height: 50px;
+ border: 1px solid #393939;
+}
+
+.track-info {
+ z-index: 199;
+ position: absolute;
+ left: 13px;
+ width: 470px;
+ overflow: hidden;
+ height: 237px;
+}
+
+.track-info>.total {
+ position: absolute;
+ top: 30px;
+ left: 10px;
+ width: 300px;
+ text-align: left;
+ font-size: 20px;
+ color: #999999;
+}
+
+.track-info>.title {
+ top: 110px;
+ font-size: 38px;
+ left: 7px;
+}
+
+.track-info>.track-number {
+ top: 153px;
+ font-size: 26px;
+ left: 10px;
+}
+
+.track-info>.time {
+ top: 190px;
+ font-size: 26px;
+ left: 10px;
+}
+
+.track-info>.divider_o {
+ top: 65px;
+}
+
+.track-info>.device {
+ position: absolute;
+ top: 30px;
+ left: 10px;
+ width: 300px;
+ text-align: left;
+ font-size: 20px;
+ color: #999999;
+}
+
+.divider_o {
+ position: absolute;
+ top: 120px;
+ left: 0px;
+ width: 470px;
+ height: 1px;
+ background: url("../images/media/divider_o.png") no-repeat;
+}
+
+.statusInfo {
+ width: 275px;
+ height: 48px;
+}
+
+.statusInfo .station {
+ top: 12px;
+ left: 11px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ height: 21px;
+ width: 220px;
+}
+
+.statusInfo .station span {
+ display: none;
+}
+
+.statusInfo .icon {
+ width: 50px;
+ height: 50px;
+ left: 224px;
+}
+
+.cdIco {
+ background: url(../images/media/ico_cd.png) no-repeat !important
+}
+
+.appIco {
+ background: url(../images/info/info_leftMenu_apps_ico.png) no-repeat
+ !important
+}
+
+#media_player_view_container {
+ background: url(../images/media/player_view.png) no-repeat;
+ width: 635px;
+ height: 323px;
+ top: 70px;
+ left: 161px;
+ z-index: 501;
+}
+
+#sdl_view_container .ffw_list_menu {
+ top: 90px;
+ left: 650px;
+ width: 140px;
+} \ No newline at end of file
diff --git a/src/components/HMI/css/navigation.css b/src/components/HMI/css/navigation.css
new file mode 100644
index 0000000000..55cab5b140
--- /dev/null
+++ b/src/components/HMI/css/navigation.css
@@ -0,0 +1,102 @@
+/*NAVIGATION CSS*/
+#baseNavigation{
+ z-index: 2;
+ position: absolute;
+ top: 48px;
+ width: 800px;
+ height: 384px;
+}
+#baseNavigation .mainField{
+ position: absolute;
+ background: rgba(124, 124, 124, 0.3);
+ border: 1px solid;
+ border-color: rgba(90, 90, 90, 0.31);
+ border-radius: 3px;
+ box-shadow: inset 2px 2px 10px 0px rgba(112, 112, 112, 0.3), inset -2px -2px 10px 0px rgba(112, 112, 112, 0.3);
+ padding-top: 10px;
+ padding-left: 10px;
+ font-size: 18px;
+}
+#baseNavigation .softButton{
+ position: absolute;
+ border-radius: 3px;
+ border: 1px solid #393939;
+}
+#baseNavigation .mainField1{
+ top: 0;
+ height: 30px;
+ width: 190px;
+ left: 0;
+}
+#baseNavigation .mainField2{
+ top: 0;
+ height: 40px;
+ width: 380px;
+ left: 204px;
+}
+#baseNavigation .mainField3{
+ top: 0;
+ height: 30px;
+ width: 190px;
+ right: 0;
+}
+#baseNavigation .mainField4{
+ top: 50px;
+ height: 30px;
+ width: 90px;
+ right: 0;
+ overflow: hidden;
+ white-space: nowrap;
+}
+#baseNavigation .mainField5{
+ top: 100px;
+ height: 30px;
+ width: 90px;
+ right: 0;
+}
+#baseNavigation .mainField6{
+ bottom: 0;
+ height: 40px;
+ width: 280px;
+ left: 254px;
+}
+#baseNavigation .softButton1{
+ width: 250px;
+ bottom: 0;
+ left: 0;
+ position: absolute!important;
+ margin: 0px!important;
+ height: 49px!important;
+ font-size: 32px;
+ line-height: 50px!important;
+}
+#baseNavigation .softButton2{
+ width: 250px;
+ bottom: 0px;
+ right: 0px;
+ position: absolute!important;
+ margin: 0px!important;
+ height: 49px!important;
+ font-size: 32px;
+ line-height: 50px!important;
+}
+#baseNavigation .softButton3{
+ width: 100px;
+ top: 100px;
+ left: 0;
+ position: absolute!important;
+ margin: 0px!important;
+ height: 49px!important;
+ font-size: 32px;
+ line-height: 50px!important;
+}
+#baseNavigation .softButton4{
+ width: 100px;
+ top: 150px;
+ left: 0;
+ position: absolute!important;
+ margin: 0px!important;
+ height: 49px!important;
+ font-size: 32px;
+ line-height: 50px!important;
+} \ No newline at end of file
diff --git a/src/components/HMI/css/phone.css b/src/components/HMI/css/phone.css
new file mode 100644
index 0000000000..d8e6855d7a
--- /dev/null
+++ b/src/components/HMI/css/phone.css
@@ -0,0 +1,300 @@
+/**
+ * Phone module CSS
+ *
+ * @category Style Sheets
+ * @filesource css/phone.css
+ * @version 2.0
+ */
+#phone {
+ width: 800px;
+ height: 480px;
+ background: url(../images/phone/bg.png) no-repeat;
+ background-position: top;
+} /*
+
+
+ Backgrpund for active toogleButton
+#phone .toogleButtonContainer .active {
+ background: url(../images/phone/bcs-item_bg_act.png);
+}
+
+#phone .delim {
+ position: relative;
+ float: left;
+ border: #393939 1px solid;
+ height: 26px;
+ width: 0px;
+}
+
+ LEFT MENU
+*/
+#phone_menu {
+ position: absolute;
+ top: 90px;
+ left: 0px;
+ width: 150px;
+ height: 300px;
+ background: #333;
+}
+
+.ls_border {
+ z-index: 201;
+ position: absolute;
+ top: -3px;
+ left: 0px;
+ width: 153px;
+ height: 306px;
+}
+
+.ls-items {
+ position: relative;
+ width: 150px;
+ height: 300px;
+}
+
+.ls-item {
+ z-index: 201;
+ position: relative;
+ width: 150px;
+}
+
+/*.ls-item > .bg{z-index:201;position:absolute;top:0px;left:0px;width:150px;height:50px;}
+ */
+.ls-item>.ico {
+ z-index: 299;
+ position: absolute;
+ left: 10px;
+ width: 30px;
+ height: 30px;
+ top: 10px;
+} /*
+ .ls-item > .ico.more {left:50px;}
+ */
+.ls-item span {
+ z-index: 298;
+ position: absolute;
+ left: 50px;
+ width: 100px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 50px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+/*.ls-item > .led{z-index:299;position:absolute;top:0px;right:8px;width:24px;height:50px;}
+ .ls-item.empty{background:#333333;}
+ .firts_item{-webkit-border-top-right-radius:3px;border-top-right-radius:3px;}
+ .last_item{-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px;}
+ */
+.lsp1_p {
+ background: url("../images/phone/menu_bg.png") repeat-x bottom;
+}
+
+.phone_active {
+ background: url("../images/phone/menu_active.png") repeat-x bottom
+ !important;
+ border-top: 1px solid #3e3115;
+ border-bottom: 1px solid #4a3a17
+}
+
+#phone_menu .ls-item {
+ height: 48px;
+ border-bottom: 1px solid #656565;
+ border-top: 1px solid #393939;
+} /*
+ .navigationApp {width:26px;height:25px;background:url("../images/phone/ico_navigation.png") no-repeat;left:60px;top:10px;}
+
+#phone_menu.hide {
+ left: -170px;
+}
+
+#phone_menu_quickdialButton,
+#phone_menu_messagingButton,
+#phone_menu_settingsButton {
+ z-index: 203;
+}
+
+#phone .list-item.active {
+ background: url(../images/phone/phone_button_bg_active.png) repeat-x;
+}
+ PHONE STATUS BAR
+*/
+#status_phone {
+ top: 0px;
+ left: 0px;
+ font-size: 21px;
+ cursor: pointer;
+ width: 324px;
+ height: 48px;
+ background: url(../images/common/phone-statusbar-bg.png) no-repeat;
+ z-index: 1;
+}
+
+#status_phone_label {
+ width: 100%;
+ display: block;
+ visibility: hidden;
+}
+
+#status_phone_label span {
+ padding-left: 11px;
+}
+#phone_dialpad_number {
+ width: 283px;
+ height: 30px;
+ position: absolute;
+ left: 258px;
+ top: 87px;
+ text-align: center;
+ font-size: 22px;
+ padding: 10px 0 0 0;
+ background: black;
+ border: 1px solid #393939;
+ border-radius: 3px;
+}
+
+#phone_dialpad_keypad {
+ width: 282px;
+ height: 200px;
+ position: absolute;
+ left: 259px;
+ top: 141px;
+}
+
+#phone_dialpad_keypad div {
+ font-size: 26px;
+ text-align: center;
+ line-height: 32px;
+}
+#phone_dialpad_keypad .left {
+ left: 0px;
+ width: 93px;
+ height: 49px;
+ border-left: 1px solid #393939;
+ border-right: 1px solid #000;
+ border-top: 1px solid #393939;
+}
+
+#phone_dialpad_keypad .center {
+ left: 95px;
+ width: 93px;
+ height: 49px;
+ border-top: 1px solid #393939;
+ border-left: 1px solid #393939;
+ border-right: 1px solid #000;
+}
+
+#phone_dialpad_keypad .right {
+ left: 190px;
+ width: 93px;
+ height: 49px;
+ border-left: 1px solid #393939;
+ border-right: 1px solid #393939;
+ border-top: 1px solid #393939;
+}
+
+#phone_dialpad_keypad_key4,#phone_dialpad_keypad_key5,#phone_dialpad_keypad_key6
+ {
+ top: 50px;
+}
+
+#phone_dialpad_keypad_key7,#phone_dialpad_keypad_key8,#phone_dialpad_keypad_key9
+ {
+ top: 100px;
+}
+
+#phone_dialpad_keypad_key0,#phone_dialpad_keypad_keyDiez,#phone_dialpad_keypad_keyStar
+ {
+ top: 150px;
+ border-bottom: 1px solid #393939;
+}
+
+#phone_dialpad_keypad_key1 {
+ -webkit-border-top-left-radius: 3px;
+ border-top-left-radius: 3px;
+}
+
+#phone_dialpad_keypad_key3 {
+ -webkit-border-top-right-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+#phone_dialpad_keypad_keyStar {
+ -webkit-border-bottom-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+}
+
+#phone_dialpad_keypad_keyDiez {
+ -webkit-border-bottom-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+#phone_dialpad_deleteButton {
+ opacity: 0;
+ cursor: pointer;
+ width: 93px;
+ height: 49px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ left: 554px;
+ top: 291px;
+ border: 1px solid #393939;
+}
+
+#phone_dialpad_deleteButton .ico {
+ position: absolute;
+ left: 34px;
+ top: 15px;
+}
+
+#phone_dialpad_dialButton {
+ cursor: pointer;
+ border: 1px solid #393939;
+ left: 661px;
+ top: 241px;
+ width: 128px;
+ height: 49px;
+ -webkit-border-top-left-radius: 3px;
+ border-top-left-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+#phone_dialpad_dialButton span {
+ font-size: 18px;
+ position: absolute;
+ left: 14px;
+ top: 14px;
+}
+
+#phone_dialpad_dialButton .ico {
+ position: absolute;
+ right: 14px;
+ top: 11px;
+}
+
+#phone_dialpad_endButton {
+ cursor: pointer;
+ border: 1px solid #393939;
+ left: 661px;
+ top: 291px;
+ width: 128px;
+ height: 49px;
+ -webkit-border-bottom-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ -webkit-border-bottom-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+}
+
+#phone_dialpad_endButton span {
+ font-size: 18px;
+ position: absolute;
+ left: 14px;
+ top: 14px;
+}
+
+#phone_dialpad_endButton .ico {
+ position: absolute;
+ right: 9px;
+ top: 16px;
+} \ No newline at end of file
diff --git a/src/components/HMI/css/sdl.css b/src/components/HMI/css/sdl.css
new file mode 100644
index 0000000000..e6bf641513
--- /dev/null
+++ b/src/components/HMI/css/sdl.css
@@ -0,0 +1,1254 @@
+/**
+ * CSS for sdl aplications
+ */
+.ffw_list_menu {
+ left: 440px;
+ width: 158px;
+ border: 1px solid #393939;
+ overflow: hidden;
+}
+
+.ffw_list_menu .control {
+ z-index: 2000;
+ text-align: center;
+}
+
+.ffw_list_menu .ffw-button {
+ position: relative;
+ height: 49px;
+ border-bottom: 1px solid #393939;
+ line-height: 50px;
+ display: -webkit-flex;
+ display: -moz-flex;
+ display: flex;
+}
+
+.ffw_list_menu .ffw-button span {
+ height: 50px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-left: 10px;
+}
+
+.ffw_list_menu .content {
+ position: relative;
+}
+
+.ffw_list_menu .ffw-button.hidden {
+ display: none;
+}
+
+.sdl-window {
+ width: 800px;
+ height: 480px;
+ background-color: #000;
+ z-index: 1;
+}
+
+/**
+ * Important Class for SoftButtons Highlightening
+ */
+.isHighlighted{
+ color: gold;
+}
+
+.isHighlighted .ico{
+ border-style: solid;
+ border-color: #FFA300 #F7DA9C;
+ border-width: 1px;
+}
+
+.softButton .ico{
+ width: 50px;
+ height: 49px;
+ -webkit-flex: 0 0 50px;
+ float: left;
+}
+
+.softButton .right_text{
+ padding-left: 5px !important;
+}
+
+.sdl-window .back-button {
+ top: 80px;
+ left: 5px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+}
+
+.sdl-window .back-button .ico {
+ margin-top: 13px;
+ margin-left: 8px;
+}
+
+#info_apps_deviceList_view .deviceListLabel,.sdl-window .caption-text {
+ top: 80px;
+ left: 75px;
+ width: 620px;
+ background: #393939;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 50px;
+ height: 50px;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+#info_apps_deviceList_view .progress{
+ top: 175px;
+ left: 254px;
+ background: URL('../images/sdl/progress.gif') no-repeat;
+ width: 300px;
+ height: 200px;
+}
+
+#info_nonMedia {
+ z-index: 1001;
+}
+
+#info_nonMedia .backButton {
+ top: 80px;
+ left: 20px;
+}
+
+#info_nonMedia .inner_content {
+ left: 180px;
+ top: 90px;
+ width: 600px;
+ height: 300px;
+ overflow: hidden;
+}
+
+#info_nonMedia .app_title {
+ width: 390px;
+ padding: 15px;
+ top: 1px;
+ background-color: #393939;
+}
+
+#info_nonMedia .app_image {
+ top: 60px;
+}
+
+#info_nonMedia .app_fields {
+ left: 160px;
+ top: 60px;
+ width: 260px;
+}
+
+#info_nonMedia .app_fields .label {
+ position: relative;
+ border: 1px solid #393939;
+ padding: 7px;
+ margin-bottom: 5px;
+}
+
+#info_nonMedia .presets {
+ top: 220px;
+ width: 420px;
+ height: 80px;
+}
+
+#info_nonMedia .presets .ffw-button {
+ width: 82px;
+ height: 38px;
+ position: relative;
+ float: left;
+ line-height: 40px;
+ border-bottom: 1px solid #393939;
+ border-right: 1px solid #393939;
+ border-top: 1px solid #222;
+ border-left: 1px solid #222;
+ text-align: center;
+}
+
+#info_nonMedia .presets .ffw-button .text{
+ margin-left: 5px;
+ width: 77px;
+ position: absolute;
+ left: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-align: left;
+}
+
+#info_nonMedia .app_image img {
+ border: 1px solid #393939;
+}
+
+#sdl_options .list {
+ width: 650px;
+ height: 251px;
+ border-radius: 2px;
+ left: 75px;
+ top: 150px;
+}
+
+/*#sdl_view_container .list-content,*/
+#sdl_options .list-content {
+ width: 590px;
+}
+
+#VRPopUp.move{
+ left: 800px;
+}
+
+#VRPopUp span,#info_apps_deviceList_list .list-content span,#sdl_view_container .list-content span,#sdl_options .list-content span
+ {
+ margin-left: 15px;
+ position: relative;
+ text-overflow: ellipsis;
+ width: 521px;
+ overflow: hidden;
+ float: left;
+}
+
+#sdl_options .list-content .ico {
+ height: 49px;
+ width: 49px;
+ float: left;
+ position: relative;
+}
+
+#info_nonMedia_options_submenu {
+ z-index: 11000;
+ width: 800px;
+ height: 480px;
+ background-color: black;
+ top: 0px;
+ left: 0px;
+}
+
+#sdl_media_presetButtons .preset-item>span {
+ z-index: 202;
+ display: block;
+ position: absolute;
+ left: 10px;
+ width: 84px;
+ height: 50px;
+ font-size: 20px;
+ line-height: 50px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: white;
+}
+
+#sdl_view_container .preset-items {
+ width: 468px;
+}
+
+#sdl_view_container .main-preset-buttons-wraper .preset-item.a3,#sdl_view_container .main-preset-buttons-wraper .preset-item.a6
+ {
+ width: 155px;
+}
+
+#sdl_view_container .player_controllsV2 {
+ top: 241px !important;
+ height: 48px;
+}
+
+#sdl_view_container .player_controllsV2 .ffw-button {
+ height: 48px;
+}
+
+#sdl_view_container .player_controllsV2 img {
+ margin-top: -26px;
+}
+
+/* ScrollableMessage */
+#ScrollableMessage.ScrollableMessage {
+ left: 0;
+ top: 0;
+ width: 800px;
+ height: 480px;
+ /*z-index: 1000;*/
+ background: url(../images/media/bg.png) no-repeat;
+}
+
+#ScrollableMessage.active {
+ opacity: 1;
+ display: block;
+}
+
+#ScrollableMessage .backButton {
+ top: 80px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+}
+
+#ScrollableMessage .titleText {
+ top: 80px;
+ left: 75px;
+ width: 620px;
+ height: 20px;
+ background: #393939;
+ padding: 15px;
+}
+
+#ScrollableMessage .scrollableText {
+ position: absolute;
+ width: 525px;
+ height: 251px;
+ border-radius: 2px;
+ left: 200px;
+ top: 154px;
+ overflow: hidden;
+}
+
+#ScrollableMessage .scrollableText-content {
+ border: none;
+ width: 474px;
+}
+
+#ScrollableMessage .scrollableText-item {
+ position: relative;
+ width: 100%;
+ height: 48px;
+ font-size: 20px;
+ line-height: 50px;
+ border: 1px solid #393939;
+}
+
+#ScrollableMessage .ffw_list_menu {
+ top: 154px !important;
+ left: 25px !important;
+}
+
+#ScrollableMessage .scrollableTextArea {
+ margin: 0px;
+ /*height: 251px;*/
+ width: 469px;
+ font-family: sans-serif;
+ font-size: 16px;
+ color: white;
+ background-color: transparent;
+ resize: none;
+ line-height: 23px;
+ position: absolute;
+}
+
+/* SDL Slider */
+.slider-header {
+ top: 167px;
+ left: 145px;
+ width: 480px;
+ background: #393939;
+ line-height: 50px;
+ height: 50px;
+ padding-left: 15px;
+ padding-right: 15px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.slider-footer {
+ top: 325px;
+ left: 145px;
+ width: 480px;
+ background: #393939;
+ line-height: 50px;
+ height: 50px;
+ padding-left: 15px;
+ padding-right: 15px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#slider_view .okButton{
+ top: 379px;
+ left: 364px;
+ width: 54px;
+ height: 17px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ padding: 10px;
+}
+
+#slider_view .sliderControl {
+ width: 600px;
+ left: 100px;
+ top: 250px;
+ text-align: center;
+}
+
+#slider_view .control {
+ width: 58px;
+ height: 38px;
+ border: 1px solid #393939;
+ position: relative;
+ display: inline-block;
+}
+
+#slider_view .ledContainer {
+ position: relative;
+ display: inline-block;
+ border: 1px solid #393939;
+ height: 38px;
+}
+
+#slider_view .control.minus .ico {
+ top: 19px;
+ left: 20px;
+ position: absolute;
+}
+
+#slider_view .control.plus .ico {
+ top: 12px;
+ left: 20px;
+ position: absolute;
+}
+
+#slider_view .led {
+ width: 12px;
+ height: 40px;
+ background: url("../images/common/seat-act-led.png") no-repeat;
+ position: relative !important;
+ background-position: -4px 0;
+ display: inline-block;
+}
+
+#slider_view .led-inactive {
+ background: url("../images/common/seat-inact-led.png") no-repeat;
+ background-position: 3px 8px;
+ width: 12px;
+ height: 40px;
+ position: relative !important;
+ display: inline-block;
+}
+
+/* SDL Perform Interaction Choise,
+ SDL TBT Turn List */
+#tbtTurnListView .list,
+#perform_interaction_view .list,
+#vr_help_list_view .list {
+ position: absolute;
+ width: 650px;
+ height: 251px;
+ border-radius: 2px;
+ left: 75px;
+ top: 154px;
+}
+
+#tbtTurnListView .list span,
+#perform_interaction_view .list span,
+#vr_help_list_view .list span{
+ margin-left: 15px;
+}
+
+#tbtTurnListView .list-content,
+#perform_interaction_view .list-content,
+#vr_help_list_view .list-content {
+ width: 578px;
+}
+
+#perform_interaction_view input{
+ width: 720px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ background: rgba(119, 119, 119, 0.42);
+ cursor: pointer;
+ font-size: 32px;
+ color: #FFF;
+ top: 80px;
+ left: 65px;
+ position: absolute;
+}
+#perform_interaction_view .listWrapper{
+ top: 140px;
+ width: 750px;
+ height: 275px;
+ left: 25px;
+}
+
+#perform_interaction_view .naviChoises .ffw-button{
+ width: 110px;
+ height: 110px;
+ margin: 20px;
+ float: left;
+ position: relative;
+ border: 1px solid #333;
+ border-radius: 2px;
+ background-repeat: repeat;
+}
+
+#sdl_view_container .cd_logo {
+ position: absolute;
+ top: 90px;
+ right: 10px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 2px;
+ width: 109px;
+ height: 109px;
+}
+
+#sdl_view_container .cd_logoV2 {
+ position: absolute;
+ top: 70px;
+ right: 10px;
+ border: 1px solid #393939;
+ -webkit-border-radius: 2px;
+ width: 109px;
+ height: 109px;
+}
+
+#sdl_view_container .timeV2 {
+ top: 155px;
+}
+
+#sdl_view_container .textLimit {
+ width: 460px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+#VRButton.VRButton {
+ background: url(../images/home/controlButtons/vr.png) no-repeat;
+ width: 89px;
+ height: 90px;
+ left: 1024px;;
+ top: 2px;
+ -webkit-transition: 0.2s;
+}
+
+#VRButton.pressed {
+ background: url(../images/home/controlButtons/vr_pressed.png) no-repeat;
+}
+
+#vehicleInfoButton.vehicleInfoButton {
+ width: 117px;
+ height: 48px;
+ left: 1059px;
+ top: 206px;
+ text-align: center;
+ line-height: 48px;
+}
+
+#tbtClientStateButton.tbtClientStateButton {
+ width: 158px;
+ height: 48px;
+ left: 865px;
+ top: 418px;
+ text-align: center;
+ line-height: 48px;
+}
+
+#exitApp.exitApp {
+ width: 135px;
+ height: 48px;
+ left: 1043px;
+ top: 418px;
+ text-align: center;
+ line-height: 48px;
+}
+
+#exitAppView,#tbtClientStateView,#VehicleInfo,#systemRequestView {
+ opacity: 0;
+ left: 50px;
+ width: 700px;
+ height: 340px;
+ background-color: black;
+ z-index: 2;
+ border-radius: 10PX;
+ top: 70px;
+ -webkit-transition: opacity 1s ease-in-out;
+ display: none;
+ border: 1px solid white;
+}
+
+#exitAppView .exitAppViewLabel,#systemRequestView .systemRequestViewLabel, #tbtClientStateView .tbtClientStateLabel,#VehicleInfo .vehicleInfoLabel
+ {
+ top: 10px;
+ width: 600px;
+ left: 35px;
+ height: 20px;
+ padding: 15px;
+ background: #393939;
+}
+
+#exitAppView.active,#systemRequestView.active,#tbtClientStateView.active,#VehicleInfo.active {
+ opacity: 1;
+ display: block;
+}
+
+#exitAppView .exitAppViewTitle, #systemRequestView .systemRequestViewTitle, #tbtClientStateView .tbtClientState,#VehicleInfo .prndl
+ {
+ top: 70px;
+ width: 600px;
+ left: 40px;
+ height: 20px;
+ padding: 10px;
+ background: #535353;
+}
+
+#exitAppView .exitAppViewSelect, #systemRequestView .systemRequestViewSelect, #tbtClientStateView .tbtClientStateSelect,#VehicleInfo .prndlSelect
+ {
+ top: 125px;
+ position: absolute;
+ width: 150px;
+ left: 275px;
+ height: 40px;
+ color: white;
+ background: #393939;
+}
+
+#exitAppView .exitAppViewSelect option,#tbtClientStateView .tbtClientStateSelect option,#VehicleInfo .prndlSelect option
+ {
+ background: #393939;
+}
+
+#exitAppView .onAwakeSDLLabel{
+ top: 200px;
+ width: 600px;
+ left: 40px;
+ height: 20px;
+ padding: 10px;
+ background: #535353;
+}
+
+#exitAppView .onAwakeSDLButton{
+ right: 268px;
+ top: 250px;
+ width: 150px;
+ height: 19px;
+ padding: 10px;
+ border-radius: 4px;
+ border: 1px solid white;
+}
+
+#VehicleInfo .odometrTitle{
+ top: 180px;
+ width: 290px;
+ left: 360px;
+ height: 20px;
+ padding: 10px;
+ background: #535353;
+}
+
+#VehicleInfo .odometrInput{
+ width: 265px;
+ position: absolute;
+ top: 242px;
+ left: 373px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ background: rgba(119, 119, 119, 0.42);
+ cursor: pointer;
+ font-size: 32px;
+ color: #FFF;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+#VehicleInfo .onEmergencyEvent{
+ width: 265px;
+ position: absolute;
+ top: 301px;
+ left: 207px;
+ height: 28px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ cursor: pointer;
+ font-size: 18px;
+ color: #FFF;
+ padding-left: 10px;
+ padding-right: 10px;
+ line-height: 28px;
+}
+
+#VehicleInfo .ecu1Title {
+ top: 180px;
+ width: 290px;
+ left: 30px;
+ height: 20px;
+ padding: 10px;
+ background: #535353;
+}
+
+#VehicleInfo .ecu1 {
+ top: 233px;
+ width: 80px;
+ left: 65px;
+ height: 20px;
+ padding: 10px;
+}
+
+#VehicleInfo .ecu2 {
+ top: 265px;
+ width: 80px;
+ left: 65px;
+ height: 20px;
+ padding: 10px;
+}
+
+#VehicleInfo .ecu1Data {
+ top: 233px;
+ width: 155px;
+ left: 155px;
+ height: 20px;
+ padding: 10px;
+}
+
+#VehicleInfo .ecu2Data {
+ top: 265px;
+ width: 155px;
+ left: 155px;
+ height: 20px;
+ padding: 10px;
+}
+.PopUp{
+ left: 200px;
+ width: 400px;
+ height: 245px;
+ z-index: 2;
+ top: 110px;
+ -webkit-transition: opacity 1s ease-in-out;
+ background-color: black;
+ border: #A6A6A6 solid 2px;
+ border-radius: 6px;
+}
+
+.PopUp .text{
+ top: 41px;
+ left: 5px;
+ width: 390px;
+ height: 120px;
+ line-height: 20px;
+ position: absolute;
+ overflow: hidden;
+ text-align: center;
+ text-overflow: ellipsis;
+}
+
+.PopUp .OkButton{
+ top: 190px;
+ left: 5px;
+ width: 190px;
+ border: 1px solid #393939;
+}
+
+.PopUp .OkButton span{
+ font-size: 20px;
+ line-height: 50px;
+ cursor: pointer;
+ margin-left: 82px;
+}
+
+.PopUp .CancelButton{
+ top: 190px;
+ left: 205px;
+ width: 190px;
+ border: 1px solid #393939;
+}
+
+.PopUp .CancelButton span{
+ font-size: 20px;
+ line-height: 50px;
+ cursor: pointer;
+ margin-left: 65px;
+}
+
+/* Alert, AudioPassThruPopUp popup*/
+#AlertManeuverPopUp.AlertManeuverPopUp,#AudioPassThruPopUp.AudioPassThruPopUp,#AlertPopUp.AlertPopUp
+ {
+ opacity: 0;
+ left: 200px;
+ width: 400px;
+ height: 245px;
+ z-index: 2;
+ top: 110px;
+ -webkit-transition: opacity 1s ease-in-out;
+ background-color: black;
+ border: #A6A6A6 solid 2px;
+ border-radius: 6px;
+ display: none;
+}
+
+#AlertManeuverPopUp .applicationName,#AudioPassThruPopUp .applicationName,#AlertPopUp .applicationName
+ {
+ width: 380px;
+ left: 10px;
+ text-align: center;
+ font-size: 25px;
+ line-height: 30px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#AlertPopUp .alertPopUpImage {
+ width: 83px;
+ height: 74px;
+ background: url(../images/sdl/Warning.png) no-repeat;
+ top: 45px;
+ left: 10px;
+}
+
+#AlertPopUp .progressIndicator {
+ width: 50px;
+ height: 50px;
+ background: url(../images/sdl/progressindicator.gif) no-repeat;
+ top: 0px;
+ background-size: contain;
+ left: 0px;
+}
+
+#AudioPassThruPopUp .audioPassThruImage {
+ width: 83px;
+ height: 74px;
+ background: url(../images/home/controlButtons/vrImage.png) no-repeat;
+ top: 45px;
+ left: 25px;
+}
+
+#AudioPassThruPopUp .message1,#AlertPopUp .message1 {
+ top: 37px;
+ left: 105px;
+ width: 285px;
+ height: 30px;
+ text-align: center;
+ font-size: 23px;
+ line-height: 30px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#AudioPassThruPopUp .message2,#AlertPopUp .message2 {
+ top: 70px;
+ left: 105px;
+ width: 285px;
+ height: 28px;
+ text-align: center;
+ font-size: 23px;
+ line-height: 30px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#AudioPassThruPopUp .message3,#AlertPopUp .message3 {
+ top: 100px;
+ left: 105px;
+ width: 285px;
+ height: 28px;
+ text-align: center;
+ font-size: 23px;
+ line-height: 30px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#AlertManeuverPopUp.AlertManeuverActive,#AudioPassThruPopUp.AudioPassThruActive,#AlertPopUp.AlertActive
+ {
+ opacity: 1;
+ display: block;
+}
+
+#baseNavigation .softButton,#AlertManeuverPopUp .softButton,#AudioPassThruPopUp .softButton,#AlertPopUp .softButton
+ {
+ border: 1px solid #393939;
+ border-radius: 3px;
+ height: 42px;
+ line-height: 42px;
+ text-align: center;
+ float: left;
+ margin: 10px;
+ position: relative;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+#baseNavigation .naviOptionsBtn{
+ border: 1px solid #393939;
+ border-radius: 3px;
+ height: 42px;
+ line-height: 42px;
+ text-align: center;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ top: 283px;
+ right: 6px;
+ width: 105px;
+ position: absolute;
+}
+
+#AlertManeuverPopUp .closeButton {
+ width: 170px;
+ top: 180px;
+ left: 110px;
+}
+
+#AlertPopUp .alertSoftButtons {
+ margin-left: 8px;
+ top: 120px;
+ width: 386px;
+}
+
+#AlertManeuverPopUp .one,#softButton0.one {
+ margin-top: 42px;
+ width: 362px;
+}
+
+#softButton0.two {
+ margin-top: 42px;
+ width: 170px;
+}
+
+#softButton1.two {
+ margin-top: 42px;
+ width: 170px;
+}
+
+#softButton0.three {
+ width: 170px;
+}
+
+#AudioPassThruPopUp .buttonDone,#softButton1.three {
+ width: 170px;
+}
+
+#AudioPassThruPopUp .buttonCancel,#softButton2.three {
+ width: 362px;
+}
+
+#softButton0.four {
+ width: 170px;
+}
+
+#softButton1.four {
+ width: 170px;
+}
+
+#softButton2.four {
+ width: 170px;
+}
+
+#softButton3.four {
+ width: 170px;
+}
+
+#AudioPassThruPopUp .buttonRetry {
+ top: 120px;
+ width: 175px;
+}
+
+#AudioPassThruPopUp .buttonDone {
+ top: 120px;
+ width: 175px;
+}
+
+#AudioPassThruPopUp .buttonCancel {
+ top: 120px;
+ width: 372px;
+}
+
+#info_leftMenu_sdl {
+ font-size: 18px;
+ line-height: 48px;
+}
+
+#info_leftMenu_sdl img {
+ float: left;
+}
+
+#info_leftMenu_sdl span {
+ float: left;
+ position: relative;
+ width: 100px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ left: 0;
+}
+
+/* TurnByTurnView */
+#TurnByTurnView.TurnByTurnView {
+ top: 48px;
+ height: 384px;
+ left: 153px;
+ width: 647px;
+ background: none;
+}
+
+#TurnByTurnView .caption-text {
+ left: 5px;
+ width: 607px;
+ top: 15px;
+}
+
+#TurnByTurnView .label {
+ overflow: hidden;
+}
+
+#TurnByTurnView .totalDistanceLabel {
+ height: 20px;
+ background: #393939;
+ padding: 15px;
+ left: 5px;
+ top: 80px;
+ width: 170px;
+}
+
+#TurnByTurnView .etaLabel {
+ height: 20px;
+ background: #393939;
+ padding: 15px;
+ left: 206px;
+ top: 80px;
+ width: 170px;
+}
+
+#TurnByTurnView .turnList {
+ left: 5px;
+ top: 145px;
+ width: 379px;
+ padding: 10px;
+ text-align: center;
+}
+
+#TurnByTurnView .ffw_list_menu {
+ height: 198px;
+ top: 200px;
+ left: 5px;
+ width: 401px;
+ border: none;
+}
+
+#TurnByTurnView .ffw-button {
+ border-radius: 3px;
+ border: 1px solid #393939;
+ margin-bottom: 5px;
+ text-align: center;
+ font-size: 20px;
+}
+
+
+#TurnByTurnView .ffw-button .text {
+ margin: auto;
+}
+
+#TurnByTurnView .turnList .arrow-ico {
+ margin-top: -13px;
+}
+
+#turnList img {
+ margin-top: -10px;
+}
+
+#TurnByTurnView .homeScreen {
+ left: 440px;
+ top: 312px;
+ padding: 0 0 0 5px;
+ width: 195px;
+}
+
+#TurnByTurnView .homeScreen span {
+ width: 140px;
+}
+
+#TurnByTurnView .homeScreen>img {
+ float: left;
+ width: 50px;
+ height: 50px;
+}
+
+#TurnByTurnView .homeScreen>span {
+ float: left;
+ line-height: 50px;
+ padding-left: 5px;
+}
+
+#TurnByTurnView .navigationText2 {
+ left: 440px;
+ top: 268px;
+ width: 182px;
+ padding: 10px;
+ height: 20px;
+ background: #393939;
+}
+
+#TurnByTurnView .turnIcon,
+#TurnByTurnView .nextTurnIcon {
+ border: 1px solid #222;
+ left: 540px;
+ width: 100px;
+ height: 100px;
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+#TurnByTurnView .distanceToManeuver{
+ top: 80px;
+ left: 419px;
+ background: #393939;
+ padding: 15px;
+}
+
+#TurnByTurnView .distanceToManeuverScale{
+ top: 144px;
+ left: 419px;
+ background: #393939;
+ padding: 15px;
+}
+
+#TurnByTurnView .timeToDestination{
+ top: 207px;
+ left: 419px;
+ background: #393939;
+ padding: 15px;
+}
+
+#TurnByTurnView .turnIcon {
+ top: 65px;
+}
+
+#TurnByTurnView .nextTurnIcon {
+ top: 166px;
+}
+
+#tbtTurnListList .list-content .label>img {
+ width: 50px;
+ height: 50px;
+ float: left;
+}
+
+#info_apps_list .ffw-button {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#sdl_view_container {
+ z-index: 501;
+}
+
+#sdl_view_container .title {
+ top: 79px;
+ font-size: 38px;
+ left: 7px;
+ width: 340px;
+ height: 44px;
+}
+
+#sdl_view_container .album {
+ top: 123px;
+ font-size: 26px;
+ left: 10px;
+ width: 330px;
+ height: 32px;
+}
+
+#sdl_view_container .artist {
+ top: 155px;
+ font-size: 26px;
+ left: 10px;
+ width: 330px;
+ height: 32px;
+}
+
+#sdl_view_container .player_controlls {
+ top: 292px;
+ left: 165px;
+}
+
+/* SDL Slider*/
+#media_sdl_slider_view {
+ width: 800px;
+ height: 480px;
+ z-index: 1000;
+ background: url(../images/media/bg.png) no-repeat;
+}
+
+#media_sdl_slider_view .backButton {
+ top: 80px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+}
+
+#media_sdl_slider_view .initialText {
+ top: 80px;
+ left: 75px;
+ width: 620px;
+ height: 20px;
+ background: #393939;
+ padding: 15px;
+}
+
+/* SDL Perform Interaction Choise */
+#media_app_perform_interaction_view {
+ width: 800px;
+ height: 480px;
+ z-index: 1000;
+ background: url(../images/media/bg.png) no-repeat;
+}
+
+#media_app_perform_interaction_view .backButton {
+ top: 80px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+}
+
+#media_app_perform_interaction_view .list {
+ position: absolute;
+ width: 629px;
+ height: 251px;
+ border-radius: 2px;
+ left: 100px;
+ top: 154px;
+}
+
+#media_app_perform_interaction_view .initialText {
+ top: 80px;
+ left: 75px;
+ width: 620px;
+ height: 20px;
+ background: #393939;
+ padding: 15px;
+}
+
+#media_app_perform_interaction_view .list-content {
+ width: 578px;
+}
+
+/* SDL Media Options */
+#media_app_options_view {
+ width: 800px;
+ height: 480px;
+ z-index: 2002;
+ background: url(../images/media/bg.png) no-repeat;
+}
+
+#media_app_options_view .backButton {
+ top: 80px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+}
+
+#media_app_options_view .list {
+ position: absolute;
+ width: 650px;
+ height: 251px;
+ border-radius: 2px;
+ left: 75px;
+ top: 154px;
+}
+
+#media_app_options_view .optionsLabel {
+ top: 80px;
+ left: 75px;
+ width: 620px;
+ height: 20px;
+ background: #393939;
+ padding: 15px;
+}
+
+#media_app_options_view .list-content {
+ width: 578px;
+} \ No newline at end of file
diff --git a/src/components/HMI/css/settings.css b/src/components/HMI/css/settings.css
new file mode 100644
index 0000000000..b8142924bb
--- /dev/null
+++ b/src/components/HMI/css/settings.css
@@ -0,0 +1,129 @@
+#settingsView .in_settings_separate_view{
+ top: 48px;
+ width: 800px;
+ height: 382px;
+ background: black;
+ z-index: 5000;
+}
+
+#settingsView .in_settings_separate_view .backButton {
+ top: 35px;
+ width: 48px;
+ height: 48px;
+ border: 1px solid #333;
+ border-radius: 2px;
+ left: 25px;
+}
+#settingsView .in_settings_separate_view .list{
+ height: 251px;
+ width: 700px;
+ top: 106px;
+ left: 50px;
+}
+#settingsView .in_settings_separate_view .list-item{
+ width: 639px;
+ padding-left: 10px;
+}
+
+#settingsView .in_settings_separate_view .label{
+ top: 35px;
+ left: 100px;
+ width: 620px;
+ background: #393939;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 50px;
+ height: 50px;
+ padding-left: 15px;
+ padding-right: 15px;
+}
+
+#settingsView .backButton .ico {
+ margin-top: 13px;
+ margin-left: 8px;
+}
+
+#settings_leftMenu {
+ background: #333;
+ width: 150px;
+ height: 300px;
+ top: 90px;
+}
+
+#settings_leftMenu .menu-item.info_active {
+ background: url("../images/info/menu_active.png") repeat-x;
+}
+
+#settings_leftMenu .menu-item {
+ z-index: 201;
+ position: relative;
+ width: 150px;
+ height: 50px;
+ cursor: pointer;
+}
+
+#settings_leftMenu .menu-item span {
+ position: absolute;
+ left: 50px;
+ width: 100px;
+ height: 50px;
+ font-size: 18px;
+ line-height: 50px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+#settings_leftMenu .ico {
+ height: 50px;
+ width: 50px;
+}
+
+#settings_leftMenu .settings_active {
+ background: url("../images/info/menu_active.png") repeat-x;
+}
+
+#settingsView .in_settings_view{
+ position: absolute;
+ top: 48px;
+ left: 153px;
+ width: 647px;
+ height: 384px;
+ float: left;
+ z-index: 1001;
+ margin-top: 70px;
+}
+
+#settingsView .policies_settings_list{
+ height: 251px;
+ width: 598px;
+ left: 10px;
+}
+
+#policies_settings_list .list-content .ffw-button{
+ width: 537px;
+ padding-left: 10px;
+}
+
+#settingsView .settingsButton{
+ float: left;
+ width: 536px;
+ margin-right: 10px;
+ height: 48px;
+ font-size: 20px;
+ line-height: 50px;
+ border: 1px solid #393939;
+ cursor: pointer;
+ padding-left: 10px;
+ position: relative;
+}
+
+#policies_settings_system_error .listSelect,
+#policies_settings_status_info .listSelect{
+ top: 125px;
+ position: absolute;
+ width: 150px;
+ left: 320px;
+ height: 40px;
+ color: white;
+ background: #393939;
+} \ No newline at end of file
View Lorry Controller Status