@charset "UTF-8";

// Headings , paragraph,  small text , text alignment , blockquotes, lists , hr


// fonts are defined > oe-settings.scss c. Global 

h1,h2,h3,h4,h5,h6 {line-height: 1.2em;font-weight:200;font-family: $font-family-medium-serif;}
h4,h5,h6 {font-family: $font-family-light-serif;font-weight:200;}
h1{font-size:2.19em;color:$dark-purple !important}
h2{font-size:1.88em;color:$jet !important;padding:10px 0 0 0}
h3{font-size:1.56em;color:$dark-purple !important}
h4{font-size:1.25em;color:$light-purple !important}
h5{font-size:1.13em;color:$mid-purple !important}
h6{font-size:1em;color:$steel !important;padding:5px 0}

$include-html-type-classes: $include-html-classes !default;

// We use these to control header font styles
$header-font-family: $body-font-family !default;
$header-font-weight: $font-weight-normal !default;
$header-font-style: $font-weight-normal !default;
$header-font-color: $jet !default;
$header-line-height: 1.4 !default;
$header-top-margin: .2rem !default;
$header-bottom-margin: .5rem !default;
$header-text-rendering: optimizeLegibility !default;

// We use these to control header font sizes
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;

// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

// These control how subheaders are styled.
$subheader-line-height: 1.4 !default;
$subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;
$subheader-font-weight: $font-weight-normal !default;
$subheader-top-margin: .2rem !default;
$subheader-bottom-margin: .5rem !default;


// A general <small> styling
$small-font-size: 60% !default;
$small-font-color: scale-color($header-font-color, $lightness: 35%) !default;

// We use these to style paragraphs
$paragraph-font-family: inherit !default;
$paragraph-font-weight: $font-weight-normal !default;
$paragraph-font-size: 1rem !default;
$paragraph-line-height: 1.6 !default;
$paragraph-margin-bottom: rem-calc(20) !default;
$paragraph-aside-font-size: rem-calc(14) !default;
$paragraph-aside-line-height: 1.35 !default;
$paragraph-aside-font-style: italic !default;
$paragraph-text-rendering: optimizeLegibility !default;

// We use these to style anchors
$anchor-text-decoration: none !default;
$anchor-text-decoration-hover: none !default;
$anchor-font-color: $primary-color !default;
$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;

// We use these to style the <hr> element
$hr-border-width: 1px !default;
$hr-border-style: solid !default;
$hr-border-color: $light-gray !default;
$hr-margin: rem-calc(20) !default;

// We use these to style lists
$list-font-family: $paragraph-font-family !default;
$list-font-size: $paragraph-font-size !default;
$list-line-height: $paragraph-line-height !default;
$list-margin-bottom: $paragraph-margin-bottom !default;
$list-style-position: outside !default;
$list-side-margin: 1.1rem !default;
$list-ordered-side-margin: 1.4rem !default;
$list-side-margin-no-bullet: 0 !default;
$list-nested-margin: rem-calc(20) !default;
$definition-list-header-weight: $font-weight-bold !default;
$definition-list-header-margin-bottom: .3rem !default;
$definition-list-margin-bottom: rem-calc(12) !default;

// We use these to style blockquotes
$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;
$blockquote-padding: rem-calc(9 20 0 19) !default;
$blockquote-border: 1px solid $gray  !default;
$blockquote-cite-font-size: rem-calc(13) !default;
$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;
$blockquote-cite-link-color: $blockquote-cite-font-color !default;

// Acronym styles
// $acronym-underline: 1px dotted $gray  !default;


// Text alignment class names
$align-class-names:
  small-only,
  small,
  medium-only,
  medium,
  large-only,
  large,
  xlarge-only,
  xlarge,
  xxlarge-only,
  xxlarge;

// Text alignment breakpoints
$align-class-breakpoints:
  $small-only,
  $small-up,
  $medium-only,
  $medium-up,
  $large-only,
  $large-up,
  $xlarge-only,
  $xlarge-up,
  $xxlarge-only,
  $xxlarge-up;

// Generates text align and justify classes
@mixin align-classes{
  .text-left    { text-align: left !important; }
  .text-right   { text-align: right !important; }
  .text-center  { text-align: center !important; }
  .text-justify { text-align: justify !important; }

  @for $i from 1 through length($align-class-names) {
    @media #{(nth($align-class-breakpoints, $i))} {
      .#{(nth($align-class-names, $i))}-text-left { text-align: left !important; }
      .#{(nth($align-class-names, $i))}-text-right   { text-align: right !important; }
      .#{(nth($align-class-names, $i))}-text-center  { text-align: center !important; }
      .#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; }
    }
  }
}

