[profile/ivi/sdk/web-sample-build.git] / samples / web / Sample / Tizen / Web App / Modello_SDL / project / css / info.css

#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;
}

/******************* For Help-Mode *******************/
#info_view.help-mode .list-item span{
        line-height: 54px;
        left: 1px;
}

#info_view {
        width: 720px;
/*      height: 480px; */
        position: absolute;
        top: 0;
}

#info_view.green_bg {
        background: url(../images/nav/bg.png) no-repeat;
}

#info_leftMenu{
        background: #333;
        width: 150px;
        height: 300px;
        top: 90px;
    display: none;
}
#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;}

.help-mode #info{
        background: url(../images/info/info_blur.png) no-repeat 0 -5px;
}

#info_view.help-mode #info_sync_services,
#info_view.help-mode #info_traff,
#info_view.help-mode #info_traffic_report,
#info_view.help-mode #info_traffic_pts,
#info_view.help-mode #info_traffic_hear,
#info_view.help-mode #info_connect,
#info_view.help-mode #info_log,

#info_view.help-mode #info_left_services,
#info_view.help-mode #info_left_travel_link,
#info_view.help-mode #info_left_alerts,
#info_view.help-mode #info_left_calendar,
#info_view.help-mode #info_left_apps,
#info_view.help-mode .inner-wrapper div{
        color: transparent !important;
        text-shadow: 0 0 3px #999 !important;
}

#info_view.help-mode #info_connect{
        background: none !important;
        border: none !important;
}

#info_view.help-mode .list-content{
        border: none !important;
}

/******************* 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;
}

.help-mode #info_services_view #info_traffic_pts{
        text-shadow: 0 0 3px #65CDD9 !important;
}

.help-mode #info_services_view{
        background-image:url(../images/info/info_services_bg_help.png);
        background-position: 0px 40px;
}

/******************* 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;
}

.helpmode #info_travelLink_listLeft{
        margin-left: -1px;
        top: 91px;
}

.helpmode #info_travelLink_listRight{
        margin-right: 2px;
}

#info_travelLink_listRight .list-item:first-of-type {
        height: 48px !important;
}

.helpmode #info_travelLink {
        background-image: url(../images/info/info_travelLink_bg_help.png);
        background-repeat: no-repeat;
        border: none !important;
}

.helpmode #info_travelLink_logo {
        opacity: 0;
}

.helpmode #info_travelLink .lat{
        text-shadow: 0 0 3px lime !important;
}

.helpmode #info_travelLink .list-item span{
        text-shadow: 0 0 3px #999 !important;
}

.helpmode #info_travelLink_listRight .list-item:first-of-type {
        height: 48px !important;
        line-height: 48px;
}

.helpmode #info_travelLink_listRight .list-item:first-of-type span{
        line-height: 51px;
}

.helpmode #info_travelLink_listRight .list-item span{
        margin-left: 43px;
}

/******************* For Info.Alerts menu *****************/

#info_alerts {
        left: 153px;
        top: 48px;
        width: 647px;
        height: 384px;
        font-size: 20px;
}

#info_alerts_listCaption {
        top: 66px;
        left: 13px;
        height: 39px;
}

#info_alerts_listCaption .lableToggle {
        position: relative;
        line-height: 40px;
        float: left;
        margin-left: 0px !important;
        margin-top: 0px !important;
        width: 134px;
        text-align: right;
}

#info_alerts_listCaption .lableToggle span{
        z-index: 2;
        position: relative;
}

#info_alerts_listCaption .toogleButtonContainer{
        height: 39px;
        width: 260px;
        border-radius: 0;
        margin: 0 11px;
        border: 1px solid #393939;
        border-bottom: none;
        line-height: 39px;
        float: left;
}

#info_alerts_listCaption .toogleButtonContainer .delim{
        width: 4px;
        height: 39px;
        background: url(../images/info/delim_40.png) no-repeat;
        z-index: 100;
        border: none;
}

#info_alerts_listCaption .toggles {
        height: 39px;
        width: 128px;
}

#info_alerts_listCaption .toogleButtonContainer span{
        line-height: 40px;
        z-index: 2;
        margin-left: 0px !important;
        margin-top: 0px !important;
}

#info_alerts  .toogleButtonContainer .active {
        background: url(../images/info/btn_40_bg_active_invert.png) !important;
}

#info_alerts_list {
        position: relative;
        float: left;
        top: 67px;
        left: 13px;
        width: 468px;
        height: 301px;
}

#info_alerts_list .list-content {
        width: 406px;
        border-top: none;
        border-left: none;
}

#info_alerts_list .list-item {
        width: 405px;
}

#info_alerts_list .list-item:first-of-type{
        height: 39px !important;
        line-height: 39px !important;
}

#info_alerts_list_item1 {
        border-left: 1px solid #393939;
}

#info_alerts_list_item1 .right_ico {
        position: absolute;
        right: 7px;
}
#info_alerts_list_item1 .ico {
        border: none !important;
}

#info_alerts_list_item1 span {
        position: absolute;
        bottom: -2px;
        width: 250px;
        font-size: 19px;
        z-index: 2;
}

