// VARIABLES

// SKINNING VARIABLES

@colorP1: #666;
@colorS1: #fff;

@colorP2: #999;
@colorS2: #fff;

@colorP3: #CCC;
@colorS3: #fff;

@colorP4: #efefef;
@colorS4: #333;


// **************
// BASE VARIABLES
// **************


// MEASURMENTS
@rem: 1rem;
@em: 1em;
@px: 10px;
@pct: 100%;


// MEDIA QUERY DIMENSIONS
// unit gets applied later
@mediaquery-sm: 320;
@mediaquery-md: 599;
@mediaquery-lg: 995;
@mediaquery-xl: 1199;
@unit: px;
// add the units
@mq-sm-unit: unit( @mediaquery-sm, @unit); // 320

@mq-md-unit: unit( @mediaquery-md, @unit); // 599
	@mq-md-unit-ceil: unit( (@mediaquery-md + 1), @unit); // 600

@mq-lg-unit: unit( @mediaquery-lg, @unit); // 995
	@mq-lg-unit-ceil: unit( (@mediaquery-lg + 1), @unit); // 996

@mq-xl-unit: unit( @mediaquery-xl, @unit); // 1199
    @mq-xl-unit-ceil: unit( (@mediaquery-xl + 1), @unit); // 1200

@mq-sm: ~'screen and (max-width: @{mq-md-unit})'; // 0 - 599
@mq-md: ~'screen and (min-width: @{mq-md-unit-ceil}) and (max-width: @{mq-lg-unit})'; // 600 - 995
@mq-lg: ~'screen and (min-width: @{mq-lg-unit-ceil}) and (max-width: @{mq-xl-unit})'; // 996 -1199
@mq-xl: ~'screen and (min-width: @{mq-xl-unit-ceil})'; // 1200


// BACKGROUND COLORS
@bg1: #eaeaea;
@bg2: fade(@bg1,5%);
@bg3: fade(@bg1,5%);


// BORDER COLOR
@border1: #d5d5d5;
@border2: tint(@border1, 45);
@border3: tint(@border1, 66);
@border4: tint(@border1, 85);


// BORDER RADIUS
@radius: 3px;


// Z-INDEX
@index-10: 100000;
@index-9: 90000;
@index-8: 80000;
@index-7: 70000;
@index-6: 60000;
@index-5: 50000;
@index-4: 40000;
@index-3: 30000;
@index-2: 20000;
@index-1: 10000;


// *******
// WIDGETS
// *******

// AUTOCOMPLETE
@ac-color: #222;
@ac-size: 1.3;
@ac-bgcolor: #fff;
@ac-bordercolor: #aaa;
@ac-result-color: #000;
@ac-result-color-hover: #fff;
@ac-result-bgcolor-hover: #0080ff;


// BREADCRUMB
@breadcrumb-color: @colorP1;
@breadcrumb-bgcolor: #f0f0f0;
@breadcrumb-content: '/';


// BUTTON
@btn-height: 30px;
@btn-font-size: 1.4;
// default
@btn-default-color: #424242;
	@btn-default-color-hover: @btn-default-color;
@btn-default-bgcolor: #e7e7e7;
	@btn-default-bgcolor-hover: darken(@btn-default-bgcolor, 20%);
	@btn-default-bgcolor-active: darken(@btn-default-bgcolor, 10%);
@btn-default-bordercolor: darken(@btn-default-bgcolor, 20%);
	@btn-default-bordercolor-hover: darken(@btn-default-bordercolor, 10%);
	@btn-default-bordercolor-active: @btn-default-bordercolor-hover;
@btn-default-fade-top: rgba(255,255,255,1);
@btn-default-fade-bottom: rgba(255,255,255,0);
// search button
@btn-search-color: @colorS2;
	@btn-search-color-hover: @btn-search-color;
@btn-search-bgcolor: @colorP3;
	@btn-search-bgcolor-hover: darken(@btn-search-bgcolor, 10%);
	@btn-search-bgcolor-active: darken(@btn-search-bgcolor, 5%);
@btn-search-bordercolor: darken(@btn-search-bgcolor, 3%);
	@btn-search-bordercolor-hover: darken(@btn-search-bordercolor, 10%);
	@btn-search-bordercolor-active: @btn-search-bordercolor-hover;
@btn-search-fade-top: rgba(255,255,255,.1);
@btn-search-fade-bottom: rgba(255,255,255,0);
// known search button
@btn-search-known-color: @colorS2;
	@btn-search-known-color-hover: @btn-search-known-color;
@btn-search-known-bgcolor: #0b3458;
	@btn-search-known-bgcolor-hover: @btn-search-known-bgcolor;
	@btn-search-known-bgcolor-active: @btn-search-known-bgcolor;
