/**************************************** ** TOC ***************************************** ** 01. Basic Colors ** 02. Corporate Colirs ****************************************/ /**************************************** ** 01. Basic Colors ****************************************/ /* Created on : 26.03.2014, 15:29:56 Author : chris @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee @brand-primary: #d10019; @brand-success: #5cb85c; @brand-info: #5bc0de; @brand-warning: #f0ad4e; @brand-danger: #d9534f; @brand-text: #58585a; */ /**************************************** ** 02. Corporate Colors ****************************************/ /**************************************** ** 03. Dimensions ****************************************/ /**************************************** ** 04. Fonts ****************************************/ /* //** Unit-less `line-height` for use in components like buttons. @line-height-base: 1.428571429; // 20/14 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px //** By default, this inherits from the ``. @headings-font-family: inherit; @headings-font-weight: 500; @headings-line-height: 1.1; @headings-color: inherit; */ /**************************************** ** 04. Border ****************************************/ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /**************************************** ** TOC ***************************************** ** 01. Clearfix ** 02. Body ** 03. Anchors, Paragraphs ** 05. ul, ol ** 06. Bilder ****************************************/ /**************************************** ** 02. Body ****************************************/ body { color: #58585a; font-size: 13px; font-family: Arial, sans-serif; line-height: 1.42857143; background: #eeeeee; background: -webkit-linear-gradient(center top, #c9cacb, #eeeeee 50%) repeat fixed 0 0 rgba(0, 0, 0, 0); background: -webkit-gradient(linear, 0 0, 50% 50%, from(#c9cacb), to(#eeeeee)); background: -moz-linear-gradient(center top, #c9cacb, #eeeeee 50%) repeat fixed 0 0 rgba(0, 0, 0, 0); background: linear-gradient(center top, #c9cacb, #eeeeee 50%) repeat fixed 0 0 rgba(0, 0, 0, 0); background-attachment: fixed; } /**************************************** ** 03. Anchors, Paragraphs ****************************************/ a { color: #d10010; text-decoration: none; } a.link-extend:before { content: ' > '; } a:hover { text-decoration: underline; } p { margin: 0 0 10px; } p.margin-left { margin-left: 20px; } .margin-right { margin-right: 20px; } p.muted { color: #868889; } p.small { font-size: 11px; margin-bottom: 3px; } /**************************************** ** 04. Headlines ****************************************/ .product-detail-header h1 { margin: 0; font-size: 21px; } .product-detail-header h2 { margin: 0; font-size: 13px; } .product-detail-header h3 { margin: 0; font-size: 13px; } .product-detail-header h4 { margin: 0; font-size: 13px; } .product-detail-header h5 { margin: 0; font-size: 13px; } .product-detail-header h6 { margin: 0; font-size: 13px; } ._n h3 { margin: 1em 0; font-size: 1.17em; } ._n h2 { margin: 1em 0; font-size: 1.5em; } /**************************************** ** 05. ul ol ****************************************/ ul, ol { padding-left: 15px; } ul.dotted { list-style: none; padding-left: 0; margin-left: 0; } ul.dotted > li { text-indent: 5px; line-height: 17px; } ul.dotted > li:before { font-weight: 800; font-size: 16px; content: "• "; margin-right: 6px; color: #d10019; } /**************************************** ** 06. Editor ****************************************/ .editor-content { /* * 21x Headlines */ /* 22px h1 mit Abstand nach unten */ /* 22px h2 ohne Abstand nach unten */ /* * 15px Headlines gemischt rot und grau */ /* 15px h3 mit Abstand nach unten */ /* 15px h4 mit Abstand nach unten Grau */ /* * 15px Headlines Versalien rot */ /* 15px h5 mit Abstand nach unten */ /* 15px h6 ohne Abstand nach unten */ } .editor-content .reduce-margin { display: block; margin-top: -20px; } .editor-content ol { margin-left: 10px; font-weight: bold; counter-reset: item; } .editor-content ol li { font-weight: normal; } .editor-content ol > li { text-indent: -13px; list-style-type: none; counter-increment: item; } .editor-content ol > li:before { display: inline-block; width: 13px; font-weight: bold; content: counter(item) "."; } .editor-content sup { font-weight: normal; font-size: 10px; line-height: 0; } .editor-content a sup { color: #d10019; } .editor-content a:hover sup { color: #d10019 !important; text-decoration: none !important; } .editor-content p a:hover { color: #d10019 !important; text-decoration: none; border-bottom: 1px solid #d10019; } .editor-content h1 { font-size: 21px; line-height: 27px; margin-top: 10px; margin-bottom: 16px; } .editor-content h1 * { font-size: 21px; line-height: 27px; } .editor-content h1 sup { font-weight: bold; font-size: 14px; } .editor-content h2 { font-size: 21px; line-height: 27px; margin-top: 10px; margin-bottom: 0; } .editor-content h2 * { font-size: 21px; line-height: 27px; } .editor-content h2 sup { font-weight: bold; font-size: 14px; } .editor-content h3 { font-size: 15px; line-height: 19px; margin-top: 0; margin-bottom: 16px; } .editor-content h3 * { font-size: 15px; line-height: 19px; } .editor-content h3 sup { font-weight: bold; font-size: 11px; } .editor-content h4 { font-size: 15px; line-height: 19px; margin-top: 0; margin-bottom: 0; } .editor-content h4 * { font-size: 15px; line-height: 19px; } .editor-content h4 sup { font-weight: bold; font-size: 11px; } .editor-content h5 { font-size: 15px; line-height: 19px; margin-top: 0; margin-bottom: 16px; text-transform: uppercase; } .editor-content h5 * { font-size: 15px; line-height: 19px; text-transform: uppercase; } .editor-content h5 sup { font-weight: bold; font-size: 11px; } .editor-content h6 { font-size: 15px; line-height: 19px; margin-top: 0; margin-bottom: 0; text-transform: uppercase; } .editor-content h6 * { font-size: 15px; line-height: 19px; text-transform: uppercase; } .editor-content h6 sup { font-weight: bold; font-size: 11px; } .history { margin-top: -30px; } /**************************************** ** 06. Tabs Startseite ****************************************/ div.teaser div.dyn-tabs { width: 100%; height: 350px; background-repeat: no-repeat; background-position: top left; } div.teaser div.dyn-tabs div.content { display: table-cell; vertical-align: middle; padding: 10px 0 0 0; width: 50%; height: 300px; padding: 67px 0 0 0; float: right; } div.teaser ul.tabs { position: absolute; width: 400px; height: 44px; top: 0; right: 0; padding: 0 2px 0 0; list-style-type: none; margin: 0; } div.teaser ul.tabs li { position: absolute; width: auto; height: 40px; top: 0; right: 0; background-image: url("../../images/v2/bar.png"); background-repeat: no-repeat; background-position: top left; padding: 16px 20px 0 20px; cursor: pointer; background-color: #ffffff; } div.teaser ul.tabs li.current { background-image: url("../../images/v2/bar-hover.png"); background-color: #ffffff; color: #58585a; } div.teaser ul.tabs li:hover { color: #d10019; text-decoration: underline; } div.teaser ul.tabs li.current:first-child { background-image: none; } /**************************************** ** ** Projekt Aliud Website ** ** Mixins TOC ***************************************** ** 01. Shadow, Radius and Gradients ** 02. Tabs ** 03. Links ** 04. Forms ** 05. Select ** 06. Searchbox ** 07. Scrollbar ** 08. Set Product Detail Width ** 09. Product Container ****************************************/ /**************************************** ** 01. Clearfix ****************************************/ /**************************************** ** 01. Shadow, Radius and Gradients ****************************************/ /**************************************** ** 02. Tabs ****************************************/ /**************************************** ** 03. Links ****************************************/ /**************************************** ** 04. Forms ****************************************/ /**************************************** ** Grid TOC ***************************************** ** 01. rows ** 02. Cols ** 03. Editor Content ****************************************/ /**************************************** ** 01. Rows ****************************************/ .row:before, .row:after { content: " "; display: table; } .row:after { clear: both; } /**************************************** ** 02. Cols ****************************************/ .col-1-1 { position: relative; min-height: 1px; } @media screen and (min-width: 480px) { .col-1-1 { width: 480px; } .col-1-1 .row > .col-1-2 { width: 230px; } .col-1-1 .row > .col-1-4 { width: 230px; } } @media screen and (min-width: 768px) { .col-1-1 { width: 768px; } .col-1-1 .row > .col-1-2 { width: 374px; } .col-1-1 .row > .col-1-4 { width: 374px; } } @media screen and (min-width: 940px) { .col-1-1 { width: 940px; } .col-1-1 .row > .col-1-2 { width: 460px; } .col-1-1 .row > .col-1-4 { width: 225px; } } .col-1-2 { position: relative; min-height: 1px; float: left; } .col-1-2 .row > .col-1-1 { margin-right: 0; } @media all and (min-width: 480px) { .col-1-2 { width: 230px; } .col-1-2 .row > .col-1-1 { width: 100%; } .col-1-2 .row > .col-1-2 { width: 105px; } .col-1-2 .row > .col-1-2:last-child { width: 105px; } .col-1-2 .row > .col-1-4 { width: 100%; } } @media all and (min-width: 768px) { .col-1-2 { width: 374px; } .col-1-2 .row > .col-1-1 { width: 100%; margin-right: 20px; } .col-1-2 .row > .col-1-2 { width: 177px; } .col-1-2 .row > .col-1-2:last-child { width: 177px; } .col-1-2 .row > .col-1-4 { width: 177px; } } @media all and (min-width: 940px) { .col-1-2 { width: 460px; } .col-1-2 .col-1-1 { width: 100%; } .col-1-2 .row > .col-1-2 { width: 220px; } .col-1-2 .row > .col-1-2:last-child { width: 220px; } .col-1-2 .row > .col-1-4 { width: 220px; } .col-1-2 .row > .col-1-4:last-child { width: 220px; } } .col-1-2:last-child { margin-right: 0px; } .col-1-3 { position: relative; min-height: 1px; float: left; } @media all and (min-width: 480px) { .col-1-3 { width: 146px; } .col-1-3 .col-1-1 { width: 100%; } } @media all and (min-width: 768px) { .col-1-3 { width: 242px; } .col-1-3 .col-1-1 { width: 100%; } } @media all and (min-width: 940px) { .col-1-3 { width: 300px; } .col-1-3 .col-1-1 { width: 100%; } } .col-1-3:last-child { margin-right: 0px; } .col-2-3 { position: relative; min-height: 1px; float: left; } @media all and (min-width: 480px) { .col-2-3 { width: 313px; } .col-2-3 .col-1-1 { width: 100%; } } @media all and (min-width: 768px) { .col-2-3 { width: 505px; } .col-2-3 .col-1-1 { width: 100%; } } @media all and (min-width: 940px) { .col-2-3 { width: 620px; } .col-2-3 .col-1-1 { width: 100%; } } .col-1-4 { position: relative; min-height: 1px; float: left; } @media all and (min-width: 480px) { .col-1-4 { width: 110px; } .col-1-4 .col-1-1 { width: 100%; } } @media all and (min-width: 768px) { .col-1-4 { width: 182px; } .col-1-4 .col-1-1 { width: 100%; } } @media all and (min-width: 940px) { .col-1-4 { width: 225px; } .col-1-4 .col-1-1 { width: 100%; } } .col-1-4:last-child { margin-right: 0px; } .col-1-5 { position: relative; min-height: 1px; float: left; } @media all and (min-width: 480px) { .col-1-5 { width: 72px; } .col-1-5.step-info { width: 220px; padding: 10px; box-sizing: border-box; } .col-1-5 .col-1-1 { width: 100%; } } @media all and (min-width: 768px) { .col-1-5 { width: 129.6px; } .col-1-5.step-info { width: 242.66666667px; padding: 10px 0; box-sizing: border-box; } .col-1-5 .col-1-1 { width: 100%; } } @media all and (min-width: 940px) { .col-1-5 { width: 164px; } .col-1-5.step-info { width: 180px; padding: 10px 0; box-sizing: border-box; } .col-1-5 .col-1-1 { width: 100%; } } .col-1-5:last-child { margin-right: 0px; } .itemgroup .col-1-3 { position: relative; min-height: 1px; float: left; margin-right: 20px; } @media all and (min-width: 480px) { .itemgroup .col-1-3 { width: 145px -20; } .itemgroup .col-1-3 .col-1-1 { width: 100%; } } @media all and (min-width: 768px) { .itemgroup .col-1-3 { width: 241px -20; } .itemgroup .col-1-3 .col-1-1 { width: 100%; } } @media all and (min-width: 940px) { .itemgroup .col-1-3 { width: 299px -20; } .itemgroup .col-1-3 .col-1-1 { width: 100%; } } .itemgroup .col-2-3 { position: relative; min-height: 1px; float: left; /* @media all and (min-width: @width-small) { @w-2-3: (@width-small / 3) * 2; width: ceil(@w-2-3) - (@gutter * 0.75) - 20; .col-1-1 { width: 100%; } } @media all and (min-width: @width-medium) { @w-2-3: (@width-medium / 3) * 2; width: ceil(@w-2-3) - (@gutter * 0.75) - 20; .col-1-1 { width: 100%; } } @media all and (min-width: @width-max) { @w-2-3: (@width-max / 3) * 2; width: ceil(@w-2-3) - (@gutter * 0.75) - 20; .col-1-1 { width: 100%; } } */ margin-right: 20px; } @media all and (min-width: 480px) { .itemgroup .col-2-3 { width: 64%; } .itemgroup .col-2-3 .col-1-1 { width: 100%; } } .itemgroup .col-1-3:last-child { /* @media all and (min-width: @width-small) { @w-1-3: @width-small / 3; width: ceil(@w-1-3) - (@gutter * 0.75) - 20; .col-1-1 { width: 100%; } } @media all and (min-width: @width-medium) { @w-1-3: @width-medium / 3; width: ceil(@w-1-3) - (@gutter * 0.75) - 20; .col-1-1 { width: 100%; } } @media all and (min-width: @width-max) { @w-1-3: @width-max / 3; width: ceil(@w-1-3) - (@gutter * 0.75) - 20; .col-1-1 { width: 100%; } } */ margin-right: 0px; } @media all and (min-width: 480px) { .itemgroup .col-1-3:last-child { width: 31.7%; } .itemgroup .col-1-3:last-child .col-1-1 { width: 100%; } } /**************************************** ** 03. Editor Content ****************************************/ .editor-content { padding: 10px 20px 20px 20px; } .editor-content p:before, .editor-content p:after { content: " "; display: table; } .editor-content p:after { clear: both; } .col-1-1 .col-1-2 .editor-content, .col-1-1 .col-1-3 .editor-content, .col-1-1 .col-2-3 .editor-content, .col-1-1 .col-1-4 .editor-content { padding-right: 0; } .col-1-2 .col-1-2 .editor-content, .col-1-2 .col-1-3 .editor-content, .col-1-2 .col-2-3 .editor-content, .col-1-2 .col-1-4 .editor-content { padding-right: 0; } .col-1-3 .col-1-1 .editor-content, .col-1-3 .col-1-2 .editor-content, .col-1-3 .col-1-3 .editor-content, .col-1-3 .col-2-3 .editor-content, .col-1-3 .col-1-4 .editor-content { padding-right: 20px; } .category + .row, .category + .editor-content { padding-top: 50px; } @media all and (min-width: 768px) { .editor-content img { width: 100%; } } @media all and (min-width: 940px) { .editor-content img { width: auto; } } .editor-content + img { display: block; margin: 0 auto 0; } @media all and (min-width: 480px) { .editor-content + img { width: 100%; } } @media all and (min-width: 768px) { .editor-content + img { width: auto; } } .transparent-column { margin-right: 0; } .transparent-column:before, .transparent-column:after { content: " "; display: table; } .transparent-column:after { clear: both; } @media all and (min-width: 480px) { .transparent-column { margin-right: 20px; } } @media all and (min-width: 768px) { .transparent-column { margin-right: 20px; } } .column { background-color: #ffffff; margin-bottom: 20px; margin-right: 20px; } .column:before, .column:after { content: " "; display: table; } .column:after { clear: both; } .column:last-child { margin-right: 0; } .column > p:first-child { padding-top: 40px; } .boxshadow { -webkit-box-shadow: 1px 4px 5px 1px rgba(100, 100, 100, 0.2); -moz-box-shadow: 1px 4px 5px 1px rgba(100, 100, 100, 0.2); box-shadow: 1px 4px 5px 1px rgba(100, 100, 100, 0.2); } /* .navshadow { .box-shadow(0px, 1px, 3px, 1px, rgba(100, 100, 100, 0.2)); } */ .remove-bottom-margin { margin-bottom: -20px; } .column.remove-bottom-margin { margin-bottom: 0px; } /**************************************** ** ** Projekt Aliud Website ** ** TOC ***************************************** ** 01. Container, Footer, rows ** 02. Sidebar ** 03. Infobar fuer Alert Meldungen ** 04. Category ** 05. User Picture ** 06. Content Slider ** 07. Teaser ** 08. Textformat ** 10. Rezeptpflichtig ****************************************/ /**************************************** ** 01. Container, Footer ****************************************/ .container { margin: 0 auto; } .container:before, .container:after { content: " "; display: table; } .container:after { clear: both; } @media screen and (min-width: 480px) { .container { width: 480px; } } @media screen and (min-width: 768px) { .container { width: 768px; } } @media screen and (min-width: 940px) { .container { width: 965px; padding-right: 25px; } } div#footer { margin: 10px 0 10px 0; padding: 0 10px 0 10px; /* div#footer-related { width:100%; min-height: 30px; padding:0 20px 0 0; float:left; @media screen and (min-width: @width-max) { width: 620px; } * { font-size: 9px; color:@color-grey-medium; } } */ } @media screen and (min-width: 480px) { div#footer { width: 480px; } } @media screen and (min-width: 768px) { div#footer { width: 768px; padding: 0; } } @media screen and (min-width: 940px) { div#footer { width: 940px; } } div#footer:before, div#footer:after { content: " "; display: table; } div#footer:after { clear: both; } div#footer ul { box-sizing: border-box; width: 100%; padding: 0; border-top: 1px solid #cccccc; list-style-type: none; } div#footer ul:before, div#footer ul:after { content: " "; display: table; } div#footer ul:after { clear: both; } div#footer ul li { display: block; float: left; padding: 5px 5px 5px 0; font-size: 10px; } div#footer ul li a { color: #868889; font-size: 10px; } div#footer ul li a:hover, div#footer ul li a.current { color: #d10019; } div#footer div#footer-related-logos { text-align: left; float: left; } div#footer div#footer-related-logos img { margin: 0 20px 0 0; } div#footer div.stada-logo { padding-top: 20px; float: left; } @media screen and (min-width: 768px) { div#footer div.stada-logo { float: right; padding-top: 0; } } /***************** ** Sidebar ** ******************/ #sidebar { position: fixed; width: 20px; height: 272px; left: 50%; top: 0; margin-left: -520px; z-index: 1; } div#sidebar-wrapper { position: absolute; width: 20px; bottom: 0; left: 0; } div#sidebar a { display: block; width: 18px; height: 20px; margin: 16px 0 0 0; background-repeat: no-repeat; background-position: 0 -20px; } div#sidebar a:hover { background-position: 0 0; } /**************************************** ** 07. Teaser ****************************************/ .teaser { position: relative; overflow: hidden; border-top: solid 4px #d10019; } .teaser .editor-content { padding-top: 0; } .teaser .teaser-image img { width: 100%; } .teaser > img:first-child { margin: 0; padding: 0; width: 100%; } .teaser p { margin: 0px 20px 10px 0; padding-bottom: 10px; } .teaser p:last-child, .teaser > h1:last-child, .teaser > h2:last-child, .teaser > h3:last-child, .teaser > h4:last-child, .teaser > h5:last-child, .teaser > h6:last-child, .teaser > ul:last-child, .teaser > ol:last-child { border-bottom: none; margin-bottom: 0; } .teaser > .image-overlay { position: relative; margin: 10px 20px; } .teaser > .image-overlay .overlay { position: absolute; bottom: 0px; padding: 5px 10px 10px; width: 100%; background-color: #ffffff; color: #58585a; filter: alpha(opacity=70); opacity: 0.7; font-size: 11px; } .teaser > .image-overlay .overlay p, .teaser > .image-overlay .overlay a { margin: 0; padding: 0; border: none; } .teaser > .image-overlay img { width: 100%; } .teaser .teaser-inner { margin: 20px 20px 20px 0; padding-bottom: 20px; overflow: hidden; border-bottom: 1px solid #eee; } .teaser .teaser-inner > a { display: block; width: 140px; float: left; } .teaser .teaser-inner > a img { width: 100%; } .teaser .teaser-inner .teaser-content { display: block; width: 260px; float: left; padding-left: 20px; } .teaser .teaser-inner .teaser-content p { border: none; margin-bottom: 0; padding-bottom: 0; } .teaser .teaser-inner .teaser-content h3, .teaser .teaser-inner .teaser-content h4 { font-size: 21px; line-height: 27px; margin-top: 0; margin-bottom: 0; } .teaser .teaser-inner .teaser-content h3 *, .teaser .teaser-inner .teaser-content h4 * { font-size: 21px; line-height: 27px; } .teaser .teaser-inner .teaser-content h3 sup, .teaser .teaser-inner .teaser-content h4 sup { font-weight: bold; font-size: 14px; } .teaser a.link-extend { display: block; font-weight: normal; } .teaser .teaser-all-offers p { margin-top: -10px; border: none; } .teaser .more-block { padding-bottom: 0; } /**************************************** ** ** Projekt Aliud Website ** ** TOC ***************************************** ** 01. Main navigation ** 02. Channel Navigation ** 03. Helper Navigation ****************************************/ /**************************************** ** 01. Main navigation ****************************************/ /* .navshadow { .box-shadow(1px, 1px, 3px, 2px, rgba(100, 100, 100, 0.5)); } */ #mainnavigation nav { position: absolute; top: 0px; left: 0; z-index: 1000; width: 100%; display: none; -webkit-box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); -moz-box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); } @media all and (min-width: 940px) { #mainnavigation nav { display: block; } } #mainnavigation { position: relative; height: 45px; margin: 0px; background: #ffffff; background-image: -moz-linear-gradient(to bottom, #ffffff, #D9DADB); background-image: -ms-linear-gradient(to bottom, #ffffff, #D9DADB); background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(#ffffff), to(#D9DADB)); background-image: -webkit-linear-gradient(to bottom, #ffffff, #D9DADB); background-image: linear-gradient(to bottom, #ffffff, #D9DADB); -webkit-box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); -moz-box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); border: none; } #mainnavigation:before, #mainnavigation:after { content: " "; display: table; } #mainnavigation:after { clear: both; } #mainnavigation div#mobilnavigation { padding: 12px 0 10px 15px; display: block; } #mainnavigation div#mobilnavigation select { width: 250px; font-size: 12px; -webkit-appearance: menulist; box-sizing: border-box; -webkit-box-align: center; white-space: pre; -webkit-rtl-ordering: logical; background-color: #fff; cursor: default; border: 1px solid #CCC; padding: 6px 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; margin: 0; max-width: 100%; display: block; } @media all and (min-width: 940px) { #mainnavigation div#mobilnavigation { display: none; } } #mainnavigation ul { height: 45px; margin: 0; padding: 0; list-style: none; float: left; } #mainnavigation ul.navbar-right { float: right; } #mainnavigation ul.navbar-right > li { display: block; float: left; height: 32px; margin: 0; padding: 13px 20px 0 20px; } #mainnavigation ul.navbar-left li { display: block; position: relative; float: left; margin: 0; border-right: #cccccc solid 1px; } #mainnavigation ul.navbar-left ul { display: none; position: absolute; height: auto; float: none; top: 44px; left: 0; z-index: 10000; -webkit-box-shadow: 1px 4px 5px 1px rgba(100, 100, 100, 0.2); -moz-box-shadow: 1px 4px 5px 1px rgba(100, 100, 100, 0.2); box-shadow: 1px 4px 5px 1px rgba(100, 100, 100, 0.2); } #mainnavigation ul.navbar-left ul:before, #mainnavigation ul.navbar-left ul:after { content: " "; display: table; } #mainnavigation ul.navbar-left ul:after { clear: both; } #mainnavigation ul.navbar-left ul ul { top: 0px; left: 200px; z-index: 10000; -webkit-box-shadow: 5px 4px 5px 1px rgba(100, 100, 100, 0.2); -moz-box-shadow: 5px 4px 5px 1px rgba(100, 100, 100, 0.2); box-shadow: 5px 4px 5px 1px rgba(100, 100, 100, 0.2); } #mainnavigation ul.navbar-left ul li { float: none; background-color: #ffffff; border: none; border-bottom: #cccccc solid 1px; } #mainnavigation ul.navbar-left ul li:last-child { border: none; } #mainnavigation ul.navbar-left a { display: block; padding: 13px 20px 13px 20px; font-size: 13px; color: #58585a; } #mainnavigation ul.navbar-left a sup { color: #58585a; } #mainnavigation ul.navbar-left ul a { width: 200px; } #mainnavigation ul.navbar-left ul a:before, #mainnavigation ul.navbar-left ul a:after { content: " "; display: table; } #mainnavigation ul.navbar-left ul a:after { clear: both; } #mainnavigation ul.navbar-left ul li span.nomenu { width: 200px; display: block; padding: 13px 20px 13px 20px; font-size: 13px; color: #58585a; cursor: pointer; } #mainnavigation ul.navbar-left ul li span.nomenu:before, #mainnavigation ul.navbar-left ul li span.nomenu:after { content: " "; display: table; } #mainnavigation ul.navbar-left ul li span.nomenu:after { clear: both; } #mainnavigation ul.navbar-left ul li span.nomenu sup { color: #58585a; } #mainnavigation ul.navbar-left ul li span.prefix { display: block; float: left; padding: 0 3px; width: 15px; } #mainnavigation ul.navbar-left ul li span.label { display: block; float: left; width: 144px; } #mainnavigation ul.navbar-left a:hover, #mainnavigation ul.navbar-left span:hover { color: #d10019 !important; text-decoration: none; } #mainnavigation ul.navbar-left a:hover sup, #mainnavigation ul.navbar-left span:hover sup { color: #d10019; } #mainnavigation ul.navbar-left a.current, #mainnavigation ul.navbar-left span.current { color: #d10019; } #mainnavigation ul.navbar-left li:hover { background: #ffffff; background-image: -moz-linear-gradient(to top, #ffffff, #D9DADB); background-image: -ms-linear-gradient(to top, #ffffff, #D9DADB); background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(#D9DADB), to(#ffffff)); background-image: -webkit-linear-gradient(to top, #ffffff, #D9DADB); background-image: linear-gradient(to top, #ffffff 60%, #D9DADB); } #mainnavigation ul.navbar-left li:hover ul { display: block; } #mainnavigation ul.navbar-left li:hover ul ul { display: none; } #mainnavigation ul.navbar-left ul li:hover ul { display: block; } #mainnavigation ul.navbar-left ul li:hover { background-image: none; } /**************************************** ** 02. Channel Navigation ****************************************/ #navigation { margin-top: 0; background-color: #ffffff; position: relative; } #navigation #channelnav { padding-top: 30px; border-bottom: 4px solid #d10010; height: 100px; } #navigation #channelnav #logo { float: left; width: 100px; margin-left: 20px; } #navigation #channelnav #logo img { width: 100%; display: block; } #navigation #channelnav #logo div { text-align: right; width: 100%; font-size: 9px; line-height: 11px; } @media all and (min-width: 480px) { #navigation #channelnav #logo { width: 100px; margin-left: 20px; } #navigation #channelnav #logo > div { font-size: 9px; line-height: 11px; } } @media all and (min-width: 768px) { #navigation #channelnav #logo { width: 150px; margin-left: 20px; } #navigation #channelnav #logo > div { font-size: 13px; line-height: 13px; } } @media all and (min-width: 940px) { #navigation #channelnav #logo { width: 200px; margin-left: 40px; } #navigation #channelnav #logo > div { font-size: 13px; } } #navigation #channelnav .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 20px; margin-bottom: 8px; background-color: transparent; background-image: none; border: transparent; border-radius: 4px; background-color: #e0e0e0; cursor: pointer; } @media (min-width: 940px) { #navigation #channelnav .navbar-toggle { display: none; } } #navigation #channelnav .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background-color: #58585a; } #navigation #channelnav .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } #navigation #channelnav .navbar-toggle .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } #navigation #channelnav .collapse { text-align: right; display: none; position: absolute; top: 104px; right: 0; z-index: 2000; background-color: #ffffff; width: 100%; -webkit-box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); -moz-box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); box-shadow: 0px 1px 3px 1px rgba(100, 100, 100, 0.2); } @media all and (min-width: 940px) { #navigation #channelnav .collapse { display: block; position: static; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } } #navigation #channelnav .collapse #search { float: right; min-height: 1px; width: 160px; overflow: hidden; border: #cccccc 1px solid; margin: 10px 20px 0 0; } @media all and (min-width: 940px) { #navigation #channelnav .collapse #search { width: auto; margin: 1px 20px 0 0; } } #navigation #channelnav .collapse #search #searchInput { display: block; float: left; padding: 3px 0 3px 10px; width: 110px; height: 22px; border: 0; border-radius: 0; color: #58585a; } #navigation #channelnav .collapse #search #searchInput:focus { outline: none; background: #eeeeee; } #navigation #channelnav .collapse #search #searchSubmit { display: block; float: left; } #navigation #channelnav .collapse #channels { float: right; width: 100%; text-align: right; } @media all and (min-width: 940px) { #navigation #channelnav .collapse #channels { width: auto; } } #navigation #channelnav .collapse #channels ul { list-style-type: none; margin: 10px 0 10px 0; padding: 0; text-align: right; } @media all and (min-width: 940px) { #navigation #channelnav .collapse #channels ul { margin: 0; padding: 0; } } #navigation #channelnav .collapse #channels ul li { line-height: 12px; margin-right: 20px; } @media all and (min-width: 940px) { #navigation #channelnav .collapse #channels ul li { display: inline-block; height: 66px; margin-right: 30px; } } #navigation #channelnav .collapse #channels ul li > a { color: #58585a; display: block; text-decoration: none; line-height: 12px; } @media all and (min-width: 940px) { #navigation #channelnav .collapse #channels ul li > a { text-align: center; padding: 3px 0 11px 0; } } #navigation #channelnav .collapse #channels ul li > a sup { color: #58585a; } #navigation #channelnav .collapse #channels ul li > a strong { display: block; font-size: 12px; line-height: 20px; color: #58585a; white-space: nowrap; } #navigation #channelnav .collapse #channels ul li > a small { display: none; font-size: 9px; line-height: 12px; color: #58585a; } @media all and (min-width: 940px) { #navigation #channelnav .collapse #channels ul li > a small { display: block; } } #navigation #channelnav .collapse #channels ul li > a small br { line-height: 12px; } #navigation #channelnav .collapse #channels ul li > a:hover strong, #navigation #channelnav .collapse #channels ul li > a:focus strong { background-color: transparent; color: #d10010; } #navigation #channelnav .collapse #channels ul li > a:hover * { text-decoration: none; } @media all and (min-width: 940px) { #navigation #channelnav .collapse #channels ul li.active { background: url("../../images/v2/arrow-red-up.png") no-repeat bottom center transparent; } } #navigation #channelnav .collapse #channels ul li.active > a strong { color: #d10010; } #navigation #channelnav .collapse #channels ul li.active sup { color: #d10019; } /**************************************** ** 03. Helper Navigation ****************************************/ #helpernavigation { float: right; font-size: 10px; margin: 5px 0 5px; text-align: right; } #helpernavigation a { margin-left: 30px; font-size: 10px; } a.link-extend:before { content: ' > '; } /**************************************** ** 04. Breadcrumb Navigation ****************************************/ #breadcrumbnavi { padding-left: 0px; padding-right: 0px; margin: 5px 0 5px 0; font-size: 10px; } #breadcrumbnavi:before, #breadcrumbnavi:after { content: " "; display: table; } #breadcrumbnavi:after { clear: both; } #breadcrumbnavi ul.breadcrumb { width: 55%; float: left; margin: 0; padding: 5px 0; background-color: transparent; } #breadcrumbnavi ul.breadcrumb li { display: inline-block; } #breadcrumbnavi ul.breadcrumb li a { color: #58585a; text-decoration: none; } #breadcrumbnavi ul.breadcrumb li a:hover, #breadcrumbnavi ul.breadcrumb li a:focus { color: #d10010; text-decoration: none; } #breadcrumbnavi ul.breadcrumb > li + li:before { color: #58585a; content: ' > '; padding: 0 3px; } #breadcrumbnavi ul.personal-filter { width: 45%; float: right; margin: 0; padding: 5px 0; background-color: transparent; text-align: right; } #breadcrumbnavi ul.personal-filter li { display: inline-block; padding-left: 10px; } #breadcrumbnavi ul.personal-filter li a { color: #58585a; text-decoration: none; } #breadcrumbnavi ul.personal-filter li a:hover, #breadcrumbnavi ul.personal-filter li a:focus { color: #d10010; text-decoration: none; }