// USER VARIABLES
//

//
// Base Variables
//

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with brower-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it effect the grid breakpoints,
// set $wm-em-base to $wm-base-font-size and make sure $wm-base-font-size is a px value.
// $wm-base-font-size: 100%;

// $wm-base-line-height is 24px while $wm-base-font-size is 16px
// $wm-base-line-height: 150%;

// This is the default html and body font-size for the base em value.
// $wm-em-base: 16;

// We use these to control various global styles
// $wm-body-bg: #fff;
// $wm-body-font-color: #222;
$wm-body-font-family: Georgia, serif;
// $wm-body-font-weight: normal;
// $wm-body-font-style: normal;

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

// We use these to control text direction settings
// $wm-text-direction: ltr;

// NOTE: No need to change this conditional statement, $wm-text-direction variable controls it all.
// $wm-default-float: left;
// $wm-opposite-direction: right;
// @if $wm-text-direction == ltr {
// 	$wm-default-float: left;
// 	$wm-opposite-direction: right;
// } @else {
// 	$wm-default-float: right;
// 	$wm-opposite-direction: left;
// }

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

//
// Global Variables
//

// We use these as default colors throughout

// vl	- very light
// l	- light
// d	- dark
// vd	- very dark

$c-main-1: #2ba6cb;
$c-main-1-vl: lighten($c-main-1, 20%);
$c-main-1-l: lighten($c-main-1, 10%);
$c-main-1-d: darken($c-main-1, 10%);
$c-main-1-vd: darken($c-main-1, 20%);
// $c-main-2: #2bcb88;
// $c-main-2-vl: lighten($c-main-2, 20%);
// $c-main-2-l: lighten($c-main-2, 10%);
// $c-main-2-d: darken($c-main-2, 10%);
// $c-main-2-vd: darken($c-main-2, 20%);
// $c-main-3: #cb512b;
// $c-main-3-vl: lighten($c-main-3, 20%);
// $c-main-3-l: lighten($c-main-3, 10%);
// $c-main-3-d: darken($c-main-3, 10%);
// $c-main-3-vd: darken($c-main-3, 20%);
// $c-grey: #e9e9e9;
// $c-grey-vl: lighten($c-grey, 20%);
// $c-grey-l: lighten($c-grey, 10%);
// $c-grey-d: darken($c-grey, 10%);
// $c-grey-vd: darken($c-grey, 20%);
// $c-alert: #c60f13;
// $c-alert-vl: lighten($c-alert, 20%);
// $c-alert-l: lighten($c-alert, 10%);
// $c-alert-d: darken($c-alert, 10%);
// $c-alert-vd: darken($c-alert, 20%);
// $c-success: #5da423;
// $c-success-vl: lighten($c-success, 20%);
// $c-success-l: lighten($c-success, 10%);
// $c-success-d: darken($c-success, 10%);
// $c-success-vd: darken($c-success, 20%);

// We use these to make sure border radius matches unless we want it different.
// $wm-global-radius: 3px;
// $wm-global-rounded: 1000px;

// We use these to control inset shadow shiny edges and depressions.
// $wm-shiny-edge-size: 0 1px 0;
// $wm-shiny-edge-color: rgba(#fff, .5);
// $wm-shiny-edge-active-color: rgba(#000, .2);

//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
// $wm-cursor-crosshair-value: crosshair;
// $wm-cursor-default-value: default;
// $wm-cursor-pointer-value: pointer;
// $wm-cursor-help-value: help;
// $wm-cursor-text-value: text;

//
// Typography Variables
//

// $wm-include-html-type-classes: $wm-include-html-classes;

// We use these to control header font styles
$wm-header-font-family: 'Roboto Slab', sans-serif;
// $wm-header-font-weight: bold;
// $wm-header-font-style: normal;
$wm-header-font-color: $c-main-1;
// $wm-header-line-height: 1.4;
// $wm-header-top-margin: .2em;
// $wm-header-bottom-margin: .5em;
// $wm-header-text-rendering: optimizeLegibility;

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

// These control how subheaders are styled.
// $wm-subheader-line-height: 1.4;
// $wm-subheader-font-color: lighten($wm-header-font-color, 30%);
// $wm-subheader-font-weight: 300;
// $wm-subheader-top-margin: .2em;
// $wm-subheader-bottom-margin: .5em;

// A general <small> styling
// $wm-small-font-size: 60%;
// $wm-small-font-color: lighten($wm-header-font-color, 30%);

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

// We use these to style <code> tags
$wm-code-color: #333;
$wm-code-font-family: 'Inconsolata', Consolas, 'Liberation Mono', Courier, monospace;
$wm-code-font-weight: 400;
 
// We use these to style anchors
// $wm-anchor-text-decoration: none;
// $wm-anchor-font-color: $c-main-1;
$wm-anchor-font-color-hover: $c-main-1-vl;
 
