[Sommaire] [Imprimer]

   1  /* ************************************************
   2  Modern
   3  - design & code : Marco <marco@marcarea.com>
   4  - icônes : http://www.famfamfam.com/
   5  ************************************************ */
   6  
   7  * { margin: 0; padding: 0; border: 0; }
   8  
   9  body {
  10      background: #CDCDCD;
  11      font: 0.7em Arial,sans-serif;
  12  }
  13  
  14  
  15  /* Common styles
  16  -------------------------------------------------------- */
  17  ul { list-style: none; }
  18  ul li { list-style: none; }
  19  
  20  a:link, a:visited { color: #000; text-decoration: underline; }
  21  a:hover { color: #000; text-decoration: none; }
  22  pre { overflow: auto; width: 100%; height: auto; }
  23  .left { float: left; }
  24  .right { float: right; }
  25  
  26  
  27  /* Page
  28  -------------------------------------------------------- */
  29  #page {
  30      width: 820px;
  31      margin: 0 auto;
  32      position: relative;
  33      background: transparent url(img/background.png) repeat-y top center;
  34  }
  35  
  36  
  37  /* Header
  38  -------------------------------------------------------- */
  39  #top {
  40      /*width: 800px;*/
  41      width: 732px;
  42      background: transparent url(img/top.jpg) no-repeat left bottom;
  43      padding: 54px 34px 46px 34px;
  44      margin: 0 auto;
  45  }
  46      #top h1 { font-size: 3em; }
  47      #top a:link, #top a:visited, #top a:hover { color: #FFF; text-decoration: none; }
  48  
  49  
  50  /* Prelude
  51  -------------------------------------------------------- */
  52  #prelude {
  53      width: 366px;
  54      position: absolute;
  55      top: 0;
  56      right: 18px;
  57      padding: 6px 0 0 0;
  58      color: #CAE4FC;
  59      text-align: center;
  60  }
  61      #prelude a:link, #prelude a:visited {
  62          font-size: 1em;
  63          font-weight: bold;
  64          color: #CAE4FC;
  65          text-decoration: none;
  66      }
  67      #prelude a:hover { text-decoration: underline; }
  68      #prelude a:focus, #prelude a:active { background: yellow; color: red; padding: 5px 8px; }
  69  
  70  
  71  /* Wrapper
  72  -------------------------------------------------------- */
  73  #wrapper {
  74      width: 770px;
  75      margin: 0 auto 10px auto;
  76  }
  77  
  78  
  79  #main {
  80      width: 474px;
  81      float: left;
  82  }
  83  
  84  #sidebar {
  85      width: 272px;
  86      float: right;
  87  }
  88  
  89  
  90  /* Sidebar
  91  -------------------------------------------------------- */
  92  #sidebar h2 {
  93      color: #005D99;
  94      font-size: 1em;
  95      font-weight: bold;
  96      background: #F5F5F5;
  97      border: 1px solid #CDCDCD;
  98      border-width: 1px 0;
  99      padding: 5px 8px;
 100      margin: 0 0 10px 0;
 101  }
 102  #sidebar h3 { color: #005D99; padding: 4px 8px 0 8px; font-size: 1em; }
 103  
 104  #sidebar a:link, #sidebar a:visited { text-decoration: none; }
 105  #sidebar a:hover { text-decoration: underline; }
 106  #blogextra a:link, #blogextra a:visited { text-decoration: none; }
 107  #blogextra a:hover { text-decoration: underline; }
 108  
 109  #sidebar ul, #blogextra li { padding: 0 0 4px 0; }
 110  #sidebar li, #blogextra li {
 111      background: transparent url(img/sidebar_li.png) no-repeat 10px 7px;
 112      padding: 3px 4px 3px 20px;
 113  }
 114  #sidebar p, #blogextra p { padding: 0 0 4px 10px; }
 115  
 116      #search fieldset p { padding-left: 8px; }
 117      #search #q {
 118          color: #005D99;
 119          width: 180px;
 120          border: 1px solid #CDCDCD;
 121          padding: 1px 2px;
 122          font-size: 1em;
 123      }
 124      #search .submit {
 125          color: #005D99;
 126          background: #FFF;
 127          font-size: 1em;
 128          font-weight: bold;
 129          text-transform: uppercase;
 130          border: 1px solid #FFF;
 131      }
 132      #search .submit:hover { background: #005D99; color: #FFF; border: 1px solid #005D99; }
 133  
 134  #search, #sidebar .selected, #sidebar .categories, #sidebar .syndicate,
 135  #sidebar .langs, #sidebar .tags, #sidebar .links, #sidebar .text { padding: 0 0 10px 0; }
 136  
 137  #topnav {
 138      color: #005D99;
 139      font-size: 0.9em;
 140      background: #F5F5F5;
 141      border: 1px solid #CDCDCD;
 142      border-width: 1px 0;
 143      padding: 5px 5px 5px 8px;
 144      margin: 0 0 20px 0;
 145      font-weight: bold;
 146      text-transform: uppercase;
 147  }
 148      #sidebar #topnav ul { margin: 0; padding: 0; }
 149      #sidebar #topnav li {
 150          display: inline;
 151          background: none;
 152          margin: 0;
 153          padding: 0;
 154      }
 155  
 156      #sidebar .syndicate li {
 157          margin: 0 4px 0 11px;
 158          background: transparent url(img/rss.png) no-repeat 0px 50%;
 159          padding: 5px 4px 5px 22px;
 160      }
 161  
 162      #sidebar .tags ul {
 163          margin: 5px 5px 10px 10px;
 164          padding: 0;
 165          font-size: 110%;
 166      }
 167          #sidebar .tags ul li {
 168              display: inline;
 169              background: none;
 170              margin: 0;
 171              padding: 0;
 172              font-size: 0.9em;
 173          }
 174              #sidebar .tags ul li a:link, #sidebar .tags ul li a:visited { color: #333; /*#005D99;*/ }
 175              
 176          #sidebar .tags p strong a:link, #sidebar .tags p strong a:visited { padding: 0 0 0 18px; background: transparent url(img/tags.png) no-repeat 0 -2px; }
 177          #sidebar .tags p strong a:hover {}
 178  
 179  
 180  .tag0 { font-size: 75%; }
 181  .tag10 { font-size: 80%; }
 182  .tag20 { font-size: 90%; }
 183  .tag30 { font-size: 100%; }
 184  .tag40 { font-size: 110%; }
 185  .tag50 { font-size: 120%; }
 186  .tag60 { font-size: 140%; }
 187  .tag70 { font-size: 150%; }
 188  .tag80 { font-size: 160%; }
 189  .tag90 { font-size: 170%; }
 190  .tag100 { font-size: 180%; }
 191  
 192  
 193  /* Post-content
 194  -------------------------------------------------------- */
 195  .post-content, .post-excerpt {
 196      padding: 4px 0 0 0;
 197      line-height: 1.5em;
 198      font-size: 1.2em;
 199  }
 200  
 201  .post-content p, .post-excerpt p { padding: 4px 0; }
 202  
 203  .post-content strong, .post-excerpt strong { font-size: 0.9em; }
 204  .post-content acronym, .post-excerpt acronym { cursor: help; border-bottom: 1px dashed #666; }
 205  
 206  .post-content pre, .post-excerpt pre {
 207      font: 1.1em 'courier new', courier, monospace;
 208      background: #F5F5F5;
 209      padding: 10px 5px;
 210      margin: 6px 0;
 211  }
 212  
 213  .post-content h3, .post-excerpt h3 { padding: 4px 0; font-size: 1.2em; color: #666; }
 214  .post-content h4, .post-excerpt h4 { padding: 4px 0; font-size: 1.1em; color: #666; }
 215  .post-content h5, .post-excerpt h5 { padding: 4px 0; font-size: 1.0em; color: #666; }
 216  
 217  .post-content ul, .post-excerpt ul { padding: 4px 0; margin: 0; }
 218      .post-content ul li, .post-excerpt ul li {
 219          padding: 1px 0 1px 10px;
 220          background: transparent url(img/li.png) no-repeat 0 5px;
 221      }
 222  .post-content ol, .post-excerpt ol { padding: 4px 0; margin: 0 0 0 28px; }
 223      .post-content ol li, .post-excerpt ol li { padding: 1px 0; }
 224  
 225  .post-content blockquote, .post-excerpt blockquote { border-left: 4px solid #CDCDCD; margin: 4px 0 4px 5px; padding: 0 5px; }
 226  .post-content blockquote em, .post-excerpt blockquote em {}
 227  
 228  /* Classes
 229  -------------------------------------------------------- */
 230  .day-date {
 231      color: #5E9E14;
 232      font-weight: bold;
 233      background: #F5F5F5;
 234      border: 1px solid #CDCDCD;
 235      border-width: 1px 0;
 236      text-align: right;
 237      padding: 5px 10px;
 238      margin: 0 0 10px 0;
 239      clear: left;
 240  }
 241  
 242  a.feed {}
 243  
 244  .post { color: #000; }
 245  
 246  .post-title { color: #666; padding: 10px 0 4px 0; font-size: 1.7em; }
 247      .post-title a:link, .post-title a:visited { color: #666; text-decoration: none; }
 248      .post-title a:hover { text-decoration: underline; }
 249  
 250  .post-info { font-style: italic; }
 251  
 252  .post-tags {
 253      position: relative;
 254      border: 0;
 255      background: #FBFBFB;
 256      padding: 5px;
 257      margin: 8px 0 0 0;
 258      overflow: hidden;
 259      height: 1%;
 260  }
 261      .post-tags:after{
 262          content:'[DO NOT LEAVE IT IS NOT REAL]';
 263          display: block;
 264          height: 0;
 265          clear: both;
 266          visibility: hidden;
 267      }
 268      .post-tags li { display: inline; }
 269          .post-tags li a:link, .post-tags li a:visited {
 270              color: #005D99;
 271              display: block;
 272              float: left;
 273              text-decoration: none;
 274              background: transparent url(img/tag.png) no-repeat 0 0;
 275              padding: 2px 8px 2px 18px;
 276              white-space: nowrap;
 277          }
 278          .post-tags li a:hover { text-decoration: underline; }
 279  
 280  .post-info-co {
 281      clear: left;
 282      border: 0;
 283      background: #FBFBFB;
 284      padding: 5px;
 285      margin: 0 0 26px 0;
 286  }
 287      .post-info-co a:link, .post-info-co a:visited {
 288          text-decoration: none;
 289          padding: 2px 10px 2px 18px;
 290      }
 291      .post-info-co a:hover { text-decoration: underline; }
 292      
 293      .comment_count {
 294          background: transparent url(img/commentaire.png) no-repeat 0 50%;
 295      }
 296      .ping_count {
 297          background: transparent url(img/retrolien.png) no-repeat 0 50%;
 298      }
 299      .attach_count {
 300          background: transparent url(img/attach.png) no-repeat 0 50%;
 301      }
 302  
 303  .read-it {
 304      font-weight: bold;
 305      padding: 0 0 10px 0;
 306      clear: left;
 307  }
 308  
 309  #attachments {
 310      clear: left;
 311      border: 1px solid #E8E8E8;
 312      border-width: 1px 0;
 313      background: #FBFBFB;
 314      padding: 5px;
 315      margin: 4px 0 6px 0;
 316  }
 317      #attachments * { color: #3C8FD1; }
 318      #attachments h3 { font-size: 1.2em; }
 319      #attachments ul { padding: 4px 0; }
 320      #attachments li {
 321          margin: 0 0 0.6em 0;
 322          padding: 2px 10px 2px 18px;
 323          background: transparent url(img/attach.png) no-repeat 0 50%;
 324      }
 325      #attachments li em {}
 326      #attachments li div {}
 327      #attachments li object {
 328         display: inline;
 329         margin: 0;
 330         padding: 0;
 331         vertical-align: bottom;
 332      }
 333  
 334  .footnotes {
 335      border: 1px solid #E8E8E8;
 336      padding: 5px 0;
 337      margin: 6px 0 25px 0;
 338  }
 339      .footnotes h4 {
 340          color: #005D99;
 341          background: #FBFBFB;
 342          border-bottom: 1px solid #E8E8E8;
 343          background: transparent url(img/report.png) no-repeat 4px 3px;
 344          padding: 2px 10px 2px 25px;
 345          margin: 0 0 6px 0;
 346          font-style: italic;
 347      }
 348      .footnotes p { padding: 4px 10px; }
 349  
 350  
 351  /* Archives
 352  -------------------------------------------------------- */
 353  #content-info {
 354      font-size: 0.8em;
 355      background: #F5F5F5;
 356      border: 1px solid #CDCDCD;
 357      border-width: 1px 0;
 358      padding: 5px 10px;
 359      margin: 0 0 20px 0;
 360      font-size: 1em;
 361      line-height: 1.4;
 362  }
 363  .content-inner { padding-bottom: 20px; }
 364  
 365  .content-inner h3 {
 366      font-size: 1em;
 367      color: #5E9E14;
 368      background: #F5F5F5;
 369      border: 1px solid #CDCDCD;
 370      border-width: 1px 0;
 371      padding: 5px 10px;
 372      margin: 10px 0;
 373  }
 374  
 375  #content-info h2 { font-size: 1.4em; }
 376  #content-info p { padding: 4px 0; font-size: 1em; }
 377  
 378  #content-info p a.feed:link, #content-info p a.feed:visited {
 379      padding: 4px 0 4px 22px;
 380      background: transparent url(img/rss.png) no-repeat 1px 3px;
 381  }
 382  #content-info p a.feed:hover {}
 383  
 384  .content-inner .day-date { text-align: left; }
 385  .content-inner .post-title { padding: 4px 0; margin: 0 0 0 10px; }
 386  .content-inner .post-info { margin: 4px 0 20px 10px; }
 387  
 388  .content-inner ul { padding: 4px 0; margin: 0 0 0 10px; }
 389      .content-inner ul li {
 390          padding: 1px 0 1px 10px;
 391          background: transparent url(img/li.png) no-repeat 0 5px;
 392          font-size: 1em;
 393          line-height: 1.3;
 394      }
 395  
 396  /* Tags - Page des tags
 397  -------------------------------------------------------- */
 398  
 399  .content-inner ul.tags {
 400      position: relative;
 401      border: 1px solid #E8E8E8;
 402      border-width: 1px 0;
 403      background: #FBFBFB;
 404      padding: 5px;
 405      margin: 8px 0 20px 0;
 406      overflow: hidden;
 407      height: 1%;
 408      font-size: 120%;
 409  }
 410      .content-inner ul.tags:after{
 411          content:'[DO NOT LEAVE IT IS NOT REAL]';
 412          display: block;
 413          height: 0;
 414          clear: both;
 415          visibility: hidden;
 416      }
 417      .content-inner ul.tags li {
 418          /* display: inline; */
 419          display: block;
 420          float: left;
 421          margin: 4px;
 422          height: 18px;
 423          line-height: 18px;
 424          background: none;
 425      }
 426          .content-inner ul.tags li a:link, .content-inner ul.tags li a:visited {
 427              color: #005D99;
 428              text-decoration: none;
 429              white-space: nowrap;
 430          }
 431          .content-inner ul.tags li a:hover { text-decoration: underline; }
 432          .content-inner ul.tags li a:focus, .content-inner ul.tags li a:active { background: #005D99; color: #FFF; }
 433  
 434  
 435  
 436  /* Commentaires
 437  -------------------------------------------------------- */
 438  #comments, #pings { padding-top: 10px; }
 439      #comments h3, #pings h3, #comments-feed, #pr h3 {
 440          clear: left;
 441          border: 1px solid #E8E8E8;
 442          border-width: 1px 0;
 443          background: #FBFBFB;
 444          padding: 5px;
 445          margin: 20px 0 8px 0;
 446          font-size: 1.2em;
 447      }
 448      #pr h3 { color: #5E9E14; margin: 30px 0 8px 0; }
 449      
 450      #comments-feed { text-align: right; font-weight: bold; margin: 14px 0 8px 0; }
 451          #comments-feed a:link, #comments-feed a:visited {
 452              font-size: 0.8em;
 453              text-decoration: none;
 454              background: transparent url(img/rss.png) no-repeat 0px 50%;
 455              padding: 3px 0 3px 22px;
 456          }
 457          #comments-feed a:hover { text-decoration: underline; }
 458  
 459  #comments dl{}
 460  
 461  #comments dt, #pings dt {
 462      position: relative;
 463      top: 1px;
 464      display: block;
 465      padding: 10px 0 30px 0;
 466      background: transparent url(img/commentaire_bulle.png) no-repeat 50% 100%;
 467  }
 468      #comments dt a:link, #comments dt a:visited { color: #3C8FD1; text-decoration: none; }
 469      #comments dt a:hover { text-decoration: underline; }
 470      #pings dt a:link, #pings dt a:visited { color: #3C8FD1; text-decoration: none; }
 471      #pings dt a:hover { text-decoration: underline; }
 472  
 473      #comments dd, #pings dd, dd.comment-preview {
 474          border: 1px solid #E8E8E8;
 475          border-width: 1px 0;
 476          background: #F5F5F5;
 477          padding: 10px;
 478          margin: 0 0 8px 0;
 479          font-size: 1.1em;
 480          line-height: 1.4;
 481      }
 482      #comments dd *, #pings dd *, dd.comment-preview * { padding: 5px 0; font-size: 1em; }
 483  
 484      #comments dt.me a:link, #comments dt.me a:visited, #comments dt.me a:hover { color: #5E9E14; }
 485      #comments dd.me { border-left: 4px solid #5E9E14; }
 486  
 487      .comment-number, .ping-number {
 488          color: #3C8FD1;
 489          font-weight: bold;
 490          font-size: 1.4em;
 491      }
 492  
 493  #ping-url {
 494      border: 1px solid #E8E8E8;
 495      border-width: 1px 0;
 496      background: #FBFBFB;
 497      padding: 5px;
 498      margin: 30px 0;
 499      font-weight: bold;
 500      text-align: right;
 501  }
 502  
 503  
 504  .error {
 505      border: 2px solid red;
 506      padding: 10px 5px;
 507      margin: 20px 0 0 0;
 508      background: #FFCCCC;
 509      font-weight: bold;
 510  }
 511  
 512  .message {}
 513  
 514  .pagination {
 515      clear: left;
 516      border: 1px solid #CDCDCD;
 517      border-width: 1px 0;
 518      background: #F5F5F5;
 519      padding: 5px;
 520      margin: 0 0 30px 0;
 521      text-align: center;
 522      color: #5E9E14;
 523      font-weight: bold;
 524  }
 525      .pagination a:link, .pagination a:visited { color: #5E9E14; text-decoration: none; }
 526      .pagination a:hover { text-decoration: underline; }
 527  
 528  #navlinks {
 529      border: 1px solid #CDCDCD;
 530      border-width: 1px 0;
 531      background: #F5F5F5;
 532      padding: 5px;
 533      margin: 0 0 20px 0;
 534      text-align: center;
 535      color: #5E9E14;
 536      font-weight: bold;
 537  }
 538      #navlinks a:link, #navlinks a:visited { color: #5E9E14; text-decoration: none; }
 539      #navlinks a:hover { text-decoration: underline; }
 540  
 541  /* Forms
 542  -------------------------------------------------------- */
 543  #comment-form { padding-top: 10px; }
 544  
 545  #comment-form h3 {
 546      border: 1px solid #E8E8E8;
 547      border-width: 1px 0;
 548      background: #FBFBFB;
 549      padding: 5px;
 550      margin: 20px 0 8px 0;
 551      font-size: 1.2em;
 552  }
 553  
 554  #comment-form fieldset p { padding: 5px 0; /*margin: 0 0 0 30%;*/ }
 555  #comment-form fieldset p.field { padding: 5px 0; width: auto; margin: 0; clear: left; }
 556  #comment-form p.form-help { width: 60%; margin: 0 0 0 30%; font-style: italic; }
 557  
 558  #comment-form p label { width: auto; }
 559  #comment-form p.field label {
 560      font-weight: bold;
 561      display: block;
 562      padding: 0 4px 4px 0;
 563      width: 29%;
 564      float: left;
 565      text-align: right;
 566  }
 567  #comment-form input, #comment-form textarea {
 568      font: 1em Arial,sans-serif;
 569      color: #005D99;
 570      border: 1px solid #CDCDCD;
 571      padding: 1px 2px;
 572      font-size: 1em;    
 573      width: 60%;
 574  }
 575  
 576  #comment-form input#c_remember {
 577      width: auto;
 578      border: 0;
 579      margin: 0 5px 0 140px;
 580  }
 581  #comment-form input.preview { margin-left: 134px; }
 582  #comment-form input.preview, #comment-form input.submit {
 583      width: auto;
 584      color: #005D99;
 585      background: #FFF;
 586      font-size: 1em;
 587      font-weight: bold;
 588      text-transform: uppercase;
 589      border: 1px solid #FFF;
 590  }
 591  #comment-form input.preview:hover, #comment-form input.submit:hover { background: #005D99; color: #FFF; border: 1px solid #005D99; }
 592  
 593  
 594  /* Footer
 595  -------------------------------------------------------- */
 596  #footer {
 597      width: 820px;
 598      background: transparent url(img/footer.png) no-repeat center bottom;
 599      padding: 0 0 14px 0;
 600      clear: both;
 601  }
 602      #footer p {
 603          width: 784px;
 604          margin: 0 auto;
 605          background: #606666;
 606          color: #FFF;
 607          padding: 6px 16px 6px 0;
 608          text-align: right;
 609          font-weight: bold;
 610      }
 611          #footer p a:link, #footer p a:visited { color: #FFF; text-decoration: underline; }
 612          #footer p a:hover { text-decoration: none; }