Commit | Line | Data |
aebe9a0e |
1 | |
2 | /* Containers |
3 | ----------------------------------------------------------------------------------------------------*/ |
4 | .container_12 { |
5 | margin-left: auto; |
6 | margin-right: auto; |
7 | width: 960px; |
8 | } |
9 | |
10 | /* Grid >> Global |
11 | ----------------------------------------------------------------------------------------------------*/ |
12 | .grid_1, |
13 | .grid_2, |
14 | .grid_3, |
15 | .grid_4, |
16 | .grid_5, |
17 | .grid_6, |
18 | .grid_7, |
19 | .grid_8, |
20 | .grid_9, |
21 | .grid_10, |
22 | .grid_11, |
23 | .grid_12{ |
24 | display:inline; |
25 | float: left; |
26 | position: relative; |
27 | margin-left: 10px; |
28 | margin-right: 10px; |
29 | } |
30 | |
31 | /* Grid >> Children (Alpha ~ First, Omega ~ Last) |
32 | ----------------------------------------------------------------------------------------------------*/ |
33 | |
34 | .alpha { |
35 | margin-left: 0; |
36 | } |
37 | |
38 | .omega { |
39 | margin-right: 0; |
40 | } |
41 | |
42 | /* Grid >> 2 Columns |
43 | ----------------------------------------------------------------------------------------------------*/ |
44 | .container_12 .grid_1 { |
45 | width:60px; |
46 | } |
47 | .container_12 .grid_2 { |
48 | width:140px; |
49 | } |
50 | .container_12 .grid_3 { |
51 | width:220px; |
52 | } |
53 | .container_12 .grid_4 { |
54 | width:300px; |
55 | } |
56 | .container_12 .grid_5 { |
57 | width:380px; |
58 | } |
59 | .container_12 .grid_6 { |
60 | width:460px; |
61 | } |
62 | .container_12 .grid_7 { |
63 | width:540px; |
64 | } |
65 | .container_12 .grid_8 { |
66 | width:620px; |
67 | } |
68 | .container_12 .grid_9 { |
69 | width:700px; |
70 | } |
71 | .container_12 .grid_10 { |
72 | width:780px; |
73 | } |
74 | .container_12 .grid_11 { |
75 | width:860px; |
76 | } |
77 | .container_12 .grid_12 { |
78 | width:940px; |
79 | } |
80 | |
81 | |
82 | |
83 | |
84 | /* Prefix Extra Space >> 2 Columns |
85 | ----------------------------------------------------------------------------------------------------*/ |
86 | .container_12 .prefix_1 { |
87 | padding-left:80px; |
88 | } |
89 | .container_12 .prefix_2 { |
90 | padding-left:160px; |
91 | } |
92 | .container_12 .prefix_3 { |
93 | padding-left:240px; |
94 | } |
95 | .container_12 .prefix_4 { |
96 | padding-left:320px; |
97 | } |
98 | .container_12 .prefix_5 { |
99 | padding-left:400px; |
100 | } |
101 | .container_12 .prefix_6 { |
102 | padding-left:480px; |
103 | } |
104 | .container_12 .prefix_7 { |
105 | padding-left:560px; |
106 | } |
107 | .container_12 .prefix_8 { |
108 | padding-left:640px; |
109 | } |
110 | .container_12 .prefix_9 { |
111 | padding-left:720px; |
112 | } |
113 | .container_12 .prefix_10 { |
114 | padding-left:800px; |
115 | } |
116 | .container_12 .prefix_11 { |
117 | padding-left:880px; |
118 | } |
119 | |
120 | |
121 | /* Suffix Extra Space >> 2 Columns |
122 | ----------------------------------------------------------------------------------------------------*/ |
123 | .container_12 .suffix_1 { |
124 | padding-right:80px; |
125 | } |
126 | .container_12 .suffix_2 { |
127 | padding-right:160px; |
128 | } |
129 | .container_12 .suffix_3 { |
130 | padding-right:240px; |
131 | } |
132 | .container_12 .suffix_4 { |
133 | padding-right:320px; |
134 | } |
135 | .container_12 .suffix_5 { |
136 | padding-right:400px; |
137 | } |
138 | .container_12 .suffix_6 { |
139 | padding-right:480px; |
140 | } |
141 | .container_12 .suffix_7 { |
142 | padding-right:560px; |
143 | } |
144 | .container_12 .suffix_8 { |
145 | padding-right:640px; |
146 | } |
147 | .container_12 .suffix_9 { |
148 | padding-right:720px; |
149 | } |
150 | .container_12 .suffix_10 { |
151 | padding-right:800px; |
152 | } |
153 | .container_12 .suffix_11 { |
154 | padding-right:880px; |
155 | } |
156 | |
157 | |
158 | /* Push Space >> 2 Columns |
159 | ----------------------------------------------------------------------------------------------------*/ |
160 | .container_12 .push_1 { |
161 | left:80px; |
162 | } |
163 | .container_12 .push_2 { |
164 | left:160px; |
165 | } |
166 | .container_12 .push_3 { |
167 | left:240px; |
168 | } |
169 | .container_12 .push_4 { |
170 | left:320px; |
171 | } |
172 | .container_12 .push_5 { |
173 | left:400px; |
174 | } |
175 | .container_12 .push_6 { |
176 | left:480px; |
177 | } |
178 | .container_12 .push_7 { |
179 | left:560px; |
180 | } |
181 | .container_12 .push_8 { |
182 | left:640px; |
183 | } |
184 | .container_12 .push_9 { |
185 | left:720px; |
186 | } |
187 | .container_12 .push_10 { |
188 | left:800px; |
189 | } |
190 | .container_12 .push_11 { |
191 | left:880px; |
192 | } |
193 | |
194 | |
195 | |
196 | |
197 | /* Pull Space >> 2 Columns |
198 | ----------------------------------------------------------------------------------------------------*/ |
199 | .container_12 .pull_1 { |
200 | right:80px; |
201 | } |
202 | .container_12 .pull_2 { |
203 | right:160px; |
204 | } |
205 | .container_12 .pull_3 { |
206 | right:240px; |
207 | } |
208 | .container_12 .pull_4 { |
209 | right:320px; |
210 | } |
211 | .container_12 .pull_5 { |
212 | right:400px; |
213 | } |
214 | .container_12 .pull_6 { |
215 | right:480px; |
216 | } |
217 | .container_12 .pull_7 { |
218 | right:560px; |
219 | } |
220 | .container_12 .pull_8 { |
221 | right:640px; |
222 | } |
223 | .container_12 .pull_9 { |
224 | right:720px; |
225 | } |
226 | .container_12 .pull_10 { |
227 | right:800px; |
228 | } |
229 | .container_12 .pull_11 { |
230 | right:880px; |
231 | } |
232 | |
233 | |
234 | /* Clear Floated Elements |
235 | ----------------------------------------------------------------------------------------------------*/ |
236 | |
237 | |
238 | .clear { |
239 | clear: both; |
240 | display: block; |
241 | overflow: hidden; |
242 | visibility: hidden; |
243 | width: 0; |
244 | height: 0; |
245 | } |
246 | |
247 | |
248 | .clearfix:after { |
249 | clear: both; |
250 | content: ' '; |
251 | display: block; |
252 | font-size: 0; |
253 | line-height: 0; |
254 | visibility: hidden; |
255 | width: 0; |
256 | height: 0; |
257 | } |
258 | |
259 | .clearfix { |
260 | display: inline-block; |
261 | } |
262 | |
263 | * html .clearfix { |
264 | height: 1%; |
265 | } |
266 | |
267 | .clearfix { |
268 | display: block; |
269 | } |