website view slitaz.css @ rev 697
CSS: Main change to default style (match next cooking :-)
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Fri Dec 24 21:53:48 2010 +0100 (2010-12-24) |
| parents | a1cd38534626 |
| children | c9d7335eb96c |
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 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 }
59 #titre {
60 position: absolute;
61 font-size: 14px;
62 font-weight: bolder ;
63 left: 180px;
64 top: 4px;
65 }
67 #logo {
68 position: absolute;
69 float: left;
70 left: 16px;
71 top: -10px;
72 }
74 /* Navigation */
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 }
88 #nav .nav_box ul {
89 list-style-type: none;
90 margin: 0;
91 padding: 10px 24px 10px 0px;
92 background-color: inherit;
93 }
95 #nav li {
96 display: inline;
97 }
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 }
108 #nav a {
109 color: #0F314E;
110 background: inherit;
111 display: block;
112 text-decoration: none;
113 font-weight: bold;
114 }
116 #nav a:hover {
117 color: #b64b22;
118 text-decoration: none;
119 display: block;
120 }
122 #nav hr {
123 margin: 2px 0px 1px 0px;
124 border: 0px;
125 border-top: 1px solid #BDBDBD;
126 }
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 }
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 }
157 .nav_box:hover { background-color: #f8f8f8; }
159 #nav .nav_box p {
160 line-height: 1.3em;
161 }
163 #nav .nav_box p a {
164 display: inline;
165 font-weight: normal;
166 text-decoration: underline;
167 }
169 #nav .nav_box p a:hover {
170 text-decoration: none;
171 color: blue;
172 background: inherit;
173 }
175 #nav hr {
176 height: 0px;
177 border: 0px solid #eaeaea;
178 }
180 /* Page content */
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 }
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 }
200 #content li, #content-full li {
201 line-height: 1.5em;
202 text-align: left;
203 }
205 /* Legal informations */
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 }
216 #copy a {
217 background: inherit;
218 color: #a8a8a8;
219 }
221 #copy a:hover {
222 background: inherit;
223 color: #666666;
224 }
226 /* Footer */
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 }
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 }
247 #news a {
248 text-decoration: none;
249 }
251 #gallery {
252 text-align: center;
253 }
255 #gallery table {
256 margin: 30px 0px 30px 0px;
257 }
259 /* Clouds */
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; }
278 /* CSS class. */
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 }
292 .imagebox {
293 margin: 0 20px;
294 padding: 8px;
295 background: transparent;
296 text-align: center;
297 /* CSS3 transition */
298 -webkit-transition-property: background-color;
299 -webkit-transition-duration: 3s;
300 -moz-transition-property: background-color;
301 -moz-transition-duration: 3s;
302 transition-property: background-color;
303 transition-duration: 3s;
304 }
306 .imagebox:hover, .imagebox img {
307 -moz-border-radius: 8px;
308 -webkit-border-radius: 8px;
309 border-radius: 8px;
310 -moz-box-shadow: 0 1px 3px #666;
311 -webkit-box-shadow: 0 1px 3px #666;
312 box-shadow: 0 1px 3px #666;
313 }
315 .block {
316 /*padding-bottom: 35%;*/
317 color: black;
318 min-height: 200px;
319 }
321 .block h3 img {
322 padding: 0 2px 2px 0;
323 margin: 0;
324 }
326 .block ul {
327 list-style-type: square;
328 }
330 .block_left {
331 width: 46%;
332 float: left;
333 background-color: #eaeaea;
334 margin: 4px 2px;
335 padding: 0 6px;
336 }
338 .block_right {
339 width: 46%;
340 float: right;
341 background-color: #eaeaea;
342 margin: 4px 2px;
343 padding: 0 6px;
344 }
346 .block_left, .block_right {
347 -moz-border-radius: 8px;
348 -webkit-border-radius: 8px;
349 border-radius: 8px;
350 -moz-box-shadow: 0 1px 3px #666;
351 -webkit-box-shadow: 0 1px 3px #666;
352 box-shadow: 0 1px 3px #666;
353 /* CSS3 transition */
354 -webkit-transition-property: background-color;
355 -webkit-transition-duration: 2s;
356 -moz-transition-property: background-color;
357 -moz-transition-duration: 2s;
358 transition-property: background-color;
359 transition-duration: 2s;
360 /* For browsers that don't support RGBa
361 background: rgb(0, 0, 0);*/
362 /* RGBa with 0.6 opacity
363 background: rgba(0, 0, 0, 0.2);*/
364 }
366 .block_left:hover, .block_right:hover, .imagebox:hover {
367 background-color: #f2b21d;
368 }
370 /* HTML styles */
372 h1 {
373 color: #444444;
374 background: inherit;
375 text-align: left;
376 margin: 0px 0px 2px 0px;
377 font-size: 150%;
378 font-weight: bold;
379 }
381 h2 {
382 color: #b64b22;
383 padding: 0;
384 margin: 0;
385 font-size: 130%;
386 font-weight: bold;
387 }
389 h3 {
390 font-weight: bold;
391 color: #390012;
392 background: transparent;
393 }
395 a {
396 text-decoration: underline;
397 color: #0F314E;
398 background: inherit;
399 }
401 a:hover {
402 text-decoration: none;
403 color: blue;
404 background: inherit;
405 }
407 code {
408 font-size: 12px;
409 color: #669900;
410 background: inherit;
411 }
413 tt {
414 color: #15EE15;
415 background: inherit;
416 }
418 img {
419 border: 0pt none;
420 }
422 fieldset {
423 background: #E2ECf6;
424 color: black;
425 margin-top: 25px;
426 border: 1px solid black;
427 }
429 legend {
430 border: 1px solid black;
431 color: #6c0023;
432 background: #eaeaea;
433 font-weight: bold;
434 }
436 pre {
437 padding: 5px;
438 color: black;
439 background: #E1E0B0;
440 }
442 pre.script {
443 padding: 10px;
444 color: black;
445 background: #E8E8E8;
446 border: 1px inset #606060;
447 }
449 textarea {
450 background: #E5E5E5;
451 margin-top: 12px;
452 }
454 /* Packages pages */
456 .pkg_nav {
457 border-top: 1px solid black;
458 margin-top: 10px;
459 padding-top: 10px;
460 }
462 pre.package {
463 padding: 0px;
464 color: black;
465 background: white;
466 }
468 p.get {
469 text-align: center;
470 padding: 10px;
471 color: black;
472 background: #F3F3F3;
473 border: 1px solid #DEDEDE;
474 }
476 .year:after {
477 /* content: "2007-2010"; */
478 content: "2010";
479 }