css header
[mtweb] / mw / app / out / default / css / style.css
1 @import url("reset.css");
2
3 /* --------------------------------------------- STRUCTURE GENERAL */
4
5 body{
6   text-align: center;
7 }
8
9 .content{
10   width: 800px;
11   margin: 0 auto;
12   text-align: left;
13 }
14
15 .content:after{
16   content: "";
17   display: table;
18   clear: both;
19 }
20
21 #colonne{
22   float: left;
23   width: 230px;
24   padding: 0 10px 10px 0px;
25 }
26
27 #center{
28   float: left;
29   width: 540px;
30   padding: 0 10px 10px 10px;
31 }
32
33 #center.no_colonne{
34   float: none;
35   width: 780px;
36   padding: 10px;
37 }
38
39 .clear{
40   clear: both;
41   height: 0;
42   line-height: 0;
43   font-size: 0;
44 }
45
46 #main{
47   background-color: #ffffff;
48   padding: 1em 0;
49 }
50
51 /* --------------------------------------------- HEADER */
52
53 #main_header{
54   border-bottom: solid 1px #f1f1f1;
55 }
56
57 #main_header .content{
58   padding: 10px 0 3px 0;
59 /*  min-height: 11em;*/
60   position: relative;
61 }
62
63 #main_header .content h1{
64 }
65 #main_header .content h1 a{
66 }
67 #main_header .content h1 span{
68 }
69
70 #menu_top{
71   float: right;
72 }
73
74 #menu_top ul{
75 }
76
77 #menu_top ul:after{
78   content: "";
79   display: table;
80   clear: both;
81 }
82
83 #menu_top ul li{
84   list-style-type: none;
85   float: left;
86   position: relative;
87   padding: 2px 1em 0 0;
88 }
89
90 #menu_top ul li a{
91   display: block;
92   padding: 0.4em 1em;
93   white-space : nowrap;
94   border: solid 1px #d5d5d5;
95   background-color: #ffffff;
96   border-radius: 2px;
97 }
98 #menu_top ul li a:hover{
99   color: #000066;
100   background-color: #f5f5f5;
101 }
102
103 #menu_top ul li .menu{
104   padding: 5px 0 0 0;
105   position: absolute;
106   top: 100%;
107   left: 0;
108   display: none;
109   background-image: url(../images/sub_menu.png);
110   background-position: 1em 0px;
111   background-repeat: no-repeat;
112 }
113
114 #menu_top ul li ul{
115   border: solid 1px #e9e9e9;
116   border-radius: 2px;
117   background-color: #ffffff;
118 }
119
120 #menu_top ul li ul li{
121   float: none;
122   padding: 0;
123 }
124
125 #menu_top ul li ul li a{
126   border: none;
127 }
128
129 #menu_top ul li ul li .menu{
130   padding: 0 0 0 6px;
131   top: -1px;
132   left: 100%;
133   background-image: url(../images/sub_sub_menu.png);
134   background-position: 1px 0.8em;
135   background-repeat: no-repeat;
136 }
137
138 #main_header ul.menu_user{
139   position: absolute;
140   top: 1em;
141   right: 0.3em;
142   padding: 0;
143   margin-bottom: 5px;
144 }
145 #main_header ul.menu_user li{
146   position: relative;
147 }
148 #main_header ul.menu_user li .welcome,
149 #main_header ul.menu_user li a{
150   display: block;
151   padding: 0.4em 1em;
152   background-color: #ffffff;
153 }
154 #main_header ul.menu_user li .welcome{
155   padding: 0.4em 1em;
156 }
157 #main_header ul.menu_user li .welcome:hover,
158 #main_header ul.menu_user li a:hover{
159   background-color: #f5f5f5;
160 }
161 #main_header ul.menu_user li a:hover{
162   color: #000066;
163 }
164 #main_header ul.menu_user ul{
165   position: absolute;
166   top: 100%;
167   right: -1px;
168   border: solid 1px #d5d5d5;
169   background-color: #ffffff;
170   box-shadow: 4px 4px 10px #d5d5d5;
171   display: none;
172 }
173 #main_header ul.menu_user ul li a{
174   padding: 0.3em 7em 0.3em 3em;
175 }
176
177 /* --------------------------------------------- CONTENUS */
178
179 body{
180   color: #333333;
181   font: normal 0.9em Verdana, Helvetica, Arial, sans-serif;
182 }
183
184 a{
185   text-decoration: none;
186   color: #000066;
187 }
188
189 a img{
190   border: none;
191 }
192
193 a:hover{
194   color: #777777;
195 }
196
197 h1{
198   font-size: 2em;
199 }
200
201 h2{
202   font-size: 1.4em;
203   padding-top: 1em;
204   border-bottom: solid 1px #d5d5d5;
205 }
206
207 h3{
208   font-size: 1.4em;
209   margin-top: 1em;
210 }
211
212 h4{
213   font-size: 1.4em;
214 }
215
216 h5{
217   font-size: 1.2em;
218 }
219
220 h6{
221   font-size: 1em;
222 }
223
224 h1, h2, h3, h4, h5, h6, p, ul{
225   margin: 0 0 0.5em 0;
226 }
227
228 strong{
229   font-weight: bold;
230 }
231
232 /* ------------------------------------------------- MENU COLONNE ET NAV */
233
234 #colonne .menu,
235 nav.sous_pages{
236   margin-bottom: 1em;
237 }
238
239 #colonne .menu ul,
240 nav.sous_pages ul{
241   list-style-type: none;
242   margin: 5px 20px 5px 0px;
243   padding: 0;
244 }
245
246 #colonne .menu ul ul,
247 nav.sous_pages ul ul{
248   list-style-type: none;
249   margin: 0 0 0 20px;
250   padding: 0;
251 }
252
253 #colonne .menu ul li,
254 nav.sous_pages ul li{
255   margin: 1px 0;
256   padding: 0;
257   border-bottom: solid 1px #d5d5d5;
258 }
259
260 #colonne .menu ul li a,
261 nav.sous_pages ul li a{
262   display: block;
263   line-height: 2em;
264   padding: 0 1em;
265   background-color: #f1f1f1;
266 }
267
268 #colonne .menu ul li a:hover,
269 nav.sous_pages ul li a:hover{
270   color: #000066;
271   background-color: #e9e9e9;
272 }
273
274 /* --------------------------------------------- FORMULAIRES */
275
276 fieldset{
277   padding: 10px 0;
278 }
279
280 fieldset legend{
281   font-size: 1.2em;
282   display: block;
283   width: 100%;
284   border-bottom: solid 1px #d5d5d5;
285 }
286
287 form ul li{
288   padding: 5px 0;
289 }
290
291 form ul li:after{
292   content: "";
293   display: table;
294   clear: both;
295 }
296
297 form ul li label{
298   display: block;
299   float: left;
300   width: 140px;
301   text-align: right;
302   padding-right: 10px;
303 }
304
305 form ul li .form_input{
306   float: left;
307   width: 390px;
308 }
309
310 form ul li .form_input span.info{
311   display: block;
312   font-size: 0.9em;
313   color: #666666;
314 }
315
316 textarea, input[type=text], input[type=password], input[type=file]{
317   border: solid 1px #c0c0c0;
318   padding: 3px;
319   background-color: #ffffff;
320   color: #333333;
321 }
322
323 textarea.tinymce{
324   width: 100%;
325   height: 300px;
326 }
327
328 select{
329   border: solid 1px #c0c0c0;
330   background-color: #ffffff;
331   color: #333333;
332   padding: 3px 10px;;
333 }
334
335 form ul li .form_buttons{
336   text-align: right;
337 }
338
339 form ul li .form_single_button{
340   text-align: left;
341   padding-left: 150px;
342 }
343 input[type=submit]{
344   background-color: #e9e9e9;
345   cursor: pointer;
346   border: solid 1px #c0c0c0;
347 }
348
349 input[type=submit]:hover{
350   background-color: #f5f5f5;
351 }
352
353 form ul li .form_buttons input[type=submit],
354 form ul li .form_single_button input[type=submit]{
355   padding: 3px 10px;
356 }
357
358 /* --------------------------------------------- ADMIN */
359
360 ul.buttons{
361   margin: 10px 0 20px 0;
362   text-align: right;
363   padding-bottom: 10px;
364 }
365
366 ul.buttons li{
367   display: inline;
368 }
369
370 ul.buttons li a{
371   padding: 3px 7px 3px 7px;
372   border: solid 1px #d5d5d5;
373 }
374 ul.buttons li a:hover{
375   color: #000066;
376   background-color: #f5f5f5;
377 }
378
379 ul.buttons li a.add{
380   background-image: url("../icons/add.gif");
381   background-repeat: no-repeat;
382   background-position: 3px 8px;
383   padding: 3px 7px 3px 18px;
384 }
385
386 ul.filters{
387   margin: 10px 0 20px 0;
388   text-align: right;
389   padding-bottom: 10px;
390 }
391
392 ul.filters li{
393   display: inline;
394 }
395
396 ul.filters li a{
397   padding: 3px 7px 3px 7px;
398   border: solid 1px #d1d1d1;
399 }
400
401 table.admin{
402   width: 100%;
403   margin-bottom: 1em;
404 }
405
406 table.admin tr.hl:hover{
407   background-color: #f5f5f5;
408 }
409
410 table.admin tr th{
411   text-align: center;
412   padding: 3px;
413   font-weight: bold;
414 }
415
416 table.admin tr td{
417   border: solid 1px #d1d1d1;
418   padding: 3px;
419 }
420
421 table.admin td.action{
422   text-align: center;
423   width: 50px;
424 }
425
426 ul.actions li{
427   margin-left: 15px;
428 }
429
430 ul.actions li.public{
431   background-color: #f5fff2;
432 }
433
434 form ul.actions li{
435   padding: 0;
436 }
437
438 form ul.actions li label{
439   display: inline;
440   float: none;
441   width: auto;
442   text-align: left;
443   padding-right: 0px;
444 }
445
446 .navig{
447   text-align: right;
448   border: solid 1px #d5d5d5;
449   margin: 10px 0;
450   padding: 3px;
451 }
452
453 /* --------------------------------------------- MESSAGES */
454
455 .messages{
456   margin: 10px;
457   padding: 10px;
458   border: solid 1px #c0c0c0;
459 }
460
461 .erreur{
462   margin: 50px 100px 50px 100px;
463   padding: 20px;
464   border: solid 1px #c0c0c0;
465 }
466
467 .redirect_message{
468   padding: 50px 100px 50px 100px;  
469 }
470 .redirect_message div{
471   padding: 20px;
472   border: solid 1px #c0c0c0;
473 }
474
475 .debug{
476   text-align: left;
477   margin: 10px;
478   padding: 10px;
479   border: solid 1px #e5e5e5;
480   box-shadow: 0 0 5px #e5e5e5;
481   background-color: #f5f5f5;
482 }
483
484 /* --------------------------------------------- FOOTER */
485
486 #main_footer{
487   border-top: solid 1px #f1f1f1;
488   padding-bottom: 60px;
489 }
490
491 #main_footer .content ul{
492   float: right;
493 }
494
495 #main_footer .content ul:after{
496   content: "";
497   display: table;
498   clear: both;
499 }
500
501 #main_footer .content ul li{
502   float: left;
503   padding: 0 1em;
504   border-left: solid 1px #666666;
505   margin-top: 5px;
506 }
507
508 #main_footer .content ul li:first-child{
509   border-left: none;
510 }