//====================================================================
//	This is the file you should edit to make the flavor you want.
// 	Please read the instructions carefully.
//====================================================================
// 				!!	 IMPORTANT	!!
//	Please copy this file or rename it, if you want to keep the default
// 	flavor definitions file.
//====================================================================
//	Update the comment below to include it in your flavor, providing the information
//	you want along with your customized flavor. You can also delete it if you don't
// 	want it in your final CSS file.
/*
	Flavor name: Bootstrap (mini-bootstrap)
	Author: Angelos Chalaris (chalarangelo@gmail.com)
	mini.css version: v1.1 (October, 2016)
*/
//====================================================================
//
//		CORE COMPONENTS (located in `mini`):
//
//====================================================================
//	Variable definitions for the Base module (_base.scss)
//====================================================================
//	Pre-enable utilities (_utility.scss).
//	--- 	NOTES: 	---
//	The utility module is pre enabled in order for certain elements to
// 	use certain utility mixins.
//	-------------------
@import '../scss/mini/utility';
//	Basic rules for body
$body-margin:					0;												// Margin for body
$body-bg-color:					#fff;											// Body background color
$body-color:					#333;											// Body text color
//	Basic typography rules
$base-fonts:					"\"Helvetica Neue\", Helvetica, Arial, sans-serif";	// Font-family
$base-font-size:				14px;											// Font-size
$base-line-height:				1.42857143;										// Line-height
//	Rules for headers (multipliers apply on top of the basic typography rules)
//	--- 	NOTES: 	---
//	Headers are not followed by a bottom border.
//	<small> elements inside headers use the default small sizing.
//	-------------------
$h1-multiplier:					2.571428571428571;								// Header 1 font-sze multiplier
$h2-multiplier:					2.142857142857143;								// Header 2 font-sze multiplier
$h3-multiplier:					1.714285714285714;								// Header 3 font-sze multiplier
$h4-multiplier:					1.285714285714286;								// Header 4 font-sze multiplier
$h5-multiplier:					1;												// Header 5 font-sze multiplier
$h6-multiplier:					0.8571428571428571;								// Header 6 font-sze multiplier
$header-line-height-multiplier:	0.76999999923;									// Multiplier for line height of headers					 
$header-margin:					0;												// Margin for headers
$header-font-weight:			500;											// Font weight for headers
//	Rules for small elements inside headers
$header-small-color:			#777;											// Header small text color
$header-small-font-weight:		400;											// Header small font weight
//	Rules for horizontal rules
$hr-line-height-multiplier:		0.8;											// Multiplier for line height of horizontal rule
$hr-margin:						0.7em 0;										// Margin for horizontal rule
$hr-border-style:				1px solid darken($body-bg-color, 15%);			// Color and style of horizontal rule
//	Common content typography rules (paragraphs, lists etc.)
//	--- 	NOTES: 	---
//	To counteract the styling of <small> elements inside headers,
//	$small-font-size is 80% instead of 85% (75% for headers).
//	-------------------
$p-margin:						0 0 10px;										// Margin for paragraph and pre elements
$small-font-size:				80%;											// Font size for small, sub and sup elements
$sub-bottom:					-0.25em;										// Sub bottom
$sup-top:						-0.5em;											// Sup top
$list-margin-top:				0;												// Top margin for lists
$list-margin-bottom:			10px;											// Bottom margin for lists
$mark-bg-color:					#fcf8e3;										// Mark background color
$mark-color:					$body-color;									// Mark text color
//	Code, preformatted and keyboard rules
//	--- 	NOTES: 	---
//	<pre> elements use the same style as <code> elements and do not
//  have their own unique padding specified.
// 	<pre> elements use generic border styling to style their border
//	instead of a specific border color. (*)
//	Code elements use the default color used in the document's body,
//	instead of #c7254e.
// 	(*): The generic border mixin from utilites could not be used,
//	because it is built to apply to a class of elements, not a type.
//	-------------------
$code-fonts:					"Menlo, Monaco, Consolas, \"Courier New\", monospace";	// Font-family for code, pre, kbd, samp elements
$code-padding:					2px 4px;										// Padding for code and pre elements
$code-bg-color:					#f9f2f4;										// Code and pre background color	
$code-border-radius:			4px;											// Border radius for code, pre and kbd elements
$kbd-bg-color:					$body-color; 									// Kbd background color
$kbd-color:						$body-bg-color;									// Kbd text color
pre 							{ border: 1px solid rgba(0,0,0, 0.25); }		// Use generic styling to style border for pre elements						
//	Hyperlink rules
//	--- 	NOTES: 	---
//	<a> elements have no underline style applied to them when hovered
//	over or otherwise selected or focused.
//	-------------------
$a-color:						#337ab7;										// Hyperlink text color
$a-hover-color:					#23527c;										// Hyperlink hover text color
$a-visited-color:				#337ab7;										// Hyperlink visited text color
$a-visited-hover-color:			#23527c;										// Hyperlink visited hover text color
//	Button, input and form rules
$button-fonts:					$base-fonts;									// Font-family for buttons and inputs
$button-font-size:				100%;											// Font size for buttons and inputs
$button-line-height-multiplier:	0.8;											// Multiplier for line height of buttons and inputs
$button-margin:					0;												// Margin for buttons and inputs
$fieldset-border:				0;												// Border style for fieldset
$fieldset-border-radius:		0;												// Border radius for fieldset
$fieldset-margin:				0;												// Margin for fieldset
$fieldset-padding:				0;												// Padding for fieldset
//	Enable base (_base.scss) and use the variables defined above.
@import '../scss/mini/base';
//====================================================================
//	Variable definitions for the Button module (_button.scss)
//====================================================================
// 	Colors and styles (you can remove things you don't need or define more
//	colors if you need them).
//	--- 	NOTES: 	---
//	Button styles use approximations for some colors (mainly hover colors).
//	Button border is built using utility module's generic mixin.
//	Buttons differ from Bootstrap's in terms of line height.
//	Button size variant font sizes are approximate.
//	`btn-link` is not supported.
//	-------------------
$btn-default-color:							$body-color;						// Default text color for buttons
$btn-alt-color:								$body-bg-color;						// Alternative text color for buttons
$btn-default-bg-color:						$body-bg-color;						// Default background color for buttons
$btn-p-bg-color:							#337ab7;							// Color for button style 1
$btn-s-bg-color:							#5cb85c;							// Color for button style 2
$btn-i-bg-color:							#5bc0de;							// Color for button style 3
$btn-w-bg-color:							#f0ad4e;							// Color for button style 4
$btn-d-bg-color:							#d9534f;							// Color for button style 5
//	Button class names (you can remove things you don't need or define more
//	classes if you need them).
$btn-class-name:							btn;								// Name for the base button class
$btn-style1-name:							btn-primary;						// Name for button style 1 class
$btn-style2-name:							btn-success;						// Name for button style 2 class
$btn-style3-name:							btn-info;							// Name for button style 3 class
$btn-style4-name:							btn-warning;						// Name for button style 4 class
$btn-style5-name:							btn-danger;							// Name for button style 5 class
$btn-size1-name:							btn-lg;								// Name for the button size 1 class
$btn-size2-name:							btn-sm;								// Name for the button size 2 class
$btn-size3-name:							btn-xs;								// Name for the button size 3 class
//	Enable buttons (_button.scss). (Use individual mixins below to use.)
@import '../scss/mini/button';
// Use button mixins to create buttons with given specs. For more information
// refer to the _button.scss file to check the definitions.
@include make-btn($btn-class-name, 0, 4px, 5px 0, 6px 12px, $btn-default-color, $btn-default-bg-color, darken, 7.5%, pointer, not-allowed, .65);
@include make-btn-style($btn-class-name, $btn-style1-name, $btn-alt-color, $btn-p-bg-color, darken);
@include make-btn-style($btn-class-name, $btn-style2-name, $btn-alt-color, $btn-s-bg-color, darken);
@include make-btn-style($btn-class-name, $btn-style3-name, $btn-alt-color, $btn-i-bg-color, darken);
@include make-btn-style($btn-class-name, $btn-style4-name, $btn-alt-color, $btn-w-bg-color, darken);
@include make-btn-style($btn-class-name, $btn-style5-name, $btn-alt-color, $btn-d-bg-color, darken);
@include make-btn-size($btn-class-name, $btn-size1-name, 10px 16px, 128.6%);
@include make-btn-size($btn-class-name, $btn-size2-name, 5px 10px, 85.7%);
@include make-btn-size($btn-class-name, $btn-size3-name, 1px 5px, 85.7%);
@include make-border-generic($btn-class-name);
//====================================================================
//	Variable definitions for the Grid module (_grid.scss)
//====================================================================
//	Class names for the grid system
//	--- 	NOTES: 	---
//	Only .container-fluid is supported currently.
//	Column naming follows standard mini.css naming conventions
//	instead of Bootstrap conventions.
//	(example: `col md-1` instead of `col-md-1`)
//	Offsets are still built using the hidden column class, which is
//	suffixed with `-hidden` for convenience's sake.
//	-------------------
$grid-container-name:						container-fluid;					// Name for the grid container class
$grid-row-name:								row;								// Name for the grid's row class
$grid-column-name:							col;								// Name for the grid's column class
$grid-extra-small-device-name:				xs;									// Name for extra small devices
$grid-small-device-name:					sm;									// Name for small devices
$grid-medium-device-name:					md;									// Name for medium devices
$grid-large-device-name:					lg;									// Name for large devices
$grid-no-show-name:							hidden;								// Name for hidden grid elements class
//	Grid breakpoints for different screens
$grid-small-breakpoint:						768px;								// Breakpoint for extra small to small devices
$grid-medium-breakpoint:					992px;								// Breakpoint for small to medium devices
$grid-large-breakpoint:						1200px;								// Breakpoint for medium to large devices
//	Enable grid(s) (_grid.scss). (Use individual mixins below to use.)
@import '../scss/mini/grid';
// Use grid mixin to create grid with given specs. For more information
// refer to the grid.scss file to check the definitions.
@include make-grid($grid-container-name, 15px, $grid-row-name, $grid-column-name, 12, 15px, $grid-extra-small-device-name, $grid-small-device-name, $grid-medium-device-name, $grid-large-device-name, $grid-no-show-name, $grid-small-breakpoint, $grid-medium-breakpoint, $grid-large-breakpoint);
//====================================================================
//	Variable definitions for the Form module (_form.scss)
//====================================================================
//	Class names for the forms and components
//	--- 	NOTES: 	---
//	Basic styling is applied to forms using the .form class. The usual
//	mini.css syntax should be used instead of the Bootstrap syntax.
//	.form-group is not supported inside .form-inline.
//	.form-control-static, .has-error, .has-warning, .has-success are not
//	supported.
//	No class is provided for .control-label and subsequently no styling.
//	Focus and invalid borders are styled approximately.
//	The width of the left column (label) of horizontal forms is preset to
//	20%.
//	Some other functionalities are not supported as they are considered
//	unimportant for the time being.
//	No form element size variants are supported yet.
//	-------------------
$form-class-name:							form;								// Name for the form class
$form-control-group-name:					form-group;							// Name for the form's control group class
//	Colors for form components
$form-focus-color:							#66afe9;							// Color for focused form element outline
$form-invalid-color:						#a94442;							// Color for invalid form element outline
//	Enable forms (_form.scss). (Use individual mixins below to use.)
@import '../scss/mini/form';
// Use form mixin to create form with given specs. For more information
// refer to the _form.scss file to check the definitions.
@include make-frm($form-class-name, 1px solid #ccc, 4px, 0, 6px 12px, $form-focus-color, $form-invalid-color, not-allowed, .65, darken($body-bg-color,10%), darken($body-bg-color,25%), 34px, 0 0 5px 0, $form-control-group-name,  0 0 15px 0, form-inline, form-horizontal, 20%);
//====================================================================
//	Variable definitions for the Table module (_table.scss)
//====================================================================
//	Class names for the tables
//	--- 	NOTES: 	---
//	The .table class applies the default styling of mini.css (vertical
//	borders). To get the default styling of Bootstrap, use .table-horizontal
//	along with .table. 
//	All customized tables are striped by default.
//	Hover rows styling is not supported.
//	Condensed tables are not supported.
//	Contextual classes on tables are not supported (untested).
//	Responsive tables are not supported. (Will be added as default in 
//	later versions)
//	-------------------
$table-class-name:							table;								// Name for the table class
$table-horizontal-name:						table-horizontal;					// Name for the horizontal style tables
$table-bordered-name:						table-bordered;						// Name for the bordered style tables
//	Colors for the tables
$table-head-bg-color:						$body-bg-color;						// Table header background color
$table-head-color:							$body-color;						// Table header text color
$table-body-bg-color:						$body-bg-color;						// Table body bakground color
$table-body-alt-bg-color:					#f9f9f9;							// Table body alternative background color
$table-body-color:							$body-color;						// Table body text color
//	Enable tables (_table.scss). (Use individual mixins below to use.)
@import '../scss/mini/table';
// Use table mixin to create table with given specs. For more information
// refer to the _table.scss file to check the definitions.
@include make-tbl($table-class-name, 1px solid #ddd, 0, 8px, $table-head-bg-color, $table-head-color, $table-body-bg-color,$table-body-alt-bg-color, $table-body-color, $table-horizontal-name, $table-bordered-name);
//====================================================================
//	Variable definitions for the Navigation module (_nav.scss)
//====================================================================
//	Class names for the navigation elements
//	--- 	NOTES: 	---
//	The structure of the navigation bar is based on mini.css structure
//	conventions. However naming is applied based on the naming conventions
//	of Bootstrap.
//	Some colors are based on approximation.
//	Border color and border radius are built using generic utility mixins.
//	-------------------
$navigation-class-name:						navbar;								// Name for the navigation bar class
$navigation-vertical-name:					navbar-vertical;					// Name for the vertical navigation class
$navigation-fixed-name:						navbar-fixed;						// Name for the fixed navigation class
$navigation-logo-name:						navbar-brand;						// Name for the navigation logo class
$navigation-link-name:						navbar-nav;							// Name for the navigation link class
// 	Colors and breakpoint for the navigation
$navigation-bg-color:						#f8f8f8;							// Background color for the navigation bar
$navigation-color:							$body-color;						// Color for the navigation text
$navigation-fixed-collapse-breakpoint:		768px;								// Breakpoint for fixed naviation collapse
//	Enable navigation (_nav.scss). (Use individual mixins below to use.)
@import '../scss/mini/nav';
// Use nav mixin to create nav with default specs. For more information
// refer to the _nav.scss file to check the definitions.
@include make-nav($navigation-class-name, $navigation-vertical-name, $navigation-fixed-name, $navigation-logo-name, 128.6%, $navigation-link-name, 15px, $navigation-color, $navigation-bg-color, darken, 7.5%, not-allowed, .65, left, 12, 2, $navigation-fixed-collapse-breakpoint, top-right, 10px, 1.75em);
@include make-border-generic($navigation-class-name);
@include make-border-radial-style($navigation-class-name, 4px);
//====================================================================
//	Variable definitions for the Utilities and Helper Classes module (_utility.scss)
//====================================================================
//	Class names for the utility and helper classes (you can remove things you 
//	don't need or define more if you need them).
//	--- 	NOTES: 	---
//	Utilities are enabled at the start of the file.
//	Close icon colors are approximate.
//	Generic borders are included (although not part of Bootstrap originally).
//	No .show class is provided.
//	Contextual background styles do not have extra padding.
//	-------------------
$thumbnail-class-name:						thumbnail;							// Name for the thumbnail class
$bordered-class-name:						bordered;							// Name for the bordered class
$bordered-radial-name:						rounded;							// Name for the rounded border class	
$bordered-radial2-name:						circle;								// Name for the alternative rounded border class
$colored-text1-name:						text-primary;						// Name for the colored text style 1 class
$colored-text2-name:						text-success;						// Name for the colored text style 2 class
$colored-text3-name:						text-info;							// Name for the colored text style 3 class
$colored-text4-name:						text-warning;						// Name for the colored text style 4 class
$colored-text5-name:						text-danger;						// Name for the colored text style 5 class
$colored-text6-name:						text-muted;							// Name for the colored text style 6 class
$colored-bg-text1-name:						bg-primary;							// Name for the colored background text style 1 class
$colored-bg-text2-name:						bg-success;							// Name for the colored background text style 2 class
$colored-bg-text3-name:						bg-info;							// Name for the colored background text style 3 class
$colored-bg-text4-name:						bg-warning;							// Name for the colored background text style 4 class
$colored-bg-text5-name:						bg-danger;							// Name for the colored background text style 5 class
$drag-left-name:							pull-left;							// Name for the drag-left class
$drag-right-name:							pull-right;							// Name for the drag-right class
$center-block-name:							center-block;						// Name for the center block class
$caret-class-name:							caret;								// Name for the caret class
$close-class-name:							close;								// Name for the close class
$clearfix-class-name:						clearfix;							// Name for the clearfix class
$hidden-class-name:							hidden;								// Name for the hidden class
//	Colors for the utility and helper classes (you can remove things you
//	don't need or define more colors if you need them).
$thumbnail-hover-color:						$a-color;							// Border color of the thumbnail when hovering over it
$bordered-radial-radius:					4px;								// Border radius of rounded borders
$bordered-radial2-radius:					50%;								// Border radius of the alternative rounded borders
$colored-text1-color:						$btn-p-bg-color;					// Text color for the colored text style 1 class
$colored-text2-color:						$btn-s-bg-color;					// Text color for the colored text style 2 class
$colored-text3-color:						$btn-i-bg-color;					// Text color for the colored text style 3 class
$colored-text4-color:						$btn-w-bg-color;					// Text color for the colored text style 4 class
$colored-text5-color:						$btn-d-bg-color;					// Text color for the colored text style 5 class
$colored-text6-color:						#777;								// Text color for the colored text style 6 class
$colored-bg-text1-bg-color:					$btn-p-bg-color;					// Background color for the colored text style 1 class
$colored-bg-text2-bg-color:					$btn-s-bg-color;					// Background color for the colored text style 2 class
$colored-bg-text3-bg-color:					$btn-i-bg-color;					// Background color for the colored text style 3 class
$colored-bg-text4-bg-color:					$btn-w-bg-color;					// Background color for the colored text style 4 class
$colored-bg-text5-bg-color:					$btn-d-bg-color;					// Background color for the colored text style 5 class
// Use utility mixins to create utility classes with given specs. For more information
// refer to the _utility.scss file to check the definitions.
@include make-thumb($thumbnail-class-name, 4px, 1px solid #ddd, 4px, $thumbnail-hover-color);
@include make-border-generic($bordered-class-name);
@include make-border-radial-style($bordered-radial-name, $bordered-radial-radius);
@include make-border-radial-style($bordered-radial2-name, $bordered-radial2-radius);
@include make-colored-text($colored-text1-name, $colored-text1-color);
@include make-colored-text($colored-text2-name, $colored-text2-color);
@include make-colored-text($colored-text3-name, $colored-text3-color);
@include make-colored-text($colored-text4-name, $colored-text4-color);
@include make-colored-text($colored-text5-name, $colored-text5-color);
@include make-colored-text($colored-text6-name, $colored-text6-color);
@include make-colored-bg-text($colored-bg-text1-name, $colored-bg-text1-bg-color);
@include make-colored-bg-text($colored-bg-text2-name, $colored-bg-text2-bg-color);
@include make-colored-bg-text($colored-bg-text3-name, $colored-bg-text3-bg-color);
@include make-colored-bg-text($colored-bg-text4-name, $colored-bg-text4-bg-color);
@include make-colored-bg-text($colored-bg-text5-name, $colored-bg-text5-bg-color);
@include make-caret-down($caret-class-name, 4px, $body-color);
@include make-close($close-class-name, #aaa, pointer, 21px, 700, #777);
@include make-drags($drag-left-name, $drag-right-name);
@include make-center-block($center-block-name);
@include make-clearfix($clearfix-class-name);
@include make-hidden($hidden-class-name);
//====================================================================
//
//		EXTRA COMPONENTS (located in `mini-extra`):
//
//====================================================================
//	Variable definitions for the Label module (_label.scss)
//====================================================================
// 	Colors and styles (you can remove things you don't need or define more
//	colors if you need them).
//	--- 	NOTES: 	---
//	Label and badge default classes are applied automatically, no contextual
//	class is needed. Neither .label-default nor .badge-default are supported.
//	Badge styling is not based on context, they are cotrolled based on the
//	classes the user specifies.
//	Labels and badges are sized approximately.
//	-------------------
$lbl-default-color:							$btn-alt-color;						// Default text color for labels/badges
$lbl-default-bg-color:						#777;								// Default background color for labels/badges
$lbl-style1-bg-color:						$btn-p-bg-color;					// Color for labels/badges style 1
$lbl-style2-bg-color:						$btn-s-bg-color;					// Color for labels/badges style 2
$lbl-style3-bg-color:						$btn-i-bg-color;					// Color for labels/badges style 3
$lbl-style4-bg-color:						$btn-w-bg-color;					// Color for labels/badges style 5
$lbl-style5-bg-color:						$btn-d-bg-color;					// Color for labels/badges style 6
//	Label class names (you can remove things you don't need or define more
//	classes if you need them).
$lbl-class-name:							label;								// Name for the base labels class
$lbl-style1-name:							label-primary;						// Name for labels style 1 class
$lbl-style2-name:							label-success;						// Name for labels style 2 class
$lbl-style3-name:							label-info;							// Name for labels style 3 class
$lbl-style4-name:							label-warning;						// Name for labels style 4 class
$lbl-style5-name:							label-danger;						// Name for labels style 5 class
$badge-class-name:							badge;								// Name for the base badges class
$badge-style1-name:							badge-primary;						// Name for badges style 1 class
$badge-style2-name:							badge-success;						// Name for badges style 2 class
$badge-style3-name:							badge-info;							// Name for badges style 3 class
$badge-style4-name:							badge-warning;						// Name for badges style 4 class
$badge-style5-name:							badge-danger;						// Name for badges style 5 class
//	Enable labels (_label.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/label';
// Use label mixins to create labels with given specs. For more information
// refer to the _label.scss file to check the definitions.
@include make-lbl($lbl-class-name, $lbl-default-bg-color, $lbl-default-color, .25em, .2em .6em .3em, hide);
@include make-lbl-style($lbl-class-name, $lbl-style1-name, $lbl-default-color, $lbl-style1-bg-color);
@include make-lbl-style($lbl-class-name, $lbl-style2-name, $lbl-default-color, $lbl-style2-bg-color);
@include make-lbl-style($lbl-class-name, $lbl-style3-name, $lbl-default-color, $lbl-style3-bg-color);
@include make-lbl-style($lbl-class-name, $lbl-style4-name, $lbl-default-color, $lbl-style4-bg-color);
@include make-lbl-style($lbl-class-name, $lbl-style5-name, $lbl-default-color, $lbl-style5-bg-color);
@include make-lbl($badge-class-name, $lbl-default-bg-color, $lbl-default-color, 10px, 3px 7px, hide);
@include make-lbl-style($badge-class-name, $badge-style1-name, $lbl-default-color, $lbl-style1-bg-color);
@include make-lbl-style($badge-class-name, $badge-style2-name, $lbl-default-color, $lbl-style2-bg-color);
@include make-lbl-style($badge-class-name, $badge-style3-name, $lbl-default-color, $lbl-style3-bg-color);
@include make-lbl-style($badge-class-name, $badge-style4-name, $lbl-default-color, $lbl-style4-bg-color);
@include make-lbl-style($badge-class-name, $badge-style5-name, $lbl-default-color, $lbl-style5-bg-color);
//====================================================================
//	Variable definitions for the Tab module (_tab.scss)
//====================================================================
//	Tab class names.
//	--- 	NOTES: 	---
//	Bootstrap naming conventions are used, but the structure follows the
//	component structure of mini.css.
//	Some extra styles are applied at the end of the module definition. This
//	is due to the way that Bootstrap's tabs are styled.
//	No events and methods are supported as of yet.
//	-------------------
$tabs-class-name:							nav-tabs;							// Name for the tab system container class
// 	Colors and styles (you can remove things you don't need or define more
//	colors if you need them).
$tabs-border-color:							#ddd;								// Border color for the tabs system
$tabs-content-bg-color:						#fff;								// Background for the active tab's content
$tabs-color:								$a-color;							// Color for the text in the tab labels
$tabs-bg-color:								$body-bg-color;						// Background color for the tab labels
$tabs-active-color:							$body-color;						// Color for the text in the active tab's label
$tabs-active-bg-color:						$tabs-content-bg-color;				// Background color for the active tab's label
$tabs-active-stripe-style:					1px solid #ddd;						// Style for the active tab label's stripe
//	Enable tabs (_tab.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/tab';
// Use tabs mixin to create tab system with given specs. For more information
// refer to the _tab.scss file to check the definitions.
@include make-tabs($tabs-class-name, 250px, 3px, 20px, 10px 18px, $tabs-color, $tabs-bg-color, $tabs-active-color, $tabs-active-bg-color, $tabs-border-color, 4px 4px 0 0, $tabs-active-stripe-style, 'darken', 10%, $tabs-content-bg-color, 20px);
.#{$tabs-class-name} input[type="radio"] + div > label + div { top: 40px; }
.#{$tabs-class-name} input[type="radio"] + div > label { border:0; }
.#{$tabs-class-name} input[type="radio"]:checked + div > label { border: $tabs-active-stripe-style; border-bottom: 0; }
//====================================================================
//	Variable definitions for the Modal module (_modal.scss)
//====================================================================
//	Modal class names.
//	--- 	NOTES: 	---
//	The modal dialog is all contained in the .modal class.
//	Background color of the overlay is not the exact same as Bootstrap.
//	Some colors and styles are approximations.
//	No alternative sizes, methods or events are supported as of yet.
//	-------------------
$modal-class-name:							modal;								// Name for the modal class
// 	Colors and styles (you can remove things you don't need or define more
//	colors if you need them).
$modal-bg-color:							$body-bg-color;						// Background color for the modal
$modal-color:								$body-color;						// Color for the text in the modal
$modal-border:								1px solid #999;						// Border style for the modal
//	Enable modal (_modal.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/modal';
// Use modal mixin to create modal with given specs. For more information
// refer to the _modal.scss file to check the definitions.
@include make-modal($modal-class-name, $modal-color, $modal-bg-color, 'enabled', 'enabled', $modal-border, 6px, 18px, 30px, 600px);
@include make-modal-close-support($modal-class-name, $close-class-name, 20px);
//====================================================================
//	Variable definitions for the Dropdown module (_dropdown.scss)
//====================================================================
//	Dropdown class names.
//	--- 	NOTES: 	---
//	Dropdown styling uses the default styling of mini.css as the equivalent
//	Bootstrap component is very different.
//	-------------------
$dropdown-class-name:						dropdown;							// Name for the dropdown class
//	Enable dropdown (_dropdown.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/dropdown';
// Use dropdown mixin to create dropdown with given specs. For more information
// refer to the _dropdown.scss file to check the definitions.
@include make-dropdown($navigation-class-name, $navigation-link-name,$dropdown-class-name, 20px, 80%);
//====================================================================
//	Variable definitions for the Collapse module (_collapse.scss)
//====================================================================
//	Collapse and accordion class names.
//	--- 	NOTES: 	---
//	Sizes and colors are approximate. The colors and style of the collapsed 
//	(hidden) content are based on the Bootstrap example that uses the well.
//	Classes for collapse and accordion components are .collapse and
//	.accordion respectively.
//	-------------------
$collapse-class-name:						collapse;							// Name for the collapse class
$accordion-class-name:						accordion;							// Name for the accordion class
// 	Collapse colors and styles (you can remove things you don't need or 
//	define more colors if you need them).
$collapse-border:							1px solid #e3e3e3;					// Border style for the collapse
$collapse-color:							$body-color;						// Color for the text in the collapse
$collapse-bg-color:							#f5f5f5;							// Background color for the collapse
// 	Accordion colors and styles (you can remove things you don't need or 
//	define more colors if you need them).
$accordion-border:							$collapse-border;					// Border style for the accordion
$accordion-color:							$collapse-color;					// Color for the text in the accordion
$accordion-bg-color:						$body-bg-color;						// Background color for the accordion
$accordion-label-color:						$collapse-color;					// Color for the text in the accordion's label
$accordion-label-bg-color:					$collapse-bg-color;					// Background color for the accordion's label
//	Enable collapse (_collapse.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/collapse';
// Use collapse and accordion mixins to create components wit the given specs.
// For more information refer to the _collapse.scss file to check the definitions.
@include make-collapse($collapse-class-name, $collapse-border, 4px, 19px, 6px, $collapse-color, $collapse-bg-color);
@include make-accordion($accordion-class-name, $accordion-border, 4px, 19px, 6px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);
//====================================================================
//	Variable definitions for the Progress module (_progress.scss)
//====================================================================
//	Progress and progress variants class names.
//	--- 	NOTES: 	---
//	Naming conventions are based on the Bootstrap names, syntax is based
//	on the default mini.css syntax.
//	Colors and borders might look different due to some approximations.
//	-------------------
$progress-class-name:						progress-bar;						// Name for the progress class
$progress-bar-style1-name:					progress-bar-success;				// Name for the progress bar style 1 class
$progress-bar-style2-name:					progress-bar-info;					// Name for the progress bar style 2 class
$progress-bar-style3-name:					progress-bar-warning;				// Name for the progress bar style 3 class
$progress-bar-style4-name:					progress-bar-danger;				// Name for the progress bar style 4 class
// Progress and progress variants colors (you can remove things you 
//	don't need or define more colors if you need them).
$progress-bg-color:							#d7d7d7;							// Background color for the progress bar container
$progress-bar-color:						$btn-alt-color;						// Color for the text of the progress bar
$progress-bar-style1-color:					$btn-alt-color;						// Color for the text of the style 1 progress bar
$progress-bar-style2-color:					$btn-alt-color;						// Color for the text of the style 2 progress bar
$progress-bar-style3-color:					$btn-alt-color;						// Color for the text of the style 3 progress bar
$progress-bar-style4-color:					$btn-alt-color;						// Color for the text of the style 4 progress bar
$progress-bar-bg-color:						$btn-p-bg-color;					// Background color for the progress bar
$progress-bar-style1-bg-color:				$btn-s-bg-color;					// Background color for the style 1 progress bar
$progress-bar-style2-bg-color:				$btn-i-bg-color;					// Background color for the style 2 progress bar
$progress-bar-style3-bg-color:				$btn-w-bg-color;					// Background color for the style 3 progress bar
$progress-bar-style4-bg-color:				$btn-d-bg-color;					// Background color for the style 4 progress bar
//	Enable progress (_progress.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/progress';
// Use progress mixins to create progress bars with given specs. For more 
// information refer to the _progress.scss file to check the definitions.
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 12px, $progress-bar-color, $progress-bar-bg-color);
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
@include make-progress-bar-variant($progress-class-name, $progress-bar-style3-name, $progress-bar-style3-color, $progress-bar-style3-bg-color);
@include make-progress-bar-variant($progress-class-name, $progress-bar-style4-name, $progress-bar-style4-color, $progress-bar-style4-bg-color);
//====================================================================
//	Variable definitions for the Spinner module (spinner.scss)
//====================================================================
//	Spinner class names.
//	--- 	NOTES: 	---
//	Spinner styles are in line with Bootstrap's style as Bootstrap does
//	not feature a similar component.
//	-------------------
$spinner-dotted-name:						spinner-dots;						// Name for the dotted spinner class
$spinner-round-name:						spinner-round;						// Name for the round spinner class
// Spinner colors.
$spinner-round-doughnout:					6px solid rgba(51,51,51, 0.25);		// Style for the round spinner doughnut
$spinner-round-spin:						6px solid $btn-p-bg-color;			// Style for the round spinner spinning part
//	Enable progress (spinner.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/spinner';
// Use spinner mixins to create spinners with given specs. For more 
// information refer to the spinner.scss file to check the definitions.
@include make-spinner-dots($spinner-dotted-name, 20px, 1.5s);
@include make-spinner-round($spinner-round-name, 20px, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
//====================================================================
//	Variable definitions for the Carousel module (_carousel.scss)
//====================================================================
//	Carousel class names.
//	--- 	NOTES: 	---
//	Carousel styling is very similar to the mini.css default carousel,
//	although control styles are based on the Bootstrap styling.
//	Naming and structure conventions are based on mini.css.
//	-------------------
$carousel-class-name:						carousel;						// Name for the carousel class
// Carousel colors and styles.
$carousel-border:							1px solid #ddd;					// Border style for the carousel
$carousel-content-bg-color:					#e7e7e7;						// Background color for the carousel
$carousel-description-color:				$body-bg-color;					// Color for the text in the carousel's description
$carousel-description-bg-color:				$body-color;					// Background color for the carousel's description
$carousel-control-color:					#fff;							// Color for the carousel's control elements
//	Enable carousel (_carousel.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/carousel';
// Use carousel mixin to create carousel with given specs. For more 
// information refer to the _carousel.scss file to check the definitions.
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 360px, 160px, 450px, 1.8em, $carousel-control-color);
//====================================================================
//	Variable definitions for the Utility module (_utility.scss)
//====================================================================
//	Utility class names.
//	--- 	NOTES: 	---
//	Some component styles (like wells) are based on approximation.
//	Alert styles omit the .alert class and just use their style class.
//	Panel styling is based on approximation.
//	Panels are based on the mini.css default structure.
//	Popovers use the default mini.css styling.
//	Tooltips, jumbotron and some other components from Bootstrap are not
//	supported. 
//	Experimental and unstable components are not included.
//	-------------------
$breadcrumbs-class-name:					breadcrumb;						// Name for the breadcrumbs class
$well-class-name:							well;							// Name for the well class
$alert-style1-class:						alert-success;					// Name for the style 1 alert
$alert-style2-class:						alert-info;						// Name for the style 2 alert
$alert-style3-class:						alert-warning;					// Name for the style 3 alert
$alert-style4-class:						alert-danger;					// Name for the style 4 alert
$panel-class-name:							panel;							// Name for the panel class
$panel-header-name:							head;							// Name for the panel's header class
$button-states-class-name:					stateful;						// Name for the stateful button class
$button-group-class-name:					btn-grp;						// Name for the button group class
$popover-above-name:						popover-top;					// Name for the popover above class
$popover-below-name:						popover-bottom;					// Name for the popover below class
// 	Utility color variables and styles (you can remove things you 
//	don't need or define more colors if you need them).
$well-color:								$body-color;					// Text color for the well
$well-bg-color:								#f5f5f5;						// Background color for the well
$panel-color:								$body-color;					// Text color for the panel
$panel-bg-color:							$body-bg-color;					// Background color for the panel
$panel-header-color:						$body-color;					// Text color for the panel's header
$panel-header-bg-color:						#e7e7e7;						// Background color for the panel's header
$popover-color:								$body-bg-color;					// Text color for the popover
$popover-bg-color:							$body-color;					// Background color for the popover
//	Enable utilities (_utility.scss). (Use individual mixins below to use.)
@import '../scss/mini-extra/utility';
// Use utilities mixins to create utilities with given specs. For more 
// information refer to the _utility.scss file to check the definitions.
@include make-breadcrumbs($breadcrumbs-class-name, 1);
@include make-generic-container($well-class-name, $well-color, $well-bg-color, 1px solid #e3e3e3, 4px, 19px);
@include make-alert($alert-style1-class, darken($btn-s-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-s-bg-color, 10%), 4px, 15px, close);
@include make-alert($alert-style2-class, darken($btn-i-bg-color,20%), lighten($btn-s-bg-color, 10%) , 1px solid darken($btn-i-bg-color, 10%), 4px, 15px, close);
@include make-alert($alert-style3-class, darken($btn-w-bg-color,20%), lighten($btn-w-bg-color, 10%) , 1px solid darken($btn-w-bg-color, 10%), 4px, 15px, close);
@include make-alert($alert-style4-class, darken($btn-d-bg-color,20%), lighten($btn-d-bg-color, 10%) , 1px solid darken($btn-d-bg-color, 10%), 4px, 15px, close);
@include make-panel(panel, $panel-color, $panel-bg-color, 1px solid #ddd, 4px, 15px, $panel-header-name, $panel-header-color, $panel-header-bg-color, 15px);
@include make-popover($popover-above-name, top, 5px, 45px, $popover-color, $popover-bg-color, 7px 10px);
@include make-popover($popover-below-name, bottom, 4px, 45px, $popover-color, $popover-bg-color, 7px 10px);
// Use experimental utilities mixins to create utilities with given
// specs. Please exercise caution when using these mixins.
// @include make-button-states($button-states-class-name);	// This mixin is unstable and buggy, we suggest you disable it.
// The folowing mixin is considered stable, you can disable it if you need to.
// @include make-btn-group($button-group-class-name, $btn-class-name, 1px solid #ccc, 4px); 
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style1-name, 1px solid darken($btn-p-bg-color, 10%), 4px); 
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style2-name, 1px solid darken($btn-s-bg-color, 10%), 4px); 
// @include make-btn-group(btn-grp, $btn-class-name+'.'+$btn-style3-name, 1px solid 1px solid darken($btn-i-bg-color, 10%), 4px); 
//====================================================================
//====================================================================