website view slitaz.css @ rev 766

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