website view slitaz.css @ rev 694
CSS: small fix to nav list
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Fri Dec 24 15:38:16 2010 +0100 (2010-12-24) |
| parents | 772b09e644ea |
| children | 415024d9fe10 |
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 }
17 /* Accessibility */
19 #access {
20 position: absolute;
21 top: 0px;
22 right: 0px;
23 text-align: right;
24 width: auto;
25 margin: 0;
26 padding: 4px 4px 4px 20px;
27 font-size: 11px;
28 font-weight: bold;
29 /* CSS3 transition */
30 -webkit-transition-property: background-color;
31 -webkit-transition-duration: 1s;
32 -moz-transition-property: background-color;
33 -moz-transition-duration: 1s;
34 transition-property: background-color;
35 transition-duration: 1s;
36 }
38 #access:hover {
39 background-color: #b64b22;
40 -moz-border-radius-bottomleft: 8px;
41 -webkit-border-radius-bottomleft: 8px;
42 border-bottom-left-radius: 8px;
43 -moz-box-shadow: 0 1px 3px #666;
44 -webkit-box-shadow: 0 1px 3px #666;
45 box-shadow: 0 1px 3px #666;
46 }
48 #access a {
49 background: inherit;
50 color: white;
51 text-decoration: none;
52 }
54 #access a:hover {
55 background: inherit;
56 color: #222222;
57 }
59 /* Header and title */
61 #header{
62 background: #f0ba08 url(pics/website/header.png) repeat-x top;
63 color: black;
64 width: 100%;
65 height: 50px;
66 border-top: 1px solid black;
67 border-bottom: 1px solid black;
68 margin-bottom: 30px;
69 }
71 #titre {
72 position: absolute;
73 font-size: 16px;
74 font-weight: bolder ;
75 margin-left: 200px;
76 margin-top: 28px;
77 }
79 #logo {
80 position: absolute;
81 float: left;
82 margin-left: 16px;
83 margin-top: 0px;
84 }
86 /* Navigation */
88 #nav {
89 position: absolute;
90 top: 76px;
91 right: 80px;
92 color: #555555;
93 float: right;
94 width: 250px;
95 line-height: 1.5em;
96 text-align: left;
97 font-size: 12px;
98 }
100 #nav .nav_box ul {
101 list-style-type: none;
102 margin: 0;
103 padding: 10px 24px 10px 0px;
104 background-color: inherit;
105 }
107 #nav li {
108 display: inline;
109 }
111 #nav h4 {
112 font-size: 120%;
113 color: #666666;
114 font-weight: bold;
115 margin: 0;
116 padding: 0 0 1px 0;
117 border-bottom: 1px solid #cecece;
118 }
120 #nav a {
121 color: #0F314E;
122 background: inherit;
123 display: block;
124 text-decoration: none;
125 font-weight: bold;
126 }
128 #nav a:hover {
129 color: #DF8F06;
130 text-decoration: none;
131 display: block;
132 }
134 #nav hr {
135 margin: 2px 0px 1px 0px;
136 border: 0px;
137 border-top: 1px solid #BDBDBD;
138 }
140 #nav ul {
141 -moz-border-radius: 8px;
142 -webkit-border-radius: 8px;
143 list-style-type: none;
144 margin: 10px 0;
145 padding: 10px 24px 10px 24px;
146 background-color: #eaeaea;
147 }
149 .nav_box {
150 margin: 10px 0;
151 padding: 10px 24px 10px 24px;
152 background-color: #eaeaea;
153 text-align: justify;
154 -moz-border-radius: 8px;
155 -webkit-border-radius: 8px;
156 border-radius: 8px;
157 -moz-box-shadow: 0 1px 3px #666;
158 -webkit-box-shadow: 0 1px 3px #666;
159 box-shadow: 0 1px 3px #666;
160 /* CSS3 transition */
161 -webkit-transition-property: background-color;
162 -webkit-transition-duration: 2s;
163 -moz-transition-property: background-color;
164 -moz-transition-duration: 2s;
165 transition-property: background-color;
166 transition-duration: 2s;
167 }
169 .nav_box:hover { background-color: #f8f8f8; }
171 #nav .nav_box p {
172 line-height: 1.3em;
173 }
175 #nav .nav_box p a {
176 display: inline;
177 font-weight: normal;
178 text-decoration: underline;
179 }
181 #nav .nav_box p a:hover {
182 text-decoration: none;
183 color: blue;
184 background: inherit;
185 }
187 #nav hr {
188 height: 0px;
189 border: 0px solid #eaeaea;
190 }
192 /* Page content */
194 #content {
195 background: white;
196 color: black;
197 text-align: justify;
198 height: auto;
199 margin: 6px 320px 0px 0px;
200 padding: 0px 40px 60px 80px;
201 }
203 #content-full {
204 background: white;
205 color: black;
206 text-align: justify;
207 height: auto;
208 margin: 6px 0px 0px 0px;
209 padding: 0px 80px 35% 80px;
210 }
212 #content li, #content-full li {
213 line-height: 1.5em;
214 text-align: left;
215 }
217 /* Legal informations */
219 #copy {
220 font-size: 11px ;
221 text-align: left ;
222 background: transparent;
223 color: #a8a8a8;
224 padding-top: 10px;
225 margin: 0 0 0 80px;
226 }
228 #copy a {
229 background: inherit;
230 color: #a8a8a8;
231 }
233 #copy a:hover {
234 background: inherit;
235 color: #666666;
236 }
238 /* Footer */
240 #bottom {
241 float: none;
242 background: inherit;
243 color: black;
244 width: auto;
245 clear: both;
246 padding: 0;
247 margin: 0 0 0 80px;
248 text-align: left;
249 vertical-align: middle;
250 }
252 #news li {
253 list-style-type: square;
254 border-bottom: 1px dotted #BEBEBE;
255 margin-left: -25px;
256 padding: 4px 0px 4px 0px;
257 }
259 #news a {
260 text-decoration: none;
261 }
263 #gallery {
264 text-align: center;
265 }
267 #gallery table {
268 margin: 30px 0px 30px 0px;
269 }
271 /* Clouds */
273 #cloud {
274 padding: 20px 0px 20px 0px;
275 line-height: 3em;
276 text-align: center;
277 }
278 #cloud a { padding: 4px; color: #956411; }
279 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
280 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
281 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
282 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
283 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
284 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
285 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
286 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
287 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
288 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
290 /* CSS class. */
292 .infobox {
293 margin: 10px;
294 padding: 12px;
295 background: #f8f8f8;
296 -moz-border-radius: 8px;
297 -webkit-border-radius: 8px;
298 border-radius: 8px;
299 -moz-box-shadow: 0 1px 3px #666;
300 -webkit-box-shadow: 0 1px 3px #666;
301 box-shadow: 0 1px 3px #666;
302 }
304 .block {
305 /*padding-bottom: 35%;*/
306 color: black;
307 }
309 .block h3 img {
310 padding: 2px;
311 }
313 .block_left {
314 width: 46%;
315 float: left;
316 background-color: #f5f5f5;
317 margin: 4px 2px;
318 padding: 0 6px;
319 }
321 .block_right {
322 width: 46%;
323 float: right;
324 background-color: #f5f5f5;
325 margin: 4px 2px;
326 padding: 0 6px;
327 }
329 .block_left, .block_right {
330 -moz-border-radius: 8px;
331 -webkit-border-radius: 8px;
332 border-radius: 8px;
333 -moz-box-shadow: 0 1px 3px #666;
334 -webkit-box-shadow: 0 1px 3px #666;
335 box-shadow: 0 1px 3px #666;
336 /* CSS3 transition */
337 -webkit-transition-property: background-color;
338 -webkit-transition-duration: 2s;
339 -moz-transition-property: background-color;
340 -moz-transition-duration: 2s;
341 transition-property: background-color;
342 transition-duration: 2s;
343 }
345 .block_left:hover, .block_right:hover {
346 background-color: #f2b21d;
347 }
349 /* HTML styles */
351 h1 {
352 color: blue;
353 background: inherit;
354 text-align: left;
355 margin: 0px 0px 10px 0px;
356 font-size: 140%;
357 font-weight: bold;
358 }
360 h2 {
361 color: #DF8F06;
362 /* border-top: 1px solid #f3f3f3; */
363 border-left: 8px solid #f3f3f3;
364 padding: 4px 0px 4px 4px;
365 margin: 0;
366 font-size: 140%;
367 font-weight: bold;
368 }
370 h3 {
371 font-weight: bold;
372 color: #6c0023;
373 background: inherit;
374 }
376 a {
377 text-decoration: underline;
378 color: #0F314E;
379 background: inherit;
380 }
382 a:hover {
383 text-decoration: none;
384 color: blue;
385 background: inherit;
386 }
388 code {
389 font-size: 12px;
390 color: #669900;
391 background: inherit;
392 }
394 tt {
395 color: #15EE15;
396 background: inherit;
397 }
399 img {
400 border: 0pt none;
401 }
403 fieldset {
404 background: #E2ECf6;
405 color: black;
406 margin-top: 25px;
407 border: 1px solid black;
408 }
410 legend {
411 border: 1px solid black;
412 color: #6c0023;
413 background: #eaeaea;
414 font-weight: bold;
415 }
417 pre {
418 padding: 5px;
419 color: black;
420 background: #E1E0B0;
421 }
423 pre.script {
424 padding: 10px;
425 color: black;
426 background: #E8E8E8;
427 border: 1px inset #606060;
428 }
430 textarea {
431 background: #E5E5E5;
432 margin-top: 12px;
433 }
435 /* Packages pages */
437 .pkg_nav {
438 border-top: 1px solid black;
439 margin-top: 10px;
440 padding-top: 10px;
441 }
443 pre.package {
444 padding: 0px;
445 color: black;
446 background: white;
447 }
449 p.get {
450 text-align: center;
451 padding: 10px;
452 color: black;
453 background: #F3F3F3;
454 border: 1px solid #DEDEDE;
455 }
457 .year:after {
458 /* content: "2007-2010"; */
459 content: "2010";
460 }