aadded gui_ck_fw

js/gui_ck_fw/gui.less

@@ -0,0 +1,592 @@
+/*
+ * www.g-u-i.net
+ */
+
+// =
+// =
+// =
+// =
+// =
+// ===== TYPOGRAHIE ====================================================================================================== 
+ 
+.8(){font-size:8px;}
+.9(){font-size:9px;}
+.10(){font-size:10px;}
+.11(){font-size:10px;}
+.12(){font-size:12px;}
+.14(){font-size:14px;}
+.16(){font-size:16px;}
+.18(){font-size:18px;}
+.20(){font-size:20px;}
+.24(){font-size:24px;}
+.28(){font-size:24px;}
+.30(){font-size:30px;}
+.36(){font-size:36px;}
+.48(){font-size:48px;}
+.60(){font-size:60px;}
+.72(){font-size:72px;}
+
+.regular(){font-weight:normal;}
+.bold(){font-weight:bold;}
+.100(){font-weight:100;}
+.200(){font-weight:200;}
+.300(){font-weight:300;}
+.400(){font-weight:400;}
+.500(){font-weight:500;}
+.600(){font-weight:600;}
+.700(){font-weight:700;}
+.800(){font-weight:800;}
+.900(){font-weight:900;}
+
+.upper(){text-transform: uppercase;}
+.italic(){font-style:italic;}
+.normal(){font-style: normal;}
+
+.hyphens(@value: auto)
+{
+  -webkit-hyphens:@value;
+     -moz-hyphens:@value;
+      -ms-hyphens:@value;
+       -o-hyphens:@value;
+          hyphens:@value;
+}
+.font-size(@value: 1em,@lineheight:1.3em)
+{
+  font-size:@value;
+  line-height:@lineheight;
+}
+
+@green:#17942A;
+@red:#E60000;
+
+// =
+// =
+// =
+// =
+// =
+// ===== SHORTCUTS ======================================================================================================= 
+
+// padding
+.p(@p){ padding:@arguments; }
+.p(@v, @h){ padding:@arguments; }
+.p(@t, @l, @b, @l){ padding:@arguments; }
+
+.pt(@p){ padding-top:@p; }
+.pr(@p){ padding-right:@p; }
+.pb(@p){ padding-bottom:@p; }
+.pl(@p){ padding-left:@p; }
+
+// margin
+.m(@p){ margin:@arguments; }
+.m(@v, @h){ margin:@arguments; }
+.m(@t, @l, @b, @l){ margin:@arguments; }
+
+.mt(@m){ margin-top:@m; }
+.mr(@m){ margin-right:@m; }
+.mb(@m){ margin-bottom:@m; }
+.ml(@m){ margin-left:@m; }
+
+.0(){ margin:0; padding:0; }
+
+// border
+.b(@b){ border: @b; }
+.b(@size, @color){ border: @size solid @color; }
+
+.bt(@b){ border-top: @b;}
+.bt(@size, @color){border-top: @size solid @color;}
+
+.br(@b){ border-right: @b;}
+.br(@size, @color){border-right: @size solid @color;}
+
+.bb(@b){ border-bottom: @b;}
+.bb(@size, @color){border-bottom: @size solid @color;}
+
+.bl(@b){ border-left: @b;}
+.bl(@size, @color){border-left: @size solid @color;}
+
+.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE)
+{
+  border-top   : solid 1px @top-color;
+  border-right : solid 1px @right-color;
+  border-bottom: solid 1px @bottom-color;
+  border-left  : solid 1px @left-color;
+}
+
+// Background
+.bg(@color, @url, @repeat, @scrollfixed, @pos){background: @arguments;}
+.bgc(@color){background-color: @arguments;}
+.bkgd(@params){background: @arguments;}
+.bkgdc(@color){.bgc(@arguments);}
+
+.bgca(@r, @g, @b, @a){
+  background-color: rgb(@r, @g, @b); // ie8
+  background-color: rgba(@r, @g, @b, @a);
+  *background-color: rgb(@r, @g, @b); // ie7 
+};
+
+// Selection
+.selection(@bgcolor,@color)
+{
+    &::selection {
+    	background:@bgcolor;
+    	color:@color;
+    }
+    &::-moz-selection {
+    	background:@bgcolor;
+    	color:@color;
+    }
+    &::-webkit-selection {
+    	background:@bgcolor;
+    	color:@color;
+    } 
+}
+
+// Colors
+.color(@value)
+{
+  &,
+  & *{color:@value;}
+}
+
+// Opacity
+.opacity(@opacity: 0.5)
+{
+  -webkit-opacity: @opacity;
+   -khtml-opacity: @opacity;
+     -moz-opacity: @opacity;
+          opacity: @opacity;
+}
+
+// size
+.size(@height, @width) {
+  width: @width;
+  height: @height;
+}
+.square(@size) {
+  .size(@size, @size);
+}
+
+// center 
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// =
+// =
+// =
+// =
+// =
+// ===== DISPLAY UTILS =================================================================================================== 
+
+// Inline blocks
+.inlineblock(@align:top)
+{
+    display:moz-inline-stack;
+    display:inline-block;
+    vertical-align:@align;
+    zoom:1;
+    *display:inline;
+    .ie7 &, .ie8 &{display:block;float:left;}
+}
+
+.db(){display:block;}
+.dbn(){display:none;}
+.dib(){.inlineblock;}
+.dib(@align){.inlineblock(@align);}
+
+.float(@align:left){
+  .db; float:@align;
+}
+
+.abs(@value) { position:absolute; top:@value; left:@value; bottom:@value; right:@value; }
+.abs(@top, @left) { position:absolute; top:@top; left:@left; }
+.abs(@top, @right, @bottom, @left) { position:absolute; top:@top; left:@left; bottom:@bottom; right:@right; };
+
+.fix(@value) { position:fixed; top:@value; left:@value; bottom:@value; right:@value; }
+.fix(@top, @left) { position:fixed; top:@top; left:@left; }
+.fix(@top, @right, @bottom, @left) { position:fixed; top:@top; left:@left; bottom:@bottom; right:@right; };
+
+// Columns system
+@g:0;
+.g() { width:@g; }
+.col(@col,@coltotal:@n,@gutter:@g) {
+  width: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + ((@col - 1) * @gutter);
+}
+.inside-left(@col,@coltotal:@n,@gutter:@g) {
+  padding-left: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + (@col * @gutter);
+}
+.inside-right(@col,@coltotal:@n,@gutter:@g) {
+  padding-right: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + (@col * @gutter);
+}
+
+
+// Vertical alignement
+//
+//    ___ .align-child()
+//   |
+//   |  Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct). 
+//   |
+//   |  1 param   : @vertical-align
+//
+.align-child(@align:middle){
+  &:before { content: ""; .dib(middle); overflow: hidden; visibility: hidden; width: 0; height: 100%; }
+  & > * { .dib(@align); }
+}
+
+.clear-after(){
+  &:after{clear:both;content:'';display:block;height:0px;overflow:hidden;visibility:hidden;width:0px;}
+}
+
+// For clearing floats like a boss h5bp.com/q
+.clearix() {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    // Fixes Opera/contenteditable bug:
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// =
+// =
+// =
+// =
+// =
+// ===== CSS3 ============================================================================================================ 
+
+// Gradients
+.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF)
+{
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, @start),
+                               color-stop(1, @stop));
+  background: -ms-linear-gradient(bottom,
+                                  @start,
+                                  @stop);
+  background: -moz-linear-gradient(center bottom,
+                                   @start 0%,
+                                   @stop 100%);
+}
+.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255)
+{
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, rgb(@start,@start,@start)),
+                               color-stop(1, rgb(@stop,@stop,@stop)));
+  background: -ms-linear-gradient(bottom,
+                                  rgb(@start,@start,@start) 0%,
+                                  rgb(@start,@start,@start) 100%);
+  background: -moz-linear-gradient(center bottom,
+                                   rgb(@start,@start,@start) 0%,
+                                   rgb(@stop,@stop,@stop) 100%);
+}
+
+// Shadows
+//
+//    ___ .box-shadow()
+//   |
+//   |  Ombré extérieur.
+//   |
+//   |  1 param   : @blur
+//   |  2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px
+//   
+//    ___ .inset-shadow()
+//   |
+//   |  Ombré intérieur.
+//   |
+//   |  1 param   : @blur
+//   |  2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px
+//
+.box-shadow(@blur: 9px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
+  -webkit-box-shadow: 0 0 @blur #000;
+     -moz-box-shadow: 0 0 @blur #000;
+      -ms-box-shadow: 0 0 @blur #000;
+          box-shadow: 0 0 @blur #000;
+}
+.box-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=@{x}, OffY=@{y}, Color='@{color}')";
+  -webkit-box-shadow: @x @y @blur @spread @color;
+     -moz-box-shadow: @x @y @blur @spread @color;
+      -ms-box-shadow: @x @y @blur @spread @color;
+          box-shadow: @x @y @blur @spread @color;
+}
+.inset-shadow(@blur: 9px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
+  -webkit-box-shadow: 0 0 @blur #000 inset;
+     -moz-box-shadow: 0 0 @blur #000 inset;
+      -ms-box-shadow: 0 0 @blur #000 inset;
+          box-shadow: 0 0 @blur #000 inset;
+}
+.inset-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='@{color}')";
+  -webkit-box-shadow: @x @y @blur @spread @color inset;
+     -moz-box-shadow: @x @y @blur @spread @color inset;
+      -ms-box-shadow: @x @y @blur @spread @color inset;
+          box-shadow: @x @y @blur @spread @color inset;
+}
+
+.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1)
+{
+  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+}
+
+// Border radius
+.rounded(@radius: 2px)
+{
+  -webkit-border-radius: @radius;
+     -moz-border-radius: @radius;
+          border-radius: @radius;
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box; 
+}
+.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0)
+{
+	-webkit-border-radius:@arguments;
+	   -moz-border-radius:@arguments;
+	        border-radius:@arguments;
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box; 
+}
+
+// transitions
+.transition-simply-prefix(@string) {
+  -webkit-transition: @string;
+  -moz-transition: @string;
+  -o-transition: @string;
+  transition: @string;
+}
+
+//
+//    ___ .transition()
+//   |
+//   |  1 param   : @property
+//   |  2 params  : @property / @duration
+//   |  3+ params : @property / @duration / @transitiondelay:0s , @timingfunction:ease-out
+//   
+//    ___ .transitions()
+//   |
+//   |  Permet de fixer des paramètres spécifique par propriétés, exemple:
+//   |  
+//   |  .transitions(
+//   |     'height , padding  , margin , box-shadow',
+//   |     '.5s    , .2s      , .2s    , .2s',
+//   |     '0s     , 0s       , 0s     , .3s',
+//   |     'linear , ease-out , linear , ease-out'
+//   |  );
+//
+.transition(@property: all)
+{
+  -webkit-transition: @property;
+     -moz-transition: @property;
+       -o-transition: @property;
+          transition: @property;
+}
+.transition(@property, @duration)
+{
+  -webkit-transition: @arguments;
+     -moz-transition: @arguments;
+       -o-transition: @arguments;
+          transition: @arguments;
+}
+.transition(@property, @duration, @transitiondelay, @timingfunction:ease-out)
+{
+  -webkit-transition: @arguments;
+     -moz-transition: @arguments;
+       -o-transition: @arguments;
+          transition: @arguments;
+}
+.transitions(@property: all, @duration:0s, @transitiondelay:0s, @timingfunction:ease-out)
+{
+  -webkit-transition-property       :~'@{property}';
+  -webkit-transition-duration       :~'@{duration}';
+  -webkit-transition-delay          :~'@{transitiondelay}';
+  -webkit-transition-timing-function:~'@{timingfunction}';
+     -moz-transition-property       :~'@{property}';
+     -moz-transition-duration       :~'@{duration}';
+     -moz-transition-delay          :~'@{transitiondelay}';
+     -moz-transition-timing-function:~'@{timingfunction}';
+       -o-transition-property       :~'@{property}';
+       -o-transition-duration       :~'@{duration}';
+       -o-transition-delay          :~'@{transitiondelay}';
+       -o-transition-timing-function:~'@{timingfunction}';
+          transition-property       :~'@{property}';
+          transition-duration       :~'@{duration}';
+          transition-delay          :~'@{transitiondelay}';
+          transition-timing-function:~'@{timingfunction}';
+}
+
+.transitions-duration(@duration: 0s)
+{
+  -webkit-transition-duration: ~'@{duration}';
+     -moz-transition-duration: ~'@{duration}';
+       -o-transition-duration: ~'@{duration}';
+          transition-duration: ~'@{duration}';
+}
+
+.transition-duration(@duration: 0.2s)
+{
+  -webkit-transition-duration: @duration;
+     -moz-transition-duration: @duration;
+       -o-transition-duration: @duration;
+          transition-duration: @duration;
+}
+
+.transitions-delay(@delay: 0s)
+{
+  -webkit-transition-delay: ~'@{delay}';
+     -moz-transition-delay: ~'@{delay}';
+       -o-transition-delay: ~'@{delay}';
+          transition-delay: ~'@{delay}';
+}
+
+// Rotate
+//
+//    ___ .rotation()
+//   |
+//   |  1 param   : @degree
+//   
+//    ___ .rotate()
+//   |  
+//   |  Tentative de compatibilté étendue (fonctionne uniquement pour 0, 90, 180 ou 270 degrés).
+//   |  
+//   |  1 param  : @degree
+//   |  3 params : @degree / @originX / @originY
+//
+.rotation(@deg:5deg)
+{
+  -webkit-transform: rotate(@deg);
+     -moz-transform: rotate(@deg);
+          transform: rotate(@deg);
+}
+.rotate(@value, @originX:0%, @originY:0%, @unit:'deg')
+{
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / @value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270
+  -webkit-transform: rotate(~"@{value}@{unit}"); // ~"@{value}@{unit}" rather than @value@unit remove the spaces between value and unit.
+     -moz-transform: rotate(~"@{value}@{unit}");
+      -ms-transform: rotate(~"@{value}@{unit}");
+       -o-transform: rotate(~"@{value}@{unit}");
+          transform: rotate(~"@{value}@{unit}");
+  -webkit-transform-origin:@originX @originY;
+     -moz-transform-origin:@originX @originY;
+      -ms-transform-origin:@originX @originY;
+       -o-transform-origin:@originX @originY;
+          transform-origin:@originX @originY;
+}
+
+// Scale
+.scale(@ratio:1.5)
+{
+  -webkit-transform:scale(@ratio);
+     -moz-transform:scale(@ratio);
+          transform:scale(@ratio);
+}
+
+// Translate
+.translate(@x:0, @y:0)
+{
+  -webkit-transform: translate(@x, @y);
+     -moz-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y);
+       -o-transform: translate(@x, @y);
+          transform: translate(@x, @y);
+}
+
+// Columns
+.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px)
+{
+  -webkit-column-width     : @colwidth;
+  -webkit-column-count     : @colcount;
+  -webkit-column-gap       : @colgap;
+  -webkit-column-rule-color: @columnRuleColor;
+  -webkit-column-rule-style: @columnRuleStyle;
+  -webkit-column-rule-width: @columnRuleWidth;
+     -moz-column-width     : @colwidth;
+     -moz-column-count     : @colcount;
+     -moz-column-gap       : @colgap;
+     -moz-column-rule-color: @columnRuleColor;
+     -moz-column-rule-style: @columnRuleStyle;
+     -moz-column-rule-width: @columnRuleWidth;
+          column-width     : @colwidth;
+          column-count     : @colcount;
+          column-gap       : @colgap;
+          column-rule-color: @columnRuleColor;
+          column-rule-style: @columnRuleStyle;
+          column-rule-width: @columnRuleWidth;
+}
+
+.edit-link(@bc:#CCFF2F,@c:#333)
+{
+  .dib;
+  background-color:@bc;
+  border:1px solid;
+  border-color:darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),20%);
+  .rounded;
+  color: @c;
+  cursor: pointer;
+  .font-size(.8em,1em);
+  font-weight: normal;
+  padding: 0.25em 0.75em;
+  margin-top:.5em;
+  
+  &:hover{background-color:darken(@bc, 20%);}
+  &:active{
+    text-shadow: 0 1px 0 lighten(@bc,5%);
+    background-color:darken(@bc, 20%);
+    //.inset-shadow(0,0,2px,darken(@bc,60));
+  }
+}
+
+.loader(@fc:#000,@bc:#ccc,@h:8px,@radius:0px)
+{
+  // Safari/chrome
+  &::-webkit-progress-bar{background-color:@bc;.rounded(@radius);}
+  &::-webkit-progress-value{background-color:@fc;.rounded(@radius);}
+  // Firefox
+  &{background-color:@bc;.rounded(@radius);height:@h;}
+  &::-moz-progress-bar{background-color:@fc;.rounded(@radius);}
+}
+
+// =
+// =
+// =
+// =
+// =
+// ===== RETINA ========================================================================================================== 
+
+// retina.less
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+.at2x(@path, @w: auto, @h: auto) {
+  background-image: url(@path);
+  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
+
+  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
+    background-image: url(@at2x_path);
+    background-size: @w @h;
+  }
+}

