website view slitaz.css @ rev 732

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