website view slitaz.css @ rev 722
Tiny edits (again)
| author | Paul Issott <paul@slitaz.org> |
|---|---|
| date | Sat Jan 08 18:16:06 2011 +0000 (2011-01-08) |
| parents | 2f6d751facc2 |
| children | d91aaad83ac7 |
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 /* Button */
321 .button { margin-left: 20px; }
323 .button a {
324 background-color: #b64b22;
325 color: #ffffff;
326 margin-right: 6px;
327 padding: 6px 10px;
328 font-size: 14px;
329 -moz-border-radius: 4px;
330 -webkit-border-radius: 4px;
331 border-radius: 4px;
332 -moz-box-shadow: 0 1px 3px #666;
333 -webkit-box-shadow: 0 1px 3px #666;
334 box-shadow: 0 1px 3px #666;
335 }
337 .button a:hover, input[type=submit]:hover {
338 background-color: #a3431f;
339 color: #ffffff;
340 }
342 input[type=submit] {
343 border: 1px solid #b64b22;
344 background-color: #b64b22;
345 color: white;
346 font-weight: bold;
347 cursor: pointer;
348 padding: 2px 10px;
349 font-size: 14px;
350 -moz-border-radius: 2px;
351 -webkit-border-radius: 2px;
352 border-radius: 2px;
353 -moz-box-shadow: 0 0 5px #666;
354 -webkit-box-shadow: 0 0 5px#666;
355 box-shadow: 0 0 5px #666;
356 }
358 input[type=text] {
359 border: 1px solid #333333;
360 padding: 3px;
361 width: 100%;
362 max-width: 500px;
363 }
365 /* Clouds */
367 #cloud {
368 padding: 20px 0px 20px 0px;
369 line-height: 3em;
370 text-align: center;
371 }
372 #cloud a { padding: 4px; color: #956411; }
373 #cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
374 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
375 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
376 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
377 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
378 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
379 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
380 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
381 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
382 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }
384 /* Slideshow. */
386 #slideshow
387 {
388 overflow: hidden;
389 margin: 10px auto 10px;
390 position: relative;
391 width: 260px;
392 height: 163px;
393 }
395 #slideshow img
396 {
397 border: 0;
398 width: 260px;
399 height: 163px;
400 }
402 #twitter {
403 margin-top: 20px;
404 -moz-border-radius: 8px;
405 -webkit-border-radius: 8px;
406 border-radius: 8px;
407 -moz-box-shadow: 0 1px 3px #666;
408 -webkit-box-shadow: 0 1px 3px #666;
409 box-shadow: 0 1px 3px #666;
410 }
412 /* HTML styles */
414 h1 {
415 color: #444444;
416 background: transparent;
417 text-align: left;
418 margin: 0px 0px 4px 0px;
419 font-size: 150%;
420 font-weight: bold;
421 padding: 5px 0 0 10px;
422 }
424 h2 {
425 color: #b64b22;
426 padding: 0;
427 margin: 20px 0 0 0;
428 font-size: 130%;
429 font-weight: bold;
430 }
432 h3 {
433 font-weight: bold;
434 color: #666666;
435 background: transparent;
436 }
438 h3 img {
439 vertical-align: middle;
440 width: 20px;
441 height: 20px;
442 padding-right: 4px;
443 }
445 a {
446 text-decoration: underline;
447 color: #103A5E;
448 background: inherit;
449 }
451 a:hover {
452 text-decoration: none;
453 color: blue;
454 background: inherit;
455 }
457 code {
458 font-size: 12px;
459 color: #669900;
460 background: inherit;
461 }
463 tt {
464 color: #15EE15;
465 background: inherit;
466 }
468 img {
469 border: 0pt none;
470 }
472 fieldset {
473 background: #E2ECf6;
474 color: black;
475 margin-top: 25px;
476 border: 1px solid black;
477 }
479 legend {
480 border: 1px solid black;
481 color: #6c0023;
482 background: #eaeaea;
483 font-weight: bold;
484 }
486 pre {
487 padding: 5px;
488 color: black;
489 background: #E1E0B0;
490 }
492 pre.script {
493 padding: 10px;
494 color: black;
495 background: #E8E8E8;
496 border: 1px inset #606060;
497 }
499 textarea {
500 background: #E5E5E5;
501 margin-top: 12px;
502 }
504 /* Packages pages */
506 .pkg_nav {
507 border-top: 1px solid black;
508 margin-top: 10px;
509 padding-top: 10px;
510 }
512 pre.package {
513 padding: 0px;
514 color: black;
515 background: white;
516 }
518 p.get {
519 text-align: center;
520 padding: 10px;
521 color: black;
522 background: #F3F3F3;
523 border: 1px solid #DEDEDE;
524 border-radius: 4px;
525 -moz-border-radius: 4px;
526 -webkit-border-radius: 4px;
527 }
529 p.get a {
530 font-weight: bold;
531 text-decoration: none;
532 }
534 .pkgs-search {
535 text-align: center;
536 padding: 40px 20px 80px 20px;
537 }
539 .year:after {
540 /* content: "2007-2011"; */
541 content: "2011";
542 }
544 /* Footer */
546 #footer {
547 margin: 0px 80px 80px 80px;
548 padding: 10px;
549 background: #eaeaea;
550 color: #666666;
551 height: 180px;
552 border-radius: 8px;
553 -moz-border-radius: 8px;
554 -webkit-border-radius: 8px;
555 -moz-box-shadow: 0 1px 3px #666;
556 -webkit-box-shadow: 0 1px 3px #666;
557 box-shadow: 0 1px 3px #666;
558 }
559 #footer a {
560 background: inherit;
561 color: #666666;
562 }
563 #footer a:hover {
564 background: inherit;
565 color: #333333;
566 }
567 #footer ul {
568 list-style-type: none;
569 }
570 #footer li {
571 padding: 2px;
572 }
573 #footer h4 {
574 margin: 0 20px;
575 font-size: 125%;
576 }