slitaz-forge view tank/web/slitaz.css @ rev 20
add: passenger
| author | Eric Joseph-Alexandre <erjo@slitaz.org> |
|---|---|
| date | Wed Mar 02 01:20:10 2011 +0100 (2011-03-02) |
| parents | |
| children | 08ebcbf62731 |
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 #access img {
44 vertical-align: middle;
45 }
47 /* Header and title */
49 #header {
50 /*background: #f0ba08 url(pics/website/header.png) repeat-x top;*/
51 background: #351a0a url(pics/website/header-img.png) no-repeat top right;
52 color: black;
53 width: 100%;
54 height: 42px;
55 border-top: 1px solid black;
56 border-bottom: 1px solid #999;
57 margin-bottom: 33px;
58 }
60 #titre {
61 position: absolute;
62 font-size: 14px;
63 font-weight: bolder ;
64 left: 180px;
65 top: 4px;
66 }
68 #logo {
69 position: absolute;
70 float: left;
71 left: 16px;
72 top: -10px;
73 width: 200px;
74 height: 74px;
75 }
77 /* Side bar Navigation */
79 #nav {
80 position: absolute;
81 top: 102px;
82 right: 80px;
83 color: #555555;
84 float: right;
85 width: 250px;
86 line-height: 1.5em;
87 text-align: left;
88 font-size: 12px;
89 }
91 #nav .nav_box ul {
92 list-style-type: none;
93 margin: 0;
94 padding: 10px 24px 10px 0px;
95 background-color: inherit;
96 }
98 #nav li {
99 display: inline;
100 }
102 #nav h4 {
103 font-size: 120%;
104 color: #666666;
105 font-weight: bold;
106 margin: 0;
107 padding: 0 0 1px 0;
108 border-bottom: 1px solid #cecece;
109 }
111 #nav a {
112 color: #0F314E;
113 background: inherit;
114 display: block;
115 text-decoration: none;
116 font-weight: bold;
117 }
119 #nav a:hover {
120 color: #b64b22;
121 text-decoration: none;
122 display: block;
123 }
125 #nav ul {
126 -moz-border-radius: 8px;
127 -webkit-border-radius: 8px;
128 border-radius: 8px;
129 list-style-type: none;
130 margin: 10px 0;
131 padding: 10px 24px 10px 24px;
132 background-color: #eaeaea;
133 }
135 .nav_box {
136 margin: 10px 0;
137 padding: 10px 24px 10px 24px;
138 background-color: #eaeaea;
139 text-align: justify;
140 -moz-border-radius: 8px;
141 -webkit-border-radius: 8px;
142 border-radius: 8px;
143 -moz-box-shadow: 0 1px 3px #666;
144 -webkit-box-shadow: 0 1px 3px #666;
145 box-shadow: 0 1px 3px #666;
146 /* CSS3 transition */
147 -webkit-transition-property: background-color;
148 -webkit-transition-duration: 2s;
149 -moz-transition-property: background-color;
150 -moz-transition-duration: 2s;
151 transition-property: background-color;
152 transition-duration: 2s;
153 }
155 .nav_box:hover { background-color: #f8f8f8; }
157 #nav .nav_box p {
158 line-height: 1.3em;
159 }
161 #nav .nav_box p a {
162 display: inline;
163 font-weight: normal;
164 text-decoration: underline;
165 }
167 #nav .nav_box p a:hover {
168 text-decoration: none;
169 color: blue;
170 background: inherit;
171 }
173 /* Page content */
175 #content {
176 background: white;
177 color: black;
178 text-align: justify;
179 height: auto;
180 margin: 6px 320px 0px 0px;
181 padding: 0px 40px 60px 80px;
182 }
184 #content-full {
185 background: white;
186 color: black;
187 text-align: justify;
188 height: auto;
189 margin: 0;
190 padding: 0px 80px 40px 80px;
191 }
193 #content li, #content-full li {
194 line-height: 1.5em;
195 text-align: left;
196 }
198 #news li {
199 list-style-type: square;
200 border-bottom: 1px dotted #BEBEBE;
201 margin-left: -25px;
202 padding: 4px 0px 4px 0px;
203 }
205 #news a {
206 text-decoration: none;
207 }
209 #gallery {
210 text-align: center;
211 }
213 /* Box and block. */
215 .infobox {
216 margin: 20px 60px;
217 padding: 12px;
218 background: #f8f8f8;
219 }
221 .infobox img { vertical-align: middle; }
222 /* .infobox:hover { background-color: #f2b21d; } */
223 .infobox:hover { background-color: #FBFBFB; }
225 .block {
226 /*padding-bottom: 35%;*/
227 color: black;
228 min-height: 200px;
229 margin-bottom: 40px;
230 }
232 .block ul {
233 list-style-type: none;
234 margin: 0;
235 padding: 0 20px;
236 }
238 .block_left {
239 width: 46%;
240 float: left;
241 background-color: #eaeaea;
242 margin: 4px 2px;
243 padding: 0 10px 10px 10px;
244 }
246 .block_right {
247 width: 46%;
248 float: right;
249 background-color: #eaeaea;
250 margin: 4px 2px;
251 padding: 0 10px 10px 10px;
252 }
254 #block_top {
255 color: black;
256 background-color: #eaeaea;
257 min-height: 180px;
258 margin-bottom: 40px;
259 margin-right: 340px;
260 padding: 0 10px;
261 }
263 #block_nav {
264 width: 300px;
265 min-height: 180px;
266 float: right;
267 background-color: #eaeaea;
268 margin: 0;
269 padding: 0 10px;
270 }
272 .infobox, .block_left, .block_right, #block_top, #block_nav, #footer {
273 -moz-border-radius: 8px;
274 -webkit-border-radius: 8px;
275 border-radius: 8px;
276 -moz-box-shadow: 0 1px 3px #666;
277 -webkit-box-shadow: 0 1px 3px #666;
278 box-shadow: 0 1px 3px #666;
279 /* CSS3 transition */
280 -webkit-transition-property: background-color;
281 -webkit-transition-duration: 2s;
282 -moz-transition-property: background-color;
283 -moz-transition-duration: 2s;
284 transition-property: background-color;
285 transition-duration: 2s;
286 }
288 #block_nav {
289 font-weight: bold;
290 }
292 #block_nav a {
293 text-decoration: none;
294 }
296 #block_nav li a:hover {
297 color: #b64b22;
298 }
300 #block_nav ul {
301 margin: 0;
302 list-style-type: none;
303 }
305 #block_nav h3 {
306 font-size: 110%;
307 }
309 .block_left:hover, .block_right:hover, #block_top:hover,
310 #block_nav:hover, #footer:hover {
311 background-color: #f8f8f8;
312 }
314 .right_box {
315 width: 50%;
316 float: right;
317 }
319 .floor {
320 color: #999999;
321 font-size: 20px;
322 -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
323 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
324 -o-transform: rotate(-45deg) skew(15deg, 15deg);
325 -ms-transform: rotate(-45deg) skew(15deg, 15deg);
326 transform: rotate(-45deg) skew(15deg, 15deg);
327 }
329 /* Button */
331 .button { margin-left: 20px; }
333 .button a {
334 background-color: #b64b22;
335 color: #ffffff;
336 margin-right: 6px;
337 padding: 6px 10px;
338 font-size: 14px;
339 -moz-border-radius: 4px;
340 -webkit-border-radius: 4px;
341 border-radius: 4px;
342 -moz-box-shadow: 0 1px 3px #666;
343 -webkit-box-shadow: 0 1px 3px #666;
344 box-shadow: 0 1px 3px #666;
345 }
347 .button a:hover, input[type=submit]:hover {
348 background-color: #a3431f;
349 color: #ffffff;
350 }
352 input[type=submit] {
353 border: 1px solid #b64b22;
354 background-color: #b64b22;
355 color: white;
356 font-weight: bold;
357 cursor: pointer;
358 padding: 2px 10px;
359 font-size: 14px;
360 -moz-border-radius: 2px;
361 -webkit-border-radius: 2px;
362 border-radius: 2px;
363 -moz-box-shadow: 0 0 5px #666;
364 -webkit-box-shadow: 0 0 5px#666;
365 box-shadow: 0 0 5px #666;
366 }
368 input[type=text] {
369 border: 1px solid #333333;
370 padding: 3px;
371 width: 100%;
372 max-width: 500px;
373 }
375 /* Clouds */
377 #cloud {
378 padding: 10px 0px;
379 line-height: 3em;
380 text-align: center;
381 }
382 #cloud a { padding: 0 2px; color: #956411; }
383 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
384 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
385 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
386 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
387 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
388 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
389 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
390 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
391 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
392 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
394 /* Slideshow. */
396 #slideshow
397 {
398 overflow: hidden;
399 margin: 10px auto 10px;
400 position: relative;
401 width: 260px;
402 height: 163px;
403 }
405 #slideshow img
406 {
407 border: 0;
408 width: 260px;
409 height: 163px;
410 }
412 #twitter {
413 margin-top: 20px;
414 -moz-border-radius: 8px;
415 -webkit-border-radius: 8px;
416 border-radius: 8px;
417 -moz-box-shadow: 0 1px 3px #666;
418 -webkit-box-shadow: 0 1px 3px #666;
419 box-shadow: 0 1px 3px #666;
420 }
422 /* HTML styles */
424 h1 {
425 color: #444444;
426 background: transparent;
427 text-align: left;
428 margin: 0px 0px 4px 0px;
429 font-size: 150%;
430 font-weight: bold;
431 padding: 5px 0 0 10px;
432 }
434 h2 {
435 color: #b64b22;
436 padding: 0;
437 margin: 20px 0 0 0;
438 font-size: 130%;
439 font-weight: bold;
440 }
442 h3 {
443 font-weight: bold;
444 color: #666666;
445 background: transparent;
446 }
448 h3 img {
449 vertical-align: middle;
450 width: 20px;
451 height: 20px;
452 padding-right: 4px;
453 }
455 a {
456 text-decoration: underline;
457 color: #103A5E;
458 background: inherit;
459 }
461 a:hover {
462 text-decoration: none;
463 color: blue;
464 background: inherit;
465 }
467 code {
468 font-size: 12px;
469 color: #669900;
470 background: inherit;
471 }
473 tt {
474 color: #15EE15;
475 background: inherit;
476 }
478 img {
479 border: 0pt none;
480 }
482 fieldset {
483 background: #E2ECf6;
484 color: black;
485 margin-top: 25px;
486 border: 1px solid black;
487 }
489 legend {
490 border: 1px solid black;
491 color: #6c0023;
492 background: #eaeaea;
493 font-weight: bold;
494 }
496 pre {
497 padding: 5px;
498 color: black;
499 background: #E1E0B0;
500 }
502 pre.script {
503 padding: 10px;
504 color: black;
505 background: #E8E8E8;
506 border: 1px inset #606060;
507 }
509 textarea {
510 background: #E5E5E5;
511 margin-top: 12px;
512 }
514 /* Packages pages */
516 .pkg_nav {
517 border-top: 1px solid black;
518 margin-top: 10px;
519 padding-top: 10px;
520 }
522 pre.package {
523 padding: 0px;
524 color: black;
525 background: white;
526 }
528 p.get {
529 text-align: center;
530 padding: 10px;
531 color: black;
532 background: #F3F3F3;
533 border: 1px solid #DEDEDE;
534 border-radius: 4px;
535 -moz-border-radius: 4px;
536 -webkit-border-radius: 4px;
537 }
539 p.get a {
540 font-weight: bold;
541 text-decoration: none;
542 }
544 .pkgs-search {
545 text-align: center;
546 padding: 40px 20px 80px 20px;
547 }
549 .year:after {
550 /* content: "2007-2011"; */
551 content: "2011";
552 }
554 /* Footer */
556 #footer {
557 margin: 0px 80px 80px 80px;
558 padding: 10px;
559 background: #eaeaea;
560 color: #666666;
561 height: 180px;
562 clear: both;
563 border-radius: 8px;
564 -moz-border-radius: 8px;
565 -webkit-border-radius: 8px;
566 -moz-box-shadow: 0 1px 3px #666;
567 -webkit-box-shadow: 0 1px 3px #666;
568 box-shadow: 0 1px 3px #666;
569 }
570 #footer a {
571 background: inherit;
572 color: #666666;
573 }
574 #footer a:hover {
575 background: inherit;
576 color: #333333;
577 }
578 #footer ul {
579 list-style-type: none;
580 }
581 #footer li {
582 padding: 2px;
583 }
584 #footer h4 {
585 margin: 0 20px;
586 font-size: 125%;
587 }