/* * Include SCSS Imports */ @import "general/import"; /** * checkout styles */ .shop-checkout .hline, .form-default .hline { color: $color-form-grey-1; width: 100%; height: 1px; margin: 10px 0; float: left; clear: left; } .shop-checkout > div, .form-default > div { background: $color-form-bg-grey; margin-top: 10px; /* rounded corners */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Webkit */ -khtml-border-radius: 5px; /* Linux browsers */ border-radius: 5px; /* W3C */ } //#content-area .shop-checkout .lnk, #content-area .form-default .lnk, //changed from mathias //.shop-checkout form a.lnk, //#content-area .shop-checkout form a.lnk { // background-repeat: no-repeat; // background-image: url(../img/ico-lnk-404040.png); //} .shop-checkout > div > div > div, .form-default > div > div > div { padding: 0 0 20px 20px; clear: both; overflow: hidden; } .shop-checkout h4, .form-default h4 { color: $color-form-grey-2; font-size: 12px; } //#content-area .shop-checkout .lnk, #content-area .form-default .lnk {color: #4F5357 ;} //changed from mathias //#content-area .shop-checkout .lnk, #content-area .form-default .lnk { //changed from mathias // color: $color-form-lnk-grey; // background-repeat: no-repeat; // background-image: url(../img/ico-lnk-404040.png); //} .shop-checkout .icon, .form-default .icon, .shop-checkout > div > div > h3 > a.toggle, .form-default > div > div > h3 > a.toggle { background-image: url(../img/ico-co-sprite.png); background-repeat: no-repeat; } .shop-checkout .icon, .form-default .icon { float: left; width: 30px; height: 30px; margin: 5px; display: block; text-indent: -10000px;} .shop-checkout .icon-s1, .form-default .icon-s1 { background-position: 0 0; } .shop-checkout .icon-s2, .form-default .icon-s2 { background-position: 0 -30px; } .shop-checkout .icon-s3, .form-default .icon-s3 { background-position: 0 -60px; } .shop-checkout .icon-s4, .form-default .icon-s4 { background-position: 0 -90px; } .shop-checkout .icon-s1, .form-default .icon-s1 { background-position: 0 0; } .shop-checkout .icon-s2, .form-default .icon-s2 { background-position: 0 -30px; } .shop-checkout .icon-s3, .form-default .icon-s3 { background-position: 0 -60px; } .shop-checkout .icon-s4, .form-default .icon-s4 { background-position: 0 -90px; } .shop-checkout > div > div, .form-default > div > div { margin-left: 40px; background: $color-form-bg-grey-2 url(../img/bg-grad-lightblue.png) bottom left repeat-x; //used less than 100 times a day /* rounded corners */ -moz-border-radius: 0 5px 5px 0; /* Firefox */ -webkit-border-radius: 0 5px 5px 0; /* Webkit */ -khtml-border-radius: 0 5px 5px 0; /* Linux browsers */ border-radius: 0 5px 5px 0; /* W3C */ padding-right: 20px; border-left: 1px solid $color-form-line-grey; } /*.accordion-header,*/ .shop-checkout > div > div > h3, .form-default > div > div > h3 { font-size: 14px; display: block; line-height: 30px; padding: 5px 10px; min-height: 30px; height: auto; color: $color-form-blue; width: 620px; font-weight: 100; } .shop-checkout > div > div > h3 > a.btn span, .form-default > div > div > h3 > a.btn span { /* height: 30px; */ font-size: 12px; } .shop-checkout > div > div > h3 > a.toggle, .form-default > div > div > h3 > a.toggle { background-position: 0 -150px; display: block; width: 30px; height: 30px; text-indent: -10000px; } .shop-checkout fieldset, .form-default fieldset { clear: both; margin-top: 10px; } .forms-fieldbox, .shop-checkout fieldset > p, .form-default fieldset > p { padding-left: 160px; position: relative; clear: left; width: 320px; margin-top: 10px; overflow: hidden; } .forms-fieldbox.extended, .shop-checkout .extended, .shop-checkout fieldset > p.extended, .form-default .extended, .form-default fieldset > p.extended { padding-left: 0; width: 450px; margin-top: 5px; } .forms-fieldbox label, .shop-checkout fieldset > p > label, .form-default fieldset > p > label { float: left; margin-left: -160px; background: #8bc0e0; padding: 5px; text-align: left; width: 140px; line-height: 16px; color: #333; font-size: 12px; vertical-align: middle; /* white-space: nowrap; */ } .forms-fieldbox label.plain, .form-default label.plain { margin: 0; padding: 0; background-image: none; margin-left: .3em; } .forms-fieldbox input[type="text"], .shop-checkout fieldset > p > input[type="text"], .form-default fieldset > p > input[type="text"], .forms-fieldbox input[type="password"], .shop-checkout fieldset > p > input[type="password"], .form-default fieldset > p > input[type="password"] { line-height: 16px; background: $color-form-bg-white; padding: 5px; border: 1px solid $color-form-line-grey-1; width: 235px; } .forms-fieldbox select.medium { width: 172px; } .forms-fieldbox input[type="text"].medium, .shop-checkout fieldset > p > input[type="text"].medium, .form-default fieldset > p > input[type="text"].medium, .forms-fieldbox input[type="password"].medium, .shop-checkout fieldset > p > input[type="password"].medium, .form-default fieldset > p > input[type="password"].medium { width: 160px; } .forms-fieldbox select.small, .form-default select.small { width: 76px; line-height: 16px; } .forms-fieldbox input[type="text"].small, .shop-checkout fieldset > p > input[type="text"].small, .form-default fieldset > p > input[type="text"].small, .forms-fieldbox input[type="password"].small, .shop-checkout fieldset > p > input[type="password"].small, .form-default fieldset > p > input[type="password"].small { width: 60px; line-height: 16px; } .forms-fieldbox select.tiny, .form-default select.tiny { width: 46px; font-size: 12px; line-height: 16px; } .forms-fieldbox input[type="text"].tiny, .shop-checkout fieldset > p > input[type="text"].tiny, .form-default fieldset > p > input[type="text"].tiny, .forms-fieldbox input[type="password"].tiny, .shop-checkout fieldset > p > input[type="password"].tiny, .form-default fieldset > p > input[type="password"].tiny { width: 30px; line-height: 16px; } .forms-fieldbox select.ultratiny, .form-default select.ultratiny { width: 46px; line-height: 16px; } .forms-fieldbox input[type="text"].ultratiny, .shop-checkout fieldset > p > input[type="text"].ultratiny, .form-default fieldset > p > input[type="text"].ultratiny, .forms-fieldbox input[type="password"].ultratiny, .shop-checkout fieldset > p > input[type="password"].ultratiny, .form-default fieldset > p > input[type="password"].ultratiny { width: 9px; line-height: 16px; } .forms-fieldbox select.mediumbeforeultratiny, .form-default select.mediumbeforeultratiny { width: 46px; line-height: 16px; } .forms-fieldbox input[type="text"].mediumbeforeultratiny, .shop-checkout fieldset > p > input[type="text"].mediumbeforeultratiny, .form-default fieldset > p > input[type="text"].mediumbeforeultratiny, .forms-fieldbox input[type="password"].mediumbeforeultratiny, .shop-checkout fieldset > p > input[type="password"].mediumbeforeultratiny, .form-default fieldset > p > input[type="password"].mediumbeforeultratiny { width: 211px; line-height: 16px; } .forms-fieldbox input[type="radio"], .shop-checkout fieldset > p > input[type="radio"], .form-default fieldset > p > input[type="radio"] { margin-top: 7px; } .forms-fieldbox textarea, .shop-checkout fieldset > p > textarea, .form-default fieldset > p > textarea { padding: 5px; border: 1px solid $color-form-line-grey-1; width: 235px; overflow: auto; } .forms-fieldbox select, .shop-checkout fieldset > p > select, .form-default fieldset > p > select { line-height: 26px; background: $color-form-bg-white; height: 27px; padding: 3px; border: 1px solid $color-form-line-grey-1; width: 247px; } /** shop navigation **/ #shop-nav { padding: 20px 0; } #shop-nav li { float: left; padding-right: 30px; height: 30px; } #shop-nav li span { color: $color-form-grey-2; display: block; height: 30px; line-height: 30px; padding: 0 2px 0 10px; font-size: 14px; } #shop-nav li.previous { background: url(../img/shop-nav-co-prevcurr.png) 100% 0 no-repeat; } //used less than 100 times a day #shop-nav li.prevprev { background: url(../img/shop-nav-co-prevprev.png) 100% 0 no-repeat; } //used less than 100 times a day #shop-nav li.previous span, #shop-nav li.prevprev span { background: #c1ccda; } #shop-nav li.current { background: url(../img/shop-nav-co-currnext.png) 100% 0 no-repeat; } //used less than 100 times a day #shop-nav li.currlast { background: url(../img/shop-nav-co-end.png) 100% 0 no-repeat; } //used less than 100 times a day #shop-nav li.current span, #shop-nav li.currlast span { background: $color-form-bg-white; color: $color-form-grey-3; } #shop-nav li.next { background: url(../img/shop-nav-co-next.png) 100% 0 no-repeat; } //used less than 100 times a day #shop-nav li.nextnext { background: url(../img/shop-nav-co-nextnext.png) 100% 0 no-repeat; } #shop-nav li.next span, #shop-nav li.nextnext span { background: $color-form-bg-blue; color: $color-form-grey-4; } //used less than 100 times a day #shop-nav li:first-child span { /* rounded corners */ -moz-border-radius: 3px 0 0 3px; /* Firefox */ -webkit-border-radius: 3px 0 0 3px; /* Webkit */ -khtml-border-radius: 3px 0 0 3px; /* Linux browsers */ border-radius: 3px 0 0 3px; /* W3C */ } .shop-checkout fieldset.colonized > div { float: left; margin-left: 10px; width: 180px; } .shop-checkout label.blank, .form-default label.blank { float: none; margin: 0; padding: 0; background-image: none; width: auto; } .shop-checkout p.blank, .form-default p.blank { padding: 0; } .shop-checkout > div > div > div > p { margin-left: 20px; } .shop-checkout > div > div > div > p { margin-left: 20px; } .shop-checkout > div > div > div > p:first-child, .form-default > div > div > div > p:first-child { margin-left: 0; } #shop-checkout-summary .basket-item, form-default .basket-item { background: $color-form-bg-blue; /* rounded corners */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Webkit */ -khtml-border-radius: 5px; /* Linux browsers */ border-radius: 5px; /* W3C */ } .basket-item h4, .basket-item span, .basket-item form table td { color: $color-form-white; } #shop-checkout-summary .basket-item > div, form-default .basket-item > div { padding: 10px; clear: both; } #shop-checkout-summary ul.summary { float: right; } #shop-checkout-summary ul.summary li { margin-top: 10px; background: $color-form-bg-blue; padding: 5px; width: 350px; /* rounded corners */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Webkit */ -khtml-border-radius: 5px; /* Linux browsers */ border-radius: 5px; /* W3C */ } #shop-checkout-summary ul.summary li h4 { line-height: 16px; font-size: 12px; color: $color-form-white; font-weight: 100; } #shop-checkout-summary ul.summary li span { line-height: 16px; font-size: 12px; color: $color-form-white; } #shop-checkout-summary ul.summary li.sum { background: #094987; } #shop-checkout-summary ul.summary li.sum h4, #shop-checkout-summary ul.summary li.sum span { font-size: 14px; } #shop-checkout-finished h3 { color: $color-form-white; font-size: 16px; line-height: 16px; } #shop-checkout-finished p { color: $color-form-white; font-size: 12px; line-height: 16px; margin-top: 16px; } #shop-checkout-finished .teasing { margin-top: 16px; width: 100%; height: 480px; background: url(../img/dummy-1x1.gif) 0 0 repeat; position: relative; } #shop-checkout-finished .teasing p { padding: 10px; } form input[type="text"].inputFieldValidationError, form select.inputFieldValidationError, form textarea.inputFieldValidationError, form input[type="password"].inputFieldValidationError { background-color: $color-form-bg-yellow !important; } .errorPanel { font-weight: 700; background: $color-form-bg-grey-3; border: 1px solid $color-form-line-grey-1; /* rounded corners */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Webkit */ -khtml-border-radius: 5px; /* Linux browsers */ border-radius: 5px; /* W3C */ padding: 10px; } .errorPanel.widgetize { position: absolute; right: 301px; width: 188px; margin-top: 10px; background: $color-form-bg-grey-3; border: 1px solid $color-form-line-grey-1; } .homezone { margin-left: 160px; } .homezone .errorPanel { position: relative; width: auto; padding: 5px; right: auto; } .errorPanel span { background: $color-form-bg-yellow; padding: 5px; line-height: 120%; margin: 2px; display: inline-block; color: inherit; } .defaultErrorMessage { background: $color-form-bg-yellow !important; padding: 5px; line-height: 150%; display: inline-block; color: $color-form-grey-6; font-weight: 700; } .forms-fieldbox .radiogroup label { float: none; background-image: none; padding: 0; margin: 0 3px; } .whtFont { color: $color-form-white; } .agb h3 { color: $color-form-white; font-size: 16px; } .agb h4 { color: $color-form-white; margin-top: 12px; } .agb hr { height: 2px !important; line-height: 0; border: none; background: transparent url(../img/bg-dot-ffffff.gif) 0 0 repeat-x; margin: 15px 0 3px 0; } .agb p { margin-top: 16px; color: $color-form-white; } .agb .frm-field { padding: 0 15px 0 25px; color: $color-form-white; font-size: 12px; line-height: 16px; } .agb .frm-field input[type="checkbox"] { margin-left: -25px; float: left; } .agb div.frm-field { margin-top: 16px; } #content-area .bg-grad-cnt .bg-trans { margin-top: 10px; } #content-area .bg-grad-cnt .bg-trans h3 { margin: -10px; height: 30px; overflow: hidden; } #content-area .bg-grad-cnt .bg-trans h3.toggled { margin: -9px -9px 10px -9px; } #content-area .bg-grad-cnt .bg-trans ul li { background: transparent none; } .bg-trans:before { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .bg-trans fieldset > p > span { line-height: 28px; } .bg-trans fieldset > p.checkbox > span { line-height: inherit; } .bg-trans p.extended a.btn { margin-top: 10px; } .prefill, .form-default fieldset > p > label + span.prefill { color: $color-form-grey-7; padding: 6px; line-height: inherit !important; } .form-activation > div { background-color: $color-form-blue-2; } .form-activation > div > div { background-position: left top; } .form-activation > div > span.icon { position: absolute; } .form-default .errorPanel.widgetize { position: relative; right: 0; margin-left: -70px; margin-bottom: 10px; width: 178px; float: right; } .form-default h3 { color: $color-form-grey-2; } .form-default p a[class=""] { color: $color-form-blue-2; font-size: inherit; } #shop-nav .rght { padding-right: 15px; position: relative; top: -63px; } //#shop-nav a.lnk { //changed from mathias // background: transparent url(../img/ico-lnk-ffffff.png) 2px 4px no-repeat; // //used less than 100 times a day // display: block; // width: auto; // overflow: hidden; // clear: both; // text-align: left; // color: $color-ie-white; // line-height: 16px; // padding: 0 0 0 15px; // z-index: 1000; //} .form-default fieldset > p.extended { width: 610px; } .form-default .errorPanel.errorPanelFull.widgetize { float: none; width: inherit; margin-left: 0; } .form-default fieldset > p.extended.checkbox, .form-default fieldset > p.extended.radio { padding-left: 20px; position: relative; clear: left; } .form-default fieldset > p.extended.checkbox input[type="checkbox"], .form-default fieldset > p.extended.radio input[type="radio"] { margin-left: -20px; margin-top: 1px; width: 15px; height: 15px; position: absolute; } .form-default fieldset > p .subcheckbox, .form-default fieldset > p .subradio { display: block; clear: both; margin: 5px 0 5px 20px; position: relative; } .form-default fieldset > p .subcheckbox label, .form-default fieldset > p .subradio label { padding-right: 50px; } .form-default fieldset > p.checkbox span.defaultErrorMessage, .form-default fieldset > p.radio span.defaultErrorMessage, .form-default fieldset > p.checkbox span.inputFieldValidationError, .form-default fieldset > p.radio span.inputFieldValidationError { overflow: hidden; padding: 2px 0 0; border: 2px solid $color-form-line-yellow; background: $color-form-bg-yellow; position: relative; } .form-default fieldset > p.checkbox span.defaultErrorMessage input, .form-default fieldset > p.radio span.defaultErrorMessage input, .form-default fieldset > p.checkbox span.inputFieldValidationError input, .form-default fieldset > p.radio span.inputFieldValidationError input { position: relative; top: 2px; } .form-default fieldset > p.extended.checkbox span.defaultErrorMessage, .form-default fieldset > p.extended.radio span.defaultErrorMessage, .form-default fieldset > p.extended.checkbox span.inputFieldValidationError, .form-default fieldset > p.extended.radio span.inputFieldValidationError { position: absolute; padding: 0; border: 2px solid $color-form-line-yellow; background: $color-form-bg-yellow; font: 0/0 Arial; margin-left: -20px; line-height: 0 !important; } .form-default fieldset > p.extended.checkbox span.defaultErrorMessage input, .form-default fieldset > p.extended.radio span.defaultErrorMessage input, .form-default fieldset > p.extended.checkbox span.inputFieldValidationError input, .form-default fieldset > p.extended.radio span.inputFieldValidationError input { top: 0; } .form-default fieldset > p.extended.checkbox span.defaultErrorMessage input[type="checkbox"], .form-default fieldset > p.extended.radio span.defaultErrorMessage input[type="radio"] { margin: 0; position: static; } .form-default.summary fieldset > p > label { background: transparent none; } .shop-checkout form .article *, .form-default form .article * { color: $color-form-grey-2; } .shop-checkout form .article h1, .shop-checkout form .article .headline1, .shop-checkout form .article h1 *, .shop-checkout form .article .headline1 * { color: $color-form-blue-3; } .shop-checkout form .article h2, .shop-checkout form .article .headline2, .shop-checkout form .article h2 *, .shop-checkout form .article .headline2 * { color: $color-form-blue-3; } .shop-checkout form .article h3, .shop-checkout form .article .headline3, .shop-checkout form .article h3 *, .shop-checkout form .article .headline3 * { color: $color-form-blue-3; } .shop-checkout form h1, .shop-checkout form h1 sub, .shop-checkout form h2, .shop-checkout form h2 sub, .shop-checkout form h3 .shop-checkout form h3 sub { color: inherit; } //.shop-checkout form a.lnk, //changed from mathias //#content-area .shop-checkout form a.lnk { // background-position: 2px 4px; // background-repeat: no-repeat; // color: $color-form-grey-6; // padding-left: 15px; //} .radiogroup { line-height: 24px; } .radiogroup input { position: relative; margin: 0 !important; top: 2px; } .status-mode label { background-color: $color-form-bg-blue-1; } .status-mode p span, .status-mode fieldset > p > span { padding-top: 6px; padding-bottom: 2px; line-height: inherit; display: block; } button[disabled="disabled"] { opacity: 0.5; cursor: default; } #progress { margin-top: -15px } .radio-e-checked { font-weight: bold; }