common.less

/////////////////////////////////////////////////////
//
// LESS Common
//
// @copyright  Copyright © 2012 Jordi Tost
// @version    1.0
//
// @Developer Jordi Tost (Follow Me: @jorditost)
//
/////////////////////////////////////////////////////

//@import "common-animations";
//@import "common-vars";
@import "easing";

//////////////////////
// FONT FACE Mixins
//////////////////////

.font-face(@fontname, @fontfile) {
    font-family: '@{fontname}';
    src: url('fonts/@{fontfile}-webfont.eot');
    src: url('fonts/@{fontfile}-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/@{fontfile}-webfont.woff') format('woff'),
       url('fonts/@{fontfile}-webfont.ttf') format('truetype'),
       url('fonts/@{fontfile}-webfont.svg#@{fontname}') format('svg');
    font-weight: normal;
    font-style: normal;
}

.font-face2(@fontname, @fontfile) {
    font-family: '@{fontname}';
    src: url('fonts/@{fontfile}-webfont.eot');
    src: url('fonts/@{fontfile}-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/@{fontfile}-webfont.woff2') format('woff2'),
       url('fonts/@{fontfile}-webfont.woff') format('woff'),
       url('fonts/@{fontfile}-webfont.ttf') format('truetype'),
       url('fonts/@{fontfile}-webfont.svg#@{fontname}') format('svg');
    font-weight: normal;
    font-style: normal;
}


.font-face-family (@fontname, regular) {
    font-family:'@{fontname}Regular';
}

.font-face-family (@fontname, bold) {
    font-family:'@{fontname}Bold';
}

.font-face-family (@fontname, @_) {
    font-weight: normal;
    font-style: normal;
}

/////////////////
// COLOR Mixins
/////////////////

.rgba(@r, @g, @b, @alpha) {
    background-color: rgba(@r, @g, @b, @alpha);
}

.rgba(@hex, @alpha) {
    background-color: @hex;
    background-color: rgba(red(@hex), green(@hex), blue(@hex), @alpha);
}

.rgba(@hex, @alpha, @hex-fallback) {
    background-color: @hex-fallback;
    background-color: rgba(red(@hex), green(@hex), blue(@hex), @alpha);
}

/////////////////
// FONT Mixins
/////////////////

.text-shadow(@shadow: #666666 3px 3px 3px) {
    text-shadow:@shadow;
}

.optimize-text() {
    text-rendering: optimizeLegibility;
}

