macbury-metro-ui-rails 0.15.9

data/vendor/toolkit/metro-ui/code.less

@@ -0,0 +1,47 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Code.less
+ *
+ */
+
+code, pre {
+    padding: 0 3px 2px;
+    #font > .normal;
+    font-size: 10pt;
+    color: @grayDark;
+}
+
+code {
+    padding: 2px 4px;
+    #font > .tertiary;
+    color: #d14;
+    background-color: #f7f7f9;
+    border: 1px #e1e1e8 solid;
+}
+
+pre {
+    display: block;
+    padding: 10px;
+    margin: 0;
+    line-height: 14pt;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre;
+    white-space: pre-wrap;
+    background-color: #f5f5f5;
+    border: 1px solid rgba(0,0,0,.15);
+
+    &.prettyprint {
+        margin-bottom: 10px;
+    }
+
+    code {
+        padding: 0;
+        color: inherit;
+        background-color: transparent;
+        border: 0;
+    }
+}

data/vendor/toolkit/metro-ui/colors.less

@@ -0,0 +1,115 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Variables.less
+ */
+
+// Units
+@unit: 20px;
+@subunit: 5px;
+
+// Color vars
+@white:                 #ffffff;
+@black:                 #000000;
+@blue:                  #2d89ef;
+@blueLight:             #EFF4FF;
+@blueDark:              #2B5797;
+@green:                 #00a300;
+@greenLight:            #99b433;
+@greenDark:             #1E7145;
+@red:                   #b91d47;
+@yellow:                #ffc40d;
+@orange:                #e3a21a;
+@orangeDark:            #da532c;
+@pinkDark:              #7E3878;
+@pink:                  #9f00a7;
+@purple:                #603cba;
+@darken:                #1d1d1d;
+@lighten:               #d5e7ec;
+@grayDark:              #525252;
+
+
+// Foregraund colors classes
+.fg-color-blue {color: @blue !important;}
+.fg-color-blueLight {color: @blueLight !important;}
+.fg-color-blueDark {color: @blueDark !important;}
+.fg-color-green {color: @green !important;}
+.fg-color-greenLight {color: @greenLight !important;}
+.fg-color-greenDark {color: @greenDark !important;}
+.fg-color-red {color: @red !important;}
+.fg-color-yellow {color: @yellow !important;}
+.fg-color-orange {color: @orange !important;}
+.fg-color-orangeDark {color: @orangeDark !important;}
+.fg-color-pink {color: @pink !important;}
+.fg-color-pinkDark {color: @pinkDark !important;}
+.fg-color-purple {color: @purple !important;}
+.fg-color-darken {color: @darken !important;}
+.fg-color-lighten {color: @lighten !important;}
+.fg-color-white {color: @white !important;}
+.fg-color-grayDark {color: @grayDark !important;}
+
+// Background colors classes
+.bg-color-blue {background-color: @blue !important;}
+.bg-color-blueLight {background-color: @blueLight !important;}
+.bg-color-blueDark {background-color: @blueDark !important;}
+.bg-color-green {background-color: @green !important;}
+.bg-color-greenLight {background-color: @greenLight !important;}
+.bg-color-greenDark {background-color: @greenDark !important;}
+.bg-color-red {background-color: @red !important;}
+.bg-color-yellow {background-color: @yellow !important;}
+.bg-color-orange {background-color: @orange !important;}
+.bg-color-orangeDark {background-color: @orangeDark !important;}
+.bg-color-pink {background-color: @pink !important;}
+.bg-color-pinkDark {background-color: @pinkDark !important;}
+.bg-color-purple {background-color: @purple !important;}
+.bg-color-darken {background-color: @darken !important;}
+.bg-color-lighten {background-color: @lighten !important;}
+.bg-color-white {background-color: @white !important;}
+.bg-color-grayDark {background-color: @grayDark !important;}
+
+// Border colors classes
+
+[class*=border-color]{
+    border: 2px solid;
+}
+
+.border-color-blue {border-color: @blue !important;}
+.border-color-blueLight {border-color: @blueLight !important;}
+.border-color-blueDark {border-color: @blueDark !important;}
+.border-color-green {border-color: @green !important;}
+.border-color-greenLight {border-color: @greenLight !important;}
+.border-color-greenDark {border-color: @greenDark !important;}
+.border-color-red {border-color: @red !important;}
+.border-color-yellow {border-color: @yellow !important;}
+.border-color-orange {border-color: @orange !important;}
+.border-color-orangeDark {border-color: @orangeDark !important;}
+.border-color-pink {border-color: @pink !important;}
+.border-color-pinkDark {border-color: @pinkDark !important;}
+.border-color-purple {border-color: @purple !important;}
+.border-color-darken {border-color: @darken !important;}
+.border-color-lighten {border-color: @lighten !important;}
+.border-color-white {border-color: @white !important;}
+.border-color-grayDark {border-color: @grayDark !important;}
+
+*:hover[class=outline-color] {
+    outline: 3px solid;
+}
+.outline-color-blue {outline-color: @blue !important;}
+.outline-color-blueLight {outline-color: @blueLight !important;}
+.outline-color-blueDark {outline-color: @blueDark !important;}
+.outline-color-green {outline-color: @green !important;}
+.outline-color-greenLight {outline-color: @greenLight !important;}
+.outline-color-greenDark {outline-color: @greenDark !important;}
+.outline-color-red {outline-color: @red !important;}
+.outline-color-yellow {outline-color: @yellow !important;}
+.outline-color-orange {outline-color: @orange !important;}
+.outline-color-orangeDark {outline-color: @orangeDark !important;}
+.outline-color-pink {outline-color: @pink !important;}
+.outline-color-pinkDark {outline-color: @pinkDark !important;}
+.outline-color-purple {outline-color: @purple !important;}
+.outline-color-darken {outline-color: @darken !important;}
+.outline-color-lighten {outline-color: @lighten !important;}
+.outline-color-white {outline-color: @white !important;}
+.outline-color-grayDark {outline-color: @grayDark !important;}