@btn-search-known-bordercolor: #575656;
	@btn-search-known-bordercolor-hover: @btn-search-known-bordercolor;
	@btn-search-known-bordercolor-active: @btn-search-known-bordercolor-hover;
@btn-search-known-fade-top: #1d5b94;
@btn-search-known-fade-bottom: #104779;
// primary button
@btn-primary-color: #424242;
	@btn-primary-color-hover: darken(@btn-primary-color, 10%);
@btn-primary-bgcolor: #f9ce5a;
	@btn-primary-bgcolor-hover: darken(@btn-primary-bgcolor, 20%);
	@btn-primary-bgcolor-active: darken(@btn-primary-bgcolor, 10%);
@btn-primary-bordercolor: darken(@btn-primary-bgcolor, 20%);
	@btn-primary-bordercolor-hover: darken(@btn-primary-bordercolor, 10%);
	@btn-primary-bordercolor-active: @btn-primary-bordercolor-hover;
@btn-primary-fade-top: rgba(255,255,255,.6);
@btn-primary-fade-bottom: rgba(255,255,255,0);
// light button
@btn-light-color: @colorS2;
	@btn-light-color-hover: @btn-light-color;
@btn-light-bgcolor: #3271cf;
	@btn-light-bgcolor-hover: darken(@btn-light-bgcolor, 20%);
	@btn-light-bgcolor-active: darken(@btn-light-bgcolor, 10%);
@btn-light-bordercolor: transparent;
	@btn-light-bordercolor-hover: transparent;
	@btn-light-bordercolor-active: transparent;
@btn-light-fade-top: #5193f3;
@btn-light-fade-bottom: #3c84ee;
// disabled button
@btn-disabled-color: #c1c1c1;
	@btn-disabled-color-hover: darken(@btn-disabled-color, 10%);
@btn-disabled-bgcolor: #fff;
	@btn-disabled-bgcolor-hover: @btn-disabled-bgcolor;
	@btn-disabled-bgcolor-active: @btn-disabled-bgcolor;
@btn-disabled-bordercolor: @btn-disabled-color;
	@btn-disabled-bordercolor-hover: @btn-disabled-bordercolor;
	@btn-disabled-bordercolor-active: @btn-disabled-bordercolor-hover;
@btn-disabled-fade-top: transparent;
@btn-disabled-fade-bottom: transparent;
// text buttons
@btn-color-txt: #333;
@btn-color-txt-link: @link-color;
@btn-bgcolor-txt: transparent;
	@btn-bgcolor-txt-hover: transparent;
	@btn-bgcolor-txt-active: transparent;
@btn-bordercolor-txt: transparent;
	@btn-bordercolor-txt-hover: transparent;
	@btn-bordercolor-txt-active: transparent;


// CAROUSEL
@carousel-border: none;
@carousel-img: 'buzzImages/video-js.png';
@carousel-img-border: @border1;


// CONTENT-STYLES


// CONTENT
@content-border: @border1;


// DROPDOWN
@dd-bgcolor: @bg1;
@dd-list-bgcolor: #fff;
@dd-list-bordercolor: @border3;
// labels
@dd-label-color: @colorS1;
@dd-label-color-hover: @colorS1;
@dd-label-bgcolor: @bg1;
@dd-label-bgcolor-hover: darken(@bg1, 20);
// inputs
@dd-input-color: @font-color;
@dd-input-bgcolor: darken(@bg2, 10%);
@dd-input-bgcolor-hover: @bg3;
@dd-active-color: @font-color;


// FORMS


// GRID
@grid-sides: 20px;
@side-gutter: 25px;
@grid-border-color: #e2e2e2;
@grid-top-bottom: 30px; // gets divided by 2 in _grid.less


// HIGHLIGHT
@highlight-bgcolor: #ff0;
@selected-highlight-bgcolor: #cef;


// INPUT
@input-bordercolor: #aaa8a8;
@input-height: @btn-height;
@input-reset-color: #ccc;
@input-reset-color-hover: darken(@searchbar-reset-color,10);
@input-reset-bgcolor: transparent;
@input-reset-bordercolor: @searchbar-reset-bordercolor;
@input-disabled-bordercolor: @btn-disabled-bordercolor;
@placeholder-color: #aaa8a8;


//LAYOUT
@lay-top-padding: 0;
@lay-right-padding: (@px * 2.5);
@lay-bottom-padding: (@px * 5);
@lay-left-padding: (@px * 2.5);
// columns
@col-top-padding: 0;
@col-right-padding: 0;
@col-bottom-padding: 0;
@col-left-padding: 0;


//LAYOUT - FIXED
@p: 70; // will be converted to pixels


// LIST
@list-lines-bgcolor: #efefef;
@list-lines-bgcolor-odd: darken(@list-lines-bgcolor, 10%);
@list-inline-bordercolor: #efefef;


