website annotate slitaz.css @ rev 715

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