/* * Include SCSS Imports */ @import "general/import"; @import 'partials/_home-m-buttons-o2more'; // new button styles /* o2more gradient */ html { background: $color-o2more-bg-white url(../img/bg-grad-o2-150.png) 0 0 repeat-x; } /* grass */ body { //background: transparent url(../img/gras_footer.png) 0 100% repeat-x; position:relative; } #main-wrapper { z-index:1; padding: 0 0 55px; } /*#footer { margin-bottom: 0; }*/ /* not necessary cause of missing footer-grass #footer .footer-legalnote { color: $color-o2more-white; }*/ /* ========================================================================== * o2more rounded-corner-resets * ========================================================================*/ .border-bg, //a.button, //span.button, div.tsr, .tsr div.tsr-c-border, div.tsr img, div.tsr.tsr-e-img-top img, div.tsr.tsr-imgleft img.img-left, div.tsr-video.height2 img, div.tsr .sprite, div.tsr.tsr-e-img-top .sprite, div.tsr.tsr-imgleft .sprite, div.tsr-video.height2 .headline-area, .cms-slider > h3 { border-radius: 0; } /********************* O2 More Base Styles *********************/ .o2more .border-bg { margin-top: 0; } .o2m-head { height: 470px; position: relative; margin-bottom: 0; } .l-o2m-benefit-area { overflow: visible; } .l-o2m-benefit-area > div { margin: 0; } /********************* O2 More Departing Styles *********************/ #footer .navigation-breadcrumbs { margin-bottom: 10px; } //#footer #footer-sitemap, #footer .sitemap { margin-bottom: 33px; } /********************* O2 More Modules *********************/ @import "partials/teaser/_tsr-o2more"; /* O2more modules */ .mod-counter { background-image: url(../img/bg-mod-o2m-counter.png); //used less than 100 times a day width: 221px; height: 108px; right: -20px; position: absolute; } .mod-counter .mod-counter-c-copytop { position: absolute; font-size: 12px; color: $color-o2more-white; top: 12px; left: 12px; } .mod-counter .mod-counter-c-copybot { position: absolute; font-size: 12px; color: $color-o2more-white; bottom: 18px; left: 12px; } .mod-counter-c-digit { position: absolute; top: 42px; left: 8px; } .mod-counter-c-digit span { font-family: $font-FrutigerBold; font-size: 20px; color: $color-o2more-blue-2; padding-left: 13px; } .mod-anchor { background-image: url(../img/ico-anchor.png); //used less than 100 times a day width: 28px; height: 50px; position: absolute; right: -60px; top: 1000px; } .l-o2m-benefit-fix { margin-bottom: -6px!important; margin-top: -6px!important; } .mod-o2m-benefitfinder { /* background-image: url(../img/bg-o2more-benefit-rock.png);*/ height: 54px; width: 928px; margin-left: 6px; float:left; /* Change block formatting context to deactivate vertical collapsing*/ } .mod-o2m-benefitfinder-c-banderole { background-image: url(../img/bg-o2more-benefit.png); height: 54px; padding-left: 30px; width: 918px; position: relative; /* margin-left: -4px;*/ /* margin-top: 20px;*/ float: left; /* Change block formatting context to deactivate vertical collapsing*/ } .mod-o2m-benefitfinder-c-banderole-lft { background-image: url(../img/bg-o2more-benefit-lft.png); width: 34px; height: 70px; position: absolute; top: 0; left: -33px } .mod-o2m-benefitfinder-c-banderole-rght { background-image: url(../img/bg-o2more-benefit-rght.png); width: 34px; height: 70px; position: absolute; top: 0; right: -33px } .mod-o2m-benefitfinder-c-headline { font-family: $font-FrutigerLight; margin-top: 8px; margin-left: 24px; width: 228px; float: left; } .mod-o2m-benefitfinder-c-filter { float:left; margin-top: 8px; } .mod-o2m-benefitfinder-c-filter .btn span { /* button widths*/ width: 168px; } .mod-o2m-benefitfinder-c-filter .btn { margin-right: 24px; } /* o2m user cockpit*/ .m-o2m-tablecockpit { margin: 18px 0; border: 1px solid $color-o2more-line-grey-1; border-collapse: collapse; } .m-o2m-tablecockpit td { width: 20%; border-bottom: 1px solid $color-o2more-line-grey-1; } /* Additional Infos*/ //.o2more-accordion .o2more-accordion-c-toggle .info-additional > a, .info-additional >a { background: url("../img/linkpfeilSprite.png") no-repeat scroll 0 -396px transparent; font-weight: bold; padding-left: 11px; line-height: 16px; } /* o2m toollist */ .o2m-toollist { height: 65px; margin: 12px 0; } .o2m-toollist > li { float: left; margin-left: 12px; position: relative; } .o2m-toollist > li > a{ position: absolute; top: 0; left: 0; padding-top: 34px; /* padding-left: 6px;*/ width: 100%; height: 100%; color: $color-o2more-blue-2; text-align: center; } .o2m-toollist > li:first-child { margin-left: 0; } .o2m-c-toollist-sms{ background-image: url(../img/ico-o2m-sendsms.png); height: 40px; width: 65px; } .o2m-c-toollist-print { background-image: url(../img/ico-o2m-print.png); //used less than 100 times a day height: 40px; width: 74px; } .o2m-c-toollist-email{ background-image: url(../img/ico-o2m-email.png); height: 40px; width: 65px; } /* S: O2more SMS Alert */ .o2m-sms-alert { /* needs to be in a headline */ background-image: url(../img/ico-o2m-sms.png); background-repeat: no-repeat; padding-left: 70px; min-height: 46px; } /* S: dynamic Content */ .contentPanel .form-table-buttons.center { text-align: center; } .contentPanel .form-table-buttons.center .btn { display: inline-block; float: none; } /* S: O2More Newsletter Subscription */ .o2more-newsletter-subscription { background: url(../img/o2more_newsletter_bg_gradient.jpg); } .o2more-newsletter-subscription .bg-layer1 { background: url('../img/o2more_newsletter_bg_door.png'); height: 850px; margin: 0 auto; left: -120px; position: absolute; width: 1200px; z-index: -1; } .o2more-newsletter-subscription #content-area > .grid12 { height: 680px; } .o2more-newsletter-subscription label { color: $color-o2more-white; } .o2more-newsletter-subscription .form-table-header h2, .o2m-lightbox-activate .lightbox-content { color: $color-o2more-white; } .o2more-newsletter-subscription p { color: $color-o2more-white; } .o2more-newsletter-subscription td, .o2more-newsletter-subscription td .small, .o2more-newsletter-subscriptione td, .o2more-newsletter-subscription td strong , .o2more-newsletter-subscription td a, .o2more-newsletter-subscription td a span { font-size: 10px; color: $color-o2more-white; } /* S: O2More Newsletter Activation */ .o2m-lightbox-activate.lightbox { background: url(../img/bg-o2m-activate-newsletter.jpg); height: 580px; width: 840px; } .o2m-lightbox-activate .form-table-header h2, .o2m-lightbox-activate .lightbox-content { color: $color-o2more-white; } .o2m-lightbox-activate p { color: $color-o2more-white; } .o2m-lightbox-activate td, .o2m-lightbox-activate td .small, .o2m-lightbox-activate td, .o2m-lightbox-activate td strong , .o2m-lightbox-activate td a, .o2m-lightbox-activate td a span { font-size: 10px; color: white; } /* S: O2More Buttons */ .o2m-radioButtons .fldln{ margin: 0 0 15px 0; min-height: 0; } .o2m-radioButtons .fldln input { float: left; } .o2m-radioButtons .fldln label{ font-weight: bold; font-size: 12px; float: left; line-height: 12px; } .o2m-radioButtons .fldln label.disabled { color: $color-o2more-grey-3; } .o2m-radioButtons-c-sublink,.o2m-radioButtons-c-subinfo { display: block; font-family: $font-verdana; font-weight: normal; margin-top: 6px; } .o2m-radioButtons-c-sublink { text-decoration: underline; } .o2m-radioButtons-c-subinfo { color: $color-validation; } /* disturber image 'sold out' */ /* ------------------------------------------------------------------------- DEPRECATED ------------------------------------------------------------------------- .mod-tsr-e-o2m-c-disturberSoldOut { display: none; position: absolute; bottom: 0; right: 0; z-index: 50; } .mod-tsr-e-o2m-c-disturberSoldOutVisible { display: block; } .mod-tsr-e-o2m-head .mod-tsr-e-o2m-c-disturberSoldOut { bottom: 43px; right: 0; } .mod-tsr-e-o2m-main .mod-tsr-e-o2m-c-disturberSoldOut { bottom: 25px; right: 28px; } .mod-tsr-e-o2m-mid .mod-tsr-e-o2m-c-disturberSoldOut { bottom: 21px; right: 5px; } .mod-tsr-e-o2m-tile .mod-tsr-e-o2m-c-disturberSoldOut { bottom: 14px; right: 1px; } */ /* * Debug Styles */ .debug-magenta { zoom: 1; background-color: $color-debug-pink; } .draft-copy { position: absolute; top: 10%; left: 10%; font-size: 18px; color: $color-debug-whitewhite; } .draft-copy-parent { position: relative; } .debug-image { display: block; } /* S: Hacks */ .middle.grid12 { overflow: visible!important; /* o2more specific hack to force overflow hidden for benefit finder parent container */ } .tsr.tsr-imgleft .tsr-headline2 { padding: 1px 0 0 0; } .tsr.tsr-imgleft .txt-area { padding: 12px 18px; } /*================================================================================ o2 more Teaser Collection (Tickets & Services) ================================================================================*/ /* Headline Area ---------------------------------------------------------------------------------------------------------------------------------------------*/ .teaserCollection .teaserCollection-c-headlineArea.ticket .tsr { background: transparent url('../img/o2moreTicket_ServicesSprite.png') 100% 0 no-repeat; height: 110px; } .teaserCollection .teaserCollection-c-headlineArea.services .tsr { background: transparent url('../img/o2moreTicket_ServicesSprite.png') 100% -114px no-repeat; height: 110px; } .teaserCollection .teaserCollection-c-headlineArea .tsr .tsr-headline1 span.small { font-size: 30px; line-height: 30px; font-family: FrutigerRoman, Verdana, Tahoma, sans-serif; } .col12 .teaserCollection:first-child, .col6 .teaserCollection:first-child { border: none; } .teaserCollection .teaserCollection-c-headlineArea .tsr.pure .txt-area { padding: 11px 18px 12px; } //.teaserCollection .teaserCollection-c-headlineArea a.btn span { // width:127px; //} .teaserCollection .teaserCollection-c-headlineArea .tsr.pure .txt-area .tsr-c-bottomContainer { top: 6px; right: 10px; position: absolute; height: 40px; width: auto; } .teaserCollection .teaserCollection-c-headlineArea .tsr-headline1 { padding: 0 0 6px; } /* Teaser Area (col12) ---------------------------------------------------------------------------------------------------------------------------------------------*/ .col12 .teaserCollection .tsr-c-bottomContainer { position: absolute; right: 10px; top: 70px; } //.col12 .teaserCollection .teaserCollection-e-headlineBlue { // color: #0086c3!important; //} .col12 .teaserCollection .tsr-copy, .col12 .teaserCollection .tsr-headline1, .col12 .teaserCollection .tsr-headliine2 { max-width: 610px; } div.tsr.pure { margin: -3px 0; } //.teaserCollection { // border-radius: 6px 6px 6px 6px; // box-shadow: 0 0 0 1px #E6E6E6 inset; // border: 1px solid #E6E6E6; // background-color: #ffffff; // //margin-bottom: 0px; //} ////.teaserCollection .teaserCollection-c-headlineArea { //// margin-bottom: -11px; ////} //.teaserCollection .teaserCollection-c-teaserArea .tsr-c-border { // box-shadow: none; //} // //.teaserCollection .teaserCollection-c-teaserArea .tsr-white.tsr-e-sumLink:hover .tsr-c-border { // box-shadow: none; //} // //.teaserCollection .teaserCollection-c-teaserArea .tsr.tsr-white { // background-color: transparent; //} // //.teaserCollection .teaserCollection-c-teaserArea { // background: transparent url('../img/teaserCollectionblueShadow.png') right 1px bottom 1px no-repeat; // min-height: 116px; //} // //.teaserCollection .teaserCollection-c-teaserArea .tsr img { // margin: 12px 0 12px 12px; // border: 3px solid #999999; //} // ////.teaserCollection .teaserCollection-c-imgWrapper { //// //border-radius: 6px; //// border: 1px solid #4F5357; ////} // //.teaserCollection .teaserCollection-c-teaserArea .tsr-headline2 span { // //color: #005896; // font-weight: bold; //} // //.teaserCollection .teaserCollection-c-teaserArea .tsr-headline2 { // padding: 1px 0 2px; //} // //.teaserCollection .teaserCollection-c-teaserArea .tsr { // min-height: 116px; // border-radius: 0; //} // //.teaserCollection .teaserCollection-c-teaserArea .tsr.pure .txt-area .tsr-c-bottomContainer { // bottom: 4px; //} // // //.teaserCollection .teaserCollection-c-teaserArea .tsr.pure .txt-area { // padding: 12px 18px 12px; //} // //.teaserCollection .teaserCollection-c-headlineArea .tsr-headline1 { // text-overflow: ellipsis; // max-width: 310px; // white-space: nowrap; // overflow: hidden; //} // // // ///* //Big Teaser //---------------------------------------------------------------------------------------------------------------------------------------------*/ // //.col12 .teaserCollection .teaserCollection-c-teaserArea { // background: transparent url('../img/teaserCollectionBlueShadowBig.png') right 1px bottom 1px no-repeat; //} // //.col12 .teaserCollection .teaserCollection-c-teaserArea .tsr-headline2 { // //color: #005896; // font-weight: bold; // //margin-top: -15px; //} // //.col12 .teaserCollection .teaserCollection-c-teaserArea .tsr-headline2 span { // //color: #005896; // font-weight: bold; // //margin-top: 15px; //} // //.col12 .teaserCollection .teaserCollection-c-teaserArea .tsr-copy { // margin-bottom: -16px; //} // //.col12 .teaserCollection .teaserCollection-c-teaserArea .tsr-c-bottomContainer { // position: absolute; // top: 50px; // right: 50px; //} // //.col12 .teaserCollection .teaserCollection-c-teaserArea .tsr-copy.notAvailable { // position: absolute; // top: 50px; // right: 50px; //} // //.col12 .teaserCollection .teaserCollection-c-headlineArea .tsr-headline1 { // text-overflow: ellipsis; // max-width: 910px; // white-space: nowrap; // overflow: hidden; //} .ui-accordion h3.ui-accordion-header { margin-top: 12px; } .ui-accordion h3.ui-accordion-header:first-child, .ui-accordion .ui-accordion-content-active + h3.ui-accordion-header{ margin-top: 0px; } /*================================================================================ Benefit Head Teaser ================================================================================*/ /* DEPRECATED .mod-tsr-e-o2m a.btn.red.closed, .mod-tsr-e-o2m a.btn.red.open { min-width: 120px; } .mod-tsr-e-o2m a.btn.red.closed span, .mod-tsr-e-o2m a.btn.red.open span,*/ .tsr-e-o2moreHead a.btn.red.closed span, .tsr-e-o2moreHead a.btn.red.open span { text-align: left; padding-right: 30px; } /* DEPRECATED .mod-tsr-e-o2m a.btn.red.closed:after,*/ .tsr-e-o2moreHead a.btn.red.closed:after { background: url("../img/ico-Benefit.png") no-repeat 0 0; content: ""; height: 10px; position: absolute; right: 15px; top: 11px; width: 15px; } /* DEPRECATED .mod-tsr-e-o2m a.btn.red.open:after,*/ .tsr-e-o2moreHead a.btn.red.open:after { background: url("../img/ico-Benefit.png") no-repeat 0 -91px; content: ""; height: 10px; position: absolute; right: 15px; top: 11px; width: 15px; } .benefitHead-c-related { padding: 12px; } .benefitHead-c-related .metaLogin { padding-left: 0; } /************************ * O2more Benefit List * ************************/ .o2more-accordion { //background: #ffffff; } .o2more-accordion .o2moreBenefitContainer img { background: #ffffff; border: 2px solid $color-line-grey-13; float: left; margin: 10px; } .o2moreBenefitContainer { font-family: $font-FrutigerLight; } .o2moreBenefitContainer-c-content { clear: both; margin-bottom: 10px; margin-top: 10px; height: auto; overflow: hidden; width: 960px; } //Fix for horizontal Text alignment .o2moreBenefitContainer-c-content .cf { margin: 0 10px; } .o2moreBenefitContainer-c-headerContent { width: 580px; padding-top: 10px; } .o2more-accordion h3.ui-accordion-header-active { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .o2moreBenefitContainer-c-preHeadline, .o2moreBenefitContainer-c-headline, .o2moreBenefitContainer-c-subHeadline { color:$color-o2more-blue-2; font-weight: normal; } .o2moreBenefitContainer-c-headline { font-size: 24px; line-height: 28px; font-weight: bold; margin: 6px 0; } .o2moreBenefitContainer-c-subHeadline { font-size: 18px; line-height: 24px; } .o2moreBenefitContainer-c-preHeadline { color: $color-grey-5; font-size: 14px; } .o2moreBenefitContainer-c-lnk { position: absolute; right: 100px; top: 54px; width: auto !important; z-index: 2000000; } .o2more-accordion span.o2moreBenefitContainer-icon-open { background: url("../img/ico-Benefit.png") no-repeat 0 -106px transparent; position: absolute; right: 30px; top: 58px; width: 30px; height:20px; } /* * Link Benefit Closed Style */ .o2more-accordion span.o2moreBenefitContainer-icon-close { background: url("../img/ico-Benefit.png") no-repeat 0 -172px transparent; position: absolute; right: 30px; top: 58px; width: 30px; height:20px; } .o2more-accordion-c-toggle .o2moreBenefitContainer { background: url("../img/bg_o2moreReabrush.png") no-repeat 0 0 transparent; min-height: 129px; } .o2more-accordion-c-toggle >.o2more-accordion-c-toggle-open { background: url("../img/bg_o2moreReabrush-open.png") no-repeat 0 0 transparent; min-height: 129px; margin-bottom: 10px; position: relative; cursor: pointer; } .o2more-accordion >.o2more-accordion-c-toggle .o2more-accordion-c-toggle-close:hover { background: url("../img/bg_o2moreReabrush-hover.png") no-repeat 0 0 transparent; cursor: pointer; } .o2more-accordion >.o2more-accordion-c-toggle { min-height: 129px; margin-bottom: 10px; position: relative; } /*.o2more-accordion >.o2more-accordion-c-toggle-open a, .o2more-accordion >.o2more-accordion-c-toggle a { background: none; color: $color-form-blue; display: block; font-family: $font-FrutigerRoman; font-size: 18px; line-height: 24px; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; }*/ .o2moreBenefitContainer-c-content p { color: $color-grey-9; } .o2more-accordion .cms-accordion div[class*="col"]{ margin: 6px; } /* * Benefit Info */ .o2more-accordion-c-benefitInfo { background: url("../img/bg-benefitInfo.png") repeat-y 0 0 transparent; border-radius: 6px; margin-bottom: 20px; padding: 6px; } .o2more-accordion div[class*="col"] .grid8 div[class*="col"] { margin: 6px; } .benefitDetails { background-color: $color-bg-grey-1; padding: 12px; margin-top: 6px; overflow: hidden; } .benefit-details-spacer { background-color: $color-bg-white; height: 12px; margin-bottom: 12px; margin-left: -12px; padding-right: 24px; width: 100%; } .benefitDetails .fldln > p { width: 30%; } .benefitDetails .fldln div > .input-small { width: 35%; } .o2moreBenefitContainer-c-content .cms-slider.grid8 { width: 100%; } .o2moreBenefitContainer-c-content .cms-slider > h3.ui-state-default{ background-position: 99% 100%; } .o2moreBenefitContainer-c-content .cms-slider > h3, .o2moreBenefitContainer-c-content .cms-slider > h3 span { background-image: url("../img/spr-accordion-o2-more.png"); background-repeat: no-repeat; }