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