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