data/vendor/toolkit/metro-ui/forms.less

@@ -0,0 +1,434 @@
+/*
+ * Metro UI CSS
+ * Copyright 2012 Sergey Pimenov
+ * Licensed under the MIT Lilcense
+ *
+ * Layout.less
+ */
+
+@textbox_pass_active_icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzM2OTY1MjIwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzM2OTY1MjMwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzU3NURCRDA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMzU3NURCRTA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhJl5kAAAAEMSURBVHja7FXtEYIwDKVO0BE6AiPoBDICo7BBR9AVnMARcIOyAWxQk6PlakwC/uC888zdOwpJXl/SD0yMsdrLDtWO9h1yY4wDeEAARIKQfE7InQfY8xJgFnBB10ZgrCUc85N8rAHjB8QZmFNTcpNfoBQkvifl2SbAFXAjlZ8BLRN7Ar4HtmVRnoKo4o6Wy7SvYyqwL21hetxKpMwkLbMGS3sccfqtxMUEnnC4TO5pWSSxAYQiBscN06KRCkTrJdWJWNohjaK+X3ZNgSNJCAp50ITgN+2E2rQeklHf9MYh3YqJfNTuDsg10vFXlYMTlQwK97B6c61ssc0Lunq3KBOoW1EiN/8/0W+RPwUYACoftglrEejbAAAAAElFTkSuQmCC);
+@textbox_pass_inactive_icon: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzM2OTY1MkEwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzM2OTY1MkIwNkVGMTFFMjhDQkNEODZFQTYyRTI5MDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzY5NjUyODA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMzY5NjUyOTA2RUYxMUUyOENCQ0Q4NkVBNjJFMjkwNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ps2lOfsAAAFMSURBVHjaYvz//z8DrQATAw0BTQ1nwSUxe/ZsBSCVD8QBQKyAJv0AiDcA8cTU1NQHuMxgRA9zoKECQKofiBOIdOACIC4EWvIBr+FAgw2A1H4gFiAxBEAGOwItuIDVcBwGf4C6bCOaYf5QnwngswBsODQo7qMpbgTiCdi8ixR8BUBcj2aBIkwPLEL70QxOBCpYgC8coAY0AC0BReh8qDAsvhJBHGZpaWkFqNdhAOTaTmID29jY+MK5c+dAhlpAhQyA/IVA8Q8s0OSG7K1GNO8HQF2jgJQMQaljA1oQIscByMxCUCZyQE5WyGEMNXg9WjoHsddD5ZCDCNn3DrAcaoAkiJ4q+vGECLrcQSS2Ad7sD00NCngMV8CS1vHnUDTD3xNIMYxkFVzQcHyAR+8DSkvFQjLlCBsOTW6BaK4EsQPRkiJxpeJoTTS0DQcIMACNJ32B6TbHUQAAAABJRU5ErkJggg%3D%3D);
+
+// Checkboxes
+.input-control {
+
+    &.checkbox {
+        display: inline-block;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        cursor: pointer;
+
+        & > input[type=checkbox] {
+            position: absolute;
+            opacity: 0;
+        }
+        & > span {}
+
+        .helper {
+            padding-left: 23px;
+            position: relative;
+        }
+
+        .helper:before {
+            position: absolute;
+            display: block;
+            height: 20px;
+            width: 20px;
+            content: "";
+            text-indent: -9999px;
+            border: 2px #d9d9d9 solid;
+            z-index: 1;
+            opacity: 1;
+            top: 0;
+            left: 0;
+        }
+
+
+        input[type="checkbox"]:checked + .helper:after {
+            position: absolute;
+            display: block;
+            content: "\e08a";
+            font-size: 10pt;
+            heigth: 14px;
+            width: 14px;
+            line-height: 14px;
+            z-index: 2;
+            top: 50%;
+            margin-top: -6px;
+            left: 0;
+            margin-left: 4px;
+            font-family: iconFont;
+        }
+
+        input[type="checkbox"]:not(:checked) + .helper:after {
+            display: none;
+        }
+
+        input[type="checkbox"]:disabled + .helper:before {
+            cursor: default;
+            background: #e6e6e6;
+        }
+
+        input[type=checkbox]:disabled + .helper:after {
+            color: #8a8a8a;
+        }
+
+        &:hover {
+            input:not(:disabled) + .helper:before {
+                border-color: #919191;
+            }
+        }
+
+        &:active {
+            input:not(:disabled) + .helper:before {
+                border-color: #1e1e1e;
+            }
+        }
+
+    }
+
+    &.intermediate {
+        input[type="checkbox"] + .helper:after {
+            position: absolute !important;
+            display: block !important;
+            content: "" !important;
+            color: #1a1a1a !important;
+            z-index: 2 !important;
+            font-size: 16px !important;
+            font-weight: bold !important;
+            left: 5px !important;
+            margin-left: 0 !important;
+            top: 50% !important;
+            margin-top: -5px !important;
+            background-color: #1a1a1a !important;
+            width: 10px !important;
+            height: 10px !important;
+        }
+        input[type="checkbox"]:disabled + .helper:after {
+            background-color: lighten(#1a1a1a, 50%) !important;
+        }
+    }
+}
+
+// Radio
+.input-control {
+    &.radio {
+        display: inline-block;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        cursor: pointer;
+
+        & > input[type=radio] {
+            position: absolute;
+            opacity: 0;
+        }
+        & > span {}
+
+        .helper {
+            padding-left: 23px;
+            position: relative;
+        }
+
+        .helper:before {
+            position: absolute;
+            display: block;
+            height: 20px;
+            width: 20px;
+            content: "";
+            text-indent: -9999px;
+            border: 2px #d9d9d9 solid;
+            z-index: 1;
+            opacity: 1;
+            top: 0;
+            left: 0;
+            border-radius: 100%;
+        }
+
+        input[type="radio"]:checked + .helper:after {
+            position: absolute;
+            display: block;
+            content: "";
+            color: #1a1a1a;
+            z-index: 2;
+            font-size: 16px;
+            font-weight: bold;
+            left: 5px;
+            margin-left: 0;
+            top: 50%;
+            margin-top: -5px;
+            background-color: #1a1a1a;
+            width: 10px;
+            height: 10px;
+            border-radius: 100%;
+        }
+
+        input[type="radio"]:disabled + .helper:before {
+            cursor: default;
+            background: #e6e6e6;
+        }
+
+        input[type="radio"]:disabled + .helper:after {
+            background-color: #8a8a8a;
+        }
+
+        &:hover {
+            input:not(:disabled) + .helper:before {
+                border-color: #919191;
+            }
+        }
+
+        &:active {
+            input:not(:disabled) + .helper:before {
+                border-color: #1e1e1e;
+            }
+        }
+    }
+}
+
+// Switch
+.input-control {
+    &.switch {
+        display: inline-block;
+        margin-right: 10px;
+        margin-bottom: 10px;
+        cursor: pointer;
+        position: relative;
+
+        & > input[type=checkbox] {
+            position: absolute;
+            opacity: 0;
+        }
+
+        .helper {
+            padding-left: 52px;
+            position: relative;
+        }
+
+        .helper:before {
+            position: absolute;
+            left: 0;
+            top: 2px;
+            display: block;
+            content: "";
+            width: 43px;
+            height: 16px;
+            outline: 2px #a6a6a6 solid;
+            border: 1px #fff solid;
+            cursor: pointer;
+            background: #008287;
+            margin-left: 2px;
+            z-index: 1;
+        }
+
+        input[type="checkbox"] + .helper:after {
+            position: absolute;
+            left: 36px;
+            top: 2px;
+            display: block;
+            content: "";
+            width: 9px;
+            height: 16px;
+            outline: 2px #333 solid;
+            border: 1px #333 solid;
+            cursor: pointer;
+            background: #333;
+            z-index: 2;
+        }
+
+        input[type="checkbox"]:not(:checked) + .helper:after {
+            left: 2px !important;
+        }
+
+        input[type="checkbox"]:not(:checked) + .helper:before {
+            background: #a6a6a6 !important;
+        }
+
+        input[type="checkbox"]:disabled + .helper:after {
+            background: #a6a6a6 !important;
+            outline: 2px #a6a6a6 solid !important;
+            border: 1px #a6a6a6 solid !important;
+        }
+
+        input[type="checkbox"]:disabled + .helper:before {
+            cursor: default !important;
+            background: #e0e0e0 !important;
+            outline: 2px #ccc solid !important;
+        }
+
+    }
+}
+
+//Input text, password, ...
+
+.input-control > input[type=text],
+.input-control > input[type=email],
+.input-control > input[type=url],
+.input-control > input[type=phone],
+.input-control > input[type=password],
+.input-control > select,
+.input-control > textarea {
+    border: 2px #bababa solid;
+    width: 100%;
+    padding: 4px 32px 6px 5px;
+    background-color: #fff;
+    outline: 0;
+    margin-right: 32px;
+    min-height: 32px;
+    .pos-rel;
+
+
+    &:disabled {
+        background-color: #eaeaea;
+    }
+    &:focus {
+        border-color: #000;
+    }
+}
+
+.input-control > input[type=text]::-ms-clear,
+.input-control > input[type=email]::-ms-clear,
+.input-control > input[type=url]::-ms-clear,
+.input-control > input[type=phone]::-ms-clear {
+    display: none;
+}
+.input-control > input[type=password]::-ms-reveal {
+    display: none;
+}
+
+
+.input-control > select {
+    padding-right: 5px;
+}
+
+.input-control > textarea {
+    padding-right: 5px;
+    min-height: 100px;
+}
+
+.input-control {
+    &.text, &.password {
+        input[type=text]:not(:focus) + .helper, input[type=password]:not(:focus) + .helper, input[type=email]:not(:focus) + .helper, input[type=phone]:not(:focus) + .helper, input[type=url]:not(:focus) + .helper {
+            display: none;
+        }
+        input[type=text]:focus + .helper, input[type=password]:focus + .helper, input[type=email]:focus + .helper, input[type=phone]:focus + .helper, input[type=url]:focus + .helper {
+            display: block;
+        }
+        input[type=text]:not(:focus) + .helper:active, input[type=password]:not(:focus) + .helper:active, input[type=email]:not(:focus) + .helper:active, input[type=phone]:not(:focus) + .helper:active, input[type=url]:not(:focus) + .helper:active{
+            display: block;
+        }
+    }
+}
+
+.input-control {
+    margin-right: 0px;
+    margin-bottom: 10px;
+    position: relative;
+
+    &.text, &.password {
+        .helper, .btn-search {
+            background: #fff;// @textbox_pass_inactive_icon 50% no-repeat;
+            top: 2px;
+            width: 26px !important;
+            height: 27px !important;
+            min-width: 26px !important;
+            min-height: 27px !important;
+            cursor: pointer;
+            color: #000;
+            position: absolute;
+            left: 100%;
+            margin-left: -28px;
+            display: block;
+            border: 1px #fff solid;
+
+            &:before {
+                //content: "";
+                font-size: 12pt;
+                position: absolute;
+                #font > .normal;
+            }
+
+
+            &:hover {
+                background: #d9d9d9;// @textbox_pass_inactive_icon 50% no-repeat;
+            }
+
+            &:active {
+                background-color: #000;
+
+                &:before {
+                    color: #fff;
+                }
+
+            }
+        }
+    }
+
+    &.password {
+        .helper {
+            background: #fff @textbox_pass_inactive_icon 50% no-repeat;
+            &:hover {
+                background: #fff @textbox_pass_active_icon 50% no-repeat;
+            }
+        }
+    }
+    &.text {
+        .helper {
+
+            &:before {
+                font-family: iconFont;
+                font-size: 12px;
+                content: "\e089";
+                left: 7px;
+                top: 3px;
+            }
+
+        }
+    }
+    &.text {
+        .btn-search {
+
+            &:before {
+                font-family: iconFont;
+                font-size: 12px;
+                content: "\e041";
+                left: 7px;
+                top: 3px;
+            }
+
+        }
+    }
+}
+
+label {
+    #font > .normal;
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+fieldset {
+    .pos-rel;
+    margin-top: 30px;
+    border: 2px #eaeaea solid;
+    padding: 10px;
+
+    legend {
+        padding-left: 10px;
+        padding-right: 10px;
+        #font > .normal;
+        color: #cfcfcf;
+        .pos-abs;
+        top: -25px;
+        left: -10px;
+    }
+}
+
+input[type=button], input[type=reset], input[type=submit] {
+    .button;
+    border-radius: 0;
+}
+
+input[type=submit] {
+    .button.default;
+}
+
+

data/vendor/toolkit/metro-ui/grid.less

@@ -0,0 +1,115 @@
+/*
+ * 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();
+}