13ac8108b199b895e70909dac91c0b49b7097457
[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 -webkit-transition: 0.2s;
260 -moz-transition: 0.2s;
261 transition: 0.2s;
262 }
263
264 #principal li:hover ul{
265 display: block;
266 }
267
268 /*sous menu*/
269 #principal ul li ul{
270 opacity: 0; /* Hide sub level, we will use this in transition */
271 -webkit-transition: opacity .3s ease-in-out; /* For chrome & safari */
272 -moz-transition: opacity .3s ease-in-out; /* For mozilla firefox */
273 -o-transition: opacity .3s ease-in-out; /* For opera */
274 transition: opacity .3s ease-in-out; /* Not yet implemented, but will be available soon */
275 position: absolute;
276 background-color: #2e3a45;
277 border-right: 1px solid #202d3a;
278 border-bottom: 1px solid #202d3a;
279 border-left: 1px solid #3c4c5a;
280 -moz-border-radius: 0px 0px 4px 4px;
281 -webkit-border-radius: 0px 0px 4px 4px;
282 margin-top: 5px;
283 z-index: 9999;
284 }
285
286 #principal ul li:hover>ul{ opacity: 1;}
287
288 #principal ul li ul li{
289 display: block;
290 background: none;
291 float: none;
292 border: none;
293 text-align: left;
294 -webkit-box-shadow: none;
295 box-shadow: none;
296 line-height: 20px;
297 height: auto;
298 }
299
300 #principal ul li ul li a{
301 display: block;
302 height: auto;
303 margin: 0px 20px 0px 20px;
304 padding: 15px 18px 14px 0px;
305 color: #fff;
306 max-width: 220px;
307 min-width: 88px;
308 font-weight: normal;
309 font-size: 13px;
310 text-shadow: none;
311 filter: none;
312 border-bottom: 1px solid #82898f;
313 }
314
315 #principal ul li ul li a span{
316 margin-right: 8px;
317 }
318
319 #principal ul li ul li a:hover{
320 -webkit-box-shadow: none;
321 box-shadow: none;
322 background: none;
323 height: auto;
324 color: #82898f;
325 border-bottom: 1px solid #82898f;
326 }
327
328 #principal ul li ul li:last-child a{
329 border: none;
330 }
331
332 /*MAIN*/
333 #main{
334 min-height: 400px;
335 overflow: hidden;
336 width: 940px;
337 margin: 34px auto 0 auto;
338 }
339
340 /*content*/
341 content{
342 width: 620px;
343 float: left;
344 }
345
346 #gauche p{
347 margin-bottom: 24px;
348 line-height: 22px;
349 text-align: justify;
350 text-shadow: 1px 1px 0px #ffffff;
351 filter: dropshadow(color=#ffffff, offx=1, offy=1);
352 }
353
354 #gauche ul{
355 padding: 6px 0px;
356 display: block;
357 }
358
359 #gauche ul li{
360 margin-bottom: 20px;
361 line-height: 20px;
362 padding: 0px 0px 0px 22px;
363 background: url(../img/puce.png) left center no-repeat;
364 }
365
366 #gauche .text img{
367 border: 1px solid #DFDFDF;
368 display: block;
369 height: auto;
370 max-width: 600px;
371 padding: 10px;
372 background-color: #f4f4f4;
373 border: 1px solid #cacaca;
374 -webkit-border-radius: 4px;
375 border-radius: 4px;
376 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
377 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
378 margin-bottom: 24px;
379 }
380
381 #gauche .centre{
382 margin: 0px auto 24px auto !important;
383 }
384
385 #gauche .gauche{
386 float: left;
387 margin: 6px 14px 10px 0px;
388 height: auto;
389 max-width: 376px;
390 }
391
392 #gauche .droite{
393 float: right;
394 margin: 0px 0px 10px 10px;
395 }
396
397 /*actu*/
398 #gauche .boiteContent{
399 width: 578px;
400 min-height: 20px;
401 padding: 2px 20px 0px 20px;
402 background-color: #f4f4f4;
403 border: 1px solid #cacaca;
404 -webkit-border-radius: 4px;
405 border-radius: 4px;
406 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
407 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
408 margin-bottom: 18px;
409 text-shadow: 1px 1px 0px #ffffff;
410 filter: dropshadow(color=#ffffff, offx=1, offy=1);
411 }
412
413 .info{
414 width: 586px;
415 overflow: hidden;
416 height: 18px;
417 padding: 10px 16px 8px 16px;
418 background-color: #f4f4f4;
419 border: 1px solid #cacaca;
420 -webkit-border-radius: 4px;
421 border-radius: 4px;
422 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
423 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
424 margin-bottom: 24px;
425 text-shadow: 1px 1px 0px #ffffff;
426 filter: dropshadow(color=#ffffff, offx=1, offy=1);
427 }
428
429 .info .date{
430 float: left;
431 line-height: 18px;
432 color: #810025;
433 font-size: 0.93em;
434 font-style: oblique;
435 }
436
437 .info .outils{
438 float: right;
439 }
440
441 .info .outils img{
442 border-right: 1px solid #ccc;
443 padding: 0px 6px;
444 }
445
446 .info .outils img:last-child{
447 border-right: none;
448 padding: 0px 0px 0px 6px;
449 }
450
451 #gauche .actu{
452 overflow: hidden;
453 margin: 16px 0px 16px 0px;
454 }
455
456 #gauche .actu H1{
457 font-size: 1.1em;
458 line-height: 20px;
459 margin-bottom: 16px;
460 }
461
462 #gauche .actu H1 a{
463 color: #2C3337;
464 }
465
466 #gauche .actu H1 a:hover{
467 color: #82898f;
468 -webkit-transition: 0.5s;
469 -moz-transition: 0.5s;
470 transition: 0.5s;
471 }
472
473 #gauche .actuImg{
474 float: left;
475 width: 104px;
476 margin-right: 18px;
477 }
478
479 #gauche .actuTxt{
480 float: left;
481 width: 456px;
482 }
483
484 #gauche .actuTxt p{
485 font-size: 0.94em;
486 line-height: 17px;
487 margin-bottom: 0px;
488 }
489
490 #gauche .actuTxt p a{
491 color: #2C3337;
492 }
493
494 #gauche .actuTxt p a:hover{
495 color: #82898f;
496 -webkit-transition: 0.5s;
497 -moz-transition: 0.5s;
498 transition: 0.5s;
499 }
500
501 #gauche .actuTxt span{
502 display: block;
503 width: 100%;
504 margin-top: 14px;
505 }
506
507 #gauche .actuTxt span a{
508 color: #810025;
509 font-style: italic;
510 font-size: 0.92em;
511 }
512
513 #gauche .actuImg img{
514 border: 2px solid #fff;
515 }
516
517 #gauche .actuImg img:hover{
518 border: 2px solid #CACACA;
519 -webkit-transition: 0.5s;
520 -moz-transition: 0.5s;
521 transition: 0.5s;
522 }
523
524 /*slider*/
525 #slider{
526 position: relative;
527 width: 578px;
528 height: 298px;
529 padding: 20px;
530 background-color: #f4f4f4;
531 border: 1px solid #cacaca;
532 -webkit-border-radius: 4px;
533 border-radius: 4px;
534 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
535 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
536 margin-bottom: 36px;
537 }
538
539 #slides{
540 width: 578px;
541 height: 298px;
542 position: relative;
543 }
544
545 #slides .intro {
546 bottom: 0;
547 position: absolute;
548 height: 32px;
549 font-size: 1.1em;
550 padding: 8px 12px 12px 12px;
551 width: 554px;
552 background-color: rgba(255, 255, 255, 0.8);
553 }
554
555 #slides .intro p {
556 line-height: 20px;
557 text-shadow: 1px 1px 0px #ffffff;
558 filter: dropshadow(color=#ffffff, offx=1, offy=1);
559 }
560
561 .diapo{
562 width: 578px;
563 height: 298px;
564 }
565
566 .bx-wrapper .bx-prev {
567 background: url("../img/bt-prev.png") no-repeat;
568 height: 26px;
569 left: 10px;
570 position: absolute;
571 text-indent: -999999px;
572 top: 118px;
573 width: 15px;
574 z-index: 999;
575 }
576
577 .bx-wrapper .bx-next {
578 background: url("../img/bt-next.png") no-repeat;
579 height: 26px;
580 position: absolute;
581 right: 10px;
582 text-indent: -999999px;
583 top: 118px;
584 width: 15px;
585 z-index: 999;
586 }
587
588 /*SIDEBAR*/
589 sidebar{
590 width: 300px;
591 float: left;
592 margin-left: 20px;
593 }
594
595 #droite H1{
596 font-size: 1.44em;
597 text-shadow: 1px 1px 0px #ffffff;
598 filter: dropshadow(color=#ffffff, offx=1, offy=1);
599 margin-bottom: 20px;
600 font-weight: bold;
601 }
602
603 #droite H1 a{
604 color: #2C3337;
605 }
606
607 #droite .boite, #droite .boiteActu{
608 width: 258px;
609 min-height: 20px;
610 padding: 2px 20px 0px 20px;
611 background-color: #f4f4f4;
612 border: 1px solid #cacaca;
613 -webkit-border-radius: 4px;
614 border-radius: 4px;
615 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
616 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
617 margin-bottom: 34px;
618 text-shadow: 1px 1px 0px #ffffff;
619 filter: dropshadow(color=#ffffff, offx=1, offy=1);
620 }
621
622 #droite .boiteAutre{
623 width: 258px;
624 min-height: 20px;
625 padding: 18px 20px;
626 background-color: #f4f4f4;
627 border: 1px solid #cacaca;
628 -webkit-border-radius: 4px;
629 border-radius: 4px;
630 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
631 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
632 margin-bottom: 24px;
633 text-shadow: 1px 1px 0px #ffffff;
634 filter: dropshadow(color=#ffffff, offx=1, offy=1);
635 }
636
637 #droite .boiteAutre2{
638 width: 258px;
639 min-height: 20px;
640 padding: 18px 20px 16px 20px;
641 background-color: #f4f4f4;
642 border: 1px solid #cacaca;
643 -webkit-border-radius: 4px;
644 border-radius: 4px;
645 -webkit-box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
646 box-shadow: inset 0px 0px 0px 1px rgb(255, 255, 255);
647 margin-bottom: 6px;
648 text-shadow: 1px 1px 0px #ffffff;
649 filter: dropshadow(color=#ffffff, offx=1, offy=1);
650 }
651
652 #droite .boite ul li{
653 padding: 0px 0px 14px 28px;
654 margin-top: 14px;
655 line-height: 20px;
656 font-size: 0.98em;
657 background: url("../img/pucelivre.png") top left no-repeat;
658 border-bottom: 1px solid #a5aaae;
659 }
660
661 #droite .boite ul li a{
662 color: #2C3337;
663 }
664
665 #droite .boite ul li a:hover{
666 color: #82898f;
667 -webkit-transition: 0.5s;
668 -moz-transition: 0.5s;
669 transition: 0.5s;
670 }
671
672 #droite .boite ul li:last-child, #droite .actu:last-child{
673 border-bottom: none;
674 }
675
676 #droite .actu{
677 overflow: hidden;
678 margin: 16px 0px 0px 0px;
679 padding: 0px 0px 16px 0px;
680 border-bottom: 1px solid #a5aaae;
681 }
682
683 #droite .actuImg{
684 float: left;
685 width: 52px;
686 margin-right: 18px;
687 }
688
689 #droite .actuTxt{
690 float: left;
691 width: 188px;
692 }
693
694 #droite .actuTxt p{
695 font-size: 0.94em;
696 line-height: 17px;
697 }
698
699 #droite .actuTxt p a{
700 color: #2C3337;
701 }
702
703 #droite .actuTxt p a:hover{
704 color: #82898f;
705 -webkit-transition: 0.5s;
706 -moz-transition: 0.5s;
707 transition: 0.5s;
708 }
709
710 #droite .actuTxt span{
711 display: block;
712 width: 100%;
713 margin-bottom: 6px;
714 }
715
716 #droite .actuTxt span a{
717 color: #810025;
718 font-style: italic;
719 font-size: 0.92em;
720 }
721
722 #droite .actuImg img{
723 border: 2px solid #fff;
724 }
725
726 #droite .actuImg img:hover{
727 border: 2px solid #CACACA;
728 -webkit-transition: 0.5s;
729 -moz-transition: 0.5s;
730 transition: 0.5s;
731 }
732
733 /*boite autre*/
734 #droite .boiteAutre p, #droite .boiteAutre2 p{
735 padding: 0px 0px 0px 28px;
736 line-height: 20px;
737 font-size: 1.06em;
738 }
739
740 #droite .boiteAutre p a, #droite .boiteAutre2 p a{
741 color: #2C3337;
742 }
743
744 #droite .boiteAutre p a:hover, #droite .boiteAutre2 p a:hover{
745 color: #82898f;
746 -webkit-transition: 0.5s;
747 -moz-transition: 0.5s;
748 transition: 0.5s;
749 }
750
751 .lettre{ background: url("../img/lettre.png") top left no-repeat;}
752 .faq{ background: url("../img/faq.png") top left no-repeat;}
753 .ordi{ background: url("../img/ordi.png") top left no-repeat;}
754 .cata{ background: url("../img/cata.png") top left no-repeat;}
755
756 /*search2*/
757 #search2 {
758 width:256px; /*follow your image's size*/
759 height:29px;/*follow your image's size*/
760 background-image: url("../img/searchbox2.png");
761 position:relative; /*important*/
762 margin-top: 18px;
763 }
764
765 #search2 form { display:inline ; }
766
767 .searchbox2 {
768 border:0px; /*important*/
769 background-color:transparent; /*important*/
770 position:absolute; /*important*/
771 top:0;
772 left:14px;
773 width:204px;
774 height:29px;
775 padding: 0px;
776 color: #bbb;
777 font-size: .8em;
778 }
779
780 .searchbox_submit2 {
781 border: none; /*important*/
782 outline: none;
783 background-color:transparent; /*important*/
784 position:absolute; /*important*/
785 top:0px;
786 left:216px;
787 width:40px;
788 height:29px;
789 cursor: pointer;
790 }
791
792 /*FOOTER*/
793 footer{
794 width: 100%;
795 background: url("../img/footer.png") repeat-x;
796 height: 91px;
797 margin-top: 30px;
798 }
799
800 #footer_content{
801 width: 940px;
802 margin: 0 auto;
803 height: 63px;
804 padding-top: 28px;
805 }
806
807 #footer_content p{
808 color: #fff;
809 display: block;
810 margin-bottom: 10px;
811 font-size: 0.94em;
812 }
813
814 #footer_content p a{
815 color: #fff;
816 }
817
818 #footer_content p span{
819 margin: 0px 8px;
820 }
821
822 #footer_content p a:hover{
823 color: #82898f;
824 -webkit-transition: 0.5s;
825 -moz-transition: 0.5s;
826 transition: 0.5s;
827 }