b9330164 |
1 | @charset "utf-8"; |
2 | /* CSS Document */ |
3 | |
4 | |
5 | body{ |
6 | margin:0 auto; |
7 | font-size: 62.5%; |
8 | background-image:url(../img/fond.jpg); |
9 | font-family: Arial, Helvetica, sans-serif; |
10 | color: #5E5E5E; |
11 | } |
12 | |
13 | #containt_principal{ |
14 | width:940px; |
15 | margin:0 auto; |
16 | } |
17 | |
18 | header{ |
19 | width:940px; |
20 | height:184px; |
21 | background-image:url(../img/header2.jpg); |
22 | } |
23 | |
24 | ul{ |
25 | margin:0; |
26 | padding:0; |
27 | } |
28 | |
29 | nav{ |
30 | margin-bottom:30px; |
31 | border-up: 1px solid #cccccc; |
32 | border-left: 1px solid #cccccc; |
33 | border-bottom: 1px solid #cccccc; |
34 | border-radius: 2px 2px 2px 2px; |
35 | box-shadow: 0 0 2px rgba(0,0,0, 0.1); |
36 | overflow: hidden; |
37 | } |
38 | |
39 | nav li{ |
40 | width:13%; |
41 | background:url(../img/bgmenu2.png) right; |
42 | opacity:1; |
43 | float: left; |
44 | list-style: none; |
45 | } |
46 | |
47 | nav li:hover{ |
48 | opacity:0.70; |
49 | } |
50 | |
51 | nav li a{ |
52 | font-size: 14px; |
53 | color:#585858; |
54 | text-decoration:none; |
55 | line-height:43px; |
56 | height: 43px; |
57 | display: block; |
58 | text-align: center; |
59 | } |
60 | |
61 | .rub1{ |
62 | border-top:4px solid #74b0d4; |
63 | width:9%; |
64 | } |
65 | |
66 | .rub1 img{ |
67 | margin-top: 13px; |
68 | } |
69 | |
70 | |
71 | .rub2{ |
72 | border-top:4px solid #ebc634; |
73 | } |
74 | |
75 | .rub3{ |
76 | border-top:4px solid #88b43e; |
77 | } |
78 | |
79 | .rub4{ |
80 | border-top:4px solid #744b82; |
81 | } |
82 | |
83 | .rub5{ |
84 | border-top:4px solid #d82a36; |
85 | } |
86 | |
87 | .rub6{ |
88 | border-top:4px solid #6ea2c1; |
89 | } |
90 | |
91 | .rub7{ |
92 | border-top:4px solid #f7d034; |
93 | } |
94 | |
95 | .rub8{ |
96 | border-top:4px solid #88b43e; |
97 | /*border-right:1px solid #cdcdcd;*/ |
98 | } |
99 | |
100 | /*************************************************************Slideshow********************************************************************************/ |
101 | |
102 | #slideshow{ |
b9330164 |
103 | width: 360px; |
104 | height: 219px; |
105 | padding: 10px; |
106 | margin: 0 auto; |
107 | border: 1px solid #ddd; |
108 | background: #FFF; |
109 | border-radius: 2px 2px 2px 2px; |
110 | /*box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);*/ |
111 | } |
112 | |
113 | .kk ul{ |
114 | background-color:#000099; |
115 | } |
116 | |
117 | #marquee{ |
118 | height: 36px; |
119 | padding:0 10px; |
120 | margin-top: 21px; |
121 | background: #FFF; |
122 | border-radius: 2px 2px 2px 2px; |
123 | border: 1px solid #ddd; |
124 | /*box-shadow: 0 0 3px rgba(0,0,0, 0.2); */ |
125 | } |
126 | |
127 | #marquee a{ |
128 | text-decoration: none; |
129 | color: #5E5E5E; |
130 | } |
131 | |
0163ce58 |
132 | #marquee a:hover{ |
133 | color: #911735; |
134 | } |
135 | |
112f71cd |
136 | .banner { position: relative; overflow: auto; } |
137 | .banner li { list-style: none; } |
138 | .banner ul li { float: left; } |
139 | |
140 | /* annulation des marges sur figure */ |
141 | .banner figure{ |
b9330164 |
142 | padding:0; margin:0; |
112f71cd |
143 | position: relative; |
b9330164 |
144 | } |
145 | |
112f71cd |
146 | /* styles des légendes */ |
147 | .banner figcaption{ |
b9330164 |
148 | position:absolute; |
149 | left:0; right:0; bottom: 0; |
150 | padding: 10px; |
151 | margin:0; |
152 | text-align:left; |
153 | background: #8c0829; |
154 | opacity:0.9; |
155 | height:auto; |
156 | } |
157 | |
112f71cd |
158 | .banner figcaption h5{ |
b9330164 |
159 | margin: 0px 0px 5px 0px; |
160 | font-size:14px; |
161 | color: #fff; |
162 | } |
163 | |
112f71cd |
164 | .banner figcaption p{ |
b9330164 |
165 | margin: 0px; |
166 | font-size:12px; |
167 | color: #fff; |
168 | } |
b9330164 |
169 | |
170 | |
171 | /*************************************************************Slideshow********************************************************************************/ |
172 | bandeau{ |
173 | overflow: hidden; |
174 | margin-bottom: 34px; |
175 | display: block; |
176 | } |
177 | |
112f71cd |
178 | table{ |
179 | font-size: 12px; |
180 | } |
181 | |
182 | table td{ |
183 | padding: 12px 20px 12px 8px; |
184 | } |
185 | |
b9330164 |
186 | article, section, .outil{ |
187 | display:inline-block; |
188 | } |
189 | |
190 | .forml{ |
191 | float:right; |
192 | width:215px; |
193 | position:relative; |
194 | } |
195 | |
196 | .forml, .reseau{ |
197 | display:block; |
198 | } |
199 | |
200 | #containt_principal bandeau .outil{ |
201 | float:right; |
202 | } |
203 | |
204 | article{ |
205 | position:absolute; |
206 | width:300px; |
207 | height:240px; |
208 | text-align:justify; |
209 | margin-left:21px; |
210 | background-color:#fff; |
211 | border-radius: 2px 2px 2px 2px; |
212 | border: 1px solid #ddd; |
213 | } |
214 | |
215 | .reseau{ |
216 | width:215px; |
217 | height:180px; |
218 | text-align:justify; |
219 | margin-left:21px; |
220 | margin-top:60px; |
221 | padding-top:1px; |
222 | margin-right:0px; |
223 | background-color:#fff; |
224 | border-radius: 2px 2px 2px 2px; |
225 | border: 1px solid #ddd; |
226 | /*box-shadow: 0 0 3px rgba(0,0,0, 0.2); */ |
227 | } |
228 | |
229 | aside .reseau{ |
230 | margin-left: 0px; |
231 | } |
232 | |
233 | aside .outil{ |
234 | margin-bottom: 34px; |
235 | } |
236 | |
237 | article h4, article p, .reseau h4, .reseau p{ |
238 | padding-left:11px; |
239 | padding-right:11px; |
240 | line-height:18px; |
241 | } |
242 | |
243 | h1{ |
244 | color:#5e5e5e; |
245 | margin-bottom:32px; |
246 | } |
247 | |
248 | h4{ |
249 | font-size:15px; |
250 | font-weight:bold; |
251 | color:#5e5e5e; |
252 | margin-bottom:3px; |
253 | margin-top: 10px; |
254 | } |
255 | |
256 | p{ |
257 | font-size:12px; |
258 | color:#5e5e5e; |
259 | } |
260 | |
261 | .gauche p{ |
262 | line-height: 20px; |
263 | } |
112f71cd |
264 | |
265 | .reseau a{ |
266 | text-decoration: none; |
267 | color:#5e5e5e; |
268 | } |
269 | |
270 | .reseau a:hover{ |
271 | color: #911735; |
272 | } |
b9330164 |
273 | |
274 | /* Cibler les éléments <li> appartenant à un élément de classe "icone" */ |
275 | .icone li{ |
276 | width: 27px; |
277 | height: 35px; |
278 | display: block; |
279 | background: url("../img/rs6.gif") no-repeat; |
280 | margin-left:11px; |
281 | margin-right:11px; |
282 | } |
283 | |
284 | .icone .icone-1 { background-position: left top; } |
285 | .icone .icone-2 { background-position: left -35px; } |
286 | .icone .icone-3 { background-position: left -70px; } |
287 | .icone .icone-4 { background-position: left -105px; } |
288 | |
289 | .icone .icone-1:hover { background-position: right top; } |
290 | .icone .icone-2:hover { background-position: right -35px; } |
291 | .icone .icone-3:hover { background-position: right -70px; } |
292 | .icone .icone-4:hover { background-position: right -105px; } |
293 | |
294 | .rs li{ |
295 | list-style:none; |
296 | } |
297 | |
298 | .rs{ |
299 | font-size:13px; |
300 | line-height:35px; |
301 | vertical-align:top; |
302 | color:#5e5e5e; |
303 | } |
304 | |
305 | .icone,.rs{ |
306 | display:inline-block; |
307 | } |
308 | |
309 | |
310 | |
311 | /**************************************************************************** Recherche ***************************************************************************************/ |
312 | ::selection{ |
313 | background: #a4dcec; |
314 | } |
315 | |
316 | ::-moz-selection{ |
317 | background: #a4dcec; |
318 | } |
319 | |
320 | ::-webkit-selection{ |
321 | background: #a4dcec; |
322 | } |
323 | |
324 | ::-webkit-input-placeholder{ /* WebKit pour les navigateurs */ |
325 | color: #999; |
326 | font-style: normal; |
327 | } |
328 | |
329 | :-moz-placeholder{ /* Support de Mozilla Firefox 4 to 18 */ |
330 | color: #999; |
331 | font-style: normal; |
332 | } |
333 | |
334 | ::-moz-placeholder{ /* Support de Mozilla Firefox 19+ */ |
335 | color: #999; |
336 | font-style: normal; |
337 | } |
338 | |
339 | :-ms-input-placeholder{ /* Support Pour Internet Explorer 10+ */ |
340 | color: #999 !important; |
341 | font-style: normal; |
342 | } |
343 | |
344 | input, textarea{ |
345 | -webkit-font-smoothing: antialiased; |
346 | -webkit-text-size-adjust: 100%; |
347 | -ms-text-size-adjust: 100%; |
348 | -webkit-box-sizing: border-box; |
349 | -moz-box-sizing: border-box; |
350 | box-sizing: border-box; |
351 | outline: none; |
352 | } |
353 | |
354 | /************************************************************************* Formulaire de Recherche *******************************************************************************/ |
355 | |
356 | #searchform{ |
357 | display: block; |
358 | margin-bottom: 15px; |
359 | } |
360 | |
361 | .fieldcontainer{ |
362 | display: block; |
363 | position: relative; |
364 | width: 100%; |
365 | margin: 0 auto; |
366 | } |
367 | |
368 | .searchfield{ |
369 | -webkit-box-sizing: border-box; |
370 | -moz-box-sizing: border-box; |
371 | box-sizing: border-box; |
372 | display: block; |
373 | width: 215px; |
374 | height:35px; |
375 | float:right; |
376 | padding: 5px 7px; |
377 | padding-right: 43px; |
378 | background-color: #fff; |
379 | color: #ccc; |
380 | border: 1px solid #ddd; |
381 | -webkit-border-radius: 1px; |
382 | -moz-border-radius: 1px; |
383 | border-radius: 1px; |
384 | -webkit-transition: all 0.4s linear; |
385 | -moz-transition: all 0.4s linear; |
386 | transition: all 0.4s linear; |
387 | border-radius: 2px 2px 2px 2px; |
388 | /*box-shadow: 0 0 2px rgba(0,0,0, 0.2); */ |
389 | } |
390 | |
391 | .searchfield:focus{ |
392 | width: 100%; |
393 | color: #666; |
394 | } |
395 | |
396 | #searchbtn{ |
397 | position: absolute; |
398 | right: 0px; |
399 | top: 0px; |
400 | height: 35px; |
401 | width: 35px; |
402 | border: 0; |
403 | cursor: pointer; |
404 | zoom: 1; |
405 | filter: alpha(opacity=100); |
406 | opacity: 1; |
407 | background: transparent url('../img/search.png') top left no-repeat; |
408 | -webkit-transition: all 0.4s linear; |
409 | -moz-transition: all 0.4s linear; |
410 | transition: all 0.4s linear; |
411 | } |
412 | |
413 | #searchbtn:hover, #searchbtn:focus{ |
414 | filter: alpha(opacity=65); |
415 | opacity: 0.65; |
416 | } |
417 | |
418 | |
419 | /*********************************************************************** Bloc de Gauche / Droite ***************************************************************************/ |
112f71cd |
420 | .gauche input[type="submit"]{ |
421 | cursor:pointer; |
422 | background-color: #911735; |
423 | border: 0 none; |
424 | padding: 8px; |
425 | color: #fff; |
426 | font-weight: bold; |
427 | } |
428 | |
b9330164 |
429 | #containt_principal .gauche{ |
430 | float: left; |
431 | max-width: 700px; |
432 | margin-right: 20px; |
433 | } |
434 | |
435 | #containt_principal aside{ |
436 | float: right; |
437 | max-width: 220px; |
438 | } |
439 | |
440 | .bloc_left h2{ |
441 | padding-left: 25px; |
442 | margin-top:0px; |
443 | display:block; |
444 | height:41px; |
445 | background:url(../img/bg_bloc.jpg) left; |
446 | border-bottom:1px solid #cdcdcd; |
447 | border-radius: 2px 2px 2px 2px; |
448 | /*border-top:1px solid #cdcdcd; |
449 | box-shadow: 0 0 2px rgba(0,0,0, 0.2); */ |
450 | } |
451 | |
452 | .bloc_right h2{ |
453 | display:block; |
454 | height:41px; |
455 | line-height: 41px; |
456 | background:url(../img/bg_bloc2.jpg) left; |
457 | border:1px solid #ddd; |
458 | border-radius: 2px 2px 2px 2px; |
459 | margin: 0px; |
460 | padding-left: 25px; |
461 | } |
462 | |
463 | .bloc_right .kk{ |
464 | background-image:none; |
465 | border:none; |
466 | } |
467 | |
468 | #tagsphere{ |
469 | margin-top: 20px; |
470 | } |
471 | |
472 | .bloc_left a{ |
473 | text-decoration:none; |
474 | font-size:14px; |
475 | font-weight:bold; |
476 | color:#5e5e5e; |
477 | line-height:42px; |
478 | } |
479 | |
480 | .bloc_left span a{ |
481 | text-decoration:none; |
482 | font-size:14px; |
483 | font-weight:bold; |
484 | color: #0E5481; |
485 | line-height:20px; |
486 | } |
487 | |
488 | .bloc_left h3 a{ |
489 | text-decoration:none; |
490 | font-size:13px; |
491 | font-weight:bold; |
492 | color:#5e5e5e; |
493 | line-height:20px; |
494 | } |
495 | |
112f71cd |
496 | %vertical-align { |
497 | position: relative; |
498 | top: 50%; |
499 | -webkit-transform: translateY(-50%); |
500 | -ms-transform: translateY(-50%); |
501 | transform: translateY(-50%); |
502 | } |
503 | |
504 | .droit a{ |
505 | text-decoration:none; |
506 | font-size:13px; |
507 | color:#5e5e5e; |
508 | font-weight: normal; |
509 | width: 100%; |
510 | padding-right: 6px; |
511 | vertical-align:middle; |
512 | display: table-cell; |
513 | } |
514 | |
515 | .droit a:hover, .bloc_right a:hover{ |
516 | color: #911735; |
517 | } |
518 | |
b9330164 |
519 | .bloc_right a{ |
520 | text-decoration:none; |
521 | font-size:13px; |
522 | color:#5e5e5e; |
b9330164 |
523 | font-weight: normal; |
112f71cd |
524 | padding-right: 6px; |
b9330164 |
525 | } |
526 | |
112f71cd |
527 | |
b9330164 |
528 | bloc-left li, bloc-right li{ |
529 | padding-left:20px; |
530 | } |
531 | |
532 | .flott { |
533 | float: left; |
534 | width:74px; |
535 | height:55px; |
536 | margin: 5px 15px 6px 0; |
537 | padding:2px; |
538 | border:1px solid #e4e4e4; |
539 | } |
540 | |
541 | .droite{ |
542 | float:left; |
543 | width:96px; |
544 | height:71px; |
545 | margin:0 12px 0 0; |
546 | vertical-align:middle; |
547 | } |
548 | |
549 | .flux{ |
550 | float:right; |
551 | margin:12px; |
552 | } |
553 | |
554 | .bloc_left ul li.rub11{ |
555 | border-left:10px solid #639ec2; |
556 | box-shadow: 2px 0 0 rgba(0,0,0, 0.2); |
557 | } |
558 | |
559 | .bloc_left{ |
560 | float:left; |
561 | margin-bottom:27px; |
562 | overflow:hidden; |
563 | background-color:#fdfdfd; |
564 | border-radius: 2px 2px 2px 2px; |
565 | border: 1px solid #DDDDDD; |
566 | /*box-shadow: 0 0 2px rgba(0,0,0, 0.2); */ |
567 | } |
568 | |
569 | .bloc_right{ |
570 | float:right; |
571 | margin-bottom:34px; |
572 | /*overflow:hidden;*/ |
573 | } |
574 | |
112f71cd |
575 | #filariane{ |
576 | margin-top: -4px; |
577 | } |
578 | |
579 | #filariane li { |
580 | margin: 0px 6px 8px 0px; |
581 | list-style: none; |
582 | display: inline-block; |
583 | font-size: 11px; |
584 | } |
585 | |
586 | #filariane li a{ |
587 | text-decoration: none; |
588 | color: #5E5E5E; |
589 | margin-right: 6px; |
590 | } |
591 | |
592 | #filariane li a:hover{ |
593 | color: #911735; |
594 | } |
595 | |
596 | .gauche h1{ |
597 | margin-bottom: 4px; |
598 | } |
599 | |
600 | .gauche .date{ |
601 | margin-bottom: 20px; |
602 | } |
603 | |
604 | .texte img{ |
605 | max-width: 688px; |
606 | padding: 5px; |
607 | background-color: #FFFFFF; |
608 | border: 1px solid #DDDDDD; |
609 | } |
610 | |
611 | .texte ul{ |
612 | margin-left: 20px; |
613 | padding-top: 11px; |
614 | padding-bottom: 7px; |
615 | list-style: none; |
616 | } |
617 | |
618 | .texte ul li{ |
619 | margin-bottom: 6px; |
620 | font-size: inherit; |
621 | padding-left: 20px; |
622 | font-size: 12px; |
623 | background: url(../img/puce.png) left center no-repeat; |
624 | line-height: 20px; |
625 | } |
626 | |
627 | .texte ul li a{ |
628 | color: #5E5E5E; |
629 | text-decoration: none; |
630 | } |
631 | |
632 | |
633 | .texte .imgD{ |
634 | max-width: 300px; |
635 | float: left; |
636 | margin-right: 16px; |
637 | } |
638 | |
b9330164 |
639 | .droit{ |
b9330164 |
640 | height:71px; |
641 | background-color:#fdfdfd; |
642 | margin-top:20px; |
643 | border-radius: 2px 2px 2px 2px; |
644 | border: 1px solid #DDDDDD; |
112f71cd |
645 | display: table; |
646 | width: 100%; |
b9330164 |
647 | } |
648 | |
649 | .side{ |
650 | margin-left:20px; |
651 | margin-right:20px; |
652 | margin-top:12px; |
653 | padding-bottom:12px; |
654 | border-bottom:1px solid #dcdcdc; |
655 | text-align:justify; |
656 | } |
657 | |
112f71cd |
658 | .side:last-child{ |
b9330164 |
659 | margin-left:20px; |
660 | margin-right:20px; |
661 | margin-top:12px; |
662 | padding-bottom:12px; |
663 | border-bottom: none; |
664 | text-align:justify; |
665 | } |
666 | |
667 | span{ |
668 | font-size:14px; |
669 | font-weight:bold; |
670 | color:#0e5481; |
671 | line-height:20px; |
672 | } |
673 | |
674 | .txt{ |
675 | font-size:13px; |
676 | font-weight:normal; |
677 | color:#5e5e5e; |
678 | vertical-align:middle; |
679 | } |
680 | |
681 | .text{ |
682 | font-size:13px; |
683 | font-weight:bold; |
684 | color:#616161; |
685 | } |
686 | |
687 | .text a{ |
688 | vertical-align:middle; |
689 | } |
690 | |
691 | h3{ |
692 | font-size:13px; |
693 | font-weight:bold; |
694 | color:#5e5e5e; |
695 | margin-top:3px; |
696 | margin-bottom:2px; |
697 | } |
698 | |
699 | /************************************************************************** Footer ********************************************************************************************/ |
700 | |
701 | .col1, .col2{ |
702 | font-size:12px; |
703 | color:#7d7d7d; |
704 | } |
705 | |
706 | .foot li{ |
707 | display:inline-block; |
708 | height:3px; |
709 | width:20%; |
710 | } |
711 | |
712 | footer{ |
713 | width:100%; |
714 | float:left; |
715 | margin-bottom: 32px; |
716 | } |
717 | |
718 | footer span{ |
719 | font-size: 12px; |
720 | font-weight: normal; |
721 | padding: 0px 10px; |
722 | } |
723 | |
724 | footer span a{ |
725 | color: #7D7D7D; |
726 | text-decoration: none; |
727 | } |
728 | |
729 | .col1{ |
730 | float:left; |
731 | } |
732 | |
733 | .col2{ |
734 | float:right; |
735 | } |