htdocs/css/default.css

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