[Sommaire] [Imprimer]

   1  /******************************************************************************
   2                                MAIN HTML TAGS STYLE
   3   ******************************************************************************/
   4  
   5  body 
   6  {
   7      font-family: tahoma, verdana, arial, helvetica, sans-serif;
   8      color:#333333;
   9      background-color: #fff;
  10      padding: 1px;
  11      margin: 1px;
  12  }
  13  
  14  a:link, a:active, a:visited 
  15  {
  16      color: #00659C;
  17  }
  18  
  19  a img 
  20  {
  21      border:none;
  22      text-decoration: none;
  23  }
  24  
  25  .spacer 
  26  {
  27      clear: both;
  28  }
  29  
  30  h3{
  31      font-size: 110%;
  32  }
  33  
  34  
  35  /******************************************************************************
  36                                CLAROLINE TOP BANNER
  37   ******************************************************************************/
  38  
  39   /*----------------------------------------------------------------------------
  40                                    CAMPUS LINE
  41   ----------------------------------------------------------------------------*/
  42  
  43  #platformBanner
  44  {
  45      color: #00659C;
  46      /* background-color:#006; */
  47      padding: 4px;
  48      font-size: 120%;
  49      font-weight: bold;
  50  }
  51  
  52  #platformBanner a,
  53  #platformBanner a:active,
  54  #platformBanner a:link,
  55  #platformBanner a:visited
  56  {
  57      text-decoration: none;
  58     color: #00659C;
  59  }
  60  
  61  #platformBanner a:hover 
  62  {
  63      text-decoration: underline;
  64  }
  65  
  66  #platformBanner #siteName
  67  {
  68  }
  69  
  70  #platformBanner #institution
  71  {
  72  }
  73  
  74  #campusBannerRight
  75  {
  76      position: relative;
  77      float: right;
  78      text-align: right;
  79      margin: 0;
  80  }
  81  
  82  #campusBannerLeft
  83  {
  84      position: relative;
  85      float: left;
  86      text-align: left;
  87      margin: 0;
  88  }
  89  
  90   /*----------------------------------------------------------------------------
  91                                     USER LINE
  92   ----------------------------------------------------------------------------*/
  93  
  94  #userBanner
  95  {
  96      background-color: transparent;
  97      border-top: 1px #CECFCE solid;
  98      /* color:white; */
  99      font-size: 80%;
 100      font-weight:bold;
 101      padding: 4px;
 102  }
 103  
 104  #userBanner #userName
 105  {
 106       font-size: 110%;
 107       font-weight: normal;
 108       margin: 0;
 109  }
 110  
 111  #userBanner a,
 112  #userBanner a:active,
 113  #userBanner a:link,
 114  #userBanner a:visited
 115  {
 116      text-decoration: none;
 117     /* color: #FFF; */
 118  }
 119  
 120  #userBanner a:hover
 121  {
 122      text-decoration: underline;
 123  }
 124  
 125  #userBannerRight
 126  {
 127      position: relative;
 128      float: right;
 129      text-align: right;
 130      margin: 0;
 131  }
 132  
 133  #userBannerLeft
 134  {
 135      position: relative;
 136      float: left;
 137      text-align: left;
 138      margin: 0;
 139  }
 140  
 141  
 142   /*----------------------------------------------------------------------------
 143                                    COURSE LINE
 144   ----------------------------------------------------------------------------*/
 145  #courseBanner
 146  {
 147     padding: 4px;
 148      /* background-color: transparent; */
 149      background-color: #EFEFEF;
 150      color: #036;
 151      font-weight: bold;
 152      /* border-top: 1px #FFF solid; */
 153      border-top: 1px #CECFCE solid;
 154  }
 155  
 156  #courseBanner #course
 157  {
 158      position: relative;
 159      float: left;
 160      text-align: left;
 161  }
 162  
 163  #courseBanner #course span
 164  {
 165         display: block;
 166  }
 167  
 168  #courseBanner #courseToolList
 169  {
 170      position: relative;
 171      float: right;
 172     text-align: right;
 173  }
 174  
 175  #courseBanner #courseName {
 176      font-size: 120%;
 177      padding: 0;
 178      margin: 0;
 179  }
 180  
 181  #courseBanner a,
 182  #courseBanner a:active,
 183  #courseBanner a:link,
 184  #courseBanner a:visited
 185  {
 186      color: #00659C;
 187      text-decoration: none;
 188  }
 189  
 190  #courseBanner a:hover
 191  {
 192      text-decoration: underline;
 193  }
 194  
 195  #courseBanner #courseCode {
 196      font-size: 80%;
 197  }
 198  
 199  #courseBanner form
 200  {
 201      padding-top: 5px;
 202      margin: 0;
 203  }
 204  
 205  #courseBannerRight
 206  {
 207      position: relative;
 208      float: right;
 209      text-align: right;
 210      margin: 0;
 211  }
 212  
 213  #courseBannerLeft
 214  {
 215      position: relative;
 216      float: left;
 217      text-align: left;
 218      margin: 0;
 219  }
 220  
 221   /*----------------------------------------------------------------------------
 222                                    BREAD CRUMB TRAIL
 223   ----------------------------------------------------------------------------*/
 224  
 225  #breadcrumbLine
 226  {
 227      border-top: 1px #CECFCE solid;
 228      border: none;
 229      font-size: 80%;
 230      color: #BBBBBB;
 231  }
 232  
 233  #breadcrumbLine a
 234  {
 235      color: #999999;
 236  }
 237  
 238  
 239  #breadcrumbLine hr
 240  {
 241      display: none;
 242  }
 243  
 244  #breadcrumbLine .breadcrumbTrail
 245  {
 246      float: left;
 247  }
 248  
 249  #breadcrumbLine #toolViewOption
 250  {
 251      font-size: 80%;
 252      float: right;
 253      text-align: right;
 254  }
 255  
 256  .breadcrumbTrail
 257  {
 258      font-size: 80%;
 259  }
 260  
 261  /******************************************************************************
 262                               CLAROLINE BODY
 263   ******************************************************************************/
 264  
 265  #claroBody{
 266  
 267  }
 268  
 269  
 270  /******************************************************************************
 271                                CLAROLINE FOOTER
 272   ******************************************************************************/
 273  
 274  #campusFooter
 275  {
 276      font-size: 80%;
 277  }
 278  
 279  #campusFooter hr
 280  {
 281      background-color: gray;
 282      border: 0;
 283      height: 1px;
 284  }
 285  
 286  #campusFooterRight
 287  {
 288      float: right;
 289      text-align: right;
 290  }
 291  
 292  #campusFooterLeft
 293  {
 294      float: left;    
 295  }
 296  
 297  #campusFooterCenter
 298  {
 299      clear: both;
 300      text-align: center;
 301  }
 302  
 303  #campusFooterCenter #poweredBy
 304  {
 305      font-style: italic;
 306  }
 307  /******************************************************************************
 308      CLAROLINE COMMAND LINKS
 309   ******************************************************************************/
 310   
 311  .claroCmd
 312  {
 313          font-size: smaller;
 314          font-weight: bold;
 315          text-decoration: underline;
 316  }
 317  
 318  .claroCmdDisabled 
 319  {
 320          color: Gray;
 321          font-size: smaller;
 322          font-weight: bold;
 323          text-decoration: none;
 324  }
 325  
 326  /* Added for document view mode toolbar */
 327  
 328  th .claroCmd
 329  {
 330      font-size: smaller;
 331      font-weight: bold;
 332      text-decoration: underline;
 333  }
 334  
 335  th .claroCmdDisabled
 336  {
 337     color: white;
 338     font-size: smaller;
 339      font-weight: bold;
 340      text-decoration: none;
 341  }
 342  
 343  /******************************************************************************
 344                               CLAROLINE ITEM
 345   ******************************************************************************/
 346  
 347  /*
 348   * Classes family to emphase some item in the tool interface.
 349   * These two classes has to be used together to work correctly.
 350   *
 351   * SOME EXAMPLES :
 352   *
 353   *  <a href="0" class="item"><img src="icon.gif" />lorem ipsum</a><br />
 354   *  <a href="0" class="item hot"><img src="icon.gif" />lorem ipsum</a><br />
 355   *
 356   *  <span class="item"><img src="icon.gif" />lorem ipsum</span><br>
 357   *  <span class="item hot"><img src="icon.gif" />lorem ipsum<br>
 358   *
 359   *  <ul style="list-style-image:url(icon.gif);list-style-position:inside">
 360   *   <li class="item">lorem ipsum</li>
 361   *   <li class="item hot">lorem ipsum</li>
 362   *  </ul>
 363   */
 364  
 365  .item {padding-left:16px}
 366  .hot {background:url(../img/hot.gif) no-repeat}
 367  
 368  /******************************************************************************
 369                               CLAROLINE TABLE
 370   ******************************************************************************/
 371  
 372  /* Uniformize claroline table format. The class provide 3 header type
 373   *
 374   *     - superHeader : allowing to define table title above the column header
 375   *     - headerX : define header in the X axis for each column
 376   *     - headerY : define header in the Y axis for each rank
 377   * 
 378   * Example of table using a super header and header in X axis
 379   *
 380   * <table class="claroTable">
 381   * <tr class="superHeader">
 382   * <th colspan="3">User Birthdate</th>
 383   * </tr>
 384   * <tr class="headerX">
 385   * <th>Firstname</th>
 386   * <th>Lastname</th>
 387   * <th>Birthdate</th>
 388   * </tr>
 389   * 
 390   * <tbody>
 391   * 
 392   * <tr>
 393   * <td>Hugues</td>
 394   * <td>Peeters</td>
 395   * <td>1969-09-27</td>
 396   * </tr>
 397   * <tr>
 398   * ...
 399   * </tr>
 400   * 
 401   * </tbody>
 402   * 
 403   * </table>
 404   * 
 405   * Example of table using header in Y axis
 406   * 
 407   * 
 408   * <table class="claroTable">
 409   *
 410   * <tr class="superHeader">
 411   * <th colspan="3">User Birthdate</th>
 412   * </tr>
 413   * 
 414   * <tr>
 415   * <th class="headerY">Firstname</th>
 416   * <td>Hugues</td>
 417   * <td> ...  </td>
 418   * </tr>
 419   * 
 420   * <tr>
 421   * <th class="headerY">Lastname</th>
 422   * <td>Peeters</td>
 423   * <td> ...  </td>
 424   * </tr>
 425   * 
 426   * <tr>
 427   * <th class="headerY">Birthdate</th>
 428   * <td>1969-09-27</td>
 429   * <td> ...  </td>
 430   * </tr>
 431   *
 432   * </table>
 433   */
 434  
 435  .claroTable td, th {
 436      margin:  1px;
 437      padding: 4px;
 438      border: none;
 439  }
 440  
 441  
 442  .claroTable .superHeader th, .claroTable th.superHeader {
 443      color: white;
 444      background-color: #00659C;
 445      font-weight: bold;
 446      text-align: left;
 447  }
 448  
 449  .claroTable .superHeader a {
 450      color: white;
 451  }
 452  
 453  
 454  .claroTable th.headerY, .claroTable .headerY th, 
 455  .claroTable th.headerX, .claroTable .headerX th {
 456      font-weight: normal;
 457      text-align: left;
 458  }
 459  
 460  .claroTable .headerX th,  .claroTable th.headerX {
 461      background-color: #EFEFEF;
 462      color: #00659C;
 463      font-size: smaller;
 464      font-weight: bold;
 465  }
 466  
 467  /* extension of claroTable class for Image Viewer */
 468  .claroTable tr th.toolbar {
 469      background: white;
 470      font-weight: normal;
 471  }
 472  
 473  .claroTable tr.toolbar th.prev{
 474      text-align:left;
 475      font-weight: normal;
 476  }
 477  
 478  .claroTable tr.toolbar th.title{
 479      font-weight:bold;
 480      text-align:center;
 481  }
 482  
 483  .claroTable tr.toolbar th.next{
 484      text-align:right;
 485      font-weight: normal;
 486  }
 487  
 488  .emphaseLine tbody td {
 489      border-bottom: solid #DDDEBC 1px ;
 490  }
 491  
 492  .emphaseLine tbody tr:hover {
 493      background-color: #E3E3E3;
 494  }
 495  
 496  
 497  /******************************************************************************
 498                               VARIOUS CLAROLINE CSS CLASS
 499   ******************************************************************************/
 500  
 501  /*
 502   * 'claroMessageBox' is used to display all messages from the platform like 
 503   * action confirmation, parameter request, warning mesage...
 504   * Things that are usually displayed in a dialog box into offline applications
 505   */ 
 506   
 507  .claroMessageBox {
 508     background-color: #EFEFEF;
 509      border: solid 1px #00659C;
 510      color: #000;
 511  }
 512  
 513  .claroIntroSection { 
 514      border: dashed 1px #D8D8D8;
 515      padding: 10px;
 516      margin-top : 10px;
 517      margin-bottom: 10px;
 518  }
 519  
 520  .claroIntroSection hr
 521  {
 522      border: 0;
 523      height: 1px;
 524      background-color: #D8D8D8;
 525  }
 526  
 527  /*
 528   * 'invisible' is generally attached to element that shouldn't be visible into 
 529   * common user interface but which are visible in course manager or platform 
 530   * administrator screen, showing that the element is deactivated or isn't 
 531   * visible fo the other users
 532   */
 533  
 534  .invisible
 535  {
 536      color: #999999;
 537  }
 538  
 539  .invisible a, 
 540  .invisible a:link, 
 541  .invisible a:visited,
 542  a.invisible,
 543  a:link.invisible,
 544  a:visited.invisible
 545  {
 546      color: #999999;
 547  }
 548  
 549  
 550  /* 'correct' is attached to element that must be highlighted as correct
 551      example : a good score in exercices
 552  */
 553  .correct {
 554      color: #009900;
 555  }
 556  
 557  /* 'error' is attached to element that must be highlighted as correct
 558      example : a wrong score in exercices
 559      example : an error message
 560  */
 561  .error {
 562      color: #990000;
 563  }
 564  
 565  /* 'highlight' is used when something needs to be especially shown to the user
 566      example : 'today' in the agenda
 567  */
 568  .highlight {
 569   color: #000066;
 570   font-weight: bold;
 571  }
 572  
 573  
 574  /*
 575   * 'rightMenu' is mainly use in the platform home page
 576   */
 577  
 578  .claroRightMenu  {
 579      background-color: transparent;
 580  }
 581      
 582  .claroRightMenu a, 
 583  .claroRightMenu a:visited, 
 584  .claroRightMenu a:active {
 585          
 586  }
 587      
 588  claroRightMenu a:hover {
 589                  
 590  }
 591  
 592  .HelpText {
 593      color:gray
 594  }
 595  
 596  .claroToolTitle {
 597      padding-top: 5px;
 598  }
 599  
 600  /*
 601   * 'comment' is used for comment of documents, forum description, ...
 602   */
 603  
 604  .comment {
 605      font-size: smaller;
 606      margin-left: 30px;
 607  }
 608  
 609  
 610  /*
 611   * Navigation with tabs : configuration, modules, ...
 612   */
 613   
 614  #navlist {
 615      margin: 10px;
 616      padding: 0 0 7px 10px;
 617      border-bottom: 1px solid #DEDEDE;   
 618  }
 619  
 620  .tabTitle {
 621      padding: 3px 0;
 622      margin-left: 0;
 623      border-bottom: 1px solid #DEDEDE; 
 624  }
 625  
 626  .tabTitle a {
 627      border-bottom: 4px solid #00659C;
 628      text-decoration: none;
 629  }
 630  
 631  #navlist li, .tabTitle li {
 632      margin: 0;
 633      padding: 0;
 634      list-style: none;
 635      display: inline;
 636  }
 637  
 638  #navlist li a:link,
 639  #navlist li a:visited {
 640      margin: 0 5px 4px 5px;
 641      padding: 3px 0.5em;
 642      text-decoration: none;
 643  }
 644  
 645  #navlist li a:hover {
 646      border-bottom: 4px solid #DEDEDE;
 647  }
 648  
 649  #navlist li a.current {
 650      border-bottom: 4px solid #00659C;
 651  }