// LOGO
@logo-padding-side: 20px;
@logo-position-top: 16px;


// MEDIABLOCK


// MESSAGING
@msg-color: @colorP2;
@msg-bgcolor: @colorS2;
@msg-bordercolor: darken(@msg-bgcolor, 10%);
@msg-close-color: @colorP1;
// info
@msg-info-color: #e4f1ff;
@msg-info-bgcolor: fade(@msg-info-color, 10%);
@msg-info-bordercolor: darken(@msg-info-bgcolor, 10%);
@msg-info-icon: 'buzzImages/msg-error.gif';
//success
@msg-success-color: #e6fadf;
@msg-success-bgcolor: fade(@msg-success-color, 10%);
@msg-success-bordercolor: darken(@msg-success-bgcolor, 10%);
@msg-success-icon: 'buzzImages/msg-error.gif';
// note
@msg-note-color: #e7e7b1;
@msg-note-bgcolor: #faf9b9;
@msg-note-bordercolor: #fcc37c;
@msg-note-icon: 'buzzImages/msg-error.gif';
// alert
@msg-alert-color: #ae0404;
@msg-alert-bgcolor: #fde3e3;//fade(@msg-alert-color, 10%);
@msg-alert-bordercolor: darken(@msg-alert-color, 10%);
@msg-alert-icon: 'buzzImages/msg-error.gif';


// MIXINS


// MODAL
@ui-dialog-width: 615px !important;
@ui-dialog-bgcolor: #fff;
@ui-dialog-bordercolor: #ccc;
@ui-dialog-close-bgcolor: rgba(0, 0, 0, 0);
@ui-dialog-close-bgimage: 'buzzImages/modal-close.png';
@ui-dialog-header-bgimage: 'buzzImages/modal-gradient.png';
@ui-dialog-note-bordercolor: #fcc37c;
@ui-dialog-note-bgcolor: #faf9b9;
@ui-dialog-content-input-color: #6f6f6f;
@ui-dialog-content-error-color: #f00;
@ui-dialog-overlay-bgcolor: #111;
@ui-dialog-overlay-bgimage: 'buzzImages/ui-bg_black_75_100x100.png';
@modal-bgcolor: #fff;
@modal-bordercolor: #ccc;
@modal-dropshadow: 2px 2px 4px rgba(0,0,0,.25);
@modal-heading-color: @colorP2;
@modal-txt-color: @colorS4;
@modal-txt-link-color: @colorP4;


// PAGE
@fixed-page-width: false;
@pg-width: 100%;
@pg-width-min: 1000px;
@pg-width-max: 1200px;
@header-border-color: @border1;
@header-border-gradient-bgcolor: #fff;
@header-border-gradient-startcolor: #fcfcfc;
@header-border-gradient-stopcolor: #fff;


// PAGINATION
// @pag-base-color: #76bdf2; // actual to the mocks
@pag-base-color: lighten(@colorP1, 45%); // close to the mocks
@pag-bgcolor: lighten(@pag-base-color, 23%);
@pag-bgcolorhover: darken(@pag-bgcolor, 5%);
@pag-txt-color-active: #333;
@pag-txt-bordercolor-active: #ccc;
@pag-transport-bordercolor: @pag-txt-color-active;
@pag-transport-borderwidth: @px * .9;


// RESULT-ITEM
@result-item-img-width: 125px;
@result-item-img-padding: 15px;
@result-item-content-margin: @result-item-img-width + @result-item-img-padding;
@result-item-img-bordercolor: #c4c4c4;


// RTL


// SEARCHBAR
@searchbar-btnWidth: 95px;
@searchbar-input-height: 30px;
@searchbar-input-bordercolor: @input-bordercolor;
@searchbar-reset-color: #ccc;
@searchbar-reset-color-hover: darken(@searchbar-reset-color,10);
@searchbar-reset-bgcolor: transparent;
@searchbar-reset-bgcolor-hover: @searchbar-reset-bgcolor;
@searchbar-reset-bordercolor: none;
@searchbar-reset-bordercolor-hover: @searchbar-reset-bordercolor;


// SELECT
@select-position: @btn-height + 2;
@select-boxshadow: rgba(0, 0, 0, 0.25);
@select-bgcolor: #fff;
@select-bgcolor-bgcolor-hover: #ccc;
@select-bordercolor: @select-bgcolor-bgcolor-hover;
// label
@select-label-color: @colorS1;
@select-label-color-hover: @colorS1;
@select-label-bgcolor: @bg1;
@select-label-bgcolor-hover: darken(@bg1, 20);
// input
@select-input-color: @font-color;
@select-input-bgcolor: darken(@bg2, 10%);
@select-input-bgcolor-hover: @bg3;
@select-active-color: @font-color;


// SPINNER
@slide-width: 200px;