.font-smoothing() {
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.no-text() {
    text-indent: -9999px;
}

///////////////////////
// BACKGROUND Mixins
///////////////////////

.background-image(@src, @pos: 0 0, @repeat: no-repeat) {
    background-image: url(@src);
    background-position: @pos;
    background-repeat: @repeat;
}

// Set background image for Retina display
.background-image-retina(@src, @image-size) {

    .background-size(@image-size);

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
           only screen and (-moz-min-device-pixel-ratio: 1.5),
           only screen and (-o-min-device-pixel-ratio: 3/2),
           only screen and (min-device-pixel-ratio: 1.5) {
    // @media
    // (-webkit-min-device-pixel-ratio: 2),
    // (min-resolution: 192dpi) {

            & {
                background-image: url(@src);
            }
    }
}

// Set background image for diferent devices
.background-image-devices(@filename, @ext, @image-size, @pos: 0 0, @repeat: no-repeat) {

    .background-image('@{filename}.@{ext}', @pos, @repeat);
    .background-image-retina('@{filename}@2x.@{ext}', @image-size);
}

// Unset background image to prevent loading
.background-image-devices-none() {

    background-image: none;

    // Retina Display
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (-moz-min-device-pixel-ratio: 1.5),
        only screen and (-o-min-device-pixel-ratio: 3/2),
        only screen and (min-device-pixel-ratio: 1.5) {
    // @media
    // (-webkit-min-device-pixel-ratio: 2),
    // (min-resolution: 192dpi) {

         & {
             background-image: none;
         }
    }
}

// Set background size
.background-size(@size) {
    -moz-background-size: @size;
    -o-background-size: @size;
    -webkit-background-size: @size;
    background-size: @size;
}

// Background color
// This mixin lighten or darken the background on hover (for example, for buttons)
.background-color-hover(dark; @color; @percent: 10%) {
    &:hover {
        background-color: darken(@color, 10%);
    }
}

.background-color-hover(light; @color; @percent: 10%) {
    &:hover {
        background-color: lighten(@color, 10%);
    }
}

.background-color-hover(@_; @color; @percent: 10%) {
    background-color: @color;
}

// Prevent image from loading
.prevent-load() {
    background-image: none !important;
}

//////////////////
// BLOCK Mixins
//////////////////

// Inside
.inside-block(@width) {
    position: relative;
    width: @width;
    margin-left: auto;
    margin-right: auto;
}

.inside() {
    position: relative;
    margin:0 auto;
}

.size(@width, @height) {
    width:@width;
    height:@height;
}

.block(@width, @height) {
    .size(@width, @height);
    display: block;
}

// Center Vertically
.center-vertically-wrapper(@width: 100%) {
    display: table;
    width: @width;
}

.center-vertically() {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

// Clearfix
.clearfix() {

    &:before,
    &:after {
    content:"";
        display:table;
    }
    &:after {
        clear:both;
    }

    zoom:1; // For IE 6/7 (trigger hasLayout)
}

.group {
    .clearfix();
}

// inline-block
.inline-block() {
    display:-moz-inline-stack;
    display:inline-block;
    vertical-align:top;
    zoom:1;
    *display:inline;
}

// Boxing

.box-sizing(@sizing) {
    -webkit-box-sizing: @sizing;
    -moz-box-sizing: @sizing;
    -ms-box-sizing: @sizing;
    box-sizing: @sizing;
}

.border-box() {
    .box-sizing(border-box);
}

// Mixins that sets the dimensions of a border-box with fallback for ie7
.border-box(@width, @height, @padding-top, @padding-right, @padding-bottom, @padding-left) {
    .box-sizing(border-box);
    padding: @padding-top @padding-right @padding-bottom @padding-left;
}

// When specifying value for @width, also calculate width value
.border-box(@width, @height, @padding-top, @padding-right, @padding-bottom, @padding-left) when not (@width = auto) {
    width:  @width;
    .ie7 & {
        width: @width - @padding-right - @padding-left;
    }
}

// When specifying value for @height, also calculate height value
.border-box(@width, @height, @padding-top, @padding-right, @padding-bottom, @padding-left) when not (@height = auto) {
    height: @height;
    .ie7 & {
        height: @height - @padding-top - @padding-bottom;
    }
}

.grid-box(@width, @height, @margin-left, @margin-bottom) {

    float: left;

    .block(@width, @height);

    margin-left: @margin-left;
    margin-bottom: @margin-bottom;

    &:first-child {
        margin-left: 0;
    }
}

/////////////////
// WORD Mixins
/////////////////

.break-word() {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

//////////////////
// CSS3 Mixins
//////////////////

// Opacity
.opacity(@op: 100) {

    // Safari 1.x
    -khtml-opacity: @op / 100;

    // Netscape
    -moz-opacity: @op / 100;

    // Good browsers
    opacity: @op / 100;

    // IE 8
    //-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{op}))";
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{op})";

    // IE 5-7
    filter: ~"alpha(opacity=@{op})";
    //filter: alpha(opacity=@op);
}

///////////////////
// Border Radius
///////////////////

.border-radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.border-radius-custom(@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}

.border-top-left-radius(@radius) {
    -webkit-border-top-left-radius: @radius;
    -moz-border-radius-topleft: @radius;
    border-top-left-radius: @radius;
}

.border-top-right-radius(@radius) {
    -webkit-border-top-right-radius: @radius;
    -moz-border-radius-topright: @radius;
    border-top-right-radius: @radius;
}

.border-bottom-right-radius(@radius) {
    -webkit-border-bottom-right-radius: @radius;
    -moz-border-radius-bottomright: @radius;
    border-bottom-right-radius: @radius;
}

.border-bottom-left-radius(@radius) {
    -webkit-border-bottom-left-radius: @radius;
    -moz-border-radius-bottomleft: @radius;
    border-bottom-left-radius: @radius;
}

/////////////
// Shadows
/////////////

// Box Shadow
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

// Inner box shadow
.box-inner-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: inset @x @y @blur rgba(0, 0, 0, @alpha);
}

.no-box-shadow() {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

/////////////////
// CSS3 Resets
/////////////////

.appearance(@value) {
    -webkit-appearance: @value;
    -moz-appearance:    @value;
    appearance:         @value;
}

.no-default() {
    .appearance(none);
    border: none;
    background-color: transparent;
}

.no-button() {
    .no-default();
}

.appearance-important(@value) {
    -webkit-appearance: @value !important;
    -moz-appearance:    @value !important;
    appearance:         @value !important;
}

// select boxes fix for Firefox
.appearance-firefox-fix() {
    text-indent: 0.01px;
    text-overflow: '';
}

/////////////////////
// CSS3 Transition
/////////////////////

.transition(@prop: all, @time: 0.1s, @ease: ease-out) {
    -moz-transition: @prop @time @ease;
    -webkit-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}

.transition-property(@prop) {
    -moz-transition-property: @prop;
    -webkit-transition-property: @prop;
    -o-transition-property: @prop;
    -ms-transition-property: @prop;
    transition-property: @prop;
}

.transition-duration(@time) {
    -moz-transition-duration: @time;
    -webkit-transition-duration: @time;
    -o-transition-duration: @time;
    -ms-transition-duration: @time;
    transition-duration: @time;
}

.transition-timing-function(@ease) {
    -moz-transition-timing-function: @ease;
    -webkit-transition-timing-function: @ease;
    -o-transition-timing-function: @ease;
    -ms-transition-timing-function: @ease;
    transition-timing-function: @ease;
}

/////////////////////
// CSS3 Transform
/////////////////////

.transform-all(@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
    -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}

.transform(@prop) {
    -webkit-transform: @prop;
    -moz-transform: @prop;
    -o-transform: @prop;
    -ms-transform: @prop;
    transform: @prop;
    // -webkit-transform-style: preserve-3d;
    // transform-style: preserve-3d;
}

.scale(@scale: 1) {
    .transform(scale(@scale));
}

.rotate(@rotate: 1) {
    .transform(rotate(@rotate));
}

.transform-origin(@origin: 50% 50% 0) {
    -webkit-transform-origin: @origin;
    -moz-transform-origin: @origin;
    -o-transform-origin: @origin;
    -ms-transform-origin: @origin;
    transform-origin: @origin;
}

/////////////////////
// Animation Mixin
/////////////////////

.animation(@name, @duration, @timing-function: ease, @delay: 0, @iteration-count: 1, @direction: normal, @fill-mode: forwards) {

    // webkit
    -webkit-animation-name: @name;
    -webkit-animation-duration: @duration;
    -webkit-animation-timing-function: @timing-function;
    -webkit-animation-delay: @delay;
    -webkit-animation-iteration-count: @iteration-count;
    -webkit-animation-direction: @direction;
    -webkit-animation-fill-mode: @fill-mode;

    // moz
    -moz-animation-name: @name;
    -moz-animation-duration: @duration;
    -moz-animation-timing-function: @timing-function;
    -moz-animation-delay: @delay;
    -moz-animation-iteration-count: @iteration-count;
    -moz-animation-direction: @direction;
    -moz-animation-fill-mode: @fill-mode;

    // IE
    -ms-animation-name: @name;
    -ms-animation-duration: @duration;
    -ms-animation-timing-function: @timing-function;
    -ms-animation-delay: @delay;
    -ms-animation-iteration-count: @iteration-count;
    -ms-animation-direction: @direction;
    -ms-animation-fill-mode: @fill-mode;

    // Opera
    -o-animation-name: @name;
    -o-animation-duration: @duration;
    -o-animation-timing-function: @timing-function;
    -o-animation-delay: @delay;
    -o-animation-iteration-count: @iteration-count;
    -o-animation-direction: @direction;
    -o-animation-fill-mode: @fill-mode;

    // CSS3
    animation-name: @name;
    animation-duration: @duration;
    animation-timing-function: @timing-function;
    animation-delay: @delay;
    animation-iteration-count: @iteration-count;
    animation-direction: @direction;
    animation-fill-mode: @fill-mode;
}

///////////////////
// CSS3 Filters
///////////////////

.grayscale() {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}


/////////////////////
// CSS3 Gradients
/////////////////////

// Linear gradient
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -moz-linear-gradient(@origin, @start, @stop);
    background-image: -o-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}

.quick-gradient (@origin: left, @alpha: 0.2) {
    background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
    background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}

// Radial gradient
.radial-gradient(@color-stop1, @color-stop2) {

    // fallback
    background-color: @color-stop1;
    //background: url(@fallback-img);
    background-position: center center;
    background-repeat: no-repeat;

    // Safari 4-5, Chrome 1-9
    //background: -webkit-gradient(radial, center center, 0, center center, 460, from(@color-stop1), to @color-stop2));
    background: -webkit-radial-gradient(circle, @color-stop1, @color-stop2); // Safari 5.1+, Chrome 10+
    background:    -moz-radial-gradient(circle, @color-stop1, @color-stop2); // Firefox 3.6+ *
    background:     -ms-radial-gradient(circle, @color-stop1, @color-stop2); // IE 10 *
    background:      -o-radial-gradient(circle, @color-stop1, @color-stop2); // Opera
    background:         radial-gradient(circle, @color-stop1, @color-stop2); // W3C Standard
}

.radial-gradient(@color-stop1, @color-stop2, @fallback-img) {

    // fallback
    background: url(@fallback-img);
    .radial-gradient(@color-stop1, @color-stop2);
}

/////////////////////
// Linear Gradient
/////////////////////

// Webkit Reflection
.reflect (@length: 50%, @opacity: 0.2){
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

///////////////////////
// Border Underlines
///////////////////////

.border-multiline(@border-width: 1px, @color: #000, @bottom: 2px) {

    background: linear-gradient(transparent 50%, @color 50%);
    background-repeat: repeat-x;
	background-size: 2*@border-width 2*@border-width;
	background-position: left 0px bottom @bottom;
	text-decoration: none;

    display: inline !important;
}

.border-multiline-color(@color) {
    background: linear-gradient(transparent 50%, @color 50%);
}

.no-border-multiline() {
    background: none;
}

.border-underline-color(@color) {
    &:after {
        border-bottom-color: @color;
    }
}

.border-underline-shadow(@bg-color: white) {

    text-shadow: 1px 0 @bg-color, 2px 0 @bg-color, -1px 0 @bg-color, -2px 0 @bg-color, 1px 1px @bg-color, 1px -1px @bg-color, 2px 1px @bg-color, 2px -1px @bg-color, -1px 1px @bg-color, -1px -1px @bg-color, -2px 1px @bg-color, -2px -1px @bg-color;
    //text-shadow: -@border-width 0 @bg-color, 0 @border-width @bg-color, @border-width 0 @bg-color, 0 -@border-width @bg-color;
    z-index: 0;

    &:after {
        z-index: -1;
    }
}

.no-border-underline-shadow() {
    text-shadow: none;
}

.border-underline(@bottom: 2px, @border-width: 1px, @border-style: solid, @margin-top: 2px, @height: 1em) {
    //line-height: 1.2;
    position: relative;
    .inline-block();
    text-decoration: none;

    &:after {
        border-bottom: @border-width @border-style;

        content: '';
        position: absolute;
        left: 0;
        .inline-block();

        width: 100%;
        //height: @height;
        //margin-top: @margin-top;
        bottom: @bottom;
    }

    //.no-generatedcontent & {
    .ie-lt8 & {
        &:after {
            display: none;
        }
        text-decoration: underline;
    }
}

.border-underline-transition(@prop: all, @time: 0.1s, @ease: ease-out) {
  &:after {
    .transition(@prop, @time, @ease);
  }
}

.no-border-underline() {
    text-shadow: none !important;
    &:after {
        display: none !important;
    }
}

////////////////////
// Form Functions
////////////////////

.placeholder-color(@color) {

    &::-webkit-input-placeholder { /* WebKit browsers */
        color:    @color;
    }
    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    @color;
    }
    &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:    @color;
    }
    &:-ms-input-placeholder { /* Internet Explorer 10+ */
        color:    @color;
    }
}

