wok view libtaz/stuff/web/slitaz.css @ rev 8822

Put libtaz stuff into wok
author Antoine Bodin <gokhlayeh@slitaz.org>
date Thu Feb 24 00:23:25 2011 +0100 (2011-02-24)
parents
children
line source
1 /*
2 CSS style for SliTaz Network - (c) 2011 SliTaz GNU/Linux
3 */
4
5 html {
6 min-height: 102%;
7 }
8
9 body {
10 background: #ffffff;
11 color: black;
12 font: 13px sans-serif, vernada, arial;
13 margin: 0;
14 border-top: 34px solid #f1f1f1;
15 }
16 a { text-decoration: underline; color: #103a5e; }
17 a:hover { text-decoration: none; color: blue; }
18 img { border: 0pt none; }
19
20 /* Accessibility */
21
22 #access {
23 position: absolute;
24 top: 4px;
25 right: 0px;
26 text-align: right;
27 width: auto;
28 margin: 0;
29 padding: 4px 4px 4px 20px;
30 font-size: 11px;
31 font-weight: bold;
32 }
33
34 #access a {
35 background: transparent;
36 color: #0F314E;
37 text-decoration: none;
38 }
39 #access a:hover { color: #b64b22; }
40 #access img { vertical-align: middle; }
41
42 /* Header */
43
44 #header {
45 background: #351a0a url(header-img.png) no-repeat top right;
46 color: black;
47 width: 100%;
48 height: 42px;
49 border-top: 1px solid black;
50 border-bottom: 1px solid #999;
51 margin-bottom: 33px;
52 }
53
54 #titre {
55 position: absolute;
56 font-size: 14px;
57 font-weight: bolder ;
58 left: 180px;
59 top: 4px;
60 }
61
62 #logo {
63 position: absolute;
64 float: left;
65 left: 16px;
66 top: -10px;
67 width: 200px;
68 height: 74px;
69 }
70
71 /* Side bar */
72
73 #nav {
74 position: absolute;
75 top: 102px;
76 right: 80px;
77 color: #555555;
78 float: right;
79 width: 250px;
80 line-height: 1.5em;
81 text-align: left;
82 font-size: 12px;
83 }
84
85 #nav h4 {
86 font-size: 120%;
87 color: #666666;
88 font-weight: bold;
89 margin: 0;
90 padding: 0 0 1px 0;
91 border-bottom: 1px solid #cecece;
92 }
93
94 #nav a {
95 color: #0F314E;
96 background: inherit;
97 display: block;
98 text-decoration: none;
99 font-weight: bold;
100 }
101
102 #nav a:hover {
103 color: #b64b22;
104 text-decoration: none;
105 display: block;
106 }
107
108 #nav .nav_box ul {
109 list-style-type: none;
110 margin: 0;
111 padding: 10px 24px 10px 0px;
112 background-color: inherit;
113 }
114
115 #nav li { display: inline; }
116
117 #nav ul {
118 -moz-border-radius: 8px;
119 -webkit-border-radius: 8px;
120 border-radius: 8px;
121 list-style-type: none;
122 margin: 10px 0;
123 padding: 10px 24px 10px 24px;
124 background-color: #eaeaea;
125 }
126
127 .nav_box {
128 margin: 10px 0;
129 padding: 10px 24px 10px 24px;
130 background-color: #eaeaea;
131 text-align: justify;
132 }
133
134 #nav .nav_box p { line-height: 1.3em; }
135
136 #nav .nav_box p a {
137 display: inline;
138 font-weight: normal;
139 text-decoration: underline;
140 }
141
142 #nav .nav_box p a:hover {
143 text-decoration: none;
144 color: blue;
145 background: inherit;
146 }
147
148 /* Page content */
149
150 #content, #content-full {
151 background: white;
152 color: black;
153 text-align: justify;
154 height: auto;
155 margin: 6px 320px 0px 0px;
156 padding: 0px 40px 60px 80px;
157 }
158 #content-full {
159 margin: 0;
160 padding: 0px 80px 40px 80px;
161 }
162 #content li, #content-full li {
163 line-height: 1.5em;
164 text-align: left;
165 }
166 #news li {
167 list-style-type: square;
168 border-bottom: 1px dotted #BEBEBE;
169 margin-left: -25px;
170 padding: 4px 0px 4px 0px;
171 }
172 #news a { text-decoration: none; }
173
174 /* Box and block. */
175
176 .infobox {
177 margin: 20px 60px;
178 padding: 12px;
179 background: #f8f8f8;
180 }
181 .infobox img { vertical-align: middle; }
182 .infobox:hover { background-color: #FBFBFB; }
183 .block {
184 /*padding-bottom: 35%;*/
185 color: black;
186 min-height: 200px;
187 margin-bottom: 40px;
188 }
189 .block ul {
190 list-style-type: none;
191 margin: 0;
192 padding: 0 20px;
193 }
194 .block_left {
195 width: 46%;
196 float: left;
197 background-color: #eaeaea;
198 margin: 4px 2px;
199 padding: 0 10px 10px 10px;
200 }
201 .block_right {
202 width: 46%;
203 float: right;
204 background-color: #eaeaea;
205 margin: 4px 2px;
206 padding: 0 10px 10px 10px;
207 }
208 #block_top {
209 color: black;
210 background-color: #eaeaea;
211 min-height: 180px;
212 margin-bottom: 40px;
213 margin-right: 340px;
214 padding: 0 10px;
215 }
216 #block_nav {
217 width: 300px;
218 min-height: 180px;
219 float: right;
220 background-color: #eaeaea;
221 margin: 0;
222 padding: 0 10px;
223 }
224 .nav_box, .infobox, .block_left, .block_right, #block_top,
225 #block_nav, #footer {
226 -moz-border-radius: 8px;
227 -webkit-border-radius: 8px;
228 border-radius: 8px;
229 -moz-box-shadow: 0 1px 3px #666;
230 -webkit-box-shadow: 0 1px 3px #666;
231 box-shadow: 0 1px 3px #666;
232 /* CSS3 transition */
233 -webkit-transition-property: background-color;
234 -webkit-transition-duration: 2s;
235 -moz-transition-property: background-color;
236 -moz-transition-duration: 2s;
237 transition-property: background-color;
238 transition-duration: 2s;
239 }
240 #block_nav { font-weight: bold; }
241 #block_nav a { text-decoration: none; }
242 #block_nav li a:hover { color: #b64b22; }
243 #block_nav ul { margin: 0; list-style-type: none; }
244 #block_nav h3 { font-size: 110%; }
245 .nav_box:hover, .block_left:hover, .block_right:hover,
246 #block_top:hover, #block_nav:hover, #footer:hover {
247 background-color: #f8f8f8;
248 }
249 .right_box {
250 width: 50%;
251 float: right;
252 }
253 /* Text transform at 45deg */
254 .floor {
255 color: #999999;
256 font-size: 20px;
257 -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
258 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
259 -o-transform: rotate(-45deg) skew(15deg, 15deg);
260 -ms-transform: rotate(-45deg) skew(15deg, 15deg);
261 transform: rotate(-45deg) skew(15deg, 15deg);
262 }
263 #twitter, .feedbox {
264 margin-top: 20px;
265 -moz-border-radius: 8px;
266 -webkit-border-radius: 8px;
267 border-radius: 8px;
268 -moz-box-shadow: 0 1px 3px #666;
269 -webkit-box-shadow: 0 1px 3px #666;
270 box-shadow: 0 1px 3px #666;
271 }
272 .feedbox {
273 background-color: #f9f9f9;
274 padding: 10px 20px;
275 margin: 20px 100px;
276 }
277 .feedbox div {
278 height: 320px;
279 overflow: auto;
280 }
281 .feedbox ul { list-style-type: none; margin: 0; }
282
283 /* Button */
284
285 .button { margin-left: 20px; }
286 .button a {
287 background-color: #b64b22;
288 color: #ffffff;
289 margin-right: 6px;
290 padding: 6px 10px;
291 font-size: 14px;
292 -moz-border-radius: 4px;
293 -webkit-border-radius: 4px;
294 border-radius: 4px;
295 -moz-box-shadow: 0 1px 3px #666;
296 -webkit-box-shadow: 0 1px 3px #666;
297 box-shadow: 0 1px 3px #666;
298 }
299 .button a:hover, input[type=submit]:hover {
300 background-color: #a3431f;
301 color: #ffffff;
302 }
303 input[type=submit] {
304 border: 1px solid #b64b22;
305 background-color: #b64b22;
306 color: white;
307 font-weight: bold;
308 cursor: pointer;
309 padding: 3px 10px;
310 font-size: 14px;
311 -moz-border-radius: 2px;
312 -webkit-border-radius: 2px;
313 border-radius: 2px;
314 -moz-box-shadow: 0 0 5px #666;
315 -webkit-box-shadow: 0 0 5px#666;
316 box-shadow: 0 0 5px #666;
317 margin-left: -5px;
318 }
319 input[type=text] {
320 border: 1px solid #333333;
321 padding: 3px;
322 width: 100%;
323 }
324
325 /* Clouds */
326
327 #cloud {
328 padding: 10px 0px;
329 line-height: 3em;
330 text-align: center;
331 }
332 #cloud a { padding: 0 2px; color: #444444; }
333 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
334 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
335 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
336 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
337 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
338 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
339 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
340 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
341 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
342 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
343
344 /* Slideshow and gallery */
345
346 #slideshow
347 {
348 overflow: hidden;
349 margin: 10px auto 10px;
350 position: relative;
351 width: 260px;
352 height: 163px;
353 }
354
355 #slideshow img
356 {
357 border: 0;
358 width: 260px;
359 height: 163px;
360 }
361
362 #gallery { text-align: center; }
363
364 /* HTML styles */
365
366 h1 {
367 color: #444444;
368 background: transparent;
369 text-align: left;
370 margin: 0px 0px 4px 0px;
371 font-size: 150%;
372 font-weight: bold;
373 padding: 5px 0 0 10px;
374 }
375
376 h2 {
377 color: #b64b22;
378 padding: 0;
379 margin: 20px 0 0 0;
380 font-size: 130%;
381 font-weight: bold;
382 }
383
384 h3 {
385 font-weight: bold;
386 color: #666666;
387 background: transparent;
388 }
389
390 h3 img, h2 img {
391 vertical-align: middle;
392 width: 20px;
393 height: 20px;
394 padding-right: 4px;
395 }
396 code, tt {
397 font-size: 12px;
398 color: #669900;
399 }
400
401 pre, pre.script {
402 padding: 10px;
403 color: black;
404 background: #E8E8E8;
405 border: 1px inset #606060;
406 }
407
408 /* Packages pages */
409
410 .pkg_nav {
411 border-top: 1px solid black;
412 margin-top: 10px;
413 padding-top: 10px;
414 }
415
416 pre.package {
417 padding: 0px;
418 color: black;
419 background: white;
420 border: 0px solid #fff;
421 }
422
423 p.get {
424 text-align: center;
425 padding: 10px;
426 color: black;
427 background: #F3F3F3;
428 border: 1px solid #DEDEDE;
429 border-radius: 4px;
430 -moz-border-radius: 4px;
431 -webkit-border-radius: 4px;
432 }
433 p.get a {
434 font-weight: bold;
435 text-decoration: none;
436 }
437 .pkgs-search {
438 text-align: center;
439 padding: 40px 20px 80px 20px;
440 }
441
442 #footer {
443 margin: 0px 80px 80px 80px;
444 padding: 10px;
445 background: #eaeaea;
446 color: #666666;
447 height: 180px;
448 clear: both;
449 border-radius: 8px;
450 -moz-border-radius: 8px;
451 -webkit-border-radius: 8px;
452 -moz-box-shadow: 0 1px 3px #666;
453 -webkit-box-shadow: 0 1px 3px #666;
454 box-shadow: 0 1px 3px #666;
455 }
456
457 #footer a { color: #666666; }
458 #footer a:hover { color: #333333; }
459 #footer ul { list-style-type: none; }
460 #footer li { padding: 2px; }
461 #footer h4 { margin: 0 20px; font-size: 125%; }
462
463 .year:after {
464 /* content: "2007-2011"; */
465 content: "2011";
466 }
467
468 /* Report style */
469
470 #report {
471 margin: 5px;
472 }
473
474 #report div {
475 padding: 3px;
476 margin: 0px;
477 outline: 1px solid white
478 }
479
480 #report div.message {
481 background: transparent;
482 border: black 1px solid;
483 border-left: black 3px solid;
484 }
485
486 #report div.ok {
487 background: #d2ffd2;
488 border: green 1px solid;
489 border-left: green 3px solid;
490 }
491
492 #report div.warning {
493 background: #ffffd2;
494 border: yellow 1px solid;
495 border-left: yellow 3px solid;
496 }
497
498 #report div.failed {
499 background: #ffd2d2;
500 border: red 1px solid;
501 border-left: red 3px solid;
502 }
503
504 #report span.error {
505 background: red;
506 padding: 0px;
507 margin: 0px;
508 border: 0px;
509 width: 100%;
510 display: inline-block;
511 }
512
513 #report pre {
514 background: black;
515 color: white;
516 padding: 3px;
517 margin: 0px;
518 border: 0px;
519 word-wrap: break-word;
520 white-space: normal;
521 }
522
523 #report h1 {
524 display: inline;
525 }
526
527 #report h2 {
528 display: inline;
529 }
530
531 #report h3 {
532 display: inline;
533 }
534
535 #report h4 {
536 display: inline;
537 }
538
539 #report h5 {
540 display: inline;
541 }
542
543 #report h6 {
544 display: inline;
545 }