compass-grid-plugin 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (27) hide show
  1. data/.gitignore +8 -0
  2. data/README.md +88 -0
  3. data/compass-grid-plugin.gemspec +21 -0
  4. data/example/config.rb +27 -0
  5. data/example/css/example.css +97 -0
  6. data/example/css/media.css +618 -0
  7. data/example/css/percentage.css +544 -0
  8. data/example/css/test.css +113 -0
  9. data/example/example.html +40 -0
  10. data/example/i/dino-1.jpg +0 -0
  11. data/example/i/dino-2.png +0 -0
  12. data/example/media.html +67 -0
  13. data/example/percentage.html +430 -0
  14. data/example/scss/example.scss +55 -0
  15. data/example/scss/media.scss +347 -0
  16. data/example/scss/percentage.scss +68 -0
  17. data/example/scss/test.scss +30 -0
  18. data/example/test.html +216 -0
  19. data/lib/compass-grid.rb +5 -0
  20. data/lib/compass/grid.rb +7 -0
  21. data/lib/compass/grid/version.rb +5 -0
  22. data/stylesheets/_grid.scss +127 -0
  23. data/stylesheets/grid/_fluid.scss +131 -0
  24. data/templates/project/manifest.rb +17 -0
  25. data/templates/project/partials/_base.scss +7 -0
  26. data/templates/project/screen.scss +9 -0
  27. metadata +89 -0
