compiled.scss

@charset "utf-8";

//  Create a compiled.SCSS file for all sub-themes
//  which imports the respective parent theme's compiled.scss
//  in the cascade AND extends it. This way we ALWAYS have an UP-TO-DATE compiled.CSS imported
//  which includes all finc styles plus all subsequent customizations.
//  [I.e.: finc's compiled.scss imports bootstrap3/scss/compiled.scss and
//  the house-specific branches such as fid_adlr then import finc/scss/compiled.scss
// 0. NOTE TO DEVELOPERS
//    Do NOT EDIT compiled.CSS -- all CSS files should be generated from SCSS files
// 1. KEY VARIABLES and MIXINS
//    Define or re-define KEY VARIABLES and MIXINS in this file (see 1.1 ff below) OR import your own
@import 'customVariables';
@import 'customMixins';
// 1.1 FONTS
// ++ USE EITHER
// ++ ++ font-size: ($font-size-base * 1.5)
// ++ OR
// ++ ++ use the em-calculator function, like so: font-size: em(14)
// 1.2 DO NOT define site-specific colours in finc's SCSS files
//    - this must be done in your site-specific themes
// 2. For Media queries use:
//    Extra small screen / phone: '$screen-xs-max' (=767px);
//    Small screen / tablet: '$screen-sm-min' (=768px);
//    Medium screen / desktop: '$screen-md-min' (=992px) and
//    Large screen / wide desktop: '$screen-lg-min' (=1200px);
//    The MAXimum ranges are defined as the next higher element minus 1px, so:
//    '$screen-xs-max' = $screen-sm-min - 1 etc
//    you can use '$screen-xs-max', '$screen-sm-max' and '$screen-md-max'
// 3. Import finc's compiled.scss to have the variables and mixins defined above applied to it
@import '../../finc/scss/compiled';

// 4. Customize further -- pls. comment and explain
//    PLEASE ORGANIZE YOUR CSS ACCORDING TO THIS GENERAL RULE - keep exceptions to a minimum
//    *, html, body
//    h1, h2, h3, h4, h5, h6,
//    p,
//    address, blockquote, pre,
//    ul, ol, li, dl, dt, dd,
//    table, caption, tr, th, td,
//    form, fieldset, legend, label, select, input, textarea,
//    div,
//    img,
//    a,
//    strong, em, abbr, q, cite, code, kbd, var,
//    span,
//    #id,
//    .class
//    Frequently used classes
//    Custom areas of the theme

//    IDs and classes come last and should (if possible) be ordered according
//    to their appearance on the page, e.g. header, breadcrumbs, main ...

//    Please sort selectors alphabetically, like so
//    .foo {
//       border: 1px solid red;
//       margin-left: 1em;
//       padding: 0 ($grid-gutter-width / 2);
//       width: auto;
//    }
//

// HTML

// BODY
body {
  // color: $black;
  background-color: $white;
  // set default to OPEN SANS
  font-family: $font-family-sans-serif;
  overflow: hidden;
}

// HEADINGS
h1,
h2,
h3,
h4,
h5 {
  color: $black;
  // set headings to UBUNTU MONO
  font-family: $font-family-monospace;
}

// ++ h1
h1 {
  font-size: em(63px);
  font-weight: bold;
  letter-spacing: em(4.2px);
  line-height: em(69px);
}

// ++ h2
h2 {
  font-size: em(43px);
  font-weight: bold;
  letter-spacing: em(2.87px);
  line-height: em(53px);
}

// ++ h3
h3 {
  font-size: em(30px);
  font-weight: bold;
  line-height: em(34px);
}

// ++ h4
h4 {
  font-size: em(24px);
  font-weight: bold;
  letter-spacing: em(1px);
  text-transform: uppercase;
}

// ++ h5
h5 {
  font-size: em(18px);
  font-weight: bold;
  letter-spacing: em(2px);
  text-transform: uppercase;
}

// HEADINGS - END

// Paragraphs
// ++ p {}
// Paragraphs - END

// LISTS
// ++ ul,
ul {
  list-style-type: none;
  padding-left: 0;
  li {
    color: $asphalt;
  }
}
// ++ ol {}
// ++ li {}
// ++ dl {}
// ++ dt {}
// ++ dd {}
// LISTS - END

// TABLES
table {
  border: 0;
  margin-top: 20px;
  width: 100%;
}

// ++ caption {}
// ++ tr {}
// ++ th {}
// ++ td {}
// TABLES - END

// FORMS
// ++ Fieldsets
// ++ Legend elements
// ++ label {}
.sort label,
.limit label {
  font-weight: 700;
}

