website annotate slitaz.css @ rev 737

smal CSS change
author Christophe Lincoln <pankso@slitaz.org>
date Fri Jan 14 07:52:11 2011 +0100 (2011-01-14)
parents 48f6aaf46e92
children f98ea66e8523
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@724 319 .floor {
pankso@724 320 color: #999999;
pankso@724 321 font-size: 20px;
pankso@724 322 -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
pankso@724 323 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
pankso@724 324 -o-transform: rotate(-45deg) skew(15deg, 15deg);
pankso@724 325 -ms-transform: rotate(-45deg) skew(15deg, 15deg);
pankso@724 326 transform: rotate(-45deg) skew(15deg, 15deg);
pankso@724 327 }
pankso@731 328
pankso@731 329 #twitter, .feedbox {
pankso@731 330 margin-top: 20px;
pankso@731 331 -moz-border-radius: 8px;
pankso@731 332 -webkit-border-radius: 8px;
pankso@731 333 border-radius: 8px;
pankso@731 334 -moz-box-shadow: 0 1px 3px #666;
pankso@731 335 -webkit-box-shadow: 0 1px 3px #666;
pankso@731 336 box-shadow: 0 1px 3px #666;
pankso@731 337 }
pankso@731 338
pankso@731 339 .feedbox {
pankso@731 340 background-color: #f9f9f9;
pankso@731 341 padding: 10px 20px;
pankso@731 342 margin: 20px 100px;
pankso@731 343 }
pankso@731 344
pankso@731 345 .feedbox div {
pankso@731 346 height: 320px;
pankso@731 347 overflow: auto;
pankso@731 348 }
pankso@731 349
pankso@731 350 .feedbox ul { list-style-type: none; margin: 0; }
pankso@731 351
pankso@710 352 /* Button */
pankso@710 353
pankso@710 354 .button { margin-left: 20px; }
pankso@710 355
pankso@710 356 .button a {
pankso@710 357 background-color: #b64b22;
pankso@710 358 color: #ffffff;
pankso@710 359 margin-right: 6px;
pankso@710 360 padding: 6px 10px;
pankso@710 361 font-size: 14px;
pankso@710 362 -moz-border-radius: 4px;
pankso@710 363 -webkit-border-radius: 4px;
pankso@710 364 border-radius: 4px;
pankso@710 365 -moz-box-shadow: 0 1px 3px #666;
pankso@710 366 -webkit-box-shadow: 0 1px 3px #666;
pankso@710 367 box-shadow: 0 1px 3px #666;
pankso@710 368 }
pankso@710 369
pankso@715 370 .button a:hover, input[type=submit]:hover {
pankso@710 371 background-color: #a3431f;
pankso@710 372 color: #ffffff;
pankso@710 373 }
pankso@710 374
pankso@715 375 input[type=submit] {
pankso@715 376 border: 1px solid #b64b22;
pankso@715 377 background-color: #b64b22;
pankso@715 378 color: white;
pankso@715 379 font-weight: bold;
pankso@715 380 cursor: pointer;
pankso@736 381 padding: 3px 10px;
pankso@715 382 font-size: 14px;
pankso@715 383 -moz-border-radius: 2px;
pankso@715 384 -webkit-border-radius: 2px;
pankso@715 385 border-radius: 2px;
pankso@721 386 -moz-box-shadow: 0 0 5px #666;
pankso@721 387 -webkit-box-shadow: 0 0 5px#666;
pankso@721 388 box-shadow: 0 0 5px #666;
pankso@734 389 margin-left: -5px;
pankso@715 390 }
pankso@715 391
pankso@715 392 input[type=text] {
pankso@715 393 border: 1px solid #333333;
pankso@737 394 padding: 3px;
pankso@737 395 width: 100%;
pankso@715 396 }
pankso@715 397
pankso@375 398 /* Clouds */
pankso@375 399
pankso@375 400 #cloud {
pankso@724 401 padding: 10px 0px;
pankso@375 402 line-height: 3em;
pankso@375 403 text-align: center;
pankso@375 404 }
pankso@729 405 #cloud a { padding: 0 2px; color: #444444; }
pankso@375 406 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
pankso@375 407 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
pankso@375 408 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
pankso@375 409 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
pankso@375 410 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
pankso@375 411 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
pankso@375 412 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
pankso@375 413 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
pankso@375 414 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
pankso@375 415 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
pankso@375 416
pankso@710 417 /* Slideshow. */
pankso@1 418
pankso@710 419 #slideshow
pankso@710 420 {
pankso@710 421 overflow: hidden;
pankso@710 422 margin: 10px auto 10px;
pankso@710 423 position: relative;
pankso@710 424 width: 260px;
pankso@710 425 height: 163px;
pankso@710 426 }
pankso@710 427
pankso@710 428 #slideshow img
pankso@710 429 {
pankso@710 430 border: 0;
pankso@710 431 width: 260px;
pankso@710 432 height: 163px;
pankso@710 433 }
pankso@710 434
pankso@1 435 /* HTML styles */
pankso@1 436
pankso@1 437 h1 {
pankso@697 438 color: #444444;
pankso@710 439 background: transparent;
pankso@1 440 text-align: left;
pankso@700 441 margin: 0px 0px 4px 0px;
pankso@697 442 font-size: 150%;
pankso@555 443 font-weight: bold;
pankso@710 444 padding: 5px 0 0 10px;
pankso@1 445 }
pankso@1 446
pankso@1 447 h2 {
pankso@697 448 color: #b64b22;
pankso@697 449 padding: 0;
pankso@710 450 margin: 20px 0 0 0;
pankso@697 451 font-size: 130%;
pankso@555 452 font-weight: bold;
pankso@1 453 }
pankso@1 454
pankso@1 455 h3 {
pankso@1 456 font-weight: bold;
pankso@710 457 color: #666666;
pankso@697 458 background: transparent;
pankso@1 459 }
pankso@707 460
pankso@732 461 h3 img, h2 img {
pankso@707 462 vertical-align: middle;
pankso@707 463 width: 20px;
pankso@707 464 height: 20px;
pankso@710 465 padding-right: 4px;
pankso@707 466 }
pankso@1 467
pankso@1 468 a {
pankso@1 469 text-decoration: underline;
pankso@710 470 color: #103A5E;
pankso@1 471 background: inherit;
pankso@1 472 }
pankso@1 473
pankso@1 474 a:hover {
pankso@1 475 text-decoration: none;
pankso@1 476 color: blue;
pankso@1 477 background: inherit;
pankso@1 478 }
pankso@1 479
pankso@1 480 code {
pankso@1 481 font-size: 12px;
pankso@1 482 color: #669900;
pankso@1 483 background: inherit;
pankso@1 484 }
pankso@1 485
pankso@1 486 tt {
pankso@1 487 color: #15EE15;
pankso@1 488 background: inherit;
pankso@1 489 }
pankso@1 490
pankso@1 491 img {
pankso@1 492 border: 0pt none;
pankso@1 493 }
pankso@1 494
pankso@1 495 fieldset {
pankso@555 496 background: #E2ECf6;
pankso@1 497 color: black;
pankso@1 498 margin-top: 25px;
pankso@1 499 border: 1px solid black;
pankso@1 500 }
pankso@1 501
pankso@1 502 legend {
pankso@1 503 border: 1px solid black;
pankso@1 504 color: #6c0023;
pankso@1 505 background: #eaeaea;
pankso@1 506 font-weight: bold;
pankso@1 507 }
pankso@1 508
pankso@1 509 pre {
pankso@1 510 padding: 5px;
pankso@1 511 color: black;
pankso@1 512 background: #E1E0B0;
pankso@1 513 }
pankso@1 514
pankso@1 515 pre.script {
pankso@1 516 padding: 10px;
pankso@1 517 color: black;
pankso@1 518 background: #E8E8E8;
pankso@1 519 border: 1px inset #606060;
pankso@1 520 }
pankso@1 521
pankso@555 522 textarea {
pankso@555 523 background: #E5E5E5;
pankso@555 524 margin-top: 12px;
pankso@555 525 }
pankso@555 526
pankso@1 527 /* Packages pages */
pankso@1 528
pankso@1 529 .pkg_nav {
pankso@1 530 border-top: 1px solid black;
pankso@1 531 margin-top: 10px;
pankso@1 532 padding-top: 10px;
pankso@1 533 }
pankso@1 534
pankso@1 535 pre.package {
pankso@1 536 padding: 0px;
pankso@1 537 color: black;
pankso@1 538 background: white;
pankso@1 539 }
pankso@1 540
pankso@1 541 p.get {
pankso@1 542 text-align: center;
pankso@1 543 padding: 10px;
pankso@1 544 color: black;
pankso@1 545 background: #F3F3F3;
pankso@1 546 border: 1px solid #DEDEDE;
pankso@714 547 border-radius: 4px;
pankso@714 548 -moz-border-radius: 4px;
pankso@714 549 -webkit-border-radius: 4px;
pankso@714 550 }
pankso@714 551
pankso@714 552 p.get a {
pankso@714 553 font-weight: bold;
pankso@714 554 text-decoration: none;
pankso@1 555 }
pascal@669 556
pankso@715 557 .pkgs-search {
pankso@715 558 text-align: center;
pankso@715 559 padding: 40px 20px 80px 20px;
pankso@715 560 }
pankso@715 561
pascal@669 562 .year:after {
pankso@707 563 /* content: "2007-2011"; */
pascal@706 564 content: "2011";
pascal@669 565 }
pankso@710 566
pankso@710 567 /* Footer */
pankso@710 568
pankso@710 569 #footer {
pankso@710 570 margin: 0px 80px 80px 80px;
pankso@710 571 padding: 10px;
pankso@710 572 background: #eaeaea;
pankso@710 573 color: #666666;
pankso@710 574 height: 180px;
pankso@724 575 clear: both;
pankso@710 576 border-radius: 8px;
pankso@710 577 -moz-border-radius: 8px;
pankso@710 578 -webkit-border-radius: 8px;
pankso@710 579 -moz-box-shadow: 0 1px 3px #666;
pankso@710 580 -webkit-box-shadow: 0 1px 3px #666;
pankso@710 581 box-shadow: 0 1px 3px #666;
pankso@710 582 }
pankso@710 583 #footer a {
pankso@710 584 background: inherit;
pankso@710 585 color: #666666;
pankso@710 586 }
pankso@710 587 #footer a:hover {
pankso@710 588 background: inherit;
pankso@710 589 color: #333333;
pankso@710 590 }
pankso@710 591 #footer ul {
pankso@710 592 list-style-type: none;
pankso@710 593 }
pankso@710 594 #footer li {
pankso@710 595 padding: 2px;
pankso@710 596 }
pankso@710 597 #footer h4 {
pankso@710 598 margin: 0 20px;
pankso@710 599 font-size: 125%;
pankso@710 600 }