data/.gitignore ADDED
@@ -0,0 +1,8 @@
1
+
2
+ /project.sublime-project
3
+ /project.sublime-workspace
4
+ /test/.sass-cache
5
+ /test/css/test.css
6
+ /test/css/example.css
7
+ /compass-grid-0.0.1.gem
8
+ /compass-grid-plugin-0.0.1.gem
data/README.md ADDED
@@ -0,0 +1,88 @@
1
+ - [Blog post](http://heygrady.com/blog/2011/02/17/using-sass-with-the-1kb-grid-system/)
2
+ - [Gist](https://gist.github.com/702760)
3
+ - [The 1KB CSS Grid](http://1kbgrid.com/)
4
+
5
+ ## About
6
+ Simple grid system inspired by the [the 1KB CSS Grid](http://1kbgrid.com/) designed to utilize [Sass](http://sass-lang.com/) to remove unnecessary classes from the HTML markup and make customization easier. The best part is that it's not exactly 1KB now! Even better than the best part is that it's been extended to support fluid grids as well.
7
+
8
+ The next better best thing would be fully responsive media query support, but there's [some limitations in Sass as a language](https://github.com/nex3/sass/issues/116#issuecomment-5166163) that make that difficult to do in a Compass plugin.
9
+
10
+ ## Installation
11
+ ###Install the Ruby Gem.
12
+ ```
13
+ gem install compass-grid-plugin
14
+ ```
15
+
16
+ ### Existing Compass Projects
17
+ You can include it in any existing Compass project by including the grid in your config.rb file.
18
+
19
+ ```ruby
20
+ # Require any additional compass plugins here.
21
+ require 'compass-grid'
22
+ ```
23
+
24
+ ### New Compass Projects
25
+ You can install the grid plugin as part of a new Compass project.
26
+
27
+ ```
28
+ compass create my_project -r compass-grid -u compass-grid
29
+ ```
30
+
31
+ ## Fixed Grid Usage
32
+ The primary grid is a fixed, pixel grid. This grid is ideal for designs that do not require responsive design.
33
+
34
+ ```scss
35
+ @import "grid";
36
+ ```
37
+
38
+ ### Variables
39
+ - **$grid-column-width**: *60px* - The width of 1 column
40
+ - **$grid-gutter-width**: *20px* - The space between 2 columns
41
+ - **$grid-columns**: *12* - The total number of columns
42
+ - **$grid-clearfix-class**: *true* - Create a `.clearfix` class to extend
43
+ - **$grid-support-for-ie6**: *false* - Apply fixes for IE6
44
+
45
+ ### Functions
46
+ - **grid-column-width( $i, [$plus: 0] )** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
47
+
48
+ ### Mixins
49
+ - **grid( $i, [$plus: 0] )** - Mixin for applying widths to a column. The *$plus* argument can be used to alter the width to account for borders or padding.
50
+ - **grid-page( [$i: $grid-columns], [$plus: 0] )** - Mixin for declaring a page element. *$i* is *$grid-columns* by default but can be altered. The *$plus* argument can be used to alter the width to account for borders or padding.
51
+ - **grid-row( [$page: false] )** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
52
+ - **grid-column( [$i: false], [$plus: 0] )** - Mixin for declaring a column. Specifying *$i* will call the *grid* mixin. The *$plus* argument is passed to the *grid* mixin if *i* is also specified.
53
+ - **grid-offset( [$i: 1], [$plus: 0], [$side] )** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
54
+ - **grid-offset-left( [$i: 1], [$plus: 0] )** - Convenience mixin for setting the left margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
55
+ - **grid-offset-right( [$i: 1], [$plus: 0] )** - Convenience mixin for setting the right margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
56
+ - **grid-css( )** - outputs the default grid CSS in case those classes are required in the markup.
57
+
58
+ ## Fluid Grid Usage
59
+ This is a fluid version of the grid that uses percentages for widths. This grid is ideal for responsive designs that need to scale depending on the device. The fluid grid is more complex because percentage widths depend on their context for meaning. Every function and mixin is similar to the fixed grid but there are two additional variables to provide context.
60
+
61
+ ```scss
62
+ @import "grid/fluid";
63
+ ```
64
+
65
+ ### Variables
66
+ The fluid grid uses the variable from the fixed grid module
67
+
68
+ ### Functions
69
+ - **fluid-column-width( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Function for calculating column widths. Useful for integrating standard grid measurements into other elements, besides columns. Particularly useful for using columns widths as margin or padding.
70
+ - **fluid-width( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Function for calculating arbitrary widths.
71
+
72
+ ### Mixins
73
+ - **fluid( $i, [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for applying widths to a column. The *$plus* argument can be used to alter the width to account for borders or padding.
74
+ - **fluid-page( [$i: $grid-columns], [$plus: 0], [$use-max-width: true] )** - Mixin for declaring a page element. *$i* is *$grid-columns* by default but can be altered. The *$plus* argument can be used to alter the width to account for borders or padding.
75
+ - **fluid-row( [$page: false], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixing for declaring a column container. The *$page* argument is removing the negative margins when directly inside a page element.
76
+ - **fluid-column( [$i: false], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for declaring a column. Specifying *$i* will call the *grid* mixin. The *$plus* argument is passed to the *grid* mixin if *i* is also specified.
77
+ - **fluid-offset( [$i: 1], [$plus: 0], [$side], [$parent: $grid-columns], [$parent-plus: 0] )** - Mixin for altering the left or right margin on a column. Useful for adding empty columns before or after a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width. *$side* can be right, left, top or bottom (although right and left are the most useful).
78
+ - **fluid-offset-left( [$i: 1], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Convenience mixin for setting the left margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
79
+ - **fluid-offset-right( [$i: 1], [$plus: 0], [$parent: $grid-columns], [$parent-plus: 0] )** - Convenience mixin for setting the right margin on a column. The *$i* argument specifies the width of the offset in columns. The *$plus* argument can be used to alter the width.
80
+ - **fluid-css( )** - outputs the default fluid grid CSS in case those classes are required in the markup.
81
+
82
+ ## Notes
83
+ - You must define a `.clearfix` class for the grid to work properly. The grid attempts to extend an existing `.clearfix` class. By default a clearfix class is output automatically. If you want to use your own, you can set `$grid-clearfix-class: false;`.
84
+ - The only thing requiring an IE6 fix is the floats on columns.
85
+ - In order to support accurate fluid grid percentages, the number precision in Sass is set to 8.
86
+ - The fluid grid is not designed to work in older versions of IE, below version 8. The fluid grid is intended to be used on modern devices that support media queries.
87
+ - The only thing in the fluid grid not supported in IE7 is the use of `box-sizing`. This will only matter if borders or padding are added to a column.
88
+ - The CSS generated by `@include fluid-css` for the fluid grid will not work in IE6 because of the use of the direct child selector.
data/compass-grid-plugin.gemspec ADDED
@@ -0,0 +1,21 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "compass/grid/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = 'compass-grid-plugin'
7
+ s.version = Compass::Grid::VERSION
8
+ s.platform = Gem::Platform::RUBY
9
+ s.summary = "Compass extension based on the 1KB CSS Grid"
10
+ s.description = "Compass extension based on the 1KB CSS Grid designed to utilize Sass and Compass to remove unnecessary classes from the HTML markup and make customization easier."
11
+ s.homepage = 'https://github.com/heygrady/1KB-SCSS-Grid'
12
+ s.authors = ["Grady Kuhnline"]
13
+ s.email = ["github@heygrady.net"]
14
+
15
+ s.files = `git ls-files`.split("\n")
16
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
17
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
18
+ s.require_paths = ["lib"]
19
+
20
+ s.add_dependency("compass")
21
+ end
data/example/config.rb ADDED
@@ -0,0 +1,27 @@
1
+ # Require any additional compass plugins here.
2
+ require 'compass-h5bp'
3
+ require 'compass-grid'
4
+
5
+ # Set this to the root of your project when deployed:
6
+ http_path = "/"
7
+ css_dir = "css"
8
+ sass_dir = "scss"
9
+ images_dir = "i"
10
+ javascripts_dir = "js"
11
+
12
+ # You can select your preferred output style here (can be overridden via the command line):
13
+ # output_style = :expanded or :nested or :compact or :compressed
14
+ output_style = :compact
15
+
16
+ # To enable relative paths to assets via compass helper functions. Uncomment:
17
+ # relative_assets = true
18
+
19
+ # To disable debugging comments that display the original location of your selectors. Uncomment:
20
+ line_comments = false
21
+
22
+
23
+ # If you prefer the indented syntax, you might want to regenerate this
24
+ # project again passing --syntax sass, or you can uncomment this:
25
+ # preferred_syntax = :sass
26
+ # and then run:
27
+ # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
data/example/css/example.css ADDED
@@ -0,0 +1,97 @@
1
+ .clearfix, .page, .row, .page > .row, #container, [role="main"], #main-column > section { *zoom: 1; }
2
+ .clearfix:after, .page:after, .row:after, .page > .row:after, #container:after, [role="main"]:after, #main-column > section:after { content: ""; display: table; clear: both; }
3
+
4
+ .page { width: 960px; margin: 0 auto; }
5
+
6
+ .row { width: auto; margin: 0 -10px; }
7
+
8
+ .page > .row { width: auto; margin: 0 0; }
9
+
10
+ .column { margin: 0 10px; float: left; }
11
+
12
+ .grid-1 { width: 60px; }
13
+
14
+ .before-1 { margin-left: 90px; }
15
+
16
+ .after-1 { margin-right: 90px; }
17
+
18
+ .grid-2 { width: 140px; }
19
+
20
+ .before-2 { margin-left: 170px; }
21
+
22
+ .after-2 { margin-right: 170px; }
23
+
24
+ .grid-3 { width: 220px; }
25
+
26
+ .before-3 { margin-left: 250px; }
27
+
28
+ .after-3 { margin-right: 250px; }
29
+
30
+ .grid-4 { width: 300px; }
31
+
32
+ .before-4 { margin-left: 330px; }
33
+
34
+ .after-4 { margin-right: 330px; }
35
+
36
+ .grid-5 { width: 380px; }
37
+
38
+ .before-5 { margin-left: 410px; }
39
+
40
+ .after-5 { margin-right: 410px; }
41
+
42
+ .grid-6 { width: 460px; }
43
+
44
+ .before-6 { margin-left: 490px; }
45
+
46
+ .after-6 { margin-right: 490px; }
47
+
48
+ .grid-7 { width: 540px; }
49
+
50
+ .before-7 { margin-left: 570px; }
51
+
52
+ .after-7 { margin-right: 570px; }
53
+
54
+ .grid-8 { width: 620px; }
55
+
56
+ .before-8 { margin-left: 650px; }
57
+
58
+ .after-8 { margin-right: 650px; }
59
+
60
+ .grid-9 { width: 700px; }
61
+
62
+ .before-9 { margin-left: 730px; }
63
+
64
+ .after-9 { margin-right: 730px; }
65
+
66
+ .grid-10 { width: 780px; }
67
+
68
+ .before-10 { margin-left: 810px; }
69
+
70
+ .after-10 { margin-right: 810px; }
71
+
72
+ .grid-11 { width: 860px; }
73
+
74
+ .before-11 { margin-left: 890px; }
75
+
76
+ .after-11 { margin-right: 890px; }
77
+
78
+ .grid-12 { width: 940px; }
79
+
80
+ .box { margin-bottom: 20px; }
81
+
82
+ #container { width: 960px; margin: 0 auto; }
83
+
84
+ [role="main"] { width: auto; margin: 0 0; }
85
+
86
+ #container > header, #container > footer { margin: 0 10px; border: 1px solid black; margin-bottom: 20px; }
87
+
88
+ #left-column, #right-column { margin: 0 10px; float: left; width: 218px; border: 1px solid red; }
89
+
90
+ #main-column { margin: 0 10px; float: left; width: 700px; }
91
+ #main-column > section { width: auto; margin: 0 -10px; margin-bottom: 20px; }
92
+ #main-column > section.hero { border: 1px solid black; margin-left: 0; margin-right: 0; }
93
+
94
+ #content { margin: 0 10px; float: left; width: 458px; border: 1px solid blue; }
95
+
96
+ .clearfix, .page, .row, .page > .row, #container, [role="main"], #main-column > section { *zoom: 1; }
97
+ .clearfix:after, .page:after, .row:after, .page > .row:after, #container:after, [role="main"]:after, #main-column > section:after { content: ""; display: table; clear: both; }
data/example/css/media.css ADDED
@@ -0,0 +1,618 @@
1
+ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
2
+
3
+ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
4
+
5
+ audio:not([controls]) { display: none; }
6
+
7
+ [hidden] { display: none; }
8
+
9
+ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
10
+
11
+ html, button, input, select, textarea { font-family: sans-serif; color: #222222; }
12
+
13
+ body { margin: 0; font-size: 1em; line-height: 1.4; }
14
+
15
+ a { color: #0000ee; }
16
+
17
+ a:visited { color: #551a8b; }
18
+
19
+ a:hover { color: #0066ee; }
20
+
21
+ a:focus { outline: thin dotted; }
22
+
23
+ a:hover, a:active { outline: 0; }
24
+
25
+ abbr[title] { border-bottom: 1px dotted; }
26
+
27
+ b, strong { font-weight: bold; }
28
+
29
+ blockquote { margin: 1em 40px; }
30
+
31
+ dfn { font-style: italic; }
32
+
33
+ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
34
+
35
+ ins { background: #ff9; color: #000; text-decoration: none; }
36
+
37
+ mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
38
+
39
+ pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
40
+
41
+ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
42
+
43
+ q { quotes: none; }
44
+
45
+ q:before, q:after { content: ""; content: none; }
46
+
47
+ small { font-size: 85%; }
48
+
49
+ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
50
+
51
+ sup { top: -0.5em; }
52
+
53
+ sub { bottom: -0.25em; }
54
+
55
+ ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
56
+
57
+ dd { margin: 0 0 0 40px; }
58
+
59
+ nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
60
+
61
+ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
62
+
63
+ svg:not(:root) { overflow: hidden; }
64
+
65
+ figure { margin: 0; }
66
+
67
+ form { margin: 0; }
68
+
69
+ fieldset { border: 0; margin: 0; padding: 0; }
70
+
71
+ label { cursor: pointer; }
72
+
73
+ legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
74
+
75
+ button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
76
+
77
+ button, input { line-height: normal; }
78
+
79
+ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
80
+
81
+ button[disabled], input[disabled] { cursor: default; }
82
+
83
+ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
84
+
85
+ input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
86
+
87
+ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
88
+
89
+ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
90
+
91
+ textarea { overflow: auto; vertical-align: top; resize: vertical; }
92
+
93
+ input:invalid, textarea:invalid { background-color: #f0dddd; }
94
+
95
+ table { border-collapse: collapse; border-spacing: 0; }
96
+
97
+ td { vertical-align: top; }
98
+
99
+ .clearfix, .page, .row, .page > .row, .fluid-page, .fluid-row, .fluid-page > .fluid-row, header, #main, footer, .main-column section { *zoom: 1; }
100
+ .clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { content: ""; display: table; clear: both; }
101
+
102
+ .clearfix, .page, .row, .page > .row, .fluid-page, .fluid-row, .fluid-page > .fluid-row, header, #main, footer, .main-column section { *zoom: 1; }
103
+ .clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { content: ""; display: table; clear: both; }
104
+
105
+ .page { width: 960px; margin: 0 auto; }
106
+
107
+ .row { width: auto; margin: 0 -10px; }
108
+
109
+ .page > .row { width: auto; margin: 0 0; }
110
+
111
+ .column { margin: 0 10px; float: left; }
112
+
113
+ .grid-1 { width: 60px; }
114
+
115
+ .before-1 { margin-left: 90px; }
116
+
117
+ .after-1 { margin-right: 90px; }
118
+
119
+ .grid-2 { width: 140px; }
120
+
121
+ .before-2 { margin-left: 170px; }
122
+
123
+ .after-2 { margin-right: 170px; }
124
+
125
+ .grid-3 { width: 220px; }
126
+
127
+ .before-3 { margin-left: 250px; }
128
+
129
+ .after-3 { margin-right: 250px; }
130
+
131
+ .grid-4 { width: 300px; }
132
+
133
+ .before-4 { margin-left: 330px; }
134
+
135
+ .after-4 { margin-right: 330px; }
136
+
137
+ .grid-5 { width: 380px; }
138
+
139
+ .before-5 { margin-left: 410px; }
140
+
141
+ .after-5 { margin-right: 410px; }
142
+
143
+ .grid-6 { width: 460px; }
144
+
145
+ .before-6 { margin-left: 490px; }
146
+
147
+ .after-6 { margin-right: 490px; }
148
+
149
+ .grid-7 { width: 540px; }
150
+
151
+ .before-7 { margin-left: 570px; }
152
+
153
+ .after-7 { margin-right: 570px; }
154
+
155
+ .grid-8 { width: 620px; }
156
+
157
+ .before-8 { margin-left: 650px; }
158
+
159
+ .after-8 { margin-right: 650px; }
160
+
161
+ .grid-9 { width: 700px; }
162
+
163
+ .before-9 { margin-left: 730px; }
164
+
165
+ .after-9 { margin-right: 730px; }
166
+
167
+ .grid-10 { width: 780px; }
168
+
169
+ .before-10 { margin-left: 810px; }
170
+
171
+ .after-10 { margin-right: 810px; }
172
+
173
+ .grid-11 { width: 860px; }
174
+
175
+ .before-11 { margin-left: 890px; }
176
+
177
+ .after-11 { margin-right: 890px; }
178
+
179
+ .grid-12 { width: 940px; }
180
+
181
+ .box { margin-bottom: 20px; }
182
+
183
+ .fluid-page { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
184
+
185
+ .fluid-row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
186
+
187
+ .fluid-page > .fluid-row { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 0; }
188
+
189
+ .fluid-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.04166667%; float: left; }
190
+
191
+ .fluid-1 { width: 6.25%; }
192
+ .fluid-1 > .fluid-row { margin: 0 -16.66666667%; }
193
+ .fluid-1 > .fluid-row > .fluid-column { margin: 0 12.5%; }
194
+ .fluid-1 > .fluid-row > .fluid-1 { width: 75%; }
195
+
196
+ .fluid-before-1 { margin-left: 9.375%; }
197
+
198
+ .fluid-after-1 { margin-right: 9.375%; }
199
+
200
+ .fluid-2 { width: 14.58333333%; }
201
+ .fluid-2 > .fluid-row { margin: 0 -7.14285714%; }
202
+ .fluid-2 > .fluid-row > .fluid-column { margin: 0 6.25%; }
203
+ .fluid-2 > .fluid-row > .fluid-1 { width: 37.5%; }
204
+ .fluid-2 > .fluid-row > .fluid-before-1 { margin-left: 14.58333333%; }
205
+ .fluid-2 > .fluid-row > .fluid-after-1 { margin-right: 14.58333333%; }
206
+ .fluid-2 > .fluid-row > .fluid-2 { width: 87.5%; }
207
+
208
+ .fluid-before-2 { margin-left: 17.70833333%; }
209
+
210
+ .fluid-after-2 { margin-right: 17.70833333%; }
211
+
212
+ .fluid-3 { width: 22.91666667%; }
213
+ .fluid-3 > .fluid-row { margin: 0 -4.54545455%; }
214
+ .fluid-3 > .fluid-row > .fluid-column { margin: 0 4.16666667%; }
215
+ .fluid-3 > .fluid-row > .fluid-1 { width: 25%; }
216
+ .fluid-3 > .fluid-row > .fluid-before-1 { margin-left: 12.5%; }
217
+ .fluid-3 > .fluid-row > .fluid-after-1 { margin-right: 12.5%; }
218
+ .fluid-3 > .fluid-row > .fluid-2 { width: 58.33333333%; }
219
+ .fluid-3 > .fluid-row > .fluid-before-2 { margin-left: 20.83333333%; }
220
+ .fluid-3 > .fluid-row > .fluid-after-2 { margin-right: 20.83333333%; }
221
+ .fluid-3 > .fluid-row > .fluid-3 { width: 91.66666667%; }
222
+
223
+ .fluid-before-3 { margin-left: 26.04166667%; }
224
+
225
+ .fluid-after-3 { margin-right: 26.04166667%; }
226
+
227
+ .fluid-4 { width: 31.25%; }
228
+ .fluid-4 > .fluid-row { margin: 0 -3.33333333%; }
229
+ .fluid-4 > .fluid-row > .fluid-column { margin: 0 3.125%; }
230
+ .fluid-4 > .fluid-row > .fluid-1 { width: 18.75%; }
231
+ .fluid-4 > .fluid-row > .fluid-before-1 { margin-left: 11.45833333%; }
232
+ .fluid-4 > .fluid-row > .fluid-after-1 { margin-right: 11.45833333%; }
233
+ .fluid-4 > .fluid-row > .fluid-2 { width: 43.75%; }
234
+ .fluid-4 > .fluid-row > .fluid-before-2 { margin-left: 19.79166667%; }
235
+ .fluid-4 > .fluid-row > .fluid-after-2 { margin-right: 19.79166667%; }
236
+ .fluid-4 > .fluid-row > .fluid-3 { width: 68.75%; }
237
+ .fluid-4 > .fluid-row > .fluid-before-3 { margin-left: 28.125%; }
238
+ .fluid-4 > .fluid-row > .fluid-after-3 { margin-right: 28.125%; }
239
+ .fluid-4 > .fluid-row > .fluid-4 { width: 93.75%; }
240
+
241
+ .fluid-before-4 { margin-left: 34.375%; }
242
+
243
+ .fluid-after-4 { margin-right: 34.375%; }
244
+
245
+ .fluid-5 { width: 39.58333333%; }
246
+ .fluid-5 > .fluid-row { margin: 0 -2.63157895%; }
247
+ .fluid-5 > .fluid-row > .fluid-column { margin: 0 2.5%; }
248
+ .fluid-5 > .fluid-row > .fluid-1 { width: 15%; }
249
+ .fluid-5 > .fluid-row > .fluid-before-1 { margin-left: 10.83333333%; }
250
+ .fluid-5 > .fluid-row > .fluid-after-1 { margin-right: 10.83333333%; }
251
+ .fluid-5 > .fluid-row > .fluid-2 { width: 35%; }
252
+ .fluid-5 > .fluid-row > .fluid-before-2 { margin-left: 19.16666667%; }
253
+ .fluid-5 > .fluid-row > .fluid-after-2 { margin-right: 19.16666667%; }
254
+ .fluid-5 > .fluid-row > .fluid-3 { width: 55.0%; }
255
+ .fluid-5 > .fluid-row > .fluid-before-3 { margin-left: 27.5%; }
256
+ .fluid-5 > .fluid-row > .fluid-after-3 { margin-right: 27.5%; }
257
+ .fluid-5 > .fluid-row > .fluid-4 { width: 75%; }
258
+ .fluid-5 > .fluid-row > .fluid-before-4 { margin-left: 35.83333333%; }
259
+ .fluid-5 > .fluid-row > .fluid-after-4 { margin-right: 35.83333333%; }
260
+ .fluid-5 > .fluid-row > .fluid-5 { width: 95%; }
261
+
262
+ .fluid-before-5 { margin-left: 42.70833333%; }
263
+
264
+ .fluid-after-5 { margin-right: 42.70833333%; }
265
+
266
+ .fluid-6 { width: 47.91666667%; }
267
+ .fluid-6 > .fluid-row { margin: 0 -2.17391304%; }
268
+ .fluid-6 > .fluid-row > .fluid-column { margin: 0 2.08333333%; }
269
+ .fluid-6 > .fluid-row > .fluid-1 { width: 12.5%; }
270
+ .fluid-6 > .fluid-row > .fluid-before-1 { margin-left: 10.41666667%; }
271
+ .fluid-6 > .fluid-row > .fluid-after-1 { margin-right: 10.41666667%; }
272
+ .fluid-6 > .fluid-row > .fluid-2 { width: 29.16666667%; }
273
+ .fluid-6 > .fluid-row > .fluid-before-2 { margin-left: 18.75%; }
274
+ .fluid-6 > .fluid-row > .fluid-after-2 { margin-right: 18.75%; }
275
+ .fluid-6 > .fluid-row > .fluid-3 { width: 45.83333333%; }
276
+ .fluid-6 > .fluid-row > .fluid-before-3 { margin-left: 27.08333333%; }
277
+ .fluid-6 > .fluid-row > .fluid-after-3 { margin-right: 27.08333333%; }
278
+ .fluid-6 > .fluid-row > .fluid-4 { width: 62.5%; }
279
+ .fluid-6 > .fluid-row > .fluid-before-4 { margin-left: 35.41666667%; }
280
+ .fluid-6 > .fluid-row > .fluid-after-4 { margin-right: 35.41666667%; }
281
+ .fluid-6 > .fluid-row > .fluid-5 { width: 79.16666667%; }
282
+ .fluid-6 > .fluid-row > .fluid-before-5 { margin-left: 43.75%; }
283
+ .fluid-6 > .fluid-row > .fluid-after-5 { margin-right: 43.75%; }
284
+ .fluid-6 > .fluid-row > .fluid-6 { width: 95.83333333%; }
285
+
286
+ .fluid-before-6 { margin-left: 51.04166667%; }
287
+
288
+ .fluid-after-6 { margin-right: 51.04166667%; }
289
+
290
+ .fluid-7 { width: 56.25%; }
291
+ .fluid-7 > .fluid-row { margin: 0 -1.85185185%; }
292
+ .fluid-7 > .fluid-row > .fluid-column { margin: 0 1.78571429%; }
293
+ .fluid-7 > .fluid-row > .fluid-1 { width: 10.71428571%; }
294
+ .fluid-7 > .fluid-row > .fluid-before-1 { margin-left: 10.11904762%; }
295
+ .fluid-7 > .fluid-row > .fluid-after-1 { margin-right: 10.11904762%; }
296
+ .fluid-7 > .fluid-row > .fluid-2 { width: 25%; }
297
+ .fluid-7 > .fluid-row > .fluid-before-2 { margin-left: 18.45238095%; }
298
+ .fluid-7 > .fluid-row > .fluid-after-2 { margin-right: 18.45238095%; }
299
+ .fluid-7 > .fluid-row > .fluid-3 { width: 39.28571429%; }
300
+ .fluid-7 > .fluid-row > .fluid-before-3 { margin-left: 26.78571429%; }
301
+ .fluid-7 > .fluid-row > .fluid-after-3 { margin-right: 26.78571429%; }
302
+ .fluid-7 > .fluid-row > .fluid-4 { width: 53.57142857%; }
303
+ .fluid-7 > .fluid-row > .fluid-before-4 { margin-left: 35.11904762%; }
304
+ .fluid-7 > .fluid-row > .fluid-after-4 { margin-right: 35.11904762%; }
305
+ .fluid-7 > .fluid-row > .fluid-5 { width: 67.85714286%; }
306
+ .fluid-7 > .fluid-row > .fluid-before-5 { margin-left: 43.45238095%; }
307
+ .fluid-7 > .fluid-row > .fluid-after-5 { margin-right: 43.45238095%; }
308
+ .fluid-7 > .fluid-row > .fluid-6 { width: 82.14285714%; }
309
+ .fluid-7 > .fluid-row > .fluid-before-6 { margin-left: 51.78571429%; }
310
+ .fluid-7 > .fluid-row > .fluid-after-6 { margin-right: 51.78571429%; }
311
+ .fluid-7 > .fluid-row > .fluid-7 { width: 96.42857143%; }
312
+
313
+ .fluid-before-7 { margin-left: 59.375%; }
314
+
315
+ .fluid-after-7 { margin-right: 59.375%; }
316
+
317
+ .fluid-8 { width: 64.58333333%; }
318
+ .fluid-8 > .fluid-row { margin: 0 -1.61290323%; }
319
+ .fluid-8 > .fluid-row > .fluid-column { margin: 0 1.5625%; }
320
+ .fluid-8 > .fluid-row > .fluid-1 { width: 9.375%; }
321
+ .fluid-8 > .fluid-row > .fluid-before-1 { margin-left: 9.89583333%; }
322
+ .fluid-8 > .fluid-row > .fluid-after-1 { margin-right: 9.89583333%; }
323
+ .fluid-8 > .fluid-row > .fluid-2 { width: 21.875%; }
324
+ .fluid-8 > .fluid-row > .fluid-before-2 { margin-left: 18.22916667%; }
325
+ .fluid-8 > .fluid-row > .fluid-after-2 { margin-right: 18.22916667%; }
326
+ .fluid-8 > .fluid-row > .fluid-3 { width: 34.375%; }
327
+ .fluid-8 > .fluid-row > .fluid-before-3 { margin-left: 26.5625%; }
328
+ .fluid-8 > .fluid-row > .fluid-after-3 { margin-right: 26.5625%; }
329
+ .fluid-8 > .fluid-row > .fluid-4 { width: 46.875%; }
330
+ .fluid-8 > .fluid-row > .fluid-before-4 { margin-left: 34.89583333%; }
331
+ .fluid-8 > .fluid-row > .fluid-after-4 { margin-right: 34.89583333%; }
332
+ .fluid-8 > .fluid-row > .fluid-5 { width: 59.375%; }
333
+ .fluid-8 > .fluid-row > .fluid-before-5 { margin-left: 43.22916667%; }
334
+ .fluid-8 > .fluid-row > .fluid-after-5 { margin-right: 43.22916667%; }
335
+ .fluid-8 > .fluid-row > .fluid-6 { width: 71.875%; }
336
+ .fluid-8 > .fluid-row > .fluid-before-6 { margin-left: 51.5625%; }
337
+ .fluid-8 > .fluid-row > .fluid-after-6 { margin-right: 51.5625%; }
338
+ .fluid-8 > .fluid-row > .fluid-7 { width: 84.375%; }
339
+ .fluid-8 > .fluid-row > .fluid-before-7 { margin-left: 59.89583333%; }
340
+ .fluid-8 > .fluid-row > .fluid-after-7 { margin-right: 59.89583333%; }
341
+ .fluid-8 > .fluid-row > .fluid-8 { width: 96.875%; }
342
+
343
+ .fluid-before-8 { margin-left: 67.70833333%; }
344
+
345
+ .fluid-after-8 { margin-right: 67.70833333%; }
346
+
347
+ .fluid-9 { width: 72.91666667%; }
348
+ .fluid-9 > .fluid-row { margin: 0 -1.42857143%; }
349
+ .fluid-9 > .fluid-row > .fluid-column { margin: 0 1.38888889%; }
350
+ .fluid-9 > .fluid-row > .fluid-1 { width: 8.33333333%; }
351
+ .fluid-9 > .fluid-row > .fluid-before-1 { margin-left: 9.72222222%; }
352
+ .fluid-9 > .fluid-row > .fluid-after-1 { margin-right: 9.72222222%; }
353
+ .fluid-9 > .fluid-row > .fluid-2 { width: 19.44444444%; }
354
+ .fluid-9 > .fluid-row > .fluid-before-2 { margin-left: 18.05555556%; }
355
+ .fluid-9 > .fluid-row > .fluid-after-2 { margin-right: 18.05555556%; }
356
+ .fluid-9 > .fluid-row > .fluid-3 { width: 30.55555556%; }
357
+ .fluid-9 > .fluid-row > .fluid-before-3 { margin-left: 26.38888889%; }
358
+ .fluid-9 > .fluid-row > .fluid-after-3 { margin-right: 26.38888889%; }
359
+ .fluid-9 > .fluid-row > .fluid-4 { width: 41.66666667%; }
360
+ .fluid-9 > .fluid-row > .fluid-before-4 { margin-left: 34.72222222%; }
361
+ .fluid-9 > .fluid-row > .fluid-after-4 { margin-right: 34.72222222%; }
362
+ .fluid-9 > .fluid-row > .fluid-5 { width: 52.77777778%; }
363
+ .fluid-9 > .fluid-row > .fluid-before-5 { margin-left: 43.05555556%; }
364
+ .fluid-9 > .fluid-row > .fluid-after-5 { margin-right: 43.05555556%; }
365
+ .fluid-9 > .fluid-row > .fluid-6 { width: 63.88888889%; }
366
+ .fluid-9 > .fluid-row > .fluid-before-6 { margin-left: 51.38888889%; }
367
+ .fluid-9 > .fluid-row > .fluid-after-6 { margin-right: 51.38888889%; }
368
+ .fluid-9 > .fluid-row > .fluid-7 { width: 75%; }
369
+ .fluid-9 > .fluid-row > .fluid-before-7 { margin-left: 59.72222222%; }
370
+ .fluid-9 > .fluid-row > .fluid-after-7 { margin-right: 59.72222222%; }
371
+ .fluid-9 > .fluid-row > .fluid-8 { width: 86.11111111%; }
372
+ .fluid-9 > .fluid-row > .fluid-before-8 { margin-left: 68.05555556%; }
373
+ .fluid-9 > .fluid-row > .fluid-after-8 { margin-right: 68.05555556%; }
374
+ .fluid-9 > .fluid-row > .fluid-9 { width: 97.22222222%; }
375
+
376
+ .fluid-before-9 { margin-left: 76.04166667%; }
377
+
378
+ .fluid-after-9 { margin-right: 76.04166667%; }
379
+
380
+ .fluid-10 { width: 81.25%; }
381
+ .fluid-10 > .fluid-row { margin: 0 -1.28205128%; }
382
+ .fluid-10 > .fluid-row > .fluid-column { margin: 0 1.25%; }
383
+ .fluid-10 > .fluid-row > .fluid-1 { width: 7.5%; }
384
+ .fluid-10 > .fluid-row > .fluid-before-1 { margin-left: 9.58333333%; }
385
+ .fluid-10 > .fluid-row > .fluid-after-1 { margin-right: 9.58333333%; }
386
+ .fluid-10 > .fluid-row > .fluid-2 { width: 17.5%; }
387
+ .fluid-10 > .fluid-row > .fluid-before-2 { margin-left: 17.91666667%; }
388
+ .fluid-10 > .fluid-row > .fluid-after-2 { margin-right: 17.91666667%; }
389
+ .fluid-10 > .fluid-row > .fluid-3 { width: 27.5%; }
390
+ .fluid-10 > .fluid-row > .fluid-before-3 { margin-left: 26.25%; }
391
+ .fluid-10 > .fluid-row > .fluid-after-3 { margin-right: 26.25%; }
392
+ .fluid-10 > .fluid-row > .fluid-4 { width: 37.5%; }
393
+ .fluid-10 > .fluid-row > .fluid-before-4 { margin-left: 34.58333333%; }
394
+ .fluid-10 > .fluid-row > .fluid-after-4 { margin-right: 34.58333333%; }
395
+ .fluid-10 > .fluid-row > .fluid-5 { width: 47.5%; }
396
+ .fluid-10 > .fluid-row > .fluid-before-5 { margin-left: 42.91666667%; }
397
+ .fluid-10 > .fluid-row > .fluid-after-5 { margin-right: 42.91666667%; }
398
+ .fluid-10 > .fluid-row > .fluid-6 { width: 57.5%; }
399
+ .fluid-10 > .fluid-row > .fluid-before-6 { margin-left: 51.25%; }
400
+ .fluid-10 > .fluid-row > .fluid-after-6 { margin-right: 51.25%; }
401
+ .fluid-10 > .fluid-row > .fluid-7 { width: 67.5%; }
402
+ .fluid-10 > .fluid-row > .fluid-before-7 { margin-left: 59.58333333%; }
403
+ .fluid-10 > .fluid-row > .fluid-after-7 { margin-right: 59.58333333%; }
404
+ .fluid-10 > .fluid-row > .fluid-8 { width: 77.5%; }
405
+ .fluid-10 > .fluid-row > .fluid-before-8 { margin-left: 67.91666667%; }
406
+ .fluid-10 > .fluid-row > .fluid-after-8 { margin-right: 67.91666667%; }
407
+ .fluid-10 > .fluid-row > .fluid-9 { width: 87.5%; }
408
+ .fluid-10 > .fluid-row > .fluid-before-9 { margin-left: 76.25%; }
409
+ .fluid-10 > .fluid-row > .fluid-after-9 { margin-right: 76.25%; }
410
+ .fluid-10 > .fluid-row > .fluid-10 { width: 97.5%; }
411
+
412
+ .fluid-before-10 { margin-left: 84.375%; }
413
+
414
+ .fluid-after-10 { margin-right: 84.375%; }
415
+
416
+ .fluid-11 { width: 89.58333333%; }
417
+ .fluid-11 > .fluid-row { margin: 0 -1.1627907%; }
418
+ .fluid-11 > .fluid-row > .fluid-column { margin: 0 1.13636364%; }
419
+ .fluid-11 > .fluid-row > .fluid-1 { width: 6.81818182%; }
420
+ .fluid-11 > .fluid-row > .fluid-before-1 { margin-left: 9.46969697%; }
421
+ .fluid-11 > .fluid-row > .fluid-after-1 { margin-right: 9.46969697%; }
422
+ .fluid-11 > .fluid-row > .fluid-2 { width: 15.90909091%; }
423
+ .fluid-11 > .fluid-row > .fluid-before-2 { margin-left: 17.8030303%; }
424
+ .fluid-11 > .fluid-row > .fluid-after-2 { margin-right: 17.8030303%; }
425
+ .fluid-11 > .fluid-row > .fluid-3 { width: 25%; }
426
+ .fluid-11 > .fluid-row > .fluid-before-3 { margin-left: 26.13636364%; }
427
+ .fluid-11 > .fluid-row > .fluid-after-3 { margin-right: 26.13636364%; }
428
+ .fluid-11 > .fluid-row > .fluid-4 { width: 34.09090909%; }
429
+ .fluid-11 > .fluid-row > .fluid-before-4 { margin-left: 34.46969697%; }
430
+ .fluid-11 > .fluid-row > .fluid-after-4 { margin-right: 34.46969697%; }
431
+ .fluid-11 > .fluid-row > .fluid-5 { width: 43.18181818%; }
432
+ .fluid-11 > .fluid-row > .fluid-before-5 { margin-left: 42.8030303%; }
433
+ .fluid-11 > .fluid-row > .fluid-after-5 { margin-right: 42.8030303%; }
434
+ .fluid-11 > .fluid-row > .fluid-6 { width: 52.27272727%; }
435
+ .fluid-11 > .fluid-row > .fluid-before-6 { margin-left: 51.13636364%; }
436
+ .fluid-11 > .fluid-row > .fluid-after-6 { margin-right: 51.13636364%; }
437
+ .fluid-11 > .fluid-row > .fluid-7 { width: 61.36363636%; }
438
+ .fluid-11 > .fluid-row > .fluid-before-7 { margin-left: 59.46969697%; }
439
+ .fluid-11 > .fluid-row > .fluid-after-7 { margin-right: 59.46969697%; }
440
+ .fluid-11 > .fluid-row > .fluid-8 { width: 70.45454545%; }
441
+ .fluid-11 > .fluid-row > .fluid-before-8 { margin-left: 67.8030303%; }
442
+ .fluid-11 > .fluid-row > .fluid-after-8 { margin-right: 67.8030303%; }
443
+ .fluid-11 > .fluid-row > .fluid-9 { width: 79.54545455%; }
444
+ .fluid-11 > .fluid-row > .fluid-before-9 { margin-left: 76.13636364%; }
445
+ .fluid-11 > .fluid-row > .fluid-after-9 { margin-right: 76.13636364%; }
446
+ .fluid-11 > .fluid-row > .fluid-10 { width: 88.63636364%; }
447
+ .fluid-11 > .fluid-row > .fluid-before-10 { margin-left: 84.46969697%; }
448
+ .fluid-11 > .fluid-row > .fluid-after-10 { margin-right: 84.46969697%; }
449
+ .fluid-11 > .fluid-row > .fluid-11 { width: 97.72727273%; }
450
+
451
+ .fluid-before-11 { margin-left: 92.70833333%; }
452
+
453
+ .fluid-after-11 { margin-right: 92.70833333%; }
454
+
455
+ .fluid-12 { width: 97.91666667%; }
456
+ .fluid-12 > .fluid-row { margin: 0 -1.06382979%; }
457
+ .fluid-12 > .fluid-row > .fluid-column { margin: 0 1.04166667%; }
458
+ .fluid-12 > .fluid-row > .fluid-1 { width: 6.25%; }
459
+ .fluid-12 > .fluid-row > .fluid-before-1 { margin-left: 9.375%; }
460
+ .fluid-12 > .fluid-row > .fluid-after-1 { margin-right: 9.375%; }
461
+ .fluid-12 > .fluid-row > .fluid-2 { width: 14.58333333%; }
462
+ .fluid-12 > .fluid-row > .fluid-before-2 { margin-left: 17.70833333%; }
463
+ .fluid-12 > .fluid-row > .fluid-after-2 { margin-right: 17.70833333%; }
464
+ .fluid-12 > .fluid-row > .fluid-3 { width: 22.91666667%; }
465
+ .fluid-12 > .fluid-row > .fluid-before-3 { margin-left: 26.04166667%; }
466
+ .fluid-12 > .fluid-row > .fluid-after-3 { margin-right: 26.04166667%; }
467
+ .fluid-12 > .fluid-row > .fluid-4 { width: 31.25%; }
468
+ .fluid-12 > .fluid-row > .fluid-before-4 { margin-left: 34.375%; }
469
+ .fluid-12 > .fluid-row > .fluid-after-4 { margin-right: 34.375%; }
470
+ .fluid-12 > .fluid-row > .fluid-5 { width: 39.58333333%; }
471
+ .fluid-12 > .fluid-row > .fluid-before-5 { margin-left: 42.70833333%; }
472
+ .fluid-12 > .fluid-row > .fluid-after-5 { margin-right: 42.70833333%; }
473
+ .fluid-12 > .fluid-row > .fluid-6 { width: 47.91666667%; }
474
+ .fluid-12 > .fluid-row > .fluid-before-6 { margin-left: 51.04166667%; }
475
+ .fluid-12 > .fluid-row > .fluid-after-6 { margin-right: 51.04166667%; }
476
+ .fluid-12 > .fluid-row > .fluid-7 { width: 56.25%; }
477
+ .fluid-12 > .fluid-row > .fluid-before-7 { margin-left: 59.375%; }
478
+ .fluid-12 > .fluid-row > .fluid-after-7 { margin-right: 59.375%; }
479
+ .fluid-12 > .fluid-row > .fluid-8 { width: 64.58333333%; }
480
+ .fluid-12 > .fluid-row > .fluid-before-8 { margin-left: 67.70833333%; }
481
+ .fluid-12 > .fluid-row > .fluid-after-8 { margin-right: 67.70833333%; }
482
+ .fluid-12 > .fluid-row > .fluid-9 { width: 72.91666667%; }
483
+ .fluid-12 > .fluid-row > .fluid-before-9 { margin-left: 76.04166667%; }
484
+ .fluid-12 > .fluid-row > .fluid-after-9 { margin-right: 76.04166667%; }
485
+ .fluid-12 > .fluid-row > .fluid-10 { width: 81.25%; }
486
+ .fluid-12 > .fluid-row > .fluid-before-10 { margin-left: 84.375%; }
487
+ .fluid-12 > .fluid-row > .fluid-after-10 { margin-right: 84.375%; }
488
+ .fluid-12 > .fluid-row > .fluid-11 { width: 89.58333333%; }
489
+ .fluid-12 > .fluid-row > .fluid-before-11 { margin-left: 92.70833333%; }
490
+ .fluid-12 > .fluid-row > .fluid-after-11 { margin-right: 92.70833333%; }
491
+
492
+ .fluid-box { margin-bottom: 20px; }
493
+
494
+ .float-left, .float-right { margin-bottom: 10px; }
495
+
496
+ .float-left { float: left; margin-right: 10px; }
497
+
498
+ .float-right { float: right; margin-left: 10px; }
499
+
500
+ header, #main, footer { width: 960px; margin: 0 auto; }
501
+
502
+ header, footer { width: 940px; }
503
+
504
+ header { background-color: blue; height: 100px; }
505
+
506
+ footer { background-color: #ccc; }
507
+
508
+ .left-column { margin: 0 10px; float: left; width: 220px; }
509
+
510
+ .main-column { margin: 0 10px; float: left; width: 700px; }
511
+ .main-column section { width: auto; margin: 0 -10px; }
512
+ .main-column section.intro { margin: 0; }
513
+ .main-column article { margin: 0 10px; float: left; width: 460px; }
514
+ .main-column aside { margin: 0 10px; float: left; width: 220px; }
515
+ .main-column aside .box img { width: 220px; }
516
+
517
+ @media only screen and (min-width: 0px) { .measure { background-color: red; }
518
+ header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
519
+ header, footer { max-width: none; width: auto; margin: 0 3.125%; }
520
+ .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
521
+ .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
522
+ .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
523
+ .main-column section.intro { margin: 0; }
524
+ .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
525
+ .main-column article .float-left, .main-column article .float-right { margin-bottom: 3.33333333%; }
526
+ .main-column article .float-left { float: none; margin-right: 0; }
527
+ .main-column article .float-right { float: none; margin-left: 0; }
528
+ .main-column article img.grid-3 { width: 100%; }
529
+ .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 3.125%; float: left; width: 93.75%; }
530
+ .main-column aside .box img { width: 100%; } }
531
+ @media only screen and (min-width: 320px) { .measure { background-color: orange; } }
532
+ @media only screen and (min-width: 480px) { .measure { background-color: yellow; }
533
+ header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
534
+ header, footer { max-width: none; width: auto; margin: 0 2.08333333%; }
535
+ .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
536
+ .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
537
+ .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
538
+ .main-column section.intro { margin: 0; }
539
+ .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
540
+ .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.17391304%; }
541
+ .main-column article .float-left { float: left; margin-right: 2.17391304%; }
542
+ .main-column article .float-right { float: right; margin-left: 2.17391304%; }
543
+ .main-column article img.grid-3 { width: 47.82608696%; }
544
+ .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
545
+ .main-column aside .box img { width: 100%; } }
546
+ @media only screen and (min-width: 540px) { .measure { background-color: green; } }
547
+ @media only screen and (min-width: 600px) { .measure { background-color: blue; color: white; }
548
+ header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
549
+ header, footer { max-width: none; width: auto; margin: 0 1.5625%; }
550
+ .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 34.375%; }
551
+ .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 59.375%; }
552
+ .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
553
+ .main-column section.intro { margin: 0; }
554
+ .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.5%; float: left; width: 95%; }
555
+ .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.63157895%; }
556
+ .main-column article .float-left { float: left; margin-right: 2.63157895%; }
557
+ .main-column article .float-right { float: right; margin-left: 2.63157895%; }
558
+ .main-column article img.grid-3 { width: 57.89473684%; }
559
+ .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.5%; float: left; width: 95%; }
560
+ .main-column aside .box img { width: 100%; } }
561
+ @media only screen and (min-width: 768px) { .measure { background-color: purple; color: white; }
562
+ header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
563
+ header, footer { max-width: none; width: auto; margin: 0 1.38888889%; }
564
+ .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.38888889%; float: left; width: 30.55555556%; }
565
+ .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.38888889%; float: left; width: 63.88888889%; }
566
+ .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
567
+ .main-column section.intro { margin: 0; }
568
+ .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
569
+ .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.17391304%; }
570
+ .main-column article .float-left { float: left; margin-right: 2.17391304%; }
571
+ .main-column article .float-right { float: right; margin-left: 2.17391304%; }
572
+ .main-column article img.grid-3 { width: 47.82608696%; }
573
+ .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 2.08333333%; float: left; width: 95.83333333%; }
574
+ .main-column aside .box img { width: 100%; } }
575
+ @media only screen and (min-width: 800px) { .measure { background-color: blue; color: white; }
576
+ header, #main, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; }
577
+ header, footer { max-width: none; width: auto; margin: 0 1.13636364%; }
578
+ .left-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.13636364%; float: left; width: 25%; }
579
+ .main-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.13636364%; float: left; width: 70.45454545%; }
580
+ .main-column section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: auto; margin: 0 -1.06382979%; }
581
+ .main-column section.intro { margin: 0; }
582
+ .main-column article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 59.375%; }
583
+ .main-column article .float-left, .main-column article .float-right { margin-bottom: 2.63157895%; }
584
+ .main-column article .float-left { float: left; margin-right: 2.63157895%; }
585
+ .main-column article .float-right { float: right; margin-left: 2.63157895%; }
586
+ .main-column article img.grid-3 { width: 57.89473684%; }
587
+ .main-column aside { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0 1.5625%; float: left; width: 34.375%; }
588
+ .main-column aside .box img { width: 100%; } }
589
+ @media only screen and (min-width: 960px) { .measure { background-color: green; }
590
+ header, #main, footer { width: 960px; margin: 0 auto; }
591
+ header, footer { width: 940px; }
592
+ .left-column { margin: 0 10px; float: left; width: 220px; }
593
+ .main-column { margin: 0 10px; float: left; width: 700px; }
594
+ .main-column section { width: auto; margin: 0 -10px; }
595
+ .main-column section.intro { margin: 0; }
596
+ .main-column article { margin: 0 10px; float: left; width: 460px; }
597
+ .main-column article .float-left, .main-column article .float-right { margin-bottom: 10px; }
598
+ .main-column article .float-left { float: left; margin-right: 10px; }
599
+ .main-column article .float-right { float: right; margin-left: 10px; }
600
+ .main-column article img.grid-3 { width: 220px; }
601
+ .main-column aside { margin: 0 10px; float: left; width: 220px; }
602
+ .main-column aside .box img { width: 220px; } }
603
+ @media only screen and (min-width: 992px) { .measure { background-color: yellow; } }
604
+ @media only screen and (min-width: 1024px) { .measure { background-color: orange; } }
605
+ @media only screen and (min-width: 1280px) { .measure { background-color: red; } }
606
+ .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
607
+ .ir br { display: none; }
608
+
609
+ .hidden { display: none !important; visibility: hidden; }
610
+
611
+ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
612
+ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
613
+
614
+ .invisible { visibility: hidden; }
615
+
616
+ .clearfix:before, .page:before, .row:before, .page > .row:before, .fluid-page:before, .fluid-row:before, .fluid-page > .fluid-row:before, header:before, #main:before, footer:before, .main-column section:before, .clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { content: ""; display: table; }
617
+ .clearfix:after, .page:after, .row:after, .page > .row:after, .fluid-page:after, .fluid-row:after, .fluid-page > .fluid-row:after, header:after, #main:after, footer:after, .main-column section:after { clear: both; }
618
+ .clearfix, .page, .row, .page > .row, .fluid-page, .fluid-row, .fluid-page > .fluid-row, header, #main, footer, .main-column section { *zoom: 1; }