[Sommaire] [Imprimer]

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