wok-6.x annotate tazpkg-web/stuff/style/slitaz.css @ rev 7865

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