// We use these to style the <hr> element
// $wm-hr-border-width: 1px;
// $wm-hr-border-style: solid;
// $wm-hr-border-color: #ddd;
// $wm-hr-margin: emCalc(20);

// We use these to style lists
// $wm-ulist-style-type: disc;
// $wm-ulist-style-position: outside;
// $wm-ulist-side-margin: emCalc(20px);
// $wm-ulist-nested-margin: emCalc(20px);
// $wm-olist-style-type: decimal;
// $wm-olist-style-position: outside;
// $wm-olist-side-margin: emCalc(25px);
// $wm-olist-nested-margin: emCalc(25px);
// $wm-dlist-header-weight: bold;
// $wm-dlist-header-margin-bottom: .3em;
// $wm-dlist-margin-bottom: emCalc(12);

// We use these to style blockquotes
// $wm-blockquote-font-color: lighten($wm-header-font-color, 30%);
// $wm-blockquote-padding: emCalc(9, 20, 0, 19);
// $wm-blockquote-border: 1px solid #ddd;
// $wm-blockquote-cite-font-size: emCalc(13);
// $wm-blockquote-cite-font-color: lighten($wm-header-font-color, 20%);
// $wm-blockquote-cite-link-color: $wm-blockquote-cite-font-color;

// Acronym styles
// $wm-acronym-underline: 1px dotted #ddd;

// We use these to control padding and margin
// $wm-microformat-padding: emCalc(10, 12);
// $wm-microformat-margin: emCalc(0, 0, 20, 0);
 
// We use these to control the border styles
// $wm-microformat-border-width: 1px;
// $wm-microformat-border-style: solid;
// $wm-microformat-border-color: #ddd;
 
// We use these to control full name font styles
// $wm-microformat-fullname-font-weight: bold;
// $wm-microformat-fullname-font-size: emCalc(15);

// We use this to control the summary font styles
// $wm-microformat-summary-font-weight: bold;

// We use this to control abbr padding
// $wm-microformat-abbr-padding: emCalc(0, 1);

// We use this to control abbr font styles
// $wm-microformat-abbr-font-weight: bold;
// $wm-microformat-abbr-font-decoration: none;

// Control code in <pre><code>
$wm-include-code-classes: true;

// This code control the color in the code
// $c-code-pre-bg: #111;
// $c-code-1-n: $c-main-1;
// $c-code-1-vl: lighten($c-code-1-n, 10%);
// $c-code-1-l: lighten($c-code-1-n, 5%);
// $c-code-1-d: darken($c-code-1-n, 5%);
// $c-code-1-vd: darken($c-code-1-n, 10%);
// $c-code-2-n: $c-main-2;
// $c-code-2-vl: lighten($c-code-2-n, 30%);
// $c-code-2-l: lighten($c-code-2-n, 15%);
// $c-code-2-d: darken($c-code-2-n, 15%);
// $c-code-2-vd: darken($c-code-2-n, 30%);
// $c-code-3-n: $c-main-3;
// $c-code-3-vl: lighten($c-code-3-n, 30%);
// $c-code-3-l: lighten($c-code-3-n, 15%);
// $c-code-3-d: darken($c-code-3-n, 15%);
// $c-code-3-vd: darken($c-code-3-n, 30%);

//
// Media Queries
//

// $wm-small-screen-min: 0px;
// $wm-medium-screen-min: 640px;
// $wm-large-screen-min: 1024px;
// $wm-xlarge-screen-min: 1440px;

// $wm-small-screen-max: $wm-medium-screen-min - 1;
// $wm-medium-screen-max: $wm-large-screen-min - 1;
// $wm-large-screen-max: $wm-xlarge-screen-min - 1;

// $wm-screen: "only screen";
// $wm-small-only: "only screen and (min-width: #{$wm-small-screen-min}) and (max-width: #{$wm-small-screen-max})";
// $wm-small-min: "only screen and (min-width: #{$wm-small-screen-min})";
// $wm-small-max: "only screen and (max-width: #{$wm-small-screen-max})";
// $wm-medium-only: "only screen and (min-width: #{$wm-medium-screen-min}) and (max-width: #{$wm-medium-screen-max})";
// $wm-medium-min: "only screen and (min-width: #{$wm-medium-screen-min})";
// $wm-medium-max: "only screen and (max-width: #{$wm-medium-screen-max})";
// $wm-large-only: "only screen and (min-width: #{$wm-large-screen-min}) and (max-width: #{$wm-large-screen-max})";
// $wm-large-min: "only screen and (min-width: #{$wm-large-screen-min})";
// $wm-large-max: "only screen and (max-width: #{$wm-large-screen-max})";
// $wm-xlarge-only: "only screen and (min-width: #{$wm-xlarge-screen-min})";
// $wm-xlarge-min: "only screen and (min-width: #{$wm-xlarge-screen-min})";
// $wm-landscape: "only screen and (orientation: landscape)";
// $wm-portrait: "only screen and (orientation: portrait)";

