htdocs/css/keynote.css

   1 /***************************************************************************
   2  *  Copyright (C) 2003-2006 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: 90%;
  29     background: url('../images/skins/keynote_bg.png') top left repeat-x;
  30
  31     background-attachment: fixed;
  32     background-color: #4f4e63;
  33     color: #fff;
  34 }
  35
  36 a:link, a:visited, a:active, a:hover {
  37     color: #ddd;
  38     background: none;
  39 }
  40
  41 a:hover {
  42     color: #999;
  43 }
  44
  45 fieldset {
  46     border: 1px #336699 solid;
  47     background: #eeeeee;
  48     color: inherit;
  49
  50     margin-top: 1em;
  51     margin-bottom: 1em;
  52 }
  53
  54 legend {
  55     border: 1px #336699 solid;
  56     background: #f4d09c;
  57     color: inherit;
  58
  59     padding-left: 4px;
  60     padding-right: 4px;
  61 }
  62
  63 /*******************************************************************************
  64     2   Styles <p>, <div>, <span>, <li>
  65         [ styles classiques d'effets de texte ]
  66 *******************************************************************************/
  67
  68 p {
  69     margin-bottom: 0.4em;
  70     text-align: justify;
  71 }
  72
  73 .erreur {
  74     font-weight: bold;
  75     color: #ff0000;
  76     background: inherit;
  77     margin-top: 0.5em;
  78     margin-bottom: 0.5em;
  79 }
  80
  81 .erreur a:link, .erreur a:visited, .erreur a:active, .erreur a:hover {
  82     color: #ff3333;
  83     background: inherit;
  84 }
  85
  86 h1 {
  87     color: #fff;
  88     background: url('../images/skins/keynote_titlepuce2.gif') top left no-repeat;
  89     height: 24px;
  90     margin: 0.5em 0 0 0;
  91     padding: 6px 0 0 24px;
  92     color: #bbf;
  93 }
  94
  95 h1:hover {
  96     background: url('../images/skins/keynote_titlepuce.gif') top left no-repeat;
  97 }
  98
  99 h2 {
 100     padding: 0.5em 0em 0em 0em;
 101     margin: 0;
 102     font-size: 100%;
 103     font-weight: bold;
 104     color: #77c;
 105 }
 106
 107 h3 {
 108     margin: 0em;
 109     font-weight: bold;
 110     padding: 0.25em;
 111     font-size: 100%;
 112 }
 113
 114 p.explication, div.explication {
 115     font-style: italic;
 116     padding: 0em 1ex 1ex 1ex;
 117 }
 118
 119 li.spaced {
 120     padding-top: 0.2em;
 121     padding-bottom: 0.3em;
 122     text-align: justify;
 123 }
 124
 125 /*******************************************************************************
 126     3   Tableaux bicolores + classes utiles
 127         [ Tableaux à lignes alternées, en taille normale, ou tiny ]
 128 *******************************************************************************/
 129 table.bicol, table.tinybicol {
 130     background: url('../images/skins/keynote_bg_lighter.png') top left repeat-x;
 131     background-attachment: fixed;
 132     background-color: #848495;
 133     border: none;
 134     border-top: 1px solid #fff;
 135     border-left: 1px solid #fff;
 136 }
 137
 138 table.tinybicol tr.pair, table.bicol tr.pair {
 139     background: url('../images/skins/keynote_bg_verylighter.png') top left repeat-x;
 140     background-attachment: fixed;
 141     background-color: #bbbbca;
 142 }
 143
 144 table.tinybicol th, table.bicol th {
 145     color: #fff;
 146     background: url('../images/skins/keynote_title.gif') top left repeat-x;
 147     background-color: #000;
 148     height: 17px;
 149 }
 150 table.tinybicol td, table.bicol td {
 151     color: #000000;
 152     background: inherit;
 153 }
 154
 155 table.tinybicol td, table.bicol td, table.tinybicol tr, table.bicol tr { padding: 4px; }
 156
 157 td.half { width: 50%; padding: 4px; }
 158 td.titre {
 159     color: #000000;
 160     background: inherit;
 161     font-weight: bold;
 162 }
 163 td.action {
 164     white-space: nowrap;
 165     text-align: right;
 166     font-weight: bold;
 167     vertical-align: middle;
 168 }
 169 td.action a { padding: 0px 2px 0px 2px; }
 170
 171 /*******************************************************************************
 172     4   Tableau de choix de skins
 173         [ Styles pour les tableaux de types de ceux des skins ]
 174 *******************************************************************************/
 175
 176 #skin {
 177     background: url('../images/skins/keynote_bg_lighter.png') top left repeat-x;
 178     background-attachment: fixed;
 179     background-color: #848495;
 180     color: #000;
 181     border-bottom: none;
 182     border-top: 1px solid #fff;
 183 }
 184 #skin td {
 185     border-bottom: 1px solid #fff;
 186     border-top: none;
 187     vertical-align: middle;
 188 }
 189 #skin td.skigauche {
 190     background: url('../images/skins/keynote_bg_verylighter.png') top left repeat-x;
 191     background-attachment: fixed;
 192     background-color: #bbbbca;
 193 }
 194
 195 /*******************************************************************************
 196     5   Contacts
 197         [ Styles liés à l'affichage de contacts ]
 198 *******************************************************************************/
 199
 200 div.contact-list div.contact {
 201     border-top: 1px solid #fff;
 202     background: url('../images/skins/keynote_bg_verylighter.png') top left repeat-x;
 203     background-attachment: fixed;
 204     background-color: #bbbbca;
 205     color: #000;
 206 }
 207
 208 div.grayed {
 209     color: #444444;
 210     font-style: italic;
 211 }
 212
 213 div.grayed div.contact {
 214     background: url('../images/skins/keynote_bg_verylighter.png') top left repeat-x;
 215     background-attachment: fixed;
 216     background-color: #bbbbca;
 217 }
 218
 219 div.contact div.nom {
 220     font-weight: bold;
 221     width: 35%;
 222     float: left;
 223 }
 224
 225 div.contact div.appli {
 226     float: left;
 227 }
 228
 229 div.contact div.bits {
 230     text-align: right;
 231     float: right;
 232 }
 233
 234 div.contact div.long {
 235     background: url('../images/skins/keynote_bg_lighter.png') top left repeat-x;
 236     background-attachment: fixed;
 237     background-color: #848495;
 238 }
 239
 240 /*******************************************************************************
 241     6   Profil
 242         [ onglets des profils ]
 243 *******************************************************************************/
 244
 245 table.flags, tr.flags {
 246     margin: 0.5em 0 0 0;
 247     padding: 0;
 248 }
 249 table.flags input { margin: 0px 2px; padding: 0px; }
 250
 251 table.flags td.texte, tr.flags td.texte {
 252     font-size: smaller;
 253     font-weight: bold;
 254     padding: 0 8px 0 0;
 255 }
 256 table.flags td.vert, tr.flags td.vert {
 257     background: url('../images/icons/flag_green.gif') top right no-repeat;
 258     padding: 0 16px 0 0;
 259 }
 260 table.flags td.orange, tr.flags td.orange {
 261     background: url('../images/icons/flag_orange.gif') top right no-repeat;
 262     padding: 0 16px 0 0;
 263 }
 264 table.flags td.rouge, tr.flags td.rouge {
 265     background: url('../images/icons/flag_red.gif') top right no-repeat;
 266     padding: 0 16px 0 0;
 267 }
 268
 269 table.cadre_a_onglet{
 270     border-width: 0;
 271     padding : 0;
 272     margin: 0;
 273 }
 274
 275 td.conteneur_tab {
 276     border-width: 1px 1px 1px 1px;
 277     border-style: solid;
 278     border-color: #9c9c9c;
 279     border-left-color: #eee;
 280     padding: 8px 4px 4px 4px;
 281     background : url('../images/skins/keynote_topborder.png') top repeat-x;
 282 }
 283
 284 #onglet {
 285     display : block;
 286     margin : 0;
 287     padding : 0;
 288 }
 289
 290 #onglet li {
 291     display : block;
 292     float : left;
 293     padding : 0.4ex;
 294     margin : 0 0.3ex -1px 3px;
 295     background : #cecece;
 296     border: none;
 297     border-bottom: 1px solid #9C9C9C;
 298     width: auto;
 299     height: 5ex;
 300     text-align: center;
 301     color: #000;
 302 }
 303
 304 #onglet li:hover { background : #bdbdbd; }
 305
 306 #onglet li.actif {
 307     background : #dedede;
 308     border-bottom: 1px solid #dedede;
 309 }
 310
 311 /*******************************************************************************
 312     7   fiche.php & fiche_referent.php
 313         [ cas de la fiche ]
 314 *******************************************************************************/
 315
 316 #fiche {
 317     color: #000;
 318     border: none;
 319     border-top: 1px solid #fff;
 320     border-left: 1px solid #fff;
 321     background: url('../images/skins/keynote_bg_lighter.png') top left repeat-x;
 322     background-attachment: fixed;
 323     background-color: #848495;
 324 }
 325
 326 #fiche em {
 327     color: #777;
 328     font-weight: bolder;
 329 }
 330
 331 #fiche h2 {
 332     background: url('../images/skins/keynote_title.gif') bottom repeat-x;
 333     color: #fff;
 334     border: none;
 335     height: 17px;
 336     margin-right: 0;
 337 }
 338
 339 #photo { padding-left: 0em; }
 340
 341 #fiche_identite div.civilite {
 342     text-align: center;
 343     font-weight: bold;
 344     width: 80%;
 345     float: left;
 346     color: #fff;
 347 }
 348
 349 #fiche_identite div.contact {
 350     border: none;
 351     border-top: 1px dotted #fff;
 352     border-left: 1px dotted #fff;
 353     background: url('../images/skins/keynote_bg_verylighter.png') top left repeat-x;
 354     background-color: #bbbbca;
 355     background-attachment: fixed;
 356 }
 357
 358 #fiche_identite div.contact em {
 359     color: #aaa;
 360 }
 361
 362 #fiche_identite div.email {
 363     clear: left;
 364     float: left;
 365 }
 366 #fiche_identite div.mob {
 367     float: right;
 368     clear: right;
 369     text-align: right;
 370 }
 371
 372 #fiche_identite div.formation {
 373     margin: 0em 1em;
 374     clear: both;
 375 }
 376
 377 div.adresse {
 378     float: left;
 379     width: 46%;
 380     padding: 0px;
 381     margin: 0px 1% 1ex 1%;
 382 }
 383
 384 /* only for fiche_referent.php*/
 385
 386 #fiche_referent em {
 387     color: #777;
 388     font-weight: bolder;
 389 }
 390
 391 /*******************************************************************************
 392     A   SKIN
 393         [ choix de classes faites par le skinneur
 394 *******************************************************************************/
 395
 396 #dev {
 397     width: 100%;
 398     text-align: center;
 399     padding: 1px;
 400
 401     color: #003399;
 402     background: #e0ffff;
 403
 404     font-family: 'Bauhaus Md BT','Bitstream Vera',sans-serif;
 405     font-size: 10pt;
 406     font-weight: bold;
 407 }
 408
 409 #dev a { text-decoration: underline; }
 410 #dev a:hover { color: #003399; background: #c0e0e0; }
 411
 412 #db-trace div.hide       { display: none; }
 413 #db-trace:hover div.hide { display: block }
 414
 415 #suid {
 416     color: red;
 417     background: #ffc0cb;
 418     width: 100%;
 419     font-weight: bold;
 420 }
 421 #suid td { padding: 2px; }
 422 #suid a { color: red; }
 423
 424 #body {
 425     width: 740px;
 426     margin-left: auto;
 427     margin-right: auto;
 428 }
 429
 430 #body-logo {
 431     width: 140px;
 432     border: none;
 433     padding-top: 0;
 434 }
 435
 436 #body-top {
 437     padding: 0;
 438     padding-bottom: 16px;
 439 }
 440
 441 #body-bottom {
 442     border-top: 1px solid #fff;
 443 }
 444
 445 #body-menu {
 446     border-right: 1px solid #fff;
 447 }
 448
 449 #body-menu a:link, #body-menu a:visited, #body-menu a:active, #body-meny a:hover {
 450     color: #fff;
 451     text-decoration: none;
 452 }
 453
 454 #body-menu .menu_item:hover {
 455     background-color: #556;
 456 }
 457
 458 #body-menu .menu_title {
 459     color: #fff;
 460     height: 17px;
 461     background: url('../images/skins/keynote_title.gif') top repeat-x;
 462     border: none;
 463     padding: 0;
 464     padding-top: 4px;
 465     text-align: center;
 466     vertical-align: middle;
 467 }
 468
 469 #content {
 470     padding-top: 0;
 471     vertical-align: top;
 472 }
 473
 474 #quick_search {
 475     color: gray;
 476     text-align: right;
 477 }
 478
 479 div#content {
 480     padding: 1em;
 481     margin: 0em;
 482 }
 483
 484 #content input {
 485     font-size: 95%;
 486 }
 487
 488 /* vim: set et ts=4 sts=4 sw=4: */