/*
Variables for custom bootstrap generation:
http://getbootstrap.com/customize/?id=51f79e9d8e113ce08c42

------
@font-size: 12px;
@padding-base-vertical: 5px
@padding-base-horizontal 12px
@padding-large-vertical: 6px
@padding-large-horizontal: 16px
@padding-small-vertical: 3px
@padding-small-horizontal: 10px
@padding-xs-vertical: 1px
@padding-xs-horizontal: 5px

@font-size=h1: floor((@font-size-base * 1.9))
@font-size=h2: floor((@font-size-base * 1.7))
@font-size=h3: ceil((@font-size-base * 1.5))
@font-size=h4: ceil((@font-size-base * 1.3))
@font-size=h5: ceil((@font-size-base * 1.15))
@font-size=h6: ceil((@font-size-base * 0.9))
*/

// Gray tones
@gray-darkest: lighten(#000, 5%);
@gray-darker: lighten(#000, 13.5%);
@gray-dark: lighten(#000, 20%);
@gray: lighten(#000, 33.5%);
@gray-light: lighten(#000, 46.7%);
@gray-lighter: lighten(#000, 70%);
@gray-lightest: lighten(#000, 93%);

// Gray with bluish tone
@blue-multiplier: #ecf5ff;
@b-gray-dark: multiply(@gray-dark, @blue-multiplier);
@b-gray-darker: multiply(@gray-darker, @blue-multiplier);
@b-gray-darkest: multiply(@gray-darkest, @blue-multiplier);
@b-gray: multiply(@gray, @blue-multiplier);
@b-gray-light: multiply(@gray-light, @blue-multiplier);
@b-gray-lighter: multiply(@gray-lighter, @blue-multiplier);
@b-gray-lightest: multiply(@gray-lightest, @blue-multiplier);

// Original BS3 colors
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;

// Active color
@active-color: @brand-info;
@active-color: @brand-primary;

.color-primary { color: @brand-primary; }
.color-success { color: @brand-success; }
.color-info { color: @brand-info; }
.color-warning { color: @brand-warning; }
.color-danger { color: @brand-danger; }

// Override BS3 colors
//@brand-primary: #9ca3ae;
//@brand-primary: @b-gray-lighter;
//@brand-success: #6b5;
@brand-info: #46acca;

// Body
@body-bg-color: #eff0f1;
@body-text-color: #333;

// Form
@form-bg-color: #f6f7f8;

// Header
@header-height: 70px;
@header-bg-color: #373b3d;
@header-bg-color: @b-gray-dark;

// Horizontal nav
@nav-bg-color: @b-gray;
@nav-link-color: @b-gray-lighter;
@nav-link-hover-color: #fff;
@nav-link-active-border-color: @active-color;
@nav-link-hover-bg-color: darken(@b-gray, 5%);

// Footer
@footer-height: 60px;

@vertical-menu-width: 250px;
@outer-gutter: 40px;
@grid-float-breakpoint: 768px;

.white-shadow { text-shadow: 0 1px rgba(255, 255, 255, 0.3); }
.white-shadow-max { text-shadow: 0 1px rgba(255, 255, 255, 0.7); }
// Inputs
@font-size-base: 12px;
@input-font-size: 12px;
@input-height-base: 30px;
@padding-base-vertical: 4px;
@padding-base-horizontal: 8px;
@input-border-radius: 0;
//@line-height-base: 1.45;

//@border-radius-base: 2px;
//@grid-float-breakpoint: 600px;
//@navbar-inverse-bg: @ui-color-darker;
//@navbar-inverse-brand-hover-bg: inherit;
//@navbar-inverse-brand-hover-color: lighten(@gray-light, 15%);
//@navbar-padding-vertical: 30px;
//@navbar-height: @header-height;
//@navbar-padding-horizontal: 0;


// Mixin for simple form elements, for which we can't add class attribute
.form-control-mixin {
    display: block;
    width: 100%;
    height: @input-height-base;
    padding: @padding-base-vertical @padding-base-horizontal;
    font-size: @input-font-size;
    line-height: @line-height-base;
    color: @input-color;
    background-color: @input-bg;
    background-image: none;
    border: 1px solid @input-border;

    //    .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
    .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
    .form-control-focus();
}
.form-control {
    font-size: @input-font-size;
    height: @input-height-base;
    padding: @padding-base-vertical @padding-base-horizontal;
}
.form-control, .form-control-mixin {
    border-radius: @input-border-radius;
}
.btn {
    line-height: 1.5;
}
.input-group {
//    font-size: 13px;
}
.replace-img {
    display: block;
    content: '';
    width: 14px;
    height: 14px;
    font-size: 13px;
    color: @b-gray;
    .glyphicon;
    vertical-align: inherit;
    &:after {
        content: "\2a";
    }
}
.glyphicon-before {
    content: "\2a";
    width: 14px;
    height: 14px;
    font-size: 13px;
    color: @b-gray;
    .glyphicon;
}
.replace-a-img {
    img {
        .replace-img;
    }
    &:hover {
        text-decoration: none;
        img {
            text-decoration: none;
            &:after {
                text-decoration: none;
                color: @b-gray-darker;
            }
        }
    }
}