//////////////////////
// Arrows
//////////////////////

.arrow(@_, @width, @color) {
    .block(0, 0);
}

.arrow(top, @width, @color) {
    border-left: @width solid transparent;
    border-right: @width solid transparent;
    border-bottom: @width solid @color;
    border-top: none;
}

.arrow(right, @width, @color) {
    border-top: @width solid transparent;
    border-bottom: @width solid transparent;
    border-left: @width solid @color;
    border-right: none;
}

.arrow(bottom, @width, @color) {
    border-left: @width solid transparent;
    border-right: @width solid transparent;
    border-top: @width solid @color;
    border-bottom: none;
}

.arrow(left, @width, @color) {
    border-top: @width solid transparent;
    border-bottom: @width solid transparent;
    border-right: @width solid @color;
    border-left: none;
}

// User can define width and height
.arrow(@_, @width, @height, @color) {
    .block(0, 0);
}

.arrow(top, @width, @height, @color) {
    border-left: 0.5*@width solid transparent;
    border-right: 0.5*@width solid transparent;
    border-bottom: @height solid @color;
    border-top: none;
}

.arrow(right, @width, @height, @color) {
    border-top: 0.5*@height solid transparent;
    border-bottom: 0.5*@height solid transparent;
    border-left: @width solid @color;
    border-right: none;
}

