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