htdocs/css/default.css

   1 /***************************************************************************
   2  *  Copyright (C) 2003-2004 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/sk_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 {
 278     font-size: smaller;
 279     font-weight: bold;
 280     padding: 3px;
 281 }
 282 table.flags td.vert {
 283     background: green;
 284     padding: 3px;
 285     text-align: center;
 286 }
 287 table.flags td.orange {
 288     background: #ff9900;
 289     padding: 3px;
 290     text-align: center;
 291 }
 292 table.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 div.conteneur_tab {
 305     border-width : 1px 2px 2px 1px;
 306     border-style : solid;
 307     border-color : #999;
 308     padding : 4px 0px 0px 4px;
 309     background : #eceade;
 310 }
 311
 312 #onglet {
 313     display : block;
 314     margin : 0;
 315     padding : 0;
 316     /*height : 50px;*/
 317 }
 318
 319 #onglet li {
 320     display : block;
 321     float : left;
 322     padding : 0.4ex;
 323     margin : 0 0.3ex -1px 0;
 324     background : #D2E0E6  repeat-x 0 100%;
 325     border-width : 1px 1px 0px 1px;
 326     border-style : solid;
 327     border-color : #999;
 328     border-bottom-color : #999;
 329     width: auto;
 330     height: 5ex;
 331     text-align: center;
 332 }
 333
 334 #onglet li:hover { background : #fc3 repeat-x 0 100%; }
 335
 336 #onglet li.actif {
 337     background : #eceade;
 338     border-bottom-color : #eceade;
 339     font-weight: bold;
 340 }
 341
 342 #onglet li a {
 343     /*font-family : Arial,Helvetica,sans-serif;*/
 344     font-size: 80%;
 345     font-weight : normal;
 346     text-decoration : none;
 347     color : #000;
 348 }
 349
 350 #onglet li a:hover { text-decoration: underline; }
 351 #onglet li img { margin-right : 2px; }
 352
 353 /*******************************************************************************
 354     7   fiche.php & fiche_referent.php
 355         [ cas de la fiche ]
 356 *******************************************************************************/
 357
 358 #fiche {
 359     width: 760px;
 360     font-size: 100%;
 361     vertical-align: top;
 362
 363     border: 1px solid #369;
 364 }
 365
 366 #fiche em { color: purple; }
 367
 368 #fiche h2 {
 369     color: #369;
 370     padding: 0px 4px;
 371     margin: 0.5em 0em;
 372     font-weight: bold;
 373     border-bottom: 1px dotted #369;
 374 }
 375
 376 #fiche_identite {
 377     padding: 5px;
 378     width: 600px;
 379 }
 380
 381 #photo { padding-left: 1em; }
 382
 383 #fiche_identite div.civilite {
 384     text-align: center;
 385     font-weight: bold;
 386     width: 80%;
 387     float: left;
 388 }
 389
 390 #fiche_identite div.maj {
 391     float: left;
 392     width: 20%;
 393     font-size: 75%;
 394     text-align: right;
 395     clear: right;
 396 }
 397
 398 #fiche_identite div.contact {
 399     clear: both;
 400     margin: 1em;
 401     padding: 1ex;
 402     background: #fff;
 403     border: 1px dotted #69c;
 404 }
 405 #fiche_identite div.email {
 406     clear: left;
 407     float: left;
 408 }
 409 #fiche_identite div.mob {
 410     float: right;
 411     clear: right;
 412     text-align: right;
 413 }
 414
 415 #fiche_identite div.formation {
 416     margin: 0em 1em;
 417     clear: both;
 418 }
 419
 420 div.adresse {
 421     float: left;
 422     width: 46%;
 423     padding: 0px;
 424     margin: 0px 1% 1ex 1%;
 425 }
 426
 427 /* only for fiche_referent.php*/
 428
 429 #fiche_referent{
 430     padding: 10px;
 431     width: 100%;
 432 }
 433
 434 #fiche_referent div.rubrique_referent{
 435     float: left;
 436     width: 31%;
 437     padding: 0px;
 438     margin: 0px 1% 1ex 1%;
 439
 440 }
 441
 442 #fiche_referent em{color: purple;}
 443 #fiche_referent ul { margin: 0px; padding: 0px 1em; }
 444 #fiche_referent li { font-weight: bold; margin: 0px; padding: 0px; text-align: left; }
 445
 446 /*******************************************************************************
 447     A   SKIN
 448         [ choix de classes faites par le skinneur
 449 *******************************************************************************/
 450
 451 #dev {
 452     width: 100%;
 453     text-align: center;
 454     padding: 1px;
 455
 456     color: #003399;
 457     background: #e0ffff;
 458
 459     font-family: 'Bauhaus Md BT','Bitstream Vera',sans-serif;
 460     font-size: 10pt;
 461     font-weight: bold;
 462 }
 463
 464 #dev a { text-decoration: underline; }
 465 #dev a:hover { color: #003399; background: #c0e0e0; }
 466
 467 #db-trace div.hide       { display: none; }
 468 #db-trace:hover div.hide { display: block }
 469
 470 #suid {
 471     color: red;
 472     background: #ffc0cb;
 473     width: 100%;
 474     font-weight: bold;
 475 }
 476 #suid td { padding: 2px; }
 477 #suid a { color: red; }
 478
 479 #body {
 480     width: 740px;
 481     margin-left: auto;
 482     margin-right: auto;
 483 }
 484
 485 #body-logo {
 486     width: 140px;
 487     border-right: 1px solid gray;
 488     text-align: center;
 489     font-family: "MS Sans Serif", sans-serif;
 490     padding-top: 4px;
 491     border-bottom: 1px solid gray;
 492 }
 493
 494 #body-top {
 495     border-bottom: 1px solid gray;
 496     text-align: center;
 497     font-size: 95%;
 498     padding: 4px;
 499     padding-bottom: 16px;
 500     font-family: "Arial", sans-serif;
 501 }
 502
 503 #body-top table { width: 100%; padding: 4px; }
 504 #body-top .date-heure { text-align: left; }
 505 #body-top .inscrits { text-align: right; }
 506
 507 #body-bottom {
 508     border-top: 1px solid gray;
 509     text-align: center;
 510     padding: 4px;
 511     font-size: 75%;
 512     font-family: "MS Sans Serif", sans-serif;
 513 }
 514
 515 #body-menu {
 516     width: 140px;
 517     border-right: 1px solid gray;
 518     text-align: center;
 519     font-family: "MS Sans Serif", sans-serif;
 520     font-size: 75%;
 521     font-weight: bold;
 522     white-space: nowrap;
 523 }
 524
 525 #body-menu .menu_item {
 526     padding-left: 4px;
 527     padding: 2px;
 528     text-align: left;
 529 }
 530
 531 #body-menu .menu_title {
 532     color: gray;
 533     background: #eeeeee;
 534     border-top: 1px solid gray;
 535     border-bottom: 1px solid gray;
 536     padding: 1px;
 537     margin-top: 4px;
 538     text-align: center;
 539 }
 540
 541 #content {
 542     width: 600px;
 543     padding: 4px 0px 4px 16px;
 544     font-size: 95%;
 545     vertical-align: top;
 546 }
 547
 548 div#content {
 549     padding: 1em;
 550     margin: 0em;
 551 }
 552
 553 #content input {
 554     font-size: 95%;
 555 }
 556
 557 /* vim: set et ts=4 sts=4 sw=4: */