/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

@import 'http://fonts.googleapis.com/css?family=Open+Sans:400,300';

/*
 * Variables component
 *
 ========================================================================== */


/* Global variables
 ========================================================================== */

/*
 * Text
 */

@global-color:									#8b8e94;
@global-muted-color:							#b3b5b7;

@global-link-color:								#83d6df;
@global-link-hover-color:						darken(@global-link-color, 25%);

@global-font-size:								15px;
@global-line-height:							24px;

/*
 * Backgrounds & Borders
 */

@global-background:								#f8fbfc;
@global-primary-background:						#ff8f8b;
@global-success-background:						#a7d155;
@global-warning-background:						#FAA732;
@global-danger-background:						#DA314B;
@global-border:									rgba(140,140,145,0.15);

/*
 * Spacings
 */

@global-large-margin:							20px;

/*
 * Controls
 */

@global-large-height:							52px;


/* Theme global variables
 ========================================================================== */

/*
 * Backgrounds
 */

@theme_global-default-background:				#83d6df;
@theme_global-light-background:					rgba(95,120,130,0.04);
@theme_global-dark-background:					#3e4145;
@theme_global-transparent-background:			rgba(0,0,0,0.1);
@theme_global-disabled-background:				rgba(95,120,130,0.04);

/*
 * Borders
 */

@theme_global-small-border-radius: 				3px;
@theme_global-large-border-radius: 				50px;
@theme_global-divider-height:					5px;

/*
 * Shadows
 */

@theme_global-box-shadow: 						rgba(0,0,0,0.05);
@theme_global-text-shadow: 						rgba(0,0,0,0.1);


/* Component variables
 ========================================================================== */

/*
 * Base
 */

@base-body-font-family: 						'Open Sans';
@base-heading-font-family: 						'Open Sans';

@base-em-color:									darken(@global-color, 25%);
@base-ins-background:							lighten(@theme_global-default-background, 24%);
@base-mark-background:							@base-ins-background;
@base-selection-background:						lighten(@theme_global-default-background, 10%);
@base-code-color:								lighten(@theme_global-default-background, 15%);
@base-pre-background:							lighten(@theme_global-light-background, 15%);

@base-heading-color:							#3F4044;
@base-heading-margin-top:						30px;
@base-h1-font-size:								round(@global-font-size * 2.66); // 40px
@base-h1-line-height:							round(@base-h1-font-size * 1.5); // 60px
@base-h2-font-size:								round(@global-font-size * 2); // 30px
@base-h2-line-height:							round(@base-h2-font-size * 1.33); // 40px
@base-h3-font-size:								round(@global-font-size * 1.6); // 24px
@base-h3-line-height:							round(@base-h3-font-size * 1.25); // 30px
@base-h4-font-size:								round(@global-font-size * 1.07); // 16px
@base-h4-line-height:							round(@base-h4-font-size * 1.37); // 22px
@base-h5-font-size:								@global-font-size; // 14px
@base-h5-line-height:							@global-line-height; // 20px
@base-h6-font-size:								round(@global-font-size * 0.8); // 12px
@base-h6-line-height:							round(@base-h6-font-size * 1.5); // 18px

/*
 * Panel
 */

@panel-title-font-size:							round(@global-font-size * 1.6); // 24px
@panel-title-line-height:						round(@panel-title-font-size * 1.25); // 30px

@panel-title-color:								@base-heading-color;

@panel-box-padding:								40px;
@panel-box-background:							@global-contrast-color;
@panel-box-title-color:							@base-heading-color;
@panel-box-badge-top: 							-8px;
@panel-box-badge-right:							0;

@panel-box-primary-background:					@global-primary-background;
@panel-box-primary-color:						@global-contrast-color;
@panel-box-primary-title-color: 				@global-contrast-color;

@panel-box-secondary-background:				@theme_global-dark-background;
@panel-box-secondary-color:						@global-color;
@panel-box-secondary-title-color:				lighten(@global-color, 25%);

@panel-header-title-color: 						@base-heading-color;

/*
 * Article
 */

@article-margin-top: 							@global-large-margin;

@article-title-font-size:						round(@global-font-size * 2.66); // 40px
@article-title-line-height:						round(@article-title-font-size * 1.5); // 60px
@article-lead-line-height:						round(@global-font-size * 2.13); // 32px

@article-meta-font-size:						round(@global-font-size * 0.8); // 12px

