/* header */ header { padding: 0 405px 0 10px; /* 0 (240px + 165px) 0 10px */ margin: 0 auto; width: 1395px; /* 1230px + 165px */ /*width: 990px;*/ height: 112px; min-height: 112px; position: relative; box-sizing: border-box; } header a.sflogo { position: absolute; top: 16px; left: 6px; display: block; width: auto; height: auto; } /* SF-39372 - changed SF logo for DE */ body.countryRef1 header a.sflogo { width: 220px; height: 38px; background: url(/i/logo/de/SF-TOL_DESK.png) no-repeat top left; background-size: auto 69px; } body.countryRef1 header a.sflogo img { display: none; } /* T-ONLINE-LOGO */ header div.t-online-logo-wrapper { position: relative; top: 57px; display: inline-block; } header div.t-online-logo-wrapper img { position: relative; top: 12px; } header span.t-online-logo-text { font-family: Arial, Helvetica, sans-serif; } /* SF-39372 - changed T-ONLINE logo for DE */ body header #t-online-logo { display: none; } body.countryRef1 header #t-online-logo { background: url(/i/logo/de/SF-TOL_DESK.png) no-repeat bottom left; background-size: auto 69px; display: block; position: absolute; top: 76px; left: 11px; height: 23px; width: 166px; } body.countryRef1 header #t-online-logo img { display: none; } header div#AdTopFrameContainer, header div#superbanner { position: absolute; top: 12px; left: 264px; width: 728px; height: 90px; padding: 0; } header div#superbanner .inner { width: 728px; height: 90px; margin: 0; } body header { height: auto !important; } header div#AdTopFrameContainer { position: relative; top: auto; left: auto; width: 728px; min-height: 60px; padding: 12px 0 10px 0; margin: 0 0 0 264px; } /* navigation - default for main & sub */ nav { padding: 0; width: 100%; min-width: 1395px; z-index: 10; } nav ul { list-style: none; padding: 0 405px 0 10px; /* 0 (240px + 165px) 0 10px */ margin: 0 auto; width: 1395px; /* 1230px + 165px */ -moz-box-sizing: border-box; box-sizing: border-box; } nav.has-subaccounts ul { padding-right: 411px; /* 246px + 165px */ } nav ul li { background: transparent; float: left; padding: 5px 0; margin: 0; } nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:active nav ul li a:hover { display: block; margin: 0; position: relative; border-left: 1px solid transparent; -moz-box-sizing: border-box; box-sizing: border-box; } nav ul li a:hover { text-decoration: none; } nav ul li:first-child a { border-left: 0 none; } nav ul li a i { display: none; } /* active menu item */ nav ul li.active { } nav ul li.active a { } nav ul li.active + li a { } /* navigation - main */ nav.main { background: #0077b3; color: #fff; z-index: 4000; height: inherit; } nav.main * { outline: none; } nav.main ul { position: relative; } nav.main ul li { position: relative; } nav.main ul li:hover { background-color: #1a5d8b; } nav.main ul li a, nav.main ul li a:link, nav.main ul li a:visited, nav.main ul li a:active nav.main ul li a:hover { height: 40px; color: #fff; font-size: 18px; line-height: 40px; padding: 0 14px; border-color: #b3d5e9; } nav.main ul li a em { display: block; position: absolute; top: -3px; right: 2px; background: #ff8d00; color: #fff; font-size: 12px; padding: 3px 6px 3px 5px; line-height: normal; border-radius: 5px; } nav.main ul li a em.values-0 { display: none; } /* active menu item */ nav.main ul li.active { background-color: #fff; } nav.main ul li.active a { color: #000; border-left: 0 none; } nav.main ul li.active + li a { border-left: 0 none; } nav.main ul li a i { position: absolute; left: 10px; top: 0; width: 38px; height: 38px; background-color: #e3e3e3; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 19px; border: 1px solid #e3e3e3; background-position: center center; background-repeat: no-repeat; } /* my page link - has account img */ nav.main ul li.global_topnavi_mypage { } nav.main ul li.global_topnavi_mypage a { padding-left: 60px; max-width: 155px; white-space: nowrap; overflow: hidden; -ms-overflow-x: hidden; /*jjurisic - SF-27857*/ -ms-overflow-y: hidden; /*jjurisic - SF-27857*/ text-overflow: ellipsis; border-left: 0 none; } /* SF-34723 */ .countryRef2.membershipGoldPlus nav.main ul li.global_topnavi_mypage a { max-width: 147px; } nav.main ul li.global_topnavi_mypage a i { display: block; } /* buy gold */ nav.main ul li.global_topnavi_mymembership { float: right; } nav.main ul.focused li.global_topnavi_mymembership:hover { background-color: transparent; } nav.main ul.focused li.personalpane_btn_subaccount > a.action-toggle-userlist > em { display: none; } nav.main ul li.global_topnavi_mymembership a { padding-left: 60px; border-left: 0 none; } nav.main ul li.global_topnavi_mymembership a i { display: block; background-color: #fff; background-image: url(/i/glob/header-new/ico_basic.png); background-size: 38px 38px; background-position: 0 0; border: 0 none; top: 1px; } nav.main ul li.global_topnavi_mymembership a i.gold-member { background-image: url(/i/glob/header-new/ico_gold.png); } nav.main ul li.global_topnavi_mymembership .tooltip.tooltipbig { margin: 0 !important; display: block; top: 35px; filter: alpha(opacity=1); opacity: 1; } nav.main ul li.global_topnavi_mymembership .tooltip.tooltipbig .inner { line-height: normal; color: #333; white-space: nowrap; padding: 23px 5px 12px 15px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } nav.main ul li.global_topnavi_mymembership .tooltip.tooltipbig .inner a { color: #0077b3; display: inline; padding: 0; margin: 0; font-size: inherit; } nav.main ul li.global_topnavi_mymembership .tooltip.tooltipbig .inner a.close { display: none; } /* person search form */ nav.main ul li.personsearch { padding: 5px 0; position: absolute; right: 450px; /* 285px + 165px */ z-index: 100; -webkit-transition: right 0.3s; /* For Safari 3.1 to 6.0 */ transition: right 0.3s; } nav.main.has-subaccounts ul li.personsearch { right: 450px; /* 285px + 165px */ } nav.main ul.focused li.personsearch { right: 405px; /* 240px + 165px */ } nav.main ul li.personsearch:hover { background-color: transparent; } nav.main ul li.personsearch form { margin: 0; padding: 0; position: relative; } nav.main ul li.personsearch form input { height: 40px; width: 125px; margin: 0; border: 2px solid #0077b3; border-radius: 5px; font-size: 17px; color: #666; outline: none; padding: 5px 38px 5px 10px; text-overflow: ellipsis; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.3s; /* For Safari 3.1 to 6.0 */ transition: width 0.3s; } nav.main ul.focused li.personsearch .sayt-field input { width: 320px; } nav.main.has-subaccounts ul.focused li.personsearch .sayt-field input { width: 320px; } /* nav.main ul li.personsearch form input::-webkit-input-placeholder { color: #999; font-size: 17px; } nav.main ul li.personsearch form input:-moz-placeholder { color: #999; font-size: 17px; } nav.main ul li.personsearch form input::-moz-placeholder { color: #999; font-size: 17px; } nav.main ul li.personsearch form input:-ms-input-placeholder { color: #999; font-size: 17px; } */ nav.main ul li.personsearch .sayt-field button { position: absolute; border: 0 none; cursor: pointer; background-color: #e3e3e3; background-image: url(/i/glob/header-new/ico_search.png); background-size: 26px 26px; background-position: center center; background-repeat: no-repeat; height: 36px; width: 35px; top: 2px; right: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } nav.main ul li.personsearch .sayt-field button span { display: none; } /* logout button */ nav.main ul li.personalpane_btn_logout { float: right; padding: 7px 0; margin-left: 148px; } nav.main ul li.personalpane_btn_logout:hover { background-color: transparent; } nav.main ul li.personalpane_btn_logout a { border-left: 0 none; height: 36px; padding: 0; } nav.main ul li.personalpane_btn_logout a span { display: none; } nav.main ul li.personalpane_btn_logout a i { width: 26px; height: 36px; position: relative; display: block; left: 0; top: 0; background-color: transparent; background-image: url(/i/glob/header-new/ico_logout.png); background-size: 26px auto; border-radius: 0; border: 0 none; } nav.main ul li.personalpane_btn_logout a:hover i { background-image: url(/i/glob/header-new/ico_logout_hover.png); } /* subaccount button */ nav.main ul li.personalpane_btn_subaccount { float: right; padding: 7px 0; margin-left: 144px; } nav.main ul li.personalpane_btn_subaccount:hover { background-color: transparent; } nav.main ul li.personalpane_btn_subaccount a { border-left: 0 none; height: 36px; padding: 0; } nav.main ul li.personalpane_btn_subaccount a span { display: none; } nav.main ul li.personalpane_btn_subaccount a i { width: 30px; height: 36px; position: relative; display: block; left: 0; top: 0; background-color: transparent; background-image: url(/i/glob/header-new/ico_subaccount.png); background-size: 30px auto; border-radius: 0; border: 0 none; } nav.main ul li.personalpane_btn_subaccount a:hover i { background-image: url(/i/glob/header-new/ico_subaccount_hover.png); } nav.main ul li.personalpane_btn_subaccount a em { right: -6px; } /* account list */ nav #accountList { position: absolute; top: 50px; right: -2px; left: auto; background-color: #fff; border: 1px solid #ff8d00; border-radius: 5px; padding: 0 10px; z-index: 2001; display: none; zoom: 1; filter: alpha(opacity=0); opacity: 0; -webkit-transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; box-shadow: 1px 2px 7px rgba(0,0,0, 0.5); } nav.show-accountlist #accountList { display: block; filter: alpha(opacity=100); opacity: 1; } nav.has-subaccounts #accountList { right: -8px; } nav #accountList:after { content: ""; display: block; position: absolute; width: 14px; height: 14px; right: 11px; top: -8px; border-top: 1px solid #ff8d00; border-right: 1px solid #ff8d00; background-color: #fff; z-index: 21; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } nav #accountList a.action-closer { position: absolute; top: 0; right: 0; width: 30px; height: 30px; padding: 0; color: silver; background-color: transparent; background-image: url(/i/glob/ic_closeHint.png); background-size: 19px 15px; background-position: right 5px; background-repeat: no-repeat; z-index: 22; } nav #accountList a.action-closer span { display: none; } nav #accountList ul { width: 280px; padding: 0; } nav #accountList ul li { float: none; color: #666; font-size: 17px; border-bottom: 1px solid #e3e3e3; } nav #accountList ul li.current { color: #333; } nav #accountList ul li:last-child { border-bottom: 0 none; } nav #accountList ul li:hover { background-color: transparent; } nav #accountList ul li a, nav #accountList ul li b { display: block; font-size: inherit; color: inherit; padding: 1px 36px 0 0; height: 37px; line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } nav #accountList ul li.current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } nav #accountList ul li.current b { padding-right: 0; display: inline; } nav #accountList ul li:hover a { color: #0077b3; } nav #accountList ul li.logout a { text-align: right; padding-right: 0; color: #0077b3; } nav #accountList ul li em { display: block; right: 0; top: 9px; } /* subaccount login */ nav #accountLogin { width: 280px; display: none; padding: 20px 0; } nav #accountLogin p { color: #333; font-size: 17px; margin: 0 0 15px 0; } nav #accountLogin p.labelAlert { color: #ea1a1a; font-size: 12px; margin: 10px 0 0 0; } nav #accountLogin form { } nav #accountLogin form.in-progress { background-image: url(/i/glob/ic/spinner/ic_loading_big.gif); background-repeat: no-repeat; background-position: center; } nav #accountLogin form .group { position: relative; } nav #accountLogin form.in-progress .group { visibility: hidden; } nav #accountLogin form a { display: inline-block; color: #0077b3; margin: 10px 0 0 0; padding: 0; font-size: 14px; height: auto; line-height: normal; } nav #accountLogin form.in-progress a, nav #accountLogin form.in-progress p { visibility: hidden; } nav #accountLogin form .group label { display: none; } nav #accountLogin form .group input { width: 100%; height: 30px; font-size: 17px; border-radius: 4px; border: 1px solid #999; padding: 2px 115px 2px 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } nav #accountLogin form .group button { position: absolute; display: block; bottom: 0; right: 0; height: 30px; color: #fff; text-align: center; font-weight: normal; padding-left: 10px; padding-right: 10px; margin: 0; background: #ff8d00; border: 0 none; font-size: 16px; border-radius: 4px; padding-top: 1px; padding-bottom: 1px; cursor: pointer; min-width: 80px; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom-left-radius: 0; border-top-left-radius: 0; } nav #accountList.show-login { } nav #accountList.show-login > ul { display: none; } nav #accountList.show-login #accountLogin { display: block; } /* navigation - sub */ nav.sub { background: #fff; color: #000; z-index: 1500; } nav.sub * { outline: none; } nav.sub ul { position: relative; } nav.sub ul li { padding: 4px 0; } nav.sub ul li a, nav.sub ul li a:link, nav.sub ul li a:visited, nav.sub ul li a:active nav.sub ul li a:hover { height: 30px; color: #666; font-size: 17px; line-height: 30px; padding: 0 14px; border-color: #666; } nav.sub ul li:hover { padding-bottom: 0; border-bottom: 4px solid #ff8d00; border-bottom: 4px solid #c66d00; } nav.sub ul li:hover a { color: #000; } /* active menu item */ nav.sub ul li.active { padding-bottom: 0; border-bottom: 4px solid #ff8d00; } nav.sub ul li.active a { padding-right: 15px; color: #000; } nav.sub ul li.active + li a { margin-left: -1px; } nav.sub ul li a em { display: block; position: absolute; top: -3px; right: 2px; background: #ff8d00; color: #fff; font-size: 12px; padding: 2px 4px 2px 4px; line-height: normal; border-radius: 5px; } nav.sub ul li a em.values-0 { display: none; } #sub-nav-sticky-wrapper.is-sticky nav { -moz-box-shadow: 0 3px 5px rgba(0,0,0, 0.2); -webkit-box-shadow: 0 3px 5px rgba(0,0,0, 0.2); box-shadow: 0 3px 5px rgba(0,0,0, 0.2); } #PageWrap { margin-top: 10px; } body { /* background-image: url(https://design.int.stayfriends.de/redesign_2010/frame/searchbox_extended_germany_mesured.png); background-position: top 0px; background-repeat: no-repeat; */ } /* ======================== */ /* device specific styles */ /* ======================== */ body.device-phone, body.device-tablet { width: 1000px; } body.device-phone header, body.device-tablet header { width: 1000px; padding-right: 10px; } body.device-phone nav, body.device-tablet nav { width: 1000px; min-width: 0px; } /* SF-29981 The contact list can be activated per feature config. If active, we need to add some space here. */ body.device-tablet.has-contactList nav { width: 1041px; position: relative; } body.device-phone nav ul, body.device-tablet nav ul { width: 100%; padding-right: 10px; } body.device-phone nav.main ul li.personsearch, body.device-tablet nav.main ul li.personsearch { right: 50px; } body.device-phone nav.main ul.focused li.personsearch, body.device-tablet nav.main ul.focused li.personsearch { right: 10px; } body.device-phone div#PageWrap, body.device-tablet div#PageWrap { width: 1000px; } /* SF-29981 The contact list can be activated per feature config. If active, we need to add some space here. */ body.device-tablet.has-contactList #PageWrap { width: 1041px; } body.device-tablet nav.main.has-subaccounts ul li.personsearch { } body.device-tablet nav.main ul.focused li.personsearch { } /* ======================== */ /* media queries for retina */ /* ======================== */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { nav.main ul li.global_topnavi_mymembership a i { background-image: url(/i/glob/header-new/ico_basic@2x.png); } nav.main ul li.global_topnavi_mymembership a i.gold-member { background-image: url(/i/glob/header-new/ico_gold@2x.png); } nav.main ul li.personalpane_btn_logout a i { background-image: url(/i/glob/header-new/ico_logout@2x.png); } nav.main ul li.personalpane_btn_logout a:hover i { background-image: url(/i/glob/header-new/ico_logout_hover@2x.png); } nav.main ul li.personalpane_btn_subaccount a i { background-image: url(/i/glob/header-new/ico_subaccount@2x.png); } nav.main ul li.personalpane_btn_subaccount a:hover i { background-image: url(/i/glob/header-new/ico_subaccount_hover@2x.png); } nav.main ul li.personsearch .sayt-field button { background-image: url(/i/glob/header-new/ico_search@2x.png); } } /* ======================== */ /* goldAdvantagesTooltip */ /* ======================== */ .goldAdvantagesTooltip { display: none; padding: 10px 10px 14px 10px; max-height: 210px; width: 300px; z-index: 5000; } .goldAdvantagesTooltip .sf-tooltip-content { position: relative; } .goldAdvantagesTooltip .close { background-image: url(/i/glob/ic/ic_close_tooltip.png); background-repeat: no-repeat; cursor: pointer; position: absolute; right: -5px; top: -5px; height: 10px; width: 10px; } .goldAdvantagesTooltip .offer { font-weight: bold; padding: 5px 15px 10px 15px; text-align: center; } .goldAdvantagesTooltip .offer h2 { margin-bottom: 8px; } .goldAdvantagesTooltip .offer .details { font-size: 12px; color: #666; font-weight: normal; } .goldAdvantagesTooltip h2.gold { background-image: url(/i/glob/ic/ic_crown.png); background-repeat: no-repeat; font-weight: bold; margin: 5px 0 10px; padding-left: 40px; } .goldAdvantagesTooltip h2 .gold { color: #FFB200; } .goldAdvantagesTooltip .advantages { margin-bottom: 10px; } .goldAdvantagesTooltip .advantages li { background-image: none; background-position: 6px 3px; background-repeat: no-repeat; padding: 2px 0 3px 40px; margin: 0; } .goldAdvantagesTooltip .advantages .more { font-weight: bold; } .goldAdvantagesTooltip .advantages li.message { background-image: url(/i/glob/ic/ic_unread_mail.png); } .goldAdvantagesTooltip .advantages li.profileVisit { background-image: url(/i/glob/ic/ic_user.png); } .goldAdvantagesTooltip .advantages li.iru { background-image: url(/i/glob/ic/ic_memoirs.png); } .goldAdvantagesTooltip .btnBigDefault { margin: 0 0 0 35px; } .goldAdvantagesTooltip .sf-tooltip-nose-up { top: -12px; left: 43%; } /* Overwrite bubble position */ nav.main ul li.global_topnavi_mymembership a em { right: auto; left: 40px; }