htdocs/css/default.css

   1 /***************************************************************************
   2  *  Copyright (C) 2003-2010 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 div.titre {
 232     color: #000000;
 233     background: inherit;
 234     font-weight: bold;
 235 }
 236
 237 span.titre {
 238     color: #000000;
 239     background: inherit;
 240     font-weight: bold;
 241 }
 242
 243 /*******************************************************************************
 244     4   Tableau de choix de skins
 245         [ Styles pour les tableaux de types de ceux des skins ]
 246 *******************************************************************************/
 247
 248 #skin {
 249     border-bottom: 1px solid #003399;
 250     border-top: 1px solid #003399;
 251     width: 98%;
 252     margin-left: 1%;
 253 }
 254 #skin td {
 255     border-bottom: 2px solid #003399;
 256     border-top: 1px solid #003499;
 257     vertical-align: middle;
 258 }
 259 #skin td.skigauche {
 260     background: #eeeeee;
 261     color: inherit;
 262     vertical-align: middle;
 263 }
 264 #skin td.skimilieu {
 265     padding-left: 1em;
 266     width: 100%;
 267 }
 268 #skin td.skidroite { padding: 0; }
 269
 270 /*******************************************************************************
 271     5   Contacts
 272         [ Styles liés à l'affichage de contacts ]
 273 *******************************************************************************/
 274
 275 div.contact-list {
 276     width: 98%;
 277     margin-left: 5px;
 278 }
 279
 280 div.contact-list div.contact {
 281     width: 100%;
 282     text-align: left;
 283     border-top: 1px solid #003399;
 284     background: #F4D09C;
 285     color: inherit;
 286 }
 287
 288 div.contact-list div.grayed {
 289    color: #444444;
 290    font-style: italic;
 291    background: #eee;
 292 }
 293
 294 .contact .photo {
 295     float: left;
 296 }
 297
 298 .contact .photo img {
 299     width: 40px;
 300     margin-right: 4px;
 301 }
 302
 303 div.contact div.identity {
 304     float: left;
 305     width: 85%;
 306 }
 307
 308 div.contact div.nom {
 309     font-weight: bold;
 310 }
 311
 312 div.contact div.bits {
 313     text-align: right;
 314     float: right;
 315     width: 14%;
 316 }
 317
 318 div.contact div.long {
 319     width: 100%;
 320     clear: both;
 321     background: white;
 322     color: inherit;
 323     padding-top: 1px;
 324     padding-bottom: 1px;
 325 }
 326
 327 div.long table { width: 100%; }
 328 div.long td.lt { width: 18%; font-style: italic; }
 329 div.long td.rt { width: 82%; }
 330
 331 /*******************************************************************************
 332     6   Profil
 333         [ onglets des profils ]
 334 *******************************************************************************/
 335
 336 .wizard {
 337     margin-top: -4px;
 338     margin-left: -16px;
 339 }
 340
 341 .wizard .wiz_header {
 342     height: 32px;
 343     width: 100%;
 344     background: url('../images/skins/wiz_background.png') top right repeat-x;
 345     margin-bottom: 1em;
 346 }
 347
 348 .wizard .wiz_header .wiz_tab {
 349     background: url('../images/skins/wiz_normal.png') #aaa top left repeat-x;
 350     height: 100%;
 351     text-align: center;
 352     font-size: 75%;
 353     border-right: 1px solid #888;
 354 }
 355
 356 .wizard .wiz_header .wiz_tab:hover {
 357     background: url('../images/skins/wiz_hover.png') #777 top left repeat-x;
 358     color: #fff;
 359 }
 360
 361 .wizard .wiz_header .active, .wizard .wiz_header .active:hover {
 362     background: url('../images/skins/wiz_active.png') #444 top left repeat-x;
 363     color: #fff;
 364 }
 365
 366 .wizard .wiz_header a {
 367     color: #000;
 368     text-decoration: none;
 369 }
 370
 371 .wizard .wiz_header a.active {
 372     color: #fff;
 373 }
 374
 375 .wizard .wiz_content {
 376     margin-left: 16px;
 377 }
 378
 379 .flags .texte {
 380     font-size: smaller;
 381     font-weight: bold;
 382     margin-left: -6px;
 383     padding: 0 12px 0 0;
 384 }
 385 .flags img {
 386     padding: 0 6px 0 0;
 387 }
 388
 389
 390 /*******************************************************************************
 391     7   fiche.php & fiche_referent.php
 392         [ cas de la fiche ]
 393 *******************************************************************************/
 394
 395 #fiche {
 396     width: 760px;
 397     font-size: 100%;
 398     vertical-align: top;
 399
 400     border: 1px solid #369;
 401 }
 402
 403 #fiche em { color: purple; }
 404
 405 #fiche h2 {
 406     color: #369;
 407     padding: 0px 4px;
 408     margin: 0.5em 0em;
 409     font-weight: bold;
 410     border-bottom: 1px dotted #369;
 411 }
 412
 413 #fiche .part {
 414     float: left;
 415     clear: left;
 416     width: 70%;
 417     padding-left: 0;
 418     padding-right: 0;
 419     margin-left: 0;
 420     margin-right: 0;
 421 }
 422
 423 #fiche #photo {
 424     float: right;
 425     width: 30%;
 426     padding-left: 0;
 427     margin-left: 0;
 428     clear: right;
 429 }
 430
 431 #fiche #photo img {
 432     width: 100%;
 433 }
 434
 435 #fiche_identite {
 436     padding: 5px;
 437 }
 438
 439 #fiche_identite div.civilite {
 440     text-align: center;
 441     font-weight: bold;
 442     width: 80%;
 443     float: left;
 444 }
 445
 446 #fiche_identite div.maj {
 447     float: left;
 448     width: 20%;
 449     font-size: 75%;
 450     text-align: right;
 451     clear: right;
 452     padding-bottom: 1ex;
 453 }
 454
 455 #fiche_identite div.contact {
 456     clear: both;
 457     margin: 1em;
 458     padding: 1ex;
 459     background: #fff;
 460     border: 1px dotted #69c;
 461 }
 462 #fiche_identite div.email {
 463     clear: left;
 464     float: left;
 465 }
 466 #fiche_identite div.mob {
 467     float: right;
 468     clear: right;
 469     text-align: right;
 470 }
 471
 472 #fiche_identite div.formation {
 473     margin: 0em 1em;
 474     clear: both;
 475 }
 476
 477 div.adresse {
 478     min-width: 30%;
 479     padding: 0px;
 480     margin: 0px 2% 1ex 1%;
 481 }
 482
 483 div.adresse strong {
 484     font-size: 90%;
 485 }
 486
 487 #fiche .medal_frame {
 488     float: left;
 489     width: 33%;
 490 }
 491
 492 #fiche .medal_frame img {
 493     float: left;
 494     padding: 0ex 1ex;
 495 }
 496
 497 /* only for fiche_referent.php*/
 498
 499 #fiche_referent .part {
 500     width: 100%;
 501 }
 502
 503 #fiche_referent #fiche_identite div.civilite {
 504     width: 100%;
 505 }
 506
 507 #fiche_referent{
 508     width: 100%;
 509 }
 510
 511 #fiche_referent div.rubrique_referent{
 512     float: left;
 513     width: 31%;
 514     padding: 0px;
 515     margin: 0px 1% 1ex 1%;
 516     text-align: justify;
 517 }
 518
 519 #fiche_referent em{color: purple;}
 520 #fiche_referent ul { margin: 0px; padding: 0px 1em; }
 521 #fiche_referent li { font-weight: bold; margin: 0px; padding: 0px; text-align: left; }
 522
 523 /*******************************************************************************
 524     A   SKIN
 525         [ choix de classes faites par le skinneur
 526 *******************************************************************************/
 527
 528 #dev {
 529     width: auto;
 530     text-align: center;
 531     padding: 1px;
 532
 533     color: #003399;
 534     background: #e0ffff;
 535
 536     font-family: 'Bauhaus Md BT','Bitstream Vera',sans-serif;
 537     font-size: 10pt;
 538     font-weight: bold;
 539 }
 540
 541 #dev a { text-decoration: underline; }
 542 #dev a:hover { color: #003399; background: #c0e0e0; }
 543
 544 .backtrace div.hide       { display: none; }
 545 .backtrace:hover div.hide { display: block }
 546
 547 #suid {
 548     color: red;
 549     background: #ffc0cb;
 550     width: auto;
 551     font-weight: bold;
 552     text-align: center;
 553 }
 554 #suid a {
 555     color: red;
 556     background: inherit;
 557     text-decoration: none;
 558     display: block;
 559 }
 560 #suid:hover {
 561     color: red;
 562     background: #ffffcb;
 563 }
 564 #suid a:hover {
 565     color: #ff7000;
 566     background: inherit;
 567 }
 568
 569 #body {
 570     width: 740px;
 571     margin-left: auto;
 572     margin-right: auto;
 573 }
 574
 575 #body-logo {
 576     width: 140px;
 577     border-right: 1px solid gray;
 578     text-align: center;
 579     font-family: "MS Sans Serif", sans-serif;
 580     padding-top: 4px;
 581     border-bottom: 1px solid gray;
 582 }
 583
 584 #body-top {
 585     border-bottom: 1px solid gray;
 586     text-align: center;
 587     font-size: 95%;
 588     padding: 4px;
 589     padding-bottom: 16px;
 590     font-family: "Arial", sans-serif;
 591 }
 592
 593 #body-top table { width: 100%; padding: 4px; }
 594 #body-top .date-heure { text-align: left; }
 595 #body-top .inscrits { text-align: right; }
 596
 597 #body-bottom {
 598     border-top: 1px solid gray;
 599     text-align: center;
 600     padding: 4px;
 601     font-size: 75%;
 602     font-family: "MS Sans Serif", sans-serif;
 603 }
 604
 605 #body-menu {
 606     width: 140px;
 607     border-right: 1px solid gray;
 608     text-align: center;
 609     font-family: "MS Sans Serif", sans-serif;
 610     font-size: 75%;
 611     font-weight: bold;
 612     white-space: nowrap;
 613 }
 614
 615 #body-menu .menu_item {
 616     padding-left: 4px;
 617     padding: 2px;
 618     text-align: left;
 619 }
 620
 621 #body-menu .menu_item a {
 622                 text-decoration:none;
 623 }
 624
 625 #body-menu .menu_title {
 626     color: gray;
 627     background: #eeeeee;
 628     border-top: 1px solid gray;
 629     border-bottom: 1px solid gray;
 630     padding: 1px;
 631     margin-top: 4px;
 632     text-align: center;
 633 }
 634
 635 #content {
 636     width: 600px;
 637     padding: 4px 0px 4px 16px;
 638     font-size: 95%;
 639     vertical-align: top;
 640 }
 641
 642 .quick_search {
 643     color: gray;
 644     text-align: right;
 645 }
 646
 647 div#content {
 648     padding: 1em;
 649     margin: 0em;
 650 }
 651
 652 #content input {
 653     font-size: 95%;
 654 }
 655
 656 #menu-evts {
 657     font-size: 85%;
 658 }
 659
 660 /* vim: set et ts=4 sts=4 sw=4: */