.arrow(bottom, @width, @height, @color) {
    border-left: 0.5*@width solid transparent;
    border-right: 0.5*@width solid transparent;
    border-top: @height solid @color;
    border-bottom: none;
}

.arrow(left, @width, @height, @color) {
    border-top: 0.5*@height solid transparent;
    border-bottom: 0.5*@height solid transparent;
    border-right: @width solid @color;
    border-left: none;
}

// .arrow-link(@top: 5px, @color: @bright-blue, @hover-color: @dark-blue) {

//     padding-left: 10px;

//     &:before {
//         content:"";
//         position: absolute;
//         top: @top;
//         left: 0;

//         .arrow(4px, @color, right);
//         .transition(color, 0.1s, ease);
//     }

//     &:hover {
//         &:before {
//             border-left-color: @hover-color;
//         }
//     }
// }

///////////////////
// Sticky Footer
///////////////////

// .sticky-footer(@height, @change-ie: true) when (@change-ie = true) {

//     .sticky-footer(@height);

//     // IE styles
//     .ie #wrap {
//      display:table;height:100%;
//     }
//     // IE7 styles
//     .ie7 #wrap {
//      display: block;
//      height: auto;
//     }
// }

.sticky-footer(@height, @main-overflow: auto) {

    /*
    Sticky Footer Solution
    by Steve Hatcher
    http://stever.ca
    http://www.cssstickyfooter.com
    */

    * {margin:0;padding:0;}

    // must declare 0 margins on everything, also for main layout components use padding, not
    // vertical margins (top and bottom) to add spacing, else those margins get added to total height
    // and your footer gets pushed down a bit more, creating vertical scroll bars in the browser

    html, body {height: 100%;}

    #wrap {min-height: 100%;}

    // // IE styles
    // .ie #wrap {
    //  display:table;height:100%;
    // }
    // // IE7 styles
    // .ie7 #wrap {
    //  display: block;
    //  height: auto;
    // }

    #main {
        overflow: @main-overflow;
        padding-bottom: @height;
    }  // must be same height as the footer

    #footer {
        position: relative;
        margin-top: -@height; // negative value of footer height
        height: @height;
        clear:both;
    }

    // Opera Fix
    body:before {// thanks to Maleika (Kohoutec)
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;// thank you Erik J - negate effect of float
    }
}