js/gui_ck_fw/gui.less.orig

@@ -0,0 +1,636 @@
+<<<<<<< HEAD
+/**
+* www.g-u-i.net
+*/
+
+/** font */
+
+.8{font-size:8px;}
+.9{font-size:9px;}
+.10{font-size:10px;}
+.11{font-size:10px;}
+.12{font-size:12px;}
+.14{font-size:14px;}
+.16{font-size:16px;}
+.18{font-size:18px;}
+.20{font-size:18px;}
+.24{font-size:24px;}
+.28{font-size:28px;}
+.30{font-size:30px;}
+.36{font-size:36px;}
+.48{font-size:48px;}
+.60{font-size:60px;}
+.72{font-size:72px;}
+
+.regular{font-weight:normal;}
+.bold{font-weight:bold;}
+.100{font-weight:100;}
+.300{font-weight:300;}
+.500{font-weight:500;}
+.700{font-weight:700;}
+.900{font-weight:900;}
+
+.upper{text-transform: uppercase;}
+.italic{font-style:italic;}
+.normal{font-style: normal;}
+
+
+/** shortcuts */
+=======
+/*
+ * www.g-u-i.net
+ */
+
+// =
+// =
+// =
+// =
+// =
+// ===== TYPOGRAHIE ====================================================================================================== 
+ 
+.8(){font-size:8px;}
+.9(){font-size:9px;}
+.10(){font-size:10px;}
+.11(){font-size:10px;}
+.12(){font-size:12px;}
+.14(){font-size:14px;}
+.16(){font-size:16px;}
+.18(){font-size:18px;}
+.24(){font-size:24px;}
+.30(){font-size:30px;}
+.36(){font-size:36px;}
+.48(){font-size:48px;}
+.60(){font-size:60px;}
+.72(){font-size:72px;}
+
+.regular(){font-weight:normal;}
+.bold(){font-weight:bold;}
+.100(){font-weight:100;}
+.300(){font-weight:300;}
+.500(){font-weight:500;}
+.700(){font-weight:700;}
+.900(){font-weight:900;}
+
+.upper(){text-transform: uppercase;}
+.italic(){font-style:italic;}
+.normal(){font-style: normal;}
+
+.hyphens(@value: auto)
+{
+  -webkit-hyphens:@value;
+     -moz-hyphens:@value;
+      -ms-hyphens:@value;
+       -o-hyphens:@value;
+          hyphens:@value;
+}
+.font-size(@value: 1em,@lineheight:1.3em)
+{
+  font-size:@value;
+  line-height:@lineheight;
+}
+
+@green:#17942A;
+@red:#E60000;
+
+// =
+// =
+// =
+// =
+// =
+// ===== SHORTCUTS ======================================================================================================= 
+>>>>>>> bitbucket/master
+
+// padding
+.p(@p){ padding:@arguments; }
+.p(@v, @h){ padding:@arguments; }
+.p(@t, @l, @b, @l){ padding:@arguments; }
+
+.pt(@p){ padding-top:@p; }
+.pr(@p){ padding-right:@p; }
+.pb(@p){ padding-bottom:@p; }
+.pl(@p){ padding-left:@p; }
+
+// margin
+.m(@p){ margin:@arguments; }
+.m(@v, @h){ margin:@arguments; }
+.m(@t, @l, @b, @l){ margin:@arguments; }
+
+.mt(@m){ margin-top:@m; }
+.mr(@m){ margin-right:@m; }
+.mb(@m){ margin-bottom:@m; }
+.ml(@m){ margin-left:@m; }
+
+.0(){ margin:0; padding:0; }
+
+// border
+.b(@b){ border: @b; }
+.b(@size, @color){ border: @size solid @color; }
+
+.bt(@b){ border-top: @b;}
+.bt(@size, @color){border-top: @size solid @color;}
+
+.br(@b){ border-right: @b;}
+.br(@size, @color){border-right: @size solid @color;}
+
+.bb(@b){ border-bottom: @b;}
+.bb(@size, @color){border-bottom: @size solid @color;}
+
+.bl(@b){ border-left: @b;}
+.bl(@size, @color){border-left: @size solid @color;}
+
+.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE)
+{
+  border-top   : solid 1px @top-color;
+  border-right : solid 1px @right-color;
+  border-bottom: solid 1px @bottom-color;
+  border-left  : solid 1px @left-color;
+}
+
+// Background
+.bg(@color, @url, @repeat, @scrollfixed, @pos){background: @arguments;}
+.bgc(@color){background-color: @arguments;}
+.bkgd(@params){background: @arguments;}
+.bkgdc(@color){.bgc(@arguments);}
+
+<<<<<<< HEAD
+// opacity
+.opacity(@opacity: 0.5) {
+  -moz-opacity: @opacity;
+  -khtml-opacity: @opacity;
+  -webkit-opacity: @opacity;
+  opacity: @opacity;
+}
+
+/** Inline blocks */
+.inlineblock(){
+		display:moz-inline-stack;
+		display:inline-block;
+		vertical-align:top;
+		zoom:1;
+		*display:inline;
+	/*	margin-right:-.25em;*/
+		.ie7 &{display:inline;}
+}
+
+
+// selection style
+.selection(@bgcolor,@color){
+=======
+// Selection
+.selection(@bgcolor,@color)
+{
+>>>>>>> bitbucket/master
+    &::selection {
+    	background:@bgcolor;
+    	color:@color;
+    }
+    &::-moz-selection {
+    	background:@bgcolor;
+    	color:@color;
+    }
+    &::-webkit-selection {
+    	background:@bgcolor;
+    	color:@color;
+    } 
+}
+
+// Colors
+.color(@value)
+{
+  &,
+  & *{color:@value;}
+}
+
+// Opacity
+.opacity(@opacity: 0.5)
+{
+  -webkit-opacity: @opacity;
+   -khtml-opacity: @opacity;
+     -moz-opacity: @opacity;
+          opacity: @opacity;
+}
+
+// size
+.size(@height, @width) {
+  width: @width;
+  height: @height;
+}
+.square(@size) {
+  .size(@size, @size);
+}
+
+// center 
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// =
+// =
+// =
+// =
+// =
+// ===== DISPLAY UTILS =================================================================================================== 
+
+// Inline blocks
+.inlineblock(@align:top)
+{
+    display:moz-inline-stack;
+    display:inline-block;
+    vertical-align:@align;
+    zoom:1;
+    *display:inline;
+    .ie7 &, .ie8 &{display:block;float:left;}
+}
+
+.db(){display:block;}
+.dib(){.inlineblock;}
+.dib(@align){.inlineblock(@align);}
+
+// Vertical alignement
+//
+//    ___ .align-child()
+//   |
+//   |  Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct). 
+//   |
+//   |  1 param   : @vertical-align
+//
+.align-child(@align:middle){
+  &:before { content: ""; .dib(middle); overflow: hidden; visibility: hidden; width: 0; height: 100%; }
+  & > * { .dib(@align); }
+}
+
+.clear-after(){
+  &:after{clear:both;content:'';display:block;height:0px;overflow:hidden;visibility:hidden;width:0px;}
+}
+
+// For clearing floats like a boss h5bp.com/q
+.clearix() {
+  *zoom: 1;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+    // Fixes Opera/contenteditable bug:
+    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
+    line-height: 0;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// =
+// =
+// =
+// =
+// =
+// ===== CSS3 ============================================================================================================ 
+
+// Gradients
+.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF)
+{
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, @start),
+                               color-stop(1, @stop));
+  background: -ms-linear-gradient(bottom,
+                                  @start,
+                                  @stop);
+  background: -moz-linear-gradient(center bottom,
+                                   @start 0%,
+                                   @stop 100%);
+}
+.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255)
+{
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, rgb(@start,@start,@start)),
+                               color-stop(1, rgb(@stop,@stop,@stop)));
+  background: -ms-linear-gradient(bottom,
+                                  rgb(@start,@start,@start) 0%,
+                                  rgb(@start,@start,@start) 100%);
+  background: -moz-linear-gradient(center bottom,
+                                   rgb(@start,@start,@start) 0%,
+                                   rgb(@stop,@stop,@stop) 100%);
+}
+
+// Shadows
+//
+//    ___ .box-shadow()
+//   |
+//   |  Ombré extérieur.
+//   |
+//   |  1 param   : @blur
+//   |  2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px
+//   
+//    ___ .inset-shadow()
+//   |
+//   |  Ombré intérieur.
+//   |
+//   |  1 param   : @blur
+//   |  2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px
+//
+.box-shadow(@blur: 9px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
+  -webkit-box-shadow: 0 0 @blur #000;
+     -moz-box-shadow: 0 0 @blur #000;
+      -ms-box-shadow: 0 0 @blur #000;
+          box-shadow: 0 0 @blur #000;
+}
+.box-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=@{x}, OffY=@{y}, Color='@{color}')";
+  -webkit-box-shadow: @x @y @blur @spread @color;
+     -moz-box-shadow: @x @y @blur @spread @color;
+      -ms-box-shadow: @x @y @blur @spread @color;
+          box-shadow: @x @y @blur @spread @color;
+}
+.inset-shadow(@blur: 9px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
+  -webkit-box-shadow: 0 0 @blur #000 inset;
+     -moz-box-shadow: 0 0 @blur #000 inset;
+      -ms-box-shadow: 0 0 @blur #000 inset;
+          box-shadow: 0 0 @blur #000 inset;
+}
+.inset-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px)
+{
+  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}');
+  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='@{color}')";
+  -webkit-box-shadow: @x @y @blur @spread @color inset;
+     -moz-box-shadow: @x @y @blur @spread @color inset;
+      -ms-box-shadow: @x @y @blur @spread @color inset;
+          box-shadow: @x @y @blur @spread @color inset;
+}
+
+// Border radius
+.rounded(@radius: 2px)
+{
+  -webkit-border-radius: @radius;
+     -moz-border-radius: @radius;
+          border-radius: @radius;
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box; 
+}
+.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0)
+{
+	-webkit-border-radius:@arguments;
+	   -moz-border-radius:@arguments;
+	        border-radius:@arguments;
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box; 
+}
+
+<<<<<<< HEAD
+// transitions
+.transition-simply-prefix(@string) {
+  -webkit-transition: @string;
+  -moz-transition: @string;
+  -o-transition: @string;
+  transition: @string;
+=======
+// Transition
+//
+//    ___ .transition()
+//   |
+//   |  1 param   : @property
+//   |  2 params  : @property / @duration
+//   |  3+ params : @property / @duration / @transitiondelay:0s , @timingfunction:ease-out
+//   
+//    ___ .transitions()
+//   |
+//   |  Permet de fixer des paramètres spécifique par propriétés, exemple:
+//   |  
+//   |  .transitions(
+//   |     'height , padding  , margin , box-shadow',
+//   |     '.5s    , .2s      , .2s    , .2s',
+//   |     '0s     , 0s       , 0s     , .3s',
+//   |     'linear , ease-out , linear , ease-out'
+//   |  );
+//
+.transition(@property: all)
+{
+  -webkit-transition: @property;
+     -moz-transition: @property;
+       -o-transition: @property;
+          transition: @property;
+>>>>>>> bitbucket/master
+}
+.transition(@property, @duration)
+{
+  -webkit-transition: @arguments;
+     -moz-transition: @arguments;
+       -o-transition: @arguments;
+          transition: @arguments;
+}
+.transition(@property, @duration, @transitiondelay, @timingfunction:ease-out)
+{
+  -webkit-transition: @arguments;
+     -moz-transition: @arguments;
+       -o-transition: @arguments;
+          transition: @arguments;
+}
+.transitions(@property: all, @duration:0s, @transitiondelay:0s, @timingfunction:ease-out)
+{
+  -webkit-transition-property       :~'@{property}';
+  -webkit-transition-duration       :~'@{duration}';
+  -webkit-transition-delay          :~'@{transitiondelay}';
+  -webkit-transition-timing-function:~'@{timingfunction}';
+     -moz-transition-property       :~'@{property}';
+     -moz-transition-duration       :~'@{duration}';
+     -moz-transition-delay          :~'@{transitiondelay}';
+     -moz-transition-timing-function:~'@{timingfunction}';
+       -o-transition-property       :~'@{property}';
+       -o-transition-duration       :~'@{duration}';
+       -o-transition-delay          :~'@{transitiondelay}';
+       -o-transition-timing-function:~'@{timingfunction}';
+          transition-property       :~'@{property}';
+          transition-duration       :~'@{duration}';
+          transition-delay          :~'@{transitiondelay}';
+          transition-timing-function:~'@{timingfunction}';
+}
+<<<<<<< HEAD
+.transition(@p, @d, @e, @de) {
+  -webkit-transition: @arguments;
+  -moz-transition: @arguments;
+  -o-transition: @arguments;
+  transition: @arguments;
+}
+.transition-delay(@delay: 0s) {
+  -webkit-transition-delay: @delay;
+  -moz-transition-delay: @delay;
+  -o-transition-delay: @delay;
+  transition-delay: @delay;
+}
+// rotation
+.rotation(@deg:5deg){
+=======
+
+.transitions-duration(@duration: 0s)
+{
+  -webkit-transition-duration: ~'@{duration}';
+     -moz-transition-duration: ~'@{duration}';
+       -o-transition-duration: ~'@{duration}';
+          transition-duration: ~'@{duration}';
+}
+
+.transition-duration(@duration: 0.2s)
+{
+  -webkit-transition-duration: @duration;
+     -moz-transition-duration: @duration;
+       -o-transition-duration: @duration;
+          transition-duration: @duration;
+}
+
+// Rotate
+//
+//    ___ .rotation()
+//   |
+//   |  1 param   : @degree
+//   
+//    ___ .rotate()
+//   |  
+//   |  Tentative de compatibilté étendue (fonctionne uniquement pour 0, 90, 180 ou 270 degrés).
+//   |  
+//   |  1 param  : @degree
+//   |  3 params : @degree / @originX / @originY
+//
+.rotation(@deg:5deg)
+{
+>>>>>>> bitbucket/master
+  -webkit-transform: rotate(@deg);
+     -moz-transform: rotate(@deg);
+          transform: rotate(@deg);
+}
+.rotate(@value, @originX:0%, @originY:0%, @unit:'deg')
+{
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / @value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270
+  -webkit-transform: rotate(~"@{value}@{unit}"); // ~"@{value}@{unit}" rather than @value@unit remove the spaces between value and unit.
+     -moz-transform: rotate(~"@{value}@{unit}");
+      -ms-transform: rotate(~"@{value}@{unit}");
+       -o-transform: rotate(~"@{value}@{unit}");
+          transform: rotate(~"@{value}@{unit}");
+  -webkit-transform-origin:@originX @originY;
+     -moz-transform-origin:@originX @originY;
+      -ms-transform-origin:@originX @originY;
+       -o-transform-origin:@originX @originY;
+          transform-origin:@originX @originY;
+}
+
+// Scale
+.scale(@ratio:1.5)
+{
+  -webkit-transform:scale(@ratio);
+<<<<<<< HEAD
+  -moz-transform:scale(@ratio);
+  transform:scale(@ratio);
+}
+
+// columns
+.columns(@colwidth: 250px) {
+  -moz-column-width: @colwidth;
+  -webkit-column-width: @colwidth;
+  column-width: @colwidth;
+}
+
+.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
+  -moz-column-width: @colwidth;
+  -moz-column-count: @colcount;
+  -moz-column-gap: @colgap;
+  -moz-column-rule-color: @columnRuleColor;
+  -moz-column-rule-style: @columnRuleStyle;
+  -moz-column-rule-width: @columnRuleWidth;
+  -webkit-column-width: @colwidth;
+  -webkit-column-count: @colcount;
+  -webkit-column-gap: @colgap;
+=======
+     -moz-transform:scale(@ratio);
+          transform:scale(@ratio);
+}
+
+// Translate
+.translate(@x:0, @y:0)
+{
+  -webkit-transform: translate(@x, @y);
+     -moz-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y);
+       -o-transform: translate(@x, @y);
+          transform: translate(@x, @y);
+}
+
+// Columns
+.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px)
+{
+  -webkit-column-width     : @colwidth;
+  -webkit-column-count     : @colcount;
+  -webkit-column-gap       : @colgap;
+>>>>>>> bitbucket/master
+  -webkit-column-rule-color: @columnRuleColor;
+  -webkit-column-rule-style: @columnRuleStyle;
+  -webkit-column-rule-width: @columnRuleWidth;
+     -moz-column-width     : @colwidth;
+     -moz-column-count     : @colcount;
+     -moz-column-gap       : @colgap;
+     -moz-column-rule-color: @columnRuleColor;
+     -moz-column-rule-style: @columnRuleStyle;
+     -moz-column-rule-width: @columnRuleWidth;
+          column-width     : @colwidth;
+          column-count     : @colcount;
+          column-gap       : @colgap;
+          column-rule-color: @columnRuleColor;
+          column-rule-style: @columnRuleStyle;
+          column-rule-width: @columnRuleWidth;
+}
+
+.edit-link(@bc:#CCFF2F,@c:#333)
+{
+  .dib;
+  background-color:@bc;
+  border:1px solid;
+  border-color:darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),20%);
+  .rounded;
+  color: @c;
+  cursor: pointer;
+  .font-size(.8em,1em);
+  font-weight: normal;
+  padding: 0.25em 0.75em;
+  margin-top:.5em;
+  
+  &:hover{background-color:darken(@bc, 20%);}
+  &:active{
+    text-shadow: 0 1px 0 lighten(@bc,5%);
+    background-color:darken(@bc, 20%);
+    //.inset-shadow(0,0,2px,darken(@bc,60));
+  }
+}
+
+// =
+// =
+// =
+// =
+// =
+// ===== RETINA ========================================================================================================== 
+
+// retina.less
+// A helper mixin for applying high-resolution background images (http://www.retinajs.com)
+.at2x(@path, @w: auto, @h: auto) {
+  background-image: url(@path);
+  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
+
+  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
+    background-image: url(@at2x_path);
+    background-size: @w @h;
+  }  
+}