htdocs/css/openweb.css

   1 /***************************************************************************
   2  *  Copyright (C) 2003-2008 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     background:#369;
  28     color: #096;
  29     font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
  30     margin:2em 1%;
  31     padding:0;
  32     font-size: 9pt;
  33 }
  34
  35 a:link, a:visited { color: #f60; background: transparent; }
  36 a:active, a:hover { color: #369; background: transparent; }
  37
  38 img   { vertical-align: middle; }
  39 a img { border: 0px; }
  40 li    { padding: 0em 1em; text-align: justify; }
  41 hr    { width: 90%; margin: 1em 5%; border: 1px dotted #369; border-bottom: none; }
  42
  43 fieldset {
  44     border: 1px dotted #69c;
  45     background: #fff;
  46     color: inherit;
  47
  48     margin: 1em 0em;
  49     padding: 1em;
  50 }
  51
  52 legend {
  53     border: 1px dotted #69c;
  54     background: #d6e1ec;
  55     color: inherit;
  56
  57     padding: 0em 1em;
  58 }
  59
  60 .center { text-align: center; }
  61 .right  { text-align: right; }
  62 .smaller { font-size: smaller; font-style: italic; }
  63 .spacer { clear: both; }
  64
  65 .float2 { float: left; width: 48%; margin: 2px; }
  66 .float3 { float: left; width: 33%; }
  67
  68 /*******************************************************************************
  69     2   Styles <p>, <div>, <span>, <li>
  70         [ styles classiques d'effets de texte ]
  71 *******************************************************************************/
  72
  73 p {
  74     padding: 0em 1em;
  75     margin-bottom: 0.5em;
  76     text-align: justify;
  77 }
  78
  79 .errors {
  80     margin-top: 10px;
  81     border: 1px solid #f00;
  82     background-color: #fcc;
  83     width: 98%;
  84 }
  85
  86 .warnings {
  87     margin-top: 10px;
  88     border: 1px solid #ed0;
  89     background-color: #ffc;
  90     width: 98%;
  91 }
  92
  93 .success {
  94     margin-top: 10px;
  95     border: 1px solid #0d2;
  96     background-color: #cfd;
  97     width: 98%;
  98 }
  99
 100 .erreur {
 101     font-weight: bold;
 102     color: #ff0000;
 103     background: inherit;
 104     margin-top: 0.5em;
 105     margin-bottom: 0.5em;
 106 }
 107
 108 .erreur a:link, .erreur a:visited, .erreur a:active, .erreur a:hover {
 109     color: #ff3333;
 110     background: inherit;
 111 }
 112
 113 input.error, textarea.error {
 114     background-color: #faa;
 115 }
 116
 117 input.valid, textarea.valid {
 118     background-color: #afa;
 119 }
 120
 121 input.warning, textarea.warning {
 122     background-color: #fda;
 123 }
 124
 125 h1 {
 126     color: #369;
 127     font-size: 140%;
 128     background: #f5f8fc;
 129     margin: 0em;
 130     border-bottom: 2px solid #369;
 131     padding: 4px;
 132     margin: 1em 0em;
 133 }
 134
 135 h2 {
 136     color: #369;
 137     font-size: 115%;
 138     padding: 0px 4px;
 139     margin: 1em 0em 0.5em 0em;
 140     font-weight: bold;
 141     border-bottom: 1px dotted #369;
 142 }
 143
 144 h3 {
 145     margin: 0em;
 146     font-weight: bold;
 147     padding: 0.5em 0em;
 148     font-size: 100%;
 149 }
 150
 151
 152 p.explication, div.explication {
 153     font-style: italic;
 154     padding: 0em 1ex 1ex 1ex;
 155 }
 156
 157 li.spaced {
 158     padding-top: 0.5em;
 159     padding-bottom: 0.5em;
 160     text-align: justify;
 161 }
 162
 163 /*******************************************************************************
 164     3   Tableaux bicolores + classes utiles
 165         [ Tableaux à lignes alternées, en taille normale, ou tiny ]
 166 *******************************************************************************/
 167
 168 table.bicol {
 169     border-collapse: collapse;
 170     color: inherit;
 171     background: #fff;
 172     border: 1px solid #a2c2e1;
 173     width: 98%;
 174     margin-left: 1%;
 175 }
 176 table.tinybicol {
 177     border-collapse: collapse;
 178     color: inherit;
 179     background: #fff;
 180     border: 1px solid #a2c2e1;
 181     width: 70%;
 182     margin-left: 15%;
 183 }
 184
 185 table.tinybicol tr.impair, table.bicol tr.impair {}
 186 table.tinybicol tr.pair, table.bicol tr.pair {
 187     color: inherit;
 188     background: #eee;
 189 }
 190
 191 table.tinybicol th, table.bicol th {
 192     color: #369;
 193     background: #d6e1ec;
 194     font-weight: bold;
 195     text-align: center;
 196     padding: 0px 4px;
 197 }
 198 table.tinybicol td, table.bicol td {
 199     color: #000000;
 200     background: inherit;
 201     padding: 0px 4px;
 202 }
 203
 204 td.half { width: 50%; padding: 4px; }
 205
 206 td.titre {
 207     color: #000000;
 208     background: inherit;
 209     font-weight: bold;
 210 }
 211 td.action {
 212     white-space: nowrap;
 213     text-align: right;
 214     font-weight: bold;
 215 }
 216 td.action a { padding: 0px 2px; }
 217
 218 /*******************************************************************************
 219     4   Tableau de choix de skins
 220         [ Styles pour les tableaux de types de ceux des skins ]
 221 *******************************************************************************/
 222
 223 #skin {
 224     border-bottom: 1px solid #a2c2e1;
 225     border-top: 1px solid #a2c2e1;
 226     width: 98%;
 227     margin-left: 1%;
 228 }
 229 #skin td {
 230     border-top: 1px solid #a2c2e1;
 231     border-bottom: 1px solid #a2c2e1;
 232 }
 233 #skin td.skigauche {
 234     background: #d6e1ec;
 235     color: inherit;
 236 }
 237 #skin td.skimilieu {
 238     padding-left: 1em;
 239     width: 100%;
 240 }
 241 #skin td.skidroite { padding: 0; }
 242
 243 /*******************************************************************************
 244     5   Contacts
 245         [ Styles liés à l'affichage de contacts ]
 246 *******************************************************************************/
 247
 248 div.contact-list {
 249     width: 98%;
 250     margin-left: 1%;
 251     border: 1px dotted #a2c2e1;
 252 }
 253
 254 div.contact-list div.contact {
 255     width: 100%;
 256     text-align: left;
 257     background: #ffecce;
 258     border-top: 1px dotted black;
 259     color: inherit;
 260 }
 261
 262 div.contact-list div.grayed {
 263     color: #444444;
 264     background: #eee;
 265     font-style: italic;
 266 }
 267
 268 div.contact div.photo {
 269     float: left;
 270 }
 271
 272 div.contact div.photo img {
 273     width: 60px;
 274     margin-right: 4px;
 275 }
 276
 277 div.contact div.identity {
 278     float: left;
 279     width: 90%;
 280 }
 281
 282 div.contact div.nom {
 283     font-weight: bold;
 284 }
 285
 286 div.contact div.bits {
 287     text-align: right;
 288     float: right;
 289 }
 290
 291 div.contact div.long {
 292     width: 100%;
 293     clear: both;
 294     background: #fff;
 295     color: inherit;
 296     padding: 1px 0px;
 297 }
 298
 299
 300 div.long table { width: 100%; }
 301 div.long td.lt { width: 35%; padding-left: 4px; }
 302 div.long td.rt { width: 65%; }
 303
 304 /*******************************************************************************
 305     6   Profil
 306         [ onglets des profils ]
 307 *******************************************************************************/
 308
 309 .wizard {
 310     margin-left: -1em;
 311     margin-right: -1em;
 312 }
 313
 314 .wizard .wiz_header {
 315     height: 32px;
 316     width: 100%;
 317     background: url('../images/skins/wiz_normal.png') top right repeat-x;
 318     margin-bottom: 1em;
 319 }
 320
 321 .wizard .wiz_header .wiz_tab {
 322     background: url('../images/skins/wiz_normal.png') #aaa top left repeat-x;
 323     height: 100%;
 324     text-align: center;
 325     font-size: 75%;
 326     border-right: 1px solid #888;
 327 }
 328
 329 .wizard .wiz_header .wiz_tab:hover {
 330     background: url('../images/skins/wiz_hover.png') #777 top left repeat-x;
 331     color: #fff;
 332 }
 333
 334 .wizard .wiz_header .active, .wizard .wiz_header .active:hover {
 335     background: url('../images/skins/wiz_active.png') #444 top left repeat-x;
 336     color: #fff;
 337 }
 338
 339 .wizard .wiz_header a {
 340     color: #000;
 341     text-decoration: none;
 342 }
 343
 344 .wizard .wiz_header a.active {
 345     color: #fff;
 346 }
 347
 348 .wizard .wiz_content {
 349     margin-left: 1em;
 350     margin-right: 1em;
 351 }
 352
 353 .flags .texte {
 354     font-size: smaller;
 355     font-weight: bold;
 356     margin-left: -6px;
 357     padding: 0 12px 0 0;
 358 }
 359 .flags img {
 360     padding: 0 6px 0 0;
 361 }
 362
 363 /*******************************************************************************
 364     7   fiche.php & fiche_referent.php
 365         [ cas de la fiche ]
 366 *******************************************************************************/
 367
 368 em.intitule {
 369     color: purple;
 370     font-size: 90%;
 371 }
 372
 373 div#body {
 374     color: #000;
 375     background: #fff;
 376     border: 3px solid #000;
 377
 378     width: 800px;
 379     margin: 7px;
 380 }
 381
 382 #fiche {
 383     width: 760px;
 384     font-size: 100%;
 385     vertical-align: top;
 386
 387     background: #f5f8fc;
 388     border: 1px solid #69c;
 389     margin: 20px;
 390 }
 391
 392 #fiche em { color: purple; }
 393
 394 #fiche .part {
 395     float: left;
 396     clear: left;
 397     width: 70%;
 398     padding: 0em;
 399     margin: 0em;
 400 }
 401
 402 #fiche #photo {
 403     float: right;
 404     padding-left: 0;
 405     padding; 0;
 406     margin: 0;
 407     clear: right;
 408     width: 30%;
 409 }
 410
 411 #fiche #photo img {
 412     width: 100%;
 413 }
 414
 415 #fiche_identite {
 416     padding: 5px;
 417 }
 418
 419 #photo {
 420     vertical-align: top;
 421     padding-left: 1em;
 422 }
 423
 424 #fiche_identite div.civilite {
 425     text-align: center;
 426     font-weight: bold;
 427     width: 80%;
 428     float: left;
 429 }
 430
 431 #fiche_identite div.maj {
 432     float: left;
 433     width: 20%;
 434     font-size: 80%;
 435     text-align: right;
 436     clear: right;
 437 }
 438
 439 #fiche_identite div.contact {
 440     clear: both;
 441     margin: 1em;
 442     padding: 1ex;
 443     background: #fff;
 444     border: 1px dotted #69c;
 445 }
 446 #fiche_identite div.email {
 447     clear: left;
 448     float: left;
 449 }
 450 #fiche_identite div.mob {
 451     float: right;
 452     clear: right;
 453     text-align: right;
 454 }
 455
 456 #fiche_identite div.formation {
 457     margin: 0em 1em;
 458 }
 459
 460 div.adresse {
 461     min-width: 30%;
 462     padding: 0px;
 463     margin: 0px 2% 2ex 1%;
 464 }
 465
 466 div.adresse div.titre { color: purple; }
 467
 468 #fiche .medal_frame {
 469     float: left;
 470     width: 33%;
 471 }
 472
 473 #fiche .medal_frame img {
 474     float: left:
 475     padding: 0ex 1ex;
 476 }
 477
 478 #fiche .medal_text {
 479     vertical-align: middle;
 480     font-weight: bold;
 481 }
 482
 483 /* only for fiche_referent.php*/
 484
 485 #fiche_referent{
 486     padding: 10px;
 487     width: 100%;
 488 }
 489
 490 #fiche_referent div.rubrique_referent{
 491     float: left;
 492     width: 31%;
 493     padding: 0px;
 494     margin: 0px 1% 1ex 1%;
 495 }
 496
 497 #fiche_referent em{color: purple;}
 498 #fiche_referent ul { margin: 0px; padding: 0px 1em; }
 499 #fiche_referent li { font-weight: bold; margin: 0px; padding: 0px; text-align: left; }
 500
 501 /*******************************************************************************
 502     A   SKIN
 503         [ choix de classes faites par le skinneur
 504 *******************************************************************************/
 505
 506 .phperror {
 507     color: red;
 508     background: white;
 509     margin: 2px auto;
 510     padding: 4px 2px;
 511     border: 1px solid black;
 512     width: 80%;
 513     white-space: pre;
 514 }
 515
 516 #dev {
 517     width: auto;
 518     text-align: center;
 519     padding: 1px;
 520
 521     font-family: 'Bauhaus Md BT','Bitstream Vera',sans-serif;
 522     font-size: 10pt;
 523     font-weight: bold;
 524     color: #000;
 525     background: #f5f8fc;
 526 }
 527
 528 .backtrace div.hide       { display: none; }
 529 .backtrace:hover div.hide { display: block }
 530 .backtrace h1 { margin: 0px; }
 531
 532 #suid {
 533     color: red;
 534     background: #ffc0cb;
 535     width: auto;
 536     font-weight: bold;
 537     text-align: center;
 538 }
 539 #suid a {
 540     color: red;
 541     background: inherit;
 542     text-decoration: none;
 543     display: block;
 544 }
 545 #suid:hover {
 546     color: red;
 547     background: #ffffcb;
 548 }
 549 #suid a:hover {
 550     color: #ff7000;
 551     background: inherit;
 552 }
 553
 554 table#body {
 555     color: #000;
 556     background: #fff;
 557     border: 3px solid #000;
 558
 559     width: 900px;
 560     margin: 1em auto;
 561 }
 562
 563 #body-logo   {
 564     text-align: center;
 565     padding: 2em 0em 0em 0em;
 566 }
 567
 568 #body-top    {
 569     text-align: center;
 570     font-size: 94%;
 571     padding: 2em 2em 0em 2em;
 572     padding-bottom: 16px;
 573     font-family: Georgia,serif;
 574 }
 575
 576 #body-top table { width: 100%; padding: 4px; }
 577 #body-top .date-heure { text-align: left; }
 578 #body-top .inscrits { text-align: right; }
 579
 580 #body-bottom { text-align: center;}
 581
 582 #body-menu {
 583     vertical-align: top;
 584     padding: 1em 0em 2em 2em;
 585     border: 0px;
 586     width: 140px;
 587     font-weight: bold;
 588     white-space: nowrap;
 589     line-height: 100%;
 590 }
 591
 592 #body-menu a {
 593     color: #690;
 594     background: #fff;
 595     border: 1px dotted #fff;
 596     display: block;
 597     padding: 1px 4px;
 598     text-align: left;
 599     font-size: 85%;
 600     font-family: Bitstream Vera Sans,Verdana,sans-serif;
 601     text-decoration: none;
 602 }
 603
 604 #body-menu a:hover {
 605     color: #690;
 606     background: #eaf2db;
 607     border: 1px dotted #690;
 608 }
 609
 610 #body-menu .menu_title {
 611     color: #f90;
 612     background: #fff;
 613     border-top: none;
 614     border-bottom: 3px solid #f90;
 615     padding: 1px;
 616     text-transform: uppercase;
 617     text-align: left;
 618     margin: 1ex 0ex;
 619 }
 620
 621 #content {
 622     width: auto;
 623     font-size: 100%;
 624     vertical-align: top;
 625
 626     background: #f5f8fc;
 627     border: 1px solid #69c;
 628     line-height:125%;
 629     padding: 0em 1em 1em 1em;
 630     margin: 1em 2em 2em 2em;
 631 }
 632
 633 #content-margin { width: 2em; }
 634
 635 #content input {
 636     font-size: 95%;
 637 }
 638
 639 /* vim: set et ts=4 sts=4 sw=4: */