htdocs/css/keynote.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     font-size: 10pt;
  29     background: url('../images/skins/keynote_bg.png') #4f4e63 top left repeat-x fixed;
  30     color: #fff;
  31 }
  32
  33 a:link, a:visited, a:active, a:hover {
  34     color: #ddd;
  35     background: inherit;
  36 }
  37 a:hover { color: #999; }
  38
  39 img   { vertical-align: middle; }
  40 a img { border: 0px; }
  41 td    { vertical-align: top; }
  42 li    { padding-left: 3px; padding-right: 3px;
  43         text-align: justify; }
  44 hr    { text-align: center; }
  45 dt    { font-weight: bold; }
  46
  47 fieldset {
  48     border: 1px solid #fff;
  49     border-bottom: 0px;
  50     border-right: 0px;
  51     background: url('../images/skins/keynote_bg_lighter.png') #848495 top left repeat-x fixed;
  52     color: #000;
  53     margin: 1em 0 1em 0;
  54 }
  55 legend {
  56     border-bottom: 1px solid #666;
  57     border-right: 1px solid #666;
  58     border-top: 1px solid #fff;
  59     border-left: 1px solid #fff;
  60     background: url('../images/skins/keynote_bg_verylighter.png') #bbbbaa top left repeat-x fixed;
  61     color: #000;
  62
  63     padding: 2px 4px;
  64 }
  65
  66 .center  { text-align: center; }
  67 .right   { text-align: right; }
  68 .middle  { vertical-align: middle; }
  69 .smaller { font-size: smaller; font-style: italic; }
  70 .spacer  { clear: both; }
  71
  72 .float2  { float: left; width: 49%; }
  73 .float3  { float: left; width: 33%; }
  74
  75 /*******************************************************************************
  76     2   Styles <p>, <div>, <span>, <li>
  77         [ styles classiques d'effets de texte ]
  78 *******************************************************************************/
  79
  80 p {
  81     margin-bottom: 0.4em;
  82     text-align: justify;
  83 }
  84
  85 .erreur {
  86     font-weight: bold;
  87     color: #d00;
  88     background: inherit;
  89     margin-top: 0.5em;
  90     margin-bottom: 0.5em;
  91 }
  92
  93 .erreur a:link, .erreur a:visited, .erreur a:active, .erreur a:hover {
  94     color: #ff3333;
  95     background: inherit;
  96 }
  97
  98 h1 {
  99     background-color: inherit;
 100     margin: 0.5em 0 0.5em 0;
 101     text-indent: 0em;
 102     padding: 6px 0 0 0px;
 103
 104     font-size: 130%;
 105     font-family: "helvetica", sans-serif;
 106     font-weight: bolder;
 107     text-align: left;
 108
 109     color: #bdf;
 110 }
 111
 112 h2 {
 113     padding: 0.5em 0em 0em 0em;
 114     margin: 0;
 115     font-size: 100%;
 116     font-weight: bold;
 117     background: inherit;
 118     color: #77c;
 119 }
 120
 121 h3 {
 122     margin: 0em;
 123     font-weight: bold;
 124     padding: 0.25em;
 125     font-size: 100%;
 126 }
 127
 128 p.explication, div.explication {
 129     font-style: italic;
 130     padding: 0em 1ex 1ex 1ex;
 131 }
 132
 133 li.spaced {
 134     padding-top: 0.2em;
 135     padding-bottom: 0.3em;
 136     text-align: justify;
 137 }
 138
 139 /*******************************************************************************
 140     3   Tableaux bicolores + classes utiles
 141         [ Tableaux à lignes alternées, en taille normale, ou tiny ]
 142 *******************************************************************************/
 143 table.bicol, table.tinybicol {
 144     color: inherit;
 145     background: url('../images/skins/keynote_bg_lighter.png') #848495 top left repeat-x fixed;
 146     border-width: 1px 0 0 1px;
 147     border-style: solid;
 148     border-color: #fff;
 149     border-collapse: collapse;
 150 }
 151 table.bicol     { width: 100%; margin-left: 0; }
 152 table.tinybicol { width: 70%; margin-left: 15%; }
 153
 154 table.tinybicol tr.pair, table.bicol tr.pair {
 155     color: inherit;
 156     background: url('../images/skins/keynote_bg_verylighter.png') #bbbbca top left repeat-x fixed;
 157 }
 158
 159 table.tinybicol th, table.bicol th {
 160     color: #fff;
 161     font-weight: bold;
 162     text-align: center;
 163     vertical-align: middle;
 164     background: none;
 165     background-color: #000;
 166 }
 167
 168 table.tinybicol tr:first-child th, table.bicol tr:first-child th {
 169     color: #fff;
 170     background: url('../images/skins/keynote_title.gif') #000 top left repeat-x;
 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     background: url('../images/skins/keynote_bg_lighter.png') #848495 top left repeat-x fixed;
 201     color: #000;
 202     border-top: 1px solid #fff;
 203     width: 100%;
 204 }
 205 #skin td {
 206     border-bottom: 1px solid #fff;
 207     vertical-align: middle;
 208 }
 209 #skin td.skigauche {
 210     background: url('../images/skins/keynote_bg_verylighter.png') #bbbbca top left repeat-x fixed;
 211     color: inherit;
 212     vertical-align: middle;
 213 }
 214 #skin td.skimilieu {
 215     padding-left: 1em;
 216     width: 100%;
 217 }
 218 #skin td.skidroite { padding: 0; }
 219
 220 /*******************************************************************************
 221     5   Contacts
 222         [ Styles liés à l'affichage de contacts ]
 223 *******************************************************************************/
 224
 225 div.contact-list {
 226     width: 98%;
 227     margin-left: 1%;
 228 }
 229 div.contact-list div.contact {
 230     border-top: 1px solid #fff;
 231     background: url('../images/skins/keynote_bg_verylighter.png') #bbbbca top left repeat-x fixed;
 232     color: #000;
 233 }
 234
 235 div.grayed {
 236     font-style: italic;
 237 }
 238 div.grayed div.contact {
 239     color: #444;
 240     background: url('../images/skins/keynote_bg_verylighter.png') #bbbbca top left repeat-x fixed;
 241 }
 242
 243 div.contact div.nom {
 244     font-weight: bold;
 245     width: 35%;
 246     float: left;
 247     padding-left: 2px;
 248 }
 249
 250 div.contact div.appli {
 251     float: left;
 252 }
 253
 254 div.contact div.bits {
 255     text-align: right;
 256     float: right;
 257 }
 258
 259 div.contact div.long {
 260     background: url('../images/skins/keynote_bg_lighter.png') #848495 top left repeat-x fixed;
 261     width: 100%;
 262     clear: both;
 263     color: inherit;
 264     padding: 1px 0px;
 265 }
 266
 267 div.long table { width: 100%; }
 268 div.long td.lt { width: 35%; }
 269 div.long td.rt { width: 65%; }
 270
 271 /*******************************************************************************
 272     6   Profil
 273         [ onglets des profils ]
 274 *******************************************************************************/
 275
 276 table.flags, tr.flags {
 277     margin: 0.5em 0 0 0;
 278     padding: 0;
 279 }
 280 table.flags input { margin: 0px 2px; padding: 0px; }
 281
 282 table.flags td.texte, tr.flags td.texte {
 283     font-size: smaller;
 284     font-weight: bold;
 285     padding: 0 8px 0 0;
 286 }
 287 table.flags td.vert, tr.flags td.vert {
 288     background: url('../images/icons/flag_green.gif') top right no-repeat;
 289     padding: 0 16px 0 0;
 290 }
 291 table.flags td.orange, tr.flags td.orange {
 292     background: url('../images/icons/flag_orange.gif') top right no-repeat;
 293     padding: 0 16px 0 0;
 294 }
 295 table.flags td.rouge, tr.flags td.rouge {
 296     background: url('../images/icons/flag_red.gif') top right no-repeat;
 297     padding: 0 16px 0 0;
 298 }
 299
 300 table.cadre_a_onglet{
 301     border-width: 0;
 302     padding : 0;
 303     margin: 0;
 304 }
 305
 306 td.conteneur_tab {
 307     border: 1px solid #9c9c9c;
 308     border-left-color: #eee;
 309     padding: 8px 4px 4px 4px;
 310     background : url('../images/skins/keynote_topborder.png') top repeat-x;
 311 }
 312
 313 #onglet {
 314     display : block;
 315     margin : 0;
 316     padding : 0;
 317 }
 318
 319 #onglet li {
 320     display : block;
 321     float : left;
 322     padding : 0.4ex;
 323     margin: 0 0.3ex -1px 3px;
 324     border: 1px solid #9c9c9c;
 325     border-right: none;
 326     background: #cecece;
 327     width: auto;
 328     height: 5ex;
 329     text-align: center;
 330     color: #000;
 331     font-size: 80%;
 332 }
 333
 334 #onglet li:hover {
 335     color: #000;
 336     background : #adadad;
 337 }
 338
 339 #onglet li.actif {
 340     color: #000;
 341     background : #dedede;
 342     border: 1px solid #f0f0f0;
 343     border-right: none;
 344     border-bottom-color: #dedede;
 345     font-weight: bold;
 346 }
 347
 348 #onglet li a {
 349     font-weight: normal;
 350     text-decoration: none;
 351     color: #000;
 352     background: inherit;
 353     display: block;
 354     width: 100%;
 355     height: 100%;
 356 }
 357 #onglet li img { margin-right: 2px; }
 358
 359 /*******************************************************************************
 360     7   fiche.php & fiche_referent.php
 361         [ cas de la fiche ]
 362 *******************************************************************************/
 363
 364 #fiche {
 365     width: 740px;
 366     color: #000;
 367     border-top: 1px solid #fff;
 368     border-left: 1px solid #fff;
 369     background: url('../images/skins/keynote_bg_lighter.png') #848495 top left repeat-x fixed;
 370     vertical-align: top;
 371 }
 372
 373 #fiche em {
 374     color: #777;
 375     background: inherit;
 376     font-weight: bolder;
 377 }
 378
 379 #fiche h2 {
 380     background: url('../images/skins/keynote_title.gif') bottom repeat-x;
 381     background-color: inherit;
 382     border-bottom: 1px solid #202020;
 383     color: #fff;
 384     height: 17px;
 385     margin: 0.5em 0;
 386     padding-left: 0.5em;
 387     font-weight: bold;
 388 }
 389
 390 #fiche_identite {
 391     padding: 5px;
 392     width: 600px;
 393 }
 394
 395 #photo { padding-left: 0em; }
 396
 397 #fiche_identite div.civilite {
 398     text-align: center;
 399     font-weight: bold;
 400     width: 80%;
 401     float: left;
 402     color: #fff;
 403     background: inherit;
 404 }
 405
 406 #fiche_identite div.maj {
 407     float: left;
 408     width: 20%;
 409     font-size: 75%;
 410     text-align: right;
 411     vertical-align: top;
 412     clear: right;
 413 }
 414
 415 #fiche_identite div.contact {
 416     clear: both;
 417     margin: 1em;
 418     padding: 1ex;
 419     border-width: 1px 0 0 1px;
 420     border-style: dotted;
 421     border-color: #fff;
 422     background: url('../images/skins/keynote_bg_verylighter.png') #bbbbca top left repeat-x fixed;
 423     color: inherit;
 424 }
 425
 426 #fiche_identite div.contact em {
 427     color: #aaa;
 428     background: inherit;
 429 }
 430
 431 #fiche_identite div.email {
 432     clear: left;
 433     float: left;
 434 }
 435 #fiche_identite div.mob {
 436     float: right;
 437     clear: right;
 438     text-align: right;
 439 }
 440
 441 #fiche_identite div.formation {
 442     margin: 0em 1em;
 443     clear: both;
 444 }
 445
 446 div.adresse {
 447     float: left;
 448     width: 46%;
 449     padding: 0px;
 450     margin: 0px 1% 1ex 1%;
 451 }
 452
 453 /* only for fiche_referent.php*/
 454
 455 #fiche_referent{
 456     padding: 10px;
 457     width: 100%;
 458 }
 459
 460 #fiche_referent div.rubrique_referent{
 461     float: left;
 462     width: 31%;
 463     padding: 0px;
 464     margin: 0px 1% 1ex 1%;
 465
 466 }
 467
 468 #fiche_referent em {
 469     color: #777;
 470     background: inherit;
 471     font-weight: bolder;
 472 }
 473 #fiche_referent ul { margin: 0px; padding: 0px 1em; }
 474 #fiche_referent li { font-weight: bold; margin: 0px; padding: 0px; text-align: left; }
 475
 476 /*******************************************************************************
 477     A   SKIN
 478         [ choix de classes faites par le skinneur
 479 *******************************************************************************/
 480
 481 #dev {
 482     width: auto;
 483     text-align: center;
 484     padding: 1px;
 485
 486     background: url('../images/skins/keynote_bg_verylighter.png') #bbbbaa top left repeat-x fixed;
 487
 488     color: #000;
 489     font-weight: bold;
 490 }
 491
 492 #dev a { text-decoration: none; }
 493
 494 .backtrace div.hide       { display: none; }
 495 .backtrace:hover div.hide { display: block }
 496
 497 #suid {
 498     color: red;
 499     background: #ffc0cb;
 500     width: auto;
 501     font-weight: bold;
 502     text-align: center;
 503 }
 504 #suid a {
 505     color: red;
 506     background: inherit;
 507     text-decoration: none;
 508     display: block;
 509 }
 510 #suid:hover {
 511     color: red;
 512     background: #ffffcb;
 513 }
 514 #suid a:hover {
 515     color: #ff7000;
 516     background: inherit;
 517 }
 518
 519 #body {
 520     width: 800px;
 521     margin-left: auto;
 522     margin-right: auto;
 523 }
 524
 525 #body-logo {
 526     width: 140px;
 527     padding-top: 0;
 528     text-align: center;
 529 }
 530
 531 #body-top {
 532     padding: 0 0 16px 0;
 533     text-align: center;
 534     font-size: 85%;
 535     border-bottom: 1px solid #fff;
 536 }
 537 #body-top table { width: 100%; padding: 4px; }
 538 #body-top .date-heure { text-align: left; }
 539 #body-top .inscrits { text-align: right; }
 540
 541
 542 #body-bottom {
 543     border-top: 1px solid #aaa;
 544     text-align: center;
 545     padding: 4px;
 546     font-size: 75%;
 547     font-family: "MS Sans Serif", sans-serif;
 548 }
 549
 550 #body-menu {
 551     width: 140px;
 552     text-align: center;
 553     font-size: 85%;
 554     font-weight: bold;
 555     white-space: nowrap;
 556     border-right: 1px solid #fff;
 557 }
 558
 559 #body-menu .menu_item {
 560     text-align: left;
 561     padding: 2px;
 562 }
 563
 564 #body-menu a:link, #body-menu a:visited, #body-menu a:active, #body-meny a:hover {
 565     color: #fff;
 566     background: inherit;
 567     text-decoration: none;
 568 }
 569
 570 #body-menu .menu_item:hover {
 571     color: inherit;
 572     background-color: #556;
 573 }
 574
 575 #body-menu .menu_title {
 576     color: #fff;
 577     height: 17px;
 578     background: url('../images/skins/keynote_title.gif') bottom repeat-x;
 579     background-color: inherit;
 580     border-bottom: 1px solid #202020;
 581     padding: 4px 0 0 0;
 582     text-align: center;
 583     vertical-align: bottom;
 584 }
 585
 586 #content {
 587     width: 600px;
 588     padding: 0 0 4px 16px;
 589     vertical-align: top;
 590     font-size: 95%;
 591 }
 592
 593 #quick_search {
 594     color: gray;
 595     background: #fff;
 596     text-align: right;
 597 }
 598
 599 div#content {
 600     padding: 1em;
 601     margin: 0em;
 602 }
 603
 604 #content input {
 605     font-size: 95%;
 606 }
 607
 608 #menu-evts {
 609     font-size: 85%;
 610 }
 611
 612 /* vim: set et ts=4 sts=4 sw=4: */