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