/*
 * Comment
 */

@comment-list-margin-top: 						@global-large-margin;

/*
 * Nav
 */

@nav-sub-padding-vertical:						15px;
@nav-sub-padding-horizontal:					@nav-sub-padding-vertical;

@nav-parent-icon:								"\f107";
@nav-parent-open-icon:							"\f106";

@nav-side-hover-color:							@global-contrast-color;
@nav-side-active-background:					fadeout(@theme_global-dark-background, 98%);
@nav-side-active-color:							@global-color;

@nav-side-header-color:							lighten(@global-color, 20%);
@nav-side-nested-color: 						@global-color;
@nav-side-nested-hover-color:					@global-link-color;

@nav-dropdown-color:							@global-color;
@nav-dropdown-header-color:						lighten(@global-color, 20%);
@nav-dropdown-hover-background:					@theme_global-default-background;
@nav-dropdown-nested-color:						@global-color;
@nav-dropdown-nested-hover-color:				@global-contrast-color;

@nav-navbar-color:								@global-color;
@nav-navbar-hover-color:						@global-contrast-color;
@nav-navbar-hover-background:					@theme_global-default-background;
@nav-navbar-header-color:						lighten(@global-color, 20%);
@nav-navbar-nested-color:						@global-color;
@nav-navbar-nested-hover-color:					@global-contrast-color;

@nav-search-color: 								@global-color;
@nav-search-active-background:					@theme_global-transparent-background;

@nav-offcanvas-color:							@global-contrast-color;
@nav-offcanvas-header-color:					lighten(@global-color, 20%);
@nav-offcanvas-hover-background:				@global-contrast-color;
@nav-offcanvas-hover-color:						@theme_global-dark-background;
@nav-offcanvas-active-color:					@global-contrast-color;
@nav-offcanvas-active-background:				@theme_global-default-background;

/*
 * Navbar
 */

@navbar-background:								#26292C;
@navbar-color:									@global-color;

@navbar-nav-height:								35px;
@navbar-nav-font-size:							round(@global-font-size * 1.07); // 16px;
@navbar-nav-padding-horizontal:					20px;
@navbar-nav-color:								@global-color;
@navbar-nav-hover-background:					@theme_global-default-background;
@navbar-nav-hover-color:						@global-contrast-color;
@navbar-nav-onclick-background:					darken(@theme_global-default-background, 25%);
@navbar-nav-onclick-color:						@global-contrast-color;
@navbar-nav-active-background:					@theme_global-dark-background;
@navbar-nav-active-color:						@theme_global-default-background;

@navbar-brand-color:							@global-contrast-color;
@navbar-brand-hover-color:						fadeout(@navbar-brand-color, 20%);

/*
 * Subnav
 */

@subnav-margin:									15px;
@subnav-pill-hover-background:					@theme_global-default-background;
@subnav-pill-hover-color:						@global-contrast-color;
@subnav-pill-active-background:					@navbar-nav-active-background;

@subnav-line-border:							rgba(255,255,255,0);

/*
 * Breadcrumb
 */

@breadcrumb-divider:							"\f105";

/*
 * Pagination
 */

@pagination-background:							rgba(0,0,0,0);
@pagination-hover-background:					@global-primary-background;
@pagination-hover-color:						@global-contrast-color;
@pagination-active-background:					@theme_global-default-background;
@pagination-active-color:						@global-contrast-color;
@pagination-onclick-background:					darken(@global-primary-background, 10%);
@pagination-onclick-color:						@global-contrast-color;

@pagination-disabled-background:				@theme_global-disabled-background;

/*
 * Tab
 */

@tab-hover-border:								rgba(0,0,0,0);
@tab-hover-background:							fadeout(@theme_global-dark-background, 98%);

/*
 * List
 */

@list-striped-background:						@theme_global-light-background;

/*
 * Table
 */

@table-striped-background:						@theme_global-light-background;
@table-hover-background:						mix(@global-contrast-color, lighten(@theme_global-default-background, 20%), 45%);

/*
 * Form
 */

@form-background:								#fff;
@form-border:									#ededee;
@form-focus-border:								darken(@form-border, 10%);
@form-disabled-background:						fadeout(@global-contrast-color, 20%);

/*
 * Button
 */

@button-large-height:							@global-large-height;
@button-large-font-size:						round(@global-font-size * 1.2); // 18px
@button-large-padding-horizontal:				@global-large-height - 20px;

