grid.less

/*
 * Metro UI CSS
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT Lilcense
 *
 * Grid.less
 *
 */

.oh,.ot,.tt{float:left;margin:0 2% 2% 0;width:48%}.ot{width:31%}.tt{width:65%}.cl{clear:both}

.item-padding{
    //margin-left: 0;
    margin-right: @unit;
    margin-bottom: @subunit;
}
.column-padding {
    margin: 0 @unit/2;
}
.group-padding {
    margin: 0 @unit*2;
}

@cellSize: 60px;
@cellMargin: 20px;

.span1  {width: 60px;}
.span2  {width: 140px;}
.span3  {width: 220px;}
.span4  {width: 300px;}
.span5  {width: 380px;}
.span6  {width: 460px;}
.span7  {width: 540px;}
.span8  {width: 620px;}
.span9  {width: 700px;}
.span10 {width: 780px;}
.span11 {width: 860px;}
.span12 {width: 940px;}

.offset1 {margin-left: 80px;}
.offset2 {margin-left: 160px;}
.offset3 {margin-left: 240px;}
.offset4 {margin-left: 320px;}
.offset5 {margin-left: 400px;}
.offset6 {margin-left: 480px;}
.offset7 {margin-left: 560px;}
.offset8 {margin-left: 640px;}
.offset9 {margin-left: 720px;}
.offset10{margin-left: 800px;}
.offset11{margin-left: 880px;}
.offset12 {margin-left: 960px;}


[class*="span"] {
    float: none;
    min-height: 1px;
    .item-padding();
    .clearfix();

    &:last-child {
        margin-right: 0;
        //right: 0;
    }

    & > img {
        max-width: 100%;
        //width: 100%;
        height: auto;
        //max-height: 100%;
    }
}

.grid {
    margin: 0 0 20px;
    display: block;
    height: auto;
    width: 100%;

    &.no-margin {
        margin: 0;
    }
    &.margin-row {
        margin-bottom: @subunit;
    }

    & .grid {
        margin-top: @subunit/2;
        margin-bottom: @subunit/2;
    }

    .group {
        margin-right: @unit * 4;
        float: left;
        width: auto;
        height: auto;
        min-height: 1px;
    }

    .row {
        width: 100%;
        .clearfix();

        [class*="span"] {
            float: left;
        }
    }

    &.element-border {
        [class*="span"] {
            border: 1px #ccc dotted;
        }
    }

    .clearfix();
}