website annotate slitaz.css @ rev 702

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