.helpmode #info_alerts_list_item1 span {
        bottom: -3px;
        margin: 0px 0 0 94px;
}

.fr #info_alerts_list_item1 span {
        line-height: 18px;
        bottom: 4px;
}

.helpmode.fr #info_alerts_list_item1 span {
        line-height: 18px;
        bottom: 5px;
}

#info_alerts_list .list-item.active {
        background-image: url(../images/info/btn_50_bg_active_invert.png);
}

#info_alerts_list .toogleButtonContainer .delim {
        width: 4px;
        height: 39px;
        background: url(../images/info/delim_40.png) no-repeat;
        z-index: 100;
        border: none;
}

#info_alerts_rightList {
        position: relative;
        float: left;
        top: 67px;
        left: 23px;
        height: 151px;
        width: 152px;
}

#info_alerts_rightList .list-content {
        width: 150px;
}

#info_alerts_rightList .list-item {
        border-bottom: 1px solid #393939 !important;
}

#info_alerts_rightList .list-item > span {
        margin-left: 15px;
        position: relative;
        z-index: 2;
}

.helpmode #info_alerts_rightList{
        top: 67px;
        left: 23px;
}

.helpmode #info_alerts_rightList .list-item{
        height: 49px !important;
}

.helpmode #info_alerts_rightList .list-item span{
        line-height: 51px !important;
}

.helpmode #info_alerts_rightList .list-item .ico{
        border: none !important;
}

.helpmode #info_alerts span{
        text-shadow: 0 0 3px #999 !important;
}

#info_alert_bg_helpMode{
        width: 647px;
        height: 384px;
        background-image: url(../images/info/info_alerts_bg_help.png);
}

.help-mode #info_alerts_list .list-item:first-of-type {
        border-bottom: 1px solid #393939 !important;
}

/******************* 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;
}

#info_calendar.help-mode {
    background-image: url(../images/info/view_info_calendar-help.png);
        background-position: 1px 33px;
}

#info_calendar.help-mode .c-btn, #info_calendar.help-mode .day.active {
        background: none !important;
}

#info_calendar.help-mode div.day{
        text-shadow: 0 0 3px #FFF !important;
}

.help-mode #info_calendar .today {
        border: none !important;
        background: none !important;
}

.help-mode #info_calendar .today span {
        text-shadow: 0 0 3px #999 !important;
}

/******************* For Info.DeviceList *******************/
#info_view .info_apps_deviceList_view{
/*      background: black;
        width: 800px;
        height: 480px;
        z-index: 201;
    position: absolute;
    top: -850px;
    left: 50px;   */
        width: 720px;
        height: 480px;
        z-index: 201;
}


#info_apps_deviceList_view .backButton {
        position: absolute;
        top: 0;
        width: 48px;
        height: 48px;
        border: 1px solid #333;
        border-radius: 2px;
        margin: 0;
}

#info_apps_deviceList_view .list{
        position: absolute;
        top: 50px;
        width: 720px;
        height: 890px;
        border-radius: 2px;
}

#info_apps_deviceList_view .deviceListLabel{
/*      top: 80px; */
        position: absolute;
        top: 0;
        width: 100%;
        height: 20px;
        background: #393939;
        padding: 15px 0 15px 120px;
        font-size: 16px;
}

#info_apps_deviceList_view .list-content{
        width: 100%;
        border: none;
        text-align: center;
}
#info_apps_deviceList_view .list-item{
        border: 1px solid #393939 !important;
}
/******************* For Info.Apps menu*******************/
#info_apps {
        position: absolute;
        top: 0;
        width: 720px;
        height: 936px;
/*      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; */
        width: 100%;
        border: none !important;
}

#info_apps .leftButtons {
        position: absolute;
        bottom: 0;
        width: 278px;
/*      float: left; */
        margin: auto 10px 20px 10px;
        height: 51px;
        font-size: 20px;
        line-height: 50px;
        border: 1px solid #393939;
        cursor: pointer;
/*      left: 10px;
    position: absolute; */
}

#info_apps .vehicleHealthReport{
        top: 70px;
    display:none;
}

#info_apps .Asist911{
        top: 122px;
    display:none;
}

#info_apps .installButton{
        top: 174px;
    display:none;
}

#info_apps .findNewApps{
    left: 0;
}

#info_apps .findNewApps img{
        margin: 9px;
        width: 32px;
}

#info_apps .getDeviceList{
    right: 0;
}

#info_apps .getDeviceList img{
        width: 38px;
        margin: 6px;
}

#info_apps .list {
    width: 720px;
    height: 865px;
    overflow-x: hidden;
    overflow-y: auto;
}

#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;
}

.helpmode #info_apps{
        background-image: url(../images/info/info_apps_bg_help.png) !important;
        background-repeat: no-repeat;
}

.helpmode #info_apps_list span {
        margin-left: -1px;
        line-height: 51px !important;
}

.helpmode #info_apps_install_Button{
        border: none;
        background: none;
}

.helpmode #info_apps #info_apps_install_Button span{
        margin-top: 1px;
        left: 51px;
}

.helpmode #info_apps_install_Button .arrow-ico{
        opacity: 0;
}

#info_apps.help-mode #info_apps_install_Button .ico{
        opacity: 0;
}