website view slitaz.css @ rev 1240

fr: update most pages to latest header/menu
author Christophe Lincoln <pankso@slitaz.org>
date Sat Dec 20 23:31:47 2014 +0100 (2014-12-20)
parents 66964b8f0217
children 9d8b7e54f6ea
line source
1 /*
2 CSS style for SliTaz Network - (C) 2014 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 min-width: 780px;
15 height: 100%;
16 }
17
18 a { text-decoration: underline; color: #215090; }
19 a:hover { text-decoration: none; }
20 img { border: 0pt none; vertical-align: middle; }
21 h2 { color: #444; }
22 h3 { color: #666; font-size: 140%; }
23 h4 { color: #888; font-size: 120%; }
24 h2, h3 { border-bottom: 1px dashed #afafaf; padding-bottom: 5px; }
25 pre {
26 background-color: #f8f8f8;
27 border: 1px solid #ddd;
28 padding: 10px;
29 }
30
31 /* Header */
32
33 #header {
34 height: 40px;
35 background: #111 url(images/logo.png) no-repeat left;
36 }
37
38 #header h1 {
39 margin: 0;
40 padding: 8px 0 8px 42px;
41 width: 280px;
42 font-size: 20px;
43 font-style: italic;
44 }
45
46 #header h1 a {
47 color: white;
48 text-decoration: none;
49 }
50
51 #header h1 a:hover, #network a:hover, #network span {
52 color: #afafaf;
53 }
54
55 #searchbtn {
56 position: absolute;
57 right: 8px;
58 top: 48px;
59 }
60
61 /* Logo */
62
63 #logo {
64 background: url(images/logo.png) no-repeat left;
65 position: absolute;
66 float: left;
67 left: 0px;
68 top: 0px;
69 width: 40px;
70 height: 40px;
71 }
72
73 /* SliTaz Network */
74
75 #network {
76 float: right;
77 padding: 14px 5px 0;
78 font-size: 12px;
79 }
80
81 #network a, #network span { padding: 0 4px; }
82 #network span { font-weight: bold; }
83
84 /* Block */
85
86 #block {
87 min-height: 180px;
88 background: #ccc;
89 padding: 20px 10% 0px;
90 text-align: center;
91 color: #222;
92 border-bottom: 1px solid #afafaf;
93 }
94
95 #block_info {
96 text-align: justify;
97 width: 48%;
98 padding: 10px 10px 0 0;
99 }
100
101 #block a, #network a {
102 color: #fff;
103 font-weight: bold;
104 text-decoration: none;
105 }
106
107 #block h4 {
108 color: #222;
109 margin: 0px;
110 font-weight: bold;
111 font-size: 110%;
112 }
113
114 #block_info p { margin: 6px 0; padding: 0 12px 0 0; }
115 #block_info a { font-weight: normal; color: #215090; }
116 #block_info a:hover { text-decoration: underline; }
117 #block ul { list-style-type: square; }
118 #block_nav a:hover { color: #afafaf; }
119
120 /* Navigation */
121
122 #block_nav {
123 background: #666;
124 padding: 10px 10px 20px;
125 text-align: justify;
126 width: 48%;
127 float: right;
128 }
129
130 #block_nav ul {
131 list-style-type: none;
132 margin: 6px 0;
133 padding: 0;
134 }
135
136 #block_nav h4 img {
137 margin: 0 4px 0 0;
138 padding: 0;
139 }
140
141 .dlbutton {
142 background: #333 url("/images/download-30.png") no-repeat 4px center;
143 padding-left: 38px;
144 -webkit-transition: background-color 0.6s;
145 transition: background-color 0.5s;
146 }
147 .dldiv { margin: 30px 0; }
148
149 /*
150 *
151 *
152 * Navigation NG
153 *
154 *
155 * */
156
157 nav {
158 font-size: 120%;
159 min-height: 100px;
160 background: #ddd;
161 padding: 56px 6% 0;
162 text-align: center;
163 color: #222;
164 border-bottom: 1px solid #afafaf;
165 top: 40px;
166 }
167
168 nav ul {
169 margin: 0; padding: 0;
170 list-style: none;
171 }
172 nav li { display: inline; }
173
174 nav a, .dlbutton {
175 text-decoration: none;
176 padding: 12px;
177 color: #fff;
178 font-weight: bold;
179 vertical-align: middle;
180 -webkit-transition: background-color 0.6s;
181 transition: background-color 0.5s;
182 }
183 nav p { padding: 8px; color: #333; font-size: 92%; }
184
185 .nav1 { background-color: #333; }
186 .nav1:hover { background-color: #128da9; }
187 .nav2 { background-color: #ab3c00; }
188 .nav2:hover { background-color: #ff9b00; }
189 .navpi { background-color: #444; }
190 .navpi:hover { background-color: #bc1142; }
191
192 /* Languages */
193
194 #lang {
195 padding: 8px;
196 font-size: 12px;
197 position: absolute;
198 right: 0px;
199 color: #666;
200 }
201 #lang .flag { font-size: 14px; }
202 #lang .flag:hover { text-decoration: none; }
203
204 #lang a, #lang strong, #lang span {
205 text-decoration: none;
206 padding: 0 2px;
207 }
208
209 #lang a:hover {
210 text-decoration: underline;
211 }
212
213 .box #lang { text-align: center; position: relative;
214 font-size: 13px; } /* for /i18n page */
215
216 /* Content */
217
218 #content {
219 padding: 30px 80px;
220 text-align: justify;
221 }
222 #content li { line-height: 1.6em; list-style-type: square; }
223
224 .news li {
225 border-bottom: 1px dotted #BEBEBE;
226 margin-left: -25px;
227 padding: 4px 0px 4px 0px;
228 }
229
230 .news a, .feed-grid a { text-decoration: none; }
231 .news p a { text-decoration: underline; }
232 .news p a:hover { text-decoration: none; }
233 #twitter { margin: 20px 0; text-align: center; }
234 #gallery { text-align: center; }
235
236 #sponsor {
237 font-size: 90%;
238 background-color: #fbfbfb;
239 border: 2px solid #ddd;
240 width: 200px;
241 height: 160px;
242 float: right;
243 text-align: center;
244 margin: 10px 0px 20px 20px;
245 }
246
247 /* Classes */
248
249 .mobile { display: none !important; }
250
251 .right_box { width: 48%; float: right; }
252 .left_box { width: 48%; float: left; }
253
254 .box {
255 margin: 20px 60px;
256 padding: 12px;
257 background: #efefef;
258 border: 1px solid #ddd;
259 }
260
261 .box-dl, .box-up {
262 margin: 20px 0;
263 min-height: 48px;
264 border: 1px solid #ddd;
265 vertical-align: middle;
266 }
267 .box-dl {
268 background: url("/images/download.png") no-repeat 12px center;
269 padding: 16px 16px 16px 72px;
270 }
271 .box-up {
272 background: url("/images/update.png") no-repeat 12px center;
273 padding: 16px 16px 16px 62px;
274 }
275 .box-dl a { font-weight: bold; text-decoration: none; }
276 .dlbutton { padding-left: 38px; }
277 pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
278 background-color: #efefef;
279 border: 1px solid #ddd;
280 }
281
282 .searchbox {
283 margin: 20px 80px;
284 padding: 12px;
285 background: #f8f8f8;
286 text-align: center;
287 border: 1px solid #ddd;
288 }
289
290 /* Activity Box */
291
292 .activity {
293 margin: 0 0 20px;
294 background: #efefef;
295 padding: 5px 2px 0;
296 border: 1px solid #ddd;
297 }
298 .activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
299 .activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
300 .activity a { text-decoration: none; }
301 .activity ul { list-style-type: none;
302 margin: 4px 0; padding: 0 4px; line-height: 150%; }
303 .activity_more { text-align: right; }
304 .activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
305 .activity_more a:hover { text-decoration: underline; }
306
307 .activity span, .news span {
308 color: #666;
309 font-size: 11px;
310 font-weight: normal;
311 }
312
313 /* Button */
314
315 #block_info .button a {
316 background-color: #666;
317 color: #ffffff;
318 margin: 0px 4px;
319 padding: 6px 10px;
320 font-size: 12px;
321 text-decoration: none;
322 font-weight: bold;
323 }
324 #block_info .button a:hover, input[type=submit]:hover {
325 background-color: #444;
326 color: #ffffff;
327 }
328
329 /* Round corner */
330
331 #block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a,
332 #twitter, .activity, .activity div, #sponsor, nav a, .dlbutton {
333 -moz-border-radius: 4px;
334 -webkit-border-radius: 4px;
335 border-radius: 4px;
336 }
337
338 /* Form */
339
340 input[type=submit] {
341 border: 1px solid #666;
342 background-color: #666;
343 color: white;
344 font-weight: bold;
345 cursor: pointer;
346 padding: 4px 10px;
347 font-size: 14px;
348 margin-left: -5px;
349 -webkit-border-top-right-radius: 4px;
350 -webkit-border-bottom-right-radius: 4px;
351 -moz-border-radius-topright: 4px;
352 -moz-border-radius-bottomright: 4px;
353 border-top-right-radius: 4px;
354 border-bottom-right-radius: 4px;
355 }
356
357 input[type=submit]:hover { background-color: #444; }
358
359 input[type=text] {
360 border: 1px solid #333333;
361 padding: 4px;
362 height: 17px;
363 width: 100%;
364 -webkit-border-top-left-radius: 4px;
365 -webkit-border-bottom-left-radius: 4px;
366 -moz-border-radius-topleft: 4px;
367 -moz-border-radius-bottomleft: 4px;
368 border-top-left-radius: 4px;
369 border-bottom-left-radius: 4px;
370 }
371
372 /* Footer */
373
374 #footer {
375 background: #f1f1f1;
376 text-align: center;
377 border-top: 1px solid #ddd;
378 padding: 40px;
379 color: #666;
380 clear: both;
381 margin-bottom: -2%;
382 }
383
384 #footer a { color: #666; padding: 0 2px; }
385
386 .year:after {
387 /* content: "2007-2014"; */
388 content: "2014";
389 }
390
391 p, li {
392 -moz-hyphens: auto;
393 -webkit-hyphens: auto;
394 hyphens: auto;
395 }
396
397 /* --- SEARCH --- */
398
399 input.gsc-search-button {
400 border: 1px solid #b64b22;
401 background-color: #b64b22;
402 color: white;
403 font-weight: bold;
404 cursor: pointer;
405 padding: 2px 10px;
406 font-size: 14px;
407 margin-left: -4px;
408 -webkit-border-top-right-radius: 4px;
409 -webkit-border-bottom-right-radius: 4px;
410 -moz-border-radius-topright: 4px;
411 -moz-border-radius-bottomright: 4px;
412 border-top-right-radius: 4px;
413 border-bottom-right-radius: 4px;
414 }
415
416 .gs-webResult.gs-result a.gs-title:link,
417 .gs-webResult.gs-result a.gs-title:link b {
418 color: #103a5e;
419 }
420
421 #cse {
422 margin-bottom: 120px;
423 width:100%;
424 }
425
426
427 /* --- GALLERY --- */
428
429 #gallery div {
430 width: 496px;
431 border: none;
432 border-radius: 12px;
433 padding-bottom: 8px;
434 margin: 12px auto;
435 webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
436 -moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
437 box-shadow: 0 0 6px rgba(0,0,0,0.5);
438 }
439 #gallery img {
440 width: 480px;
441 margin: 8px;
442 }