website annotate slitaz.css @ rev 710

Huge change to the CSS file with new nav and footer
author Christophe Lincoln <pankso@slitaz.org>
date Thu Jan 06 15:49:44 2011 +0100 (2011-01-06)
parents c7bd8b28228e
children 18040398d744
rev   line source
pankso@1 1 /*
pankso@1 2 CSS style for SliTaz GNU/Linux website
pankso@707 3 www.slitaz.org - (c) 2011 Pankso
pankso@1 4 */
pankso@1 5
pankso@555 6 html {
pankso@710 7 min-height: 102%;
pankso@555 8 }
pankso@555 9
pankso@1 10 body {
pankso@555 11 background: #ffffff;
pankso@1 12 color: black;
pankso@1 13 font: 13px sans-serif, vernada, arial;
pankso@1 14 margin: 0;
pankso@697 15 border-top: 34px solid #f1f1f1;
pankso@1 16 }
pankso@1 17
pankso@1 18 /* Accessibility */
pankso@1 19
pankso@1 20 #access {
pankso@1 21 position: absolute;
pankso@697 22 top: 4px;
pankso@693 23 right: 0px;
pankso@1 24 text-align: right;
pankso@693 25 width: auto;
pankso@1 26 margin: 0;
pankso@693 27 padding: 4px 4px 4px 20px;
pankso@555 28 font-size: 11px;
pankso@1 29 font-weight: bold;
pankso@1 30 }
pankso@1 31
pankso@1 32 #access a {
pankso@697 33 background: transparent;
pankso@697 34 color: #0F314E;
pankso@1 35 text-decoration: none;
pankso@1 36 }
pankso@1 37
pankso@1 38 #access a:hover {
pankso@1 39 background: inherit;
pankso@697 40 color: #b64b22;
pankso@1 41 }
pankso@1 42
pankso@1 43 /* Header and title */
pankso@1 44
pankso@710 45 #header {
pankso@697 46 /*background: #f0ba08 url(pics/website/header.png) repeat-x top;*/
paul@705 47 background: #351a0a url(pics/website/header-img.png) no-repeat top right;
pankso@1 48 color: black;
pankso@1 49 width: 100%;
pankso@697 50 height: 42px;
pankso@1 51 border-top: 1px solid black;
pankso@710 52 border-bottom: 1px solid #999;
pankso@710 53 margin-bottom: 33px;
pankso@1 54 }
pankso@1 55
pankso@555 56 #titre {
pankso@555 57 position: absolute;
pankso@697 58 font-size: 14px;
pankso@1 59 font-weight: bolder ;
pankso@697 60 left: 180px;
pankso@697 61 top: 4px;
pankso@1 62 }
pankso@1 63
pankso@1 64 #logo {
pankso@1 65 position: absolute;
pankso@1 66 float: left;
pankso@697 67 left: 16px;
pankso@697 68 top: -10px;
pankso@707 69 width: 200px;
pankso@707 70 height: 74px;
pankso@1 71 }
pankso@1 72
pankso@710 73 /* Side bar Navigation */
pankso@1 74
pankso@1 75 #nav {
pankso@1 76 position: absolute;
pankso@697 77 top: 102px;
pankso@565 78 right: 80px;
pankso@555 79 color: #555555;
pankso@1 80 float: right;
pankso@555 81 width: 250px;
pankso@563 82 line-height: 1.5em;
pankso@1 83 text-align: left;
pankso@555 84 font-size: 12px;
pankso@1 85 }
pankso@1 86
pankso@555 87 #nav .nav_box ul {
pankso@1 88 list-style-type: none;
pankso@555 89 margin: 0;
pankso@555 90 padding: 10px 24px 10px 0px;
pankso@694 91 background-color: inherit;
pankso@1 92 }
pankso@1 93
pankso@1 94 #nav li {
pankso@1 95 display: inline;
pankso@1 96 }
pankso@1 97
pankso@555 98 #nav h4 {
pankso@693 99 font-size: 120%;
pankso@555 100 color: #666666;
pankso@555 101 font-weight: bold;
pankso@555 102 margin: 0;
pankso@555 103 padding: 0 0 1px 0;
pankso@555 104 border-bottom: 1px solid #cecece;
pankso@555 105 }
pankso@555 106
pankso@1 107 #nav a {
pankso@555 108 color: #0F314E;
pankso@1 109 background: inherit;
pankso@1 110 display: block;
pankso@1 111 text-decoration: none;
pankso@555 112 font-weight: bold;
pankso@1 113 }
pankso@1 114
pankso@1 115 #nav a:hover {
pankso@697 116 color: #b64b22;
pankso@1 117 text-decoration: none;
pankso@1 118 display: block;
pankso@1 119 }
pankso@1 120
pankso@694 121 #nav ul {
pankso@694 122 -moz-border-radius: 8px;
pankso@694 123 -webkit-border-radius: 8px;
pankso@710 124 border-radius: 8px;
pankso@694 125 list-style-type: none;
pankso@694 126 margin: 10px 0;
pankso@694 127 padding: 10px 24px 10px 24px;
pankso@694 128 background-color: #eaeaea;
pankso@694 129 }
pankso@694 130
pankso@694 131 .nav_box {
pankso@555 132 margin: 10px 0;
pankso@555 133 padding: 10px 24px 10px 24px;
pankso@555 134 background-color: #eaeaea;
pankso@555 135 text-align: justify;
pankso@693 136 -moz-border-radius: 8px;
pankso@693 137 -webkit-border-radius: 8px;
pankso@693 138 border-radius: 8px;
pankso@693 139 -moz-box-shadow: 0 1px 3px #666;
pankso@693 140 -webkit-box-shadow: 0 1px 3px #666;
pankso@693 141 box-shadow: 0 1px 3px #666;
pankso@693 142 /* CSS3 transition */
pankso@693 143 -webkit-transition-property: background-color;
pankso@698 144 -webkit-transition-duration: 2s;
pankso@693 145 -moz-transition-property: background-color;
pankso@693 146 -moz-transition-duration: 2s;
pankso@693 147 transition-property: background-color;
pankso@693 148 transition-duration: 2s;
pankso@555 149 }
pankso@555 150
pankso@694 151 .nav_box:hover { background-color: #f8f8f8; }
pankso@693 152
pankso@563 153 #nav .nav_box p {
pankso@563 154 line-height: 1.3em;
pankso@563 155 }
pankso@563 156
pankso@555 157 #nav .nav_box p a {
pankso@555 158 display: inline;
pankso@555 159 font-weight: normal;
pankso@555 160 text-decoration: underline;
pankso@555 161 }
pankso@555 162
pankso@555 163 #nav .nav_box p a:hover {
pankso@555 164 text-decoration: none;
pankso@555 165 color: blue;
pankso@555 166 background: inherit;
pankso@555 167 }
pankso@555 168
pankso@1 169 /* Page content */
pankso@1 170
pankso@693 171 #content {
pankso@1 172 background: white;
pankso@1 173 color: black;
pankso@1 174 text-align: justify;
pankso@1 175 height: auto;
pankso@565 176 margin: 6px 320px 0px 0px;
pankso@565 177 padding: 0px 40px 60px 80px;
pankso@1 178 }
pankso@1 179
pankso@693 180 #content-full {
pankso@693 181 background: white;
pankso@693 182 color: black;
pankso@693 183 text-align: justify;
pankso@693 184 height: auto;
pankso@710 185 margin: 0;
pankso@710 186 padding: 0px 80px 40px 80px;
pankso@693 187 }
pankso@693 188
pankso@693 189 #content li, #content-full li {
pankso@1 190 line-height: 1.5em;
pankso@1 191 text-align: left;
pankso@1 192 }
pankso@1 193
pankso@1 194 #news li {
pankso@1 195 list-style-type: square;
pankso@1 196 border-bottom: 1px dotted #BEBEBE;
pankso@1 197 margin-left: -25px;
pankso@1 198 padding: 4px 0px 4px 0px;
pankso@1 199 }
pankso@375 200
pankso@678 201 #news a {
pankso@678 202 text-decoration: none;
pankso@678 203 }
pankso@678 204
pankso@1 205 #gallery {
pankso@1 206 text-align: center;
pankso@1 207 }
pankso@375 208
pankso@286 209 #gallery table {
pankso@286 210 margin: 30px 0px 30px 0px;
pankso@286 211 }
pankso@1 212
pankso@710 213 /* Box and block. */
pankso@710 214
pankso@710 215 .infobox {
pankso@710 216 margin: 10px 60px;
pankso@710 217 padding: 12px;
pankso@710 218 background: #f8f8f8;
pankso@710 219 }
pankso@710 220
pankso@710 221 .infobox img { vertical-align: middle; }
pankso@710 222 .infobox:hover { background-color: #f2b21d; }
pankso@710 223
pankso@710 224 .block {
pankso@710 225 /*padding-bottom: 35%;*/
pankso@710 226 color: black;
pankso@710 227 min-height: 200px;
pankso@710 228 margin-bottom: 40px;
pankso@710 229 }
pankso@710 230
pankso@710 231 .block ul {
pankso@710 232 list-style-type: none;
pankso@710 233 margin: 0;
pankso@710 234 padding: 0 20px;
pankso@710 235 }
pankso@710 236
pankso@710 237 .block_left {
pankso@710 238 width: 46%;
pankso@710 239 float: left;
pankso@710 240 background-color: #eaeaea;
pankso@710 241 margin: 4px 2px;
pankso@710 242 padding: 0 10px 10px 10px;
pankso@710 243 }
pankso@710 244
pankso@710 245 .block_right {
pankso@710 246 width: 46%;
pankso@710 247 float: right;
pankso@710 248 background-color: #eaeaea;
pankso@710 249 margin: 4px 2px;
pankso@710 250 padding: 0 10px 10px 10px;
pankso@710 251 }
pankso@710 252
pankso@710 253 #block_top {
pankso@710 254 color: black;
pankso@710 255 background-color: #eaeaea;
pankso@710 256 min-height: 180px;
pankso@710 257 margin-bottom: 40px;
pankso@710 258 margin-right: 340px;
pankso@710 259 padding: 0 10px;
pankso@710 260 }
pankso@710 261
pankso@710 262 #block_nav {
pankso@710 263 width: 300px;
pankso@710 264 min-height: 180px;
pankso@710 265 float: right;
pankso@710 266 background-color: #eaeaea;
pankso@710 267 margin: 0;
pankso@710 268 padding: 0 10px;
pankso@710 269 }
pankso@710 270
pankso@710 271 .infobox, .block_left, .block_right, #block_top, #block_nav, #footer {
pankso@710 272 -moz-border-radius: 8px;
pankso@710 273 -webkit-border-radius: 8px;
pankso@710 274 border-radius: 8px;
pankso@710 275 -moz-box-shadow: 0 1px 3px #666;
pankso@710 276 -webkit-box-shadow: 0 1px 3px #666;
pankso@710 277 box-shadow: 0 1px 3px #666;
pankso@710 278 /* CSS3 transition */
pankso@710 279 -webkit-transition-property: background-color;
pankso@710 280 -webkit-transition-duration: 2s;
pankso@710 281 -moz-transition-property: background-color;
pankso@710 282 -moz-transition-duration: 2s;
pankso@710 283 transition-property: background-color;
pankso@710 284 transition-duration: 2s;
pankso@710 285 }
pankso@710 286
pankso@710 287 #block_nav {
pankso@710 288 font-weight: bold;
pankso@710 289 }
pankso@710 290
pankso@710 291 #block_nav a {
pankso@710 292 text-decoration: none;
pankso@710 293 }
pankso@710 294
pankso@710 295 #block_nav li a:hover {
pankso@710 296 color: #b64b22;
pankso@710 297 }
pankso@710 298
pankso@710 299 #block_nav ul {
pankso@710 300 margin: 0;
pankso@710 301 list-style-type: none;
pankso@710 302 }
pankso@710 303
pankso@710 304 #block_nav h3 {
pankso@710 305 font-size: 110%;
pankso@710 306 }
pankso@710 307
pankso@710 308 .block_left:hover, .block_right:hover, #block_top:hover,
pankso@710 309 #block_nav:hover, #footer:hover {
pankso@710 310 background-color: #f8f8f8;
pankso@710 311 }
pankso@710 312
pankso@710 313 .right_box {
pankso@710 314 width: 50%;
pankso@710 315 float: right;
pankso@710 316 }
pankso@710 317
pankso@710 318 /* Button */
pankso@710 319
pankso@710 320 .button { margin-left: 20px; }
pankso@710 321
pankso@710 322 .button a {
pankso@710 323 background-color: #b64b22;
pankso@710 324 color: #ffffff;
pankso@710 325 margin-right: 6px;
pankso@710 326 padding: 6px 10px;
pankso@710 327 font-size: 14px;
pankso@710 328 -moz-border-radius: 4px;
pankso@710 329 -webkit-border-radius: 4px;
pankso@710 330 border-radius: 4px;
pankso@710 331 -moz-box-shadow: 0 1px 3px #666;
pankso@710 332 -webkit-box-shadow: 0 1px 3px #666;
pankso@710 333 box-shadow: 0 1px 3px #666;
pankso@710 334 }
pankso@710 335
pankso@710 336 .button a:hover {
pankso@710 337 background-color: #a3431f;
pankso@710 338 color: #ffffff;
pankso@710 339 }
pankso@710 340
pankso@375 341 /* Clouds */
pankso@375 342
pankso@375 343 #cloud {
pankso@375 344 padding: 20px 0px 20px 0px;
pankso@375 345 line-height: 3em;
pankso@375 346 text-align: center;
pankso@375 347 }
pankso@375 348 #cloud a { padding: 4px; color: #956411; }
pankso@375 349 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
pankso@375 350 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
pankso@375 351 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
pankso@375 352 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
pankso@375 353 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
pankso@375 354 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
pankso@375 355 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
pankso@375 356 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
pankso@375 357 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
pankso@375 358 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
pankso@375 359
pankso@710 360 /* Slideshow. */
pankso@1 361
pankso@710 362 #slideshow
pankso@710 363 {
pankso@710 364 overflow: hidden;
pankso@710 365 margin: 10px auto 10px;
pankso@710 366 position: relative;
pankso@710 367 width: 260px;
pankso@710 368 height: 163px;
pankso@710 369 }
pankso@710 370
pankso@710 371 #slideshow img
pankso@710 372 {
pankso@710 373 border: 0;
pankso@710 374 width: 260px;
pankso@710 375 height: 163px;
pankso@710 376 }
pankso@710 377
pankso@710 378 #twitter {
pankso@710 379 margin-top: 20px;
pankso@555 380 -moz-border-radius: 8px;
pankso@555 381 -webkit-border-radius: 8px;
pankso@693 382 border-radius: 8px;
pankso@693 383 -moz-box-shadow: 0 1px 3px #666;
pankso@693 384 -webkit-box-shadow: 0 1px 3px #666;
pankso@693 385 box-shadow: 0 1px 3px #666;
pankso@693 386 }
pankso@693 387
pankso@1 388 /* HTML styles */
pankso@1 389
pankso@1 390 h1 {
pankso@697 391 color: #444444;
pankso@710 392 background: transparent;
pankso@1 393 text-align: left;
pankso@700 394 margin: 0px 0px 4px 0px;
pankso@697 395 font-size: 150%;
pankso@555 396 font-weight: bold;
pankso@710 397 padding: 5px 0 0 10px;
pankso@1 398 }
pankso@1 399
pankso@1 400 h2 {
pankso@697 401 color: #b64b22;
pankso@697 402 padding: 0;
pankso@710 403 margin: 20px 0 0 0;
pankso@697 404 font-size: 130%;
pankso@555 405 font-weight: bold;
pankso@1 406 }
pankso@1 407
pankso@1 408 h3 {
pankso@1 409 font-weight: bold;
pankso@710 410 color: #666666;
pankso@697 411 background: transparent;
pankso@1 412 }
pankso@707 413
pankso@707 414 h3 img {
pankso@707 415 vertical-align: middle;
pankso@707 416 width: 20px;
pankso@707 417 height: 20px;
pankso@710 418 padding-right: 4px;
pankso@707 419 }
pankso@1 420
pankso@1 421 a {
pankso@1 422 text-decoration: underline;
pankso@710 423 color: #103A5E;
pankso@1 424 background: inherit;
pankso@1 425 }
pankso@1 426
pankso@1 427 a:hover {
pankso@1 428 text-decoration: none;
pankso@1 429 color: blue;
pankso@1 430 background: inherit;
pankso@1 431 }
pankso@1 432
pankso@1 433 code {
pankso@1 434 font-size: 12px;
pankso@1 435 color: #669900;
pankso@1 436 background: inherit;
pankso@1 437 }
pankso@1 438
pankso@1 439 tt {
pankso@1 440 color: #15EE15;
pankso@1 441 background: inherit;
pankso@1 442 }
pankso@1 443
pankso@1 444 img {
pankso@1 445 border: 0pt none;
pankso@1 446 }
pankso@1 447
pankso@1 448 fieldset {
pankso@555 449 background: #E2ECf6;
pankso@1 450 color: black;
pankso@1 451 margin-top: 25px;
pankso@1 452 border: 1px solid black;
pankso@1 453 }
pankso@1 454
pankso@1 455 legend {
pankso@1 456 border: 1px solid black;
pankso@1 457 color: #6c0023;
pankso@1 458 background: #eaeaea;
pankso@1 459 font-weight: bold;
pankso@1 460 }
pankso@1 461
pankso@1 462 pre {
pankso@1 463 padding: 5px;
pankso@1 464 color: black;
pankso@1 465 background: #E1E0B0;
pankso@1 466 }
pankso@1 467
pankso@1 468 pre.script {
pankso@1 469 padding: 10px;
pankso@1 470 color: black;
pankso@1 471 background: #E8E8E8;
pankso@1 472 border: 1px inset #606060;
pankso@1 473 }
pankso@1 474
pankso@555 475 textarea {
pankso@555 476 background: #E5E5E5;
pankso@555 477 margin-top: 12px;
pankso@555 478 }
pankso@555 479
pankso@1 480 /* Packages pages */
pankso@1 481
pankso@1 482 .pkg_nav {
pankso@1 483 border-top: 1px solid black;
pankso@1 484 margin-top: 10px;
pankso@1 485 padding-top: 10px;
pankso@1 486 }
pankso@1 487
pankso@1 488 pre.package {
pankso@1 489 padding: 0px;
pankso@1 490 color: black;
pankso@1 491 background: white;
pankso@1 492 }
pankso@1 493
pankso@1 494 p.get {
pankso@1 495 text-align: center;
pankso@1 496 padding: 10px;
pankso@1 497 color: black;
pankso@1 498 background: #F3F3F3;
pankso@1 499 border: 1px solid #DEDEDE;
pankso@1 500 }
pascal@669 501
pascal@669 502 .year:after {
pankso@707 503 /* content: "2007-2011"; */
pascal@706 504 content: "2011";
pascal@669 505 }
pankso@710 506
pankso@710 507 /* Footer */
pankso@710 508
pankso@710 509 #footer {
pankso@710 510 margin: 0px 80px 80px 80px;
pankso@710 511 padding: 10px;
pankso@710 512 background: #eaeaea;
pankso@710 513 color: #666666;
pankso@710 514 height: 180px;
pankso@710 515 border-radius: 8px;
pankso@710 516 -moz-border-radius: 8px;
pankso@710 517 -webkit-border-radius: 8px;
pankso@710 518 -moz-box-shadow: 0 1px 3px #666;
pankso@710 519 -webkit-box-shadow: 0 1px 3px #666;
pankso@710 520 box-shadow: 0 1px 3px #666;
pankso@710 521 }
pankso@710 522 #footer a {
pankso@710 523 background: inherit;
pankso@710 524 color: #666666;
pankso@710 525 }
pankso@710 526 #footer a:hover {
pankso@710 527 background: inherit;
pankso@710 528 color: #333333;
pankso@710 529 }
pankso@710 530 #footer ul {
pankso@710 531 list-style-type: none;
pankso@710 532 }
pankso@710 533 #footer li {
pankso@710 534 padding: 2px;
pankso@710 535 }
pankso@710 536 #footer h4 {
pankso@710 537 margin: 0 20px;
pankso@710 538 font-size: 125%;
pankso@710 539 }