// ++ input {}
// ++ Select {}
select {
  height: 60px;
  min-width: 100px;
}
// ++ textarea {}
input,
textarea {
  //border-color: $silver;
  //border-radius: 5px;
}

form input:invalid, form textarea:invalid {
  margin-right: 0;
}

// FORMS - END

// IMAGES
// img {}
// IMAGES - END

// LINKS
a {
  color: $black;
  text-decoration: none;
  &:hover {
    text-decoration: none;
  }
}

// LINKS - END

// TEXT DECORATION
// strong {}
// em {}
// TEXT DECORATION - END


// CLASSES (Elements that are used in several places)
// ++ HELPER Classes
.large-text {
  font-size: em(24px);
  line-height: em(45px);
}

.large-text.light {
  color: $asphalt;
}

.small-text {
  color: $asphalt;
  font-size: em(16px);
}

// FIXME: Check for more elegant way to apply colors
.error-color {
  color: $brand-danger;
}

.highlighter-color {
  color: $violet;
}

.primary {
  color: $azure;
}

.secondary {
  color: $seafoam;
}

.warning-color {
  color: $amber;
}

.white {
  color: $white;
}

// ++ HELPER Classes - END

// ++ ALERTS
// ++ ALERTS - END

// ++ BUTTONS
.btn-lg {
  @include large-btn;

  @media screen and (max-width: $screen-xs-max) {
  }
}

.btn-getitbox {
  @include result-list-btn-getitbox;

  @media screen and (max-width: $screen-xs-max) {

  }
}

// ++ BUTTONS - END