// SPINNER
@spinner-sm: 'buzzImages/spinner-circles.gif';
@spinner-md: 'buzzImages/spinner-circles.gif';
@spinner-lg: 'buzzImages/spinner-circles.gif';
@spinner-img: @spinner-md;


// TABLES
@table-bgcolor: #000;
@table-bordercolor: @border1;
@table-thead-bgcolor: @colorS2;
@table-th-bordercolor: @border1;
@table-td-bordercolor: @border1;


// TAB
@tab-color: @font-color;
@tab-color-selected: #fff;
@tab-bgcolor: rgba(178, 168, 155, 0.25);
@tab-bgcolor-hover: fade(@tab-bgcolor, 50%);
@tab-bgcolor-selected: #1a7a85;
@tab-bordercolor: @border1;
@tab-bordercolor-hover: @tab-bordercolor;
// active tabs
@tab-active-bgcolor: @colorS1;
@tab-active-bgcolor-hover: @colorS1;
@tab-active-bordercolor: @border1;
@tab-active-bordercolor-hover: @tab-active-bordercolor;
// tab content
@tab-content-bordercolor: @border1;
@tab-active-content-bgcolor: @colorS1;


// TAG
@tag-color: #333;
@tag-bgcolor: #eee;


// TOGGLE
@tog-bgcolor: @colorS1;
@tog-bordercolor: @border1;
@tog-tab-bgcolor: @colorS1;
@tog-tab-bordercolor: @border1;
@tog-tab-icon-bordercolor: @border1;


// TOOLBAR
@tbar-bgcolor: @colorP1;
@tbar-personal-bgcolor: overlay(@colorP1, rgba(0,0,0,.25));
@tbar-height: 35px;
// user navigation
@usernav-item-color: #fff;
@usernav-item-bgcolor: @tbar-bgcolor;
@usernav-item-bgcolor-hover: darken(@tbar-bgcolor, 5);
// user navigation icons
@usernav-item-folder-bgcolor: rgba(0, 0, 0, 0);
@usernav-item-folder-icon: 'buzzImages/folder-sprite.png';
@usernav-item-language-icon: 'buzzImages/arrow-sprites.png';
@usernav-item-language-bgcolor-hover: #fff;


// TRANSPORT
@transport-width: 15px;
@transport-width-short: (@transport-width * .5);
@transport-color: #535353;
@transport-color-hover: darken(#535353, 10);
@transport-inactive: @border1;
// slim
@transport-slim-fontfamily: Arial, 'Arial Unicode MS', sans-serif;
@transport-slim-fontsize: 2.25;
@transport-slim-arrow-top: '›';
@transport-slim-arrow-right: '›';
@transport-slim-arrow-bottom: '‹';
@transport-slim-arrow-left: '‹';
@transport-slim-color: #ccc;
@transport-slim-color-hover: darken(#ccc, 20%);
@transport-slim-bordercolor: rgba(0, 0, 0, 0);
@transport-slim-color-disabled: #9b9b9b;
@transport-slim-color-enabled: @link-color;
@transport-slim-color-enabled-hover: darken(@transport-slim-color-enabled, 10);


// TREELIST
@treelist-color: @font-color;
@treelist-bgcolor: #f0f0f0;
@treelist-bordercolor: @colorP1;
@treelist-border-size: 10;
@treelist-borderwidth: unit(@treelist-border-size, px);
@treelist-padding-left: unit( @treelist-borderwidth, px );
@treelist-margin-left: unit( -(@treelist-borderwidth + 5), px  );
@treelist-arrow-color: #999;
@treelist-arrow-color-active: @font-color;


// TYPOGRAPHY
@font-color: #333;
@font-color-strong: #000;
@font-size: 62.5%;
//placeholder
@placeholder-color: tint(@font-color, 70);
// headings
@h1-size: 2;
@h1-line-height: 30px;
@h2-size: 1.8;
@h2-line-height: 22px;
@h3-size: 1.7;
@h3-line-height: 22px;
@h4-size: 1.5;
@h4-line-height: 1.25em;
@h5-size: 1.4;
@h5-line-height: 1.25em;
@h6-size: 1.2;
@h6-line-height: 1.25em;
@heading-color: @colorP1;
@subheading-color: #262626;
// text
@p-color: #262626;
@p-size: 1.6;
@p-line-height: 18px;
// links
@link-color: #005bc6;
@link-decoration: none;
@link-color-visited: @link-color;
@link-decoration-visited: underline;
@link-color-hover: darken(@link-color, 10%);
@link-decoration-hover: underline;
@link-color-focus: darken(@link-color, 10%);
@link-decoration-focus: underline;
@link-color-active: darken(@link-color, 10%);
@link-decoration-active: underline;
// blockquote
@blockquote-border-color: @colorS3;
//code
@code-color: #696;


// WIDTH
@widget-padding: 47px;