website view slitaz.css @ rev 712
en: main page use now PHP (index.php), new layout
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Thu Jan 06 16:25:47 2011 +0100 (2011-01-06) |
| parents | c7bd8b28228e |
| children | 18040398d744 |
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 60px;
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 #twitter {
379 margin-top: 20px;
380 -moz-border-radius: 8px;
381 -webkit-border-radius: 8px;
382 border-radius: 8px;
383 -moz-box-shadow: 0 1px 3px #666;
384 -webkit-box-shadow: 0 1px 3px #666;
385 box-shadow: 0 1px 3px #666;
386 }
388 /* HTML styles */
390 h1 {
391 color: #444444;
392 background: transparent;
393 text-align: left;
394 margin: 0px 0px 4px 0px;
395 font-size: 150%;
396 font-weight: bold;
397 padding: 5px 0 0 10px;
398 }
400 h2 {
401 color: #b64b22;
402 padding: 0;
403 margin: 20px 0 0 0;
404 font-size: 130%;
405 font-weight: bold;
406 }
408 h3 {
409 font-weight: bold;
410 color: #666666;
411 background: transparent;
412 }
414 h3 img {
415 vertical-align: middle;
416 width: 20px;
417 height: 20px;
418 padding-right: 4px;
419 }
421 a {
422 text-decoration: underline;
423 color: #103A5E;
424 background: inherit;
425 }
427 a:hover {
428 text-decoration: none;
429 color: blue;
430 background: inherit;
431 }
433 code {
434 font-size: 12px;
435 color: #669900;
436 background: inherit;
437 }
439 tt {
440 color: #15EE15;
441 background: inherit;
442 }
444 img {
445 border: 0pt none;
446 }
448 fieldset {
449 background: #E2ECf6;
450 color: black;
451 margin-top: 25px;
452 border: 1px solid black;
453 }
455 legend {
456 border: 1px solid black;
457 color: #6c0023;
458 background: #eaeaea;
459 font-weight: bold;
460 }
462 pre {
463 padding: 5px;
464 color: black;
465 background: #E1E0B0;
466 }
468 pre.script {
469 padding: 10px;
470 color: black;
471 background: #E8E8E8;
472 border: 1px inset #606060;
473 }
475 textarea {
476 background: #E5E5E5;
477 margin-top: 12px;
478 }
480 /* Packages pages */
482 .pkg_nav {
483 border-top: 1px solid black;
484 margin-top: 10px;
485 padding-top: 10px;
486 }
488 pre.package {
489 padding: 0px;
490 color: black;
491 background: white;
492 }
494 p.get {
495 text-align: center;
496 padding: 10px;
497 color: black;
498 background: #F3F3F3;
499 border: 1px solid #DEDEDE;
500 }
502 .year:after {
503 /* content: "2007-2011"; */
504 content: "2011";
505 }
507 /* Footer */
509 #footer {
510 margin: 0px 80px 80px 80px;
511 padding: 10px;
512 background: #eaeaea;
513 color: #666666;
514 height: 180px;
515 border-radius: 8px;
516 -moz-border-radius: 8px;
517 -webkit-border-radius: 8px;
518 -moz-box-shadow: 0 1px 3px #666;
519 -webkit-box-shadow: 0 1px 3px #666;
520 box-shadow: 0 1px 3px #666;
521 }
522 #footer a {
523 background: inherit;
524 color: #666666;
525 }
526 #footer a:hover {
527 background: inherit;
528 color: #333333;
529 }
530 #footer ul {
531 list-style-type: none;
532 }
533 #footer li {
534 padding: 2px;
535 }
536 #footer h4 {
537 margin: 0 20px;
538 font-size: 125%;
539 }