|
1 /* Start: Recommended Isotope styles */ |
|
2 |
|
3 /**** Isotope Filtering ****/ |
|
4 |
|
5 .page-id-1330 .isotope-item { |
|
6 z-index: 2; |
|
7 } |
|
8 |
|
9 .page-id-1330 .isotope-hidden.isotope-item { |
|
10 pointer-events: none; |
|
11 z-index: 1; |
|
12 } |
|
13 |
|
14 /**** Isotope CSS3 transitions ****/ |
|
15 |
|
16 .page-id-1330 .isotope, |
|
17 .page-id-1330 .isotope .isotope-item { |
|
18 -webkit-transition-duration: 0.8s; |
|
19 -moz-transition-duration: 0.8s; |
|
20 -ms-transition-duration: 0.8s; |
|
21 -o-transition-duration: 0.8s; |
|
22 transition-duration: 0.8s; |
|
23 } |
|
24 |
|
25 .page-id-1330 .isotope { |
|
26 -webkit-transition-property: height, width; |
|
27 -moz-transition-property: height, width; |
|
28 -ms-transition-property: height, width; |
|
29 -o-transition-property: height, width; |
|
30 transition-property: height, width; |
|
31 } |
|
32 |
|
33 .page-id-1330 .isotope .isotope-item { |
|
34 -webkit-transition-property: -webkit-transform, opacity; |
|
35 -moz-transition-property: -moz-transform, opacity; |
|
36 -ms-transition-property: -ms-transform, opacity; |
|
37 -o-transition-property: -o-transform, opacity; |
|
38 transition-property: transform, opacity; |
|
39 } |
|
40 |
|
41 /**** disabling Isotope CSS3 transitions ****/ |
|
42 |
|
43 .page-id-1330 .isotope.no-transition, |
|
44 .page-id-1330 .isotope.no-transition .isotope-item, |
|
45 .page-id-1330 .isotope .isotope-item.no-transition { |
|
46 -webkit-transition-duration: 0s; |
|
47 -moz-transition-duration: 0s; |
|
48 -ms-transition-duration: 0s; |
|
49 -o-transition-duration: 0s; |
|
50 transition-duration: 0s; |
|
51 } |
|
52 |
|
53 /* End: Recommended Isotope styles */ |
|
54 |
|
55 |
|
56 |
|
57 /* disable CSS transitions for containers with infinite scrolling*/ |
|
58 .page-id-1330 .isotope.infinite-scrolling { |
|
59 -webkit-transition: none; |
|
60 -moz-transition: none; |
|
61 -ms-transition: none; |
|
62 -o-transition: none; |
|
63 transition: none; |
|
64 } |
|
65 |
|
66 .page-id-1330 #container { |
|
67 border: 1px solid #666; |
|
68 padding: 5px; |
|
69 margin-bottom: 20px; |
|
70 } |
|
71 |
|
72 .page-id-1330 .element { |
|
73 width: 110px; |
|
74 height: 110px; |
|
75 margin: 5px; |
|
76 float: left; |
|
77 overflow: hidden; |
|
78 position: relative; |
|
79 background: #888; |
|
80 color: #222; |
|
81 -webkit-border-top-right-radius: 1.2em; |
|
82 -moz-border-radius-topright: 1.2em; |
|
83 border-top-right-radius: 1.2em; |
|
84 } |
|
85 |
|
86 .page-id-1330 .element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } |
|
87 .page-id-1330 .element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } |
|
88 .page-id-1330 .element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } |
|
89 .page-id-1330 .element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } |
|
90 .page-id-1330 .element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } |
|
91 .page-id-1330 .element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } |
|
92 .page-id-1330 .element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } |
|
93 .page-id-1330 .element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } |
|
94 .page-id-1330 .element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } |
|
95 .page-id-1330 .element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } |
|
96 |
|
97 |
|
98 .page-id-1330 .element * { |
|
99 position: absolute; |
|
100 margin: 0; |
|
101 } |
|
102 |
|
103 .page-id-1330 .element .symbol { |
|
104 left: 0.2em; |
|
105 top: 0.4em; |
|
106 font-size: 3.8em; |
|
107 line-height: 1.0em; |
|
108 color: #FFF; |
|
109 } |
|
110 .page-id-1330 .element.large .symbol { |
|
111 font-size: 4.5em; |
|
112 } |
|
113 |
|
114 .page-id-1330 .element.fake .symbol { |
|
115 color: #000; |
|
116 } |
|
117 |
|
118 .page-id-1330 .element .name { |
|
119 left: 0.5em; |
|
120 bottom: 1.6em; |
|
121 font-size: 1.05em; |
|
122 } |
|
123 |
|
124 .page-id-1330 .element .weight { |
|
125 font-size: 0.9em; |
|
126 left: 0.5em; |
|
127 bottom: 0.5em; |
|
128 } |
|
129 |
|
130 .page-id-1330 .element .number { |
|
131 font-size: 1.25em; |
|
132 font-weight: bold; |
|
133 color: hsla(0,0%,0%,.5); |
|
134 right: 0.5em; |
|
135 top: 0.5em; |
|
136 } |
|
137 |
|
138 .page-id-1330 .variable-sizes .element.width2 { width: 230px; } |
|
139 |
|
140 .page-id-1330 .variable-sizes .element.height2 { height: 230px; } |
|
141 |
|
142 .page-id-1330 .variable-sizes .element.width2.height2 { |
|
143 font-size: 2.0em; |
|
144 } |
|
145 |
|
146 .page-id-1330 .element.large, |
|
147 .page-id-1330 .variable-sizes .element.large, |
|
148 .page-id-1330 .variable-sizes .element.large.width2.height2 { |
|
149 font-size: 3.0em; |
|
150 width: 350px; |
|
151 height: 350px; |
|
152 z-index: 100; |
|
153 } |
|
154 |
|
155 .page-id-1330 .clickable .element:hover { |
|
156 cursor: pointer; |
|
157 } |
|
158 |
|
159 .page-id-1330 .clickable .element:hover h3 { |
|
160 text-shadow: |
|
161 0 0 10px white, |
|
162 0 0 10px white |
|
163 ; |
|
164 } |
|
165 |
|
166 .page-id-1330 .clickable .element:hover h2 { |
|
167 color: white; |
|
168 } |
|
169 |
|
170 /**** Example Options ****/ |
|
171 |
|
172 #.page-id-1330 options { |
|
173 padding-bottom: 1.0em; |
|
174 } |
|
175 |
|
176 .page-id-1330 #options h3 { |
|
177 margin-bottom: 0.2em; |
|
178 font-size: 15px; |
|
179 } |
|
180 |
|
181 .page-id-1330 #options h4 { |
|
182 font-weight: bold; |
|
183 } |
|
184 |
|
185 .page-id-1330 #options ul { |
|
186 margin: 0; |
|
187 list-style: none; |
|
188 } |
|
189 |
|
190 .page-id-1330 #options ul ul { |
|
191 margin-left: 1.5em; |
|
192 } |
|
193 |
|
194 .page-id-1330 #options li { |
|
195 float: left; |
|
196 margin-bottom: 0.2em; |
|
197 } |
|
198 |
|
199 .page-id-1330 #options li a { |
|
200 display: block; |
|
201 padding: 0.4em 0.5em; |
|
202 background-color: #DDD; |
|
203 color: #222; |
|
204 font-weight: bold; |
|
205 text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); |
|
206 background-image: -webkit-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); |
|
207 background-image: -moz-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); |
|
208 background-image: -ms-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); |
|
209 background-image: -o-linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); |
|
210 background-image: linear-gradient( top, hsla( 0, 0%, 100%, 0.5 ), hsla( 0, 0%, 100%, 0.0 ) ); |
|
211 } |
|
212 |
|
213 .page-id-1330 #options li a:hover { |
|
214 background-color: #5BF; |
|
215 } |
|
216 |
|
217 .page-id-1330 #options li a:active { |
|
218 background-color: #39D; |
|
219 -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); |
|
220 -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); |
|
221 -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); |
|
222 box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); |
|
223 } |
|
224 |
|
225 .page-id-1330 #options li a { |
|
226 border-left: 1px solid hsla( 0, 0%, 100%, 0.3 ); |
|
227 border-right: 1px solid hsla( 0, 0%, 0%, 0.2 ); |
|
228 } |
|
229 |
|
230 .page-id-1330 #options li:first-child a { |
|
231 border-radius: 7px 0 0 7px; |
|
232 border-left: none; |
|
233 } |
|
234 |
|
235 .page-id-1330 #options li:last-child a { |
|
236 border-radius: 0 7px 7px 0; |
|
237 } |
|
238 |
|
239 .page-id-1330 #options li a.selected { |
|
240 background-color: #13F; |
|
241 text-shadow: none; |
|
242 color: white; |
|
243 } |
|
244 |
|
245 /* Combination filter options*/ |
|
246 |
|
247 .page-id-1330 #options .option-combo { |
|
248 display: inline-block; |
|
249 float: left; |
|
250 margin-right: 10px; |
|
251 } |
|
252 |
|
253 .page-id-1330 #options .option-combo ul { |
|
254 margin-right: 20px; |
|
255 display: inline-block; |
|
256 } |
|
257 |
|
258 .page-id-1330 #options .option-combo h2, |
|
259 .page-id-1330 #options .option-combo h4 { |
|
260 line-height: 34px; |
|
261 margin-bottom: 0; |
|
262 margin-right: 5px; |
|
263 display: inline-block; |
|
264 vertical-align: top; |
|
265 } |
|
266 |
|
267 /* Color shapes */ |
|
268 |
|
269 .page-id-1330 .color-shape { |
|
270 width: 70px; |
|
271 height: 70px; |
|
272 margin: 5px; |
|
273 float: left; |
|
274 } |
|
275 |
|
276 .page-id-1330 .color-shape.round { |
|
277 -webkit-border-radius: 35px; |
|
278 -moz-border-radius: 35px; |
|
279 border-radius: 35px; |
|
280 } |
|
281 |
|
282 .page-id-1330 .color-shape.big.round { |
|
283 -webkit-border-radius: 75px; |
|
284 -moz-border-radius: 75px; |
|
285 border-radius: 75px; |
|
286 } |
|
287 |
|
288 .page-id-1330 .color-shape.red { background: red; } |
|
289 .page-id-1330 .color-shape.blue { background: blue; } |
|
290 .page-id-1330 .color-shape.yellow { background: yellow; } |
|
291 |
|
292 .page-id-1330 .color-shape.wide, .color-shape.big { width: 150px; } |
|
293 .page-id-1330 .color-shape.tall, .color-shape.big { height: 150px; } |
|
294 |
|
295 .page-id-1330 .color-shape a { |
|
296 display: block; |
|
297 height: 100%; |
|
298 } |
|
299 |
|
300 .page-id-1330 .color-shape a:hover { |
|
301 background: white; |
|
302 background: hsla( 0, 0%, 100%, 0.5 ); |
|
303 } |
|
304 |
|
305 /**** Horizontal ****/ |
|
306 |
|
307 .page-id-1330 .horizontal #container { |
|
308 height: 80%; |
|
309 } |
|
310 |
|
311 .page-id-1330 #copy { |
|
312 max-width: 640px; |
|
313 } |
|
314 |
|
315 /**** Photo demo ****/ |
|
316 |
|
317 .page-id-1330 .photos .photo { |
|
318 width: 320px; |
|
319 margin: 5px; |
|
320 float: left; |
|
321 } |
|
322 |
|
323 .page-id-1330 .photos .photo img { |
|
324 display: block; |
|
325 width: 100%; |
|
326 } |
|
327 |
|
328 .page-id-1330 #content { |
|
329 margin-left: 210px; |
|
330 } |
|
331 |
|
332 .page-id-1330 .demos #content { |
|
333 height: 100%; |
|
334 } |
|
335 |
|
336 /**** Docs ****/ |
|
337 |
|
338 .page-id-1330 .docs #content { |
|
339 max-width: 640px; |
|
340 } |
|
341 |
|
342 .page-id-1330 .docs #content a:hover { |
|
343 border-bottom: 1px dotted; |
|
344 } |
|
345 |
|
346 /**** Infinite Scroll ****/ |
|
347 |
|
348 .page-id-1330 #infscr-loading { |
|
349 position: fixed; |
|
350 text-align: center; |
|
351 bottom: 30px; |
|
352 left: 42%; |
|
353 z-index: 100; |
|
354 background: white; |
|
355 background: hsla( 0, 0%, 100%, 0.9 ); |
|
356 padding: 20px; |
|
357 color: #222; |
|
358 font-size: 15px; |
|
359 font-weight: bold; |
|
360 -webkit-border-radius: 10px; |
|
361 -moz-border-radius: 10px; |
|
362 border-radius: 10px; |
|
363 } |
|
364 |
|
365 |
|
366 |
|
367 /* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */ |
|
368 .page-id-1330 .clearfix:before, .clearfix:after { content: ""; display: table; } |
|
369 .page-id-1330 .clearfix:after { clear: both; } |
|
370 .page-id-1330 .clearfix { zoom: 1; } |