website view slitaz.css @ rev 707
css: small fix and clean-up
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Tue Jan 04 23:41:00 2011 +0100 (2011-01-04) |
| parents | cdf9a5fd5a54 |
| children | a480107a2d4a |
line source
1 /*
2 CSS style for SliTaz GNU/Linux website
3 www.slitaz.org - (c) 2011 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 width: 200px;
73 height: 74px;
74 }
76 /* Navigation */
78 #nav {
79 position: absolute;
80 top: 102px;
81 right: 80px;
82 color: #555555;
83 float: right;
84 width: 250px;
85 line-height: 1.5em;
86 text-align: left;
87 font-size: 12px;
88 }
90 #nav .nav_box ul {
91 list-style-type: none;
92 margin: 0;
93 padding: 10px 24px 10px 0px;
94 background-color: inherit;
95 }
97 #nav li {
98 display: inline;
99 }
101 #nav h4 {
102 font-size: 120%;
103 color: #666666;
104 font-weight: bold;
105 margin: 0;
106 padding: 0 0 1px 0;
107 border-bottom: 1px solid #cecece;
108 }
110 #nav a {
111 color: #0F314E;
112 background: inherit;
113 display: block;
114 text-decoration: none;
115 font-weight: bold;
116 }
118 #nav a:hover {
119 color: #b64b22;
120 text-decoration: none;
121 display: block;
122 }
124 #nav hr {
125 margin: 2px 0px 1px 0px;
126 border: 0px;
127 border-top: 1px solid #BDBDBD;
128 }
130 #nav ul {
131 -moz-border-radius: 8px;
132 -webkit-border-radius: 8px;
133 list-style-type: none;
134 margin: 10px 0;
135 padding: 10px 24px 10px 24px;
136 background-color: #eaeaea;
137 }
139 .nav_box {
140 margin: 10px 0;
141 padding: 10px 24px 10px 24px;
142 background-color: #eaeaea;
143 text-align: justify;
144 -moz-border-radius: 8px;
145 -webkit-border-radius: 8px;
146 border-radius: 8px;
147 -moz-box-shadow: 0 1px 3px #666;
148 -webkit-box-shadow: 0 1px 3px #666;
149 box-shadow: 0 1px 3px #666;
150 /* CSS3 transition */
151 -webkit-transition-property: background-color;
152 -webkit-transition-duration: 2s;
153 -moz-transition-property: background-color;
154 -moz-transition-duration: 2s;
155 transition-property: background-color;
156 transition-duration: 2s;
157 }
159 .nav_box:hover { background-color: #f8f8f8; }
161 #nav .nav_box p {
162 line-height: 1.3em;
163 }
165 #nav .nav_box p a {
166 display: inline;
167 font-weight: normal;
168 text-decoration: underline;
169 }
171 #nav .nav_box p a:hover {
172 text-decoration: none;
173 color: blue;
174 background: inherit;
175 }
177 #nav hr {
178 height: 0px;
179 border: 0px solid #eaeaea;
180 }
182 /* Page content */
184 #content {
185 background: white;
186 color: black;
187 text-align: justify;
188 height: auto;
189 margin: 6px 320px 0px 0px;
190 padding: 0px 40px 60px 80px;
191 }
193 #content-full {
194 background: white;
195 color: black;
196 text-align: justify;
197 height: auto;
198 margin: 6px 0px 0px 0px;
199 padding: 0px 80px 35% 80px;
200 }
202 #content li, #content-full li {
203 line-height: 1.5em;
204 text-align: left;
205 }
207 /* Legal informations */
209 #copy {
210 font-size: 11px ;
211 text-align: left ;
212 background: transparent;
213 color: #a8a8a8;
214 padding-top: 10px;
215 margin: 0 0 0 80px;
216 }
218 #copy a {
219 background: inherit;
220 color: #a8a8a8;
221 }
223 #copy a:hover {
224 background: inherit;
225 color: #666666;
226 }
228 /* Footer */
230 #bottom {
231 float: none;
232 background: inherit;
233 color: black;
234 width: auto;
235 clear: both;
236 padding: 0;
237 margin: 0 0 0 80px;
238 text-align: left;
239 vertical-align: middle;
240 }
242 #news li {
243 list-style-type: square;
244 border-bottom: 1px dotted #BEBEBE;
245 margin-left: -25px;
246 padding: 4px 0px 4px 0px;
247 }
249 #news a {
250 text-decoration: none;
251 }
253 #gallery {
254 text-align: center;
255 }
257 #gallery table {
258 margin: 30px 0px 30px 0px;
259 }
261 /* Clouds */
263 #cloud {
264 padding: 20px 0px 20px 0px;
265 line-height: 3em;
266 text-align: center;
267 }
268 #cloud a { padding: 4px; color: #956411; }
269 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
270 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
271 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
272 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
273 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
274 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
275 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
276 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
277 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
278 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
280 /* CSS class. */
282 .infobox {
283 margin: 10px;
284 padding: 12px;
285 background: #f8f8f8;
286 -moz-border-radius: 8px;
287 -webkit-border-radius: 8px;
288 border-radius: 8px;
289 -moz-box-shadow: 0 1px 3px #666;
290 -webkit-box-shadow: 0 1px 3px #666;
291 box-shadow: 0 1px 3px #666;
292 }
294 .imagebox {
295 min-width: 300px;
296 margin: 10px 15%;
297 padding: 8px;
298 background: transparent;
299 text-align: center;
300 /* CSS3 transition */
301 -webkit-transition-property: background-color;
302 -webkit-transition-duration: 3s;
303 -moz-transition-property: background-color;
304 -moz-transition-duration: 3s;
305 transition-property: background-color;
306 transition-duration: 3s;
307 }
309 .imagebox:hover, .imagebox img {
310 -moz-border-radius: 8px;
311 -webkit-border-radius: 8px;
312 border-radius: 8px;
313 -moz-box-shadow: 0 1px 3px #666;
314 -webkit-box-shadow: 0 1px 3px #666;
315 box-shadow: 0 1px 3px #666;
316 }
318 .block {
319 /*padding-bottom: 35%;*/
320 color: black;
321 min-height: 200px;
322 }
324 .block h3 img {
325 padding: 0 2px 2px 0;
326 margin: 0;
327 }
329 .block ul {
330 list-style-type: square;
331 }
333 .block_left {
334 width: 46%;
335 float: left;
336 background-color: #eaeaea;
337 margin: 4px 2px;
338 padding: 0 6px;
339 }
341 .block_right {
342 width: 46%;
343 float: right;
344 background-color: #eaeaea;
345 margin: 4px 2px;
346 padding: 0 6px;
347 }
349 .block_left, .block_right {
350 -moz-border-radius: 8px;
351 -webkit-border-radius: 8px;
352 border-radius: 8px;
353 -moz-box-shadow: 0 1px 3px #666;
354 -webkit-box-shadow: 0 1px 3px #666;
355 box-shadow: 0 1px 3px #666;
356 /* CSS3 transition */
357 -webkit-transition-property: background-color;
358 -webkit-transition-duration: 2s;
359 -moz-transition-property: background-color;
360 -moz-transition-duration: 2s;
361 transition-property: background-color;
362 transition-duration: 2s;
363 /* For browsers that don't support RGBa
364 background: rgb(0, 0, 0);*/
365 /* RGBa with 0.6 opacity
366 background: rgba(0, 0, 0, 0.2);*/
367 }
369 .block_left:hover, .block_right:hover, .imagebox:hover, #slidebox:hover {
370 background-color: #f2b21d;
371 }
373 /* HTML styles */
375 h1 {
376 color: #444444;
377 background: inherit;
378 text-align: left;
379 margin: 0px 0px 4px 0px;
380 font-size: 150%;
381 font-weight: bold;
382 }
384 h2 {
385 color: #b64b22;
386 padding: 0;
387 margin: 4px 0 0 0;
388 font-size: 130%;
389 font-weight: bold;
390 }
392 h3 {
393 font-weight: bold;
394 color: #390012;
395 background: transparent;
396 }
398 h3 img {
399 vertical-align: middle;
400 width: 20px;
401 height: 20px;
402 }
404 a {
405 text-decoration: underline;
406 color: #0F314E;
407 background: inherit;
408 }
410 a:hover {
411 text-decoration: none;
412 color: blue;
413 background: inherit;
414 }
416 code {
417 font-size: 12px;
418 color: #669900;
419 background: inherit;
420 }
422 tt {
423 color: #15EE15;
424 background: inherit;
425 }
427 img {
428 border: 0pt none;
429 }
431 fieldset {
432 background: #E2ECf6;
433 color: black;
434 margin-top: 25px;
435 border: 1px solid black;
436 }
438 legend {
439 border: 1px solid black;
440 color: #6c0023;
441 background: #eaeaea;
442 font-weight: bold;
443 }
445 pre {
446 padding: 5px;
447 color: black;
448 background: #E1E0B0;
449 }
451 pre.script {
452 padding: 10px;
453 color: black;
454 background: #E8E8E8;
455 border: 1px inset #606060;
456 }
458 textarea {
459 background: #E5E5E5;
460 margin-top: 12px;
461 }
463 /* Packages pages */
465 .pkg_nav {
466 border-top: 1px solid black;
467 margin-top: 10px;
468 padding-top: 10px;
469 }
471 pre.package {
472 padding: 0px;
473 color: black;
474 background: white;
475 }
477 p.get {
478 text-align: center;
479 padding: 10px;
480 color: black;
481 background: #F3F3F3;
482 border: 1px solid #DEDEDE;
483 }
485 .year:after {
486 /* content: "2007-2011"; */
487 content: "2011";
488 }