Skin layout improvements.
[platal.git] / htdocs / css / xnet.css
1 /***************************************************************************
2 * Copyright (C) 2003-2007 Polytechnique.org *
3 * http://opensource.polytechnique.org/ *
4 * *
5 * This program is free software; you can redistribute it and/or modify *
6 * it under the terms of the GNU General Public License as published by *
7 * the Free Software Foundation; either version 2 of the License, or *
8 * (at your option) any later version. *
9 * *
10 * This program is distributed in the hope that it will be useful, *
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of *
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the *
13 * GNU General Public License for more details. *
14 * *
15 * You should have received a copy of the GNU General Public License *
16 * along with this program; if not, write to the Free Software *
17 * Foundation, Inc., *
18 * 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA *
19 ***************************************************************************/
20
21 body {
22 background-color: #F2E9D0;
23 margin-left: 0;
24 margin-top: 0;
25 color: #505050;
26 border-top: 1px;
27 }
28
29 table, body {
30 font-size: 10pt;
31 font-family: "Bitstream vera sans","Verdana",sans-serif;
32 }
33
34 input,textarea,select,option {
35 font-size: 9pt;
36 }
37
38 tt,pre {
39 font-size: 10pt;
40 }
41
42 fieldset {
43 border: 1px gray solid;
44
45 margin-top: 1em;
46 margin-bottom: 1em;
47 }
48
49 legend {
50 border: 1px gray solid;
51 background: #e9e0aa;
52 color: inherit;
53
54 padding: 2px 4px;
55 }
56
57 a, a:link, a:visited { text-decoration: none ; color: #5c81aa; }
58
59 a img { border: none; }
60 img { vertical-align: middle; }
61 td { vertical-align: top; }
62
63 h1 { font-size: 130%; }
64 h2 { font-size: 115%; }
65
66 .smaller {
67 font-size: smaller;
68 font-style: italic;
69 }
70
71 input.error, textarea.error {
72 background-color: #faa;
73 }
74
75 input.valid, textarea.valid {
76 background-color: #afa;
77 }
78
79 input.warning, textarea.warning {
80 background-color: #fda;
81 }
82
83
84 /***************************************************************************
85 * DEBUG
86 ***************************************************************************/
87
88 #dev {
89 width: 100%;
90 text-align: center;
91 padding: 1px;
92
93 font-size: 10pt;
94 font-weight: bold;
95 }
96
97 .backtrace div.hide { display: none; }
98 .backtrace:hover div.hide { display: block }
99 .backtrace h1 { margin: 0px; }
100
101 /***************************************************************************
102 * LAYOUT
103 ***************************************************************************/
104
105 table#layout {
106 width: 765px;
107 margin-left: auto;
108 margin-right: auto;
109 }
110
111 #top {
112 width: 100%;
113 }
114
115 #top td {
116 padding: 0;
117 margin: 0;
118 vertical-align: middle;
119 }
120
121 #top td.logo {
122 text-align: right;
123 background: url('../images/bandeau.jpg') bottom left repeat-x;
124 }
125
126 td#credits {
127 text-align: center;
128 font-size: 75%;
129 }
130
131 td#perso div {
132 font-weight: bold;
133 font-size: 90%;
134 padding: 2px 1em;
135 }
136
137 td#perso .gp {
138 display: block;
139 margin: 2px 1em;
140 font-weight: bold;
141 font-size: 85%;
142 float: left;
143 text-align: center;
144 }
145
146 td#search {
147 text-align: right;
148 width: 300px;
149 }
150
151 #content {
152 width: 100%;
153 }
154
155 td#body {
156 vertical-align: top;
157 padding-left: 1em;
158 padding-bottom: 1em;
159 }
160
161 td#menu {
162 width: 130px;
163 padding-right: 0;
164 padding-top: 0.5em;
165 font-family: "Trebuchet MS", "Arial",sans-serif;
166 font-weight: bold;
167 }
168
169 #menu h1 {
170 padding: 0.3em 0em 0.4em 0em;
171 margin-top: 0.7em;
172 margin-bottom: 0.3em;
173 font-size: 89%;
174 text-align: center;
175 width: 130px;
176 background: url('../images/barre_small.png') bottom left no-repeat;
177 background-color: #d0c198;
178 }
179
180 #menu a {
181 display: block;
182 padding: 0.2em 0em 0.2em 15px;
183 font-size: 89%;
184 background: url('../images/puce.png') no-repeat center left;
185 }
186
187 /***************************************************************************
188 * CLASSES
189 ***************************************************************************/
190
191 .erreur { color: red !important; }
192 .error { color: red !important; }
193 .center { text-align: center; }
194 .right { text-align: right; }
195
196 .descr {
197 text-align: justify;
198 font-size: 90%;
199 }
200 p.descr {
201 padding-left: 7px;
202 padding-right: 7px;
203 }
204
205 table { border-collapse: collapse; }
206
207 table.links {
208 width: 100%;
209 margin: 0.4em 0em;
210 }
211
212 table.links td {
213 padding: 0em 0.5em;
214 }
215
216 table.links a {
217 background: url('../images/puce.png') no-repeat center left;
218 padding-left: 15px;
219 font-weight: bold;
220 }
221
222 table td.titre {
223 font-weight: bold;
224 white-space: nowrap;
225 }
226
227 table.tiny, table.tinybicol {
228 width: 70%;
229 margin-left: 15%;
230 border: 2px solid gray;
231 font-size: 85%;
232 }
233 table.large, table.bicol {
234 width: 96%;
235 margin-left: 2%;
236 border: 2px solid gray;
237 font-size: 85%;
238 }
239
240 table.tiny td, table.tinybicol td, table.large td, table.bicol td {
241 border: 1px solid gray;
242 padding: 2px 4px;
243 }
244 table.tiny th, table.tinybicol th, table.large th, table.bicol th {
245 border: 1px solid gray;
246 border-top-width: 2px;
247 border-bottom-width: 2px;
248 padding: 2px;
249 }
250
251 table.tinybicol td, table.bicol td {
252 border-top: none;
253 border-bottom: none;
254 }
255
256 table.tinybicol .pair, table.bicol .pair {
257 background-color: #e9e0aa;
258 }
259
260 table.normal td { border: none; }
261
262 th { background: #d0c198; }
263 th.grayed {
264 background: #d0cbb0;
265 color: #666;
266 }
267
268 a.popup2 {
269 color: #4c618a;
270 background-color: inherit;
271 }
272
273 /***************************************************************************
274 * Special pages
275 ***************************************************************************/
276
277 table#liste td.fourth {
278 width: 25%;
279 }
280
281 table#liste td.listec a {
282 display: block;
283 text-align: center;
284 }
285
286 table#liste td.liste a {
287 display: block;
288 text-align: right;
289 }
290
291 table#liste td.liste a.cat {
292 background: #d0c198;
293 margin: 15px 0px 10px 0px;
294 padding: 3px;
295 text-align: center;
296 font-weight: bold;
297 font-size: 90%;
298 }
299
300 table#liste td.liste a:hover, table#liste td.listec a:hover {
301 background: #d0c198;
302 }
303
304 #wikitext {
305 text-align: justify;
306 font-size: 90%;
307 }
308
309 #wikitext p {
310 padding-left: 7px;
311 }
312
313 /***************************************************************************
314 ***************************************************************************/
315
316 div.cat {
317 background: #d0c198;
318 text-align: center;
319 font-weight: bold;
320 font-size: 90%;
321 padding: 2px;
322 width: 180px;
323 margin: 4px 0px;
324 }
325
326 div.sel { background-color: #5c81aa; color: #d0c198; }
327 div.sel a { color: #d0c198; }
328
329 td.oval, td.oval2 {
330 color: #d0c198;
331 height: 50px;
332 text-align: center;
333 vertical-align: middle !important;
334 font-weight: bold;
335 }
336 td.oval {
337 background: url("../images/oval.png") no-repeat top center;
338 width: 130px;
339 padding: 0px 35px;
340 }
341 td.oval2 {
342 background: url("../images/oval2.png") no-repeat top center;
343 width: 160px;
344 padding: 0px 12px;
345
346 }
347
348 .oval a, .oval2 a { color: #d0c198; }
349 .oval a.has_site { color: white; }
350 .jone a { color: #FF9; }
351 .rouje a { color: #D88; }
352 .jone a.has_site { color: #FE0; }
353 .rouje a.has_site { color: #D00; }
354
355 #content td.oval, #content td.oval2 {
356 font-size: 90%;
357 font-family: "Trebuchet MS", sans-serif;
358 letter-spacing: -0.5px;
359 }
360
361 div.backtotop {
362 font-size: small;
363 text-align: center;
364 padding-top: 2em;
365 }
366
367 div.screenshot {
368 text-align: center;
369 }
370
371 div.screenshot img {
372 border: 1px solid #777;
373 }
374
375 /***************************************************************************
376 ***************************************************************************/
377
378 td.infos {
379 height: 30px;
380 text-align: center;
381 font-family: "Bitstream Vera Sans","Arial",sans-serif;
382 color: #505050;
383 }
384
385 /***************************************************************************
386 ***************************************************************************/
387
388 .wizard {
389 margin-top: 0px;
390 margin-left: -1em;
391 }
392
393 .wizard .wiz_header {
394 height: 30px;
395 width: 100%;
396 background: url('../images/skins/wiz_xnet_background.png') bottom left no-repeat;
397 margin-bottom: 1em;
398 }
399
400 .wizard .wiz_header .wiz_tab {
401 height: 100%;
402 text-align: center;
403 font-size: 75%;
404 }
405
406 .wizard .wiz_header .wiz_tab:hover {
407 color: #5c81aa;
408 font-weight: bold;
409 }
410
411 .wizard .wiz_header .active, .wizard .wiz_header .active:hover {
412 }
413
414 .wizard .wiz_header a {
415 color: #000;
416 text-decoration: none;
417 margin-top: 2px;
418 vertical-align: bottom;
419 }
420
421 .wizard .wiz_header a.active {
422 font-weight: bold;
423 }
424