legere modif
[ific.git] / project / static / css / style2.css
CommitLineData
b9330164 1@charset "utf-8";
2/* CSS Document */
3
4
5body{
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
18header{
19 width:940px;
20 height:184px;
21 background-image:url(../img/header2.jpg);
22}
23
24ul{
25 margin:0;
26 padding:0;
27}
28
29nav{
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
39nav li{
40 width:13%;
41 background:url(../img/bgmenu2.png) right;
42 opacity:1;
43 float: left;
44 list-style: none;
45}
46
47nav li:hover{
48 opacity:0.70;
49}
50
51nav 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********************************************************************************/
172bandeau{
173 overflow: hidden;
174 margin-bottom: 34px;
175 display: block;
176}
177
112f71cd 178table{
179 font-size: 12px;
180}
181
182table td{
183 padding: 12px 20px 12px 8px;
184}
185
b9330164 186article, section, .outil{
187display: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
204article{
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
229aside .reseau{
230 margin-left: 0px;
231}
232
233aside .outil{
234 margin-bottom: 34px;
235}
236
237article h4, article p, .reseau h4, .reseau p{
238 padding-left:11px;
239 padding-right:11px;
240 line-height:18px;
241}
242
243h1{
244 color:#5e5e5e;
245 margin-bottom:32px;
246}
247
248h4{
249 font-size:15px;
250 font-weight:bold;
251 color:#5e5e5e;
252 margin-bottom:3px;
253 margin-top: 10px;
254}
255
256p{
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
344input, 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{
464background-image:none;
465border:none;
466}
467
468#tagsphere{
469margin-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 528bloc-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
667span{
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{
688vertical-align:middle;
689}
690
691h3{
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
712footer{
713 width:100%;
714 float:left;
715 margin-bottom: 32px;
716}
717
718footer span{
719 font-size: 12px;
720 font-weight: normal;
721 padding: 0px 10px;
722}
723
724footer span a{
725 color: #7D7D7D;
726 text-decoration: none;
727}
728
729.col1{
730 float:left;
731}
732
733.col2{
734 float:right;
735}