legere modif
[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 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
132 #marquee a:hover{
133 color: #911735;
134 }
135
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{
142 padding:0; margin:0;
143 position: relative;
144 }
145
146 /* styles des légendes */
147 .banner figcaption{
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
158 .banner figcaption h5{
159 margin: 0px 0px 5px 0px;
160 font-size:14px;
161 color: #fff;
162 }
163
164 .banner figcaption p{
165 margin: 0px;
166 font-size:12px;
167 color: #fff;
168 }
169
170
171 /*************************************************************Slideshow********************************************************************************/
172 bandeau{
173 overflow: hidden;
174 margin-bottom: 34px;
175 display: block;
176 }
177
178 table{
179 font-size: 12px;
180 }
181
182 table td{
183 padding: 12px 20px 12px 8px;
184 }
185
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 }
264
265 .reseau a{
266 text-decoration: none;
267 color:#5e5e5e;
268 }
269
270 .reseau a:hover{
271 color: #911735;
272 }
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 ***************************************************************************/
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
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
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
519 .bloc_right a{
520 text-decoration:none;
521 font-size:13px;
522 color:#5e5e5e;
523 font-weight: normal;
524 padding-right: 6px;
525 }
526
527
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
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
639 .droit{
640 height:71px;
641 background-color:#fdfdfd;
642 margin-top:20px;
643 border-radius: 2px 2px 2px 2px;
644 border: 1px solid #DDDDDD;
645 display: table;
646 width: 100%;
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
658 .side:last-child{
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 }