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