Source de site.css
0: /* *************************************** */
1: /* ENVIRONNEMENTS STRUCTURANTS DES PAGES */
2: /* *************************************** */
3:
4: /* l'ensemble du document */
5:
6: body {
7:
8: background-color : #DDEEFF;
9: color : #003366;
10:
11: font-family : Verdana,Geneva,Arial,Helvetica,sans-serif;
12:
13: margin : 0;
14: padding : 0em;
15:
16: border-bottom : 2em solid #006699;
17:
18: }
19:
20: /* la partie contenue : les différents types de page */
21:
22: div.page, div.pagelarge {
23:
24: background-color : #FFFFFF;
25: color : inherit;
26: text-align : justify;
27: padding : 3em 2em 0em 3em;
28: }
29:
30: div.page {
31:
32: margin : 0em 5% 0em 20%;
33:
34: }
35:
36: div.pagelarge {
37:
38: margin : 0em 5% 0 5%;
39:
40: }
41:
42: /* l'en-tête */
43:
44: div.header {
45: position : absolute;
46: top : 0px;
47: left : 0px;
48: background-color : #006699;
49: color : #FFFFFF;
50: padding : 5px 10em 5px 1em;
51: white-space : nowrap;
52: width : 100%;
53: }
54:
55: html>body div.header {
56: position : fixed;
57: }
58:
59: span.nomsite {
60:
61: font-size : 120%;
62: font-weight : bold;
63:
64: }
65:
66: div.header div.forms {
67:
68: float : right;
69: margin : 0;
70: padding : 0;
71: }
72:
73: div.header form {
74:
75: display : inline;
76: margin : 0 2em 0 0;
77: padding : 0;
78:
79: }
80:
81: div.header form input, div.header form select {
82: border : 0px solid #FFFFFF;
83: }
84:
85:
86:
87: /* menu et annonces à mettre sur le côté */
88:
89: div.menu {
90:
91: margin-top : 2em;
92: float : left;
93: padding : 0em;
94: width : 20%;
95:
96: }
97:
98: html>body div.menu {
99:
100: position : fixed;
101: float : left;
102: padding : 0em;
103: width : 20%;
104: }
105:
106:
107: div.partmenu {
108:
109: padding : 1em;
110: font-size : 80%;
111:
112: text-align : justify;
113:
114: border-bottom : 1px dashed #999999;
115:
116: }
117:
118: div.partmenu ul {
119: padding : 0em;
120: margin : 0em;
121: list-style-image : url(Images/carre.png);
122: }
123:
124:
125: div.partmenu p {
126: text-indent : 0em;
127: margin : 0em;
128: }
129:
130:
131:
132: /* pied de page */
133:
134: div.pied {
135:
136: border-top-style : dotted;
137: border-top-width : 1px;
138: border-top-color : #999999;
139:
140: margin : 0 -2em 0 -2em;
141: padding : 5px 1em 1em 1em;
142:
143: }
144:
145: div.logos {
146: float : right;
147: }
148:
149:
150: div.path, div.signature {
151: font-size : 75%;
152: }
153: div.path {
154: color : #666666;
155: background-color : inherit;
156: margin-top : -5px;
157: }
158:
159:
160:
161: /* autres éléments communs à la majorité des pages */
162:
163: div.description {
164: text-align : justify;
165: margin : 2px 0px 15px 2px;
166: font-style : italic;
167: }
168:
169: div.presentation {
170:
171: color : #000000;
172: font-style : italic;
173: background-color : inherit;
174: text-align : justify;
175: margin : 3em 5em 3em 3em;
176: }
177:
178:
179:
180: div.menuleftright {
181:
182: float : right;
183: text-align : left;
184: margin : 2em 2em 1em 4em;
185:
186: }
187:
188: div.itemleftright {
189:
190: font-size : 95%;
191:
192: }
193:
194:
195:
196:
197:
198:
199: /* Les sommaires */
200:
201: legend {
202:
203: font-weight : bold;
204: font-variant : small-caps;
205: font-size : 100%;
206:
207: color : #006699;
208: background-color : inherit;
209:
210: padding : 0em 1em 0em 1em;
211: margin : 0em;
212:
213: }
214:
215: fieldset {
216:
217: background-color : #FFFFFF;
218: color : inherit;
219:
220: padding : 1em;
221: margin : 0em 0em 1em 0em;
222: font-size : 80%;
223:
224: text-align : left;
225:
226: border : 1px solid #999999;
227: }
228:
229: fieldset.sommaire {
230:
231: float : right;
232: margin : -1em 1em 1em 1em;
233: width : 33%;
234:
235: }
236:
237: fieldset.sommairelarge {
238:
239: margin : 1em 1em 1em 15%;
240: width : 70%;
241: }
242:
243:
244: fieldset span {
245: font-size : 80%;
246: }
247:
248: fieldset ul {
249: padding : 0em;
250: margin : 1em;
251: }
252:
253:
254: div.blocsommaire {
255: width : 50%;
256: float : left;
257: }
258:
259:
260: .sommaire ul, .sommairelarge ul {
261: list-style-image : url(Images/item_level_1.png);
262: }
263:
264: .sommaire ul li, .sommairelarge ul li {
265: list-style-image : url(Images/item_level_1.png);
266: margin : 0 0 0 1em;
267: font-size : 80%;
268: }
269:
270:
271: /* encart */
272:
273: div.encart {
274:
275: text-align : justify;
276:
277: border-style : dashed;
278: border-width : 1px;
279: border-color : #999999;
280:
281: color : #003366;
282: background-color : #DDEEFF;
283:
284: font-weight : bold;
285:
286: margin-left : 10%;
287: margin-right : 10%;
288: margin-bottom : 2em;
289:
290: padding : 1em;
291:
292:
293: }
294:
295: div.encart h1 {
296:
297: font-weight : bold;
298: font-variant : small-caps;
299: font-size : 100%;
300:
301: text-align : left;
302:
303: color : #006699;
304: background-color : inherit;
305:
306: margin : 0;
307: padding : 0;
308: border-bottom : none;
309:
310:
311: }
312:
313: div.encart p {
314: text-indent : 0em;
315: margin : 0em;
316: }
317:
318: div.encart ul {
319: padding : 0em;
320: margin : 1em;
321: list-style-image : url(Images/carre.png);
322: }
323:
324:
325:
326:
327:
328:
329:
330:
331:
332: /* ********************** */
333: /* Autres éléments HTML */
334: /* ********************** */
335:
336:
337: /* on détourne la ligne de séparation */
338:
339: hr {
340: clear : both;
341: visibility : hidden;
342: }
343:
344:
345: /* les liens hypertextes */
346:
347: a:link {
348: text-decoration : none;
349: color : #006699;
350: background-color : inherit;
351: }
352:
353: a:hover {
354: text-decoration : none;
355: color : #FFFFFF;
356: background-color : #006699;
357: }
358:
359:
360: a:active {
361: text-decoration : none;
362: color : #006699;
363: background-color : inherit;
364: }
365:
366: a:visited {
367: text-decoration : none;
368: }
369:
370: a.ancre {
371: display : inline;
372: height : 3em;
373: }
374:
375: th a:link {
376: text-decoration : none;
377: color : #FFFFFF;
378: background-color : inherit;
379: }
380:
381: th a:hover {
382: text-decoration : none;
383: color : #006699;
384: background-color : #FFFFFF;
385: }
386:
387: /*
388: h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover {
389:
390: text-decoration : none;
391: color : inherit;
392: background-color : inherit;
393:
394: }
395: */
396:
397: div.suite {
398: text-align : right;
399: }
400:
401: a.liencorrection {
402: padding : 0px 10px 3px 10px;
403: border : 1px dotted #CCCCCC;
404: }
405:
406:
407:
408:
409: /* les titres : ni h5 ni h6 dans mes documents */
410:
411: h1 {
412:
413: color : #006699;
414: background-color : inherit;
415:
416: /* text-align: right; */
417:
418: font-weight : bold;
419: font-variant : small-caps;
420: font-size : 150%;
421:
422: }
423:
424:
425: div.article h2:before {
426: content : counter(section) " ";
427: }
428:
429: h2 {
430:
431: counter-increment : section;
432: counter-reset : subsection;
433: /*
434: color : #006699;
435: background-color : inherit;
436: text-decoration : underline;
437: */
438:
439: color : #DDEEFF;
440: background-color : #006699;
441:
442: font-weight : bold;
443: font-variant : small-caps;
444: font-size : 110%;
445:
446: margin : 3em -1em 2em -2em;
447: padding : 0.1em 1em 0.2em 2em;
448:
449: }
450:
451:
452: div.article h3:before {
453: content : counter(section) "." counter(subsection) " ";
454: }
455:
456: h3 {
457:
458: counter-increment : subsection;
459:
460: font-weight : bold;
461: font-variant : small-caps;
462: font-size : 105%;
463: color : #006699;
464: background-color : inherit;
465:
466: margin-top : 1.5em;
467: margin-bottom : 0.5em;
468:
469: }
470:
471:
472: h4 {
473:
474: text-align : left;
475:
476: font-weight : bold;
477: font-size : 100%;
478: font-style : italic;
479:
480: color : #333333;
481: background-color : inherit;
482:
483: margin-top : 1em;
484: margin-bottom : 0.5em;
485:
486: }
487:
488: div.algorithm h1, div.exemple h1 {
489:
490: font-weight : bold;
491: font-variant : small-caps;
492: font-size : 125%;
493:
494: text-align : center;
495:
496: color : #006699;
497: background-color : inherit;
498:
499: padding-bottom : 1em;
500: margin-bottom : 2em;
501: border-bottom : 2px solid #006699;
502:
503: }
504:
505:
506:
507: /* les listes */
508:
509: li {
510: margin : 0.5em 1em 0em 1em;
511: }
512:
513:
514: ul {
515: list-style-image : url(Images/item_level_1.png);
516: }
517: ul ul {
518: list-style-image : url(Images/item_level_2.png);
519: }
520: ul ul ul {
521: list-style-image : url(Images/item_level_3.png);
522: }
523: ul ul ul ul {
524: list-style-image : url(Images/item_level_1.png);
525: }
526: ul ul ul ul ul {
527: list-style-image : url(Images/item_level_2.png);
528: }
529: ul ul ul ul ul ul {
530: list-style-image : url(Images/item_level_3.png);
531: }
532:
533: ul.details {
534: /* list-style-image: url(Images/folder_cyan.png); */
535: list-style-image : url(Images/folder_cyan.png);
536: }
537: ul.aussi {
538: list-style-image : url(Images/folder_yellow.png);
539: }
540:
541: td ul {
542: list-style-position : outside;
543: margin-left : 0;
544: }
545: td ul li {
546: margin-left : 0;
547: }
548:
549:
550:
551: /* les tableaux */
552:
553: table {
554:
555: border : 1px solid #999999;
556: border-collapse : collapse;
557: border-spacing : 0;
558:
559: margin : 1em 0em 1em 0em;
560: }
561:
562:
563: th {
564: color : #FFFFFF;
565: /* font-weight:bold; */
566: font-weight : normal;
567: background-color : #006699;
568: border : 1px solid #999999;
569: padding : 0.2em;
570: font-variant : small-caps;
571: font-size : 90%;
572:
573: }
574:
575: td {
576: border : 1px dotted #CCCCCC;
577: padding : 0.2em;
578: font-size : 90%;
579: font-weight : lighter;
580: }
581:
582: td b, td strong {
583: font-weight : bold;
584: }
585:
586: th.coinvide {
587: border-left-color : #FFFFFF;
588: border-top-color : #FFFFFF;
589: color : inherit;
590: background-color : #FFFFFF;
591: }
592:
593:
594: table.sansbord {
595:
596: margin : 2em;
597: border : 0em;
598: border-collapse : separate;
599: border-spacing : 0;
600: }
601:
602: table.sansbord td {
603: border : 0em;
604: padding : 2px;
605: }
606:
607:
608:
609:
610:
611: /* Les images */
612:
613: img {
614: border : 0;
615: vertical-align : middle;
616: }
617:
618: p img {
619: vertical-align : top;
620: }
621:
622: img.encadre {
623: border : 2px solid #CCCCCC;
624: }
625:
626: div.photodemoi {
627: width : 200px;
628: margin-left : 5em;
629: margin-right : 1em;
630: margin-top : 0em;
631: margin-bottom : 2em;
632: padding-top : 2em;
633: float : left;
634: }
635:
636: div.photodemoi img {
637: width : 200px;
638: border : 2px solid #99CCCC;
639: }
640:
641:
642: /* paragraphes */
643:
644: p {
645: text-indent : 1em;
646: }
647:
648:
649: /* autres... */
650:
651: sup {
652: line-height : 80%;
653: font-size : 82%;
654: }
655:
656: tt {
657: background-color : inherit;
658: color : #333333;
659: }
660:
661: em em {
662: font-style : normal;
663: }
664:
665:
666:
667:
668:
669: /* **************************** */
670: /* ENVIRONNEMENTS SPECIFIQUES */
671: /* **************************** */
672:
673: /* algorithmes, définitions, examples, code */
674:
675: div.algorithm {
676:
677: border-style : solid;
678: border-width : 1px;
679: border-color : #006699;
680:
681: font-family : monospace;
682:
683: margin-left : 5%;
684: margin-right : 5%;
685: margin-bottom : 2em;
686:
687: padding : 1em;
688:
689: color : #000000;;
690: background-color : inherit;
691:
692: }
693:
694: div.definition {
695:
696: border-style : solid;
697: border-width : 1px;
698: border-color : #999999;
699:
700: color : inherit;
701: background-color : #FFFFFF;
702:
703: font-size : 110%;
704:
705: margin-left : 10%;
706: margin-right : 10%;
707: margin-bottom : 2em;
708:
709: padding : 1em;
710:
711: }
712:
713: div.exemple {
714:
715: border-style : solid;
716: border-width : 1px;
717: border-color : #999999;
718:
719: color : #000000;
720: background-color : #FFFFCC;
721:
722: font-family : monospace;
723:
724: margin-left : 5%;
725: margin-right : 5%;
726: margin-bottom : 2em;
727:
728: padding : 1em;
729:
730: }
731:
732: div.exemple pre, div.algorithm pre {
733: margin : 0em;
734: }
735:
736: pre {
737: margin-left : 3em;
738: }
739:
740: pre.code {
741:
742: border-style : solid;
743: border-width : 1px;
744: border-color : #006699;
745:
746: font-family : monospace;
747: font-size : 110%;
748:
749: margin-left : 10%;
750: margin-right : 10%;
751: margin-bottom : 2em;
752:
753: padding : 1em;
754:
755: }
756:
757: div.code {
758: font-family : monospace;
759: white-space : pre;
760: }
761:
762:
763: div.exercice {
764:
765: border : 1px dashed #CCCCCC;
766:
767: margin-bottom : 1em;
768: padding : 1em;
769:
770:
771: }
772:
773:
774: /* citations */
775:
776: div.citation {
777: text-align : right;
778: font-size : 90%;
779: }
780:
781:
782:
783: /* des publications, bibliographies, etc. */
784:
785: img.biblio {
786: margin-right : 0;
787: width : 100px;
788: float : right;
789: }
790:
791: /* div.biblio : inutile */
792: div.biblio {
793: padding : 1em;
794: margin-bottom : 5em;
795: }
796:
797: div.publication {
798:
799: color : inherit;
800: /* background-color: #DDEEFF; */
801: background-color : #EEEEEE;
802:
803: margin-bottom : 1em;
804: padding : 1em;
805:
806:
807: }
808:
809: div.publication span.auteurs {
810:
811: font-variant : small-caps;
812: }
813:
814: div.publication span.titre {
815: font-style : italic;
816: }
817:
818: div.publication ul {
819: padding : 0em;
820: margin : 1em;
821: list-style-image : url(Images/carre.png);
822: }
823:
824:
825:
826: /* ******************* */
827: /* PAGES SPECIFIQUES */
828: /* ******************* */
829:
830: /* moteur de recherche */
831:
832: div.searchanswer {
833:
834: margin : 1em 1em 2em 1em;
835:
836: }
837:
838:
839: /* emploi du temps */
840:
841:
842: table.edt tr {
843: height : 4em;
844: }
845:
846: table.edt em {
847: color : #FF9900;
848: background-color : inherit;
849: font-size : 100%;
850: border-bottom-style : dotted;
851: border-bottom-width : 2px;
852: }
853:
854: td.edt {
855: color : inherit;
856: background-color : #EEEEEE;
857: border-left : 1px dashed #999999;
858: border-right : 1px dashed #999999;
859: padding : 0.2em;
860: /* font-size: 90%; */
861: }
862:
863: table.edt th {
864: font-size : 80%;
865: }
866: td.edt span {
867: font-size : 80%;
868: }
869: span.theme {
870: display : block;
871: white-space : nowrap;
872: /* font-size: 90%; */
873: }
874: span.public {
875: color : #000000;
876: background-color : inherit;
877: display : block;
878: white-space : nowrap;
879: }
880: span.lieu {
881: color : #CC6633;
882: background-color : inherit;
883: display : block;
884: white-space : nowrap;
885: /* font-size: 80%; */
886: }
887:
888: tr.fini td {
889:
890: color : inherit;
891: background-color : #EEEEEE;
892:
893: }
894:
895:
896: /* tableaux des pages de statistiques du site */
897:
898: tr.enseignement {
899: color : inherit;
900: background-color : #CCFFFF;
901: }
902:
903: tr.recherche {
904: color : inherit;
905: background-color : #FFFFCC;
906: }
907:
908: tr.perso {
909: color : inherit;
910: background-color : #FFCCFF;
911: }
912:
913: tr.externe {
914: color : inherit;
915: background-color : #CCCCCC;
916: }
917:
918:
919: /* plan du site (surveiller la profondeur maximale) */
920:
921:
922: div.plan {
923: padding : 0.5em 0.5em 0em 0.5em;
924: margin : 0 0.5em 0 1.5em;
925: font-size : 95%;
926: }
927:
928: div.plan div.plan {
929: padding-top : 0.25em;
930: border-left : 1px solid #000000;
931: }
932: div.plan div.plan div.plan {
933: padding-top : 0.1em;
934: border-left : 1px solid #006699;
935: }
936: div.plan div.plan div.plan div.plan {
937: padding-top : 0.05em;
938: border-left : 1px dotted #000000;
939: }
940: div.plan div.plan div.plan div.plan div.plan {
941: padding-top : 0em;
942: border-left : 1px dotted #006699;
943: }
944:
945:
946:
947:
948: /* nuage de mots-clefs */
949:
950: div.nuagerecherche,div.nuageperso,div.nuageenseignement,div.nuageexterne,div.nuagemisc {
951: line-height : 35px;
952: font : normal small verdana, arial, helvetica, sans-serif;
953: text-align : justify;
954: border : 1px solid #000000;
955: margin : 0em 12% 3em 12%;
956: padding : 1em 1.5em 1em 1.5em;
957: }
958:
959:
960: div.nuagerecherche {
961: color : #000000;
962: background-color : #FFFFCC;
963: }
964:
965: div.nuageperso {
966: color : #000000;
967: background-color : #FFCCFF;
968: }
969:
970: div.nuageenseignement {
971: color : #000000;
972: background-color : #CCFFFF;
973: }
974:
975:
976: div.nuageexterne {
977: color : #000000;
978: background-color : #CCCCCC;
979: }
980:
981: .nuage a {
982: text-decoration : none;
983: white-space : nowrap;
984: }
985:
986: a.level1 { font-size:12px;color:#999999; background-color: inherit;}
987: a.level2 { font-size:14px;color:#999999; background-color: inherit;}
988:
989:
990: a.level3 { font-size:16px;color:#47657B; background-color: inherit;}
991: a.level4 { font-size:18px;color:#47657B; background-color: inherit;}
992:
993: a.level5 { font-size:20px;color:#333333; background-color: inherit;}
994: a.level6 { font-size:22px;color:#333333; background-color: inherit;}
995:
996: a.level7 { font-size:24px;color:#E76300; background-color: inherit;}
997: a.level8 { font-size:26px;color:#E76300; background-color: inherit;}
998:
999: a.level9 { font-size:28px;color:#FF3300; background-color: inherit;}
1000: a.level10 { font-size:30px;color:#FF3300; background-color: inherit;}
1001:
1002:
1003:
1004: /* pages avec des avis */
1005:
1006: div.livre, div.film, div.commerce {
1007:
1008: border-style : solid;
1009: border-width : 1px;
1010: border-color : #006699;
1011:
1012: font-family : monospace;
1013: font-size : 110%;
1014:
1015: margin-bottom : 2em;
1016:
1017: padding : 1em;
1018:
1019: }
1020:
1021: p.commentaire {
1022:
1023: text-indent : 0em;
1024: margin : 1em 5em 1em 1em;
1025:
1026: color : #006699;
1027: background-color : inherit;
1028:
1029: font-weight : bold;
1030: font-style : italic;
1031:
1032: }
1033:
1034:
1035: /* page representant un fichier xml */
1036:
1037: div.blocelement {
1038:
1039: margin : 0em 1em 0em 1.5em;
1040: text-align : left;
1041: }
1042:
1043: div.contenumixte, div.texte {
1044:
1045: margin-left : 1.5em;
1046: text-align : justify;
1047:
1048: }
1049:
1050: div.comment {
1051:
1052: color : #000000;
1053: background-color : #DDEEFF;
1054: padding-left : 1.5em;
1055: }
1056:
1057:
1058: div.instruction {
1059:
1060: color : #FF3300;
1061: background-color : inherit;
1062: }
1063:
1064:
1065:
1066: span.langagexml {
1067:
1068: color : #B32400;
1069: background-color : inherit;
1070:
1071: }
1072:
1073: span.valeur {
1074:
1075: color : #003366;
1076: background-color : inherit;
1077:
1078: }
1079:
1080: .texte {
1081:
1082: color : #003366;
1083: background-color : inherit;
1084:
1085: }
1086:
1087:
1088: /* page album photos */
1089:
1090: div.album {
1091:
1092: /* margin: 5em; */
1093:
1094: }
1095:
1096: div.album img {
1097:
1098: margin : 1em;
1099:
1100: }
1101:
1102: img.diaporama {
1103:
1104: margin-top : -0.5em;
1105: margin-bottom : -2em;
1106: }
1107:
1108: div.album a {
1109:
1110: text-decoration : none;
1111: color : inherit;
1112: background-color : inherit;
1113:
1114: }
1115: div.album a img {
1116:
1117: border : 1px solid #006699;
1118:
1119: }
1120: div.album a:hover img {
1121:
1122: border : 1px solid #000000;
1123:
1124: }
1125:
1126: div.descriptionphoto {
1127:
1128: margin : 2em 5em 0em 5em;
1129: color : #000000;
1130: background-color : inherit;
1131:
1132: }
1133:
1134:
1135: div.descriptionphoto p {
1136: text-indent : 0em;
1137: margin : 1em 0em 0em 0em;
1138: }
1139:
1140:
1141: div.descriptionalbum {
1142: margin : 2em 1em 2em 0em;
1143: padding : 0em;
1144: }
1145: div.descriptionalbum a {
1146: float : left;
1147: margin : 0em 1em 0em 0em;
1148: padding : 0em;
1149: }
1150: div.descriptionalbum img {
1151: border : 1px solid #006699;
1152: margin : 0em;
1153: }
1154: div.descriptionalbum h3 {
1155: margin : 0em 0em 0.5em 0em;
1156: padding : 0em;
1157: }
1158: div.descriptionalbum hr {
1159: margin : 0em;
1160: padding : 0em;
1161: }
1162: div.descriptionalbum p {
1163: text-indent : 0em;
1164: margin : 0em;
1165: padding : 0em;
1166: }
1167:
1168:
1169:
1170: div.presentationalbum {
1171:
1172: color : #000000;
1173: font-style : italic;
1174: background-color : inherit;
1175: text-align : justify;
1176: margin : 3em 5em -2em 3em;
1177: }
1178:
1179:
1180: /* boites qui s'ouvrent et qui se ferment */
1181:
1182: div.seance:hover div.bonus {
1183: display : block;
1184: border : 1px dotted #CCCCCC;
1185: }
1186:
1187: div.bonus {
1188: display : none;
1189: }
1190:
1191:
1192: /* divers */
1193:
1194: .personne {
1195:
1196: font-variant : small-caps;
1197: }
1198:
1199: