slitaz-configs view rootfs/usr/share/webhome/slitaz.css @ rev 74
Improve webhome page and match last theme
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Thu Jan 06 14:09:28 2011 +0100 (2011-01-06) |
| parents | f67cc653bc28 |
| children | 79325586e507 |
line source
1 /*
2 CSS style for SliTaz GNU/Linux website
3 www.slitaz.org - (c) 2011 Pankso
4 */
6 html {
7 min-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 color: black;
49 width: 100%;
50 height: 42px;
51 border-top: 1px solid black;
52 border-bottom: 1px solid #999;
53 margin-bottom: 33px;
54 }
56 #titre {
57 position: absolute;
58 font-size: 14px;
59 font-weight: bolder ;
60 left: 180px;
61 top: 4px;
62 }
64 #logo {
65 position: absolute;
66 float: left;
67 left: 16px;
68 top: -10px;
69 width: 200px;
70 height: 74px;
71 }
73 /* Side bar Navigation */
75 #nav {
76 position: absolute;
77 top: 102px;
78 right: 80px;
79 color: #555555;
80 float: right;
81 width: 250px;
82 line-height: 1.5em;
83 text-align: left;
84 font-size: 12px;
85 }
87 #nav .nav_box ul {
88 list-style-type: none;
89 margin: 0;
90 padding: 10px 24px 10px 0px;
91 background-color: inherit;
92 }
94 #nav li {
95 display: inline;
96 }
98 #nav h4 {
99 font-size: 120%;
100 color: #666666;
101 font-weight: bold;
102 margin: 0;
103 padding: 0 0 1px 0;
104 border-bottom: 1px solid #cecece;
105 }
107 #nav a {
108 color: #0F314E;
109 background: inherit;
110 display: block;
111 text-decoration: none;
112 font-weight: bold;
113 }
115 #nav a:hover {
116 color: #b64b22;
117 text-decoration: none;
118 display: block;
119 }
121 #nav ul {
122 -moz-border-radius: 8px;
123 -webkit-border-radius: 8px;
124 border-radius: 8px;
125 list-style-type: none;
126 margin: 10px 0;
127 padding: 10px 24px 10px 24px;
128 background-color: #eaeaea;
129 }
131 .nav_box {
132 margin: 10px 0;
133 padding: 10px 24px 10px 24px;
134 background-color: #eaeaea;
135 text-align: justify;
136 -moz-border-radius: 8px;
137 -webkit-border-radius: 8px;
138 border-radius: 8px;
139 -moz-box-shadow: 0 1px 3px #666;
140 -webkit-box-shadow: 0 1px 3px #666;
141 box-shadow: 0 1px 3px #666;
142 /* CSS3 transition */
143 -webkit-transition-property: background-color;
144 -webkit-transition-duration: 2s;
145 -moz-transition-property: background-color;
146 -moz-transition-duration: 2s;
147 transition-property: background-color;
148 transition-duration: 2s;
149 }
151 .nav_box:hover { background-color: #f8f8f8; }
153 #nav .nav_box p {
154 line-height: 1.3em;
155 }
157 #nav .nav_box p a {
158 display: inline;
159 font-weight: normal;
160 text-decoration: underline;
161 }
163 #nav .nav_box p a:hover {
164 text-decoration: none;
165 color: blue;
166 background: inherit;
167 }
169 /* Page content */
171 #content {
172 background: white;
173 color: black;
174 text-align: justify;
175 height: auto;
176 margin: 6px 320px 0px 0px;
177 padding: 0px 40px 60px 80px;
178 }
180 #content-full {
181 background: white;
182 color: black;
183 text-align: justify;
184 height: auto;
185 margin: 0;
186 padding: 0px 80px 40px 80px;
187 }
189 #content li, #content-full li {
190 line-height: 1.5em;
191 text-align: left;
192 }
194 #news li {
195 list-style-type: square;
196 border-bottom: 1px dotted #BEBEBE;
197 margin-left: -25px;
198 padding: 4px 0px 4px 0px;
199 }
201 #news a {
202 text-decoration: none;
203 }
205 #gallery {
206 text-align: center;
207 }
209 #gallery table {
210 margin: 30px 0px 30px 0px;
211 }
213 /* Box and block. */
215 .infobox {
216 margin: 10px;
217 padding: 12px;
218 background: #f8f8f8;
219 }
221 .infobox img { vertical-align: middle; }
222 .infobox:hover { background-color: #f2b21d; }
224 .block {
225 /*padding-bottom: 35%;*/
226 color: black;
227 min-height: 200px;
228 margin-bottom: 40px;
229 }
231 .block ul {
232 list-style-type: none;
233 margin: 0;
234 padding: 0 20px;
235 }
237 .block_left {
238 width: 46%;
239 float: left;
240 background-color: #eaeaea;
241 margin: 4px 2px;
242 padding: 0 10px 10px 10px;
243 }
245 .block_right {
246 width: 46%;
247 float: right;
248 background-color: #eaeaea;
249 margin: 4px 2px;
250 padding: 0 10px 10px 10px;
251 }
253 #block_top {
254 color: black;
255 background-color: #eaeaea;
256 min-height: 180px;
257 margin-bottom: 40px;
258 margin-right: 340px;
259 padding: 0 10px;
260 }
262 #block_nav {
263 width: 300px;
264 min-height: 180px;
265 float: right;
266 background-color: #eaeaea;
267 margin: 0;
268 padding: 0 10px;
269 }
271 .infobox, .block_left, .block_right, #block_top, #block_nav, #footer {
272 -moz-border-radius: 8px;
273 -webkit-border-radius: 8px;
274 border-radius: 8px;
275 -moz-box-shadow: 0 1px 3px #666;
276 -webkit-box-shadow: 0 1px 3px #666;
277 box-shadow: 0 1px 3px #666;
278 /* CSS3 transition */
279 -webkit-transition-property: background-color;
280 -webkit-transition-duration: 2s;
281 -moz-transition-property: background-color;
282 -moz-transition-duration: 2s;
283 transition-property: background-color;
284 transition-duration: 2s;
285 }
287 #block_nav {
288 font-weight: bold;
289 }
291 #block_nav a {
292 text-decoration: none;
293 }
295 #block_nav li a:hover {
296 color: #b64b22;
297 }
299 #block_nav ul {
300 margin: 0;
301 list-style-type: none;
302 }
304 #block_nav h3 {
305 font-size: 110%;
306 }
308 .block_left:hover, .block_right:hover, #block_top:hover,
309 #block_nav:hover, #footer:hover {
310 background-color: #f8f8f8;
311 }
313 .right_box {
314 width: 50%;
315 float: right;
316 }
318 /* Button */
320 .button { margin-left: 20px; }
322 .button a {
323 background-color: #b64b22;
324 color: #ffffff;
325 margin-right: 6px;
326 padding: 6px 10px;
327 font-size: 14px;
328 -moz-border-radius: 4px;
329 -webkit-border-radius: 4px;
330 border-radius: 4px;
331 -moz-box-shadow: 0 1px 3px #666;
332 -webkit-box-shadow: 0 1px 3px #666;
333 box-shadow: 0 1px 3px #666;
334 }
336 .button a:hover {
337 background-color: #a3431f;
338 color: #ffffff;
339 }
341 /* Clouds */
343 #cloud {
344 padding: 20px 0px 20px 0px;
345 line-height: 3em;
346 text-align: center;
347 }
348 #cloud a { padding: 4px; color: #956411; }
349 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
350 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
351 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
352 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
353 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
354 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
355 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
356 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
357 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
358 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
360 /* Slideshow. */
362 #slideshow
363 {
364 overflow: hidden;
365 margin: 10px auto 10px;
366 position: relative;
367 width: 260px;
368 height: 163px;
369 }
371 #slideshow img
372 {
373 border: 0;
374 width: 260px;
375 height: 163px;
376 }
378 /* HTML styles */
380 h1 {
381 color: #444444;
382 background: transparent;
383 text-align: left;
384 margin: 0px 0px 4px 0px;
385 font-size: 150%;
386 font-weight: bold;
387 padding: 5px 0 0 10px;
388 }
390 h2 {
391 color: #b64b22;
392 padding: 0;
393 margin: 20px 0 0 0;
394 font-size: 130%;
395 font-weight: bold;
396 }
398 h3 {
399 font-weight: bold;
400 color: #666666;
401 background: transparent;
402 }
404 h3 img {
405 vertical-align: middle;
406 width: 20px;
407 height: 20px;
408 padding-right: 4px;
409 }
411 a {
412 text-decoration: underline;
413 color: #103A5E;
414 background: inherit;
415 }
417 a:hover {
418 text-decoration: none;
419 color: blue;
420 background: inherit;
421 }
423 code {
424 font-size: 12px;
425 color: #669900;
426 background: inherit;
427 }
429 tt {
430 color: #15EE15;
431 background: inherit;
432 }
434 img {
435 border: 0pt none;
436 }
438 fieldset {
439 background: #E2ECf6;
440 color: black;
441 margin-top: 25px;
442 border: 1px solid black;
443 }
445 legend {
446 border: 1px solid black;
447 color: #6c0023;
448 background: #eaeaea;
449 font-weight: bold;
450 }
452 pre {
453 padding: 5px;
454 color: black;
455 background: #E1E0B0;
456 }
458 pre.script {
459 padding: 10px;
460 color: black;
461 background: #E8E8E8;
462 border: 1px inset #606060;
463 }
465 textarea {
466 background: #E5E5E5;
467 margin-top: 12px;
468 }
470 /* Packages pages */
472 .pkg_nav {
473 border-top: 1px solid black;
474 margin-top: 10px;
475 padding-top: 10px;
476 }
478 pre.package {
479 padding: 0px;
480 color: black;
481 background: white;
482 }
484 p.get {
485 text-align: center;
486 padding: 10px;
487 color: black;
488 background: #F3F3F3;
489 border: 1px solid #DEDEDE;
490 }
492 .year:after {
493 /* content: "2007-2011"; */
494 content: "2011";
495 }
497 /* Footer */
499 #footer {
500 margin: 0px 80px 80px 80px;
501 padding: 10px;
502 background: #eaeaea;
503 color: #666666;
504 height: 180px;
505 border-radius: 8px;
506 -moz-border-radius: 8px;
507 -webkit-border-radius: 8px;
508 -moz-box-shadow: 0 1px 3px #666;
509 -webkit-box-shadow: 0 1px 3px #666;
510 box-shadow: 0 1px 3px #666;
511 }
512 #footer a {
513 background: inherit;
514 color: #666666;
515 }
516 #footer a:hover {
517 background: inherit;
518 color: #333333;
519 }
520 #footer ul {
521 list-style-type: none;
522 }
523 #footer li {
524 padding: 2px;
525 }
526 #footer h4 {
527 margin: 0 20px;
528 font-size: 125%;
529 }