website annotate slitaz.css @ rev 698

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