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 .part {
 384     float: left;
 385     clear: left;
 386     width: 70%;
 387     padding-left: 0;
 388     padding-right: 0;
 389     margin-left: 0;
 390     margin-right: 0;
 391 }
 392
 393 #fiche #photo {
 394     float: right;
 395     width: 30%;
 396     padding-left: 0;
 397     margin-left: 0;
 398     clear: right;
 399 }
 400
 401 #fiche #photo img {
 402     width: 100%;
 403 }
 404
 405 #fiche_identite {
 406     padding: 5px;
 407 }
 408
 409 #fiche_identite div.civilite {
 410     text-align: center;
 411     font-weight: bold;
 412     width: 80%;
 413     float: left;
 414 }
 415
 416 #fiche_identite div.maj {
 417     float: left;
 418     width: 20%;
 419     font-size: 75%;
 420     text-align: right;
 421     clear: right;
 422     padding-bottom: 1ex;
 423 }
 424
 425 #fiche_identite div.contact {
 426     clear: both;
 427     margin: 1em;
 428     padding: 1ex;
 429     background: #fff;
 430     border: 1px dotted #69c;
 431 }
 432 #fiche_identite div.email {
 433     clear: left;
 434     float: left;
 435 }
 436 #fiche_identite div.mob {
 437     float: right;
 438     clear: right;
 439     text-align: right;
 440 }
 441
 442 #fiche_identite div.formation {
 443     margin: 0em 1em;
 444     clear: both;
 445 }
 446
 447 div.adresse {
 448     min-width: 30%;
 449     padding: 0px;
 450     margin: 0px 2% 1ex 1%;
 451 }
 452
 453 div.adresse strong {
 454     font-size: 90%;
 455 }
 456
 457 #fiche .medal_frame {
 458     float: left;
 459     width: 33%;
 460 }
 461
 462 #fiche .medal_frame img {
 463     float: left;
 464     padding: 0ex 1ex;
 465 }
 466
 467 /* only for fiche_referent.php*/
 468
 469 #fiche_referent .part {
 470     width: 100%;
 471 }
 472
 473 #fiche_referent #fiche_identite div.civilite {
 474     width: 100%;
 475 }
 476
 477 #fiche_referent{
 478     width: 100%;
 479 }
 480
 481 #fiche_referent div.rubrique_referent{
 482     float: left;
 483     width: 31%;
 484     padding: 0px;
 485     margin: 0px 1% 1ex 1%;
 486     text-align: justify;
 487 }
 488
 489 #fiche_referent em{color: purple;}
 490 #fiche_referent ul { margin: 0px; padding: 0px 1em; }
 491 #fiche_referent li { font-weight: bold; margin: 0px; padding: 0px; text-align: left; }
 492
 493 /*******************************************************************************
 494     A   SKIN
 495         [ choix de classes faites par le skinneur
 496 *******************************************************************************/
 497
 498 #dev {
 499     width: auto;
 500     text-align: center;
 501     padding: 1px;
 502
 503     color: #003399;
 504     background: #e0ffff;
 505
 506     font-family: 'Bauhaus Md BT','Bitstream Vera',sans-serif;
 507     font-size: 10pt;
 508     font-weight: bold;
 509 }
 510
 511 #dev a { text-decoration: underline; }
 512 #dev a:hover { color: #003399; background: #c0e0e0; }
 513
 514 .backtrace div.hide       { display: none; }
 515 .backtrace:hover div.hide { display: block }
 516
 517 #suid {
 518     color: red;
 519     background: #ffc0cb;
 520     width: auto;
 521     font-weight: bold;
 522     text-align: center;
 523 }
 524 #suid a {
 525     color: red;
 526     background: inherit;
 527     text-decoration: none;
 528     display: block;
 529 }
 530 #suid:hover {
 531     color: red;
 532     background: #ffffcb;
 533 }
 534 #suid a:hover {
 535     color: #ff7000;
 536     background: inherit;
 537 }
 538
 539 #body {
 540     width: 740px;
 541     margin-left: auto;
 542     margin-right: auto;
 543 }
 544
 545 #body-logo {
 546     width: 140px;
 547     border-right: 1px solid gray;
 548     text-align: center;
 549     font-family: "MS Sans Serif", sans-serif;
 550     padding-top: 4px;
 551     border-bottom: 1px solid gray;
 552 }
 553
 554 #body-top {
 555     border-bottom: 1px solid gray;
 556     text-align: center;
 557     font-size: 95%;
 558     padding: 4px;
 559     padding-bottom: 16px;
 560     font-family: "Arial", sans-serif;
 561 }
 562
 563 #body-top table { width: 100%; padding: 4px; }
 564 #body-top .date-heure { text-align: left; }
 565 #body-top .inscrits { text-align: right; }
 566
 567 #body-bottom {
 568     border-top: 1px solid gray;
 569     text-align: center;
 570     padding: 4px;
 571     font-size: 75%;
 572     font-family: "MS Sans Serif", sans-serif;
 573 }
 574
 575 #body-menu {
 576     width: 140px;
 577     border-right: 1px solid gray;
 578     text-align: center;
 579     font-family: "MS Sans Serif", sans-serif;
 580     font-size: 75%;
 581     font-weight: bold;
 582     white-space: nowrap;
 583 }
 584
 585 #body-menu .menu_item {
 586     padding-left: 4px;
 587     padding: 2px;
 588     text-align: left;
 589 }
 590
 591 #body-menu .menu_item a {
 592                 text-decoration:none;
 593 }
 594
 595 #body-menu .menu_title {
 596     color: gray;
 597     background: #eeeeee;
 598     border-top: 1px solid gray;
 599     border-bottom: 1px solid gray;
 600     padding: 1px;
 601     margin-top: 4px;
 602     text-align: center;
 603 }
 604
 605 #content {
 606     width: 600px;
 607     padding: 4px 0px 4px 16px;
 608     font-size: 95%;
 609     vertical-align: top;
 610 }
 611
 612 .quick_search {
 613     color: gray;
 614     text-align: right;
 615 }
 616
 617 div#content {
 618     padding: 1em;
 619     margin: 0em;
 620 }
 621
 622 #content input {
 623     font-size: 95%;
 624 }
 625
 626 #menu-evts {
 627     font-size: 85%;
 628 }
 629
 630 /* vim: set et ts=4 sts=4 sw=4: */