htdocs/css/default.css

   1 /***************************************************************************
   2  *  Copyright (C) 2003-2006 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
  39 fieldset {
  40     border: 1px #336699 solid;
  41     background: #eeeeee;
  42     color: inherit;
  43
  44     margin-top: 1em;
  45     margin-bottom: 1em;
  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: 98%;
 140     margin-left: 1%;
 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 table.tinybicol td, table.bicol td {
 165     color: #000000;
 166     background: inherit;
 167 }
 168
 169 table.tinybicol td, table.bicol td, table.tinybicol tr, table.bicol tr { padding: 4px; }
 170
 171 td.half { width: 50%; padding: 4px; }
 172 td.titre {
 173     color: #000000;
 174     background: inherit;
 175     font-weight: bold;
 176 }
 177 td.action {
 178     white-space: nowrap;
 179     text-align: right;
 180     font-weight: bold;
 181     vertical-align: middle;
 182 }
 183 td.action a { padding: 0px 2px 0px 2px; }
 184
 185 /*******************************************************************************
 186     4   Tableau de choix de skins
 187         [ Styles pour les tableaux de types de ceux des skins ]
 188 *******************************************************************************/
 189
 190 #skin {
 191     border-bottom: 1px solid #003399;
 192     border-top: 1px solid #003399;
 193     width: 98%;
 194     margin-left: 1%;
 195 }
 196 #skin td {
 197     border-bottom: 2px solid #003399;
 198     border-top: 1px solid #003499;
 199     vertical-align: middle;
 200 }
 201 #skin td.skigauche {
 202     background: #eeeeee;
 203     color: inherit;
 204     vertical-align: middle;
 205 }
 206 #skin td.skimilieu {
 207     padding-left: 1em;
 208     width: 100%;
 209 }
 210 #skin td.skidroite { padding: 0; }
 211
 212 /*******************************************************************************
 213     5   Contacts
 214         [ Styles liés à l'affichage de contacts ]
 215 *******************************************************************************/
 216
 217 div.contact-list {
 218     width: 98%;
 219     margin-left: 1%;
 220 }
 221
 222 div.contact-list div.contact {
 223     width: 100%;
 224     text-align: left;
 225     border-top: 1px solid #003399;
 226     background: #F4D09C;
 227     color: inherit;
 228 }
 229
 230 div.grayed {
 231     color: #444444;
 232     font-style: italic;
 233 }
 234
 235 div.grayed div.contact {
 236     background: #eee;
 237 }
 238
 239 div.contact div.nom {
 240     font-weight: bold;
 241     width: 35%;
 242     float: left;
 243 }
 244
 245 div.contact div.appli {
 246     float: left;
 247 }
 248
 249 div.contact div.bits {
 250     text-align: right;
 251     float: right;
 252 }
 253
 254 div.contact div.long {
 255     width: 100%;
 256     clear: both;
 257     background: white;
 258     color: inherit;
 259     padding-top: 1px;
 260     padding-bottom: 1px;
 261 }
 262
 263 div.long table { width: 100%; }
 264 div.long td.lt { width: 35%; }
 265 div.long td.rt { width: 65%; }
 266
 267 /*******************************************************************************
 268     6   Profil
 269         [ onglets des profils ]
 270 *******************************************************************************/
 271
 272 table.flags {
 273     margin: 1em 0em 0em 0em;
 274 }
 275 table.flags input { margin: 0px 2px; padding: 0px; }
 276
 277 table.flags td.texte, tr.flags td.texte {
 278     font-size: smaller;
 279     font-weight: bold;
 280     padding: 3px;
 281 }
 282 table.flags td.vert, tr.flags td.vert {
 283     background: green;
 284     padding: 3px;
 285     text-align: center;
 286 }
 287 table.flags td.orange, tr.flags td.orange {
 288     background: #ff9900;
 289     padding: 3px;
 290     text-align: center;
 291 }
 292 table.flags td.rouge, tr.flags td.rouge {
 293     background: red;
 294     padding: 3px;
 295     text-align: center;
 296 }
 297
 298 table.cadre_a_onglet{
 299     border-width: 0;
 300     padding : 0;
 301     margin: 0;
 302 }
 303
 304 td.conteneur_tab {
 305     border-width : 1px 2px 2px 1px;
 306     border-style : solid;
 307     border-color : #999;
 308     padding : 4px 4px 4px 4px;
 309     background : #eceade;
 310 }
 311
 312 #onglet {
 313     display : block;
 314     margin : 0;
 315     padding : 0;
 316 }
 317
 318 #onglet li {
 319     display : block;
 320     float : left;
 321     padding : 0.4ex;
 322     margin : 0 0.3ex -1px 0;
 323     background : #D2E0E6  repeat-x 0 100%;
 324     border-width : 1px 1px 0px 1px;
 325     border-style : solid;
 326     border-color : #999;
 327     border-bottom-color : #999;
 328     width: auto;
 329     height: 5ex;
 330     text-align: center;
 331 }
 332
 333 #onglet li:hover { background : #fc3 repeat-x 0 100%; }
 334
 335 #onglet li.actif {
 336     background : #eceade;
 337     border-bottom-color : #eceade;
 338     font-weight: bold;
 339 }
 340
 341 #onglet li a {
 342     font-size: 80%;
 343     font-weight : normal;
 344     text-decoration : none;
 345     color : #000;
 346 }
 347
 348 #onglet li a:hover { text-decoration: underline; }
 349 #onglet li img { margin-right : 2px; }
 350
 351 /*******************************************************************************
 352     7   fiche.php & fiche_referent.php
 353         [ cas de la fiche ]
 354 *******************************************************************************/
 355
 356 #fiche {
 357     width: 760px;
 358     font-size: 100%;
 359     vertical-align: top;
 360
 361     border: 1px solid #369;
 362 }
 363
 364 #fiche em { color: purple; }
 365
 366 #fiche h2 {
 367     color: #369;
 368     padding: 0px 4px;
 369     margin: 0.5em 0em;
 370     font-weight: bold;
 371     border-bottom: 1px dotted #369;
 372 }
 373
 374 #fiche_identite {
 375     padding: 5px;
 376     width: 600px;
 377 }
 378
 379 #photo { padding-left: 1em; }
 380
 381 #fiche_identite div.civilite {
 382     text-align: center;
 383     font-weight: bold;
 384     width: 80%;
 385     float: left;
 386 }
 387
 388 #fiche_identite div.maj {
 389     float: left;
 390     width: 20%;
 391     font-size: 75%;
 392     text-align: right;
 393     clear: right;
 394 }
 395
 396 #fiche_identite div.contact {
 397     clear: both;
 398     margin: 1em;
 399     padding: 1ex;
 400     background: #fff;
 401     border: 1px dotted #69c;
 402 }
 403 #fiche_identite div.email {
 404     clear: left;
 405     float: left;
 406 }
 407 #fiche_identite div.mob {
 408     float: right;
 409     clear: right;
 410     text-align: right;
 411 }
 412
 413 #fiche_identite div.formation {
 414     margin: 0em 1em;
 415     clear: both;
 416 }
 417
 418 div.adresse {
 419     float: left;
 420     width: 48%;
 421     padding: 0px;
 422     margin: 0px 0.5% 1ex 1%;
 423 }
 424
 425 div.adresse strong {
 426     font-size: 90%;
 427 }
 428
 429 /* only for fiche_referent.php*/
 430
 431 #fiche_referent{
 432     padding: 10px;
 433     width: 100%;
 434 }
 435
 436 #fiche_referent div.rubrique_referent{
 437     float: left;
 438     width: 31%;
 439     padding: 0px;
 440     margin: 0px 1% 1ex 1%;
 441
 442 }
 443
 444 #fiche_referent em{color: purple;}
 445 #fiche_referent ul { margin: 0px; padding: 0px 1em; }
 446 #fiche_referent li { font-weight: bold; margin: 0px; padding: 0px; text-align: left; }
 447
 448 /*******************************************************************************
 449     A   SKIN
 450         [ choix de classes faites par le skinneur
 451 *******************************************************************************/
 452
 453 #dev {
 454     width: auto;
 455     text-align: center;
 456     padding: 1px;
 457
 458     color: #003399;
 459     background: #e0ffff;
 460
 461     font-family: 'Bauhaus Md BT','Bitstream Vera',sans-serif;
 462     font-size: 10pt;
 463     font-weight: bold;
 464 }
 465
 466 #dev a { text-decoration: underline; }
 467 #dev a:hover { color: #003399; background: #c0e0e0; }
 468
 469 #db-trace div.hide       { display: none; }
 470 #db-trace:hover div.hide { display: block }
 471
 472 #suid {
 473     color: red;
 474     background: #ffc0cb;
 475     width: 100%;
 476     font-weight: bold;
 477 }
 478 #suid td { padding: 2px; }
 479 #suid a { color: red; }
 480
 481 #body {
 482     width: 740px;
 483     margin-left: auto;
 484     margin-right: auto;
 485 }
 486
 487 #body-logo {
 488     width: 140px;
 489     border-right: 1px solid gray;
 490     text-align: center;
 491     font-family: "MS Sans Serif", sans-serif;
 492     padding-top: 4px;
 493     border-bottom: 1px solid gray;
 494 }
 495
 496 #body-top {
 497     border-bottom: 1px solid gray;
 498     text-align: center;
 499     font-size: 95%;
 500     padding: 4px;
 501     padding-bottom: 16px;
 502     font-family: "Arial", sans-serif;
 503 }
 504
 505 #body-top table { width: 100%; padding: 4px; }
 506 #body-top .date-heure { text-align: left; }
 507 #body-top .inscrits { text-align: right; }
 508
 509 #body-bottom {
 510     border-top: 1px solid gray;
 511     text-align: center;
 512     padding: 4px;
 513     font-size: 75%;
 514     font-family: "MS Sans Serif", sans-serif;
 515 }
 516
 517 #body-menu {
 518     width: 140px;
 519     border-right: 1px solid gray;
 520     text-align: center;
 521     font-family: "MS Sans Serif", sans-serif;
 522     font-size: 75%;
 523     font-weight: bold;
 524     white-space: nowrap;
 525 }
 526
 527 #body-menu .menu_item {
 528     padding-left: 4px;
 529     padding: 2px;
 530     text-align: left;
 531 }
 532
 533 #body-menu .menu_title {
 534     color: gray;
 535     background: #eeeeee;
 536     border-top: 1px solid gray;
 537     border-bottom: 1px solid gray;
 538     padding: 1px;
 539     margin-top: 4px;
 540     text-align: center;
 541 }
 542
 543 #content {
 544     width: 600px;
 545     padding: 4px 0px 4px 16px;
 546     font-size: 95%;
 547     vertical-align: top;
 548 }
 549
 550 #quick_search {
 551     color: gray;
 552     text-align: right;
 553 }
 554
 555 div#content {
 556     padding: 1em;
 557     margin: 0em;
 558 }
 559
 560 #content input {
 561     font-size: 95%;
 562 }
 563
 564 /* vim: set et ts=4 sts=4 sw=4: */