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