@charset "UTF-8";
// Custom OE styles


// Table of Contents overruled
// OE Settings
//
// a. Base
// b. Grid
// c. Global
// d. Media Query Ranges
// e. Typography
// 09. Dropdown Buttons
// 20. Pagination
// 21. Panels
// 28. Sub Nav
// 29. Switch
// 31. Tabs
// 34. Top Bar


// a. Base
// - - - - - - - - - - - - - - - - - - - - - - - - -


// Allows the use of rem-calc() or lower-bound() in your settings
@import "base-variables";
@import "pyoes/foundation/functions";

$fa-font-path: "../node_modules/font-awesome/fonts";
$oe-font-path: "../node_modules/pyoes/fonts";
$oe-img-path: "../img/pyoes";

$base-font-size: 100%;

// The $base-font-size is 100% while $base-line-height is 10%
$base-line-height: 140%;

// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true;
// $include-print-styles: true;
$include-html-global-classes: $include-html-classes;

// b. Grid
// - - - - - - - - - - - - - - - - - - - - - - - - -


$row-width: rem-calc(1172) !default;
$total-columns: 12;
$column-gutter: rem-calc(30);


// c. Global
// - - - - - - - - - - - - - - - - - - - - - - - - -
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;

// We use these to control various global styles
$body-bg: #F5F5F5;
$body-font-color: $silver;
$body-font-family: $font-family-sans-serif;
$body-font-weight: $font-weight-normal;
$body-font-style: normal;

$body-error-bg: $dark-purple;

// We use this to control font-smoothing
$font-smoothing: antialiased;

// Overwrite border bottom and font-weight for tooltip fields
$has-tip-border-bottom: none;
$has-tip-border-bottom-hover: none;
$has-tip-font-weight: none;


// d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - -

// OE Query Ranges

$small-range: (0em, 36.125em) !default;
$medium-range: (36.128em, 55.500em) !default;
$large-range: (55.503em, 73.125em) !default;
$xlarge-range: (73.128em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;


// e. Typography
// - - - - - - - - - - - - - - - - - - - - - - - - -

$header-font-color: $dark-purple;

// A general <small> styling
$small-font-size: 80%;

// We use these to style paragraphs
$paragraph-font-size: 1rem;
$paragraph-line-height: 1.4;


// We use these to style blockquotes
$blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
$blockquote-padding: rem-calc(2 20 0 19);
$blockquote-border: 3px solid $mid-purple;


// We use these to set the padding around the breadcrumbs.

$crumb-side-padding: rem-calc(14);
$crumb-border-size: 0;


// We use these to set various text styles for breadcrumbs.
$crumb-font-size: rem-calc(13);
$crumb-font-color-current: $dark-gray;
$crumb-font-color-unavailable: $silver;
// We use these to control the slash between breadcrumbs
$crumb-slash: "›";
// We use these to style the fieldset border and spacing.
$fieldset-border-color: $mid-gray;

// We use these to style the legends when you use them
$legend-bg: none;

// We use these to style the error states for inputs and labels
 $input-error-message-padding: rem-calc(3 6 6);
 $input-error-message-top: -1px;
 $input-error-message-font-size: rem-calc(12);
 $input-error-message-font-weight: $font-weight-normal;
 $input-error-message-font-style: normal;
 $input-error-message-font-color: $alert-color;
 $input-error-message-font-color-alt: $light-purple;


// Select variables
$select-bg-color: $white;
$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);


// 09. Dropdown Buttons
// - - - - - - - - - - - - - - - - - - - - - - - - -

$button-pip-sml: rem-calc(4);
$dropdown-button-padding-sml: $button-pip-sml * 7;


// 20. Pagination
// - - - - - - - - - - - - - - - - - - - - - - - - -

$pagination-li-font-color: $dark-purple;
$pagination-li-font-size: rem-calc(14);
$pagination-li-margin: rem-calc(5);
$pagination-link-font-color: $light-purple;
$pagination-link-active-bg: scale-color($white, $lightness: -10%);
$pagination-link-unavailable-font-color: $silver;


// 21. Panels
// - - - - - - - - - - - - - - - - - - - - - - - - -

$panel-bg: scale-color($white, $lightness: 95%);
$panel-font-color: $steel;

// 28. Sub Nav
// - - - - - - - - - - - - - - - - - - - - - - - - -

$sub-nav-font-color: $light-purple;

// 29. Switch
// - - - - - - - - - - - - - - - - - - - - - - - - -

// We use these to control default font sizes for our classes.
$switch-font-size-tny: 11px;
$switch-font-size-sml: 12px;
$switch-font-size-med: 14px;
$switch-font-size-lrg: 17px;

// 31. Tabs
// - - - - - - - - - - - - - - - - - - - - - - - - -

$tabs-navigation-padding: rem-calc(12);
$tabs-navigation-bg-color: $mid-purple;
$tabs-navigation-active-bg-color: $very-dark-purple;
$tabs-navigation-font-color: $white;
$tabs-navigation-font-size: rem-calc(14);
.tabs-content {background:$light-gray;padding:5px 10px;margin-top:1px;}
.tabs dd {margin-right:1px !important}

// 34. Top Bar
// - - - - - - - - - - - - - - - - - - - - - - - - -

$topbar-bg-color: $mid-purple;
$topbar-bg: $topbar-bg-color;
$topbar-margin-bottom: 30px;
$topbar-dropdown-bg: $mid-purple;
$topbar-dropdown-link-bg: $mid-purple;
$topbar-menu-link-color-toggled: $white;
$topbar-menu-icon-color-toggled: $white;
$topbar-breakpoint: #{lower-bound($large-range)};

// Set the link colors and styles for top-level nav

$topbar-link-font-size: rem-calc(14);
$topbar-link-bg-hover: $very-dark-purple;
$topbar-link-bg-active: $very-dark-purple !default;
$topbar-link-bg-active-hover: scale-color($very-dark-purple, $lightness: -14%);
