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