//
// Variables
// --------------------------------------------------


//== Colors
//
// Basic Colors

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#428bca, 6.5%);
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;



//== Colors
//

@color__background-body: #fff;
@color__background-screen: #f1f1f1;
@color__background-hr: #ccc;
@color__background-button: #e6e6e6;
@color__background-pre: #eee;
@color__background-ins: #fff9c0;

@color__text-screen: #21759b;
@color__text-input: #666;
@color__text-input-focus: #111;
@color__link: royalblue;
@color__link-visited: purple;
@color__link-hover: midnightblue;
@color__text-main: #656565;

@color__border-button: #ccc #ccc #bbb;
@color__border-button-hover: #ccc #bbb #aaa;
@color__border-button-focus: #aaa #bbb #bbb;
@color__border-input: #ccc;
@color__border-abbr: #666;

//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

@font__main: "Source Sans Pro", sans-serif;
@font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
@font__pre: "Courier 10 Pitch", Courier, monospace;
@font__line-height-body: 1.5;
@font__line-height-pre: 1.6;

@size__site-main: 100%;
@size__site-sidebar: 25%;


@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

@mq-desktop-lg:                           1200px; 	// @screen-lg-desktop; 
@mq-desktop:                              992px; 	// @screen-desktop;
@mq-tablet:                               768px;    // @screen-sm-min;
@mq-mobile:                               480px;    // @screen-phone;

@desktop-lg:                              ~"only screen and (min-width: @{mq-desktop-lg})";
@desktop:                                 ~"only screen and (min-width: @{mq-desktop})";
@tablet:                                  ~"only screen and (min-width: @{mq-tablet})";
@mobile:                                  ~"only screen and (min-width: @{mq-mobile})";


// Inverse version media queries (for use with max-width)
// Some components needs to be strictly defined only for mobile

@mq-up-to-desktop-lg:                           (@mq-desktop-lg - 1); // Usually 1199px
@mq-up-to-desktop:                              (@mq-desktop - 1);    // Usually 991px
@mq-up-to-tablet:                               (@mq-tablet - 1);     // Usually 767px
@mq-up-to-mobile:                               (@mq-mobile - 1);      // Usually 479px

@upto-desktop-lg:                              ~"only screen and (max-width: @{mq-up-to-desktop-lg})";
@upto-desktop:                                 ~"only screen and (max-width: @{mq-up-to-desktop})";
@upto-tablet:                                  ~"only screen and (max-width: @{mq-up-to-tablet})";
@upto-mobile:                                  ~"only screen and (max-width: @{mq-up-to-mobile})";

@landscape:                                    ~"(max-device-width: @{mq-tablet}) and (orientation:landscape)";


//
// Horizontal top navbar 
// based on the bootstrap navbar styles and markup
// ----------------------------------------------------

@nav-header-wd:                 @aside-wd;
@nav-header-wd-toggled:         @aside-wd-collapsed;

@nav-top-bg:                    #23b7e5;
@nav-top-bg-start:              @nav-top-bg;
@nav-top-bg-end:                lighten(@nav-top-bg, 10%);
@nav-header-bg:                 transparent;

@nav-top-item-mobile:           @nav-top-bg;
@nav-top-item-mobile-active:    darken(@nav-top-item-mobile, 20%);

@nav-top-item-desktop:          #fff;
@nav-top-item-desktop-active:   @nav-top-item-mobile-active;



@sidebar-bg:                      @aside-bg;

@sidebar-item-color:              #515253;
@sidebar-item-color-active:       @nav-top-bg;
@sidebar-item-bg-active:          darken(@sidebar-bg, 1%);

@sidebar-icon-color:              inherits;
@sidebar-icon-color-active:       @nav-top-bg;

@sidebar-bullet-color:            rgba(0,0,0,.25);
@sidebar-bullet-color-active:     @sidebar-icon-color-active;

@sidebar-heading-color:           #919DA8;
@sidebar-label-color:             @sidebar-item-color;

@submenu-header-hg:               40px;   // Submenu header when hover collapse sidebar
@sidebar-item-border-wd:          3px;
@scrollbar-wd:                    17px;



//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
@body-bg:               #fff;
//** Global text color on `<body>`.
@text-color:            @gray-dark;

//** Global textual link color.
@link-color:            @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color:      darken(@link-color, 15%);
//** Link hover decoration.
@link-hover-decoration: underline;



@aside-wd:                                220px;
@aside-wd-collapsed:                      70px;
@aside-bg:                                #fff;

@content-bg:                              @body-bg;
@content-heading-bg:                      #fafbfc;
@content-heading-border:                  #cfdbe2;
@content-padding:                         20px;

@footer-hg:                               60px;

@navbar-hg:                               55px; //@navbar-height;

@boxed-max-width:                         1140px;
@z-index-main-section:                    111;

//Navigation
@nav-bg: #2F4050;
@nav-text-color: #a7b1c2;

// Switch
@ui-bg-color: #ddd;
@ui-fg-color: @brand-primary;