//
// Grid Variables
//

// $wm-include-html-grid-classes: true;
$wm-row-width: emCalc(1200px);
// $wm-column-gutter: emCalc(30px);
// $wm-total-columns: 12;

//
// Button Variables
//

// $wm-include-html-button-classes: $wm-include-html-classes;

// We use these to build padding for buttons.
// $wm-button-med: emCalc(12);
// $wm-button-tny: emCalc(7);
// $wm-button-sml: emCalc(9);
// $wm-button-lrg: emCalc(16);

// We use this to control the display property.
// $wm-button-display: inline-block;
// $wm-button-margin-bottom: emCalc(20);

// We use these to control button text styles.
// $wm-button-font-family: inherit;
// $wm-button-font-color: #fff;
// $wm-button-font-color-alt: #333;
// $wm-button-font-med: emCalc(16);
// $wm-button-font-tny: emCalc(11);
// $wm-button-font-sml: emCalc(13);
// $wm-button-font-lrg: emCalc(20);
// $wm-button-font-weight: bold;
// $wm-button-font-align: center;

// We use these to control various hover effects.
// $wm-button-function-factor: 10%;

// We use these to control button border styles.
// $wm-button-border-width: 1px;
// $wm-button-border-style: solid;

// We use this to set the default radius used throughout the core.
// $wm-button-radius: $wm-global-radius;
// $wm-button-round: $wm-global-rounded;

// We use this to set default opacity for disabled buttons.
// $wm-button-disabled-opacity: 0.6;

//
// Form Variables
//

// $wm-include-html-form-classes: $wm-include-html-classes;

// We use this to set the base for lots of form spacing and positioning styles
// $wm-form-spacing: emCalc(16);

// We use these to style the labels in different ways
// $wm-form-label-pointer: pointer;
// $wm-form-label-font-size: emCalc(14);
// $wm-form-label-font-weight: 500;
// $wm-form-label-font-color: lighten(#000, 30%);
// $wm-form-label-bottom-margin: emCalc(3);
// $wm-input-font-family: inherit;
// $wm-input-font-color: rgba(0,0,0,0.75);
// $wm-input-font-size: emCalc(14);
// $wm-input-bg-color: #fff;
// $wm-input-focus-bg-color: darken(#fff, 2%);
// $wm-input-border-color: darken(#fff, 20%);
// $wm-input-focus-border-color: darken(#fff, 40%);
// $wm-input-border-style: solid;
// $wm-input-border-width: 1px;
// $wm-input-disabled-bg: #ddd;
// $wm-input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
// $wm-input-include-glowing-effect: true;

// We use these to style the select form element.
// $wm-select-bg: #fff;
// $wm-select-fade-to-color: #f3f3f3;
// $wm-select-border-color: $wm-input-border-color;
// $wm-select-triangle-color: #aaa;
// $wm-select-triangle-color-open: #222;
// $wm-select-height: emCalc(13) + ($wm-form-spacing * 1.5);
// $wm-select-margin-bottom: emCalc(20);
// $wm-select-font-color-selected: #141414;
// $wm-select-disabled-color: #888;
// $wm-select-font-size: $wm-input-font-size;
// $wm-select-width-small: 134px;
// $wm-select-width-medium: 254px;
// $wm-select-width-large: 434px;

// We use these to style the fieldset border and spacing.
// $wm-fieldset-border-style: solid;
// $wm-fieldset-border-width: 1px;
// $wm-fieldset-border-color: #ddd;
// $wm-fieldset-padding: emCalc(20);
// $wm-fieldset-margin: emCalc(18, 0);

// We use these to style the legends when you use them
// $wm-legend-bg: #fff;
// $wm-legend-font-weight: bold;
// $wm-legend-padding: emCalc(0, 3);

// We use these to style the prefix and postfix input elements
// $wm-input-prefix-bg: darken(#fff, 5%);
// $wm-input-prefix-border-color: darken(#fff, 20%);
// $wm-input-prefix-border-size: 1px;
// $wm-input-prefix-border-type: solid;
// $wm-input-prefix-overflow: hidden;
// $wm-input-prefix-font-color: #333;
// $wm-input-prefix-font-color-alt: #fff;

// We use these to style the error states for inputs and labels
// $wm-input-error-message-padding: emCalc(6, 4);
// $wm-input-error-message-top: -($wm-form-spacing) - emCalc(5);
// $wm-input-error-message-font-size: emCalc(12);
// $wm-input-error-message-font-weight: bold;
// $wm-input-error-message-font-color: #fff;
// $wm-input-error-message-font-color-alt: #333;

// We use this to style the glowing effect of inputs when focused
// $wm-glowing-effect-fade-time: 0.45s;
// $wm-glowing-effect-color: $wm-input-focus-border-color;

//
// Visibility
//

// $wm-include-html-visibility-classes: $wm-include-html-classes;