// Remove Sticky Footer
.no-sticky-footer() {
    // Remove sticky footer

    #wrap {
        min-height: 0;
    }
    #main {
        padding-bottom: 0;
    }

    #footer {
        height: auto;
        margin-top: 0;
    }
}

.sticky-footer-html5(@height, @main-overflow: auto) {

    /*
    Sticky Footer Solution
    by Steve Hatcher
    http://stever.ca
    http://www.cssstickyfooter.com
    */

    * {margin:0;padding:0;}

    // must declare 0 margins on everything, also for main layout components use padding, not
    // vertical margins (top and bottom) to add spacing, else those margins get added to total height
    // and your footer gets pushed down a bit more, creating vertical scroll bars in the browser

    html, body {height: 100%;}

    #wrap {min-height: 100%;}

    // // IE styles
    // .ie #wrap {
    //  display:table;height:100%;
    // }
    // // IE7 styles
    // .ie7 #wrap {
    //  display: block;
    //  height: auto;
    // }

    main {
        overflow: @main-overflow;
        padding-bottom: @height;
    }  // must be same height as the footer

    footer {
        position: relative;
        margin-top: -@height; // negative value of footer height
        height: @height;
        clear:both;
    }

    // Opera Fix
    body:before {// thanks to Maleika (Kohoutec)
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;// thank you Erik J - negate effect of float
    }
}

// Remove Sticky Footer
.no-sticky-footer-html5() {
    // Remove sticky footer

    #wrap {
        min-height: 0;
    }
    main {
        padding-bottom: 0;
    }

    footer {
        height: auto;
        margin-top: 0;
    }
}