@button-background:								@theme_global-default-background;
@button-color:									@global-contrast-color;
@button-hover-background:						#3e4145;
@button-hover-color:							@global-contrast-color;
@button-active-background:						darken(@button-hover-background, 25%);
@button-active-color:							@global-contrast-color;
@button-disabled-background:					@theme_global-disabled-background;

@button-primary-background:						@global-primary-background;
@button-primary-hover-background:				#3e4145;
@button-primary-active-background:				darken(@button-primary-hover-background, 12%);

@button-success-background:						@global-success-background;
@button-success-hover-background:				darken(@global-success-background, 6%);
@button-success-active-background:				darken(@global-success-background, 12%);

@button-danger-background:						@global-danger-background;
@button-danger-hover-background:				darken(@global-danger-background, 6%);
@button-danger-active-background:				darken(@global-danger-background, 12%);

@button-disabled-color:							lighten(@global-muted-color, 5%);

/*
 * Icon
 */

@icon-button-width: 							50px;
@icon-button-height: 							@icon-button-width;
@icon-button-border-radius: 					50%;
@icon-button-background: 						@global-contrast-color;
@icon-button-font-size: 						@icon-button-width * 0.6;
@icon-button-color: 							@theme_global-default-background;

@icon-button-hover-background: 					@global-contrast-color;
@icon-button-hover-color: 						@theme_global-default-background;

@icon-button-active-background: 				@global-contrast-color;
@icon-button-active-color: 						@theme_global-default-background;

/*
 * Close
 */

@close-alt-background:							@theme_global-default-background;

/*
 * Thumbnail
 */

@thumbnail-padding:								0;

@thumbnail-border:								@theme_global-light-background;
@thumbnail-hover-border:						darken(@thumbnail-border, 40%);

/*
 * Overlay
 */

@overlay-area-background:						rgba(0,0,0,0.7);
@overlay-area-icon:								"\f061";
@overlay-area-icon-size:						30px;

/*
 * Progress
 */

@progress-background:							@theme_global-light-background;
@progress-bar-background:						@theme_global-default-background;

/*
 * Search
 */

@search-width:									@search-padding;
@search-height:									@navbar-nav-height;
@search-focus-width:							150px;
@search-border: 								rgba(0,0,0,0);

@search-color:									@global-color;
@search-placeholder-color:						transparent;

@search-icon-size: 								20px;
@search-icon-color:								@global-color;

@search-close-size: 							18px;
@search-close-color:							@global-color;

/*
 * Dropdown
 */

@dropdown-width:								250px;
@dropdown-margin-top:							0;

@dropdown-navbar-margin:						@theme_navbar-padding;
@dropdown-padding:								30px;

@dropdown-background:							@theme_global-dark-background;
@dropdown-color:								@global-color;
@dropdown-navbar-background:					@theme_global-dark-background;

@dropdown-search-background:					@theme_global-dark-background;
@dropdown-search-navbar-margin-top:				@theme_navbar-padding;

/*
 * Off-canvas
 */

@offcanvas-bar-background:						@theme_global-dark-background;
@offcanvas-search-background: 					@global-contrast-color;
@offcanvas-search-color:						@global-color;

/*
 * Utility
 */

@utility-margin-vertical:						30px;
@utility-heading-large-font-size:				round(@global-font-size * 3.2); // 48px
@utility-heading-large-line-height:				round(@utility-heading-large-font-size * 1.25); // 60px


/* Theme component variables
 ========================================================================== */

/*
 * Base
 */

@theme_pre-border:								darken(@theme_global-light-background, 5%);
@theme_base-heading-margin-bottom:				20px;

/*
 * Panel
 */

@theme_panel-box-primary-link-color:			darken(desaturate(@global-primary-background, 30%), 20%);
@theme_panel-box-primary-link-hover-color:		darken(desaturate(@global-primary-background, 40%), 30%);

@theme_panel-box-primary-button-background:		darken(@global-primary-background, 6%);
@theme_panel-box-primary-button-color:			@global-contrast-color;

@theme_panel-box-secondary-button-background:	darken(@theme_global-dark-background, 10%);

/*
 * Article
 */

@theme_article-divider-height:					@theme_global-divider-height;

@theme_article-lead-margin-top:					25px;
@theme_article-lead-margin-bottom:				@theme_article-lead-margin-top + 5px;

/*
 * Comment
 */

