[Sommaire] [Imprimer]

   1  /******************************************************************************/
   2  /*                         MAIN LAYOUT CSS FILE                               */
   3  /******************************************************************************/
   4  /*
   5  Theme  : Default Seagull Theme
   6  Author : Julien Casanova <julien_casanova@yahoo.fr>
   7  Version: 1.0
   8  Date   : 2006/03/20
   9  */
  10  
  11  /*
  12  ==========================General=============================*/
  13  html {
  14      height: 100%;
  15      margin-bottom: 1px;
  16  }
  17  body, h1, h2, h3, h4, p, ul, li, form, fieldset {
  18      margin: 0;
  19      padding: 0;
  20  }
  21  body {
  22      font-size: <?php echo $fontSize ?>;
  23      font-family: <?php echo $fontFamily ?>;
  24      margin: 0;
  25      padding: 0 0 10px;
  26      color: <?php echo $greyDarkest ?>;
  27  }
  28  body.sgl {
  29      background-color: <?php echo $grey ?>;
  30      text-align: center;
  31      background-image: url(../images/grey_bgnd.gif);
  32  }
  33  dl {
  34      margin: 0 0 0.5em;
  35  }
  36  p {
  37      margin-bottom: 0.5em;
  38  }
  39  a {
  40      color: <?php echo $linkColor ?>;
  41      text-decoration: <?php echo $linkDecoration ?>;
  42  }
  43  a:hover {
  44      color: <?php echo $linkHoverColor ?>;
  45      text-decoration: <?php echo $linkHoverDecoration ?>;
  46  }
  47  a:focus {
  48      outline: none;
  49  }
  50  img {
  51      border: none;
  52  }
  53  hr {
  54      border-top: 1px dotted #999;
  55      border-bottom: 0px;
  56      height: 1px;
  57  }
  58  
  59  /*
  60  ======================Global layaout==========================*/
  61  #outer-wrapper {
  62      max-width: 1000px;
  63      clear: both;
  64      width: 900px;
  65      margin: 10px auto 0;
  66      text-align: left;
  67  }
  68  #header {
  69      position: relative;
  70  }
  71  #inner-wrapper {
  72      clear: both;
  73      width: 896px;
  74      /* 896 is for mainWrapper width - borders width : 900 - (2 x 2) */
  75  }
  76  #footer {
  77      clear: both;
  78  }
  79  
  80  /*
  81  ======================2 Cols Fluid============================*/
  82  #middleCol {
  83      float: left;
  84      background: <?php echo $greyLightest ?>;
  85      height: 380px; /* Sets min height for IE */
  86  }
  87  html > body #middleCol {
  88      /* Sets min height for gecko */
  89      height: auto;
  90      min-height: 380px;
  91  }
  92  #middleCol .inner {
  93      padding: 5px 10px;
  94  }
  95  #layout-3Cols #middleCol {
  96      width: <?php echo ($mainWrapperWidth - $leftColWidth - $rightColWidth - 6) . 'px' ?>;
  97      /* 6 is for borders width : (2+1) x 2 */
  98  }
  99  #layout-leftCol #middleCol {
 100      width: <?php echo ($mainWrapperWidth - $leftColWidth - 6) . 'px' ?>;
 101  }
 102  #layout-rightCol #middleCol {
 103      width: <?php echo ($mainWrapperWidth - $rightColWidth -6) . 'px' ?>;
 104  }
 105  #layout-noCols #middleCol {
 106      width: <?php echo ($mainWrapperWidth -6) . 'px' ?>;
 107  }
 108  #leftCol {
 109      float: left;
 110      width: <?php echo $leftColWidth . 'px' ?>;
 111      /*background: url('<?php echo $baseUrl ?>/images/backgrounds/v4-bubbles.png') left top no-repeat;*/
 112  }
 113  #leftCol .inner {
 114      padding: 5px;
 115      padding-top: 0.8em;
 116  }
 117  #rightCol {
 118      float: right;
 119      width: <?php echo $rightColWidth . 'px' ?>;
 120      background: <?php echo $greyLightest ?>;
 121  }
 122  #rightCol .inner {
 123      margin: 2.5em 4px 4px 0;
 124      padding: 5px;
 125      padding-top: 0.8em;
 126      border: 1px solid <?php echo $grey ?>;
 127  }
 128  
 129  /*
 130  =========================Header===============================*/
 131  #header {
 132      border-bottom: 2px solid <?php echo $greyLightest ?>;
 133  }
 134  #header .wrapLeft {
 135      background: url('<?php echo $baseUrl ?>/images/backgrounds/header_tl.gif') left top no-repeat;
 136  }
 137  #header .wrapRight {
 138      background: url('<?php echo $baseUrl ?>/images/backgrounds/header_tr.gif') right top no-repeat;
 139  }
 140  #header .wrap {
 141      position: relative;
 142      height: 70px;
 143      margin: 0 20px;
 144      background: <?php echo $primary ?> url('<?php echo $baseUrl ?>/images/backgrounds/header_tm.gif') left top repeat-x;
 145  }
 146  #header span#logo {
 147      font-size: 30px;
 148      font-family: "Trebuchet MS";
 149  }
 150  #header a#logo {
 151      color: <?php echo $greyLightest ?>;
 152      text-decoration: none;
 153  }
 154  #header #logo img {
 155      position: relative;
 156      top: 7px;
 157      left: 0;
 158  }
 159  #header #bugReporter {
 160      position: absolute;
 161      bottom: 0px;
 162      right: -10px;
 163  }
 164  
 165  /*
 166  ======================Inner Wrapper===========================*/
 167  #inner-wrapper {
 168      background: <?php echo $greyLightest ?>;
 169      border: 2px solid <?php echo $greyLightest ?>;
 170      border-top: none;
 171  }
 172  #inner-wrapper .inner-container {
 173      border: 1px solid <?php echo $grey ?>;
 174      background: url('<?php echo $baseUrl ?>/images/backgrounds/column_tm.gif') left top repeat-x;
 175  }
 176  
 177  /*
 178  =======================Breadcrumbs============================*/
 179  #breadcrumbs {
 180      background: <?php echo $greyLightest ?>;
 181      border: 2px solid <?php echo $greyLightest ?>;
 182      border-top: none;
 183      font-family: <?php echo $fontFamilyAlt ?>;
 184      font-size: 0.8em;
 185  }
 186  #breadcrumbs .inner {
 187      padding: 0.4em 0 0.4em 1em;
 188      border: 1px solid <?php echo $grey ?>;
 189  }
 190  #breadcrumb {
 191      float: left;
 192  }
 193  a.breadcrumbs {
 194      font-weight: bold;
 195      color: <?php echo $primaryDark ?>;
 196  }
 197  
 198  /*
 199  ======================Main Content============================*/
 200  h1 {
 201      font-size: 1.2em;
 202      margin: 0em 0 1em;
 203      padding-bottom: 0.5em;
 204      border-bottom: 1px solid <?php echo $greyDark ?>;
 205      color: <?php echo $greyDark ?>;
 206  }
 207  h2 {
 208      margin-top: 0.5em;
 209      font-size: 1.1em;
 210  }
 211  ul {
 212      margin: 0.5em 0 0.5em 1em;
 213      padding-left: 0.5em;
 214      list-style-position: inside;
 215      list-style-image: url('<?php echo $baseUrl ?>/images/bullet.gif');
 216  }
 217  li {
 218      padding-left: 0.5em;
 219  }
 220  
 221  /*
 222  ===============Generic columns presentation===================*/
 223  .two-cols {
 224      height: 100%;
 225      overflow: hidden;
 226  }
 227  .two-cols .col {
 228      float : left;
 229      width : 49%;
 230      margin-left : 1%;
 231  }
 232  .two-cols .first {
 233      width : 50%;
 234      margin-left : 0;
 235  }
 236  
 237  /*
 238  ==================Default Forms Styling=======================*/
 239  
 240  fieldset {
 241      padding: 10px 0;
 242      border: none;
 243  }
 244  fieldset h3 {
 245      font-size: 1em;
 246      color: <?php echo $greyDark ?>;
 247  }
 248  #content form ul {
 249      position: relative;
 250      margin: 0;
 251      padding: 0;
 252      width: 99%;
 253      list-style-position: outside;
 254      list-style-image: none;
 255  }
 256  
 257  #content form li {
 258      display: block;
 259      margin: 0;
 260      padding: 1px 4px 6px 9px;
 261      line-height: 1.8em;
 262      list-style-type: none;
 263  }
 264  form li.focused {
 265      background: <?php echo $primaryLight ?>;
 266  }
 267  
 268  form li div {
 269      float: left;
 270      display: inline;
 271      margin-right: 5px;
 272      color: <?php echo $greyDark ?>;
 273  }
 274  form li:after {
 275      content: ".";
 276      display: block;
 277      height: 0;
 278      clear: both;
 279      visibility: hidden;
 280  }
 281  form li p {
 282      clear: both;
 283      font-size: 9px;
 284      line-height: 13px;
 285  }
 286  
 287  
 288  /*
 289  ===================Form Elements Styling======================*/
 290  input, select, textarea {
 291      font-size: 100%;
 292  }
 293  textarea {
 294      font-family: <?php echo $fontFamily ?>;
 295  }
 296  
 297  #content input.text, #content select.select, #content textarea.textarea {
 298      border-width: 1px;
 299      border-style: solid;
 300      border-color: #7c7c7c #c3c3c3 #ddd #c3c3c3;
 301      background: #fff url(../images/fieldbg.gif) repeat-x top;
 302  }
 303  
 304  input.text {
 305      padding: 2px 0;
 306  }
 307  form label {
 308      font-weight: bold;
 309      color: <?php echo $greyDark ?>;
 310  }
 311  
 312  /* SIZES */
 313  .third {
 314      width:32% !important;
 315  }
 316  .half {
 317      width:48% !important;
 318  }
 319  .full {
 320      width:100% !important;
 321  }
 322  input.small, select.small {
 323      width:25%;
 324  }
 325  input.medium, select.medium {
 326      width:50%;
 327  }
 328  input.large, select.large, textarea.textarea {
 329      width:99%;
 330  }
 331  input.tags {
 332      width:315px;
 333  }
 334  textarea.small {
 335      height:5.5em;
 336  }
 337  textarea.medium {
 338      height:10em;
 339  }
 340  textarea.large {
 341      height:20em;
 342  }
 343  
 344  /* BUTTONS */
 345  .button {
 346      font-size: 110%;
 347      margin-right: 5px;
 348      /*border: 1px solid #666;*/
 349  }
 350  
 351  /*
 352  ====================Form Fields Layout========================*/
 353  /* --
 354  Definition lists are used to display fields labels and values
 355  -----*/
 356  dl.onSide dt {
 357      float: left;
 358      width: 120px;
 359      padding-right: 20px;
 360      text-align: right;
 361  }
 362  dl.onSide dd{
 363      margin-left: 140px;
 364      margin-bottom: 0.5em;
 365  }
 366  dl.onTop dd {
 367      margin: 0;
 368  }
 369  dd .error {
 370      display: block;
 371  }
 372  
 373  /*
 374  ======================No forms layout=========================*/
 375  div.fieldsetlike { /*
 376  --------------------- as some pages don't use forms/fieldsets
 377  - e.g. user/profile, we have to put data in a fieldset like
 378  - div to have same render ------------------------------------*/
 379      padding: 10px 0;
 380  }
 381  div.fieldsetlike h3 {
 382      font-size: 1em;
 383      color: <?php echo $greyDark ?>;
 384  }
 385  
 386  /*
 387  ==================Default Tables Styling======================*/
 388  /*  In a transition period, we'll use a sglTable class to style tables
 389      Everyone is encouraged not to use tables for layout purposes
 390      TODO: remove this when all layout tables have been replaced */
 391  .wide {
 392      width: 60%;
 393  }
 394  .large {
 395      width: 85%;
 396  }
 397  table {
 398      margin: 0 0 1em;
 399      border-collapse: collapse;
 400      font-size: 1em;
 401  }
 402  table .nowrap {
 403      white-space: nowrap;
 404  }
 405  .sglTable td, .sglTable th {
 406      border-width : 0 0 1px 0;
 407      border-style : solid;
 408      border-color : <?php echo $grey ?>;
 409      padding : 2px 5px;
 410      vertical-align : top;
 411  }
 412  .sglTable th {
 413      text-align: left;
 414      border-bottom-color: <?php echo $greyDark ?>;
 415  }
 416  th a {
 417      display: block;
 418      color: #666 !important;
 419  }
 420  tr.expand td {
 421      border-bottom: none;
 422  }
 423  td.expand {
 424      padding: 1em 5px;
 425  }
 426  th.sortedAsc a {
 427      background: url('<?php echo $baseUrl ?>/images/th-sortAsc.gif') 95% 50% no-repeat;
 428      color: <?php echo $primaryDark ?> !important;
 429  }
 430  th.sortedDesc a {
 431      background: url('<?php echo $baseUrl ?>/images/th-sortDesc.gif') 95% 50% no-repeat;
 432      color: <?php echo $primaryDark ?> !important;
 433  }
 434  th a:hover {
 435      text-decoration: none;
 436      color: <?php echo $primaryDark ?> !important;
 437  }
 438  tr.alternateRow td, tr.backDark {
 439      background-color: #FBFFEF; /*F0FFD9*/
 440  }
 441  tr.selectedRow td {
 442      background: #F6F5F2; /*D0DCE0*/
 443  }
 444  tr.rowHover td, tr:hover td {
 445    background: #F0FFD9; /*E0EFB8*/
 446  }
 447  
 448  /*
 449  =========================Footer===============================*/
 450  #footer .wrapLeft {
 451      background: url('<?php echo $baseUrl ?>/images/backgrounds/footer_bl.gif') left bottom no-repeat;
 452  }
 453  #footer .wrapRight {
 454      background: url('<?php echo $baseUrl ?>/images/backgrounds/footer_br.gif') right bottom no-repeat;
 455  }
 456  #footer .wrap {
 457      position: relative;
 458      margin: 0 20px;
 459      padding: 10px 0 5px;
 460      background: <?php echo $primary ?> url('<?php echo $baseUrl ?>/images/backgrounds/footer_bm.gif') left bottom repeat-x;
 461      text-align: center;
 462  }
 463  #footer p {
 464      margin-bottom: 0.1em;
 465      color: <?php echo $greyDark ?>;
 466      font-size: 0.8em;
 467  }
 468  
 469  /*
 470  ======================Messages & Errors=======================*/
 471  .message {
 472      text-align: center;
 473  }
 474  .message div {
 475      width: 60%;
 476      margin: 1em auto;
 477      padding: 0.5em;
 478      -moz-border-radius: 0.3em;
 479  }
 480  .errorMessage {
 481      border: 2px solid <?php echo $error ?>;
 482      color: <?php echo $error ?>;
 483  }
 484  .infoMessage {
 485      border: 2px solid <?php echo $primaryDark ?>;
 486      color: <?php echo $primary ?>;
 487  }
 488  .error, .required {
 489      color: <?php echo $error ?>;
 490  }
 491  
 492  /* PEAR Errors
 493    --------------------*/
 494  div.errorContainer {
 495      width: 80%;
 496      margin: 1em auto;
 497      padding: 0.5em;
 498      border: 2px solid <?php echo $error ?>;
 499      -moz-border-radius: 0.3em;
 500      font-family: <?php echo $fontFamilyAlt ?>;
 501  }
 502  div.errorHeader {
 503      margin-bottom: 0.5em;
 504      font-size: 1.1em;
 505      text-transform: uppercase;
 506      font-weight: bold;
 507      letter-spacing: 0.3em;
 508      color: <?php echo $error ?>;
 509  }
 510  div.errorContent {
 511      text-align: left;
 512  }
 513  
 514  /*
 515  ============================Flags=============================*/
 516  a.langFlag {
 517      margin: 0 5px;
 518  }
 519  
 520  /*
 521  ========================Miscellaneous=========================*/
 522  .floatLeft {
 523      float: left;
 524  }
 525  .floatRight {
 526      float: right;
 527  }
 528  .clear {
 529      clear: both;
 530  }
 531  .spacer {
 532      clear: both;
 533      display: block;
 534      visibility: hidden;
 535      line-height: 1px;
 536  }
 537  .left {
 538      text-align: left;
 539  }
 540  .right {
 541      text-align: right;
 542  }
 543  .center {
 544      text-align: center;
 545  }
 546  .hide {
 547      display: none;
 548  }
 549  .narrow {
 550      width: 45%;
 551  }
 552  .full {
 553      width: 100%;
 554  }
 555  .button {
 556  
 557  }
 558  .noBg {
 559      background: none;
 560  }
 561  pre.codeExample {
 562      padding: 1em;
 563      background-color: <?php echo $greyLight ?>;
 564      border: 1px solid <?php echo $greyDark ?>;
 565      border-left: 5px solid <?php echo $greyDark ?>;
 566      font-size: 1em;
 567  }
 568  
 569  /*
 570  ========================Comments=========================*/
 571  
 572  #addComment fieldset {
 573      padding: 10px;
 574      border: 1px solid grey;
 575  }
 576  #addComment input[type="text"] {
 577      width: 200px;
 578  }
 579  
 580  /*
 581  ========================Miscellaneous2=========================*/
 582  
 583  .tipOwner {
 584      position: relative;
 585      cursor: help;
 586      <?php if (isBrowserFamily('MSIE7', '<')) { ?>
 587      behavior: url(<?php echo $baseUrl ?>/css/tooltipHover.htc);
 588      <?php } ?>
 589  }
 590  .tipOwner .tipText {
 591      display: none;
 592      position: absolute;
 593      top: 0;
 594      left: 105%;
 595      border: 1px solid transparent;
 596      border-color: <?php echo $button ?>;
 597      background-color: <?php echo $tertiaryLight ?>;
 598      color: <?php echo $secondaryDarker ?>;
 599      text-align: center;
 600      width: 15em;
 601      padding: 2px 5px;
 602      <?php if (isBrowserFamily('Gecko')) { ?>
 603      -moz-opacity: 0.85;
 604      <?php } else if (isBrowserFamily('MSIE')) { ?>
 605      filter: alpha(opacity=85);
 606      filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);
 607      <?php } ?>
 608  }
 609  .tipOwner:hover .tipText {
 610      display: block;
 611  }
 612  
 613  /*
 614  TO REMOVE WHEN ALL TEMPLATES ARE CONSOLIDATED
 615  ======================Default Theme BC========================*/
 616  .wideButton {
 617      /* use button instead */
 618      width: 8em;
 619  }