merge with master
[platal.git] / htdocs / css / default.css
1 /***************************************************************************
2 * Copyright (C) 2003-2008 Polytechnique.org *
3 * http://opensource.polytechnique.org/ *
4 * *
5 * This program is free software; you can redistribute it and/or modify *
6 * it under the terms of the GNU General Public License as published by *
7 * the Free Software Foundation; either version 2 of the License, or *
8 * (at your option) any later version. *
9 * *
10 * This program is distributed in the hope that it will be useful, *
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of *
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
13 * GNU General Public License for more details. *
14 * *
15 * You should have received a copy of the GNU General Public License *
16 * along with this program; if not, write to the Free Software *
17 * Foundation, Inc., *
18 * 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA *
19 ***************************************************************************/
20
21 /*******************************************************************************
22 1 Styles par défauts
23 [ balises sans attributs ou classes sans contexte ]
24 *******************************************************************************/
25
26 body {
27 font-family: "Arial", sans-serif;
28 color: #000000;
29 background: #ffffff;
30 }
31
32 a:link, a:visited, a:active, a:hover { color: #003399; background: none; }
33 img { vertical-align: middle; }
34 a img { border: 0px; }
35 td { vertical-align: top; }
36 li { padding-left: 3px; padding-right: 3px; text-align: justify; }
37 hr { width: 90%; text-align: center }
38 dt { font-weight: bold; }
39
40 fieldset {
41 border: 1px #336699 solid;
42 background: #eeeeee;
43 color: inherit;
44
45 margin: 1em 0 1em 0;
46 }
47
48 legend {
49 border: 1px #336699 solid;
50 background: #f4d09c;
51 color: inherit;
52
53 padding-left: 4px;
54 padding-right: 4px;
55 }
56
57 .center { text-align: center; }
58 .right { text-align: right; }
59 .middle { vertical-align: middle; }
60 .smaller { font-size: smaller; font-style: italic; }
61 .spacer { clear: both; }
62
63 .float2 { float: left; width: 49%; }
64 .float3 { float: left; width: 33%; }
65
66 /*******************************************************************************
67 2 Styles <p>, <div>, <span>, <li>
68 [ styles classiques d'effets de texte ]
69 *******************************************************************************/
70
71 p {
72 margin-bottom: 0.5em;
73 text-align: justify;
74 }
75
76 .errors {
77 margin-top: 10px;
78 border: 1px solid #f00;
79 background-color: #fcc;
80 width: 98%;
81 }
82
83 .warnings {
84 margin-top: 10px;
85 border: 1px solid #ed0;
86 background-color: #ffc;
87 width: 98%;
88 }
89
90 .success {
91 margin-top: 10px;
92 border: 1px solid #0d2;
93 background-color: #cfd;
94 width: 98%;
95 }
96
97 .erreur {
98 font-weight: bold;
99 color: #ff0000;
100 background: inherit;
101 margin-top: 0.5em;
102 margin-bottom: 0.5em;
103 }
104
105 .erreur a:link, .erreur a:visited, .erreur a:active, .erreur a:hover {
106 color: #ff3333;
107 background: inherit;
108 }
109
110 .hinted {
111 border-bottom: 1px dashed black;
112 }
113
114 input.error, textarea.error {
115 background-color: #faa;
116 }
117
118 input.valid, textarea.valid {
119 background-color: #afa;
120 }
121
122 input.warning, textarea.warning {
123 background-color: #fda;
124 }
125
126 h1 {
127 color: #555555;
128 background: url('../images/skins/default_titre.gif');
129 background-repeat: no-repeat;
130
131 text-indent: 0.2em;
132 text-align: left;
133 font-size: 120%;
134 font-family: "helvetica", sans-serif;
135 font-weight: bolder;
136
137 margin: 1em 0em 1em 0em;
138 padding: 0em 0em 0em 0.5em;
139 }
140
141 h2 {
142 padding: 0.5em 0em 0em 0em;
143 margin: 0em;
144 font-size: 100%;
145 font-weight: bold;
146 }
147
148 h3 {
149 margin: 0em;
150 font-weight: bold;
151 padding: 0.25em;
152 font-size: 100%;
153 }
154
155 p.explication, div.explication {
156 font-style: italic;
157 padding: 0em 1ex 1ex 1ex;
158 }
159
160 li.spaced {
161 padding-top: 0.5em;
162 padding-bottom: 0.5em;
163 text-align: justify;
164 }
165
166 /*******************************************************************************
167 3 Tableaux bicolores + classes utiles
168 [ Tableaux à lignes alternées, en taille normale, ou tiny ]
169 *******************************************************************************/
170
171 table.bicol {
172 color: inherit;
173 background: #eeeeee;
174 border: 1px solid #336699;
175 border-collapse: collapse;
176 width: 100%;
177 margin-left: 0;
178 }
179 table.tinybicol {
180 color: inherit;
181 background: #eeeeee;
182 border: 1px solid #336699;
183 border-collapse: collapse;
184 width: 70%;
185 margin-left: 15%;
186 }
187
188 table.tinybicol tr.impair, table.bicol tr.impair {}
189 table.tinybicol tr.pair, table.bicol tr.pair {
190 color: inherit;
191 background: #eeeed0;
192 }
193
194 table.tinybicol th, table.bicol th {
195 color: #ffffff;
196 background: #336699;
197 font-weight: bold;
198 text-align: center;
199 vertical-align: middle;
200 }
201
202 table.tinybicol th a:link, table.tinybicol th a:visited,
203 table.tinybicol th a:active, table.tinybicol th a:hover,
204 table.bicol th a:link, table.bicol th a:visited,
205 table.bicol th a:active, table.bicol th a:hover {
206 color: #9999FF;
207 background: inherit;
208 }
209
210 table.tinybicol td, table.bicol td {
211 color: #000000;
212 background: inherit;
213 }
214
215 table.tinybicol td, table.bicol td, table.tinybicol tr, table.bicol tr { padding: 4px; }
216
217 td.half { width: 50%; padding: 4px; }
218 td.titre {
219 color: #000000;
220 background: inherit;
221 font-weight: bold;
222 }
223 td.action {
224 white-space: nowrap;
225 text-align: right;
226 font-weight: bold;
227 vertical-align: middle;
228 }
229 td.action a { padding: 0px 2px 0px 2px; }
230
231 /*******************************************************************************
232 4 Tableau de choix de skins
233 [ Styles pour les tableaux de types de ceux des skins ]
234 *******************************************************************************/
235
236 #skin {
237 border-bottom: 1px solid #003399;
238 border-top: 1px solid #003399;
239 width: 98%;
240 margin-left: 1%;
241 }
242 #skin td {
243 border-bottom: 2px solid #003399;
244 border-top: 1px solid #003499;
245 vertical-align: middle;
246 }
247 #skin td.skigauche {
248 background: #eeeeee;
249 color: inherit;
250 vertical-align: middle;
251 }
252 #skin td.skimilieu {
253 padding-left: 1em;
254 width: 100%;
255 }
256 #skin td.skidroite { padding: 0; }
257
258 /*******************************************************************************
259 5 Contacts
260 [ Styles liés à l'affichage de contacts ]
261 *******************************************************************************/
262
263 div.contact-list {
264 width: 98%;
265 margin-left: 1%;
266 }
267
268 div.contact-list div.contact {
269 width: 100%;
270 text-align: left;
271 border-top: 1px solid #003399;
272 background: #F4D09C;
273 color: inherit;
274 }
275
276 div.contact-list div.grayed {
277 color: #444444;
278 font-style: italic;
279 background: #eee;
280 }
281
282 .contact .photo {
283 float: left;
284 }
285
286 .contact .photo img {
287 width: 40px;
288 margin-right: 4px;
289 }
290
291 div.contact div.identity {
292 float: left;
293 width: 89%;
294 }
295
296 div.contact div.nom {
297 font-weight: bold;
298 }
299
300 div.contact div.bits {
301 text-align: right;
302 float: right;
303 width: 10%;
304 }
305
306 div.contact div.long {
307 width: 100%;
308 clear: both;
309 background: white;
310 color: inherit;
311 padding-top: 1px;
312 padding-bottom: 1px;
313 }
314
315 div.long table { width: 100%; }
316 div.long td.lt { width: 18%; font-style: italic; }
317 div.long td.rt { width: 82%; }
318
319 /*******************************************************************************
320 6 Profil
321 [ onglets des profils ]
322 *******************************************************************************/
323
324 .wizard {
325 margin-top: -4px;
326 margin-left: -16px;
327 }
328
329 .wizard .wiz_header {
330 height: 32px;
331 width: 100%;
332 background: url('../images/skins/wiz_background.png') top right repeat-x;
333 margin-bottom: 1em;
334 }
335
336 .wizard .wiz_header .wiz_tab {
337 background: url('../images/skins/wiz_normal.png') #aaa top left repeat-x;
338 height: 100%;
339 text-align: center;
340 font-size: 75%;
341 border-right: 1px solid #888;
342 }
343
344 .wizard .wiz_header .wiz_tab:hover {
345 background: url('../images/skins/wiz_hover.png') #777 top left repeat-x;
346 color: #fff;
347 }
348
349 .wizard .wiz_header .active, .wizard .wiz_header .active:hover {
350 background: url('../images/skins/wiz_active.png') #444 top left repeat-x;
351 color: #fff;
352 }
353
354 .wizard .wiz_header a {
355 color: #000;
356 text-decoration: none;
357 }
358
359 .wizard .wiz_header a.active {
360 color: #fff;
361 }
362
363 .wizard .wiz_content {
364 margin-left: 16px;
365 }
366
367 .flags .texte {
368 font-size: smaller;
369 font-weight: bold;
370 margin-left: -6px;
371 padding: 0 12px 0 0;
372 }
373 .flags img {
374 padding: 0 6px 0 0;
375 }
376
377
378 /*******************************************************************************
379 7 fiche.php & fiche_referent.php
380 [ cas de la fiche ]
381 *******************************************************************************/
382
383 #fiche {
384 width: 760px;
385 font-size: 100%;
386 vertical-align: top;
387
388 border: 1px solid #369;
389 }
390
391 #fiche em { color: purple; }
392
393 #fiche h2 {
394 color: #369;
395 padding: 0px 4px;
396 margin: 0.5em 0em;
397 font-weight: bold;
398 border-bottom: 1px dotted #369;
399 }
400
401 #fiche .part {
402 float: left;
403 clear: left;
404 width: 70%;
405 padding-left: 0;
406 padding-right: 0;
407 margin-left: 0;
408 margin-right: 0;
409 }
410
411 #fiche #photo {
412 float: right;
413 width: 30%;
414 padding-left: 0;
415 margin-left: 0;
416 clear: right;
417 }
418
419 #fiche #photo img {
420 width: 100%;
421 }
422
423 #fiche_identite {
424 padding: 5px;
425 }
426
427 #fiche_identite div.civilite {
428 text-align: center;
429 font-weight: bold;
430 width: 80%;
431 float: left;
432 }
433
434 #fiche_identite div.maj {
435 float: left;
436 width: 20%;
437 font-size: 75%;
438 text-align: right;
439 clear: right;
440 padding-bottom: 1ex;
441 }
442
443 #fiche_identite div.contact {
444 clear: both;
445 margin: 1em;
446 padding: 1ex;
447 background: #fff;
448 border: 1px dotted #69c;
449 }
450 #fiche_identite div.email {
451 clear: left;
452 float: left;
453 }
454 #fiche_identite div.mob {
455 float: right;
456 clear: right;
457 text-align: right;
458 }
459
460 #fiche_identite div.formation {
461 margin: 0em 1em;
462 clear: both;
463 }
464
465 div.adresse {
466 min-width: 30%;
467 padding: 0px;
468 margin: 0px 2% 1ex 1%;
469 }
470
471 div.adresse strong {
472 font-size: 90%;
473 }
474
475 #fiche .medal_frame {
476 float: left;
477 width: 33%;
478 }
479
480 #fiche .medal_frame img {
481 float: left;
482 padding: 0ex 1ex;
483 }
484
485 /* only for fiche_referent.php*/
486
487 #fiche_referent .part {
488 width: 100%;
489 }
490
491 #fiche_referent #fiche_identite div.civilite {
492 width: 100%;
493 }
494
495 #fiche_referent{
496 width: 100%;
497 }
498
499 #fiche_referent div.rubrique_referent{
500 float: left;
501 width: 31%;
502 padding: 0px;
503 margin: 0px 1% 1ex 1%;
504 text-align: justify;
505 }
506
507 #fiche_referent em{color: purple;}
508 #fiche_referent ul { margin: 0px; padding: 0px 1em; }
509 #fiche_referent li { font-weight: bold; margin: 0px; padding: 0px; text-align: left; }
510
511 /*******************************************************************************
512 A SKIN
513 [ choix de classes faites par le skinneur
514 *******************************************************************************/
515
516 #dev {
517 width: auto;
518 text-align: center;
519 padding: 1px;
520
521 color: #003399;
522 background: #e0ffff;
523
524 font-family: 'Bauhaus Md BT','Bitstream Vera',sans-serif;
525 font-size: 10pt;
526 font-weight: bold;
527 }
528
529 #dev a { text-decoration: underline; }
530 #dev a:hover { color: #003399; background: #c0e0e0; }
531
532 .backtrace div.hide { display: none; }
533 .backtrace:hover div.hide { display: block }
534
535 #suid {
536 color: red;
537 background: #ffc0cb;
538 width: auto;
539 font-weight: bold;
540 text-align: center;
541 }
542 #suid a {
543 color: red;
544 background: inherit;
545 text-decoration: none;
546 display: block;
547 }
548 #suid:hover {
549 color: red;
550 background: #ffffcb;
551 }
552 #suid a:hover {
553 color: #ff7000;
554 background: inherit;
555 }
556
557 #body {
558 width: 740px;
559 margin-left: auto;
560 margin-right: auto;
561 }
562
563 #body-logo {
564 width: 140px;
565 border-right: 1px solid gray;
566 text-align: center;
567 font-family: "MS Sans Serif", sans-serif;
568 padding-top: 4px;
569 border-bottom: 1px solid gray;
570 }
571
572 #body-top {
573 border-bottom: 1px solid gray;
574 text-align: center;
575 font-size: 95%;
576 padding: 4px;
577 padding-bottom: 16px;
578 font-family: "Arial", sans-serif;
579 }
580
581 #body-top table { width: 100%; padding: 4px; }
582 #body-top .date-heure { text-align: left; }
583 #body-top .inscrits { text-align: right; }
584
585 #body-bottom {
586 border-top: 1px solid gray;
587 text-align: center;
588 padding: 4px;
589 font-size: 75%;
590 font-family: "MS Sans Serif", sans-serif;
591 }
592
593 #body-menu {
594 width: 140px;
595 border-right: 1px solid gray;
596 text-align: center;
597 font-family: "MS Sans Serif", sans-serif;
598 font-size: 75%;
599 font-weight: bold;
600 white-space: nowrap;
601 }
602
603 #body-menu .menu_item {
604 padding-left: 4px;
605 padding: 2px;
606 text-align: left;
607 }
608
609 #body-menu .menu_item a {
610 text-decoration:none;
611 }
612
613 #body-menu .menu_title {
614 color: gray;
615 background: #eeeeee;
616 border-top: 1px solid gray;
617 border-bottom: 1px solid gray;
618 padding: 1px;
619 margin-top: 4px;
620 text-align: center;
621 }
622
623 #content {
624 width: 600px;
625 padding: 4px 0px 4px 16px;
626 font-size: 95%;
627 vertical-align: top;
628 }
629
630 .quick_search {
631 color: gray;
632 text-align: right;
633 }
634
635 div#content {
636 padding: 1em;
637 margin: 0em;
638 }
639
640 #content input {
641 font-size: 95%;
642 }
643
644 #menu-evts {
645 font-size: 85%;
646 }
647
648 /* vim: set et ts=4 sts=4 sw=4: */