The rem font-size unit is similar to em,
only instead of cascading it's always relative to the root (html) element.
This is pretty good supported by modern browser.
For IE 8 and down a px fallbacks is provided.
To set the font-size, just put in your pixel value from the design.
@include font-size(15)
Styleguide 7.2.1 font-size */ /* * This mixin ensures cross browser opacity all the way down to Internet Explorer 5. */ /* word-wrapCross browser solution for doing word wrapping using CSS.
Working in IE 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+
See: https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
@include word-wrap()
Styleguide 7.2.2 word-wrap */ body * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* Utils Description Styleguide 7.0 Base Utils */ /* Extends Description Styleguide 7.1 Extends */ /* .clearfixEasily clear floats by adding .clearfix to the parent element. When a floated element is within a container box, it does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. The clearfix is one method to fix this problem.
Based on Nocolas Gallgaer mircro clearfix
Compatible for modern browsers that supporting the use of both the :before and : after pseudo-elements.
Markup: Styleguide 7.1.1 .clearfix */ .clearfix:before, div.newsletterSubscription form#newsletterSubscriptionForm div.checkbox span:before, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li span.channel-heading:before, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li span.channel.description:before, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li:before, .list.search-results.tiles:before, .nav-breadcrumb:before, .listview .pagination:before, .cf:before, .directContact:before, .contactDetails:before, .container:before, .teaser-row:before, #main-content:before, #content:before, #header #header-content:before, .form-horizontal .form-group:before, .loginForm li:before, .circular-list:before, .circular-group:before, .event-form li:before, dl.list:before, .list.evaluation li:before, .list-news > li.list2Col:before, .list.search-results > li.list2Col:before, .list.search-results > li.list3Col:before, .price-search form:before, .text-search form:before, #content .teaserBox .teaserStandard:before, #content .teaserBox .teaserSpecial:before, .teaserStandard:before, .teaserSpecial:before, .teaserBig:before, .linkedLogoMosaic:before, .sv-listing-partner > .logos:before, .clearfix:after, div.newsletterSubscription form#newsletterSubscriptionForm div.checkbox span:after, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li span.channel-heading:after, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li span.channel.description:after, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li:after, .list.search-results.tiles:after, .nav-breadcrumb:after, .listview .pagination:after, .cf:after, .directContact:after, .contactDetails:after, .container:after, .teaser-row:after, #main-content:after, #content:after, #header #header-content:after, .form-horizontal .form-group:after, .loginForm li:after, .circular-list:after, .circular-group:after, .event-form li:after, dl.list:after, .list.evaluation li:after, .list-news > li.list2Col:after, .list.search-results > li.list2Col:after, .list.search-results > li.list3Col:after, .price-search form:after, .text-search form:after, #content .teaserBox .teaserStandard:after, #content .teaserBox .teaserSpecial:after, .teaserStandard:after, .teaserSpecial:after, .teaserBig:after, .linkedLogoMosaic:after, .sv-listing-partner > .logos:after { content: ' '; display: table; } .clearfix:after, div.newsletterSubscription form#newsletterSubscriptionForm div.checkbox span:after, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li span.channel-heading:after, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li span.channel.description:after, div.newsletterSubscription form#newsletterSubscriptionForm fieldset ul li:after, .list.search-results.tiles:after, .nav-breadcrumb:after, .listview .pagination:after, .cf:after, .directContact:after, .contactDetails:after, .container:after, .teaser-row:after, #main-content:after, #content:after, #header #header-content:after, .form-horizontal .form-group:after, .loginForm li:after, .circular-list:after, .circular-group:after, .event-form li:after, dl.list:after, .list.evaluation li:after, .list-news > li.list2Col:after, .list.search-results > li.list2Col:after, .list.search-results > li.list3Col:after, .price-search form:after, .text-search form:after, #content .teaserBox .teaserStandard:after, #content .teaserBox .teaserSpecial:after, .teaserStandard:after, .teaserSpecial:after, .teaserBig:after, .linkedLogoMosaic:after, .sv-listing-partner > .logos:after { clear: both; } /* .hidden-accessibleHides content visually, but leaves it available to assistive technologies.
Compatible for modern browsers that supporting the use of both the :before and : after pseudo-elements.
Markup: Styleguide 7.1.2 .hidden-accessible */ .hidden, .aural, .hidden-accessible, .nav-page button .label, .pagination .mediaListSwitcher .viewmode, ul.nav-socials a > span, .calendar .nav-month .label, .lightbox-image > a[rel='lightbox'] .zoom span, .navigator .navigator-item .navigator-controls .navigator-back span, .navigator .navigator-item .navigator-controls .navigator-restart span { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); position: absolute; } .icon, .fancybox-prev span, .fancybox-next span, .event-form .buttons .linkButton.reset .asButton, ul.rte--list > li, #nav-primary > li > ul > li a, #subNavigation li a:before, .accordion .title, .ui-datepicker .ui-datepicker-header .ui-datepicker-next, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev, .quickGuide.dropdown > .dropdown-toggle { font-family: inherit; } .icon:after, .fancybox-prev span:after, .fancybox-next span:after, .icon:before, .fancybox-prev span:before, .fancybox-next span:before, .event-form .buttons .linkButton.reset .asButton:after, ul.rte--list > li:after, #nav-primary > li > ul > li a:after, .accordion .title:after, .ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after, .quickGuide.dropdown > .dropdown-toggle:after, .event-form .buttons .linkButton.reset .asButton:before, ul.rte--list > li:before, #nav-primary > li > ul > li a:before, #subNavigation li a:before, .accordion .title:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before, .quickGuide.dropdown > .dropdown-toggle:before { font-size: 22px; font-size: 1.375rem; color: #b2b7bb; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-left:before, .txt-collection .paging a.prev:before { content: '\e600'; } .icon-right:before, a.icon.document:before, #nav-primary > li > ul > li a:before, #subNavigation li a:before, .facets .container .facet > h3.toggleBtn.close .icon-down:before { content: '\e601'; } .icon-up:before { content: '\e602'; } .icon-down:before, #subNavigation li.has-submenu > a.active:before, #subNavigation li.has-submenu > a.active-target:before, #subNavigation li.has-submenu > a.active_target:before, .sitemap h3.ui-state-active:before { content: '\e603'; } .icon-calendar-arrow-left:before, .fancybox-prev span:before, .calendar .nav-month .icon.icon-prev:before, .calendar .nav-month .fancybox-prev span.icon-prev:before, .fancybox-prev .calendar .nav-month span.icon-prev:before, .calendar .nav-month .fancybox-next span.icon-prev:before, .fancybox-next .calendar .nav-month span.icon-prev:before, .event-gallery .slider-controler .icon-left:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { content: '\e600'; } .icon-calendar-arrow-right:before, .fancybox-next span:before, .accordion .title:before, .calendar .nav-month .icon.icon-next:before, .calendar .nav-month .fancybox-prev span.icon-next:before, .fancybox-prev .calendar .nav-month span.icon-next:before, .calendar .nav-month .fancybox-next span.icon-next:before, .fancybox-next .calendar .nav-month span.icon-next:before, .event-gallery .slider-controler .icon-right:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before { content: '\e601'; } .icon-calendar-arrow-up:before { content: '\e602'; } .icon-calendar-arrow-down:before, .accordion .title.ui-state-active:before { content: '\e603'; } .icon-play:before, .icon-arrow-right:before { content: '\e608'; } .icon-arrow-down:before { content: '\e609'; } .icon-arrow-up:before { content: '\e60a'; } .icon-facebook:before, ul.footer-nav-socials a.icon_facebook:before { content: '\e60b'; } .icon-xing:before, ul.footer-nav-socials a.icon_xing:before { content: '\e60c'; } .icon-google:before, ul.footer-nav-socials a.icon_google:before { content: '\e60d'; } .icon-linkedin:before, .icon-linkedIn:before, ul.footer-nav-socials a.icon_linkedIn:before { content: '\e60e'; } .icon-twitter:before, ul.footer-nav-socials a.icon_twitter:before { content: '\e60f'; font-size: 18px; } .icon-youtube:before, ul.footer-nav-socials a.icon_youtube:before { content: '\ea9d'; } .icon-extern_link:before { content: '\e903'; } .icon-instagram:before, ul.footer-nav-socials a.icon_instagram:before { content: '\e904'; } .icon-calendar:before { content: '\e610'; } .icon-map:before { content: '\e611'; } .icon-reset:before, .event-form .buttons .linkButton.reset .asButton:before { content: '\e612'; } .icon-search:before { content: '\e613'; } .icon-forward:before, a.icon.link:before { content: '\e614'; } .icon-print:before { content: '\e615'; } .icon-pdf:before { content: '\e616'; } .icon-rss:before { content: '\e617'; } .icon-dot:before, ul.rte--list > li:before { content: '\e618'; } .icon-menu:before { content: '\e619'; } .icon-mail:before { content: '\e61a'; } .icon-phone:before { content: '\e61b'; } .icon-time:before { content: '\e61c'; } .icon-web:before { content: '\e61d'; } .icon-list:before { content: '\e61e'; } .icon-tiles:before { content: '\e61f'; } .icon-photo:before { content: '\e620'; } .icon-video:before, a.icon.video:before { content: '\e621'; } .icon-off:before { content: '\e622'; } .icon-on:before { content: '\e623'; } .icon-pause:before { content: '\e624'; } .icon-compressed_file:before, a.icon.download_compressed:before { content: '\e625'; } .icon-csv_file:before, a.icon.download_csv:before { content: '\e626'; } .icon-excel_file:before, a.icon.download_excel:before { content: '\e627'; } .icon-fax:before { content: '\e628'; } .icon-pdf_file:before, a.icon.download_pdf:before { content: '\e629'; } .icon-text_file:before, a.icon.download_txt:before, a.icon.download_docm:before, a.icon.download_docx:before, a.icon.download_word:before { content: '\e62a'; } .icon-login:before { content: '\e62b'; } .icon-register:before { content: '\e62c'; } .icon-expand:before { content: '\e901'; } .icon-close:before { content: '\e900'; } .icon-info:before { content: '\e902'; } .icon-left-after:after { content: '\e600'; } .icon-right-after:after, .txt-collection .paging a.next:after { content: '\e601'; } .icon-up-after:after { content: '\e602'; } .icon-down-after:after { content: '\e603'; } .icon-reset-after:after { content: '\e612'; } .icon-rss-after:after { content: '\e617'; } .icon-pdf-after:after { content: '\e616'; } .icon-pdf_file-after:after { content: '\e629'; } .icon-calendar-arrow-down-after:after, .quickGuide.dropdown > .dropdown-toggle:after { content: '\e607'; } .icon-none:after, .icon-none:before { content: ''; } #header #branding .label { font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; border: 0; display: block; text-indent: -100%; white-space: nowrap; overflow: hidden; } .mwf-upload-actions button, .btn, .mwf-form [type='button'], .mwf-form [type='submit'], input[type='submit'], .event-registration a, .calendar table.month a, .calendar table.month button, .lightbox-image > a[rel='lightbox'], #page-functions .dropdown .dropdown-menu a:hover, #page-functions .dropdown .dropdown-menu a:focus, #page-functions .dropdown .dropdown-menu a:active, .nav-meta .dropdown .dropdown-menu a:hover, .nav-meta .dropdown .dropdown-menu a:focus, .nav-meta .dropdown .dropdown-menu a:active, .quickGuide.dropdown > .dropdown-menu a:hover, .quickGuide.dropdown > .dropdown-menu a:focus, .quickGuide.dropdown > .dropdown-menu a:active { transition-property: all; transition-duration: 0.35s; -webkit-transition-property: all; -webkit-transition-duration: 0.35s; -moz-transition-property: all; -moz-transition-duration: 0.35s; -ms-transition-property: all; -ms-transition-duration: 0.35s; -o-transition-property: all; -o-transition-duration: 0.35s; } #devinfo { position: absolute; } #ie_clearing { display: none; } .clear { clear: both; } .fll { float: left; } .flr { float: right; } .emphasized { font-size: 1.6em; } .center { text-align: center; } .sv { display: none !important; } .ib { display: inline-block; } .skipLinks { left: -1200px; position: absolute; top: -1200px; z-index: 1000; } .w_oneThird { width: 33.3%; } .ma0 { margin: 0 !important; } .mt5 { margin-top: 5px !important; } .mt15 { margin-top: 15px !important; } .mr6 { margin-right: 6px; } .mb10 { margin-bottom: 10px; } .noBorder { border: none !important; padding: 0 !important; } .print, #print-preview { display: none; } .date { font-size: 0.846em; } /** Richtext Formats **/ .align--right { text-align: right; } .align--center { text-align: center; } body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0 none; vertical-align: top; } address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal; } li { list-style: none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } abbr, acronym { border: 0; font-variant: normal; } button, input, textarea, select, .quickGuide.dropdown > .dropdown-toggle, option { font-family: inherit; font-size: inherit; font-weight: inherit; } :focus { outline: 0 none; } option, select, .quickGuide.dropdown > .dropdown-toggle { /*font: 1em/1.5 Verdana, Geneva, Arial, Helvetica, sans-serif;*/ } /* Page LayoutThe layout of the Xetra and Cash Market websites as well as of the Primary Market subsite is based on one overall frame which serves as a container for the relevant content. This frame provides a common structure for each view on all entities to create a corporate identity and enable better user orientation. The homepage layout is characterized by one big content area (covering a width of 980px) Subpages are based on a 2-column-layout, which contains a small column for sub navigation, facets and contacts on the left and a wider column for main content on the right. By applying a generic modular architecture approach, the appearance of each website can easily be modified according to strategic demands or specific content needs. The wide column can, for example, be subdivided with small or large modules in inner columns.
Styleguide 3.0 Basic Page Layout */ /* Grid Largenumber of columns: 8
column width: 90px
column margins: 30px
container margin: 25px
The entities’ homepages are based upon the grids below. The width of the modules will be configured according to their content and relevance.
The subpages are based on the grid shown below. In contrast to the homepage, subpages – including all doorpages - contain the sub navigation on the left margin column. Most of the content elements can be inserted on doorpages as well as on the homepages, for details please refer to the overview in chapter 6. As with the homepage, module widths for doorpages will be defined according to their content and relevance.
Markup:TODO
Markup: TODO Styleguide 5.5 Forms */ form { font-size: 15px; font-size: 0.9375rem; } label { font-size: 14px; font-size: 0.875rem; color: #666f78; display: inline-block; cursor: pointer; } legend { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; width: 100%; color: #909f00; font-size: 18px; font-size: 1.125rem; display: block; border-bottom: 1px solid #ebeced; padding-bottom: 15px; margin-bottom: 15px; line-height: 40px; padding: 0; margin-bottom: 20px; } fieldset + fieldset { margin-top: 25px; } input[type='radio'], input[type='checkbox'] { margin: 3px 0 0; width: 13px; height: 13px; line-height: normal; } textarea { max-width: 100%; } input[type='text'] { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .form-inline .form-group { display: inline-block; margin: 0 15px 15px 0; } .form-horizontal label { padding-top: 8px; } .form-horizontal .form-group { display: block; margin: 0 -15px 15px -15px; } .form-horizontal .form-group input, .form-horizontal .form-group select, .form-horizontal .form-group .quickGuide.dropdown > .dropdown-toggle, .form-horizontal .form-group textarea { width: 100%; } .form-horizontal .form-group input[type='checkbox'], .form-horizontal .form-group input[type='radio'], .form-horizontal .form-group input[type='submit'] { width: auto; } .form-horizontal .accordion .channel.description { margin-bottom: 10px; } .mandatory { font-size: 14px; font-size: 0.875rem; color: #909f00; } .mandatoryHint { color: #666f78; padding: 0 10px; } fieldset > legend > .mandatory { float: right; text-align: right; } fieldset > legend > .mandatory .mandatoryHint { padding-right: 0; } .notation { font-size: 14px; font-size: 0.875rem; color: #d14513; display: block; padding: 0 0.5em; margin: 1em 0; } label.error { color: #d14513; } input.error, select.error, .quickGuide.dropdown > .error.dropdown-toggle, textarea.error { background-color: #ffebeb; border: 1px solid #d14513; } .checkbox, .radio { position: relative; display: block; } .checkbox label, .radio label { min-height: 20px; padding-left: 20px; padding-right: 10px; padding-top: 0; margin-bottom: 0; color: #181813; } .checkbox input, .radio input { position: absolute; margin-left: -20px; } select, .quickGuide.dropdown > .dropdown-toggle { border: none; } input[type='button'], input[type='reset'], input[type='submit'], input[type='text'], input[type='date'], input[type='email'], input[type='password'], input[type='search'], input[type='time'], input[type='url'], select, .quickGuide.dropdown > .dropdown-toggle, textarea { background: #fff; border: 1px solid #dbdde0; } input[type='button'], input[type='reset'], input[type='submit'], input[type='text'], input[type='date'], input[type='email'], input[type='password'], input[type='search'], input[type='time'], input[type='url'], input.input_txt, textarea, select, .quickGuide.dropdown > .dropdown-toggle { font-family: "newsGothic_roman", Arial, Verdana, Helvetica, sans-serif; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; padding: 6px 12px; } #contactForm select, #contactForm .quickGuide.dropdown > .dropdown-toggle { -webkit-appearance: menulist; } .icon.icon-reset, .fancybox-prev span.icon-reset, .fancybox-next span.icon-reset { position: relative; vertical-align: baseline; padding-left: 22px; } .icon.icon-reset:before, .fancybox-prev span.icon-reset:before, .fancybox-next span.icon-reset:before { font-size: 20px; font-size: 1.25rem; margin-top: -1px; position: absolute; left: 0; } .custom-select { z-index: 1; position: relative; padding: 0; width: 100%; background-color: #fff; } .custom-select:before { z-index: -1; position: absolute; top: 0; right: 0; width: 17px; height: 100%; text-align: center; } .custom-select select, .custom-select .quickGuide.dropdown > .dropdown-toggle { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; display: block; width: 100%; background-color: transparent; border: 0 none; box-shadow: none; cursor: pointer; text-indent: 0.01px; text-overflow: ''; } .custom-select select::-ms-expand, .custom-select .quickGuide.dropdown > .dropdown-toggle::-ms-expand { display: none; /* to ie 10 */ } .custom-select select:focus, .custom-select .quickGuide.dropdown > .dropdown-toggle:focus { outline: none; } /* little trick for custom select elements in mozilla firefox 17/06/2014 @rodrigoludgero */ /* pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:any */ .ui-datepicker-trigger { position: relative; right: 22px; top: 19px; cursor: pointer; } .standardForm input[type='checkbox'], .standardForm input[type='radio'] { position: relative; top: 2px; margin-right: 5px; } .standardForm .mandatoryHint { display: block; margin-bottom: 25px; } .loginForm li + li { margin-top: 1em; } .loginForm .input_btn { margin-left: 1em; } .accordion.ui-accordion .ui-accordion-content.circular-content { padding: 0 0 25px; } .circular-list-item { margin-bottom: 10px; } .circular-list-item:last-child { margin-bottom: 0; } .standardForm .circular-group input[type='checkbox'] { top: -1px; } .circular-input { float: left; } .circular-label { margin-left: 8px; font-size: 15px; float: left; } .form-horizontal .circular-label { padding-top: 0; } .circular-info-toggle { margin-left: -1px; width: 16px; height: 16px; float: right; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAZtJREFUOI2Vk71rU3EUhp9zbhwLUQRtIYhjHBwFO0WTS/wDkgyiiBSkm1Kbi2PBqbmlrZ06+EWHIgkighDNB2qHuugizmqnju2SlnLJ7zjEamI+MGc8530fzjnwCv+WvziF01uoZQEwFJEI+IbIBrX5L91y6TFnSg+A8+CtczLxlUqhDUB2+RQuuo3pHbB3NA7uwYL7C8iXPfZ/PsLxhmbwtm+rP2VCJnyMMEE9KAAoAHs7a8DH0WYAMRrBDIbDX5rtAK4unUNIUA8q/f8ofcAvrfb1VWbAAlIrcUXdLE4eDtl4gajdD6gVWxhPOBHlFJFpmvc/DwGcxotNDpwprzFSCsRAbPDJLgdcHjiDH8BZxUyHCEaXa8cQnCIckS974xMkCfJdQbbZ27kyPkCvYVQVa6+D3R3L6y9OIXad3Va100iHc/il/4dkwvf44Q3ozoIfPsdsi0bwdKgxvXoGjZ7haNAsLvcC4HeYJAW2SStW4dPcYSedchHlEshNIKBefHVs6QUc34eXxtwFkCRicZADHC/xeEGt2OqW/wL7p4hWoCx/+QAAAABJRU5ErkJggg==); background-repeat: no-repeat; cursor: pointer; } .circular-info-toggle span { display: none; } .circular-info-text { margin: 12px 0 18px 26px; display: none; } /* ** 3.6 Form Elements ** */ .event-form li { margin-bottom: 10px; } .event-form .formColLeft { width: 25%; float: left; } .event-form .formColRight { width: 70%; float: right; } .event-form .notation { font-size: 14px; font-size: 0.875rem; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; color: #d14513; display: block; margin: 0.2em 0 0.5em 0; } .event-form input[type='text'], .event-form select, .event-form .quickGuide.dropdown > .dropdown-toggle, .event-form textarea { width: 100%; } .event-form .buttons { text-align: right; } .event-form .buttons > * { margin-left: 20px; } /* ** 3.6 Form Elements ** */ .search-form { background: #f2f2ee; position: relative; padding: 20px 0px 5px 18px; font-family: "newsGothic_roman", Arial, Verdana, Helvetica, sans-serif; margin: 0 0 30px; } .search-form .form-group > * { vertical-align: middle; } .search-form .form-group input#searchfieldDetail { width: 280px; } .search-form .form-group input.datepicker { width: 120px; padding: 6px 25px 6px 8px; background: #fff url(data:image/gif;base64,R0lGODlhEgASAKIAAN3g4fr7+9nb3cDFyMXJzOzt7v///7K3uyH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUY3MzY5M0YxMzIwMTFFNDg3QTc4N0MwMDg4QjFDRkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUY3MzY5NDAxMzIwMTFFNDg3QTc4N0MwMDg4QjFDRkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5RjczNjkzRDEzMjAxMUU0ODdBNzg3QzAwODhCMUNGRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5RjczNjkzRTEzMjAxMUU0ODdBNzg3QzAwODhCMUNGRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAASABIAAANVaLrcPKcYcqolppyhqqRWhWlHdwgBFG6BUJlrbMFyTNehCRTawEM8wMvg6WAmpcywSDxSFKQbbjldmSRNxVOZZB6cySjxsOv9IgVht5ozqNgch7yRAAA7) no-repeat 92% 50%; cursor: pointer; } .search-form .form-group input.identifier { width: 562px; } .search-form .form-group input.order-size { width: 94px; } .search-form .form-group .form-label { width: 90px; } .search-form a.icon-reset { font-size: 14px; font-size: 0.875rem; min-width: 150px; display: inline-block; } .search-form button[type='submit'] { position: absolute; right: 20px; top: 21px; width: 87px; } .searchList label.nojs { padding: 0 10px 0 20px; } .searchList .onecolumn .input_txt.wideWidth { width: 100%; } .searchList .onecolumn .input_txt.smallWidth { width: 130px; } .searchList .onecolumn .input_txt.datepicker { font-size: 1em; } .searchList .input_btn, .searchList .linkButton { float: right; margin-left: 10px; } .searchList .box .container { margin: 0px; } /* Contact FormThe contact form is available from the contact list view, located in the meta navigation under “Contact”
Markup:The News List displays the most recent news items or articles. Content other than latest information is also possible. The lists are generated automatically and can be subscribed to by RSS.
Markup: Styleguide 3.4. Link List */ .list-links a { color: #747471; } .list-links a:hover { color: #909f00; } .list-links a.icon span { line-height: 1.4; } .list-links li { padding: 6px 0 5px; } .list-links li + li { border-top: 1px solid #ebeced; } .list-links .list-links-table { display: table; width: 100%; } .list-links .list-links-table .meta-col { display: table-cell; width: 20%; border: none; font-size: 0.8125rem; } .list-links .list-links-table .content-col { display: table-cell; width: 80%; border: none; } .list-links .list-links-table .content-col a { padding: 0; } .list-links .list-links-table .content-col a:before { content: ''; } .list-links .list-links-table .content-col .teaser-text { margin: 5px 0 0 0px; color: #747471; font-size: 0.8125rem; } /* View TypesThe following chapter defines the view types which will be implemented for the new websites. In general, all views use a common basic structure and layout, differentiated by varying design elements. This ensures a consistent overall appearance for all websites (deutsche-boerse-cash-market.com, deutsche-boerse-cash-market.com/primarymarket, xetra.com) while preserving the individual identity of each entity. By using a modular approach, different content elements can easily be displayed on different page types without deviating from the overall design guidelines. Styleguide 5.0 View Types */ /* List Views
List views provide a concentrated presentation of homogenous documents concerning one topic, e.g. press releases. Lists are based on faceted search technology, providing information by applying multiple filters.
Styleguide 5.4 List Views */ /* List View: MediaThe media list is displayed in a special appearance: Videos and pictures are presented with enlarged thumbnails in a tile view. By the respective icon, users can also switch to the standard list view. Furthermore, animated information graphics could also be an appropriate media type for content more difficult to understand. The list is default sorted by date descending, so the most recent document is the first entry. Moreover, the user can sort by date ascending, alphabetical order (ascending or descending) or relevance.
Styleguide 5.4.12 List View: Media */ .list.search-results.tiles > li { width: 33.3332%; float: left; padding-bottom: 22px; margin-top: 25px; padding-left: 16px; padding-right: 0; } .list.search-results.tiles > li:first-child { padding-right: 16px; padding-left: 0; } .list.search-results.tiles > li + li { padding-left: 8px; padding-right: 8px; } .list.search-results.tiles > li:last-child { padding-left: 16px; padding-right: 0; } .list.search-results.tiles > li .contentCol { width: 100%; padding-top: 0; } .list.search-results.tiles > li .contentCol h3 { margin-bottom: 21px; } .list.search-results.tiles > li .contentCol a { display: block; } .list.search-results.tiles > li img { max-width: 100%; } .list.search-results.tiles > li + li { border-top: 0 none; } .list.search-results.tiles > li + li .contentCol, .list.search-results.tiles > li + li .mediaCol { border-top: 0 none; } .list.search-results.tiles .date { margin-top: 14px; } .search-results.tiles + .list.search-results.tiles { border-top: 1px solid #ebeced; } .search-results.tiles.last li { padding-bottom: 0; } .list.evaluation li { margin-top: 1em; } .list.evaluation li.head { font-weight: bold; } .list.evaluation .titleCol { float: left; width: 58%; } .list.evaluation .titleCol p { padding-right: 10px; } .list.evaluation .statusCol { float: left; width: 12%; } .list.evaluation .linksCol { float: left; width: 30%; } /* News ListThe News List displays the most recent news items or articles. Content other than latest information is also possible. The lists are generated automatically and can be subscribed to by RSS.
Markup:The News List displays the most recent news items or articles. Content other than latest information is also possible. The lists are generated automatically and can be subscribed to by RSS.
Markup:Several navigation elements are provided, distinguished by means of entity characteristics as well as content orientation.
Styleguide 2.0 Navigation Elements */ .nav-breadcrumb > li { display: inline; } /* Main NavigationThe main navigation is always displayed horizontally within the header at the top of each page, providing access to high priority content.
On mouse over, a layer displaying the second level navigation opens, in order to provide access to deeper navigation levels easily.
The search elements – Navigator, text search, price search - (see chapter 2.4 – Search).are positioned in line with the main navigation.
If JavaScript is disabled or if users visit the websites via tablet or smartphone, the layer is not available.
Markup: Styleguide 2.1 Main Navigation */ /* Primary Navigation / Main Navigation * ========================================================================== */ #nav-primary { line-height: 1; background-color: #0c519e; } #nav-primary a { display: block; } #nav-primary a:hover, #nav-primary a:active, #nav-primary a:focus { text-decoration: none; } #nav-primary li > a { color: #b2c2d6; } #nav-primary li > a:hover { color: #fff; } #nav-primary li > a:before, #nav-primary li > a:after { color: #6586ad; } #nav-primary li > a:hover:before, #nav-primary li > a:hover:after { color: #a4b200; } #nav-primary li.active > a, #nav-primary li.open > a { color: #fff; } #nav-primary li.active > a:before, #nav-primary li.active > a:after, #nav-primary li.open > a:before, #nav-primary li.open > a:after { color: #a4b200; } #nav-primary li ul { padding: 14px 0 35px; } #nav-primary > li { position: relative; z-index: 11; } #nav-primary > li > a { font-size: 16px; font-size: 1rem; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } #nav-primary > li > ul { font-size: 17px; font-size: 1.0625rem; background: #0c519e; } #nav-primary > li > ul > li { background: transparent; padding: 0 0 0 21px; } #nav-primary > li > ul > li + li > a { border-top: 1px solid #194a85; } #nav-primary > li > ul > li a { color: #b2c2d6; padding: 12px 0; margin-left: 20px; position: relative; } #nav-primary > li > ul > li a:hover { color: #fff; } #nav-primary > li > ul > li a:before, #nav-primary > li > ul > li a:after { color: #6586ad; } #nav-primary > li > ul > li a:hover:before, #nav-primary > li > ul > li a:hover:after { color: #a4b200; } #nav-primary > li > ul > li a:before { font-size: 22px; font-size: 1.375rem; position: absolute; left: -25px; margin-top: -2px; } #nav-primary > li > ul ul { font-size: 15px; font-size: 0.9375rem; margin-left: 20px; } /* Primary Navigation Opener / Main Navigation Opener * Burger Icon (used for medium and small versions) * ========================================================================== */ #nav-primary-wrapper { line-height: 1; } #nav-primary-wrapper.open .dropdown-toggle { border-color: #0c519e; } #nav-primary-wrapper .dropdown-toggle { border-bottom: 5px solid transparent; padding: 17px 15px 15px 22px; } #nav-primary-wrapper .dropdown-toggle a { font-size: 16px; font-size: 1rem; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; padding-left: 22px; } #nav-primary-wrapper .dropdown-toggle a:before { font-size: 24px; font-size: 1.5rem; line-height: 1; bottom: 1px; left: -4px; position: absolute; } #nav-primary-wrapper .dropdown-toggle a span { text-decoration: none; } /* Sub NavigationSub navigation appears in a column on the left hand side of all views except the homepages. The first level node is displayed at the top of the column, with second level nodes listed beneath. These can be expanded to show further navigation levels. In order to ensure user orientation and a clear design, a maximum of four navigation levels will be implemented. If node names are longer than one row, they wrap automatically at the nearest space. If, for example, a row has a width of 20 characters, the sentence “ETF Exchange Traded Funds” would be split across two lines, the split occurring after “Traded”. Where the length of a word exceeds the width of a row, this automatic wrapping is not possible as there are no spaces. In these cases it can be manually wrapped by editorial staff. The manual wrap is created using a soft hyphen “”. Furthermore, LinkedIn, Xing, Twitter and facebook icons link to the Xetra or Cash Market social media presence. The set of available social media icons needs to be generated by ]init[. The list of the mentioned social media icons can be freely editored via Core Media and extended or reduced on demand.
Styleguide 2.2 Sub Navigation */ #subNavigation { font-size: 15px; font-size: 0.9375rem; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; } #subNavigation.box .container { background: none; border: none; } #subNavigation h3 { color: #595956; margin-bottom: 10px; } #subNavigation li { margin-left: 14px; } #subNavigation li + li { border-top: 1px solid #ebeced; } #subNavigation li a { color: #5d5d5a; display: block; padding: 7px 0; word-wrap: break-word; } #subNavigation li a:hover, #subNavigation li a:active, #subNavigation li a:focus { text-decoration: none; } #subNavigation li a.active, #subNavigation li a.active-target, #subNavigation li a.active_target { color: #7c8b00; } #subNavigation li a.active:before, #subNavigation li a.active-target:before, #subNavigation li a.active_target:before { color: #7c8b00; } #subNavigation li a:hover, #subNavigation li a:focus { color: #7c8b00; } #subNavigation li a:hover:before, #subNavigation li a:focus:before { color: #7c8b00; } #subNavigation li a:before { font-size: 22px; font-size: 1.375rem; color: #b2b7bb; position: absolute; margin-left: -23px; } #subNavigation li ul { padding: 4px 0 10px; margin-bottom: -1px; z-index: 1; background: #fff; } /* Meta NavigationThe meta navigation is positioned in the header and footer area of the page. Its position and content are fixed and stay the same on all views. The meta navigation contains links (e.g. contact or log-in to Member Section), dropdown menus (e.g. the overall language switch). The meta navigation does not contain search elements. Location, date and time are displayed throughout the whole website.
Styleguide 2.3 Meta Navigation */ ul.nav-meta { font-size: 13px; font-size: 0.8125rem; } ul.nav-meta > li { display: inline-block; padding-left: 15px; } ul.nav-meta > li.first, ul.nav-meta > li:first-child { padding-left: 0; } ul.nav-meta > li > a { padding: 5px 0 7px 0; display: inline-block; } ul.nav-meta > li.dropdown > a { padding-right: 19px; } ul.nav-meta > li.dropdown > a > span { white-space: nowrap; } ul.nav-meta > li.dropdown > a:after { position: absolute; right: -4px; top: 2px; } ul.nav-meta.groupWideMetaNav a { color: #656e77; } ul.nav-meta.groupWideMetaNav a:hover { color: #909f00; } ul.nav-meta .dropdown { position: relative; } .current-datetime { font-size: 13px; font-size: 0.8125rem; color: #656e77; padding: 0 0 7px 0; } /* SearchThe meta navigation is positioned in the header and footer area of the page. Its position and content are fixed and stay the same on all views. The meta navigation contains links (e.g. contact or log-in to Member Section), dropdown menus (e.g. the overall language switch). The meta navigation does not contain search elements. Location, date and time are displayed throughout the whole website.
Styleguide 2.4 Search */ ul.nav-search { line-height: 1; } ul.nav-search .open .dropdown-toggle { border-color: #0c519e; } ul.nav-search > li { display: inline-block; } ul.nav-search > li > a { font-size: 16px; font-size: 1rem; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; display: inline-block; padding: 17px 15px 15px; color: #656e77; border-bottom: 5px solid transparent; } ul.nav-search > li > a:hover > span, ul.nav-search > li > a:active > span, ul.nav-search > li > a:focus > span { text-decoration: none; } ul.nav-search > li > a:hover, ul.nav-search > li > a:focus { color: #909f00; border-color: #0c519e; } ul.nav-search > li > a.icon { padding-left: 33px; position: relative; } ul.nav-search > li > a.icon:before { font-size: 24px; font-size: 1.5rem; position: absolute; left: 7px; margin-top: -5px; } ul.nav-search > li:last-child > a { padding-right: 25px; } ul.nav-search > li + li { background: transparent url(data:image/gif;base64,R0lGODlhAQAUAIAAANra2gAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjAgNjEuMTM0Nzc3LCAyMDEwLzAyLzEyLTE3OjMyOjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDY4MDI2MUQ2QTMxMTFFODhGM0JBQTlDMTNFMzgwM0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDY4MDI2MUU2QTMxMTFFODhGM0JBQTlDMTNFMzgwM0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENjgwMjYxQjZBMzExMUU4OEYzQkFBOUMxM0UzODAzQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENjgwMjYxQzZBMzExMUU4OEYzQkFBOUMxM0UzODAzQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAAAAAAALAAAAAABABQAAAIEhI+ZBQA7) left bottom no-repeat; } ul.nav-search > li .dropdown-menu { padding: 20px 20px 50px 20px; position: absolute; right: 0; left: auto; color: #fff; background: #0c519e; width: 380px; -webkit-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); -ms-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); -o-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); } ul.nav-search > li .dropdown-menu .title { font-size: 32px; font-size: 2rem; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; color: #fff; } ul.nav-search > li .dropdown-menu a { color: #fff; } /* ** 5.3 Breadcrumbs ** */ body { overflow: auto; width: 100%; } #breadcrumb { padding: 0 25px 0; margin: -10px 0; } .nav-breadcrumb { font-size: 14px; font-size: 0.875rem; } .nav-breadcrumb li, .nav-breadcrumb a, .nav-breadcrumb strong { vertical-align: middle; } .nav-breadcrumb li:before, .nav-breadcrumb li:after { color: #fff; } .nav-breadcrumb li > a, .nav-breadcrumb li strong { padding: 0 0.25em; } .nav-breadcrumb li:first-child > a { padding-left: 0; } .nav-breadcrumb a { color: #fff; } .nav-breadcrumb a:hover { color: #fff; } .nav-breadcrumb a:hover, .nav-breadcrumb a:active, .nav-breadcrumb a:focus { text-decoration: underline; } .nav-breadcrumb strong { cursor: default; color: #fff; } .nav-breadcrumb .icon:after, .nav-breadcrumb .fancybox-prev span:after, .fancybox-prev .nav-breadcrumb span:after, .nav-breadcrumb .fancybox-next span:after, .fancybox-next .nav-breadcrumb span:after, .nav-breadcrumb .icon:before, .nav-breadcrumb .fancybox-prev span:before, .fancybox-prev .nav-breadcrumb span:before, .nav-breadcrumb .fancybox-next span:before, .fancybox-next .nav-breadcrumb span:before { margin: 0; padding: 0; } .nav-page { margin-bottom: 1px; display: inline-block; } .nav-page li { display: inline-block; } .nav-page .prev button, .nav-page .next button { padding: 0; margin: 0; border: 0; } .nav-page .prev button.icon:before, .nav-page .prev button.icon:after, .nav-page .next button.icon:before, .nav-page .next button.icon:after { font-size: 24px; font-size: 1.5rem; display: inline-block; margin-top: -3px; } .nav-page .prev button[disabled='disabled'], .nav-page .next button[disabled='disabled'] { display: none; } .nav-page button { font-size: 15px; font-size: 0.9375rem; background: none; border: 0; cursor: pointer; color: #707880; margin: 0 7px; padding: 0 1px; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; padding-bottom: 2px; border-bottom: 3px solid #fff; } .nav-page button:hover, .nav-page button.disabled, .nav-page button:hover .icon:before, .nav-page button:hover .fancybox-prev span:before, .fancybox-prev .nav-page button:hover span:before, .nav-page button:hover .fancybox-next span:before, .fancybox-next .nav-page button:hover span:before { border-color: #909f00; color: #909f00; } .nav-page button.disabled, .nav-page button[disabled='disabled'] { cursor: default; } .pagination .mediaListSwitcher { position: relative; display: inline-block; margin: 0 16px 0 -7px; padding-right: 8px; } .pagination .mediaListSwitcher .icon, .pagination .mediaListSwitcher .fancybox-prev span, .fancybox-prev .pagination .mediaListSwitcher span, .pagination .mediaListSwitcher .fancybox-next span, .fancybox-next .pagination .mediaListSwitcher span { margin-right: 3px; padding: 0; } .pagination .mediaListSwitcher .icon.active:before, .pagination .mediaListSwitcher .fancybox-prev span.active:before, .fancybox-prev .pagination .mediaListSwitcher span.active:before, .pagination .mediaListSwitcher .fancybox-next span.active:before, .fancybox-next .pagination .mediaListSwitcher span.active:before { color: #909f00; } .pagination .mediaListSwitcher:after { display: block; position: absolute; bottom: -4px; right: 0; width: 1px; height: 18px; content: ''; background-color: #ebeced; } .pagination .pagination { display: inline-block; } /* Navigation Markup: Styleguide 5.0 Navigation */ ul.nav-socials a:before, ul.nav-socials a:after { color: #b2b7bb; } ul.nav-socials a:hover:before, ul.nav-socials a:hover:after { color: #909f00; } ul.nav-socials > li { display: inline-block; } ul.nav-socials > li + li { padding-left: 10px; } #supplement > h3.eurexon { margin-bottom: 10px; } /* Letter IndexThe meta navigation is positioned in the header and footer area of the page. Its position and content are fixed and stay the same on all views. The meta navigation contains links (e.g. contact or log-in to Member Section), dropdown menus (e.g. the overall language switch). The meta navigation does not contain search elements. Location, date and time are displayed throughout the whole website.
Styleguide 2.60 Letter Index */ .nav-letterIndex { margin: 0 0 30px; padding-bottom: 0; border-bottom: 1px solid #ebeced; } .nav-letterIndex .letterBtn { font-size: 16px; font-size: 1rem; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; color: #747471; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; min-width: 1em; padding: 0 0 5px; margin-right: 9px; border: 0; background: #fff; border-bottom: 3px solid transparent; } .nav-letterIndex .letterBtn:hover { color: #909f00; } .nav-letterIndex .letterBtn:hover, .nav-letterIndex .letterBtn:focus { background: #fff; border-color: #909f00; } .nav-letterIndex .letterBtn.disabled { color: #747471; cursor: default; opacity: 0.5; } .nav-letterIndex .letterBtn.disabled:hover { color: #747471; } .nav-letterIndex .letterBtn.disabled:hover, .nav-letterIndex .letterBtn.disabled:focus { border-color: transparent; } .nav-letterIndex .letterBtn.active { color: #909f00; border-color: #909f00; cursor: default; } .nav-letterIndex .letterBtn.active:hover { color: #909f00; } .nav-letterIndex .letterBtn.all { float: right; margin-right: 0; } #content h2.main-title { margin-top: 0; margin-bottom: 1em; } #content h2.main-title + .description { margin-bottom: 2em; } #content blockquote { padding: 15px 35px 15px 45px; background: #f2f2ee; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; font-size: 16px; font-size: 1rem; position: relative; } #content blockquote:before, #content blockquote:after { font-size: 55px; font-size: 3.4375rem; position: absolute; opacity: 0.2; line-height: 55px; } #content blockquote:before { left: 8px; top: 8px; content: '\201C'; } #content blockquote:after { right: 8px; bottom: 14px; content: '\201E'; } #content .paragraph:first-child { margin: 0 0 0.5em 0; } #content .paragraph:first-child img { margin: 0 0 0.5em 0; } #content .text-highlight { color: #909f00; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; margin: 1.5em 0; } .detailView > .container > h3 { margin: 1em 0; } div p, div h3, div.addressDetails, dl.list, ol.rte--list, ul.rte--list { margin-bottom: 20px; } div.paragraph dl, div.paragraph p, div.paragraph h3, div.paragraph div.addressDetails, div.paragraph ul.rte--list { margin-bottom: 0px; } .listview .topline, .detailView .topline { margin-bottom: 1em; max-width: 80%; } .listview .topline, .listview .subtitle, .detailView .topline, .detailView .subtitle { color: #666f78; display: block; } #content .p--heading-1, #content .p--heading-2, #content .p--heading-3, #content .p--heading-4, #content .p--heading-5, #content .p--heading-6 { color: #909f00; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; font-weight: normal; margin: 1.5em 0 1em; } #content .p--heading-1 { font-size: 18px; font-size: 1.125rem; } #content .p--heading-2 { font-size: 16px; font-size: 1rem; } #content .p--heading-3 { font-size: 15px; font-size: 0.9375rem; } #content .paragraph { margin: 1em 0; } #content .paragraph:first-child { margin-top: 0; } #content .detailText > .paragraph > div .rte--list > li > a, #content .item-content > .paragraph > div .rte--list > li > a, #content .paragraph > div > p > a, #content .paragraph > div > a { color: #909f00; } .facets .container { background: #f2f2ee; padding: 25px; } .facets .container > .title { font-size: 17px; font-size: 1.0625rem; margin: 0 0 20px 0; } .facets .container .facet { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; word-break: break-word; } .facets .container .facet + .facet h3 { border-top: 1px solid #fff; padding: 9px 0 8px; } .facets .container .facet > h3 { margin: 0 0 0 20px; color: #666f78; padding: 0 0 8px; font-size: 15px; font-size: 0.9375rem; } .facets .container .facet > h3 .icon, .facets .container .facet > h3 .fancybox-prev span, .fancybox-prev .facets .container .facet > h3 span, .facets .container .facet > h3 .fancybox-next span, .fancybox-next .facets .container .facet > h3 span { font-size: 22px; font-size: 1.375rem; margin: -5px 0 0 -25px; } .facets .container .facet > h3.toggleBtn { cursor: pointer; } .facets .container .facet > .list { margin-bottom: 20px; } .facets .container .facet .list .list-item { position: relative; padding-left: 19px; margin: 4px 0; } .facets .container .facet .list .list-item .toggleBtn { position: absolute; padding: 10px 4px; left: 0; cursor: pointer; font-size: 10px; font-size: 0.625rem; color: #8c939a; line-height: 0; } .facets .container .facet .list .list-item button { font-size: 12px; font-size: 0.75rem; background: none; background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLjgyMywxNS41MjljLTEuMjk3LDAtMi4zNTMtMS4wNTYtMi4zNTMtMi4zNTNWMi44MjRjMC0xLjI5NywxLjA1Ni0yLjM1MywyLjM1My0yLjM1M2gxMC4zNTQKCQljMS4yOTcsMCwyLjM1MywxLjA1NiwyLjM1MywyLjM1M3YxMC4zNTNjMCwxLjI5Ny0xLjA1NiwyLjM1My0yLjM1MywyLjM1M0gyLjgyM3oiLz4KCTxwYXRoIGZpbGw9IiNEQkREREYiIGQ9Ik0xMy4xNzcsMC45NDFjMS4wMzgsMCwxLjg4MiwwLjg0NCwxLjg4MiwxLjg4MnYxMC4zNTNjMCwxLjAzOC0wLjg0NCwxLjg4Mi0xLjg4MiwxLjg4MkgyLjgyMwoJCWMtMS4wMzcsMC0xLjg4Mi0wLjg0NC0xLjg4Mi0xLjg4MlYyLjgyNGMwLTEuMDM4LDAuODQ1LTEuODgyLDEuODgyLTEuODgySDEzLjE3NyBNMTMuMTc3LDBIMi44MjNDMS4yNzEsMCwwLDEuMjcxLDAsMi44MjR2MTAuMzUzCgkJQzAsMTQuNzI5LDEuMjcxLDE2LDIuODIzLDE2aDEwLjM1NEMxNC43MjksMTYsMTYsMTQuNzI5LDE2LDEzLjE3N1YyLjgyNEMxNiwxLjI3MSwxNC43MjksMCwxMy4xNzcsMEwxMy4xNzcsMHoiLz4KPC9nPgo8L3N2Zz4K) left top no-repeat; border: 0; cursor: pointer; margin: 0; padding: 0 0 0 22px; text-align: left; color: #404b56; } .facets .container .facet .list .list-item button .count { font-size: 12px; font-size: 0.75rem; } .facets .container .facet .list .list-item button.disabled { cursor: default; border-bottom: 2px solid #909f00; color: #909f00; } .facets .container .facet .list .list-item.selected button { color: #909f00; background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLjgyNCwxNS41MjljLTEuMjk3LDAtMi4zNTMtMS4wNTYtMi4zNTMtMi4zNTNWMi44MjRjMC0xLjI5NywxLjA1Ni0yLjM1MywyLjM1My0yLjM1M2gxMC4zNTMKCQkJYzEuMjk3LDAsMi4zNTMsMS4wNTYsMi4zNTMsMi4zNTN2MTAuMzUzYzAsMS4yOTctMS4wNTYsMi4zNTMtMi4zNTMsMi4zNTNIMi44MjR6Ii8+CgkJPHBhdGggZmlsbD0iI0RCRERERiIgZD0iTTEzLjE3NywwLjk0MWMxLjAzOCwwLDEuODgyLDAuODQ0LDEuODgyLDEuODgydjEwLjM1M2MwLDEuMDM4LTAuODQ0LDEuODgyLTEuODgyLDEuODgySDIuODI0CgkJCWMtMS4wMzgsMC0xLjg4Mi0wLjg0NC0xLjg4Mi0xLjg4MlYyLjgyNGMwLTEuMDM4LDAuODQ0LTEuODgyLDEuODgyLTEuODgySDEzLjE3NyBNMTMuMTc3LDBIMi44MjRDMS4yNzEsMCwwLDEuMjcxLDAsMi44MjR2MTAuMzUzCgkJCUMwLDE0LjcyOSwxLjI3MSwxNiwyLjgyNCwxNmgxMC4zNTNDMTQuNzI5LDE2LDE2LDE0LjcyOSwxNiwxMy4xNzdWMi44MjRDMTYsMS4yNzEsMTQuNzI5LDAsMTMuMTc3LDBMMTMuMTc3LDB6Ii8+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAzNzc4IiBzdHJva2Utd2lkdGg9IjEuODgyMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0xMS4zMDIsNi4yCgkJCQljMCwwLTQuMTQ0LDQuMTc4LTQuMTQ0LDQuMTk0Yy0wLjIwNiwwLjE4OS0wLjQwNCwwLjE4OS0wLjU5MiwwTDQuNTMzLDguMzM2Ii8+CgkJPC9nPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=) left top no-repeat; } /* Price SearchOn click on the magnifier icon or “Price”, the layer opens with a text field for product names, ISIN and WKN as well as a dropdown menu for refining the request (as on the current xetra.com website). When executing the search a new window opens the respective Börse Frankfurt website with the search results./p> Styleguide 2.41 Price Search */ .price-search > div, .text-search > div { margin-bottom: 20px; } .price-search form input, .text-search form input, .price-search form select, .text-search form select, .price-search form .quickGuide.dropdown > .dropdown-toggle, .text-search form .quickGuide.dropdown > .dropdown-toggle { width: 100%; display: block; margin-bottom: 20px; } .price-search form button, .text-search form button { float: left; } .price-search form p, .text-search form p { float: right; width: 70%; font-size: 12px; font-size: 0.75rem; } .price-search form p a, .text-search form p a { text-decoration: underline; } .price-search form#priceSearchForm select, .text-search form#priceSearchForm select, .price-search form#priceSearchForm .quickGuide.dropdown > .dropdown-toggle, .text-search form#priceSearchForm .quickGuide.dropdown > .dropdown-toggle { display: none; } /* Text Search
The meta navigation is positioned in the header and footer area of the page. Its position and content are fixed and stay the same on all views. The meta navigation contains links (e.g. contact or log-in to Member Section), dropdown menus (e.g. the overall language switch). The meta navigation does not contain search elements. Location, date and time are displayed throughout the whole website.
Styleguide 2.42 Text Search */ /* Special ViewsSpecial views have the same basic layout as the other views, but do not use the same templates due to their specialties.
Styleguide 5.6 Special Views */ /* SitemapThe sitemap displays automatically linked navigation nodes (maximum four levels).
In terms of functionality, the sitemap will match the Eurex sitemap.
The layout is going to correspond to the Cash Market/ Xetra entity design.
A variety of content elements for highlighting content will be implemented. This will give the CMDS editorial team greater flexibility for displaying special topics, products, news, services or other content. Depending on their function, content elements can be embedded in different view types. The use of these elements is explained in the following chapters.
Styleguide 6.0 Content Elements */ .numberOfTheWeek .title, .linkListModule .title, .accordion .title, .trading-times .time-element h4 { font-size: 16px; font-size: 1rem; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .teaserBox h2, .item-text h2.title, #content .teaserBox .teaserStandard h2.title, #content .teaserBox .teaserSpecial h2.title, .teaserStandard h2.title, .teaserSpecial h2.title { font-size: 18px; font-size: 1.125rem; line-height: 1.2; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; color: #909f00; margin-bottom: 1em; } /* Standard ModuleThe Standard Module can contain any kind of content, which will be chosen on the basis of strategic and editorial issues. The module can be used in different formats. For example, a picture can be shown in conjunction with a short plain text description. The Picture can be displayed above the text. Alternatively, the picture can be displayed in horizontal format where it is embedded in the text.
Markup:The Special Module is intended to announce special information, using a more attention-grabbing design in comparison to the Standard Module. The attributes are the same as in the Standard Module. If no superior node, e.g. a section node, is appropriate, the title is not linked.
Markup:JIRA Issue: CMDS-49 | JIRA Issue: CMDS-190
The Direct Contact element provides contact information for the section or the single view topic. The element contains only one entry. If more than one piece of contact information is needed multiple Direct Contact elements have to be displayed (a maximum of three elements is recommended). Editors assign content manually. Unused fields will be hidden.
The element can be configured within the content area or below the sub navigation on single views, overview pages and the Website Contacts list.
Each Direct Contact will be styled for at least two sizes (6col and 2col). Depending on If the Direct Contact provides an image the markeup and styling will be different.
Markup:Dr. Nicole Kulodrovic
Deutsche Börse | Xetra | [department]
[institution_topic]
Mergenthalerallee 61
Berlin
Germany
12345
Service times
from 9 a.m. to 5 p.m. CET
T +49 (0) 69 – 21 11 88 88
F +49 (0) 69 – 21 11 88 8
nicole.koludovic@deutsche-boerse.de ]init[ AGDr. Nicole Kulodrovic
Deutsche Börse | Xetra | [department]
[institution_topic]
Mergenthalerallee 61
Berlin
Germany
12345
Service times
from 9 a.m. to 5 p.m. CET
T +49 (0) 69 – 21 11 88 88
F +49 (0) 69 – 21 11 88 8
nicole.koludovic@deutsche-boerse.de ]init[ AGThe News List Module displays the most recent news items or articles. Content other than latest information is also possible. The lists are generated automatically and can be subscribed to by RSS. The titles of the tabs are defined manually. The links below the entries lead to the respective overall list views. If no superior list, e.g. the focus list, is appropriate, the link is not displayed. When JavaScript is disabled, all entries from the tabs are listed one below another with the respective titles.
Markup:Display material, articles or tools directly related to the article or special view.
If no further information is available, the element wont be rendered.
"Further Information" and the next element "Related Topic" (6.21) using an identical design.
Display links to related topics and information which may also be interesting for the user.
If no related information is available, the element wont be rendered.
The "Related Topic" module just @extend the styles already used for "Further Information" (6.20)
The Number of the Week Module features and links to an editorially defined node in an attention-grabbing way, by presenting an interesting number in large bold type. The number and content is manually created, so editorial work will be necessary. The title links to an editorially defined node, whereas the number links to the relevant article. If no superior node, e.g. a section node, is appropriate, the title is not linked.
Markup:With Deutsche Börese' Historical Data on Demand you gain direct access to our high-performance database with many terabytes.
The Most Popular Module provides links to popular content. The content of this module is filled manually. In order to keep the module clear and simple not more than five links should be displayed. Clicking on a title directs the user to the corresponding page. The Link List Module has the same functionalities as the Most Popular Module.
Markup:The Introduction Module contains a title and a description text, an optional image can be added. The module can be displayed on overview pages only since it should just give the user a short introduction to a specific topic. This module can also be inserted through tables.
Markup: Styleguide 6.16 Introduction Module */ .introduction { margin: 0 0 30px; } /* AccordionJIRA Issue: CMDS-179 | Styleguide 6.22 Accordion */ .accordion .title { color: #181813; margin: 0; display: block; font-size: 100%; padding: 10px 25px 9px; border-top: 1px solid #dadede; position: relative; /* Icon */ } .accordion .title:before { font-size: 24px; font-size: 1.5rem; margin: -0.12em 0 0 -6px; position: absolute; left: 0; } .accordion.ui-accordion .ui-accordion-header { color: #181813; cursor: pointer; } .accordion.ui-accordion .ui-accordion-header:hover { color: #909f00; } .accordion.ui-accordion .ui-accordion-header:before, .accordion.ui-accordion .ui-accordion-header:after { color: #b2b7bb; } .accordion.ui-accordion .ui-accordion-header:hover:before, .accordion.ui-accordion .ui-accordion-header:hover:after { color: #909f00; } .accordion.ui-accordion .ui-accordion-content { padding: 10px 25px 25px; } /* Calendar
The Calendar Module displays a defined set of dates such as events, manual entries or trading calendar entries. ]init[ recommends that the three types of dates are not mixed within the module, to avoid confusing users. A tab interface can be configured by the CMDS editorial team to switch between the events, manual entries and trading calendars. In order to set the trading calendar as default, editors need to configure it as first item of the calendar module in the CMS. The module shows the current month, with the current day highlighted.
Markup: Styleguide 6.5 Calendar */ .calendar .month, .calendar .nav-month { text-align: center; } .calendar .nav-month { position: relative; margin: 20px 0; color: #404b56; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .calendar .nav-month .icon, .calendar .nav-month .fancybox-prev span, .fancybox-prev .calendar .nav-month span, .calendar .nav-month .fancybox-next span, .fancybox-next .calendar .nav-month span { padding: 0; cursor: pointer; position: absolute; top: 0; margin-top: -5px; } .calendar .nav-month .icon:before, .calendar .nav-month .fancybox-prev span:before, .fancybox-prev .calendar .nav-month span:before, .calendar .nav-month .fancybox-next span:before, .fancybox-next .calendar .nav-month span:before, .calendar .nav-month .icon:after, .calendar .nav-month .fancybox-prev span:after, .fancybox-prev .calendar .nav-month span:after, .calendar .nav-month .fancybox-next span:after, .fancybox-next .calendar .nav-month span:after { color: #b2b7bb; } .calendar .nav-month .icon:hover:before, .calendar .nav-month .fancybox-prev span:hover:before, .fancybox-prev .calendar .nav-month span:hover:before, .calendar .nav-month .fancybox-next span:hover:before, .fancybox-next .calendar .nav-month span:hover:before, .calendar .nav-month .icon:hover:after, .calendar .nav-month .fancybox-prev span:hover:after, .fancybox-prev .calendar .nav-month span:hover:after, .calendar .nav-month .fancybox-next span:hover:after, .fancybox-next .calendar .nav-month span:hover:after { color: #909f00; } .calendar .nav-month .icon:before, .calendar .nav-month .fancybox-prev span:before, .fancybox-prev .calendar .nav-month span:before, .calendar .nav-month .fancybox-next span:before, .fancybox-next .calendar .nav-month span:before { font-size: 28px; font-size: 1.75rem; } .calendar .nav-month .icon.icon-next, .calendar .nav-month .fancybox-prev span.icon-next, .fancybox-prev .calendar .nav-month span.icon-next, .calendar .nav-month .fancybox-next span.icon-next, .fancybox-next .calendar .nav-month span.icon-next { right: -9px; } .calendar .nav-month .icon.icon-prev, .calendar .nav-month .fancybox-prev span.icon-prev, .fancybox-prev .calendar .nav-month span.icon-prev, .calendar .nav-month .fancybox-next span.icon-prev, .fancybox-next .calendar .nav-month span.icon-prev { left: -9px; } .calendar table.month { color: #404b56; border: none; border-color: #ececec; background: none; } .calendar table.month th { font-size: 12px; font-size: 0.75rem; line-height: 1; padding-bottom: 10px; text-align: center; } .calendar table.month td { padding: 1px; background: #fff; } .calendar table.month td.today > * { border-color: #909f00; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; color: #7c8b00; } .calendar table.month td.today > *.clickable { border-color: #909f00; } .calendar table.month a, .calendar table.month button { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; cursor: default; text-decoration: none; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; color: #181813; padding: 0.3em 0; background: #f2f2ee; border: 2px solid #f2f2ee; width: 100%; line-height: 1; display: block; } .calendar table.month a.clickable, .calendar table.month button.clickable { cursor: pointer; color: #7c8b00; background-color: #e4e7cb; border-color: #e4e7cb; } .calendar table.month a.clickable:hover, .calendar table.month a.clickable:focus, .calendar table.month button.clickable:hover, .calendar table.month button.clickable:focus { color: #fff; background-color: #909f00; border-color: #909f00; } .calendar table.month a.disabled, .calendar table.month button.disabled { cursor: default; } .calendar table.month tr:nth-child(odd) { background: transparent; } .calendar table.month tr { border: none; } .calendar table.month tr + tr { border: none; } /* Indices ModuleJIRA Issue: CMDS-40 | JIRA Issue: CMDS-578
This module gives an overview of the indices of several stocks. Five stocks can be displayed together with their current value and their performance in percentage terms. At the bottom of the module the current date is displayed. The data for the Indices Module is imported from an external provider. The stock’s title is linked to Börse Frankfurt where the user gets more information about the chosen index.
Markup: Markeup: Styleguide 6.6 Indices Module (Quotes) */ .indices .title { font-size: 16px; font-size: 1rem; } .indices .date { font-size: 12px; font-size: 0.75rem; color: #404b56; padding-left: 8px; } .indices .performance { position: relative; text-align: right; width: 5.5em; white-space: nowrap; } .indices .performance .icon, .indices .performance .fancybox-prev span, .fancybox-prev .indices .performance span, .indices .performance .fancybox-next span, .fancybox-next .indices .performance span { position: absolute; margin-top: -0.2em; left: 0; } .indices .performance .icon:before, .indices .performance .fancybox-prev span:before, .fancybox-prev .indices .performance span:before, .indices .performance .fancybox-next span:before, .fancybox-next .indices .performance span:before { font-size: 22px; font-size: 1.375rem; } .indices .performance .percent { padding-left: 25px; } .indices .performance .icon-arrow-up:before { color: #65a40b; } .indices .performance .icon-arrow-down:before { color: #d14513; } .indices .performance .icon-arrow-right:before { color: #666f78; } .indices table.dataTable tr { border-color: #ebeced; } .indices table.dataTable tr:last-child { border-bottom: none; } /* Trading times moduleThe trading time module provides the stock trading times for Xetra and Börse Frankfurt.
The trading times are populated by the CMDS editorial team and are not linked.
There is no data import needed. The module also contains the Xetra Auction Plan which can be downloaded on click.
JIRA Issue: CMDS-35 | Swiper (the used slider plugin) | Design
Markup:List views provide a concentrated presentation of homogenous documents concerning one topic, e.g. press releases. Lists are based on faceted search technology, providing information by applying multiple filters.
Styleguide 5.4 List Views (SV) */ /* LV Standard List Styleguide 5.4.1 LV Standard List */ .listview .searchList { margin-bottom: 37px; } .listview .searchList .results { font-size: 18px; font-size: 1.125rem; color: #909f00; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; margin: 25px 0; display: block; width: 100%; } .listview .sort-options { margin-left: -3px; } .listview .sort-options, .listview .hits-per-page { position: relative; padding-right: 16px; } .listview .sort-options select, .listview .sort-options .quickGuide.dropdown > .dropdown-toggle, .listview .hits-per-page select, .listview .hits-per-page .quickGuide.dropdown > .dropdown-toggle { border-radius: 0; border: none; padding: 0 17px 0 0; margin: 0; } .listview .sort-options + .hits-per-page { padding-left: 16px; } .listview .pagination-divider { background-color: #ebeced; bottom: -5px; content: ''; display: block; height: 18px; left: 0; overflow: hidden; position: absolute; width: 1px; } .listview .list-switcher { float: left; position: relative; z-index: 1; padding-right: 15px; margin-right: 15px; } .listview .list-switcher .viewmode { padding: 0 5px; } .listview .list-switcher .icon, .listview .list-switcher .fancybox-prev span, .fancybox-prev .listview .list-switcher span, .listview .list-switcher .fancybox-next span, .fancybox-next .listview .list-switcher span { padding: 0; margin-left: -3px; } .listview .list-switcher .icon:before, .listview .list-switcher .fancybox-prev span:before, .fancybox-prev .listview .list-switcher span:before, .listview .list-switcher .fancybox-next span:before, .fancybox-next .listview .list-switcher span:before, .listview .list-switcher .icon:after, .listview .list-switcher .fancybox-prev span:after, .fancybox-prev .listview .list-switcher span:after, .listview .list-switcher .fancybox-next span:after, .fancybox-next .listview .list-switcher span:after { font-size: 24px; font-size: 1.5rem; } .listview .list-switcher .icon + .icon, .listview .list-switcher .fancybox-prev span + .icon, .fancybox-prev .listview .list-switcher span + .icon, .listview .list-switcher .fancybox-next span + .icon, .fancybox-next .listview .list-switcher span + .icon, .listview .list-switcher .fancybox-prev .icon + span, .fancybox-prev .listview .list-switcher .icon + span, .listview .list-switcher .fancybox-prev span + span, .fancybox-prev .listview .list-switcher span + span, .listview .list-switcher .fancybox-next .fancybox-prev span + span, .fancybox-prev .fancybox-next .listview .list-switcher span + span, .listview .list-switcher .fancybox-next .icon + span, .fancybox-next .listview .list-switcher .icon + span, .listview .list-switcher .fancybox-prev .fancybox-next span + span, .fancybox-next .listview .list-switcher .fancybox-prev span + span, .fancybox-prev .listview .list-switcher .fancybox-next span + span, .fancybox-next .fancybox-prev .listview .list-switcher span + span, .listview .list-switcher .fancybox-next span + span, .fancybox-next .listview .list-switcher span + span { margin-left: 5px; } .listview .list-switcher:after { display: block; position: absolute; bottom: -5px; right: 0; width: 1px; height: 18px; content: ''; background-color: #ebeced; } .listview .pagination { font-size: 15px; font-size: 0.9375rem; } .listview .pagination > * { display: inline-block; } .listview .pagination.pagination-bottom { text-align: right; padding-top: 8px; border-top: 1px solid #ebeced; } .listview .pagination-top { position: relative; padding-bottom: 4px; border-bottom: 1px solid #ebeced; } .listview .pagination-top .nav-page { display: flex; position: absolute; right: 0; bottom: -1px; } .no-js .listview .hits-per-page, .no-js .listview .sort-options { padding-right: 0; width: 50%; margin: 0; } .no-js .listview .hits-per-page [type='submit'], .no-js .listview .sort-options [type='submit'] { margin: 8px 0 15px; width: 100%; border-color: transparent; background: #f2f2ee; color: #707880; } .no-js .listview .hits-per-page [type='submit']:hover, .no-js .listview .hits-per-page [type='submit']:focus, .no-js .listview .sort-options [type='submit']:hover, .no-js .listview .sort-options [type='submit']:focus { color: #fff; background: #909f00; } .no-js .listview .sort-options { padding-right: 16px; } .no-js .listview .pagination-divider { top: 5px; height: 60px; } .no-js .listview .pagination-top { padding-bottom: 0; } .no-js .listview .pagination-top .nav-page { position: relative; display: inline-block; width: 100%; text-align: right; } /* Single Views (SV)Single views are the most detailed views, displaying a variety of editorial content.
There are several types of single views, each one tailored specifically to the type of content to be displayed.
This is explained further in this chapter.
The new websites make it easier for users to register for events. An external link for the respective event can be shown in the upper part of the view and has to be assigned manually. If the Event view is content heavy, it is recommended to the content editor to embed the external link again in the rich text so that users can directly jump to the registration without having to scroll to the top of the page.
The event location will be displayed either on a standard Google map or on an Open Street map according to Deutsche Börse data protection standards. The geographic coordinates and the zoom level need to be edited in the CMS by the CMDS editorial team.
Styleguide 5.3.11 SV Event */ h2.main-title + .paragraph.desciption { margin-bottom: 40px; } .sv-listing-partner .ourExpertise { float: right; width: 219px; border-left: 1px solid #ebeced; padding-left: 30px; margin: 0 0 20px 40px; min-height: 194px; } .sv-listing-partner .ourExpertise li { line-height: 1.6; } .sv-listing-partner .ourExpertise h3 { font-size: 18px; font-size: 1.125rem; margin: 0 0 15px 0; } .sv-listing-partner .serviceTeaser { float: right; width: 219px; border-left: 1px solid #ebeced; padding-left: 30px; margin: 0 0 20px 40px; min-height: 194px; } .sv-listing-partner .serviceTeaser li { line-height: 1.6; } .sv-listing-partner .serviceTeaser h3 { font-size: 18px; font-size: 1.125rem; margin: 0 0 15px 0; } .sv-listing-partner > .logos { margin: 0 0 2em 0; } .sv-listing-partner .logo { float: left; max-width: 25%; } .sv-listing-partner .logo + .logo { float: right; } .sv-specialist, .sv-sponsor, .sv-issuer, .sv-listing-partner { position: relative; } .sv-specialist > .logo, .sv-sponsor > .logo, .sv-issuer > .logo, .sv-listing-partner > .logo { float: right; margin: 0 0 20px 20px; max-width: 25%; } .sv-specialist .tabs, .sv-sponsor .tabs, .sv-issuer .tabs, .sv-listing-partner .tabs { clear: both; } .sv-specialist .tabs-nav, .sv-sponsor .tabs-nav, .sv-issuer .tabs-nav, .sv-listing-partner .tabs-nav { border-bottom: 1px solid #ebeced; } .list.event-list { margin: 30px 0; } .list.event-list + .event-list-location { margin-top: -30px; } .detailText { margin-bottom: 30px; margin: 10px 0; } .detailText img { margin: 10px 0; } .detailText > *:first-child { margin-top: 0; } .detailText > *:last-child { margin-bottom: 0; } .detailText strong { font-weight: bold; } /* SV Text CollectionText Collections are used to display content that is too large to be easily contained on a single page.
Content is separated into chapters.
Users can navigate through the pages using links at the top of the page,
or by using pagination buttons or the drop-down menu below the text.
Title, subtitle and description derive from the text collection document,
whereas the other information is edited in the text collection fragments.
The event location will be displayed either on a standard Google map or on an Open Street map according to Deutsche Börse data protection standards. The geographic coordinates and the zoom level need to be edited in the CMS by the CMDS editorial team.
Styleguide 5.3.11 SV Event */ dl.event-list { margin-bottom: 30px; } dl.event-list.event-list-location { border-top: 1px solid #ebeced; } dl.event-list dt { width: 25%; } dl.event-list dd { width: 75%; } dl.event-list.event-list-location dd span { padding-right: 4px; } dl.event-list.event-list-location dd span :after { content: ', '; } dl.event-list.event-list-location dd span:last-of-type { padding-right: 0; } dl.event-list.event-list-location dd span:last-of-type :after { content: ''; } dl.event-list.event-list-location dd .google-maps-locations { margin-top: 1.2em; } dl.event-list.event-list-location dd .google-maps-locations #map { height: 300px; } dl.event-list.event-list-location dd .google-maps-locations .caption-block { color: #666f78; font-size: 12px; font-size: 0.75rem; background: #fff; line-height: 1.4; padding-top: 10px; margin-top: 17px; } dl.event-list.event-list-location dd .google-maps-locations .caption-block > * { display: block; } .event-gallery { position: relative; margin: 30px auto; width: 100%; height: 530px; background-color: #f2f2ee; } .event-gallery .lightbox-image { width: 100%; height: 480px; text-align: center; } .event-gallery .lightbox-image > img { max-height: 100%; width: auto; vertical-align: bottom; } .event-gallery .caption { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; line-height: 50px; padding: 0 100px 0 20px; } .event-gallery .slider-controler { background-color: #f2f2ee; position: absolute; bottom: 0; height: 50px; line-height: 50px; overflow: hidden; padding-right: 15px; right: 0; text-align: right; cursor: default; } .event-gallery .slider-controler > * { display: inline-block; color: #747471; } .event-gallery .slider-controler > *:before { color: #747471; } .event-gallery .slider-controler > *:hover:before { color: #909f00; } .event-gallery .slider-controler .icon-left { padding-right: 5px; } .event-gallery .slider-controler .icon-right { padding-left: 5px; } .event-gallery .slider-controler .counter { color: #747471; } /* SV Participants map Styleguide 5.6.4 Participants map */ .participantsMap .worldmapContent { position: relative; margin-bottom: 30px; } .participantsMap .worldmap-country, .participantsMap .worldmap-imagemap { position: absolute; top: 0; left: 0; } .participantsMap .worldmap-country { transition: opacity 0.2s; opacity: 0.2; } .participantsMap .worldmap-country.hover { opacity: 0.5; } .participantsMap .worldmap-country.selected { opacity: 1; } .participantsMap .worldmap-country.selected.hover { opacity: 0.7; } .participantsMap .worldmap-imagemap { opacity: 0; } /* IMPORT PLUGIN-STYLES (js-libs) * ========================================================================== */ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; display: flex; justify-content: center; align-items: center; } .fancybox-inner { overflow: hidden; } .fancybox-inner .consent-layover { position: sticky; z-index: 8041; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAACYCAMAAACoAftQAAAAvVBMVEUAAAAAAAAAAAAODg4AAAAAAAAAAADNzc0BAQHZ2dkDAwMHBwcAAADf398CAgI/Pz8BAQEAAACCgoIcHBzl5eUAAAC/v7/x8fEGBgZnZ2cAAADs7OwGBgb4+Pg/Pz/Jycmenp5nZ2f39/eDg4MAAADQ0ND4+Piurq7a2tr8/Pzs7OwAAAD5+fn9/f3e3t4AAAD///9OTk7BwcE1NTWsrKyNjY2cnJx6enpdXV1oaGgsLCy6uroiIiLOzs5BQUFt3PCNAAAAL3RSTlMAAQMIDRIZHSMnLTpESFNVXWlpbG15en+HiZCWoaGssrO2vsDFydPU3uL4+fr9/Ywv6xsAAAQVSURBVHhe7JZbc6JMGIQXAUOQEMi3uMYkrmopZgqs5ujZ//+zvpdNzMsMlli1N3uRvtCbpzo9I+nmhyqN9OO6GNQ6Ha1SG0mcrhskXe90rvKE6kbX7r9MF4vp2887nfBrqPW0xJemD4w32e7jHIj2602SbNZ7Qfgd0zJLtgKi2B0+tSsE3h8u0RX7HGGfHWrK9oiIbrK69SiQHxTliO5VWtP0rrNEemhoj6muaYqx2XuGyJrwbgUKohhb3hIFM6wCC7Zm4+M5Zs5fpKNiTYndEOUHDFRYCeADLvGiy7DtL7E5/12gJPacalPlqEc2eoFAdmCa2UOGyOhoUuQgwo7PxCwJMGXYGcQMlyCVX3DchCkGs3V6h0iFgyUSZsuS6QQLGaYDhueUHxhf3RpzOqB8dRMcz84lf5FS9A1Ngi2PQm8PF7RBZOnEyqFnSC/BKX6bHQmucpB13mRzCJtTsPUowlpl14if2JifUXcwgeqdA2OLn1C+PdsbzCKkW0a3KeKxbbAxF4FJ9EgAaXGqyFORAuLZNrkMZNoNKnNS9PE5dpltFofjB4PJXIAk5rP/HMu4Ukmm7XjEkwLfc2yT66tJk7lp2T2H1LMtk2wVVsWpcE0SlW4DbeLE/xG3eRvfQv7Fptw4KvpDNRKLt1/3rZty/xbjrPef1+5D018ITYttkiTrfAUsrmzK3RTIT/woHxH3DaZl9h2rRH2aX0ydaYb1BVK1zNdA32RvNn7DkVmmoyeVJvYBMcdl5Vg2/lW0zpSbUNIKT12KLV8wVjsmNvGW63feU3qj86veGQmAA1e5qzbStNZdmVTlRzzbSjG+4+t4u1iqjxxjR6pczaiNBCCVXoGx25X7mUNGgJBHM/QsXWp+dk4U5xJjX4EXSM7ACcCxnnnm2zI8rxVoFgMr/lUwUpyNPvYVx/eRfaUSQzkzLWxEOVhiwynCAd2GvCm/2bquBPEo+LxnDv0YXdyfFOHQP+8EV/kY0enSorxyitoLxxwiabDRqDImWF2JJVBIeVNEk2HgsDGn7vkhcPy67lMOiBGF4AGS3tX8yYqAfb5eF/kRiMPX4cDjEDLd8wezJT4lwtHrMHBtbg6V9oLhYDYLw3A2eSVbn0elSdMCecFg+Ee0Kq7dlftLXSCrRxNE8lzH7hp0Nu3qpHQty7Ztq2sabHvtpb/SLauisVTye1O+N2Ubbxhu2xSAq6x1UwoAWfum8P3Gu5ZNYaUA2jaFJYCofVPYOWnZFD4TcLpxU1ZAnN24KRnfxQ2bshEE/Vub8r0p35vi/t9eHRoBDMNQDJUvMLkOkDMM+8D7b9cR+kOKLPy4juojnQeAkWWVAyLLLINVdovj44N8LOqi/3Djxo0bN5ZvdbWJuwHhrw2ILYdqBwDT2fEEXtrZFmVcCWLiAAAAAElFTkSuQmCC); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url(data:image/gif;base64,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) center center no-repeat; } .fancybox-close { position: absolute; top: 0; right: 0; width: 20px; height: 20px; cursor: pointer; z-index: 8040; background: #fff; color: #181813; text-align: center; line-height: 20px; } .fancybox-close:hover, .fancybox-close:active, .fancybox-close:focus { text-decoration: none; } .fancybox-close:hover { background: #909f00; -webkit-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); color: #fff; } .fancybox-close:before { content: "\2013"; font-size: 18px; font-size: 1.125rem; color: inherit; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { text-align: center; position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -18px; cursor: pointer; z-index: 8040; } .fancybox-nav span:before { font-size: 48px; font-size: 3rem; color: #181813; } .fancybox-prev span { left: -48px; } .fancybox-next span { right: -48px; } .fancybox-nav:hover span:before { color: #909f00; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpCMEM4NDgzQjlDRTNFMTExODE4NUVDOTdFQ0I0RDgxRSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGREU5OEVCQzAzMjYxMUUyOTg5OURDMDlDRTJDMTc0RSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGREU5OEVCQjAzMjYxMUUyOTg5OURDMDlDRTJDMTc0RSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkIxQzg0ODNCOUNFM0UxMTE4MTg1RUM5N0VDQjREODFFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkIwQzg0ODNCOUNFM0UxMTE4MTg1RUM5N0VDQjREODFFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+s3YRAQAAABtJREFUeNpiFODh2cBABGBiIBKMKqSOQoAAAwBokQDs5F/8FAAAAABJRU5ErkJggg==); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #333; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, 0.8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url(data:image/png;base64,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); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url(/resource/crblob/1342168/9fd9e568896b9403fbe86ef1069df75e/data/fancybox_loading@2x.gif.gif); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } /* * Swiper 2.6.1 * Mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/sliders/swiper/ * * Copyright 2010-2014, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under GPL & MIT * * Released on: May 6, 2014 */ .slider-container { margin: 0 auto; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; /* Fix of Webkit flickering */ z-index: 1; } .slider-wrapper { position: relative; width: 100%; -webkit-transition-property: -webkit-transform, left, top; -webkit-transition-duration: 0s; -webkit-transform: translate3d(0px, 0, 0); -webkit-transition-timing-function: ease; -moz-transition-property: -moz-transform, left, top; -moz-transition-duration: 0s; -moz-transform: translate3d(0px, 0, 0); -moz-transition-timing-function: ease; -o-transition-property: -o-transform, left, top; -o-transition-duration: 0s; -o-transform: translate3d(0px, 0, 0); -o-transition-timing-function: ease; -o-transform: translate(0px, 0px); -ms-transition-property: -ms-transform, left, top; -ms-transition-duration: 0s; -ms-transform: translate3d(0px, 0, 0); -ms-transition-timing-function: ease; transition-property: transform, left, top; transition-duration: 0s; transform: translate3d(0px, 0, 0); transition-timing-function: ease; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .slide { float: left; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; } /* =============================================================== Your custom styles, here you need to specify container's and slide's sizes, pagination, etc. ================================================================*/ .slider-container { /* Specify Swiper's Size: */ width: 100%; height: 100%; /*width:200px; height: 100px;*/ } .slide { /* Specify Slides's Size: */ /*width: 100%; height: 100%;*/ } .slide-active { /* Specific active slide styling: */ } .slide-visible { /* Specific visible slide styling: */ } /* =============================================================== Pagination Styles ================================================================*/ .pagination-switch { /* Stylize pagination button: */ vertical-align: middle; background: #aaa; background: rgba(255, 255, 255, 0.8); border: 1px solid transparent; border-radius: 10px; cursor: pointer; display: inline-block; height: 10px; margin-right: 8px; opacity: 0.8; width: 10px; } .active-switch { /* Specific active button style: */ background: transparent; border: 1px solid #aaa; border-radius: 12px; cursor: default; height: 12px; width: 12px; } .visible-switch { /* Specific visible button style: */ } /*! jQuery UI - v1.11.4 - 2015-03-25 * http://jqueryui.com * Includes: core.css, accordion.css, autocomplete.css, datepicker.css, menu.css, tabs.css * Copyright 2015 jQuery Foundation and other contributors; Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } /*.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; //margin: 2px 0 0 0; //padding: .5em .5em .5em .7em; //min-height: 0; // support: IE7 font-size: 100%; } /*.ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; }*/ .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select, .ui-datepicker .ui-datepicker-title .quickGuide.dropdown > .dropdown-toggle { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker .quickGuide.dropdown > .ui-datepicker-month.dropdown-toggle, .ui-datepicker select.ui-datepicker-year, .ui-datepicker .quickGuide.dropdown > .ui-datepicker-year.dropdown-toggle { width: 45%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-menu { list-style: none; padding: 0; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { position: absolute; } .ui-menu .ui-menu-item { position: relative; margin: 0; padding: 3px 1em 3px .4em; cursor: pointer; min-height: 0; /* support: IE7 */ /* support: IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-state-focus, .ui-menu .ui-state-active { margin: -1px; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item { padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: .2em; margin: auto 0; } /* right-aligned */ .ui-menu .ui-menu-icon { left: auto; right: 0; } /*.ui-tabs { position: relative;// position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } */ /* JavaScript Modules Styleguide 8.0 JavaScript Modules */ /* nojs */ /* jquery UI Datepicker */ .ui-datepicker { -webkit-box-shadow: 0px 6px 20px -5px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 20px -5px rgba(0, 0, 0, 0.8); -ms-box-shadow: 0px 6px 20px -5px rgba(0, 0, 0, 0.8); -o-box-shadow: 0px 6px 20px -5px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 20px -5px rgba(0, 0, 0, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; border: 1px solid #dbdde0; background: #fff; padding: 6px 12px; margin: -1px 0; z-index: 10; } .ui-datepicker .ui-datepicker-header { color: #404b56; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .ui-datepicker .ui-datepicker-header .ui-datepicker-next, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev { top: 0; margin-top: 1px; cursor: pointer; } .ui-datepicker .ui-datepicker-header .ui-datepicker-next:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:after { font-size: 28px; font-size: 1.75rem; } .ui-datepicker .ui-datepicker-header .ui-datepicker-prev { left: -3px; } .ui-datepicker .ui-datepicker-header .ui-datepicker-next { right: -3px; } .ui-datepicker a.ui-datepicker-next, .ui-datepicker a.ui-datepicker-prev { text-decoration: none; } .ui-datepicker a.ui-datepicker-next:hover, .ui-datepicker a.ui-datepicker-prev:hover { text-decoration: none; } .ui-datepicker table { color: #181813; border-color: #dadede; background: none; border: none; } .ui-datepicker table th { font-size: 13px; font-size: 0.8125rem; padding-bottom: 10px; text-align: center; font-weight: normal; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .ui-datepicker table td { padding: 1px; background: #fff; } .ui-datepicker table td.ui-datepicker-today a, .ui-datepicker table td.ui-datepicker-today span { border-color: #909f00; color: #909f00; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .ui-datepicker table td.ui-datepicker-current-day a, .ui-datepicker table td.ui-datepicker-current-day span { border-color: #e4e7cb; color: #7c8b00; background-color: #e4e7cb; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .ui-datepicker table td.ui-datepicker-current-day.ui-datepicker-today a, .ui-datepicker table td.ui-datepicker-current-day.ui-datepicker-today span { border-color: #909f00; background-color: #e4e7cb; } .ui-datepicker table td a, .ui-datepicker table td span { width: 100%; text-align: center; border: 2px solid #f2f2ee; color: #181813; padding: 0.3em 0; background: #f2f2ee; } .ui-datepicker table td a.disabled, .ui-datepicker table td span.disabled { cursor: default; } .ui-datepicker table td a.clickable, .ui-datepicker table td span.clickable { cursor: pointer; color: #7c8b00; background-color: #e4e7cb; } .ui-datepicker table tr:nth-child(odd) { background: transparent; } .ui-datepicker table tr { border: none; } .ui-datepicker table tr + tr { border: none; } /* The datepicker sets the popup z-index to one more than its associated field, to keep it in front of that field. By default the z-index is 0, so datepicker ends up with 1 Adding proper z-index to input field solve z-index problems. http://stackoverflow.com/questions/11533161/jquery-ui-datepicker-change-z-index */ .datepicker { z-index: 10; position: relative; } /* jquery UI autocomplete */ .ui-autocomplete { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; margin: 2px 0; background: #fff; border: 1px solid #dbdde0; font-family: "newsGothic_roman", Arial, Verdana, Helvetica, sans-serif; color: #181813; } .ui-autocomplete .ui-state-focus { margin: 0; color: #909f00; } .ui-autocomplete .ui-menu-item { padding: 6px 12px; } /* JS LightboxThe lightbox shows pictures and videos. If more than one element is part of the list entry – so called Media Collections –users can scroll through the entries within the lightbox. If JavaScript is disabled, videos and pictures are displayed in a standard single view layout.
Styleguide 5.3.14 JS Lightbox */ .lightbox-image { position: relative; overflow: hidden; } .lightbox-image > a[rel='lightbox'] { position: absolute; bottom: 0; right: 0; height: 30px; width: 30px; background-color: #fff; background-color: rgba(255, 255, 255, 0.25); color: #181813; } .lightbox-image > a[rel='lightbox']:hover, .lightbox-image > a[rel='lightbox']:active, .lightbox-image > a[rel='lightbox']:focus { text-decoration: none; } .lightbox-image > a[rel='lightbox']:hover { background-color: rgba(255, 255, 255, 0.75); -webkit-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.7); } .lightbox-image > a[rel='lightbox'] .zoom:before { font-size: 22px; font-size: 1.375rem; padding: 4px; color: inherit; display: block; } .fancybox-inner #mediaplayer { position: absolute !important; } .fancybox-outer a.fancybox-nav { text-decoration: none; } .fancybox-outer a.fancybox-nav span { text-decoration: none; } .fancybox-skin a.fancybox-close:before { content: 'x'; } .fancybox-skin a.fancybox-close:hover, .fancybox-skin a.fancybox-close:active { color: #003778 !important; text-decoration: underline; background: none !important; } .fancybox-skin a.fancybox-close:hover:before, .fancybox-skin a.fancybox-close:active:before { color: #fff; } /* nojs */ /* JS Dropdown Markup: Styleguide 8.1 JS Dropdown */ .dropdown > .dropdown-toggle { cursor: pointer; } .dropdown > .dropdown-toggle:hover, .dropdown > .dropdown-toggle:active, .dropdown > .dropdown-toggle:focus { text-decoration: none; } .dropdown > .dropdown-toggle:hover span, .dropdown > .dropdown-toggle:active span, .dropdown > .dropdown-toggle:focus span { text-decoration: none; } .dropdown > .dropdown-menu { -webkit-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); -o-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); background: #fff; background: #f2f2ee; display: none; position: absolute; z-index: 12; } .dropdown.open > .dropdown-toggle { cursor: default; } .dropdown.open > .dropdown-menu { display: block; } #page-functions .dropdown .dropdown-menu, .nav-meta .dropdown .dropdown-menu { border: 1px solid #eee; border-bottom: 0; border-top: 0; text-align: left; min-width: 100%; } #page-functions .dropdown .dropdown-menu a, .nav-meta .dropdown .dropdown-menu a { display: block; padding: 6px 15px; } #page-functions .dropdown .dropdown-menu a:hover, #page-functions .dropdown .dropdown-menu a:focus, #page-functions .dropdown .dropdown-menu a:active, .nav-meta .dropdown .dropdown-menu a:hover, .nav-meta .dropdown .dropdown-menu a:focus, .nav-meta .dropdown .dropdown-menu a:active { background: #f0f0eb; text-decoration: none; } #page-functions .dropdown.open > .dropdown-toggle, .nav-meta .dropdown.open > .dropdown-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } #page-functions .dropdown.open > .dropdown-menu, .nav-meta .dropdown.open > .dropdown-menu { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } #page-functions .dropdown .dropdown-menu { padding: 10px 0; min-width: 1px; } #page-functions .dropdown .dropdown-menu li { display: table-cell; } #page-functions .dropdown .dropdown-menu a { display: inline; padding: 10px; } /* nojs */ .no-js .dropdown:hover .dropdown-menu { display: block; } .no-js .dropdown.quickGuide > .dropdown-menu { margin-bottom: -1px; border: 1px solid #dbdde0; border-bottom: 0; bottom: 39px; -webkit-box-shadow: 1px -5px 8px -5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px -5px 8px -5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 1px -5px 8px -5px rgba(0, 0, 0, 0.5); -o-box-shadow: 1px -5px 8px -5px rgba(0, 0, 0, 0.5); box-shadow: 1px -5px 8px -5px rgba(0, 0, 0, 0.5); border-top-right-radius: 3px; border-top-left-radius: 3px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .quickGuide.dropdown { position: relative; } .quickGuide.dropdown > .dropdown-toggle { font-family: "newsGothic_roman", Arial, Verdana, Helvetica, sans-serif; background: #fff; padding: 8px 40px 8px 15px; } .quickGuide.dropdown > .dropdown-toggle:after { position: absolute; right: 10px; top: 4px; font-size: 30px; font-size: 1.875rem; } .quickGuide.dropdown > .dropdown-toggle:hover { color: #909f00; } .quickGuide.dropdown > .dropdown-toggle:hover:after { color: #909f00; } .quickGuide.dropdown > .dropdown-menu { background: #fff; width: 100%; margin-top: -1px; border: 1px solid #dbdde0; border-top: 0; -webkit-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); -o-box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); box-shadow: 1px 10px 8px -5px rgba(0, 0, 0, 0.5); } .quickGuide.dropdown > .dropdown-menu a { display: block; padding: 8px 15px; text-decoration: none; } .quickGuide.dropdown > .dropdown-menu a:hover, .quickGuide.dropdown > .dropdown-menu a:focus, .quickGuide.dropdown > .dropdown-menu a:active { background: #ebebe5; } .quickGuide.dropdown.open > .dropdown-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .quickGuide.dropdown.open > .dropdown-menu { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /* nojs */ .no-js .dropdown:hover .dropdown-menu { display: block; } /* JS NavigatorThe Cash Market Navigator helps users to find information they are looking for. This content element is part of the homepages within the content area. The Navigator is also available throughout the Xetra and Cash Market websites via the meta navigation and is identic on both pages (except for the color scheme which corresponds to the respective entity layout). When starting the Navigator from the meta navigation, the steps are displayed in a layer below. The rest of the page does not change while using the Cash Market Navigator. In Step 1 users are asked who they are. The Navigator provides up to seven possible answers, e.g. “Media Representative” or “Trading Member”. The answers cover the primary target groups which were identified in the strategy phase. Clicking on an answer the user is led to the second step, refining the target groups. Some target groups do not require step two. Step three offers links tailored to the answers of the previous step(s). These links are either forwarding to respective landing pages, to pages on Xetra or Cash Market or to Börse Frankfurt. The landing pages are created by the CMDS editorial team.
Markeup: Styleguide 8.2 JS Navigator */ .navigator { position: relative; } .navigator h2 { font-size: 16px; font-size: 1rem; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; margin: 0; color: #181813; } .navigator .navigator-item .title { font-size: 32px; font-size: 2rem; margin: 10px 0 15px; line-height: 1; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; color: #909f00; } .navigator .navigator-item .footer_entities { background: #e7e6e3; position: absolute; z-index: 1; bottom: 0; left: 0; right: 0; padding: 5px 25px 20px; } .navigator .navigator-item .navigator-controls { margin: 10px 0; } .navigator .navigator-item .navigator-controls .navigator-back, .navigator .navigator-item .navigator-controls .navigator-restart { position: absolute; bottom: 10px; margin: 0; } .navigator .navigator-item .navigator-controls .navigator-back:before, .navigator .navigator-item .navigator-controls .navigator-back:after, .navigator .navigator-item .navigator-controls .navigator-restart:before, .navigator .navigator-item .navigator-controls .navigator-restart:after { position: static; } .navigator .navigator-item .navigator-controls .navigator-back span, .navigator .navigator-item .navigator-controls .navigator-restart span { font-size: 14px; font-size: 0.875rem; } .navigator .navigator-item .navigator-controls .navigator-back { left: 10px; } .navigator .navigator-item .navigator-controls .navigator-restart { right: 10px; } /* Navigator content area */ #main-content .navigator { height: 440px; background: #f2f2ee; padding: 25px 25px 20px 20px; } #main-content .navigator .navigator-item:first-child .linkList, #main-content .navigator .navigator-item:first-child .list-links { height: 200px; } #main-content .navigator .navigator-item .linkList, #main-content .navigator .navigator-item .list-links { overflow: auto; height: 264px; } #main-content .navigator .navigator-item .linkList li + li, #main-content .navigator .navigator-item .list-links li + li { border-color: auto; } #main-content .navigator .navigator-item a { color: #404b56; } #main-content .navigator .navigator-item a:hover { color: #909f00; } #main-content .navigator .navigator-item a:before, #main-content .navigator .navigator-item a:after { color: #b2b7bb; } #main-content .navigator .navigator-item a:hover:before, #main-content .navigator .navigator-item a:hover:after { color: #909f00; } #main-content .navigator .navigator-item .navigator-controls .navigator-back { bottom: 25px; left: 10px; } #main-content .navigator .navigator-item .navigator-controls .navigator-restart { bottom: 25px; right: 20px; } /* Navigator search-menu dropdown */ .nav-search .navigator .navigator-item .linkList li + li, .nav-search .navigator .navigator-item .list-links li + li { border-color: #194a85; } .nav-search .navigator .navigator-item a { color: #b2c2d6; } .nav-search .navigator .navigator-item a:hover { color: #fff; } .nav-search .navigator .navigator-item a:before, .nav-search .navigator .navigator-item a:after { color: #6586ad; } .nav-search .navigator .navigator-item a:hover:before, .nav-search .navigator .navigator-item a:hover:after { color: #a4b200; } .no-js .navigator.dropdown-menu { height: 360px; } .no-js .navigator.dropdown-menu .navigator { height: 360px; } .no-js .navigator.dropdown-menu .navigator-back, .no-js .navigator.dropdown-menu .navigator-restart { display: none; } .no-js .navigator { overflow: hidden; padding: 0; } .no-js .navigator .navigator-item { padding: 25px 25px 20px 20px; height: 440px; } /* JS Slider Styleguide 8.3 JS Slider */ /* JS Tab Styleguide 8.4 Tab */ .tab-container { position: relative; } .issuer .tab-container { padding: 0; background: #fff; } .logo + .tabs { margin-top: 12px; } ul.tabs-nav { font-size: 16px; font-size: 1rem; clear: both; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; margin: -12px 0 20px 0; border: 0; } ul.tabs-nav li { padding: 0; margin: 12px 20px 0 0; float: none; display: inline-block; } ul.tabs-nav li > * { color: #747471; display: inline-block; padding: 0 0 5px; border-bottom: 3px solid transparent; } ul.tabs-nav li > *:focus, ul.tabs-nav li > *:hover, ul.tabs-nav li > *:active { color: #909f00; border-color: #909f00; text-decoration: none; } ul.tabs-nav li.selected > *, ul.tabs-nav li.ui-tabs-active a { border-color: #909f00; color: #909f00; } /* nojs */ .no-js .tabs { overflow: auto; position: static; } .no-js .tab-content { height: auto; } /*@import 'partials/_career-dbg-footer'; @import 'partials/_career-dbg-header'; @import 'partials/_career-dbg-inpage-nav'; @import 'partials/_career-dbg-joboffer-search'; @import 'partials/_career-dbg-search-filters';*/ .page #main.dbg-career { position: relative; } .page #main.dbg-career .dbg-career-header .job-offers-hero { min-height: 687px; position: relative; padding-top: 278px; } .page #main.dbg-career .dbg-career-header .job-offers-hero-image { margin-top: -22px; } .page #main.dbg-career .dbg-career-header .job-offers-search { padding: 30px; width: 931px; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes { overflow: hidden; width: 931px; margin: 0 auto; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes form { margin-right: 30px; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes form:last-child { margin-right: 0; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button { background: #ebeced; width: 210.2px; padding: 10px 25px 25px 25px; height: 180px; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button:hover, .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button:focus { background: #fff; color: #909f00; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button:hover ul li.count, .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button:focus ul li.count { color: #fff; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button:hover ul li.type, .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button:focus ul li.type { color: #9FBDBD; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button ul { font-size: 17px; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button ul li { margin-bottom: 4px; text-align: left; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button ul li:last-child { margin-bottom: 0; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button ul li.count { font-size: 42px; color: #909f00; } .page #main.dbg-career .dbg-career-header .job-offers-location-boxes button ul li.type { color: #404b56; } .page #main.dbg-career .job-offers-map { margin-top: 70px; } .page #main.dbg-career .job-offers-map .svg-placeholder { position: relative; } .page #main.dbg-career .job-offers-map .svg-placeholder a text { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; font-size: 16px; } .page #main.dbg-career .job-offers-map .svg-placeholder#svg-map-2 { display: none; } .page #main.dbg-career .job-offers-map .svg-placeholder .toggle-link { font-weight: bold; position: absolute; } .page #main.dbg-career .job-offers-map .svg-placeholder .toggle-link:before { position: relative; bottom: 2px; } .page #main.dbg-career #in-page-navigation { width: 210px; } .page #main.dbg-career #in-page-navigation .down-arrow { color: #909f00; font-size: 19px; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; margin-left: -8px; } .page #main.dbg-career #in-page-navigation .down-arrow:before { font-family: "db-icon-font"; content: "\e901"; font-size: 26px; position: relative; top: 4px; } .page #main.dbg-career #in-page-navigation .contents-list { width: 225px; margin-left: -15px; } .page #main.dbg-career #in-page-navigation .contents-list li { position: relative; margin-bottom: 8px; overflow: hidden; } .page #main.dbg-career #in-page-navigation .contents-list li a { text-decoration: none; color: #181813; display: block; padding: 4px 14px; } .page #main.dbg-career #in-page-navigation .contents-list li a:hover { background: #ebeced; text-decoration: none; color: #181813; } .page #main.dbg-career #in-page-navigation .contents-list li a:hover:after, .page #main.dbg-career #in-page-navigation .contents-list li a:hover:before { content: ''; position: absolute; top: 0; background: #ebeced; right: -16px; width: 0; height: 0; border: 1em solid #fff; border-left: 1em solid transparent; } .page #main.dbg-career #in-page-navigation .contents-list li a.active { background: #f0f0f0; } .page #main.dbg-career #in-page-navigation .contents-list li a.active:after, .page #main.dbg-career #in-page-navigation .contents-list li a.active:before { content: ''; position: absolute; top: 0; background: #ebeced; right: -16px; width: 0; height: 0; border: 1em solid #fff; border-left: 1em solid transparent; } .page #main.dbg-career #in-page-navigation .contents-list li.multiple-line a:hover:after, .page #main.dbg-career #in-page-navigation .contents-list li.multiple-line a.active:after, .page #main.dbg-career #in-page-navigation .contents-list li.multiple-line a:hover:before, .page #main.dbg-career #in-page-navigation .contents-list li.multiple-line a.active:before { border: 1.75em solid #fff; border-left: 1em solid transparent; right: -1.688em; } .page #main.dbg-career #in-page-navigation .apply-button { display: block; margin-top: 20px; width: 150px; padding: 10px 15px; } .page #main.dbg-career #in-page-navigation .arrow-nav { width: 210px; } .page #main.dbg-career #in-page-navigation .arrow-nav li a.active { cursor: default; } .page #main.dbg-career #in-page-navigation .arrow-nav.stick { bottom: auto; position: fixed; z-index: 10000; top: 22px; } .page #main.dbg-career #in-page-navigation .arrow-nav.bottom { position: absolute; bottom: 0; top: auto; } .page #main.dbg-career .search-filters #job-offers-search-filters-form { margin-bottom: 10px; width: 100%; } .page #main.dbg-career .search-filters #job-offers-search-filters-form.tags-active { margin-bottom: 46px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .facets-filter-container { border-bottom: 1px solid #d4d4d4; margin-bottom: 20px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .clear-all-tags { display: inline-block; border: 0; color: #969696; font-size: 14px; padding: 5px 7px; margin-top: 5px; transition: none; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .clear-all-tags:hover, .page #main.dbg-career .search-filters #job-offers-search-filters-form .clear-all-tags:focus { color: #909f00; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .facet-tags { display: inline-block; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .facet-tags button { margin-right: 5px; background: #909f00; color: #fff; font-size: 14px; padding: 2px 12px; border-radius: 15px; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; margin-top: 5px; border: 1px solid #909f00; transition: none; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .facet-tags button:after { content: '\e900'; font-family: "db-icon-font"; margin-left: 10px; position: relative; top: 1.5px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .facet-tags button:hover, .page #main.dbg-career .search-filters #job-offers-search-filters-form .facet-tags button:focus { background: #fff; color: #909f00; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .facet-tags button:hover:after, .page #main.dbg-career .search-filters #job-offers-search-filters-form .facet-tags button:focus:after { color: #181813; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter-by { padding: 4px 18px 10px 0; top: 8px; color: #969696; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; font-size: 18px; float: left; position: relative; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter { float: left; position: relative; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .toggleBtnCareer { display: inline-block; margin-bottom: 0; font-size: 18px; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; color: #333; cursor: pointer; padding: 4px 18px 10px 18px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .toggleBtnCareer:after { font-family: "db-icon-font"; content: '\e603'; color: #b2b2b2; font-size: 23px; position: relative; top: 3px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .toggleBtnCareer.close { background: #ebeced; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .toggleBtnCareer.close:after { font-family: "db-icon-font"; content: '\e602'; color: #b2b2b2; font-size: 23px; position: relative; top: 3px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level { padding: 20px; background: #ebeced; position: absolute; width: 324px; z-index: 2; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container { overflow: visible; height: auto; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item { margin-top: 10px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item:first-child { margin-top: 0; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item .indicator { display: block; position: absolute; left: 0; width: 26px; height: 26px; top: 2px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAAsSAAALEgHS3X78AAAAO0lEQVRIx+3WMRUAIAzE0INXN+ffSasHJiS0C4mBv2Zl5tFAIUm2W5Gq0tZQQEBAQEBAQEB/QvG+q7sLBoQJMk/XtaEAAAAASUVORK5CYII=) no-repeat; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item .facet-checkbox { position: relative; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item .facet-checkbox label { display: inline-block; padding-left: 41px; font-size: 16px; margin-top: 6px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item .facet-checkbox label:hover { color: #909f00; text-decoration: underline; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item .facet-checkbox label input { position: absolute; z-index: -1; opacity: 0; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item.selected label { color: #909f00; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-list.first-level > .first-level-container > .list-item.selected > .facet-checkbox > label > .indicator { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAAsSAAALEgHS3X78AAAAsElEQVRIx+3WvQ2DMBAF4BfELG5Ygk3Oa6XCngQP8Sigo8kE6S9VKBAKtvmRIvl1rj75nc7yg6TihtQA0DTNpcgwDKhwUwpUoPMgawOsDXF7dATxflrOzrXn32iNHK5uq5o1ImJ+3ma3uq1qcpCkGXk/IYQX5vmdjOxW51wLEbOcc5GoGa2xHAQAQFJjItIr8FSRXlNDUqMhVdWuGzUnJLVK2x1THtUC/RFUf/9dV+cDYdcGwR3mGHwAAAAASUVORK5CYII=) no-repeat; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level > .first-level-container { overflow-y: scroll; height: 270px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level > .first-level-container > .list-item { margin: 0 0 25px 0; padding-bottom: 25px; width: 100%; border-bottom: 1px solid #d4d4d4; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level > .first-level-container > .list-item .indicator { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAAsSAAALEgHS3X78AAAAOklEQVRIx+3WMRUAIAzE0INXs2eolQsTEtqFxMBfszLzaKCQJNutSFVpayggICAgICAgoD+heN/V3QVFzge+OiOH0gAAAABJRU5ErkJggg==) no-repeat; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level > .first-level-container > .list-item.selected > .facet-checkbox > label > .indicator { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAAsSAAALEgHS3X78AAAAo0lEQVRIx+3WsRHDIAwF0J+cp8gAzKFNUMtC0IpNmMOdm0yQ3q7iy3G+GGRjN6ijeqcv0PHw3s+4oAYAcM41RUIIeOKi6lCHzoOYE5hT2Ts6gsQ4rmcROr+jHDkc3VY0OWKt+dvNbnRb0WiQqhnFOCKlN6bpU43sRidCsNasZy1SNKMc0yDFt+4X0yBVMxIhEL3AbNpvBi3Sl2qH7oGG77+rdS3LnkYqex3OXwAAAABJRU5ErkJggg==) no-repeat; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level > .first-level-container > .list-item > .facet-checkbox > label { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level > .first-level-container > .list-item:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level .second-level .list-item { margin-top: 10px; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level .second-level .list-item .indicator { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAAsSAAALEgHS3X78AAAAO0lEQVRIx+3WMRUAIAzE0INXN+ffSasHJiS0C4mBv2Zl5tFAIUm2W5Gq0tZQQEBAQEBAQEB/QvG+q7sLBoQJMk/XtaEAAAAASUVORK5CYII=) no-repeat; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level .second-level .list-item.selected > .facet-checkbox > label > .indicator { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAAsSAAALEgHS3X78AAAAsElEQVRIx+3WvQ2DMBAF4BfELG5Ygk3Oa6XCngQP8Sigo8kE6S9VKBAKtvmRIvl1rj75nc7yg6TihtQA0DTNpcgwDKhwUwpUoPMgawOsDXF7dATxflrOzrXn32iNHK5uq5o1ImJ+3ma3uq1qcpCkGXk/IYQX5vmdjOxW51wLEbOcc5GoGa2xHAQAQFJjItIr8FSRXlNDUqMhVdWuGzUnJLVK2x1THtUC/RFUf/9dV+cDYdcGwR3mGHwAAAAASUVORK5CYII=) no-repeat; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet .facet-list.first-level .second-level .list-item.selected label { color: #909f00; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter.location-facet.small .facet-list.first-level > .first-level-container { overflow-y: auto; height: auto; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container { margin-top: 20px; display: block; text-align: center; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li { /*display: inline-block;*/ float: left; display: block; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li:last-child button { margin-right: 0; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button { background: #fff; border: 0; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; margin: 0 10px 0 0; transition: none; display: block; width: 137px; text-align: left; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.submit-btn { background: #fff; color: #909f00; display: none; border: 1px solid #fff; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.submit-btn:hover, .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.submit-btn:focus { background: #fff; color: #909f00; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.reset-btn, .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.close-btn { border: 1px solid #fff; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.reset-btn:hover, .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.reset-btn:focus, .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.close-btn:hover, .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.close-btn:focus { border: 1px solid #909f00; color: #909f00; } .page #main.dbg-career .search-filters #job-offers-search-filters-form .filter .facet-btn-container li button.reset-btn { display: none; } .page #main.dbg-career .job-offers-search { background: #0c519e; margin: 0 auto 30px auto; } .page #main.dbg-career .job-offers-search form { background: #ebeced; padding: 10px; position: relative; } .page #main.dbg-career .job-offers-search form #search-job-input { color: #404b56; border: 0; background: none; font-size: 20px; width: 95%; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; } .page #main.dbg-career .job-offers-search form button[type=submit] { background: #ebeced url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAAEhyb7BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk0NjM0QzUyMDhBRTExRTdCQzFCOURBMDg5MzI4RUM2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk0NjM0QzUzMDhBRTExRTdCQzFCOURBMDg5MzI4RUM2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTQ2MzRDNTAwOEFFMTFFN0JDMUI5REEwODkzMjhFQzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTQ2MzRDNTEwOEFFMTFFN0JDMUI5REEwODkzMjhFQzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7ZTCoFAAABqklEQVR42mL8//8/Axwgc5gQwjPNAQKIEUUZUATBAwggqKaZslCZt8iaz0OVCoE4AAGEbgiyQTPrsJgM1IIkCMLL0bUfAgggsKGMjLOEgbw3SDK/GBjS2dHdiGE9shgTQufMIiQFvRAxqIMg1jEyYDHpJJAwA+KFAAGEzaMYAOa1g0DCDkk8AejwhUiRMTMeiJ9jOnqmIEwRyOHTgVgFzYZkIJ6F7DtQ1MiiKWJBOAXCAbnlHpL7QPRMWBQiOzwYSKzB4jGW///T/jJi9/RMfiDxAeLwNEYm7IrSPwIJASB+DeIBBBhaiM9kBhLxkHBiMAFiDiB+AsRbgLgbqPk+NiNhwQQyAEjPPABk/AHiVlB0QUMFlFoCgVgUEgDgMA5jwGUaJObAimLxR/TMo1B1uThcxGALxD+BTl9MIMk0QOlgdAmYQTMh3pg5D49rQAHZAuWsxkiUiMAGpTuGBVDxfUA8H4gfAbESEKcAsTWSvmVAHAf0wV+Y17Dkk5mgKI0AYgcgFgfiF0AMSv2bgXgdNO+gGAhOSLgzHE4vghLZLiQD3wENEiYqUxIDAK6ooU3QaDM0AAAAAElFTkSuQmCC) no-repeat 0 50%; height: 18px; width: 18px; position: absolute; right: 20px; top: 20px; } .page #main.dbg-career .job-offers-search form button[type=submit] span { visibility: hidden; display: none; } .page #main.dbg-career #content.beside-supplement .teaserBox { padding: 0; margin: 0 0 70px; } .page #main.dbg-career #content.beside-supplement > .box + .box { margin-left: 30px; } .page #main.dbg-career #content .teaserBox { padding: 30px; margin: 70px 0 0 0; } .page #main.dbg-career #content .teaserBox .linkButton .asButton { display: inline-block; padding: 10px 60px 10px 15px; margin-top: 20px; } .page #main.dbg-career #content .teaserBox .linkButton .asButton:hover, .page #main.dbg-career #content .teaserBox .linkButton .asButton:focus { text-decoration: none; } .page #main.dbg-career #content .teaserBox.theme-dark { background: #909f00; color: #fff; } .page #main.dbg-career #content .teaserBox.theme-dark h2, .page #main.dbg-career #content .teaserBox.theme-dark h2 a { color: #fff; } .page #main.dbg-career #content .teaserBox.theme-dark .linkButton .asButton { color: #909f00; background: #fff; border: 1px solid #909f00; } .page #main.dbg-career #content .teaserBox.theme-light { background: #ebeced; } .page #main.dbg-career #content .teaserBox.theme-light .paragraph a { color: #909f00; border-bottom: 1px solid #d4d4d4; text-decoration: none; } .page #main.dbg-career #content .teaserBox.theme-light .paragraph a:hover, .page #main.dbg-career #content .teaserBox.theme-light .paragraph a:focus { border-bottom: 1px solid #909f00; } .page #main.dbg-career #content .teaserBox.theme-light .linkButton .asButton { background: #fff; color: #909f00; border: 1px solid #909f00; } .page #main.dbg-career #content .teaserBox.theme-light .linkButton .asButton:hover, .page #main.dbg-career #content .teaserBox.theme-light .linkButton .asButton:focus { text-decoration: none; background: #fff; color: #909f00; } .page #main.dbg-career #content .teaserBox .link-list { margin-top: 10px; } .page #main.dbg-career #content .teaserBox .link-list .list-links li { max-width: 390.5px; } .page #main.dbg-career #content .teaserBox .link-list .list-links li:last-child { padding-bottom: 0; } .page #main.dbg-career #content .teaserBox .link-list .list-links li a.icon.document:before { color: #909f00; } .page #main.dbg-career #content .teaserBox .link-list .list-links li a:hover, .page #main.dbg-career #content .teaserBox .link-list .list-links li a:focus { color: #909f00; } .page #main.dbg-career #content .teaserBox.half-width { width: 450.5px; } .page #main.dbg-career #content .teaserBox.half-width:nth-child(2n + 1) { margin-left: 30px; } .page #main.dbg-career #content .teaserBox.full-width { width: 100%; float: none; margin-top: 30px; cursor: pointer; } .page #main.dbg-career #content .teaserBox h2 { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; font-size: 1.25rem; } .page #main.dbg-career #content .job-offers-text-teaser-collection { overflow: hidden; margin-top: 70px; } .page #main.dbg-career #content .job-offers-text-teaser-collection h2 { width: 100%; } .page #main.dbg-career #content .job-offers-text-teaser-collection .teaserBox { margin-top: 30px; cursor: pointer; } .page #main.dbg-career #content .job-offers-text-teaser-collection .teaserBox.job-offers-text-contact-teaser { cursor: default; } .page #main.dbg-career #content .job-offers-text-teaser-collection .teaserBox:nth-of-type(-n+2) { margin-top: 0; } .page #main.dbg-career #content .job-offers-text-teaser-collection .teaserBox .link-list { width: 100%; } .page #main.dbg-career #content .job-offers-text-teaser-collection.equal-heights { -ms-display: flex; display: flex; flex-wrap: wrap; } .page #main.dbg-career #content .job-offers-text-teaser-collection.equal-heights .teaserBox { -ms-display: flex; display: flex; flex-wrap: wrap; flex-direction: column; } .page #main.dbg-career #content .job-offers-text-teaser-collection.equal-heights .teaserBox .item-text { flex: 1 0 auto; } .page #main.dbg-career #content .job-offers-text-teaser-collection .job-offers-text-contact-teaser .contact-block a.icon:last-of-type { padding-bottom: 0; } .page #main.dbg-career .job-offers-similar-jobs-teaser { margin-top: 70px; } .page #main.dbg-career .job-offers-similar-jobs-teaser h3 { color: #909f00; } .page #main.dbg-career .job-offers-similar-jobs-teaser.grid6Col { float: right; clear: none; width: 690px; } .page #main.dbg-career .job-offers-similar-jobs-teaser .similar-jobs-teaser-list-item { border-bottom: 1px solid #d4d4d4; padding: 10px 0; font-size: 16px; } .page #main.dbg-career .job-offers-similar-jobs-teaser .similar-jobs-teaser-list-item:first-child { padding-top: 0; } .page #main.dbg-career .job-offers-similar-jobs-teaser .similar-jobs-teaser-list-item:last-child { border-bottom: 0; padding-bottom: 0; } .page #main.dbg-career .job-offers-similar-jobs-teaser .similar-jobs-teaser-list-item a { display: block; } .page #main.dbg-career .job-offers-similar-jobs-teaser .similar-jobs-teaser-list-item a span { display: block; } .page #main.dbg-career .job-offers-similar-jobs-teaser .similar-jobs-teaser-list-item a span.title { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .page #main.dbg-career .mwf-form { background: #ebeced; padding: 25px; margin-top: 15px; } .page #main.dbg-career .mwf-form > ul > li + li { margin-top: 0; } .page #main.dbg-career .mwf-form > ul + ul { margin: 0; padding: 0; } .page #main.dbg-career .mwf-form .mwf-field { margin-bottom: 15px; } .page #main.dbg-career .mwf-form .mwf-field > .mwf-input { width: 100%; } .page #main.dbg-career .mwf-form .mwf-button { margin: 0; } .page #main.dbg-career .mwf-form .mwf-button.mwf-next, .page #main.dbg-career .mwf-form .mwf-button.mwf-cancel { float: none; } .page #main.dbg-career .mwf-form .mwf-button.mwf-cancel input { background: #404b56; border: 1px solid #404b56; color: #fff; } .page #main.dbg-career .mwf-form .mwf-button.mwf-cancel:hover input { background: #fff; border: 1px solid #909f00; color: #909f00; } .page #main.dbg-career .mwf-form .mwf-label { text-align: left; margin-bottom: 5px; display: inline-block; width: auto; padding-right: 0; } .page #main.dbg-career .mwf-form .mwf-input { display: block; } .page #main.dbg-career .mwf-form .mwf-input [type="text"], .page #main.dbg-career .mwf-form .mwf-input textarea { width: 60%; border-color: #d4d4d4; padding: 0 12px; } .page #main.dbg-career .mwf-form .mwf-input [type="text"] { height: 36px; } .page #main.dbg-career .mwf-form .mwf-input textarea { padding: 8px 12px; } .page #main.dbg-career .mwf-form .mwf-error { margin-top: 5px; } .page #main.dbg-career .mwf-form .mwf-error, .page #main.dbg-career .mwf-form .mwf-lmwf-error { font-size: 1.0625rem; } .page #main.dbg-career .mwf-form .mwf-error label, .page #main.dbg-career .mwf-form .mwf-error p, .page #main.dbg-career .mwf-form .mwf-error .mwf-required, .page #main.dbg-career .mwf-form .mwf-lmwf-error label, .page #main.dbg-career .mwf-form .mwf-lmwf-error p, .page #main.dbg-career .mwf-form .mwf-lmwf-error .mwf-required { color: #d14513; } .page #main.dbg-career .mwf-form .mwf-error .mwf-input [type="text"], .page #main.dbg-career .mwf-form .mwf-error .mwf-input [type="password"], .page #main.dbg-career .mwf-form .mwf-error .mwf-input [type="email"], .page #main.dbg-career .mwf-form .mwf-error .mwf-input [type="url"], .page #main.dbg-career .mwf-form .mwf-error .mwf-input [type="search"], .page #main.dbg-career .mwf-form .mwf-error .mwf-input textarea, .page #main.dbg-career .mwf-form .mwf-lmwf-error .mwf-input [type="text"], .page #main.dbg-career .mwf-form .mwf-lmwf-error .mwf-input [type="password"], .page #main.dbg-career .mwf-form .mwf-lmwf-error .mwf-input [type="email"], .page #main.dbg-career .mwf-form .mwf-lmwf-error .mwf-input [type="url"], .page #main.dbg-career .mwf-form .mwf-lmwf-error .mwf-input [type="search"], .page #main.dbg-career .mwf-form .mwf-lmwf-error .mwf-input textarea { border: 1px solid #d14513; background: #ffebeb; } .page #main.dbg-career .mwf-form .mwf-required { color: #181813; } .page #main.dbg-career .directContact .title { margin-bottom: 16px; } .page #main.dbg-career .grid8Col { width: 100%; } .page #main.dbg-career .job-offers-hero-image { width: 100%; position: absolute; overflow: hidden; height: 570px; } .page #main.dbg-career .job-offers-hero-image img { min-width: 1680px; width: 100%; position: absolute; left: 0; top: 0; } .page #main.dbg-career .link-arrow:before { content: '\e905'; font-size: 28px; left: -4px; top: 5px; font-family: "db-icon-font"; color: #909f00; position: relative; } .page #main.dbg-career .link-arrow:hover, .page #main.dbg-career .link-arrow:hover span { text-decoration: none; } .page #main.dbg-career .apply-button { background: #fff; color: #909f00; padding: 10px 60px 10px 15px; display: inline-block; border: 1px solid #909f00; } .page #main.dbg-career .apply-button:hover, .page #main.dbg-career .apply-button:focus { text-decoration: none; background: #fff; color: #909f00; } .page #main.dbg-career #content { width: 931px; margin: 44px auto 70px auto; float: none; } .page #main.dbg-career #content.beside-supplement { float: right; width: 690px; } .page #main.dbg-career #content .job-offers-image-teaser-list li { display: block; background: #ebeced; max-height: 200px; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item { overflow: hidden; margin-bottom: 25px; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .image { width: 330px; height: 200px; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .image.float--left { margin: 0; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .image.float--left img { max-width: 100%; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block { padding: 30px; float: left; width: 601px; height: 200px; cursor: pointer; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block h3 { color: #909f00; margin-bottom: 10px; display: inline-block; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block h3:hover { text-decoration: underline; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block .text p { margin-bottom: 15px; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block .text a { color: #909f00; border-bottom: 1px solid #d4d4d4; text-decoration: none; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block .text a:hover, .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block .text a:focus { border-bottom: 1px solid #909f00; } .page #main.dbg-career #content .job-offers-image-teaser-list li .item .text-block .link-arrow:focus { text-decoration: none; color: #909f00; } .page #main.dbg-career #content .job-offers-video-with-text-teasers { -ms-display: flex; display: flex; flex-wrap: wrap; margin-top: 70px; width: 100%; } .page #main.dbg-career #content .job-offers-video-with-text-teasers h2 a { color: #909f00; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .video { width: 560px; margin-right: 40px; align-self: flex-start; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .video .jwplayer { margin-bottom: 0; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .video .jwplayer .jwdisplayIcon { background: rgba(0, 0, 61, 0.85); } .page #main.dbg-career #content .job-offers-video-with-text-teasers .text-teasers .teaserBox { margin-bottom: 0px; margin-top: 0; background: #ebeced; padding: 30px; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .text-teasers.single-text-teaser { width: 331px; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .text-teasers.two-text-teasers { -ms-display: flex; display: flex; flex-wrap: wrap; flex-direction: column; width: 331px; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .text-teasers.two-text-teasers > div { flex: 1 0 auto; background: #ebeced; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .text-teasers.two-text-teasers > div.first-text-teaser { margin-bottom: 15px; } .page #main.dbg-career #content .job-offers-video-with-text-teasers .text-teasers.two-text-teasers > div.second-text-teaser { margin-top: 15px; } .page #main.dbg-career #content .btn-plus { background: #fff; color: #909f00; padding: 10px 60px 10px 15px; display: inline-block; /*margin-top: 10px;*/ border: 1px solid #909f00; } .page #main.dbg-career #content .btn-plus:before { content: '+'; margin-right: 10px; } .page #main.dbg-career #content .btn-plus:hover, .page #main.dbg-career #content .btn-plus:active, .page #main.dbg-career #content .btn-plus:focus { text-decoration: none; background: #fff; color: #909f00; } .page #main.dbg-career #content .job-offers-search .intro-text p { font-size: 22px; color: #404b56; } .page #main.dbg-career #content .job-offers-search-page-container .results { font-size: 22px; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results { font-size: 1rem; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list a:last-child li { border-bottom: 1px solid #969696; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list a:focus { color: #909f00; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer { padding: 0 0 14px; margin: 0 0 17px; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer #job-offers-search-filters-form { width: 100%; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > div, .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > form > div { display: inline-block; vertical-align: top; padding-right: 15px; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > div > button, .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > form > div > button { padding-left: 0; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > div > button:after, .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > form > div > button:after { font-family: "db-icon-font"; content: '\e903'; font-size: 20px; position: relative; top: 2px; padding-left: 3px; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > div:last-child, .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer > form > div:last-child { padding-right: 0; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer.headline, .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer .job { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer.headline { border-bottom: 1px solid #969696; overflow: hidden; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer .job { width: 34%; } .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer .location, .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer .company, .page #main.dbg-career #content .job-offers-search-page-container .job-offers-search-results .search-results-list .job-offer .level { width: 22%; } .page #main.dbg-career #content .job-offer-social-share { margin-top: 70px; } .page #main.dbg-career #content .job-offer-social-share.grid6Col { float: right; clear: none; width: 690px; } .page #main.dbg-career #content .job-offer-social-share h3 { color: #909f00; margin-top: 0; } .page #main.dbg-career #content .job-offer-social-share .nav-socials li + li { padding-left: 20px; } .page #main.dbg-career #content .job-offer-social-share .nav-socials li .icon:before, .page #main.dbg-career #content .job-offer-social-share .nav-socials li .fancybox-prev span:before, .fancybox-prev .page #main.dbg-career #content .job-offer-social-share .nav-socials li span:before, .page #main.dbg-career #content .job-offer-social-share .nav-socials li .fancybox-next span:before, .fancybox-next .page #main.dbg-career #content .job-offer-social-share .nav-socials li span:before { color: #747471; font-size: 26px; } .page #main.dbg-career #content .job-offer-social-share .nav-socials li .icon:hover:before, .page #main.dbg-career #content .job-offer-social-share .nav-socials li .fancybox-prev span:hover:before, .fancybox-prev .page #main.dbg-career #content .job-offer-social-share .nav-socials li span:hover:before, .page #main.dbg-career #content .job-offer-social-share .nav-socials li .fancybox-next span:hover:before, .fancybox-next .page #main.dbg-career #content .job-offer-social-share .nav-socials li span:hover:before { color: #909f00; } .page #main.dbg-career #content #job-content.grid6Col { float: right; clear: none; width: 690px; } .page #main.dbg-career #content #job-content .facts-table { width: 50%; float: left; border-bottom: 1px solid #d4d4d4; } .page #main.dbg-career #content #job-content .facts-table li { float: left; padding: 12px 0; } .page #main.dbg-career #content #job-content .facts-table li.fact-name { width: 34%; } .page #main.dbg-career #content #job-content .facts-table li.fact-value { font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; width: 66%; } .page #main.dbg-career #content #job-content #localization-warning { margin: 0; padding: 0; color: #F66; } .page #main.dbg-career #content #job-content #facts { padding-bottom: 25px; } .page #main.dbg-career #content #job-content #facts .facts-table-container { -ms-display: flex; display: flex; flex-wrap: wrap; } .page #main.dbg-career #content #job-content .joboffer-blockwrapper { padding: 25px 0 25px 0; } .page #main.dbg-career #content #job-content .joboffer-blockwrapper .rte--list { margin-bottom: 0; } .page #main.dbg-career #content #job-content .joboffer-blockwrapper .rte--list > li + li { margin-top: 15px; } .page #main.dbg-career #content #job-content .joboffer-blockwrapper#description { padding-bottom: 50px; } .page #main.dbg-career #content #job-content .joboffer-blockwrapper#description p:last-child { margin-bottom: 0; } .page #main.dbg-career #content #job-content .joboffer-blockwrapper h3 { color: #909f00; } .page #main.dbg-career #dbg-context-footer { background: #ebeced; } .page #main.dbg-career #dbg-context-footer .context-footer-inner { width: 981px; padding: 40px 25px; margin: 0 auto; } .page #main.dbg-career #dbg-context-footer .context-footer-inner .content { margin: 0 -15px; overflow: hidden; } .page #main.dbg-career #dbg-context-footer .context-footer-inner .content .link-list { float: left; width: 25%; } .page #main.dbg-career #dbg-context-footer .context-footer-inner .content .link-list .container { margin: 0 15px; } .page #main.dbg-career #dbg-context-footer .context-footer-inner .content .link-list .list-links li { border: 0; padding: 6px 0 5px; } .page #main.dbg-career #dbg-context-footer .context-footer-inner .content .link-list .list-links li a:before, .page #main.dbg-career #dbg-context-footer .context-footer-inner .content .link-list .list-links li a:focus { color: #909f00; } @media screen and (max-width: 1680px) { .page #main.dbg-career .job-offers-hero-image img { left: 50%; margin-left: -840px; } } /* DBCORP-354 Ersten 1-3 Bullets unter "Ihre Qualifikation/Your qualifications" müssen raus */ #qualifications li.qualification-type-other { display: none; } /*@import 'partials/_image-teaser-list'; @import 'partials/_location-map'; @import 'partials/_mwf-form'; @import 'partials/_similar-jobs-teaser'; @import 'partials/_teaser-boxes'; @import 'partials/_text-teaser-collection';*/ /*@import 'partials/_eintracht-boxes'; @import 'partials/_eintracht-hero'; @import 'partials/_eintracht-social'; @import 'partials/_eintracht-teaser'; @import 'partials/_eintracht-teaserbox';*/ .page #main.dbg-eintracht { position: relative; } .page #main.dbg-eintracht .eintracht-hero { min-height: 687px; position: relative; padding-top: 278px; } .page #main.dbg-eintracht .eintracht-teaser { padding: 30px; width: 931px; background: #fff; margin: 0 auto 30px auto; } .page #main.dbg-eintracht .eintracht-teaser a { color: #909f00; } .page #main.dbg-eintracht .eintracht-teaser p:last-of-type { margin-bottom: 0; } .page #main.dbg-eintracht .eintracht-boxes { overflow: hidden; width: 931px; margin: 0 auto; } .page #main.dbg-eintracht .eintracht-boxes .box { margin-right: 30px; float: left; } .page #main.dbg-eintracht .eintracht-boxes .box:last-child { margin-right: 0; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list { background: #ebeced; width: 210.2px; padding: 25px; height: 180px; display: block; font-size: 17px; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list:hover { background: #909f00; color: #fff; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list:hover .text { color: #fff; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list:hover .subtext { color: #9FBDBD; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list li { margin-bottom: 4px; text-align: left; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list .text { font-size: 42px; color: #909f00; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list .text p { margin-bottom: 0; } .page #main.dbg-eintracht .eintracht-boxes .eintracht-box-list .subtext { color: #606060; } .page #main.dbg-eintracht #content .teaserBox { padding: 0; } .page #main.dbg-eintracht .social-timeline ul.list { max-height: 449px; } .page #main.dbg-eintracht div.instagram-widget h2 { margin-bottom: 47px; } .page #main.dbg-eintracht #content .teaserBox.instagram-widget { margin-left: 30px; } .page #main.dbg-eintracht .instagram-widget-list { width: 100%; margin: 0; } .page #main.dbg-eintracht .instagram-widget-list li { width: 32%; display: inline-block; margin: 1%; } .page #main.dbg-eintracht .instagram-widget-list li:nth-child(3n) { margin-right: 0; } .page #main.dbg-eintracht .instagram-widget-list li:nth-child(3n+1) { margin-left: 0; } .page #main.dbg-eintracht #content { margin-top: 0; } .page #main.dbg-eintracht #content.without-boxes { margin-top: 172px; } #main-content #content .dbgregister { margin-bottom: 35px; } #main-content #content .dbgregister .p--heading-2 { margin: 30px 0 0 0; } #main-content #content .dbgregister .register .p--heading-2, #main-content #content .dbgregister .login .p--heading-2 { margin: 0 0 21px 0; } #main-content #content .dbgregister .p--heading-3 { margin: 30px 0 15px 0; } #main-content #content .dbgregister .p--heading-3:first-of-type { margin-top: 0; } #main-content #content .dbgregister .form { background: #ebeced; padding: 25px; margin-top: 15px; } #main-content #content .dbgregister .form input { display: block; } #main-content #content .dbgregister .form input[type="text"], #main-content #content .dbgregister .form input[type="password"] { width: 60%; margin-bottom: 15px; } #main-content #content .dbgregister .form input[type="checkbox"] { display: inline-block; margin: 0 5px 5px 0; } #main-content #content .dbgregister .form input.error { border: 1px solid #d14513; background: #ffebeb; } #main-content #content .dbgregister .form .button { margin-top: 15px; } #main-content #content .dbgregister .form label { margin-bottom: 5px; display: inline-block; } #main-content #content .dbgregister .form label.label--acceptedPolicy { font-size: 0.875rem; } #main-content #content .dbgregister .form .hints { margin-bottom: 15px; font-size: 0.875rem; width: 60%; } #main-content #content .dbgregister .form .hints.hints--full { width: 100%; } #main-content #content .dbgregister .form select, #main-content #content .dbgregister .form .quickGuide.dropdown > .dropdown-toggle { display: block; width: 60%; margin-bottom: 15px; cursor: pointer; } #main-content #content .dbgregister .errors, #main-content #content .dbgregister div.error { color: #d14513; margin-top: 15px; } #main-content #content .dbgregister .step-container input { display: inline-block; } #main-content #content .dbgregister .radio-container { margin-bottom: 10px; } #main-content #content .dbgregister .radio-container .radiobutton-container { margin-bottom: 5px; } #main-content #content .dbgregister .radio-container .radiobutton-container:last-of-type { margin-bottom: 0; } #main-content #content .dbgregister .radio-container input { display: inline-block; margin-right: 5px; } #main-content #content .dbgregister .radio-container label { margin-bottom: 0; } #main-content #content .account { margin-bottom: 35px; } #main-content #content .account.overview .main-title { float: left; } #main-content #content .account .logout.container { float: right; margin-top: -2px; } #main-content #content .account .introduction { clear: both; } #main-content #content .account.saved .main-title { float: none; } #main-content #content .account .edit #command .button { margin-top: 0; } #main-content #content .button.importantButton { border: 1px solid #909f00; } #main-content #content .button.grayButton { background: #404b56; border: 1px solid #404b56; } #main-content #content .button.grayButton:hover, #main-content #content .button.grayButton:focus { color: #909f00; border: 1px solid #909f00; background: #fff; } #main-content #content .textLinkButton { color: #fff; background: #909f00; padding: 6px 12px; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; border: 1px solid #909f00; } #main-content #content .textLinkButton:hover, #main-content #content .textLinkButton:focus { color: #909f00; border: 1px solid #909f00; background: #fff; text-decoration: none; } #main-content #content #loginData a { font-size: 0.875rem; } #main-content #content #userdetails .p--heading-3.p--heading-3--privacy { margin-top: 40px; } #main-content #content #userdetails select, #main-content #content #userdetails .quickGuide.dropdown > .dropdown-toggle { display: block; width: 60%; } #main-content #content #serviceOptions .checkbox-container { display: block; } #main-content #content #pressServiceData > span { display: block; } #main-content #content .services.paragraph .p--heading-3:after { font-family: "db-icon-font"; color: #181813; font-size: 25px; margin-left: 10px; content: '\e90c'; position: relative; top: 5px; } #main-content #content .services.paragraph .p--heading-3.selected:after { content: '\e90b'; } #main-content #content .services.paragraph .button { margin-top: 0; } .mwf-pager-fix { display: none; } .mwf-hidden { display: none !important; } @media screen and (min-width: 0px) and (max-width: 767px) { /* Stage Module (Slider) - Size S */ #stage { position: relative; overflow: hidden; } #stage .slider-control { position: absolute; } #stage .slider-control .icon:after, #stage .slider-control .fancybox-prev span:after, .fancybox-prev #stage .slider-control span:after, #stage .slider-control .fancybox-next span:after, .fancybox-next #stage .slider-control span:after, #stage .slider-control .icon:before, #stage .slider-control .fancybox-prev span:before, .fancybox-prev #stage .slider-control span:before, #stage .slider-control .fancybox-next span:before, .fancybox-next #stage .slider-control span:before { padding: 0; } #stage .slider-control > * { display: inline-block; } #stage .pagination-switch { background: #b2b7bb; margin-right: 16px; opacity: 1; } #stage .pagination-switch.active-switch, #stage .pagination-switch.active-switch:hover { background: transparent; border-radius: 14px; cursor: default; height: 14px; width: 14px; } #stage .pagination-switch:hover { background: #909f00; } #stage .slider-controler { z-index: 20; cursor: pointer; margin-left: -4px; } #stage .slider-controler .icon:hover:before, #stage .slider-controler .fancybox-prev span:hover:before, .fancybox-prev #stage .slider-controler span:hover:before, #stage .slider-controler .fancybox-next span:hover:before, .fancybox-next #stage .slider-controler span:hover:before { color: #b2b7bb; } /* OVERVIEWPAGE STAGE MODULE XETRA & DBCM - Slidermodule with image * ========================================================================== */ #stage.withImg .slider-container { height: auto; } #stage.withImg .slider-container .media, #stage.withImg .slider-container .item-text { float: none; height: auto; margin: 25px 0; padding: 0; width: 100%; } #stage.withImg .slider-container .media img, #stage.withImg .slider-container .item-text img { width: auto; height: auto; max-width: 100%; } #stage.withImg .slider-container .media { height: 35%; height: 60vw; } #stage.withImg .slider-container .slide a { color: #909f00; } #stage.withImg .slider-container .slide .title { font-size: 19px; font-size: 1.1875rem; margin-bottom: 10px; line-height: 1.25; max-width: 100%; } #stage.withImg .slider-container .slider-control { position: static; width: 100%; padding: 0; } /* HOMEPAGE STAGE MODULE XETRA & DBCM * ========================================================================== */ .homepage #stage.stage-dbcm { position: relative; overflow: hidden; width: 100%; } .homepage #stage.stage-dbcm .slider-container { height: auto; background: #24292d; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide { color: #fff; opacity: 1; background: #24292d; height: auto; padding: 19px 25px 0 22px; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide a { color: #fff; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide .title { font-size: 32px; font-size: 2rem; margin-bottom: 10px; line-height: 1.25; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; vertical-align: top; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide p { max-width: 500px; } .homepage #stage.stage-dbcm .slider-control { position: static; margin: 25px; } .homepage #stage.stage-xetra.withImg { width: 100%; margin: 5px 0; } .homepage #stage.stage-xetra.withImg .slider-container { height: auto; background: #fff; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide { background: #fff; color: #181813; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .item-text { width: 100%; padding: 0 20px; float: none; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .item-text p { display: none; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .media { float: none; width: 100%; height: auto; margin: 0; background: #0c519e; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .media img { width: 100%; height: auto; min-height: 0; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .title { font-size: 25px; font-size: 1.5625rem; margin-bottom: 0; line-height: 1.25; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; max-width: 100%; vertical-align: top; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide a { color: #909f00; } .homepage #stage.stage-xetra.withImg .slider-control { width: 100%; padding: 0 25px 25px; left: 0; } } @media screen and (min-width: 768px) and (max-width: 1023px) { /* Stage Module (Slider) */ #stage { position: relative; overflow: hidden; } #stage .slider-control { position: absolute; } #stage .slider-control .icon:after, #stage .slider-control .fancybox-prev span:after, .fancybox-prev #stage .slider-control span:after, #stage .slider-control .fancybox-next span:after, .fancybox-next #stage .slider-control span:after, #stage .slider-control .icon:before, #stage .slider-control .fancybox-prev span:before, .fancybox-prev #stage .slider-control span:before, #stage .slider-control .fancybox-next span:before, .fancybox-next #stage .slider-control span:before { padding: 0; } #stage .slider-control > * { display: inline-block; } #stage .pagination-switch { background: #b2b7bb; margin-right: 16px; opacity: 1; } #stage .pagination-switch.active-switch, #stage .pagination-switch.active-switch:hover { background: transparent; border-radius: 14px; cursor: default; height: 14px; width: 14px; } #stage .pagination-switch:hover { background: #909f00; } #stage .slider-controler { z-index: 20; cursor: pointer; margin-left: -4px; } #stage .slider-controler .icon:hover:before, #stage .slider-controler .fancybox-prev span:hover:before, .fancybox-prev #stage .slider-controler span:hover:before, #stage .slider-controler .fancybox-next span:hover:before, .fancybox-next #stage .slider-controler span:hover:before { color: #b2b7bb; } /* OVERVIEWPAGE STAGE MODULE XETRA & DBCM - Slidermodule with image * ========================================================================== */ #stage.withImg .slider-container { height: 230px; } #stage.withImg .slider-container .media { float: left; width: 47.826%; height: 230px; overflow: hidden; } #stage.withImg .slider-container .item-text { float: right; padding-top: 15px; height: 185px; overflow: hidden; } #stage.withImg .slider-container .item-text, #stage.withImg .slider-container .slider-control { width: 52.174%; padding-left: 30px; } #stage.withImg .slider-container .slide a { color: #909f00; } #stage.withImg .slider-container .slide .title { font-size: 19px; font-size: 1.1875rem; margin-bottom: 10px; line-height: 1.25; max-width: 100%; } #stage.withImg .slider-control { padding-bottom: 6px; bottom: 0; right: 0; } /* HOMEPAGE STAGE MODULE XETRA & DBCM * ========================================================================== */ .homepage #stage.stage-dbcm { position: relative; overflow: hidden; width: 547px; } .homepage #stage.stage-dbcm .slider-container { height: 225px; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide { color: #fff; background: #171b1d; opacity: 0.8; padding: 19px 25px 0 22px; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide a { color: #fff; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide .title { font-size: 32px; font-size: 2rem; margin-bottom: 10px; line-height: 1.25; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; max-width: 360px; vertical-align: top; } .homepage #stage.stage-dbcm .slider-container .slider-wrapper .slide p { max-width: 550px; } .homepage #stage.stage-dbcm .slider-control { bottom: 20px; right: 20px; } .homepage #stage.stage-xetra.withImg .slider-container { height: 270px; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide { background: #fff; color: #181813; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .item-text { width: 60%; padding: 35px 40px; float: right; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .media { float: left; width: 40%; height: 270px; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .media img { width: 370px; height: 270px; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide .title { font-size: 32px; font-size: 2rem; margin-bottom: 10px; line-height: 1.25; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; max-width: 100%; vertical-align: top; } .homepage #stage.stage-xetra.withImg .slider-container .slider-wrapper .slide a { color: #909f00; } .homepage #stage.stage-xetra.withImg .slider-control { width: 60%; padding: 30px 40px; } } #stage { position: relative; overflow: hidden; } #stage .slider-control { position: absolute; display: flex; z-index: 2; } #stage .slider-control .icon:after, #stage .slider-control .fancybox-prev span:after, .fancybox-prev #stage .slider-control span:after, #stage .slider-control .fancybox-next span:after, .fancybox-next #stage .slider-control span:after, #stage .slider-control .icon:before, #stage .slider-control .fancybox-prev span:before, .fancybox-prev #stage .slider-control span:before, #stage .slider-control .fancybox-next span:before, .fancybox-next #stage .slider-control span:before { padding: 0; } #stage .slider-control > * { display: flex; justify-content: center; align-items: center; } #stage .slider-pagination { display: flex; justify-content: start; align-items: center; width: auto; } #stage .swiper-pagination-bullet { background: #b2b7bb; margin-right: 16px; margin-left: 0px; width: 10px; height: 10px; opacity: 1; } #stage .swiper-pagination-bullet-active, #stage .swiper-pagination-bullet-active:hover { background: transparent; border-radius: 14px; cursor: default; height: 14px; width: 14px; } #stage .swiper-pagination-bullet:hover { background: #909f00; } #stage .swiper-pagination-bullet-active { background: transparent; border: 1px solid #b2b2b2; border-radius: 14px; cursor: default; height: 14px; width: 14px; } #stage .slider-controler { z-index: 20; cursor: pointer; margin-left: -4px; } #stage .slider-controler .icon, #stage .slider-controler .fancybox-prev span, .fancybox-prev #stage .slider-controler span, #stage .slider-controler .fancybox-next span, .fancybox-next #stage .slider-controler span { display: block; } #stage .slider-controler .icon:hover:before, #stage .slider-controler .fancybox-prev span:hover:before, .fancybox-prev #stage .slider-controler span:hover:before, #stage .slider-controler .fancybox-next span:hover:before, .fancybox-next #stage .slider-controler span:hover:before { color: #909f00; } #stage.stage-slider { position: relative; overflow: hidden; } #stage.stage-slider .slider-container { height: 213px; } #stage.stage-slider .slider-container .slider-wrapper .slide { height: 350px; } #stage.stage-slider .slider-container .slider-wrapper .slide .title { font-size: 19px; font-size: 1.1875rem; margin-bottom: 10px; max-height: 2.5em; line-height: 1.25; font-family: "newsGothic_demi", Arial, Verdana, Helvetica, sans-serif; max-width: 100%; overflow: hidden; vertical-align: top; } #stage.stage-slider .slider-container .slider-wrapper .slide p { max-height: 4.05em; /* 3 rows */ max-width: 600px; overflow: hidden; } #stage.stage-slider .slider-control { bottom: 20px; right: 20px; } #stageModule .stage-slider .slider-container .slider-wrapper .slide { color: #fff; background: #171b1d; opacity: 0.8; padding: 19px 25px 0 22px; } #stageModule .stage-slider .slider-container .slider-wrapper .slide .title { font-size: 32px; font-size: 2rem; font-weight: 400; font-family: "newsGothic_light", Arial, Verdana, Helvetica, sans-serif; } #stageModule .stage-slider .slider-container .slider-wrapper .slide a { color: #fff; } #stageModule .stage-slider .slider-container .slider-wrapper .slide p { line-height: 1.35em; } #stage.withImg .slider-container { height: 230px; } .detailText #stage.withImg .slider-container { height: 100px; } #stage.withImg .slider-container .media { float: left; width: 47.826%; height: 230px; overflow: hidden; position: relative; } #stage.withImg .slider-container .media > img { width: 100%; height: auto; max-width: none; } #stage.withImg .slider-container .media .overlay { position: absolute; top: 50%; left: 0; width: 100%; height: 100%; margin-top: -26px; } #stage.withImg .slider-container .media .overlay p { text-align: center; vertical-align: middle; /*MH: Class Name a.icon deleted due to of sass issues with extend of .icon */ } #stage.withImg .slider-container .media .overlay p a.icon { display: block; margin: 0 auto; background: #222; background: rgba(0, 0, 0, 0.6); text-align: center; line-height: 55px; width: 55px; height: 55px; } #stage.withImg .slider-container .media .overlay p a.icon:hover, #stage.withImg .slider-container .media .overlay p a.icon:active, #stage.withImg .slider-container .media .overlay p a.icon:focus { text-decoration: none; } #stage.withImg .slider-container .media .overlay p a.icon:before { font-size: 48px; font-size: 3rem; padding-left: 0.125em; } #stage.withImg .slider-container .item-text { float: right; padding-top: 15px; height: 185px; overflow: hidden; } .detailText #stage.withImg .slider-container .item-text { height: auto; } #stage.withImg .slider-container .item-text, #stage.withImg .slider-container .slider-control { width: 52.174%; padding-left: 30px; } .detailText #stage.withImg .slider-container .item-text, .detailText #stage.withImg .slider-container .slider-control { width: 100%; padding-left: 0; } #stage.withImg .slider-container .slide a { color: #909f00; } #stage.withImg .slider-container .slide .title { font-size: 19px; font-size: 1.1875rem; margin-bottom: 10px; line-height: 1.25; max-width: 100%; } #stage.withImg .slider-control { padding-bottom: 6px; bottom: 0; right: 0; } @media screen, print { #dbcm-bg-image { top: 90px; left: 50%; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); max-width: 1180px; position: absolute; } body { background: #deddda; } .list-download__icon { margin-left: 20px; } .list-download .icon, .list-download .fancybox-prev span, .fancybox-prev .list-download span, .list-download .fancybox-next span, .fancybox-next .list-download span { color: #666f78; } .list-download .icon:before, .list-download .fancybox-prev span:before, .fancybox-prev .list-download span:before, .list-download .fancybox-next span:before, .fancybox-next .list-download span:before, .list-download .icon:after, .list-download .fancybox-prev span:after, .fancybox-prev .list-download span:after, .list-download .fancybox-next span:after, .fancybox-next .list-download span:after { vertical-align: top; margin-right: 5px; } .list-download .icon:hover span, .list-download .fancybox-prev span:hover span, .fancybox-prev .list-download span:hover span, .list-download .fancybox-next span:hover span, .fancybox-next .list-download span:hover span, .list-download .icon:focus span, .list-download .fancybox-prev span:focus span, .fancybox-prev .list-download span:focus span, .list-download .fancybox-next span:focus span, .fancybox-next .list-download span:focus span { text-decoration: underline; } .list-download .icon:hover, .list-download .fancybox-prev span:hover, .fancybox-prev .list-download span:hover, .list-download .fancybox-next span:hover, .fancybox-next .list-download span:hover, .list-download .icon:focus, .list-download .fancybox-prev span:focus, .fancybox-prev .list-download span:focus, .list-download .fancybox-next span:focus, .fancybox-next .list-download span:focus, .list-download .icon:hover:before, .list-download .fancybox-prev span:hover:before, .fancybox-prev .list-download span:hover:before, .list-download .fancybox-next span:hover:before, .fancybox-next .list-download span:hover:before, .list-download .icon:focus:before, .list-download .fancybox-prev span:focus:before, .fancybox-prev .list-download span:focus:before, .list-download .fancybox-next span:focus:before, .fancybox-next .list-download span:focus:before { color: #909f00; } } @media screen and (min-width: 1024px) { /* IMPORT / ADD STYLES FOR SIZE L (Large) * ========================================================================== */ /* Page LayoutThe layout of the Xetra and Cash Market websites as well as of the Primary Market subsite is based on one overall frame which serves as a container for the relevant content. This frame provides a common structure for each view on all entities to create a corporate identity and enable better user orientation. The homepage layout is characterized by one big content area (covering a width of 980px) Subpages are based on a 2-column-layout, which contains a small column for sub navigation, facets and contacts on the left and a wider column for main content on the right. By applying a generic modular architecture approach, the appearance of each website can easily be modified according to strategic demands or specific content needs. The wide column can, for example, be subdivided with small or large modules in inner columns.
Styleguide 3.0 Basic Page Layout */ /* Grid Largenumber of columns: 8
column width: 90px
column margins: 30px
container margin: 25px
The entities’ homepages are based upon the grids below. The width of the modules will be configured according to their content and relevance.
The subpages are based on the grid shown below. In contrast to the homepage, subpages – including all doorpages - contain the sub navigation on the left margin column. Most of the content elements can be inserted on doorpages as well as on the homepages, for details please refer to the overview in chapter 6. As with the homepage, module widths for doorpages will be defined according to their content and relevance.
Markup:one-col 90px
two-col 210px
three-col 330px
four-col 450px
five-col 570px
six-col 690px
seven-col 810px
eight-col 930px
The meta navigation is positioned in the header and footer area of the page. Its position and content are fixed and stay the same on all views. The meta navigation contains links (e.g. contact or log-in to Member Section), dropdown menus (e.g. the overall language switch). The meta navigation does not contain search elements. Location, date and time are displayed throughout the whole website.
Styleguide 2.3 Meta Navigation */ ul.nav-meta { white-space: nowrap; font-size: 12px; font-size: 0.75rem; } ul.nav-meta > li > a { padding-top: 10px; padding-bottom: 10px; } /* Search Navigation - Settings for the small (Smartphone) view * ========================================================================== */ ul.nav-search > li:last-child > a { padding-right: 20px; } ul.nav-search > li > a { padding-left: 10px; padding-right: 10px; } ul.nav-search > li > a.icon { padding-left: 30px; } ul.nav-search > li > a.icon:before { left: 3px; } .list.search-results > li .date br, .list.search-results > li.list2Col .date br, .list.search-results > li.list3Col .date br, .list-news > li .date br, .list-news > li.list2Col .date br, .list-news > li.list3Col .date br { display: none; } .list.search-results > li > div > .date, .list.search-results > li.list2Col > div > .date, .list.search-results > li.list3Col > div > .date, .list-news > li > div > .date, .list-news > li.list2Col > div > .date, .list-news > li.list3Col > div > .date { margin: 0; } .list.search-results > li .indexCol, .list.search-results > li .contentCol, .list.search-results > li .mediaCol, .list.search-results > li.list2Col .indexCol, .list.search-results > li.list2Col .contentCol, .list.search-results > li.list2Col .mediaCol, .list.search-results > li.list3Col .indexCol, .list.search-results > li.list3Col .contentCol, .list.search-results > li.list3Col .mediaCol, .list-news > li .indexCol, .list-news > li .contentCol, .list-news > li .mediaCol, .list-news > li.list2Col .indexCol, .list-news > li.list2Col .contentCol, .list-news > li.list2Col .mediaCol, .list-news > li.list3Col .indexCol, .list-news > li.list3Col .contentCol, .list-news > li.list3Col .mediaCol { width: 100%; float: none; border-top: 0; } .list.search-results > li + li, .list.search-results > li.list2Col + li, .list.search-results > li.list3Col + li, .list-news > li + li, .list-news > li.list2Col + li, .list-news > li.list3Col + li { border-top: 1px solid #ebeced; } .list.search-results > li + li > .indexCol, .list.search-results > li + li > .contentCol, .list.search-results > li + li > .mediaCol, .list.search-results > li.list2Col + li > .indexCol, .list.search-results > li.list2Col + li > .contentCol, .list.search-results > li.list2Col + li > .mediaCol, .list.search-results > li.list3Col + li > .indexCol, .list.search-results > li.list3Col + li > .contentCol, .list.search-results > li.list3Col + li > .mediaCol, .list-news > li + li > .indexCol, .list-news > li + li > .contentCol, .list-news > li + li > .mediaCol, .list-news > li.list2Col + li > .indexCol, .list-news > li.list2Col + li > .contentCol, .list-news > li.list2Col + li > .mediaCol, .list-news > li.list3Col + li > .indexCol, .list-news > li.list3Col + li > .contentCol, .list-news > li.list3Col + li > .mediaCol { border-top: 1px solid transparent; } .list-news > li.list2Col .contentCol { padding-top: 5px; } dl.list dt { overflow: hidden; text-overflow: ellipsis; } dl.list-tradable-instruments dt { width: 50%; } dl.list-tradable-instruments dd { width: 50%; } dl.event-list.event-list-location, dl.list-tradable-details.event-list-location { border-top: 0; } dl.event-list dt, dl.event-list dd, dl.list-tradable-details dt, dl.list-tradable-details dd { float: none; padding: 0; } dl.event-list dt + dd + dt, dl.event-list dd + dt + dd, dl.list-tradable-details dt + dd + dt, dl.list-tradable-details dd + dt + dd { border-top: 0; } dl.event-list dt, dl.list-tradable-details dt { width: 100%; padding-bottom: 0.2em; } dl.event-list dd, dl.list-tradable-details dd { width: 100%; border-bottom: 1px solid #ebeced; padding-bottom: 7px; margin-bottom: 7px; } .list-links .list-links-table { display: block; } .list-links .list-links-table .meta-col { display: block; width: 100%; padding: 0 0 0 0px; } .list-links .list-links-table .content-col { display: block; width: 100%; } .list.search-results.tiles { display: inline; } .list.search-results.tiles:after { content: none !important; } .list.search-results.tiles > li { width: 50%; display: inline-block; padding: 5px 8px 0 8px !important; margin: 5px 0 10px 0; border-top: 1px solid #ebeced !important; } .list.search-results.tiles > li .contentCol h3 { margin-bottom: 8px; } .list.search-results.tiles > li img { width: 100%; height: auto; } .pagination.pagination-top + .list.search-results.tiles > li:nth-child(1), .pagination.pagination-top + .list.search-results.tiles > li:nth-child(2) { border-color: #fff !important; } .cookie-policy-wrapper .cookie-policy-inner { max-width: 600px; min-width: 320px; width: auto; margin: 0; padding: 4%; } .cookie-policy-wrapper .cookie-policy-inner:before { float: none; } .cookie-policy-wrapper .cookie-policy-inner .cookie-policy-inner-text { width: 100%; } .cookie-policy-wrapper .cookie-policy-inner .cookie-policy-close { top: 4%; transform: none; right: calc(4% - 10px); } .pageNav { padding-bottom: 0; } .pageNav .pagination { border-bottom: 0; } .pageNav .pagination .pageNav-paging { width: 100%; position: relative; padding-top: 8px; } .form-group .col-2, .form-group .col-6 { width: 100%; } .form-group .col-offset-2 { margin-left: 0; } fieldset > legend > .mandatory { width: 100%; } /* ** 3.6 Form Elements ** */ .search-form { position: relative; padding: 10px 20px 10px 20px; } .search-form button[type='submit'] { position: static; right: auto; top: auto; } .search-form .form-group { width: 100%; display: block; margin: 10px 0; } .search-form .form-group input#searchfieldDetail { width: 100%; margin-right: 10px; } .search-form .form-group input.datepicker { background-position: 97% 50%; width: 100%; } .search-form .form-group input.identifier { width: 100%; } .search-form .form-group .form-label { display: block; width: auto; } .search-form .form-group label { margin-right: 0; } .search-form .form-group .btn-search-reset { width: auto; float: right; margin-top: 5px; padding-right: 2px; } .search-form .form-group a.icon.icon-reset { font-size: 14px; font-size: 0.875rem; width: 300px; display: inline-block; padding-left: 23px; position: relative; } .search-form .form-group a.icon.icon-reset:before { font-size: 22px; font-size: 1.375rem; position: absolute; left: 0; margin: -1px 0 0 -4px; } .mwf-form .mwf-field > .mwf-label, .mwf-form .mwf-field > .mwf-input { width: auto; display: block; text-align: left; padding-right: 0; margin: 10px 0; } .mwf-form > ul + ul { margin: 25px 0 25px 0; padding-bottom: 25px; padding-left: 25px; } img, .image { max-width: 100%; height: auto; } .image { margin: 20px 0; } .image.float--left, .image.float--right { max-width: 47.5%; padding: 0; } .image.float--left { margin-right: 5%; } .image.float--right { margin-left: 5%; } .image .caption-block { padding: 0; margin: 10px 0; } .image div.lightbox-image a[rel='lightbox'] { left: 0px; right: auto; } .ui-datepicker { width: 75%; } #content-header .tab-container-newsList { height: auto; } #content-header .tab-container-newsList .tab-content { height: auto; padding-bottom: 50px; } #content-header .tab-container-newsList .tab-content .rss { bottom: 16px; top: auto; } #content-header .tab-container-newsList .tab-content .view-all { position: absolute; bottom: 16px; } .tabs .tab-content .rss { bottom: 0; top: auto; } /* Modale Dialoge */ div.disclaimer { width: 100%; padding: 10px; } div.disclaimer h2, div.disclaimer p, div.disclaimer img { margin-bottom: 15px; } div.fancybox-skin { padding: 0 !important; } /* * Logo Mosaic * @Author: mhamann * */ .linkedLogoMosaic.grid6Col .logo-container, .linkedLogoMosaic.grid8Col .logo-container { width: 50%; } .linkedLogoMosaic.grid6Col .logo-container a, .linkedLogoMosaic.grid8Col .logo-container a { height: 100px; } /** A.7 imitateTabs **/ .imitateTabs .tabs li { margin-bottom: 20px; } /** A.12 Market Monitor **/ .statusbox, .statusbox.statusbox--full { width: 100%; } .statusbox.statusbox--green { width: 148px; } .statusbox.statusbox--green.statusbox--full { width: 100%; } /* Single Views (SV)Single views are the most detailed views, displaying a variety of editorial content.
There are several types of single views, each one tailored specifically to the type of content to be displayed.
This is explained further in this chapter.
Text Collections are used to display content that is too large to be easily contained on a single page.
Content is separated into chapters.
Users can navigate through the pages using links at the top of the page,
or by using pagination buttons or the drop-down menu below the text.
Title, subtitle and description derive from the text collection document,
whereas the other information is edited in the text collection fragments.
![[Alt-Text]](/imagebridge-data.jpg "[Alt-Text]")
