//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
@import "_schemes.less";

@globalColor: extract(@global-1, 1);
@globalColor2: extract(@global-1, 2);
@globalColor3: extract(@global-1, 3);


//@primary: #f00;

// Grays
// -------------------------
@black: #000;
@grayDarker: #272727;
@grayDark: #333333;
@gray: #454545;
@grayLight: #999;
@grayLighter: #f2f2f2;
@white: #fff;

// Accent colors
// -------------------------
@blue: #049cdb;
@blueDark: #0064cd;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@orange: #f89406;
@pink: #c3325f;
@purple: #7a43b6;

// Scaffolding
// -------------------------
@bodyBackground: @white;
@textColor: #777777;
@headingsColor: #333;
@linkColorHover: #333;

// Typography
// -------------------------
@sansFontFamily: 'Lato', sans-serif;
@serifFontFamily: Georgia, "Times New Roman", Times, serif;
@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize: 20px;
@baseFontFamily: @sansFontFamily;
@baseLineHeight: 34px;
@altFontFamily: @serifFontFamily;

// Variables for Headings are in bootstrap_addons/_type.less

//FontAwesome
@fa: 'FontAwesome';
@md: 'Material Design';

// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

@fontSizeLarge: round(@baseFontSize * 1.25);
// ~18px
@fontSizeSmall: round(@baseFontSize*.85);
// ~12px
@fontSizeMini: round(@baseFontSize * .75);
// ~11px

@paddingLarge: 11px 19px;
// 44px
@paddingSmall: 2px 10px;
// 26px
@paddingMini: 0 6px;
// 22px

@baseBorderRadius: 3px;
@borderRadiusSmall: 2px;
@borderRadiusLarge: 5px;

// Tables
// -------------------------
// Variables for Element Tables are in bootstrap_addons/_tables.less
@tableBorderRadius: 0;
@tableHeaderMarginBottom: 5px;

//Table Cell
@tableCellPadding: 15px 20px;

// FORUM table variables
//=======================
@tableHeaderTextColor: @white;

// Buttons & ReadMore links
// -------------------------
// Variables for Element Buttons are in bootstrap_addons/_buttons.less

@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;

@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;

@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;

@btnInverseBackground: #444;
@btnInverseBackgroundHighlight: @grayDarker;

// Forms
// -------------------------
// Variables for Element Form are in bootstrap_addons/_forms.less

@radioHeight: 12px;
@checkHeight: 12px;
@inputMarginBottom: 20px;
@inputHeight: 52px;

// Input placeholder text color
// -------------------------
@placeholderText: inherit;

// Dropdowns
// -------------------------

@dropdownBackground: @white;
@dropdownBorder: rgba(0, 0, 0, .2);
@dropdownDividerTop: #E5E5E5;
@dropdownDividerBottom: @white;

@dropdownLinkColor: @grayDark;

@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;

@dropdownLinkColorActive: @dropdownLinkColor;
@dropdownLinkBackgroundActive: @headingsColor;

// COMPONENT VARIABLES
// --------------------------------------------------

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown: 1000;
@zindexPopover: 1010;
@zindexTooltip: 1000;
@zindexFixedNavbar: 1030;
@zindexModalBackdrop: 1040;
@zindexModal: 1050;

// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";

// Hr border color
// -------------------------
@hrBorder: #e4e4e4;

// Wells
// -------------------------
@wellBackground: #f7f7f7;

// Navbar
// -------------------------
// Variables for Element Navbar are in bootstrap_addons/_navbar.less
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: 980px;

// Pagination
// -------------------------
// Variables for Element Pagination are in bootstrap_addons/_pagination.less

// Hero unit
// -------------------------
@heroUnitBackground: @grayLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;

// Form states and alerts
// -------------------------
@warningText: #000;
@warningBackground: #faffbd;
@warningBorder: none;
@warningIcon: #fcdd9a;

@errorText: #000;
@errorBackground: #ffe6e7;
@errorBorder: none;
@errorIcon: #ff6363;

@successText: #000;
@successBackground: #cffeca;
@successBorder: none;
@successIcon: #ade4f9;

@infoText: #000;
@infoBackground: #d8f3fd;
@infoBorder: none;
@infoIcon: #39aa5e;

// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;

@popoverBackground: #fff;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: darken(@popoverBackground, 3%);

// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0, 0, 0, .25);

// GRID
// --------------------------------------------------

// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200: 70px;
@gridGutterWidth1200: 30px;
@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768: 52px;
@gridGutterWidth768: 12px;
@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));

// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);

// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);


// Menu
// --------------------------------------------------


@menuItemLineHeight: @baseLineHeight;
@menuItemActColor: @globalColor;
@subMenuItemActColor: @globalColor;
@subMenuItemBgActColor: transparent;

.fluidcol(@num) {
  width: 99.9999% / (12/@num);
}

.fluidcols(@num) {
  width: 99.9999% / @num;
}

.transform(@param) {
  transform: @param; -o-transform: @param; -moz-transform: @param; -webkit-transform: @param; -ms-transform: @param;
}

.transform-origin(@param) {
  transform-origin: @param; -o-transform-origin: @param; -moz-transform-origin: @param; -webkit-transform-origin: @param; -ms-transform-origin: @param;
}

.transform-style(@param) {
  transform-style: @param; -o-transform-style: @param; -moz-transform-style: @param; -webkit-transform-style: @param; -ms-transform-style: @param;
}

.perspective(@param) {
  -webkit-perspective: @param;
  -moz-perspective: @param;
  perspective: @param;
}
