compass-grid-plugin 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (18) hide show
  1. data/.gitignore +4 -7
  2. data/example/config.rb +0 -1
  3. data/example/example.html +1 -1
  4. data/example/{test.html → fixed.html} +3 -3
  5. data/example/fluid.html +430 -0
  6. data/example/scss/example.scss +1 -1
  7. data/example/scss/{test.scss → fixed.scss} +1 -5
  8. data/example/scss/{percentage.scss → fluid.scss} +0 -16
  9. data/example/scss/media.scss +2 -19
  10. data/lib/compass-grid.rb +1 -1
  11. data/lib/compass/grid/version.rb +1 -1
  12. data/stylesheets/grid/_fluid.scss +8 -3
  13. metadata +6 -10
  14. data/example/css/example.css +0 -97
  15. data/example/css/media.css +0 -618
  16. data/example/css/percentage.css +0 -544
  17. data/example/css/test.css +0 -113
  18. data/example/percentage.html +0 -430
data/example/scss/example.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // import the grid
2
2
  @import "grid";
3
- @include grid-css;
3
+ $grid-clearfix-class: false;
4
4
 
5
5
  // establishes page width and centers
6
6
  #container {
data/example/scss/{test.scss → fixed.scss} RENAMED
@@ -23,8 +23,4 @@
23
23
  @for $i from 1 through $grid-columns {
24
24
  .grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
25
25
  }
26
- }
27
-
28
- // add a clearfix rule, requires compass
29
- @import "compass/utilities/general/clearfix";
30
- .clearfix { @include pie-clearfix; }
26
+ }
data/example/scss/{percentage.scss → fluid.scss} RENAMED
@@ -1,16 +1,3 @@
1
- // H5BP
2
- @import "h5bp";
3
- @include h5bp-display;
4
- @include h5bp-base;
5
- //@include h5bp-selection;
6
- @include h5bp-links;
7
- @include h5bp-typography;
8
- @include h5bp-lists;
9
- @include h5bp-embeds;
10
- @include h5bp-figures;
11
- @include h5bp-forms;
12
- @include h5bp-tables;
13
-
14
1
  // import the grid
15
2
  @import "grid";
16
3
  @import "grid/fluid";
@@ -63,6 +50,3 @@
63
50
  .grid-#{$i} { width: grid-width($i, -$grid-gutter-width); }
64
51
  }
65
52
  }
66
-
67
-
68
- @include h5bp-helpers;
data/example/scss/media.scss CHANGED
@@ -1,21 +1,6 @@
1
- // H5BP
2
- @import "h5bp";
3
- @include h5bp-display;
4
- @include h5bp-base;
5
- //@include h5bp-selection;
6
- @include h5bp-links;
7
- @include h5bp-typography;
8
- @include h5bp-lists;
9
- @include h5bp-embeds;
10
- @include h5bp-figures;
11
- @include h5bp-forms;
12
- @include h5bp-tables;
13
-
14
1
  // import the grid
15
2
  @import "grid";
16
3
  @import "grid/fluid";
17
- @include grid-css;
18
- @include fluid-css;
19
4
 
20
5
  // generic styles
21
6
  .float-left, .float-right { margin-bottom: ($grid-gutter-width / 2); }
@@ -62,7 +47,7 @@ footer {
62
47
  // Responsive
63
48
  //-----------------------------------
64
49
  // Old/Small Android
65
- // 0 to 320px
50
+ // smaller than 320px
66
51
  // 3 columns
67
52
  @media only screen and (min-width: 0px) {
68
53
  .measure { background-color: red; }
@@ -342,6 +327,4 @@ footer {
342
327
  // retina display
343
328
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
344
329
 
345
- }
346
-
347
- @include h5bp-helpers;
330
+ }
data/lib/compass-grid.rb CHANGED
@@ -2,4 +2,4 @@ require 'compass' # Ensure Compass
2
2
  require 'compass/grid'
3
3
 
4
4
  # Ensure maximum useful precision
5
- Sass::Script::Number.precision = 8
5
+ # Sass::Script::Number.precision = 8
data/lib/compass/grid/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Compass
2
2
  module Grid
3
- VERSION = '0.0.1'
3
+ VERSION = '0.0.2'
4
4
  end
5
5
  end
data/stylesheets/grid/_fluid.scss CHANGED
@@ -17,16 +17,21 @@
17
17
  width: fluid-column-width($i, $plus, $parent, $parent-plus);
18
18
  }
19
19
 
20
- // return a percentage width relative to columns
20
+ // return a percentage width relative to a column width
21
21
  @function fluid-column-width($i, $plus: 0, $parent: $grid-columns, $parent-plus: 0) {
22
- @return percentage(grid-column-width($i, $plus) / grid-column-width($parent, $parent-plus + $grid-gutter-width));
22
+ @return fluid-width(grid-column-width($i, $plus), grid-column-width($parent, $parent-plus + $grid-gutter-width));
23
23
  }
24
24
 
25
- // return a percentage width relative to lengths
25
+ // return a percentage width relative to a parent width
26
26
  @function fluid-width($width, $parent-width: grid-column-width($grid-columns, $grid-gutter-width)) {
27
27
  @return percentage($width / $parent-width);
28
28
  }
29
29
 
30
+ // return a percentage for a half-pixel
31
+ @function fluid-nudge($parent-width: grid-column-width($grid-columns, $grid-gutter-width), $vendor: webkit) {
32
+ @return percentage(if($vendor == ie, -0.5px, 0.5px) / $parent-width);
33
+ }
34
+
30
35
 
31
36
  //-----------------------------------
32
37
  // Containers
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-grid-plugin
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.1
4
+ version: 0.0.2
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-04-20 00:00:00.000000000 Z
12
+ date: 2012-04-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: compass
@@ -40,20 +40,16 @@ files:
40
40
  - README.md
41
41
  - compass-grid-plugin.gemspec
42
42
  - example/config.rb
43
- - example/css/example.css
44
- - example/css/media.css
45
- - example/css/percentage.css
46
- - example/css/test.css
47
43
  - example/example.html
44
+ - example/fixed.html
45
+ - example/fluid.html
48
46
  - example/i/dino-1.jpg
49
47
  - example/i/dino-2.png
50
48
  - example/media.html
51
- - example/percentage.html
52
49
  - example/scss/example.scss
50
+ - example/scss/fixed.scss
51
+ - example/scss/fluid.scss
53
52
  - example/scss/media.scss
54
- - example/scss/percentage.scss
55
- - example/scss/test.scss
56
- - example/test.html
57
53
  - lib/compass-grid.rb
58
54
  - lib/compass/grid.rb
59
55
  - lib/compass/grid/version.rb
data/example/css/example.css DELETED
@@ -1,97 +0,0 @@
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 DELETED
@@ -1,618 +0,0 @@
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; }