/* * Include SCSS Imports */ @import "general/import"; /* S: TARIFF TEMPLATE */ /* S: Tariff Template Headlines */ .m-tariff-c-headline { font-size: 20px; font-weight: normal; margin: 0; padding-top: 5px; padding-bottom: 13px; } .m-tariff-c-headline-2 { font-family: $font-FrutigerBold; font-size: 16px; } .border-bg h2.m-tariff-c-headline, .border-bg h3.m-tariff-c-headline-2, .border-bg h2.m-tariff-c-additional-c-headline, .border-bg h3.m-tariff-c-additional-c-togglehead { /* overwrite css definitions for .border-bg h2, h3 */ color: $color-m-tarif-grey-1; } .cms-toggler h3.m-tariff-c-additional-c-togglehead.ui-state-active { margin-top: 3px; } .border-bg h3.m-tariff-c-headline-3 { font-family: $font-FrutigerBold; font-size: 16px; color: $color-m-tarif-grey-1; margin-bottom: 15px; } /* S: Tariff Template Headlinegroup */ .m-tariff-c-headlinegroup { position: relative; } .m-tariff-c-button-container { padding-top: 4px; position: absolute; top: 0; right: 0; } .m-tariff-c-button-container .btn { margin-left: 6px; } /* S: Tariff Template Content */ .m-tariff-c-content { background: url(../img/line-shadow-col6.png) center top no-repeat; //used less than 100 times a day padding-top: 20px; padding-bottom: 7px; } .m-tariff-c-content .instock, .m-tariff-c-content .limited, .m-tariff-c-content .alert { clear: both; margin-left: 0; padding: 2px 6px; font-size: 11px; } .m-tariff-e-config .m-tariff-c-content { padding-bottom: 24px; } .m-tariff-e-config .m-tariff-c-content, .m-tariff-e-config .m-tariff-c-headline { padding-right: 16px; } .m-tariff-e-config .m-tariff-c-headline, .m-tariff-c-duration, .m-tariff-c-mandatory { padding-left: 7px; } .m-tariff-e-summary .m-tariff-c-content, .m-tariff-e-summary .m-tariff-c-headline { padding-left: 16px; } .m-tariff-e-summary .m-tariff-c-content .btn { margin-left: 10px; } .m-tariff-e-summary .m-tariff-c-content .btn.cart { min-width: 145px; } .m-tariff-c-arrows { background: url('../img/animated-arrow.gif') 0 0 no-repeat; height: 18px; width: 25px; position: absolute; text-indent: -9999em; } .m-tariff-c-mandatory-c-arrows { left: -8px; bottom: 63px; } .m-tariff-c-additional-c-arrows { left: -35px; top: 14px; } /* S: Tariff Template Configuration Box */ .m-tariff-e-config {} /* S: Tariff Template Configuration Box - Duration */ .m-tariff-c-duration { margin-bottom: 23px; } .m-tariff-c-list-radio { padding-top: 15px; } .m-tariff-c-list-radio li { float: left; padding-left: 15px; width: 200px; } .m-tariff-c-list-radio label { font-family: $font-FrutigerRoman; font-size: 14px; vertical-align: middle; } .m-tariff-c-list-radio label a { color: $color-m-tarif-blue-1; } .m-tariff-c-list-radio input:checked + label a { color: $color-m-tarif-black; } .m-tariff-c-list-radio input { margin-right: 0; } /* S: Tariff Template Configuration Box - Mandatory */ .m-tariff-c-mandatory { position: relative; overflow-x: auto; overflow-y: hidden; //width: 445px; } .m-tariff-c-mandatory .m-tariff-c-headline-2 { margin-bottom: 5px; } .m-tariff-c-mandatory .alert { margin: 8px 0 8px 15px; } .m-tariff-c-mandatory-c-list { margin: 8px 0 0 15px; } .m-tariff-c-mandatory-c-list-item { float: left; margin-left: 18px; text-align: center; width: 94px; } .m-tariff-c-mandatory-c-list-item:first-child { margin-left: 0; } .m-tariff-c-mandatory-c-list-item input { margin: 0; } .m-tariff-c-mandatory-c-option { border: 1px solid $color-m-tarif-line-blue; border-radius: 4px; height: 60px; margin-bottom: 10px; padding-top: 37px; position: relative; } .active .m-tariff-c-mandatory-c-option { background-color: $color-m-tarif-bg-blue-1; } .m-tariff-c-mandatory-c-option-name, .m-tariff-c-mandatory-c-option-price { font-family: $font-FrutigerRoman; font-size: 13px; } .active .m-tariff-c-mandatory-c-option-name, .border-bg .active p.m-tariff-c-mandatory-c-option-price { color: $color-m-tarif-white; } .m-tariff-c-mandatory-c-option-name { color: $color-m-tarif-blue-1; } .border-bg p.m-tariff-c-mandatory-c-option-price { /* overwrite color definition in .border-bg p */ color: $color-m-tarif-grey-2; padding-top: 5px; } .m-tariff-c-mandatory-c-option-info { background-image: url('../img/ico-info-4.png'); //used less than 100 times a day cursor: pointer; display: block; height: 19px; position: absolute; right: 3px; top: 3px; text-indent: -9999em; width: 18px; } #content-area .m-tariff-c-mandatory-c-option-info.wmTooltip { /* overwrite .wmTooltip style background-image: none; */ background-image: url('../img/ico-info-4.png') !important; //used less than 100 times a day } /* S: Tariff Template Configuration Box - Additional */ .m-tariff-c-additional { background-color: $color-m-tarif-bg-grey-1; border-radius: 4px; position: relative; top: 24px; padding: 52px 6px 18px; } .m-tariff-c-additional-c-headline { background: url('../img/ico-additional-options.png') 20px 7px no-repeat; //used less than 100 times a day color: $color-m-tarif-grey-1; font-family: $font-FrutigerBold; font-size: 16px; min-height: 20px; padding: 27px 0 0 87px; position: absolute; top: -18px; } .m-tariff-c-additional-c-toggler { margin-bottom: 17px; } .m-tariff-c-additional-c-togglehead { background: #FFF url('../img/toggler-open-close.png') 412px 15px no-repeat; //used less than 100 times a day border-radius: 4px; border: 1px solid #ccc; color: $color-m-tarif-grey-1; cursor: pointer; font-family: $font-FrutigerBold; font-size: 16px; line-height: 19px; margin-top: 3px; padding: 8px 13px 6px 28px; } .m-tariff-c-additional-c-togglehead.ui-state-active { background-position: 412px -13px; border-radius: 4px 4px 0 0; border-bottom: 0; } .m-tariff-c-additional-c-togglehead-open, .ui-state-active .m-tariff-c-additional-c-togglehead-closed { display: none; } .ui-state-active .m-tariff-c-additional-c-togglehead-open { display: block; } .m-tariff-c-additional-c-togglehead-internet, td.m-tariff-c-summary-table-td-internet { background: url("../img/ico-additional-options-internet.png") no-repeat; //used less than 100 times a day } .m-tariff-c-additional-c-togglehead-internet { background-position: 0 0; //used less than 100 times a day padding-left: 31px; } .m-tariff-c-additional-c-togglehead-phone { background: url('../img/ico-additional-options-phone.png') 0 0 no-repeat; //used less than 100 times a day padding-left: 31px; } .m-tariff-c-additional-c-togglehead-additional { background: 0 0 no-repeat; //used less than 100 times a day padding-left: 31px; } .m-tariff-c-additional-c-togglehead-additional, td.m-tariff-c-summary-table-td-additional { background-image: url("../img/ico-additional-options-additional.png"); //used less than 100 times a day } .m-tariff-c-additional-c-togglehead-additional-value { background: 0 0 no-repeat; //used less than 100 times a day padding-left: 31px; } .m-tariff-c-additional-c-togglehead-additional-value, td.m-tariff-c-summary-table-td-additional-value { background-image: url("../img/ico-additional-options-additional-value.png"); //used less than 100 times a day } .m-tariff-c-additional-c-togglehead-selection { color: $color-m-tarif-blu2-3; font-size: 10px; } .m-tariff-c-additional-c-togglecontent { background-color: $color-m-tarif-bg-white; border-radius: 0 0 4px 4px; border-left: 1px solid $color-m-tarif-line-grey-1; border-bottom: 1px solid $color-m-tarif-line-grey-1; border-right: 1px solid $color-m-tarif-line-grey-1; } .m-tariff-c-additional-c-togglecontent hr { background: url('../img/tariff-packs-line.png') 0 0 no-repeat; //used less than 100 times a day border: none; height: 1px; margin: 15px; } .m-tariff-c-additional-c-description { margin-bottom: 10px; padding: 0 45px 0 59px; } //#content-area .m-tariff-c-additional-c-description .lnk { // background-position: 2px 6px; //} .m-tariff-c-additional .m-tariff-c-additional-c-packsHeadline { color: $color-m-tarif-grey-1; font-family: $font-FrutigerRoman; font-size: 14px; margin-left: 32px; } .m-tariff-c-additional-c-packs { margin: 0 20px 15px; } .m-tariff-c-additional-c-packs li { border-top: 1px solid $color-m-tarif-line-grey; padding: 6px 12px; position: relative; overflow: hidden; } .m-tariff-c-additional-c-packs li:first-child { border: none; } .m-tariff-c-additional-c-packs li label { color: $color-m-tarif-grey-1; display: inline-block; float: left; line-height: 21px; vertical-align: middle; width: 220px; } .m-tariff-c-additional-c-packs li.active label { font-weight: bold; } .m-tariff-c-additional-c-packs input[type="radio"], .m-tariff-c-additional-c-packs input[type="checkbox"] { display: block; float: left; margin-top: 4px; } .m-tariff-c-additional-c-packs-info { background: url('../img/ico-info-5.png') 0 0 no-repeat; //used less than 100 times a day cursor: pointer; display: inline-block; height: 21px; text-indent: -9999em; vertical-align: middle; width: 22px; } #content-area .m-tariff-c-additional-c-packs-info.wmTooltip { /* overwrite .wmTooltip styles */ background-image: url('../img/ico-info-5.png') !important; //used less than 100 times a day display: inline-block !important; } .m-tariff-c-additional-c-packs-price { display: inline-block; float: right; line-height: 21px; text-align: right; width: 80px; } .m-tariff-c-additional-c-packs-price, .border-bg p.m-tariff-c-additional-c-packs-price { /* overwrite color value for .border-bg p */ color: $color-m-tarif-grey-1; } .m-tariff-c-additional-c-packs li.active .m-tariff-c-additional-c-packs-price { font-weight: bold; } .m-tariff-c-additional-c-packs-separator { border-bottom: 1px solid $color-m-tarif-line-grey-3; } /* S: Tariff Template Summary Box */ .m-tariff-e-summary { } .m-tariff-c-summary { margin-top: 8px; } .m-tariff-c-summary-c-image { float: left; margin-right: 10px; } .m-tariff-c-summary-c-headline { font-family: $font-FrutigerRoman; font-size: 24px; line-height: 28px; margin-bottom: 10px; } .m-tariff-c-summary-c-runtime { font-family: $font-FrutigerRoman; font-size: 12px; } .m-tariff-c-summary-c-description { padding-left: 90px; } .m-tariff-c-summary-list li { background: url('../img/check-mark.png') 0 2px no-repeat; //used less than 100 times a day color: $color-m-tarif-grey-1; font-size: 12px; padding: 0 0 3px 17px; } .m-tariff-c-summary-infobox { margin-top: 10px; } .m-tariff-c-summary-infobox-c-related { float: left; width: 50%; } .m-tariff-c-summary-infobox-c-related li { width: 100%; } .m-tariff-c-summary-infobox-c-related li a, .m-tariff-c-summary-infobox-c-related li a span { color: $color-m-tarif-blue-4 !important; float: none !important; } .lnk-fixed-network { background: url('../img/ico-fixed-network.png') 0 center no-repeat; //used less than 100 times a day padding-left: 14px; } .lnk-fixed-network:hover { text-decoration: underline; } .m-tariff-c-summary-infobox-c-price { float: right; text-align: right; width: 50%; } .border-bg .m-tariff-c-summary-infobox-c-price p { /* overwrite color value for .border-bg p */ color: $color-m-tarif-grey-1; } .m-tariff-c-summary-infobox-c-price p span { font-family: $font-FrutigerBold; font-size: 24px; } .m-tariff-c-summary-table { border-collapse: collapse; margin-bottom: 10px; margin-top: 30px; width: 100%; } .m-tariff-c-summary-table-tr-total { border-top: 1px solid $color-m-tarif-line-black; } .m-tariff-c-summary-table td { color: $color-m-tarif-grey-1; font-size: 12px; padding-bottom: 6px; padding-left: 0; } .m-tariff-c-summary-table .m-tariff-c-summary-table-tr-total td { padding-top: 10px; } td.m-tariff-c-summary-table-td-pack { background-position: 0 1px; background-repeat: no-repeat; display: block; padding-right: 20px; position: relative; } td.m-tariff-c-summary-table-td-internet { padding-left: 30px; } td.m-tariff-c-summary-table-td-phone { background-image: url("../img/ico-additional-options-phone.png"); //used less than 100 times a day padding-left: 30px; } td.m-tariff-c-summary-table-td-additional { padding-left: 30px; } td.m-tariff-c-summary-table-td-additional-value { padding-left: 30px; padding-bottom: 12px; } .m-tariff-c-summary-table-td-additional-value p, .border-bg td.m-tariff-c-summary-table-td-additional-value p { color: $color-m-tarif-grey-1; } .m-tariff-c-summary-table .hover { background: $color-m-tarif-bg-grey-2 url('../img/bg-tariff-pack-delete.png') 0 bottom no-repeat; //used less than 100 times a day } .m-tariff-c-summary-table .hover .m-tariff-c-summary-table-pack-delete { display: block; } .m-tariff-c-summary-table-pack-delete { background: url('../img/ico-delete.png') 3px 3px no-repeat; //used less than 100 times a day display: none; font-size: 13px; text-align: center; text-indent: -9999em; height: 19px; width: 19px; position: absolute; right: 0; top: 4px; } .m-tariff-c-summary-table-pack-delete, .border-bg a.m-tariff-c-summary-table-pack-delete { /* overwrite color value for .border-bg a */ color: $color-m-tarif-red; } .m-tariff-c-summary-table-pack-selection { font-size: 11px; margin-top: 6px; } .m-tariff-c-summary-table-phone-selection-container { border: 1px solid $color-m-tarif-line-grey-2; border-right: 0; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; height: 78px; overflow: hidden; } .m-tariff-c-summary-table-phone-selection-container p, .border-bg .m-tariff-c-summary-table-phone-selection-container p { /* overwrite color value for .border-bg p */ color: $color-m-tarif-grey-1; } .m-tariff-c-summary-table-phone-selection-container p { margin-bottom: 0; } .m-tariff-c-summary-table-phone-selection-container img { float: left; margin-left: 10px; padding: 5px 0; } .m-tariff-c-summary-table-td-phone-selection { padding-right: 0; } .m-tariff-c-summary-table-phone-selection-text-intro { font-size: 11px; padding-bottom: 6px; padding-top: 6px; } .m-tariff-c-summary-table-phone-selection-text-phone { font-family: $font-FrutigerRoman; font-size: 16px; } .m-tariff-c-summary-table-phone-selection-text-duration { font-size: 11px; margin-top: 6px; } .m-tariff-c-summary-table-phone-price-container { border: 1px solid #e5e5e5; border-left: 0; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; font-size: 12px; height: 78px; overflow: hidden; position: relative; } .m-tariff-c-summary-table-phone-price-container p { position: absolute; bottom: 12px; right: 8px; } .m-tariff-c-summary-table-phone-price-container p, .border-bg .m-tariff-c-summary-table-phone-price-container p { /* overwrite color value for .border-bg p */ color: $color-m-tarif-grey-1; } .m-tariff-c-summary-table-td-total-text-main { font-family: $font-verdana; font-weight: bold; margin-bottom: 0; } .m-tariff-c-summary-table-td-total-text-main, .border-bg p.m-tariff-c-summary-table-td-total-text-main { /* overwrite color value for .border-bg p */ color: $color-m-tarif-grey-1; } .m-tariff-c-summary-table-td-total-text-hint { font-size: 11px; margin-bottom: 0; } td.m-tariff-c-summary-table-td-price { font-weight: bold; padding-right: 0; text-align: right; width: 115px; } .m-tariff-c-summary-table-td-price-additional-value { padding-bottom: 12px; } .m-tariff-c-summary-table-tr-total .m-tariff-c-summary-table-td-price { font-family: $font-FrutigerBold; font-size: 24px; } /*MulticardSettings */ .multicardSettings { margin: 30px 0; overflow: hidden; } .multicardSettings-c-text { font-size: 12px; } /* Fix for toggler in checkout ---------------------------------------------------------------------------------------------------------------------------------------------*/ .cms-toggler h3.m-tariff-c-additional-c-togglehead.ui-state-active, .cms-toggler h3.m-tariff-c-additional-c-togglehead.ui-state-default { margin: 3px 0 0 0; }