Fix bug css
[ifgu.git] / project / static / css / style.css
1 html, body, div, span, applet, object, iframe,
2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 a, abbr, acronym, address, big, cite, code,
4 del, dfn, em, img, ins, kbd, q, s, samp,
5 small, strike, strong, sub, sup, tt, var,
6 b, u, i, center,
7 dl, dt, dd, ol, ul, li,
8 fieldset, form, label, legend,
9 table, caption, tbody, tfoot, thead, tr, th, td,
10 article, aside, canvas, details, figcaption, figure,
11 footer, header, hgroup, menu, nav, section, summary,
12 time, mark, audio, video {
13 margin: 0;
14 padding: 0;
15 border: 0;
16 outline: 0;
17 font-size: 100%;
18 font: inherit;
19 vertical-align: baseline;
20 }
21
22 /* HTML5 display-role reset for older browsers */
23 article, aside, details, figcaption, figure,
24 footer, header, hgroup, menu, nav, section {
25 display: block;
26 }
27 body {
28 line-height: 1;
29 font-family: Arial, Helvetica, sans-serif;
30 font-size: 0.85em;
31 color: #2c3337;
32 background: url("../img/fond.jpg");
33 }
34 ol, ul {
35 list-style: none;
36 }
37 blockquote, q {
38 quotes: none;
39 }
40 blockquote:before, blockquote:after,
41 q:before, q:after {
42 content: '';
43 content: none;
44 }
45
46 a{
47 text-decoration: none;
48 }
49
50 /*:focus {
51 outline: ?????;
52 } */
53
54 ins {
55 text-decoration: none;
56 }
57 del {
58 text-decoration: line-through;
59 }
60
61 table {
62 border-collapse: collapse;
63 border-spacing: 0;
64 }
65
66 /*TITRES*/
67 H1{
68 font-size: 1.65em;
69 text-shadow: 1px 1px 0px #ffffff;
70 filter: dropshadow(color=#ffffff, offx=1, offy=1);
71 margin-bottom: 20px;
72 font-weight: bold;
73 line-height: 20px;
74 line-height: 28px;
75 }
76
77 H2{
78 font-size: 1.35em;
79 text-shadow: 1px 1px 0px #ffffff;
80 filter: dropshadow(color=#ffffff, offx=1, offy=1);
81 margin-bottom: 22px;
82 color: #810025;
83 }
84
85 H3{
86 font-size: 1.15em;
87 text-shadow: 1px 1px 0px #ffffff;
88 filter: dropshadow(color=#ffffff, offx=1, offy=1);
89 margin-bottom: 16px;
90 }
91
92 /*table*/
93 table {
94 background-color: #F4F4F4;
95 border: 1px solid #CACACA;
96 border-collapse: collapse;
97 margin: 6px 0 30px;
98 width: 100%;
99 }
100 table .col {
101 background-color: #EEEEEE;
102 }
103 table td {
104 border: 1px solid #CACACA;
105 padding: 14px 18px;
106 }
107
108 /*HEADER*/
109 header{
110 height: 238px;
111 width: 100%;
112 background: url("../img/fondheader.png");
113 }
114
115 header #degrade{
116 height: 232px;
117 width: 100%;
118 /*background: -moz-radial-gradient(left bottom, rgba(85, 110, 133,50), rgba(85,110,133,0));*/
119 background: url(../img/degrade.jpg) no-repeat center top;
120 /*background: -moz-linear-gradient(left center , #7E2344 0pt, #AE305E 15%, #75203F 60%) repeat scroll 0 0 #75203F;*/
121 }
122
123 #header_content{
124 width: 940px;
125 margin: 0 auto;
126 height: 166;
127 overflow: hidden;
128 }
129
130 #logo{
131 float: left;
132 height: 149px;
133 width: 250px;
134 margin-top: 17px;
135 }
136
137 #header_droit{
138 float: right;
139 height: 146px;
140 width: 340px;
141 margin-top: 20px;
142 }
143
144 #header_droit p{
145 color: #fff;
146 display: block;
147 text-align: right;
148 margin-bottom: 60px;
149 font-size: 0.94em;
150 }
151
152 #header_droit p a{
153 color: #fff;
154 margin: 0px 8px;
155 }
156
157 #header_droit p a:hover{
158 color: #82898f;
159 -webkit-transition: 0.5s;
160 -moz-transition: 0.5s;
161 transition: 0.5s;
162 }
163
164 #header_droit #rss{
165 display: block;
166 width: 32px;
167 height: 32px;
168 float: right;
169 }
170
171 /*search*/
172 #search {
173 width:222px; /*follow your image's size*/
174 height:29px;/*follow your image's size*/
175 background-image: url("../img/searchbox.png");
176 position:relative; /*important*/
177 float: right;
178 margin-left: 20px;
179 }
180
181 #search form { display:inline ; }
182
183 .searchbox {
184 border:0px; /*important*/
185 background-color:transparent; /*important*/
186 position:absolute; /*important*/
187 top:0;
188 left:14px;
189 width:174px;
190 height:29px;
191 padding: 0px;
192 color: #bbb;
193 font-size: .8em;
194 }
195
196 .searchbox_submit {
197 border: none; /*important*/
198 outline: none;
199 background-color:transparent; /*important*/
200 position:absolute; /*important*/
201 top:0px;
202 left:186px;
203 width:40px;
204 height:29px;
205 cursor: pointer;
206 }
207
208 /*menu*/
209 #principal{
210 width: 940px;
211 margin: 20px auto 0px auto;
212 height: 46px;
213 }
214
215 #principal li{
216 text-align: center;
217 display: inline-block;
218 float: left;
219 height: 44px;
220 line-height: 44px;
221 background: url("../img/menu.png");
222 -webkit-box-shadow: inset 1px 1px 0px 0px rgba(86, 108, 128, 100);
223 box-shadow: inset 1px 1px 0px 0px rgba(86, 108, 128, 100);
224 border-top: 1px solid #202d3a;
225 border-left: 1px solid #202d3a;
226 border-bottom: 1px solid #202d3a;
227 }
228
229 #principal ul li:first-child{
230 -webkit-border-radius: 4px 0px 0px 0px;
231 -o-border-radius: 4px 0px 0px 0px;
232 border-radius: 4px 0px 0px 0px;
233 }
234
235 #principal ul li:last-child{
236 -webkit-border-radius: 0px 4px 0px 0px;
237 -o-border-radius: 0px 4px 0px 0px;
238 border-radius: 0px 4px 0px 0px;
239 border-right: 1px solid #202d3a;
240 }
241
242 #principal li a{
243 display: inline-block;
244 height: 45px;
245 padding: 0px 36px 0px 37px;
246 color: #fff;
247 font-weight: bold;
248 font-size: 13px;
249 text-shadow: 1px 1px 0px #000000;
250 filter: dropshadow(color=#000000, offx=1, offy=1);
251 }
252
253 #principal li a:hover{
254 -webkit-box-shadow: inset 1px 0px 0px 0px rgba(86, 108, 128, 100);
255 box-shadow: inset 1px 0px 0px 0px rgba(86, 108, 128, 100);
256 height: 45px;
257 color: #fefefe;
258 background-color: #2e3a45;
259 }
260
261 #principal li:hover ul{
262 display: block;
263 }
264
265 /*sous menu*/
266 #principal ul li ul{
267 display: none;
268 -webkit-transition: opacity .3s ease-in-out; /* For chrome & safari */
269 -moz-transition: opacity .3s ease-in-out; /* For mozilla firefox */
270 -o-transition: opacity .3s ease-in-out; /* For opera */
271 transition: opacity .3s ease-in-out; /* Not yet implemented, but will be available soon */
272 position: absolute;
273 background-color: #2e3a45;
274 border-right: 1px solid #202d3a;
275 border-bottom: 1px solid #202d3a;
276 border-left: 1px solid #3c4c5a;
277 -moz-border-radius: 0px 0px 4px 4px;
278 -webkit-border-radius: 0px 0px 4px 4px;
279 /*margin-top: 5px;*/
280 z-index: 9999;
281 }
282
283 #principal ul li ul li{
284 display: block;
285 background: none;
286 float: none;
287 border: none;
288 text-align: left;
289 -webkit-box-shadow: none;
290 box-shadow: none;
291 line-height: 20px;
292 height: auto;
293 }
294
295 #principal ul li ul li a{
296 display: block;
297 height: auto;
298 margin: 0px 20px 0px 20px;
299 padding: 15px 18px 14px 0px;
300 color: #fff;
301 max-width: 220px;
302 min-width: 88px;
303 font-weight: normal;
304 font-size: 13px;
305 text-shadow: none;
306 filter: none;
307 border-bottom: 1px solid #82898f;
308 }
309
310 #principal ul li ul li a span{
311 margin-right: 8px;
312 }
313
314 #principal ul li ul li a:hover{
315 -webkit-box-shadow: none;
316 box-shadow: none;
317 background: none;
318 height: auto;
319 color: #82898f;
320 border-bottom: 1px solid #82898f;
321 }
322
323 #principal ul li ul li:last-child a{
324 border: none;
325 }
326
327 /*MAIN*/
328 #main{
329 min-height: 400px;
330 overflow: hidden;
331 width: 940px;
332 margin: 34px auto 0 auto;
333 }
334
335 /*content*/
336 content{
337 width: 620px;
338 float: left;
339 }
340
341 #gauche p{
342 margin-bottom: 24px;
343 line-height: 22px;
344 text-align: justify;
345 text-shadow: 1px 1px 0px #ffffff;
346 filter: dropshadow(color=#ffffff, offx=1, offy=1);
347 }
348
349 #gauche ul{
350 padding: 6px 0px;
351 display: block;
352 }
353
354 #gauche ul li{
355 margin-bottom: 20px;
356 line-height: 20px;
357 padding: 0px 0px 0px 22px;
358 background: url(../img/puce.png) left center no-repeat;
359 }
360
361 #gauche .text img{
362 border: 1px solid #DFDFDF;
363 display: block;
364 height: auto;
365 max-width: 600px;
366 padding: 10px;
367 background-color: #f4f4f4;
368 border: 1px solid #cacaca;
369 -webkit-border-radius: 4px;
370 border-radius: 4px;
371 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
372 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
373 margin-bottom: 24px;
374 }
375
376 #gauche .centre{
377 margin: 0px auto 24px auto !important;
378 }
379
380 #gauche .gauche{
381 float: left;
382 margin: 6px 14px 10px 0px;
383 height: auto;
384 max-width: 376px;
385 }
386
387 #gauche .droite{
388 float: right;
389 margin: 0px 0px 10px 10px;
390 }
391
392 /*actu*/
393 #gauche .boiteContent{
394 width: 578px;
395 min-height: 20px;
396 padding: 2px 20px 0px 20px;
397 background-color: #f4f4f4;
398 border: 1px solid #cacaca;
399 -webkit-border-radius: 4px;
400 border-radius: 4px;
401 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
402 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
403 margin-bottom: 18px;
404 text-shadow: 1px 1px 0px #ffffff;
405 filter: dropshadow(color=#ffffff, offx=1, offy=1);
406 }
407
408 .info{
409 width: 586px;
410 overflow: hidden;
411 height: 18px;
412 padding: 10px 16px 8px 16px;
413 background-color: #f4f4f4;
414 border: 1px solid #cacaca;
415 -webkit-border-radius: 4px;
416 border-radius: 4px;
417 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
418 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
419 margin-bottom: 24px;
420 text-shadow: 1px 1px 0px #ffffff;
421 filter: dropshadow(color=#ffffff, offx=1, offy=1);
422 }
423
424 .info .date{
425 float: left;
426 line-height: 18px;
427 color: #810025;
428 font-size: 0.93em;
429 font-style: oblique;
430 }
431
432 .info .outils{
433 float: right;
434 }
435
436 .info .outils img{
437 border-right: 1px solid #ccc;
438 padding: 0px 6px;
439 }
440
441 .info .outils img:last-child{
442 border-right: none;
443 padding: 0px 0px 0px 6px;
444 }
445
446 #gauche .actu{
447 overflow: hidden;
448 margin: 16px 0px 16px 0px;
449 }
450
451 #gauche .actu H1{
452 font-size: 1.1em;
453 line-height: 20px;
454 margin-bottom: 16px;
455 }
456
457 #gauche .actu H1 a{
458 color: #2C3337;
459 }
460
461 #gauche .actu H1 a:hover{
462 color: #82898f;
463 -webkit-transition: 0.5s;
464 -moz-transition: 0.5s;
465 transition: 0.5s;
466 }
467
468 #gauche .actuImg{
469 float: left;
470 width: 104px;
471 margin-right: 18px;
472 }
473
474 #gauche .actuTxt{
475 float: left;
476 width: 456px;
477 }
478
479 #gauche .actuTxt p{
480 font-size: 0.94em;
481 line-height: 17px;
482 margin-bottom: 0px;
483 }
484
485 #gauche .actuTxt p a{
486 color: #2C3337;
487 }
488
489 #gauche .actuTxt p a:hover{
490 color: #82898f;
491 -webkit-transition: 0.5s;
492 -moz-transition: 0.5s;
493 transition: 0.5s;
494 }
495
496 #gauche .actuTxt span{
497 display: block;
498 width: 100%;
499 margin-top: 14px;
500 }
501
502 #gauche .actuTxt span a{
503 color: #810025;
504 font-style: italic;
505 font-size: 0.92em;
506 }
507
508 #gauche .actuImg img{
509 border: 2px solid #fff;
510 }
511
512 #gauche .actuImg img:hover{
513 border: 2px solid #CACACA;
514 -webkit-transition: 0.5s;
515 -moz-transition: 0.5s;
516 transition: 0.5s;
517 }
518
519 /*slider*/
520 #slider{
521 position: relative;
522 width: 578px;
523 height: 298px;
524 padding: 20px;
525 background-color: #f4f4f4;
526 border: 1px solid #cacaca;
527 -webkit-border-radius: 4px;
528 border-radius: 4px;
529 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
530 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
531 margin-bottom: 36px;
532 }
533
534 #slides{
535 width: 578px;
536 height: 298px;
537 position: relative;
538 }
539
540 #slides .intro {
541 bottom: 0;
542 position: absolute;
543 height: 32px;
544 font-size: 1.1em;
545 padding: 8px 12px 12px 12px;
546 width: 554px;
547 background-color: rgba(255, 255, 255, 0.8);
548 }
549
550 #slides .intro p {
551 line-height: 20px;
552 text-shadow: 1px 1px 0px #ffffff;
553 filter: dropshadow(color=#ffffff, offx=1, offy=1);
554 }
555
556 .diapo{
557 width: 578px;
558 height: 298px;
559 }
560
561 .bx-wrapper .bx-prev {
562 background: url("../img/bt-prev.png") no-repeat;
563 height: 26px;
564 left: 10px;
565 position: absolute;
566 text-indent: -999999px;
567 top: 118px;
568 width: 15px;
569 z-index: 999;
570 }
571
572 .bx-wrapper .bx-next {
573 background: url("../img/bt-next.png") no-repeat;
574 height: 26px;
575 position: absolute;
576 right: 10px;
577 text-indent: -999999px;
578 top: 118px;
579 width: 15px;
580 z-index: 999;
581 }
582
583 /*SIDEBAR*/
584 sidebar{
585 width: 300px;
586 float: left;
587 margin-left: 20px;
588 }
589
590 #droite H1{
591 font-size: 1.44em;
592 text-shadow: 1px 1px 0px #ffffff;
593 filter: dropshadow(color=#ffffff, offx=1, offy=1);
594 margin-bottom: 20px;
595 font-weight: bold;
596 }
597
598 #droite H1 a{
599 color: #2C3337;
600 }
601
602 #droite .boite, #droite .boiteActu{
603 width: 258px;
604 min-height: 20px;
605 padding: 2px 20px 0px 20px;
606 background-color: #f4f4f4;
607 border: 1px solid #cacaca;
608 -webkit-border-radius: 4px;
609 border-radius: 4px;
610 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
611 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
612 margin-bottom: 34px;
613 text-shadow: 1px 1px 0px #ffffff;
614 filter: dropshadow(color=#ffffff, offx=1, offy=1);
615 }
616
617 #droite .boiteAutre{
618 width: 258px;
619 min-height: 20px;
620 padding: 18px 20px;
621 background-color: #f4f4f4;
622 border: 1px solid #cacaca;
623 -webkit-border-radius: 4px;
624 border-radius: 4px;
625 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
626 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
627 margin-bottom: 24px;
628 text-shadow: 1px 1px 0px #ffffff;
629 filter: dropshadow(color=#ffffff, offx=1, offy=1);
630 }
631
632 #droite .boiteAutre2{
633 width: 258px;
634 min-height: 20px;
635 padding: 18px 20px 16px 20px;
636 background-color: #f4f4f4;
637 border: 1px solid #cacaca;
638 -webkit-border-radius: 4px;
639 border-radius: 4px;
640 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
641 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
642 margin-bottom: 6px;
643 text-shadow: 1px 1px 0px #ffffff;
644 filter: dropshadow(color=#ffffff, offx=1, offy=1);
645 }
646
647 #droite .boite ul li{
648 padding: 0px 0px 14px 28px;
649 margin-top: 14px;
650 line-height: 20px;
651 font-size: 0.98em;
652 background: url("../img/pucelivre.png") top left no-repeat;
653 border-bottom: 1px solid #a5aaae;
654 }
655
656 #droite .boite ul li a{
657 color: #2C3337;
658 }
659
660 #droite .boite ul li a:hover{
661 color: #82898f;
662 -webkit-transition: 0.5s;
663 -moz-transition: 0.5s;
664 transition: 0.5s;
665 }
666
667 #droite .boite ul li:last-child, #droite .actu:last-child{
668 border-bottom: none;
669 }
670
671 #droite .actu{
672 overflow: hidden;
673 margin: 16px 0px 0px 0px;
674 padding: 0px 0px 16px 0px;
675 border-bottom: 1px solid #a5aaae;
676 }
677
678 #droite .actuImg{
679 float: left;
680 width: 52px;
681 margin-right: 16px;
682 }
683
684 #droite .actuTxt{
685 float: left;
686 width: 188px;
687 }
688
689 #droite .actuTxt p{
690 font-size: 0.94em;
691 line-height: 17px;
692 }
693
694 #droite .actuTxt p a{
695 color: #2C3337;
696 }
697
698 #droite .actuTxt p a:hover{
699 color: #82898f;
700 -webkit-transition: 0.5s;
701 -moz-transition: 0.5s;
702 transition: 0.5s;
703 }
704
705 #droite .actuTxt span{
706 display: block;
707 width: 100%;
708 margin-bottom: 6px;
709 }
710
711 #droite .actuTxt span a{
712 color: #810025;
713 font-style: italic;
714 font-size: 0.92em;
715 }
716
717 #droite .actuImg img{
718 border: 2px solid #fff;
719 }
720
721 #droite .actuImg img:hover{
722 border: 2px solid #CACACA;
723 -webkit-transition: 0.5s;
724 -moz-transition: 0.5s;
725 transition: 0.5s;
726 }
727
728 /*boite autre*/
729 #droite .boiteAutre p, #droite .boiteAutre2 p{
730 padding: 0px 0px 0px 28px;
731 line-height: 20px;
732 font-size: 1.06em;
733 }
734
735 #droite .boiteAutre p a, #droite .boiteAutre2 p a{
736 color: #2C3337;
737 }
738
739 #droite .boiteAutre p a:hover, #droite .boiteAutre2 p a:hover{
740 color: #82898f;
741 -webkit-transition: 0.5s;
742 -moz-transition: 0.5s;
743 transition: 0.5s;
744 }
745
746 .lettre{ background: url("../img/lettre.png") top left no-repeat;}
747 .faq{ background: url("../img/faq.png") top left no-repeat;}
748 .ordi{ background: url("../img/ordi.png") top left no-repeat;}
749 .cata{ background: url("../img/cata.png") top left no-repeat;}
750
751 /*search2*/
752 #search2 {
753 width:256px; /*follow your image's size*/
754 height:29px;/*follow your image's size*/
755 background-image: url("../img/searchbox2.png");
756 position:relative; /*important*/
757 margin-top: 18px;
758 }
759
760 #search2 form { display:inline ; }
761
762 .searchbox2 {
763 border:0px; /*important*/
764 background-color:transparent; /*important*/
765 position:absolute; /*important*/
766 top:0;
767 left:14px;
768 width:204px;
769 height:29px;
770 padding: 0px;
771 color: #bbb;
772 font-size: .8em;
773 }
774
775 .searchbox_submit2 {
776 border: none; /*important*/
777 outline: none;
778 background-color:transparent; /*important*/
779 position:absolute; /*important*/
780 top:0px;
781 left:216px;
782 width:40px;
783 height:29px;
784 cursor: pointer;
785 }
786
787 /*FOOTER*/
788 footer{
789 width: 100%;
790 background: url("../img/footer.png") repeat-x;
791 height: 91px;
792 margin-top: 30px;
793 }
794
795 #footer_content{
796 width: 940px;
797 margin: 0 auto;
798 height: 63px;
799 padding-top: 28px;
800 }
801
802 #footer_content p{
803 color: #fff;
804 display: block;
805 margin-bottom: 10px;
806 font-size: 0.94em;
807 }
808
809 #footer_content p a{
810 color: #fff;
811 }
812
813 #footer_content p span{
814 margin: 0px 8px;
815 }
816
817 #footer_content p a:hover{
818 color: #82898f;
819 -webkit-transition: 0.5s;
820 -moz-transition: 0.5s;
821 transition: 0.5s;
822 }