consensus/build/less/1pxdeep.less

vote for topics for your next meeting

/////////////////////////////////////////////////
/////////////////////////////////////////////////
////
//// 1pxdeep v1.0
////
//// Copyright 2013 Rex Riepe
//// Licensed under the Apache License v2.0
//// http://www.apache.org/licenses/LICENSE-2.0
////
/////////////////////////////////////////////////
/////////////////////////////////////////////////

//// Bootstrap variable overrides

@font-size-base:                    16px;

@border-radius-base:                6px;
@border-radius-large:               8px;
@border-radius-small:               4px;

@list-group-bg:                     transparent;

@table-border-color:                transparent;

@modal-backdrop-bg:                 @color1a;

@input-height-base:                 (@line-height-computed + (@padding-base-vertical * 2) + 4);

@btn-default-bg:                    @color1;
@btn-default-border:                @btn-default-bg;
@btn-font-weight:                   normal;

@brand-primary:                     hsl(hue(#428bca),@sat,@l-factor);
@brand-info:                        hsl(hue(#5bc0de),@sat,@l-factor);
@brand-success:                     hsl(hue(#5cb85c),(saturation(#5cb85c) + @sat)/2,(luma(#5cb85c) + @luma - 10)/2);
@brand-warning:                     hsl(hue(#f0ad4e),(saturation(#f0ad4e) + @sat + 16)/2,(luma(#f0ad4e) + @luma - 10)/2);
@brand-danger:                      hsl(hue(#d9534f),(saturation(#d9534f) + @sat)/2,(luma(#d9534f) + @luma + 10)/2);

@navbar-link-color:                 white;
@navbar-link-hover-color:           white;
@navbar-link-hover-bg:              transparent;
@navbar-link-active-color:          white;
@navbar-link-active-bg:             @1pxdeep-bg;
@navbar-link-disabled-color:        #ccc;
@navbar-link-disabled-bg:           transparent;

//// SchemeLESS variable overrides

@luma-upper-break:72;

@contrast:@luma/50;

//// Theme variables

@1pxdeep-default-button-color:      @color1b;
@1pxdeep-bg:                        @color1;
@body-bg:                           @1pxdeep-bg;


//// Mix-ins

.button-text (@color) when (luma(@color1) >= @luma-upper-break) {
    color:average(darken(@color,30%),#222);
}

.button-text (@color) when (luma(@color1) < @luma-upper-break) {
    color:#ffffff;
}

.contrast (@color) when (luma(@color) >= @luma-upper-break) {
    color:mix(darken(@color,18%),#111,50%);
}

.contrast (@color) when (luma(@color) < @luma-upper-break) {
    color:hsl(hue(@color),@sat,97%);
}

.contrast-dim (@color) when (luma(@color) >= @luma-upper-break) {
    color:mix(darken(@color,5%),#111,65%);
}

.contrast-dim (@color) when (luma(@color) < @luma-upper-break) {
    color:mix(@color,#ffffff,25%);
}

.contrast-link (@color) when (luma(@color) >= @luma-upper-break) {
    color:average(darken(@color,80%),#222);
}

.contrast-link (@color) when (luma(@color) < @luma-upper-break) {
    color:mix(#ffffff,@color1,75%);
}

.btn-borders(@color) {
    border:1px solid transparent;
    border-top-color:mix(softlight(white,@color),@color,30%);
}

.btn-borders(@color) when (luma(@seed-color) > @luma-upper-break) {
    border:1px solid transparent;
    border-bottom-color:mix(#333,@color,30%);
}

.btn-borders(@color) when (luma(@seed-color) < 10%) {
    border:1px solid transparent;
    border-top-color:mix(softlight(white,@color),@color,30%);
}

.btn-pseudo-states(@color, @background, @border) { // overwrites bootstrap mix-in
    .contrast(@background);
    .btn-borders(@background);

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: darken(@background, 2%);
        .btn-borders(darken(@background, 2%));
        border-top:1px solid darken(@background, 2%);
        .1pxdeep-shadow(1.5);
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: @background;
            border-color:transparent;
        }
    }
}

//shadows

@1pxdeep-shadow-intensity:.1;

@1pxdeep-shadow-color:mix(darken(@color1,33%),#222,50%);

@1pxdeep-shadow-r:red(@1pxdeep-shadow-color);
@1pxdeep-shadow-g:green(@1pxdeep-shadow-color);
@1pxdeep-shadow-b:blue(@1pxdeep-shadow-color);

.1pxdeep-shadow(@intensity:1) {
    .box-shadow(0px 1px 2px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,@intensity*@1pxdeep-shadow-intensity));
    //.box-shadow(none);
}

.1pxdeep-shadow(@intensity:1) when (luma(@color1) > @luma-upper-break)  {
    @1pxdeep-shadow-intensity:.05;
    .box-shadow(0px 1px 2px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,@intensity*@1pxdeep-shadow-intensity));
    //.box-shadow(none);
}

.1pxdeep-shadow-inset(@intensity:1) {
    .box-shadow(inset 0px 0px 3px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,@intensity*@1pxdeep-shadow-intensity));
    //.box-shadow(none);
}

.1pxdeep-shadow-inset(@intensity:1) when (luma(@color1) > @luma-upper-break) {
    @1pxdeep-shadow-intensity:.05;
    .box-shadow(inset 0px 0px 3px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,@intensity*@1pxdeep-shadow-intensity));
    //.box-shadow(none);
}


.btn {
    .1pxdeep-shadow();

    &:active,
    &.active {
        .box-shadow(none);
    }

    &.disabled,
    &[disabled],
        fieldset[disabled] & {
        .opacity(.65);
        .box-shadow(none);
    }

    .btn-color(@color) {
        background:@color;
        .contrast(@color);
        .btn-borders(@color);

        &:hover,
        &:focus {
            background:lighten(@color,2%);
            .btn-borders(lighten(@color,2%));
            .contrast(@color);
        }

        &:active,
        &.active {
            .contrast-dim(@color);
            background:darken(@color,2%);
            border:1px solid darken(@color,2%);
        }
    }

    .btn-color(@color) when (luma(@color) > @luma-upper-break) {
        background:@color;
        .contrast(@color);
        .btn-borders(@color);

        &:hover,
        &:focus {
            background:lighten(@color,2%);
            .contrast(@color);
        }

        &:active,
        &.active {
            background:darken(@color,2%);
            border:1px solid darken(@color,2%);
        }
    }

    .btn-color(@1pxdeep-default-button-color);
    &.color1 {.btn-color(@color1);}
    &.color1a {.btn-color(@color1a);}
    &.color1b {.btn-color(@color1b);}
    &.color1c {.btn-color(@color1c);}
    &.color2 {.btn-color(@color2);}
    &.color2a {.btn-color(@color2a);}
    &.color2b {.btn-color(@color2b);}
    &.color2c {.btn-color(@color2c);}
    &.color3 {.btn-color(@color3);}
    &.color3a {.btn-color(@color3a);}
    &.color3b {.btn-color(@color3b);}
    &.color3c {.btn-color(@color3c);}
    &.color4 {.btn-color(@color4);}
    &.color4a {.btn-color(@color4a);}
    &.color4b {.btn-color(@color4b);}
    &.color4c {.btn-color(@color4c);}

    &.btn-primary {.btn-color(@brand-primary);}
    &.btn-info {.btn-color(@brand-info);}
    &.btn-success {.btn-color(@brand-success);}
    &.btn-warning {.btn-color(@brand-warning);}
    &.btn-danger {.btn-color(@brand-danger);}
    &.btn-inverse {.btn-color(desaturate(@color1a,100%));}
}

.schemify(@color) {
    @mix-weight:60%;
    @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight);
    background:@new-color;
    .contrast(@new-color);
}


//elements

body,html {
    background:@1pxdeep-bg;
    .contrast(@1pxdeep-bg);

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

a {
    .contrast-link(@1pxdeep-bg);

    &:hover {
        .contrast-link(@1pxdeep-bg);
    }
}

blockquote {

    padding:6px 8px;

    cite {
        font-style:italic;
    }

    .blockquote-color(@color,@alt-color) {
        background:@color;
        border-left:4px solid @alt-color;
        .contrast(@color);

        &.pull-right {
            border-left:none;
            border-right:4px solid @alt-color;
        }

        small {
            .contrast(@color);
            text-shadow:none;
        }
    }

    .blockquote-color(@color1c,@color1a);
    &.color1 { .blockquote-color(@color1c,@color1a)}
    &.color2 { .blockquote-color(@color2c,@color2a)}
    &.color3 { .blockquote-color(@color3c,@color3a)}
    &.color4 { .blockquote-color(@color4c,@color4a)}
}

/*input[type="checkbox"] { //experimental flat look for checkboxes
    margin-right:13px;
    margin-top:5px;
    background:white;

    &:before {
        display:block;
        content:"";
        width:22px;
        height:22px;
        //border:2px solid @1pxdeep-bg;
        border-radius:@border-radius-base;
        background:white;
        position:relative;
        top:-4px;
        left:-1px;
        .box-shadow(inset 1px 1px 0px @1pxdeep-bg);
    }

    &:checked {
        &:after {
            display:block;
            content:"";
            width:8px;
            height:13px;
            border-radius:0;
            background:white;
            position:relative;
            top:-23px;
            left:7px;
            .box-shadow(inset -3px -3px 0px @1pxdeep-bg);
            border:none;
            border-radius:0;
            .rotate(45deg);
        }
    }
}*/

.form-control {
    .box-shadow(none);
}

// small fix in headlines

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  small {
    color:inherit;
  }
}

//dropdown

.dropdown-menu {
    .box-shadow(none);
    border:none;

    li {
        border:none;
    }

    .dropdown-menu-color(@color) {
        li {
            &:hover {
                a {
                    background:@color;
                    .contrast(@color);
                }

            }
        }
    }

    .dropdown-menu-color(@color1b);

    &.color1 {.dropdown-menu-color(@color1b);}
    &.color2 {.dropdown-menu-color(@color2b);}
    &.color3 {.dropdown-menu-color(@color3b);}
    &.color4 {.dropdown-menu-color(@color4b);}

}

.btn-group.open .dropdown-toggle {
  .box-shadow(none);
}

.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
    border-top:none;
    border-bottom-color:white;
}

.btn-default .caret {
    border-top-color:white;
}

//well

.well {
    border:none;

    .well-color(@color) {
        .1pxdeep-shadow-inset(2.5);
        background:@color;
        .contrast(@color);

        a {
            .contrast-link(@color);
        }
    }

    .well-color(@modal-backdrop-bg);
}

//navbar

.navbar {

    border:none;

    .navbar-color(@color) {
        background:@color;
        .contrast(@color);
    }

    .navbar-color(@color1a);

    &.color1 { .navbar-color(@color1a);}
    &.color2 { .navbar-color(@color2a);}
    &.color3 { .navbar-color(@color3a);}
    &.color4 { .navbar-color(@color4a);}
}

.navbar-brand {
    color:inherit;
}

.navbar-nav {

    .active {
        overflow-y:hidden;
    }

    .navbar-nav-color(@color) {
        .active > a {
            .1pxdeep-shadow(5);
            .contrast(@color);
            background-color: @color;

            &:hover {
                .contrast(@color);
                background-color: @color;
            }
        }

        li > a {
            .contrast-dim(darken(@color,10%));
            line-height: 25px;
            z-index:100;

            &:hover,
            &:focus {
                @ncolor:lighten(@color,4%);
                .contrast(@ncolor);
                background-color: @ncolor;
            }
        }
    }

    .navbar-nav-color(@1pxdeep-bg);    

    &.color1 { .navbar-nav-color(@color1);}
    &.color2 { .navbar-nav-color(@color2);}
    &.color3 { .navbar-nav-color(@color3);}
    &.color4 { .navbar-nav-color(@color4);}    
}

.navbar-fixed-top, .navbar-fixed-bottom {
    .1pxdeep-shadow-inset(2);

    .navbar-inner {
        //.box-shadow(none);
        padding:0;
        //margin-bottom:12px;
    }
}

.navbar-toggle {
    @color:@color1;
    background-color: @color;
    .btn-borders(@color);

    &:hover,
    &:focus {
        background-color: lighten(@color,2%);
    }

    &:active,
    .active {
        background-color:darken(@color,2%);
        border-top-color:darken(@color,2%);
    }

    .icon-bar-color(@color) when (luma(@color) > @luma-upper-break) {
        background-color:#333;
    }

    .icon-bar-color(@color) when (luma(@color) =< @luma-upper-break) {
        background-color:white;
    }

    .icon-bar {
        .icon-bar-color(@color);
    }
}

.navbar-collapse {
    border-top:none;
}

//pills

.nav-pills {
    text-shadow:none;
    color:black;

    .pills-color(@color,@active-color) {
        > li > a {
            &:hover {
                background:lighten(@color,10%);
                .contrast(lighten(@color,10%));
            }
        }

        > li.active > a {
            background:@active-color;
            .contrast(@active-color);

            &:hover {
                background:lighten(@active-color,2%);
                .contrast(lighten(@active-color,2%));
            }
        }
    }

    .pills-color(@color1,@color1c);

    &.color1 { .pills-color(@color1,@color1c);}
    &.color2 { .pills-color(@color2,@color2c);}
    &.color3 { .pills-color(@color3,@color2c);}
    &.color4 { .pills-color(@color4,@color2c);}
}

//alert

.alert {
    border:none;
    text-shadow:none;

    .close {
        .opacity(100);
        text-shadow:none;
        margin-top:-1px;
    }

    .alert-color(@color) {
        background:@color;
        .contrast(@color);

        .close {
            .contrast(@color);
        }
    }

    .alert-color-schemify(@color) {
        .alert-color(@color);
        .schemify(@color);

        .close {
            .contrast(mix(hsl(hue(@color),@sat,@luma),@color,60%););
        }
    }

    .alert-color-schemify(#fbfcd6);

    &.color1 { .alert-color(@color1);}
    &.color2 { .alert-color(@color2);}
    &.color3 { .alert-color(@color3);}
    &.color4 { .alert-color(@color4);}

    &.alert-error,&.alert-danger {.alert-color-schemify(#ee5f5b);}
    &.alert-info {.alert-color-schemify(#08c);}
    &.alert-success {.alert-color-schemify(#62c462);}
}

//progress bars

.progress {
    background:darken(@1pxdeep-bg,5%);
    .1pxdeep-shadow-inset(2);

    .progress-color(@color) {
        background:darken(@color,5%);
    }

    &.color1 { .progress-color(@color1);}
    &.color2 { .progress-color(@color2);}
    &.color3 { .progress-color(@color3);}
    &.color4 { .progress-color(@color4);}
}

.progress-bar {
    .box-shadow(none);

    .progress-bar-color(@color) {
        background:@color;
        .contrast(@color);
    }   

    .progress-bar-color(@color1c);
    &.color1 { .progress-bar-color(@color1c);}
    &.color2 { .progress-bar-color(@color2c);}
    &.color3 { .progress-bar-color(@color3c);}
    &.color4 { .progress-bar-color(@color4c);}
    &.progress-bar-success { .progress-bar-color(@brand-success);}
    &.progress-bar-warning { .progress-bar-color(@brand-warning);}
    &.progress-bar-danger { .progress-bar-color(@brand-danger);}
    &.progress-bar-info { .progress-bar-color(@brand-info);}
}

//accordion

.accordion {
    .accordion-heading {
        border-bottom: 0;
        border-radius:6px;
        a {
            &:hover {
                text-decoration:none;
            }
        }
    }

    .accordion-group {
        border:none;
    }

    .accordion-inner {
        margin:12px;
        padding:15px;
        border-radius:6px;
    }

    .accordion-inner-color(@color) {
        .accordion-inner {
            background:@color;
            .contrast(@color);
            //text-shadow:none;
        }
    }

    .accordion-heading-color(@color) {
        .accordion-heading {
            background:@color;
            .contrast(@color);
            .btn-borders(@color);

            a {
                .contrast(@color);
            }
        }
    }

    .accordion-heading-color(@color1b);
    .accordion-inner-color(@color1c);

    &.color1 {  .accordion-heading-color(@color1b);
                .accordion-inner-color(@color1c);}
    &.color2 {  .accordion-heading-color(@color2b);
                .accordion-inner-color(@color2c);}
    &.color3 {  .accordion-heading-color(@color3b);
                .accordion-inner-color(@color3c);}
    &.color4 {  .accordion-heading-color(@color4b);
                .accordion-inner-color(@color4c);}
}

//jumbotron

.jumbotron {
    font-size: 24px;
    line-height:32px;
    font-weight: normal;

    .jumbotron-color(@color) {
        background:@color;
        .contrast(@color);
    }

    .jumbotron-color(@color1b);

    &.color1 {.jumbotron-color(@color1b);}
    &.color2 {.jumbotron-color(@color2b);}
    &.color3 {.jumbotron-color(@color3b);}
    &.color4 {.jumbotron-color(@color4b);}

    h1 {
        margin-bottom: 12px;
        font-size: 60px;
        line-height: 1;
        color: @jumbotron-heading-color;
        letter-spacing: -1px;
    }
}

//breadcrumbs

.breadcrumb {

    > .active {
        font-weight:bold;
    }

    .breadcrumb-color(@color) {
        background:@color;
        li {
            .contrast(@color);

            > a {
                .contrast(@color);
            }
        }

        > .active {
            .contrast(@color)
        }

    }

    .breadcrumb-color(@color1b);

    &.color1 { .breadcrumb-color(@color1b);}
    &.color2 { .breadcrumb-color(@color2b);}
    &.color3 { .breadcrumb-color(@color3b);}
    &.color4 { .breadcrumb-color(@color4b);}


}

//pager

.pager {
    > li {
        > a {
            border:none;
        }
    }

    .pager-color(@color) {
        > li {
            > a {
                background:@color;
                .contrast(@color);
            }

            > a:hover,
            > a:focus {
                background-color: lighten(@color,2%);
            }
        }

        > .disabled {
            > a {
                background:@color;
                .contrast-dim(@color);
                .opacity(.5);
            }

            > a:hover,
            > a:focus {
                background-color:@color;
                .contrast-dim(@color);
            }
        
        }
    }

    .pager-color(@color1b);

    &.color1 { .pager-color(@color1b);}
    &.color2 { .pager-color(@color2b);}
    &.color3 { .pager-color(@color3b);}
    &.color4 { .pager-color(@color4b);}

    &.disabled { .pager-color(#ddd);}
}

//pagination

.pagination {
    background:none;

    .page-color(@color,@active-color) {

        > li > a {
            background:@color;
            .contrast(@color);
            .btn-borders(@color);
        }

        > li > a:hover,
        > li > a:focus,
        > li > a:active,
        > .active > a,
        > .active > span {
            .contrast(lighten(@color,2%));
            background-color:lighten(@color,2%);
        }
        > .active > a,
        > .active > span {
            .contrast(@active-color);
            background-color:lighten(@active-color,2%);
        }
    }

    .page-color(@color1b,@color1c);

    &.color1 {.page-color(@color1b,@color1c);}
    &.color2 {.page-color(@color2b,@color2c);}
    &.color3 {.page-color(@color3b,@color3c);}
    &.color4 {.page-color(@color4b,@color4c);}

    > .disabled {
        > span,
        > a,
        > a:hover,
        > a:focus {
            color:inherit;
            background-color:inherit;
            .opacity(.5);
        }
    }
}

//thumbnail

.thumbnail,
.img-thumbnail {
    border: 1px solid transparent;

    .thumbnail-color(@color) {
        background-color:@color;

        .caption {
            .contrast(@color);
        }
    }

    .thumbnail-color(@color1b);

    &.color1 {.thumbnail-color(@color1b);}
    &.color2 {.thumbnail-color(@color2b);}
    &.color3 {.thumbnail-color(@color3b);}
    &.color4 {.thumbnail-color(@color4b);}
}

//form

.form-horizontal {
    font-size:18px;
}

legend {
    .contrast(@1pxdeep-bg);
}

.help-block {
    .contrast(@1pxdeep-bg);
}

.form-color(@color) {
    legend {
        .contrast(@color);
    }

    .help-block {
        .contrast(@color);
    }
}

.color1 {
    .form-color(@color1);
}

//input group

.input-group {
  position: relative; // For dropdowns
  display: table;
  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table

  // Undo padding and float of grid classes
  &.col {
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  .form-control {
    width: 100%;
    margin-bottom: 0;
  }
}

.input-group-addon {
  border: none;
  border-radius: @border-radius-base;

  .input-group-addon-color(@color) {
    background:@color;
    .contrast(@color);
  }

  .input-group-addon-color(@color1b);

  &.color1 {.input-group-addon-color(@color1b)}
  
}

//code

code, pre {
    font-size:14px;
    text-shadow:none;

    .code-color(@color) {
        background:@color;
        .contrast(@color);
        border-color:@color;
    }

    .code-color(@color1c);

    &.color1 { .code-color(@color1b)}
    &.color2 { .code-color(@color2b)}
    &.color3 { .code-color(@color3b)}
    &.color4 { .code-color(@color4b)}
}

//labels and badges

.label, .badge {
    .label-color(@color) {
        background:@color;
        .contrast(@color);
        text-shadow:none;
    }

    .label-color(@color1a);

    &.color1 { .label-color(@color1);}
    &.color2 { .label-color(@color2);}
    &.color3 { .label-color(@color3);}
    &.color4 { .label-color(@color4);}

    &.label-success { .label-color(@brand-success);}
    &.label-info { .label-color(@brand-info);}
    &.label-warning { .label-color(@brand-warning);}
    &.label-danger { .label-color(@brand-danger);}
}

//nav tabs

.nav-tabs {
    > li {
        > a {
            border: none;
            
            &:hover {
                border:none;
            }
        }

        &.active > a {
            &,
            &:hover,
            &:focus {
                border:none;
            }
        }
    }

    .nav-tabs-color(@color) {
        border-bottom:2px solid @color;

        > li {

            > a {
                &:hover {
                    background:lighten(@color,2%);
                }
            }

            &.active > a {
                &,
                &:hover,
                &:focus {
                    .contrast(@color);
                    background-color:@color;
                }
            }
        }
    }

    .nav-tabs-color(@color1c);

    &.color1 { .nav-tabs-color(@color1a);}
    &.color2 { .nav-tabs-color(@color2a);}
    &.color3 { .nav-tabs-color(@color3a);}
    &.color4 { .nav-tabs-color(@color4a);}


}

//table

table {
    max-width: 100%;
    text-shadow:none;
    border-collapse: collapse;
    border-spacing: 0;
    border-color:transparent;
    border-radius:@border-radius-base;

    thead,
    tbody,
    tfoot {
        > tr {
            > th,
            > td {
                border-top:none;
            }
        }
    }

    tbody + tbody {
        border-top: none;
    }

    .table-color(@color) {
        background-color:@color;
        .contrast(@color);

        &.table { 
            th,
            td {
                border-top-color: @color;
            }
            tbody + tbody {
                border-top-color:@color;
            }
        }

        &.table-bordered {
            border:none;
        }

        &.table-striped {
            .table-striped-color(darken(@color,5%));
        }

        .table-striped-color(@color) {
            tbody {
                > tr:nth-child(odd) > td,
                > tr:nth-child(odd) > th {
                    background-color:darken(@color,1%);
                }
            }
        }

        .table-striped-color (@color) when (luma(@color) > @luma-upper-break) {
            tbody {
                > tr:nth-child(odd) > td,
                > tr:nth-child(odd) > th {
                    background-color:darken(@color,1%);
                }
            }
        }

        .table-striped-color (@color) when (luma(@color) < @luma-lower-break) {
            tbody {
                > tr:nth-child(odd) > td,
                > tr:nth-child(odd) > th {
                    background-color:lighten(@color,1%);
                }
            }
        }

        &.table-hover {
            tbody {
                tr:hover > td,
                tr:hover > th {
                    background-color: lighten(@color,5%);
                }
            }
        }
    }

    .table-color(@color1b);

    &.color1 { .table-color(@color1b);}
    &.color2 { .table-color(@color2b);}
    &.color3 { .table-color(@color3b);}
    &.color4 { .table-color(@color4b);}
}

.table-row-variant(success; @brand-success; @brand-success);
.table-row-variant(danger; @brand-danger; @brand-danger);
.table-row-variant(warning; @brand-warning; @brand-warning);


//hr

hr {
    .hr-color(@color) {
        background:@color;
        color:@color;
        border-color:@color;
    }

    .hr-color(color1c);
    &.color1 {.hr-color(@color1c);}
    &.color2 {.hr-color(@color2c);}
    &.color3 {.hr-color(@color3c);}
    &.color4 {.hr-color(@color4c);}
}

//page header

.page-header {
    border-width:2px;

    .page-header-color(@color) {
        border-color:@color;
        .contrast(@1pxdeep-bg);

        small {
            .contrast(@1pxdeep-bg);
        }
    }

    .page-header-color(@color1c);
    &.color1 {.page-header-color(@color1c);}
    &.color2 {.page-header-color(@color2c);}
    &.color3 {.page-header-color(@color3c);}
    &.color4 {.page-header-color(@color4c);}
}

//modal

.modal-dialog {
    padding-right:0;
    padding-left:0;
    width:100%;
}

.modal-content {
    .box-shadow(none);
    border:none;
    background:none;
    width:100%;
}

.modal-header {
    border:none;
    width:60%;
    margin-left:20%;
    padding-left:0;
    padding-right:0;

    > .close {
        .contrast(@modal-backdrop-bg);
        margin-top:0;
        .opacity(1);
        padding:14px; //more touch-friendly
        position:relative;
        top:-12px;
        right:-14px;
    }
}

.modal-title {
    .contrast(@modal-backdrop-bg);
    //text-shadow:none;
    margin-left:0;
}

.modal-body {
    border-radius:0;
    width:100%;
    padding-left:20%;
    padding-right:20%;
    margin:0;

    .modal-body-color(@color) {
        background:@color;
        .contrast(@color); 
    }

    .modal-body-color(@color1);

    &.color1 { .modal-body-color(@color1);}
    &.color1a { .modal-body-color(@color1a);}
    &.color1b { .modal-body-color(@color1b);}
    &.color1c { .modal-body-color(@color1c);}
    &.color2 { .modal-body-color(@color2);}
    &.color2a { .modal-body-color(@color2a);}
    &.color2b { .modal-body-color(@color2b);}
    &.color2c { .modal-body-color(@color2c);}
    &.color3 { .modal-body-color(@color3);}
    &.color3a { .modal-body-color(@color3a);}
    &.color3b { .modal-body-color(@color3b);}
    &.color3c { .modal-body-color(@color3c);}
    &.color4 { .modal-body-color(@color4);}
    &.color4a { .modal-body-color(@color4a);}
    &.color4b { .modal-body-color(@color4b);}
    &.color4c { .modal-body-color(@color4c);}
}

.modal-footer {
    background:transparent;
    margin-top:0;
    border:none;
    width:60%;
    margin-left:20%;
    padding-left:0;
    padding-right:0;
}

.modal-backdrop {
    background-color: @modal-backdrop-bg;
    &.fade { .opacity(0); }
    &.in { .opacity(1); }

    &:before {
        display:block;
        content:"";
        background:@modal-backdrop-bg;
        width:100%;
        height:50%;
        position:absolute;
        top:0;
        left:0;
    }
}

.close {
    text-shadow:none;
}

@media screen and (max-width: @screen-tablet) {

    .modal-header, .modal-footer {
        margin-left:4%;
        margin-right:4%;
        width:92%;
    }

    .modal-body {
        padding-left:4%;
        padding-right:4%;
    }

}

//panel
.panel {
    border:none;
    .box-shadow(none);

    .panel-color(@color) {
        background:@color;
        .contrast(@color);
    }

    .panel-color(@color1c);

    &.color1 { .panel-color(@color1);}
    &.color1a { .panel-color(@color1a);}
    &.color1b { .panel-color(@color1b);}
    &.color1c { .panel-color(@color1c);}
    &.color2 { .panel-color(@color2);}
    &.color2a { .panel-color(@color2a);}
    &.color2b { .panel-color(@color2b);}
    &.color2c { .panel-color(@color2c);}
    &.color3 { .panel-color(@color3);}
    &.color3a { .panel-color(@color3a);}
    &.color3b { .panel-color(@color3b);}
    &.color3c { .panel-color(@color3c);}
    &.color4 { .panel-color(@color4);}
    &.color4a { .panel-color(@color4a);}
    &.color4b { .panel-color(@color4b);}
    &.color4c { .panel-color(@color4c);}
}

.panel-heading, .panel-footer {
    border:none;

}

.panel-body {
    padding-bottom:0;
}

.panel-footer {
    padding-bottom:15px;
}

.panel-heading, .panel-body, .panel-footer {
    
    .panel-heading-color(@color) {
        background:@color;
        .contrast(@color);
    }

    .panel-heading-color(@color1c);

    &.color1 { .panel-heading-color(@color1);}
    &.color1a { .panel-heading-color(@color1a);}
    &.color1b { .panel-heading-color(@color1b);}
    &.color1c { .panel-heading-color(@color1c);}
    &.color2 { .panel-heading-color(@color2);}
    &.color2a { .panel-heading-color(@color2a);}
    &.color2b { .panel-heading-color(@color2b);}
    &.color2c { .panel-heading-color(@color2c);}
    &.color3 { .panel-heading-color(@color3);}
    &.color3a { .panel-heading-color(@color3a);}
    &.color3b { .panel-heading-color(@color3b);}
    &.color3c { .panel-heading-color(@color3c);}
    &.color4 { .panel-heading-color(@color4);}
    &.color4a { .panel-heading-color(@color4a);}
    &.color4b { .panel-heading-color(@color4b);}
    &.color4c { .panel-heading-color(@color4c);}
}

//carousel

.carousel-control {
    &.left {
        background:transparent;
    }
    
    &.right {
        left: auto;
        right: 0;
        background:transparent;
    }

    .icon-nav-defaults() {
        @size:44px;
        font-size:@size;
        line-height:@size;
        text-shadow:none;
        font-weight:bold;
    }

    .icon-prev {
        &:before {
            content: '\00ab';// DOUBLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
            .icon-nav-defaults();
        }
    }

    .icon-next {
        &:before {
            content: '\00bb';// DOUBLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
            .icon-nav-defaults();
        }
    }
}

.carousel-indicators {
    @size:24px;
    @border-radius:2px;

    li {
        width: (@size - @border-radius);
        height: (@size - @border-radius);
        border-radius: @size;
        margin:@border-radius;
    }

    .active {
        width: (@size + @border-radius);
        height: (@size + @border-radius);
    }

    .carousel-indicators-color(@color) {
        li {
            border: @border-radius solid @color;
        }

        .active {
            background-color:@color;
        }
    }

    .carousel-indicators-color(@color1c);

    &.color1{ .carousel-indicators-color(@color1c);}
    &.color2{ .carousel-indicators-color(@color2c);}
    &.color3{ .carousel-indicators-color(@color3c);}
    &.color4{ .carousel-indicators-color(@color4c);}
}

//list groups

.list-group {
    background:transparent;
}

.list-group-item {
    .list-group-item-color(@color,@active-color) {
        
        background:@color;
        .contrast(@color);
        border-color:darken(@color,4%);

        a& {
            .contrast(@color);

            &:hover,
            &:focus {
                background-color: lighten(@color,2%);
            }

            > .list-group-item-heading {
                .contrast(@color);
            }
        }

        &.active,
        &.active:hover,
        &.active:focus {
            .contrast(@active-color);
            background-color: @active-color;
            .btn-borders(@active-color);

            .list-group-item-text {
                color: lighten(@active-color, 40%);
            }
        }
    }

    .list-group-item-color(@color1b,@color1c);

    &.color1 { .list-group-item-color(@color1b,@color1c);}
    &.color2 { .list-group-item-color(@color2b,@color2c);}
    &.color3 { .list-group-item-color(@color3b,@color3c);}
    &.color4 { .list-group-item-color(@color4b,@color4c);}
}

// sectionals
.sectional {
    position:relative;
    padding-top:90px;
    padding-bottom:90px;

    .sectional-title {
        position:absolute;
        top:12px;
        width:100%;
        text-align:center;
        text-transform:uppercase;
        font-size:14px;
        .opacity(.65);
    }

    .sectional-color(@color) {
        background:@color;
        .contrast(@color);
    }

    .sectional-color(@1pxdeep-bg);

    &.monochrome {.sectional-color(greyscale(@color1));}
    &.highlight {.sectional-color(lighten(@1pxdeep-bg,6%));}

    &.color1 {.sectional-color(@color1);}
    &.color1a {.sectional-color(@color1a);}
    &.color1b {.sectional-color(@color1b);}
    &.color1c {.sectional-color(@color1c);}
    &.color2 {.sectional-color(@color2);}
    &.color2a {.sectional-color(@color2a);}
    &.color2b {.sectional-color(@color2b);}
    &.color2c {.sectional-color(@color2c);}
    &.color3 {.sectional-color(@color3);}
    &.color3a {.sectional-color(@color3a);}
    &.color3b {.sectional-color(@color3b);}
    &.color3c {.sectional-color(@color3c);}
    &.color4 {.sectional-color(@color4);}
    &.color4a {.sectional-color(@color4a);}
    &.color4b {.sectional-color(@color4b);}
    &.color4c {.sectional-color(@color4c);}
}

//well headline fix

.well {
    h1,h2,h3,h4,h5,h6 {
        &:first-child {
            margin-top:0;
        }
    }
}