wok annotate tazpkg-web/stuff/style/slitaz.css @ rev 7932

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