@developer-mode: true;

@grid-total-width-micro: 360px;
@grid-column-width-micro: 60px;
@grid-number-columns-micro: 4;
@grid-gutter-width-micro: (@grid-total-width-micro - (@grid-column-width-micro * @grid-number-columns-micro)) / @grid-number-columns-micro;

@grid-total-width-narrow: 640px;
@grid-column-width-narrow: 60px;
@grid-number-columns-narrow: 4;
@grid-gutter-width-narrow: (@grid-total-width-narrow - (@grid-column-width-narrow * @grid-number-columns-narrow)) / @grid-number-columns-narrow;

@grid-total-width-normal: 1000px;
@grid-column-width-normal: 60px;
@grid-number-columns-normal: 12;
@grid-gutter-width-normal: (@grid-total-width-normal - (@grid-column-width-normal * @grid-number-columns-normal)) / @grid-number-columns-normal;

@grid-total-width-wide: 1440px;
@grid-column-width-wide: 60px;
@grid-number-columns-wide: 12;
@grid-gutter-width-wide: (@grid-total-width-wide - (@grid-column-width-wide * @grid-number-columns-wide)) / @grid-number-columns-wide;

.get-column-width-micro (@number-columns) {
  width:((@grid-column-width-micro * @number-columns) + (@grid-gutter-width-micro * @number-columns));
}
.get-column-width-narrow (@number-columns) {
  width:((@grid-column-width-narrow * @number-columns) + (@grid-gutter-width-narrow * @number-columns));
}
.get-column-width-normal (@number-columns) {
  width:((@grid-column-width-normal * @number-columns) + (@grid-gutter-width-normal * @number-columns));
}
.get-column-width-wide (@number-columns) {
  width:((@grid-column-width-wide * @number-columns) + (@grid-gutter-width-wide * @number-columns));
}

.grid {
  float:left;
}
.grid-clear {
  clear:both;
}

.media-query-display (@text) when (@developer-mode = true) {
  body:before {
    content: 'Media Query: ' + @text;
    position:fixed;
    bottom:0;
    right:0;
    border:1px solid #ccc;
    background:#eee;
    opacity:0.7;
    font:10px Verdana;
    padding:1.0em;
  }
}

@media only screen and (max-width: @grid-total-width-narrow) {
  .media-query-display('Micro');
  section,
  header,
  footer {
    max-width:@grid-total-width-micro;
  }
  .grid {
    margin:0 0 0 @grid-gutter-width-micro;
  }
  .grid-micro-first {
    margin:0;
    clear:both;
  }
  .grid-micro-1 {.get-column-width-micro(1)}
  .grid-micro-2 {.get-column-width-micro(2)}
  .grid-micro-3 {.get-column-width-micro(3)}
  .grid-micro-4 {.get-column-width-micro(4)}
}

@media only screen and (min-width: @grid-total-width-narrow) and (max-width: @grid-total-width-normal) {
  .media-query-display('Narrow');
  section,
  header,
  footer {
    width:@grid-total-width-narrow;
    margin:auto;
  }
  .grid {
    margin:0 0 0 @grid-gutter-width-narrow;
  }
  .grid-narrow-first {
    margin:0;
    clear:both;
  }
  .grid-narrow-1 {.get-column-width-narrow(1)}
  .grid-narrow-2 {.get-column-width-narrow(2)}
  .grid-narrow-3 {.get-column-width-narrow(3)}
  .grid-narrow-4 {.get-column-width-narrow(4)}
}

@media only screen and (min-width: @grid-total-width-normal) and (max-width: @grid-total-width-wide) {
  .media-query-display('Normal');
  section,
  header,
  footer {
    width:@grid-total-width-normal;
    margin:auto;
  }
  .grid {
    margin:0 0 0 @grid-gutter-width-normal;
  }
  .grid-normal-first {
    margin:0;
    clear:both;
  }
  .grid-normal-1 {.get-column-width-normal(1)}
  .grid-normal-2 {.get-column-width-normal(2)}
  .grid-normal-3 {.get-column-width-normal(3)}
  .grid-normal-4 {.get-column-width-normal(4)}
  .grid-normal-5 {.get-column-width-normal(5)}
  .grid-normal-6 {.get-column-width-normal(6)}
  .grid-normal-7 {.get-column-width-normal(7)}
  .grid-normal-8 {.get-column-width-normal(8)}
  .grid-normal-9 {.get-column-width-normal(9)}
  .grid-normal-10 {.get-column-width-normal(10)}
  .grid-normal-11 {.get-column-width-normal(11)}
  .grid-normal-12 {.get-column-width-normal(12)}
}

@media only screen and (min-width: @grid-total-width-wide) {
  .media-query-display('Wide');
  section,
  header,
  footer {
    width:@grid-total-width-wide;
    margin:auto;
  }
  .grid {
    margin:0 0 0 @grid-gutter-width-wide;
  }
  .grid-wide-first {
    margin:0;
    clear:both;
  }
  .grid-wide-1 {.get-column-width-wide(1)}
  .grid-wide-2 {.get-column-width-wide(2)}
  .grid-wide-3 {.get-column-width-wide(3)}
  .grid-wide-4 {.get-column-width-wide(4)}
  .grid-wide-5 {.get-column-width-wide(5)}
  .grid-wide-6 {.get-column-width-wide(6)}
  .grid-wide-7 {.get-column-width-wide(7)}
  .grid-wide-8 {.get-column-width-wide(8)}
  .grid-wide-9 {.get-column-width-wide(9)}
  .grid-wide-10 {.get-column-width-wide(10)}
  .grid-wide-11 {.get-column-width-wide(11)}
  .grid-wide-12 {.get-column-width-wide(12)}
}