slitaz-forge view mirror/root/static/slitaz.css @ rev 357

2013
author Pascal Bellard <pascal.bellard@slitaz.org>
date Tue Mar 26 09:07:46 2013 +0100 (2013-03-26)
parents 3072d694c60d
children de51d78ccff7
line source
1 /*
2 CSS style for SliTaz Network - (C) 2012 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; color: blue; }
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 pre {
25 background-color: #f8f8f8;
26 border: 1px solid #ddd;
27 padding: 10px;
28 }
29 table {
30 background-color: #f8f8f8;
31 border: 1px solid #ddd;
32 width: 100%;
33 margin: 0px 0px 20px 0px;
34 padding: 10px;
35 }
36
37 /* Header */
38
39 #header {
40 height: 40px;
41 background: #351a0a;
42 color: #ffffff;
43 }
44
45 #header h1 {
46 margin: 0;
47 padding: 8px 0 0 42px;
48 width: 250px;
49 }
50
51 #header h1 a {
52 color: white;
53 text-decoration: none;
54 font-size: 20px;
55 font-style: italic;
56 }
57
58 #header h1 a:hover, #network a:hover {
59 color: #d66018;
60 }
61
62 /* Logo */
63
64 #logo {
65 background: url(logo.png) no-repeat left;
66 position: absolute;
67 float: left;
68 left: 0px;
69 top: 0px;
70 width: 40px;
71 height: 40px;
72 }
73
74 /* SliTaz Network */
75
76 #network {
77 float: right;
78 padding: 10px 5px 0;
79 font-size: 12px;
80 }
81
82 #network a { padding: 0 6px; }
83
84 /* Block */
85
86 #block {
87 min-height: 200px;
88 background: #d66018;
89 padding: 26px 10% 0px;
90 text-align: center;
91 color: #333;
92 border-bottom: 1px solid #f5f5f5;
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: #351a0a;
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; }
116 #block ul { list-style-type: square; }
117 #block a:hover { color: #351a0a; }
118
119 /* Navigation */
120
121 #block_nav {
122 background: #cc5b17;
123 padding: 10px 10px 40px;
124 text-align: justify;
125 width: 48%;
126 float: right;
127 }
128
129 #block_nav ul {
130 list-style-type: none;
131 margin: 6px 0;
132 padding: 0;
133 }
134
135 #block_nav h4 img {
136 margin: 0 4px 0 0;
137 padding: 0;
138 }
139
140 /* Languages */
141
142 #lang {
143 position: absolute;
144 right: 0;
145 padding: 6px;
146 font-size: 11px;
147 }
148
149 #lang a {
150 text-decoration: none;
151 padding: 0 2px;
152 }
153
154 #lang a:hover {
155 text-decoration: underline;
156 }
157
158 /* Content */
159
160 #content {
161 padding: 30px 80px;
162 text-align: justify;
163 }
164
165 .news li {
166 list-style-type: square;
167 border-bottom: 1px dotted #BEBEBE;
168 margin-left: -25px;
169 padding: 4px 0px 4px 0px;
170 }
171
172 .news a, .feed-grid a { text-decoration: none; }
173 .news p a { text-decoration: underline; }
174 .news p a:hover { text-decoration: none; }
175 #twitter { margin: 20px 0; }
176 #gallery { text-align: center; }
177
178 #sponsor {
179 font-size: 90%;
180 background-color: #fbfbfb;
181 border: 2px solid #ddd;
182 width: 200px;
183 height: 160px;
184 float: right;
185 text-align: center;
186 margin: 10px 0px 20px 20px;
187 }
188
189 #mirrors {
190 padding: 10px;
191 margin: 10px 0px 20px;
192 text-align: center;
193 background: #f1f1f1;
194 border: 2px solid #ddd;
195 }
196
197 /* Classes */
198
199 .right_box { width: 48%; float: right; }
200 .left_box { width: 48%; float: left; }
201
202 .box {
203 margin: 20px 60px;
204 padding: 12px;
205 background: #efefef;
206 border: 1px solid #ddd;
207 }
208
209 .searchbox {
210 margin: 20px 80px;
211 padding: 12px;
212 background: #f8f8f8;
213 text-align: center;
214 border: 1px solid #ddd;
215 }
216
217 /* Activity Box */
218
219 .activity {
220 margin: 0 0 20px;
221 background: #efefef;
222 padding: 5px 2px 0;
223 border: 1px solid #ddd;
224 }
225 .activity div { padding: 5px 10px; background: #fff; margin-top: 5px; }
226 .activity p { margin: 0; padding: 5px 10px; font-weight: bold; }
227 .activity a { text-decoration: none; }
228 .activity ul { list-style-type: none;
229 margin: 4px 0; padding: 0 4px; line-height: 150%; }
230 .activity_more { text-align: right; }
231 .activity_more a { font-weight: normal; color: #000; padding: 0 4px; }
232 .activity_more a:hover { text-decoration: underline; }
233
234 .activity span, .news span {
235 color: #666;
236 font-size: 11px;
237 font-weight: normal;
238 }
239
240 /* Button */
241
242 .button a {
243 background-color: #b64b22;
244 color: #ffffff;
245 margin-right: 6px;
246 padding: 6px 10px;
247 font-size: 12px;
248 text-decoration: none;
249 font-weight: bold;
250 }
251 .button a:hover, input[type=submit]:hover {
252 background-color: #a3431f;
253 color: #ffffff;
254 }
255
256 /* Round corner */
257
258 #block_nav, pre, .box, .searchbox, .button a, #twitter, .activity,
259 .activity div, #sponsor, #mirrors, table, input, textarea, select {
260 -moz-border-radius: 4px;
261 -webkit-border-radius: 4px;
262 border-radius: 4px;
263 }
264
265 /* Form */
266
267 form { display: inline; }
268 input[type="submit"], input[type="text"], textarea, select {
269 color: #444444;
270 border: 1px solid #cccccc;
271 padding: 4px;
272 margin: 4px 0px;
273 font-size: 14px;
274 line-height: 1.2em;
275 background-image: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
276 background-image: -moz-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
277 -webkit-appearance: none;
278 -webkit-padding-end: 6px;
279 -webkit-padding-start: 6px;
280 }
281
282 input[type="text"], textarea { background: #fefefe; border: 2px solid #ccc;
283 width: 460px; }
284 /*input[type="file"] { border: 2px solid #ddd; }*/
285 /*input[type="checkbox"] { background: #fefefe; }*/
286
287 /* Be compatible with old FF and Webkit version. */
288 input[type="submit"] {
289 -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
290 -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
291 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
292 }
293
294 input[type="submit"]:hover {
295 cursor: pointer;
296 color: black;
297 }
298
299 select {
300 background-image: url(images/down.png),
301 -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
302 background-position: center right;
303 background-repeat: no-repeat;
304 }
305
306 .searchbox input[type=submit] {
307 border: 1px solid #b64b22;
308 background-color: #b64b22;
309 color: white;
310 font-weight: bold;
311 cursor: pointer;
312 padding: 4px 10px;
313 font-size: 14px;
314 margin-left: -5px;
315 -webkit-border-top-right-radius: 4px;
316 -webkit-border-bottom-right-radius: 4px;
317 -moz-border-radius-topright: 4px;
318 -moz-border-radius-bottomright: 4px;
319 border-top-right-radius: 4px;
320 border-bottom-right-radius: 4px;
321 }
322
323 .searchbox input[type=submit]:hover { background-color: #a3431f; }
324
325 .searchbox input[type=text] {
326 border: 1px solid #333333;
327 padding: 4px;
328 height: 17px;
329 width: 100%;
330 -webkit-border-top-left-radius: 4px;
331 -webkit-border-bottom-left-radius: 4px;
332 -moz-border-radius-topleft: 4px;
333 -moz-border-radius-bottomleft: 4px;
334 border-top-left-radius: 4px;
335 border-bottom-left-radius: 4px;
336 }
337
338 /* Footer */
339
340 #footer {
341 background: #f1f1f1;
342 text-align: center;
343 border-top: 1px solid #ddd;
344 padding: 40px;
345 color: #666;
346 clear: both;
347 margin-bottom: -2%;
348 }
349
350 #footer a { color: #666; padding: 0 2px; }
351
352 .year:after {
353 /* content: "2007-2012"; */
354 content: "2013";
355 }