//micro-clearfix
.clear-fix () {
    
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

//http://css-tricks.com/remux-an-experimental-approach-to-responsive-web-design/
@rem-fallback: true; // switch to include px fallback

.rem (@px-value) {
    .rem(@px-value, @px-value);
}

.rem (@px-value-sm, @px-value-lg) {
    @rem-value-sm: ((round((unit(@px-value-sm) / unit(@base-font-size-sm)) * 10000000)) / 10000000);
    @rem-value-lg: ((round((unit(@px-value-lg) / unit(@base-font-size-lg)) * 10000000)) / 10000000);

    .result (@rem-value, @px-value, @rem-fallback) when (@rem-fallback = true) {
        font-size: ~"@{px-value}px";
        font-size: ~"@{rem-value}rem";
    }
    .result (@rem-value, @px-value, @rem-fallback) when (@rem-fallback = false) {
        font-size: ~"@{rem-value}rem";
    }

    .result(@rem-value-sm, unit(@px-value-sm), @rem-fallback);
    @media @bp2 {
        .result(@rem-value-lg, unit(@px-value-lg), @rem-fallback);
    }
}

.list-reset () {
    margin: 0;
    padding: 0;
    list-style: none;
}

.text-hidden () {
    text-indent: -9999em;
    line-height: 0;
    float: left;
    clip: rect(0,0,0,0);
}

.brand-gradient () {
    background-color: @brand;
    .background-image(~"linear-gradient(bottom, rgba(0,0,0,.15) 0%, rgba(255,255,255,0) 20%)");
}

// Experimental flexbox support
// http://elikirk.com/2013/06/05/flexbox-css-cross-browser-issues/
.flexbox() {
    /* Legacy */
    display: -moz-box;
    display: -webkit-box;
 
    /* Hybrid */
    display: -ms-flexbox;
 
    /* Modern */
    display: -webkit-flex;
    display: flex;
}

// Flex direction gated mixins

    .flex-direction(@value) when (@value = row) {
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
    }

    .flex-direction(@value) when (@value = row-reverse) {
        -webkit-box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .flex-direction(@value) when (@value = column) {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }

    .flex-direction(@value) when (@value = column-reverse) {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-box-direction: reverse;
        -moz-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

// Function for creating color bands 
.wdn-band(@color) {
    background-color: @color;
}

.wdn-band-seperator(@color) {
    border-width: 2px 0 2px 0;
    border-style: solid;
    border-color: @color; 
}