website view slitaz.css @ rev 706

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