wok view tazbb/stuff/web/slitaz.css @ rev 7945

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