@theme_comment-header-padding:					10px;
@theme_comment-header-border: 					@global-border;
@theme_comment-header-background: 				@global-contrast-color;

@theme_comment-body-padding:					@theme_comment-header-padding;

/*
 * Nav
 */

@theme_nav-side-hover-background: 				@theme_global-default-background;
@theme_nav-side-hover-color: 					@global-contrast-color;
@theme_nav-side-open-background:				@nav-side-active-background;

@theme_nav-side-sub-link-color:					@global-color;
@theme_nav-side-sub-hover-color:				@global-link-color;
@theme_nav-side-divider-height:					@theme_global-divider-height;

@theme_nav-sub-link-padding-top:				5px;
@theme_nav-sub-link-padding-bottom:				@theme_nav-sub-link-padding-top;
@theme_nav-sub-icon:							"\f105";

@theme_nav-dropdown-active-background:			@theme_global-transparent-background;
@theme_nav-dropdown-active-color:				@global-contrast-color;
@theme_nav-dropdown-open-background:			@theme_global-transparent-background;
@theme_nav-dropdown-open-hover-background:		@theme_global-default-background;
@theme_nav-dropdown-divider-height:				@theme_global-divider-height;
@theme_nav-dropdown-sub-link-color:				@global-color;

@theme_nav-navbar-active-background:			@theme_global-transparent-background;
@theme_nav-navbar-active-color:					@global-contrast-color;
@theme_nav-navbar-open-background:				@theme_global-transparent-background;
@theme_nav-navbar-divider-height:				@theme_global-divider-height;
@theme_nav-navbar-sub-link-color:				@global-color;

@theme_nav-search-hover-background:				@theme_global-default-background;
@theme_nav-search-hover-color:					@global-contrast-color;
@theme_nav-search-active-background:			@theme_global-default-background;
@theme_nav-search-open-background:				@theme_global-transparent-background;

@theme_nav-offcanvas-open-background:			@theme_global-default-background;
@theme_nav-offcanvas-open-color:				@global-contrast-color;
@theme_nav-offcanvas-divider-border:			@global-border;
@theme_nav-offcanvas-divider-height:			@theme_global-divider-height;
@theme_nav-offcanvas-sub-link-color:			@global-color;
@theme_nav-offcanvas-nav-item-background: 		darken(@offcanvas-bar-background, 5%);
@theme_nav-offcanvas-item-border: 				@global-border;

/*
 * Navbar
 */

@theme_navbar-brand-padding-horizontal:			40px;
@theme_navbar-brand-background:					@theme_global-default-background;

@theme_navbar-padding:							35px;
@theme_navbar-nav-margin-left: 					5px;
@theme_navbar-nav-open-arrow-width: 			9px;
@theme_navbar-nav-open-arrow-height: 			9px;
@theme_navbar-nav-active-hover-background:		@theme_global-default-background;
@theme_navbar-nav-active-hover-color:			@global-contrast-color;

@theme_navbar-nav-background:					none;

/*
 * Subnav
 */

@theme_subnav-pill-border-radius: 				@theme_global-large-border-radius;

/*
 * Pagination
 */

@theme_pagination-item-min-width:				@pagination-line-height;

/*
 * Tab
 */

@theme_tab-dropdown-background:					@global-contrast-color;
@theme_tab-dropdown-margin-top:					10px;

/*
 * Form
 */

@theme_form-focus-box-shadow: 					@global-border;
@theme_form-large-padding-horizontal:			15px;
@theme_form-large-padding-vertical:				15px;

/*
 * Button
 */

@theme_button-border-radius:					@theme_global-large-border-radius;

/*
 * Icon Button
 */

@theme_icon-button-margin-left:					4px;

/*
 * Close
 */

@theme_close-alt-color: 						@global-contrast-color;
@theme_close-alt-hover-color: 					@global-contrast-color;

/*
 * Thumbnail
 */

@theme_thumbnail-border-width:					15px;

/*
 * Search
 */

@theme_search-font-size:						round(@global-font-size * 1.07); // 17px

/*
 * Dropdown
 */

@theme_dropdown-link-color:						@global-contrast-color;
@theme_dropdown-link-hover-color: 				@global-link-hover-color;
@theme_dropdown-link-active-color: 				darken(@global-link-hover-color, 10%);
@theme_dropdown-button-primary-hover-background: darken(@theme_global-dark-background, 10%);
