//// Namespaces //// 

.clearfix() { 
    zoom: 1; 
    &:before {  
        content: '';  
        display: block;  
    } 
    &:after {  
        content: '';  
        display: table;  
        clear: both;  
    } 
} 
  
//// Mixins //// 
  
// Borders 
.bordered (@color: #EEE, @width: 1px) { 
    border: @width solid @color; 
} 
.bordered-specific (@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE, @style: solid, @width: 1px) { 
    border-top: @width @style @width @top-color; 
    border-left: @width @style @left-color; 
    border-right: @width @style @right-color; 
    border-bottom: @width @style @bottom-color; 
} 
.border-radius (@radius: 0.313em) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    -ms-border-radius: @radius; 
    -o-border-radius: @radius; 
    border-radius: @radius; 
} 
.border-radius-specific (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { 
    -webkit-border-top-right-radius: @topright; 
    -webkit-border-bottom-right-radius: @bottomright; 
    -webkit-border-bottom-left-radius: @bottomleft; 
    -webkit-border-top-left-radius: @topleft; 
    -moz-border-radius-topright: @topright; 
    -moz-border-radius-bottomright: @bottomright; 
    -moz-border-radius-bottomleft: @bottomleft; 
    -moz-border-radius-topleft: @topleft; 
    border-top-right-radius: @topright; 
    border-bottom-right-radius: @bottomright; 
    border-bottom-left-radius: @bottomleft; 
    border-top-left-radius: @topleft; 
    .background-clip(padding-box); 
} 
  
// Backgrounds, Gradients, and Opacity 
.background-clip (@argument: padding-box) { 
    -moz-background-clip: @argument; 
    -webkit-background-clip: @argument; 
    background-clip: @argument; 
} 
.gradient-stops (@point: top, @stop1: 0%, @stop2: 8%, @startColor: #999, @endColor: #fff) { 
    background: @endColor; // Old browsers 
    background: -moz-linear-gradient(top, @startColor @stop1, @endColor @stop2); // FF3.6+  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1,@startColor), color-stop(@stop2,@endColor)); // Chrome,Safari4+  
    background: -webkit-linear-gradient(top, @startColor @stop1, @endColor @stop2); // Chrome10+,Safari5.1+ 
    background: -o-linear-gradient(top, @startColor @stop1, @endColor @stop2); // Opera 11.10+ 
    background: -ms-linear-gradient(top, @startColor @stop1, @endColor @stop2); // IE10+  
    background: linear-gradient(to bottom, @startColor @stop1, @endColor @stop2); // W3C  
} 
.gradient-l (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); 
    background: -webkit-linear-gradient(top, @startColor, @endColor); 
    background: -moz-linear-gradient(top, @startColor, @endColor); 
    background: -ms-linear-gradient(top, @startColor, @endColor); 
    background: -o-linear-gradient(top, @startColor, @endColor); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@endColor,@startColor)); 
} 
.gradient-l2 (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@startColor), color-stop(50%,@endColor), color-stop(100%,@startColor)); 
    background-image: -webkit-linear-gradient(top, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -moz-linear-gradient(top, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -ms-linear-gradient(top, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -o-linear-gradient(top, @startColor 0%, @endColor 50%, @endColor 100%); 
    background-image: linear-gradient(to bottom, @startColor 0%, @endColor 50%, @startColor 100%); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@endColor,@startColor)); 
} 
.gradient-h (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor)); 
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); 
    background-image: -moz-linear-gradient(left, @startColor, @endColor); 
    background-image: -ms-linear-gradient(left, @startColor, @endColor); 
    background-image: -o-linear-gradient(left, @startColor, @endColor); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@endColor,@startColor)); 
} 
.gradient-h2 (@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,@startColor), color-stop(50%,@endColor), color-stop(100%,@startColor)); 
    background-image: -webkit-linear-gradient(left, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -moz-linear-gradient(left, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -ms-linear-gradient(left, @startColor 0%, @endColor 50%, @startColor 100%); 
    background-image: -o-linear-gradient(left, @startColor 0%, @endColor 50%, @endColor 100%); 
    background-image: linear-gradient(to right, @startColor 0%, @endColor 50%, @startColor 100%); 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@endColor,@startColor)); 
} 
.opacity (@opacity: 0.5) { 
    -moz-opacity: @opacity; 
    -khtml-opacity: @opacity; 
    -webkit-opacity: @opacity; 
    opacity: @opacity; 
    @opperc: @opacity * 100; 
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha([email protected]{opperc})"; 
    filter: ~"alpha([email protected]{opperc})"; 
} 
  
// Multiple Backgrounds  
// Icons 
.social-ico(@x-pos: 0,@startColor: #e4e4e4, @endColor: #fff) { 
    background-color: @startColor; 
    background: url(/Content/images/sprites/sprite.png) @x-pos 0 no-repeat,  
                -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -webkit-linear-gradient(top, @startColor, @endColor); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -moz-linear-gradient(top, @startColor, @endColor); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -ms-linear-gradient(top, @startColor, @endColor); 
    background: url(/Content/images/sprite.png) @x-pos 0 no-repeat,  
                -o-linear-gradient(top, @startColor, @endColor); 
} 
  
// Center elements 
.center (@width: 80%) { 
    margin-left: auto; 
    margin-right: auto; 
    width: @width; 
} 
.img-align (@pos: center) { 
    text-align: @pos; 
} 
  
// Shadows 
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { 
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    -moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha); 
} 
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) { 
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    -moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
    box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha); 
} 
.box-shadow (@arguments) { 
    -webkit-box-shadow: @arguments; 
    -moz-box-shadow: @arguments; 
    box-shadow: @arguments; 
} 
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) { 
    text-shadow: @string; 
} 
  
// Motion 
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) { 
    -webkit-animation: @name @duration @delay @ease; 
    -moz-animation: @name @duration @delay @ease; 
    -ms-animation: @name @duration @delay @ease; 
} 
.transition (@duration: 0.3s, @ease: ease-in) { 
    -webkit-transition: all @duration @ease; 
    -moz-transition: all @duration @ease; 
    -o-transition: all @duration @ease; 
    transition: all @duration @ease; 
} 
.transition-duration (@duration: 0.2s) { 
    -moz-transition-duration: @duration; 
    -webkit-transition-duration: @duration; 
    -o-transition-duration: @duration; 
    transition-duration: @duration; 
} 
.rotate (@deg) { 
    -webkit-transform: rotate(@deg); 
    -moz-transform: rotate(@deg); 
    -o-transform: rotate(@deg); 
    transform: rotate(@deg); 
}  
  
// Misc. 
.box-sizing (@type: border-box) { 
    -ms-box-sizing: @type; 
    -moz-box-sizing: @type; 
    -webkit-box-sizing: @type; 
    box-sizing: @type; 
} 
.user-select (@argument: none) { 
    -webkit-user-select: @argument; 
    -moz-user-select: @argument; 
    -ms-user-select: @argument; 
    user-select: @argument; 
}