compiled.scss

//  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;
  background-position: top right;
  background-repeat: no-repeat;
  // set default to OPEN SANS
  font-family: $font-family-sans-serif;

  @media screen and (max-width: $screen-xs-max) {
    background-image: url('../images/header-bg-xs.png');
    background-position: -390px $navbar-header-height-xs-sm;
  }

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

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

// HEADINGS
h1,
h2,
h3,
h4,
h5 {
  // 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,
// ++ 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 {
  //
}

// ++ input {}
// ++ Select {}
// ++ textarea {}
input,
textarea {
  //border-color: $silver;
  //border-radius: 5px;
}

// FORMS - END

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

// LINKS
a {
  text-decoration: underline;
}

// 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) {
  }
}

// ++ BUTTONS - END

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

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

// PAGE ELEMENTS (Top --> Down) ++
// ++ HEADER
// ++++ Header width reset.
header,
.navbar,
.breadcrumbs {
  background-color: transparent;
  // FIXME: REMOVE, when 15639 has been merged to finc
  width: auto;
}

header {
  // Calculate height of background to match combined height of elements
  @media screen and (max-width: $screen-xs-max) {
    height: calc(#{$header-text-box-height-xs} + #{$navbar-header-height-xs-sm});
  }
}

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

//
.navbar-header {
  @media screen and (max-width: $screen-sm-max) {
    background-color: $white;
    // Define Position of navbar-brand Logo here!
    height: $navbar-header-height-xs-sm;
    padding: 30px 15px 20px 20px;

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

// ++++ Banner, Logo and home link
.banner {
  // max-width: em(1250px);
  width: 100%;

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

  @media screen and (min-width: $screen-sm-min) {
  }

  @media screen and (min-width: $screen-lg-min) {
  }

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

    @media screen and (min-width: $screen-lg-min) {
      padding-left: 20px;
      padding-top: 40px;
    }

    // Logo position
    .navbar-brand {
      margin-left: 15px;
    }

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

  // AFFIX state
  &.affix {}
}

.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;

  // 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-md-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

// ++++ Header text
// ++++++ set default first, then define for home page
body:not(.template-name-home) {
  .header-text.container {
    display: none;
  }
}

.template-name-home .header-text {
  color: $brand-secondary;

  &.container {
    @media screen and (max-width: $screen-xs-max) {
      height: $header-text-box-height-xs;
      padding-top: 55px;
    }
  }

  @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);
  }

  @media screen and (min-width: $screen-sm-min) {
    @include default-headings-font(26px, 1.7px, 36px, none);
  }

  @media screen and (min-width: $screen-lg-min) {
    @include default-headings-font(63px, 4.27px, 69px, none);
    margin-bottom: 70px;
    text-align: right;
    width: 1250px;
  }
}

// ++++++ Hide header text when affix is applied
.banner.affix {
  .header-text {
    display: none;
  }
}

// ++++ Header text - END

// ++++ SEARCH BOX
.search.container {
  background-color: transparent;

  .sbox-dd-menu {
    background-color: transparent;
    border: 0;
  }

  @media screen and (max-width: $screen-sm-max) {
    margin-top: -280px;
    padding-left: $content-l-r-padding;

    // Make DD-Button 100% wide
    .sbox-dd .dropdown-toggle {
      height: $search-input-height-xs;
      width: 100%;
    }

    // AFFIX state
    &.affix {
      background-color: $header-bg-color;
      // FIXME solve differently, apply bg image when in top position or similar - CK
      background-image: url('../images/header-srch-affix-bg-xs.png');
      background-position: bottom center;
      margin-top: 0;
      padding-bottom: 40px;
      padding-top: 40px;
      width: 100%;
    }

    // STATIC State
    &:not(.affix) {
      // Hide toggler + show DD contents
      @include searchbox-toggler-and-content-styles;
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    // Hide toggler + show DD contents
    @include searchbox-toggler-and-content-styles;

    width: 1250px;

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

  .searchForm {
    display: inline-block;
  }


}

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


  @media screen and (min-width: $screen-sm-min) {
  }

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

// ++++++ NavTabs
.nav-tabs {
  border-bottom: 0;
  margin-bottom: 1em;

  @media screen and (min-width: $screen-sm-min) {
    margin-bottom: 2.5em;
  }

  @media screen and (min-width: $screen-lg-min) {
    margin-bottom: 2.5em;
  }

  > li {
    > a {
      @include search-nav-tab-styles(transparent, transparent, transparent);
    }
  }

  > li.active {
    > a,
    a:hover,
    a:focus {
      @include search-nav-tab-styles($white, $white, $white);
    }
  }
}

// ++++++ NavTabs - END

// ++++++ Search input field
input.searchForm_lookfor {
  // overwrite border definitions input[type="text"]
  border: 3px solid $white;
  color: $white;

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

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

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

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

  &.form-control {
    @media screen and (min-width: $screen-lg-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 {
  height: $search-input-height-xs;
  margin-left: -3em;
  padding: 15px 0;

  @media screen and (min-width: $screen-sm-min) {
  }

  @media screen and (min-width: $screen-lg-min) {
    height: $search-input-height-lg;
    padding: 24px 0;
  }

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

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

// Set color for Quickfilter Dropdown button
#quickfilter-dd {
  color: $white;

  // when opened
  .quickfilter.open & {
    background: transparent;
    color: $brand-warning;
  }
}

// Set hover colors for Quickfilter Dropdown button, Search button and Advanced Search button
#quickfilter-dd,
.search-button,
.adv-srch-btn {
  &:hover,
  &:focus {
    color: $brand-warning;
  }
}

// ++++++ Quick filter - END

// ++++++ Search Button
.find-button {
  @media screen and (max-width: $screen-xs-max) {
    float: none !important; // keep !important -- overwrites ".searchForm .list-unstyled li" -- CK
  }

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

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

// ++++++ Search Button

// ++++++ Adv. Search Link
.adv-srch-btn {
  color: $white;
  display: inline-block;
  margin-top: 1em;
}

// ++++++ Adv. Search Link - END

// ********************************************************
// .template-name-home -- searchbox auf homepage unterscheiden von der auf anderen seiten
// headr
// ********************************************************

// ++++ SEARCH BOX - END

// ++ HEADER - END

// ++ SEARCH-RESULTS PAGE
// ++ SEARCH-RESULTS PAGE - END

// ++ DETAILS/RECORD VIEW PAGE
// ++ DETAILS/RECORD VIEW - END

// ++ ADVANCED SEARCH
// ++ ADVANCED SEARCH - END

// PAGE ELEMENTS (Top --> Down) - END