07845ed8cd64e53109888ed41b60f5ee570c0b52
[lhc/web/clavettes.git] / css / habillage.css
1 @charset "UTF-8";
2 html, body, div, span, applet, object, iframe,
3 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4 a, abbr, acronym, address, big, cite, code,
5 del, dfn, em, img, ins, kbd, q, s, samp,
6 small, strike, strong, sub, sup, tt, var,
7 b, u, i, center,
8 dl, dt, dd, ol, ul, li,
9 fieldset, form, label, legend,
10 table, caption, tbody, tfoot, thead, tr, th, td,
11 article, aside, canvas, details, embed,
12 figure, figcaption, footer, header, hgroup,
13 menu, nav, output, ruby, section, summary,
14 time, mark, audio, video {
15 margin: 0;
16 padding: 0;
17 border: 0;
18 font: inherit;
19 font-size: 100%;
20 vertical-align: baseline;
21 font-family: sans-serif;
22 color: #0c0fb7;
23 text-align: left; }
24
25 html, body, span, applet, object, iframe,
26 blockquote, pre, section,
27 abbr, acronym, address, big, cite, code,
28 del, dfn, em, ins, kbd, q, s, samp,
29 small, strike, strong, sub, sup, tt, var,
30 dl, dt, dd, ol, ul, li,
31 fieldset, form, label, legend,
32 table, caption, tbody, tfoot, thead, tr, th, td,
33 article, aside, canvas, details, embed,
34 figure, figcaption, hgroup,
35 menu, nav, output, ruby, summary, mark, audio, video {
36 background-color: #ffffff;
37 background: none; }
38
39 html {
40 line-height: 1.1; }
41
42 ol, ul {
43 list-style: none; }
44
45 table {
46 border-collapse: collapse;
47 border-spacing: 0; }
48
49 caption, th, td {
50 text-align: left;
51 font-weight: normal;
52 vertical-align: middle; }
53
54 q, blockquote {
55 quotes: none; }
56
57 q:before, q:after, blockquote:before, blockquote:after {
58 content: "";
59 content: none; }
60
61 a img {
62 border: none; }
63
64 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
65 display: block; }
66
67 * {
68 -moz-box-sizing: border-box;
69 -webkit-box-sizing: border-box;
70 box-sizing: border-box; }
71
72 body {
73 margin: 0;
74 padding: 0; }
75
76 header {
77 margin: 15px auto 0 auto;
78 width: 1200px; }
79
80 header .spip_logos {
81 margin-left: 10px;
82 position: absolute; }
83
84 #wrap {
85 padding-top: 130px;
86 width: 100%;
87 margin: 0 auto; }
88
89 a {
90 color: #05ffbc;
91 text-decoration: none;
92 -webkit-transition: all 0.3s ease 0s;
93 -moz-transition: all 0.3s ease 0s;
94 -ms-transition: all 0.3s ease 0s;
95 -o-transition: all 0.3s ease 0s;
96 transition: all 0.3s ease 0s; }
97
98 a:focus, a:hover, a:active {
99 background: none;
100 color: #0c0fb7;
101 -webkit-transition: all 0.3s ease 0s;
102 -moz-transition: all 0.3s ease 0s;
103 -ms-transition: all 0.3s ease 0s;
104 -o-transition: all 0.3s ease 0s;
105 transition: all 0.3s ease 0s; }
106
107 h1 {
108 margin: 0;
109 padding: 0;
110 margin-top: 15px;
111 margin-left: 15px;
112 font-size: 1.9em;
113 display: inline-block;
114 font-weight: bold; }
115
116 h1:hover {
117 text-decoration: underline; }
118
119 h2 {
120 margin: 15px 15px;
121 font-size: 1.3em;
122 display: inline-block; }
123
124 h3 {
125 margin: 15px;
126 display: inline-block; }
127
128 p {
129 margin: 0 15px;
130 padding-bottom: 15px;
131 text-decoration: none;
132 text-align: justify; }
133
134 /*1ERE COLONNE*/
135 .titre {
136 background-color: #05ffbc;
137 height: 47px;
138 width: 100%;
139 color: #fff;
140 margin: 0 0 15px 0;
141 padding: 10px 15px;
142 text-transform: uppercase;
143 font-family: "Trebuchet MS", Helvetica, arial, sans-serif;
144 font-size: 1.7em;
145 -webkit-transition: all 0.3s ease 0s;
146 -moz-transition: all 0.3s ease 0s;
147 -ms-transition: all 0.3s ease 0s;
148 -o-transition: all 0.3s ease 0s;
149 transition: all 0.3s ease 0s; }
150
151 .titre:hover {
152 background-color: #0c0fb7;
153 -webkit-transition: all 0.3s ease 0s;
154 -moz-transition: all 0.3s ease 0s;
155 -ms-transition: all 0.3s ease 0s;
156 -o-transition: all 0.3s ease 0s;
157 transition: all 0.3s ease 0s; }
158
159 #ateliers {
160 margin: 0 10px; }
161
162 #ateliers:after {
163 content: "";
164 /* Important, sinon l'élément n'est pas généré. */
165 display: table;
166 clear: both; }
167
168 #ateliers ul {
169 padding: 0;
170 margin: 0;
171 list-style-type: none; }
172
173 #ateliers ul li {
174 margin-bottom: 15px; }
175
176 .descriptif {
177 margin-left: 15px; }
178
179 #ateliers p {
180 margin: 15px 15px 0 0;
181 font-size: 1.0em;
182 text-align: left; }
183
184 #ateliers address {
185 margin: 0 0 0 15px;
186 line-height: 0.6; }
187
188 .horairesouvertures {
189 margin: 0 0 0 15px; }
190
191 .logoatelier {
192 margin: auto;
193 width: 300px; }
194
195 #ateliers nav {
196 padding-top: 15px;
197 clear: both; }
198
199 .fa {
200 color: #05ffbc; }
201
202 .fa:hover {
203 color: #0c0fb7; }
204
205 /*2EME COLONNE*/
206 #news {
207 overflow: hidden;
208 margin: 0 10px; }
209
210 .article {
211 background-color: #e8e3e1;
212 margin: 0 0 15px 0;
213 line-height: 1.3; }
214
215 .spip_logo {
216 display: none; }
217
218 .article .spip_logos {
219 display: none; }
220
221 .sourcearticle {
222 width: 20px;
223 height: 20px;
224 -moz-border-radius: 10px;
225 -webkit-border-radius: 10px;
226 border-radius: 10px; }
227
228 .article img {
229 width: 100%; }
230
231 address {
232 padding-bottom: 10px; }
233
234 address p {
235 margin: 0;
236 padding: 0; }
237
238 .historique {
239 background-color: #ffd2a1;
240 margin: 0 15px 15px 15px; }
241
242 .historique h1 {
243 width: 100%; }
244
245 #atelierdescription {
246 margin: 0 10px; }
247
248 #atelierdescription #news {
249 margin: 0; }
250
251 #atelierdescription img {
252 width: 100%; }
253
254 /*3EME COLONNE*/
255 .map {
256 height: 300px;
257 margin: 0 10px 15px 10px;
258 overflow: hidden; }
259
260 .agenda {
261 background-color: #05ffbc;
262 height: 500px;
263 margin: 0 10px 15px 10px;
264 padding-right: 10px;
265 overflow-y: scroll; }
266
267 .agenda p {
268 padding: 0; }
269
270 .agenda ul {
271 list-style-type: none;
272 padding: 0;
273 margin: 0;
274 padding-top: 15px; }
275
276 .date {
277 float: left;
278 font-size: 1.7em;
279 clear: both; }
280
281 .event {
282 display: block;
283 margin-bottom: 10px;
284 padding-top: 5px; }
285
286 .horaire {
287 font-size: 0.8em;
288 margin-bottom: 20px;
289 display: block; }
290
291 .nature {
292 overflow-y: scroll;
293 height: 70px; }
294
295 /*RESPONSIVE*/
296 .col-1, .col-m-1, .col-l-1, .col-2, .col-m-2, .col-l-2, .col-3, .col-m-3, .col-l-3, .col-4, .col-m-4, .col-l-4, .col-5, .col-m-5, .col-l-5, .col-6, .col-m-6, .col-l-6, .col-7, .col-m-7, .col-l-7, .col-8, .col-m-8, .col-l-8, .col-9, .col-m-9, .col-l-9, .col-10, .col-m-10, .col-l-10, .col-11, .col-m-11, .col-l-11, .col-12, .col-m-12, .col-l-12 {
297 float: left;
298 position: relative; }
299
300 .col-1 {
301 width: 8.33333%; }
302
303 .col-2 {
304 width: 16.66667%; }
305
306 .col-3 {
307 width: 25%; }
308
309 .col-4 {
310 width: 33.33333%; }
311
312 .col-5 {
313 width: 41.66667%; }
314
315 .col-6 {
316 width: 50%; }
317
318 .col-7 {
319 width: 58.33333%; }
320
321 .col-8 {
322 width: 66.66667%; }
323
324 .col-9 {
325 width: 75%; }
326
327 .col-10 {
328 width: 83.33333%; }
329
330 .col-11 {
331 width: 91.66667%; }
332
333 .col-12 {
334 width: 100%; }
335
336 @media only screen and (min-width: 650px) {
337 .col-m-1 {
338 width: 8.33333%; }
339
340 .col-m-2 {
341 width: 16.66667%; }
342
343 .col-m-3 {
344 width: 25%; }
345
346 .col-m-4 {
347 width: 33.33333%; }
348
349 .col-m-5 {
350 width: 41.66667%; }
351
352 .col-m-6 {
353 width: 50%; }
354
355 .col-m-7 {
356 width: 58.33333%; }
357
358 .col-m-8 {
359 width: 66.66667%; }
360
361 .col-m-9 {
362 width: 75%; }
363
364 .col-m-10 {
365 width: 83.33333%; }
366
367 .col-m-11 {
368 width: 91.66667%; }
369
370 .col-m-12 {
371 width: 100%; } }
372 @media only screen and (min-width: 1200px) {
373 .col-l-1 {
374 width: 8.33333%; }
375
376 .col-l-2 {
377 width: 16.66667%; }
378
379 .col-l-3 {
380 width: 25%; }
381
382 .col-l-4 {
383 width: 33.33333%; }
384
385 .col-l-5 {
386 width: 41.66667%; }
387
388 .col-l-6 {
389 width: 50%; }
390
391 .col-l-7 {
392 width: 58.33333%; }
393
394 .col-l-8 {
395 width: 66.66667%; }
396
397 .col-l-9 {
398 width: 75%; }
399
400 .col-l-10 {
401 width: 83.33333%; }
402
403 .col-l-11 {
404 width: 91.66667%; }
405
406 .col-l-12 {
407 width: 100%; }
408
409 #wrap {
410 width: 1200px; }
411
412 .wrap {
413 width: auto; } }
414 .row:before, .row:after {
415 content: "";
416 display: table; }
417
418 .row:after {
419 clear: both; }
420
421 .row {
422 margin: 0 -10px;
423 zoom: 1; }
424
425 /*FOOTER*/
426 footer {
427 clear: both;
428 height: 100px;
429 background-color: #05ffbc; }
430
431 footer ul {
432 padding: 0;
433 margin: 0 auto;
434 list-style-type: none;
435 padding-top: 30px; }
436
437 .textfooter {
438 width: 500px;
439 margin: 0 auto; }
440
441 footer li {
442 float: left;
443 /*pour IE*/
444 text-align: center; }
445
446 footer ul li a {
447 display: block;
448 float: left;
449 text-decoration: none;
450 color: #120260; }
451
452 footer ul li a:hover {
453 border-bottom: solid #1d0b78; }
454
455 /*# sourceMappingURL=habillage.css.map */