// ICONS
.icon {
  min-width: 30px;
  vertical-align: bottom;
  @media screen and (max-width: $screen-xs-max) {
    font-size: calc(#{$font-size-base} * 1.7);
    font-weight: 500;
    min-width: 35px;
  }
}
.icon.icon-settings {
  font-size: calc(#{$font-size-base} * 1.2);
}

.btn-primary .icon {
  float: right;
  font-size: calc(#{$font-size-base} * 1.5);
}
// ICONS - END

// ++ DROPDOWNS
// ++ DROPDOWNS - END

// ++ MODALS
// ++ MODALS - END

// PAGE ELEMENTS (Top --> Down) ++
// ++ HEADER
// ++++ Header width reset.
header {
  background-position: right top;
  background-repeat: no-repeat;

  &.collapse:not(.in), &.collapsing {
    background: white;
    display: inline;
    .navbar-header-link {
      color: $azure;
    }
  }

  @media screen and (max-width: $screen-xs-max) {
    margin-bottom: $content-bottom-padding;
  }

  @media screen and (min-width: $screen-sm-min) {
    background-image: url('../images/header-bg-sm.png');
    min-height: em($navbar-header-height-home-sm);
  }

  @media screen and (min-width: $screen-lg-min) {
    background-image: url('../images/header-bg-lg.png');
    min-height: em($navbar-header-height-home-sm);
  }
}

header,
.navbar,
.breadcrumbs {
  background-color: transparent;
  border: 0;
  // FIXME: REMOVE, when 15639 has been merged to finc
  width: auto;

  .menubar {
    @include noselect;
    box-sizing: border-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;

    // ++++++  disable transitions for menu
    .collapsed, &.collapsed {
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .collapsing, &.collapsing {
      background: transparent;
      height: auto !important;
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .collapse, &.collapse {
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .collapse.in, &.collapse.in {
      transition: none !important;
      transition-delay: $transition-delay !important;
      transition-duration: $transition-duration !important;
    }

    .fill-flex {
      flex-grow: 2;
      flex-shrink: 1;
    }
    .register .navbar-header-link {
      @media (max-width: $screen-xs-max) {
        @include shift-main-menu-entries-to-navigation-overlay;
        top: calc(#{$navbar-header-height-xs-sm} + 5 * #{$line-height-submenu} + 2 * #{$content-top-padding});
      }
    }
    .language {
      height: 35px;
      .dropdown-menu {
        background-color: white;
        left: 10px;
        min-width: 100px;
        position: absolute;
        width: 100px;
        @media (max-width: $screen-xs-max) {
          @include shift-main-menu-entries-to-navigation-overlay;
          top: calc(#{$navbar-header-height-xs-sm} + 4 * #{$line-height-submenu} + 2 * #{$content-top-padding});
        }
        li > a {
          padding: 3px 5px;
          text-align: left;
        }
      }
    }
    .language.dropdown:not(.open) {
      .dropdown-menu {
        @media (min-width: $screen-sm-min) {
          display: none;
        }
      }
    }
  }

  // override finc display block
  .collapse.in {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
  }
  .collapsing, &.collapsing {
    transition-duration: $transition-duration !important;
    transition: unset  !important;
  }
}

// ++++++  Navbar in affix mode
.navbar.affix {
  border: 0;

  @media screen and (min-width: $screen-sm-min) {
    @include default-background-header;
    height: em($navbar-header-height-affix-sm);
    .adv-srch-btn {
      display: none;
    }
  }
}
// ++++++  Navbar in affix mode - END

.header-menu-collapse {
  @extend .navbar-header;
  @media (min-width: $screen-sm-min) {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
    &.collapse.in {
      .additional-text-lg {
        display: inline;
      }

      .additional-text-xl {
        display: inline;
      }
      .submenu-collapse {
        top: $navbar-header-height-home-sm;
      }
    }
  }

  &.collapse:not(.in) {
    .submenu-collapse {
      background: $white;
      height: 0;
      padding: 0;
      visibility: hidden;
      width: 0;
    }
  }

  &.collapse.in, &.collapsing {
    .submenu-collapse {
      @include navigation-overlay;
      padding: 0;
    }
  }
}

//// Define header navbar on mobile
.header-menu-collapse.collapsing {
  padding: 0;

  .submenu-collapse {
    @media (max-width: $screen-sm-max) {
      background-color: $white;
      padding: 0;
    }
  }
}

//// Display different icons after open or close of submenues
header.collapse.in .menubar .text-close, .dropdown.sbox-dd:not(.open) .text-close, .language:not(.open) .icon.icon-chevron-up {
  display: none;
}

header.collapse:not(.in) .menubar .text-open, header.collapsing .text-open, .dropdown.sbox-dd.open .text-open, .language.open .icon.icon-caret-down {
  display: none;
}
//// Display different icons after open or close of submenues - END

.additional-text-xs, .additional-text-xl, .additional-text-lg {
  display: none;
}

@media screen and (max-width: $screen-xs-max) {
  .additional-text-xs {
    display: inline;
  }
}

@media screen and (min-width: $screen-lg) {
  .additional-text-lg {
    display: inline;
  }
}

@media screen and (min-width: $screen-xl) {
  .additional-text-xl {
    display: inline;
  }
}

.navbar-header {
  flex-shrink: 0;
  // position of navbar-brand Logo on top left
  .navbar-brand {
    border: 0;
    left: 0;
    outline: none;
    position: absolute;
    top: 31px;
  }

  @media screen and (max-width: $screen-sm-min) {
    background-color: $white;
    height: $navbar-header-height-xs-sm;
    padding: 30px 0 20px;

    .navbar-toggle {
      color: $brand-primary;
      // for middle-alignment
      padding: 0;
    }

    &:not(.collapse) {
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: -webkit-box;
      display: inline-flex;
    }
  }

  @media screen and (min-width: $screen-sm-min) {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
  }
}

.navbar-header-link {
  @extend .navbar-toggle;
  @media screen and (min-width: $screen-sm-min) {
    @include default-navbar-link-font;
  }
}

// ++++ Banner, Logo and home link
.banner {
  width: 100%;
  z-index: z-index(banner, 0);

  @media screen and (max-width: $screen-xs-min) {
    margin-left: 0;
    margin-right: 0;
  }

  &.container {
    padding-left: 0;
    padding-right: 0;

    @media screen and (min-width: $screen-sm-min) {
      border-radius: 0;
      padding-left: 20px;
      padding-top: 20px;
    }

    // Logo position
    .navbar-brand {
      margin-left: $navbar-margin-left;
      z-index: z-index(navbar-brand, 0);
    }

    // Menu toggler position
    .navbar-toggle {
      margin-right: 10px;
    }
  }
}

.navbar-brand {
  // DEFINE BG IMAGE
  // $screen-xs-max = 767px
  // Fallback image IE & Co
  background: url('../images/logo.png') no-repeat;
  // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
  background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
  background-size: contain;
  color: transparent;
  min-width: 180px;
  max-width: $logo-max-width;

  // 768px and up
  @media screen and (min-width: $screen-sm-min) {
    // Fallback image IE & Co
    background: url('../images/logo.png') no-repeat;
    // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
    background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
    background-size: contain;
    display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
    min-height: 56px; // FIX for Safari + Android Stock Browser
    min-width: 168px !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
  }

  // 992px and up
  @media screen and (min-width: $screen-sm-min) {
    // Fallback image IE & Co
    background: url('../images/logo.png') no-repeat;
    // SVG (modern browsers), linear-gradient used to pick out browsers that support SVG
    background: url('../images/logo.svg') no-repeat, linear-gradient(transparent, transparent);
    display: inline-block !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
    // Collapsed navbar height in fid_adlr = 134px
    height: em(134px);
    min-height: em(134px); // FIX for Safari + Android Stock Browser
    min-width: em(266px) !important; // FIX for Safari + Android Stock Browser - ATTN! might kill visibility in IE11
  }

  // hide home link for non-visually impaired to show logo only
  a,
  &:hover,
  &:focus {
    color: transparent;
  }
}
// ++++ Logo and home link - END

// ++++++ basic default (non start page)
body:not(.template-name-home) {
  header {
    .headline, .home-links {
      display: none;
    }
    @media screen and (max-width: $screen-xs-max) {
      min-height: calc(4.5 * #{$search-toggle-padding-bottom-top});
    }
    @media screen and (min-width: $screen-sm-min) {
      @include default-background-header;
      .header-text.container {
        height: calc(#{$navbar-header-height-sm} - #{$navbar-header-height-affix-sm});
      }
    }
    .search {
      // always use fixed search on default sites
      @include fixed-navbar-search;
    }
  }
}
// ++++++ basic default - END

// ++++ Start Page
.template-name-home {
  header {
    &.collapse:not(.in) {
      .header-text {
        display: none;
      }
    }
    @media screen and (max-width: $screen-xs-max) {
      background-image: url('../images/header-bg-xs.png');
      background-position: -390px $navbar-header-height-xs-sm;
      background-size: cover;
      min-height: em($navbar-header-height-xs-sm);
    }

    @media screen and (min-width: $screen-sm) {
      .affix-top {
        .additional-text-xl, .additional-text-lg {
          display: inline;
        }
      }
    }
  }
  // hide header text headline when affix is applied
  .banner.affix {
    .header-text {
      display: none;
    }
  }
  .header-text {
    color: $brand-secondary;

    .home-links {
      display: block;
      margin-left: 10px;
      position: absolute;
      top: 812px;
    }

    &.container {
      @media screen and (max-width: $screen-xs-max) {
        height: $header-text-box-height-xs;
        padding-bottom: $header-text-bottom-padding-xs;
        padding-top: $header-text-top-padding-xs;
        .home-links {
          display: none;
        }
      }
      @media screen and (min-width: $screen-sm-min) {
        height: $header-text-box-height-sm;
        padding-bottom: $header-text-bottom-padding-sm;
        padding-top: $header-text-top-padding-sm;
      }
    }

    @media screen and (max-width: $screen-xs-max) {
      // Add correct data for font-size, letter-spacing, lineheight, texttransform
      @include default-headings-font(26px, 1.7px, 36px, none);
      margin-right: 25%;
    }

    @media screen and (min-width: $screen-sm-min) {
      @include default-headings-font(63px, 4.27px, 69px, none);
      margin-bottom: 70px;
      margin-right: 10%;
      margin-top: $navbar-header-height-xs-sm;
      padding-left: 0;
      padding-right: 0;
      text-align: right;
      width: 900px;
    }
  }

  .search.container.navbar {
    position: absolute;
    @media screen and (max-width: $screen-xs-max) {
      &:not(.affix) {
        // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
        @include searchbox-toggler-and-content-styles(none, block, false, false, 'screen-xs-max');
        top: $header-text-box-height-xs;
      }
    }

    @media screen and (min-width: $screen-sm-min) {
      left: 0;
      top: $header-text-box-height-sm;

      &:not(.affix) {
        // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
        @include searchbox-toggler-and-content-styles(none, none, true, false, 'screen-sm-min');
      }
    }

    @media screen and (min-width: $screen-lg-min) {
      left: 15%;
      top: $header-text-box-height-sm;
    }
  }
  .search.container.navbar.affix {
    @include fixed-navbar-search;
  }
}
// ++++ Start Page - END

// ++++ SEARCH BOX
.search.container {
  background-color: transparent;
  border: 0;
  padding-top: 0px;
  z-index: z-index(search, 0);

  &.collapse.in {
    display: inherit;
  }

  &.collapsing {
    display: none;
    transition: unset;
  }

  .searchbox {
    // Outer Box
    background-color: $brand-primary;
    padding: 30px 20px;

    @media screen and (min-width: $screen-sm-min) {
      height: em($search-form-height-lg);
      padding: 55px 20px 55px 50px;
      width: $search-form-width-lg;
    }
    // Outer Box - END
  }

  .sbox-dd-menu {
    background-color: transparent;
    border: 0;
    margin-top: 0;
    z-index: z-index(sbox-dd-menu, 0);
  }

  @media screen and (min-width: $screen-sm-min) {
    // $display-searchbox-toggle, $display-prefilter-toggle, $unset-prefilter-toggle-dropdown, $is-affix, $screen-border
    @include searchbox-toggler-and-content-styles(none, block, false, false, 'screen-sm-min');
    width: 1250px;

    .btn-lg {
      margin-top: 0;
    }
  }

  .searchForm {
    display: inline-block;
    @media screen and (max-width: $screen-xs-max) {
      .nav-tabs {
        // parameter $type: collapsed for default / full for start page
        @include search-filter-styles(false, true, 'screen-xs-max');

        &.open {
          // parameter $type: collapsed for default / full for start page
          @include search-filter-styles('collapsed', true, 'screen-xs-max');
        }
      }
    }
  }
}

.nav-tabs {
  border-bottom: 0;
}

.template-name-home .affix-top {
  @media screen and (min-width: $screen-sm-min) {
    .nav-tabs {
      @include search-filter-styles('full', true, 'screen-sm-min');
    }
  }
}

.template-name-home .affix, body:not(.template-name-home) {
  @media screen and (min-width: $screen-sm-min) {
    .nav-tabs.open {
      @include search-filter-styles('collapsed', true, 'screen-sm-min');
    }
  }
}


/*
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: @line-height-base;
color: @dropdown-link-color;
white-space: nowrap; // prevent links from randomly breaking onto new lines

&:hover,
&:focus {
  color: @dropdown-link-hover-color;
  text-decoration: none;
  background-color: @dropdown-link-hover-bg;
}
}
*/

// search (box) and elements in affix mode (on scrolling)
.search.affix {
  @include fixed-navbar-search;
  @media screen and (min-width: $screen-sm-min) {
    .searchbox {
      background: transparent;
    }
  }
}
// search (box) and elements in affix mode - END

// ++++ SEARCH BOX - END

// ++++++ Search input field
input.searchForm_lookfor {
  // overwrite border definitions input[type="text"]
  @include result-list-border($white);
  color: $white;

  &::placeholder,
  &:placeholder-shown {
    color: $white;
  }
}

.searchForm_lookfor {
  @include default-border-radius;
  background-color: transparent;
  height: $search-input-height-fixed;
  min-width: $search-input-width-fixed;

  @media screen and (min-width: $screen-sm-min) {
    height: $search-input-height-lg;
    width: $search-input-width-lg;
  }

  &.form-control {
    @media screen and (min-width: $screen-sm-min) {
      max-width: $search-input-width-lg;
      width: $search-input-width-lg;
    }
  }
}

// Set font size for input field and advanced search link
.searchForm_lookfor,
.adv-srch-btn {
  @media screen and (max-width: $screen-sm-max) {
    font-size: 16px;
  }
}

// ++++++ Search input field - END

// ++++++ Quick filter
#quickfilter-dd {
  color: $white;

  .quickfilter.open & {
    background: transparent;
  }
}

#quickfilter-dd,
.search-button,
.adv-srch-btn {
  &:hover,
  &:focus {
    outline: none;
  }
}
// ++++++ Quick filter - END

.searchForm .list-unstyled {
  > li {
    // ++++++ Standard Search Button
    &.find-button {
      @media screen and (max-width: $screen-xs-max) {
        float: none;
      }

      @media screen and (min-width: $screen-sm-min) {
        margin-left: 15px;
      }
    }

    &.find-label {
      @include default-border-radius;
      @include large-btn;
      height: $search-input-height-lg;
    }

    // ++++++ Standard Search Button - END

    &.quickfilter {
      height: $search-input-height-fixed;
      margin-left: -3em;
      padding-top: 12px;
      position: absolute;

      @media screen and (max-width: $screen-xs-max) {
        left: $search-input-width-fixed;
        margin-left: -2em;
      }

      @media screen and (min-width: $screen-sm-min) {
        height: $search-input-height-default;
        padding-top: $search-filter-padding-top;
      }

      li {
        border: $default-border solid $white;
        border-radius: 2px;
      }

      .btn-transparent {
        border: 1px solid transparent;

        &:hover,
        &:focus {
          background: transparent;
          color: $brand-secondary;
        }
      }

      .dropdown-menu {
        // parameter $type: collapsed for default / full for start page
        @include search-filter-styles('collapsed', false, false);