[CSS] + boucles responsive
[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: #1a0583;
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: 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 text-decoration: none; }
91
92 a:focus, a:hover, a:active {
93 background: none;
94 color: #1a0583; }
95
96 h1 {
97 margin: 0;
98 padding: 0;
99 padding-top: 15px;
100 padding-left: 15px;
101 font-size: 1.9em;
102 display: inline-block;
103 font-weight: bold; }
104
105 h2 {
106 margin: 15px 15px;
107 font-size: 1.3em;
108 display: inline-block; }
109
110 h3 {
111 margin: 15px;
112 display: inline-block; }
113
114 p {
115 margin: 0 15px;
116 padding-bottom: 15px;
117 text-decoration: none;
118 text-align: justify; }
119
120 /*1ERE COLONNE*/
121 #ateliers {
122 margin: 0 10px; }
123
124 #ateliers:after {
125 content: "";
126 /* Important, sinon l'élément n'est pas généré. */
127 display: table;
128 clear: both; }
129
130 #ateliers ul {
131 padding: 0;
132 margin: 0;
133 list-style-type: none; }
134
135 #ateliers ul li {
136 margin-bottom: 15px; }
137
138 #ateliers p {
139 margin: 15px 15px 0 0;
140 font-size: 1.0em;
141 text-align: left; }
142
143 #ateliers p:nth-child(2) {
144 margin: 0px 15px 15px 15px; }
145
146 /*2EME COLONNE*/
147 #news {
148 overflow: hidden; }
149
150 #news img {
151 height: 350px; }
152
153 .article {
154 background-color: #ffaa7f;
155 margin: 0 10px 15px 10px; }
156
157 /*3EME COLONNE*/
158 .map {
159 background-color: #6059d2;
160 height: 300px;
161 margin: 0 10px 15px 10px; }
162
163 .leaflet-control-attribution leaflet-control {
164 z-index: 999; }
165
166 .agenda {
167 background-color: #3ee88d;
168 height: 500px;
169 margin: 0 10px 0px 10px;
170 padding-right: 10px; }
171
172 .agenda p {
173 line-height: 120%; }
174
175 .agenda ul {
176 list-style-type: none;
177 padding: 0;
178 margin: 0;
179 padding-top: 15px; }
180
181 .date {
182 float: left;
183 font-size: 1.7em;
184 clear: both; }
185
186 .horaire {
187 font-size: 0.8em; }
188
189 /*RESPONSIVE*/
190 .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 {
191 float: left;
192 position: relative; }
193
194 .col-1 {
195 width: 8.33333%; }
196
197 .col-2 {
198 width: 16.66667%; }
199
200 .col-3 {
201 width: 25%; }
202
203 .col-4 {
204 width: 33.33333%; }
205
206 .col-5 {
207 width: 41.66667%; }
208
209 .col-6 {
210 width: 50%; }
211
212 .col-7 {
213 width: 58.33333%; }
214
215 .col-8 {
216 width: 66.66667%; }
217
218 .col-9 {
219 width: 75%; }
220
221 .col-10 {
222 width: 83.33333%; }
223
224 .col-11 {
225 width: 91.66667%; }
226
227 .col-12 {
228 width: 100%; }
229
230 @media only screen and (min-width: 650px) {
231 .col-m-1 {
232 width: 8.33333%; }
233
234 .col-m-2 {
235 width: 16.66667%; }
236
237 .col-m-3 {
238 width: 25%; }
239
240 .col-m-4 {
241 width: 33.33333%; }
242
243 .col-m-5 {
244 width: 41.66667%; }
245
246 .col-m-6 {
247 width: 50%; }
248
249 .col-m-7 {
250 width: 58.33333%; }
251
252 .col-m-8 {
253 width: 66.66667%; }
254
255 .col-m-9 {
256 width: 75%; }
257
258 .col-m-10 {
259 width: 83.33333%; }
260
261 .col-m-11 {
262 width: 91.66667%; }
263
264 .col-m-12 {
265 width: 100%; } }
266 @media only screen and (min-width: 1200px) {
267 .col-l-1 {
268 width: 8.33333%; }
269
270 .col-l-2 {
271 width: 16.66667%; }
272
273 .col-l-3 {
274 width: 25%; }
275
276 .col-l-4 {
277 width: 33.33333%; }
278
279 .col-l-5 {
280 width: 41.66667%; }
281
282 .col-l-6 {
283 width: 50%; }
284
285 .col-l-7 {
286 width: 58.33333%; }
287
288 .col-l-8 {
289 width: 66.66667%; }
290
291 .col-l-9 {
292 width: 75%; }
293
294 .col-l-10 {
295 width: 83.33333%; }
296
297 .col-l-11 {
298 width: 91.66667%; }
299
300 .col-l-12 {
301 width: 100%; }
302
303 #wrap {
304 width: 1200px; }
305
306 .wrap {
307 width: auto; } }
308 .row:before, .row:after {
309 content: "";
310 display: table; }
311
312 .row:after {
313 clear: both; }
314
315 .row {
316 margin: 0 -10px;
317 zoom: 1; }
318
319 /*FOOTER*/
320 footer {
321 clear: both;
322 height: 200px;
323 background-color: #ffaa7f; }
324
325 footer ul {
326 padding: 0;
327 margin: 0 auto;
328 list-style-type: none;
329 padding-top: 70px; }
330
331 .textfooter {
332 width: 500px;
333 margin: 0 auto; }
334
335 footer li {
336 float: left;
337 /*pour IE*/
338 text-align: center; }
339
340 footer ul li a {
341 display: block;
342 float: left;
343 text-decoration: none; }
344
345 footer ul li a:hover {
346 border-bottom: solid #1d0b78; }
347
348 /*# sourceMappingURL=habillage.css.map */