add notification system (for showing error/success messages)
[enigma2-plugins.git] / webinterface / src / web-data / tpl / default / style.css
1         body{
2                 font-family: Tahoma, Sans-Serif;
3                 font-size: 14px;
4                 font-weight: bold;
5                 color: #fff;
6                 text-align: center;
7                 background-color: #555
8         }
9         
10         a, a:visited, a:active{
11                 color: #FFF;
12                 text-decoration: none;
13         }
14         
15         img{
16                 border: 0px;
17         }
18         
19         form{
20                 margin: 2px;            
21         }
22
23         #notification{          
24                 color: #000;
25                 width: 500px;
26                 height: 50px;
27                 position: absolute;
28                 top: 0px;
29                 left: 250px;            
30                 text-align: center;
31                 vertical-align: bottom;
32                 z-index: 2;             
33         }
34
35 /***********************
36  GENERAL
37  ***********************/
38
39         .odd{
40                 background-color: #FFF;
41         }
42         
43         .even{
44                 background-color: #DDD;
45         }
46         
47         .fullwidth {
48                 width: 100%;
49         }
50         
51         .center {
52                 text-align: center;
53         }
54
55
56 /***********************
57  BANNER with MainMenu
58  ***********************/
59
60         #banner{
61                 width: 1000px;
62                 height: 70px;
63                 background: #000;
64                 padding-left: 5px;
65                 margin-bottom: 8px;
66         }
67
68         #banner, #banner .sb-inner { background:#000 }
69         #banner .sb-border { background: #FFF }
70         #bannerText{
71                 margin-bottom: 10px;
72                 padding-left: 2px;
73                 padding-top: 6px;
74         }
75
76         #bannerLeft{
77                 width: 800px;
78                 float: left;
79         }
80         
81         #bannerRight{
82                 width: 190px;
83                 text-align: right;
84                 height: 60px;
85                 float: left;
86         }
87         
88         #bannerRight img{
89                 padding-top: 5px;
90         }
91         
92         
93         #current{
94                 width: 999px;
95                 background: #000;
96                 padding-left: 3px;
97                 padding-right: 3px;
98                 padding-bottom: 1px;
99                 margin-bottom: 8px;
100         }
101
102         #current, #current .sb-inner { background:#000 }
103         #current .sb-border { background: #FFF }
104         #currentTable{
105                 margin-bottom: 10px;
106                 padding-left: 2px;
107                 padding-top: 3px;
108                 width: 100%;
109         }
110         
111         #currentDuration{
112                 text-align: right;
113         }
114         
115         
116         
117         #mainMenu{
118                 background-color: #485052;
119                 text-align: center;
120                 overflow:hidden; 
121                 background: #000; 
122                 margin: 0; 
123                 padding: 0; 
124                 width: 850px;
125         }
126
127         #mainMenu li{
128                 list-style: none;
129                 float: left;
130                 width: 130px;
131                 height: 21px;
132                 margin-left: 2px;
133         }
134         #mainMenu li .sb-border { background:#485052; }
135         #mainMenu li, #mainMenu li .sb-inner { background-color: #485052; }
136
137         #mainMenu a{ display:block; padding: 1px; }
138
139         #mainMenu li:hover, #mainMenu li:hover .sb-inner { background: #AAA; }
140         #mainMenu li.hover, #mainMenu li.hover .sb-inner { background: #AAA; }
141
142 /***************
143  Upper Left Nav
144  ***************/
145
146         #navContainer{
147                 float:left;
148                 width: 160px;
149         }
150          
151         #nav{
152                 width: 100%;
153                 height: 250px;
154                 background: #000;
155                 padding-left: 5px;
156         }
157
158         #nav, #nav .sb-inner { 
159                 background:#FFF; 
160                 padding-left: 2px;
161                 padding-right: 2px;
162         }
163         #nav .sb-border { background:#000; }
164
165         #navHd, #navHd .sb-inner{
166                 background: #000;
167                 text-align: center;
168         }
169         
170         #navContent{
171                 color: #485052;
172                 padding-left: 5px;
173         }
174
175         #navSearch{
176                 width: 100%;
177                 height: 61px;
178                 background: #000;
179                 padding-left: 5px;
180         }
181
182         #navSearch, #navSearch .sb-inner { 
183                 background:#FFF; 
184                 padding-left: 2px;
185                 padding-right: 2px;
186         }
187         #navSearch .sb-border { background:#000; }
188
189         #searchHd, #searchHd .sb-inner{
190                 background: #000;
191                 text-align: center;
192         }
193         
194         
195         #navVolume{
196                 width: 100%;
197                 height: 75px;
198                 background: #000;
199                 padding-left: 0px;
200         }
201
202         #navVolume, #navVolume .sb-inner { 
203                 background:#FFF; 
204                 padding-left: 2px;
205                 padding-right: 2px;
206         }
207         #navVolume .sb-border { background:#000; }
208
209         #volHd, #volHd .sb-inner{
210                 background: #000;
211                 text-align: center;
212         }
213         
214         
215
216 /**************
217  Content
218  **************/
219         #content{
220                 float: left;
221                 color: #485052;
222                 background: #000;
223                 width: 833px;
224                 min-height: 308px;
225                 margin-left: 8px;
226         }
227
228         #content, #content .sb-inner { background:#FFF; padding: 2px}
229         #content .sb-border { background:#000; }
230
231         #contentHd, #contentHd .sb-inner{
232                 background: #000;
233                 color: #fff;
234         }
235
236         #epgSearch{ width: 120px; }
237         
238         .boxContent{
239                 padding: 3px;   
240         }
241         
242 /*****************
243 * Subnavigation
244 ******************/     
245         .navTable{
246                 width: 100%;
247         }
248         
249         .navTable a, .navTable a:visited, .navTable a:active{
250                 color: #485052;
251                 text-decoration: none;
252                 display: block;
253         }
254         
255         .navTable a:hover{
256                 background-color:#CCC;
257                 color: #485052;
258                 display: block;
259         }
260         
261 /*****************
262 * ServiceList
263 ******************/             
264         .sListSName a{
265                 display: block;
266                 margin-right: 5px;
267                 color: #485052;
268         }
269         
270         .sListSName a:hover{
271                 background-color:#CCC;
272                 color: #485052;
273                 display: block;
274         }
275         
276         .sListEPGItem{
277                 font-size:12px;
278                 margin: 0px;
279                 padding: 0px;
280         }
281         
282         .header{
283                 padding-top: 2px;
284                 padding-left: 4px;
285                 padding-right: 4px;
286                 display:block;
287                 height: 22px;
288         }
289
290         #container {
291                 margin: 0 auto;   /* align for good browsers */
292                 text-align: left; /* counter the body center */
293                 width: 1005px;
294         }
295
296         #contentTable{
297                 scrollbar: auto;
298                 width: 785px;
299         }
300         
301         #contentTable div{
302                 width: auto;
303                 overflow: auto;
304         }
305
306         #contentMain{
307                 padding: 8px;
308                 margin-bottom: 5px;
309         }
310
311         #contentMain {
312                 clear: both;
313                 /*overflow-x: hidden;*/
314                 overflow-y: auto;
315                 width: 815px;
316         }
317
318         /*
319         html>body #contentMain div{
320                 overflow: hidden;
321                 width: 785px;
322         }
323 */
324         #contentMain div table {
325                 float: left;
326                 width: 799px;
327         }
328         
329         .sListItem{
330                 /*border-bottom: 2px solid #CCC;*/
331                 width: 780px;
332         }
333
334 /*****************
335 * ServiceList EPG
336 ******************/             
337         .epgStart{
338                 width: 50px;            
339         }
340         
341         .epgTitle{
342                 width: 680px;
343         }
344         
345         .epgLength{
346                 width: 50px;
347                 text-align: right;
348         }
349         
350         
351 /*****************
352 * MovieList EPG
353 ******************/     
354         .mListDetail{
355                 font-size: 12px;
356         }
357         
358         .mStart{
359                 width: 160px;           
360         }
361         
362         .mTitle{
363                 width: 650px;
364         }
365         
366         .mLength{
367                 width: 90px;
368                 text-align: right;
369         }
370         
371 /*****************
372 * About
373 ******************/     
374         
375         .aboutHeader {
376                 width:100%;
377                 color:#FFF;
378                 font-weight:bold;
379                 background-color:#000;
380         }
381
382         .about {
383                 border: 1px solid #CCC;
384                 width: 100%;
385                 margin: 0px;
386                 padding: 0px;
387         }
388         
389         .about td{
390                 font-size:12px;
391         }
392
393         .aboutSection{
394                 width:100%;
395                 margin: 0 0 0 0;
396         }
397
398         .aboutSectionLeft{
399                 width:50%;
400                 vertical-align: top;
401         }
402
403         .aboutSectionRight{
404                 width:50%;
405                 vertical-align: top;
406         }
407
408         .aboutElement{
409                 float: none;
410         }
411
412         .aboutElementLeft{
413                 font-weight:bold;
414                 width: 50%;
415                 text-align: left;
416         }
417
418         .aboutElementRight{
419                 width: 50%;
420         }
421         
422         .w200h50{
423                 width: 200px;
424                 height: 50px;
425         }
426         
427         
428 /*****************
429 * Timer
430 ******************/             
431         .tListItemTable{
432                 width: 100%;
433         }
434
435         .tListHead{
436                 /*background-color: #DDD; */
437         }
438
439         .tListSName{
440                 text-align: left;
441         }
442
443         .tListItem{
444 /*              background-color: #EEE; */
445                 font-weight: bold;
446                 font-size: 12px;
447         }
448         
449         .tListTitle{
450                 width: 150px;
451                 text-align: left;
452         }
453         
454         .tListDescr{
455                 width: 150px;
456                 text-align: left;
457         }
458         
459         .tListRepeat{
460                 width: 70px;
461                 text-align: left;
462         }
463         
464         .tListDuration{
465                 width: 70px;
466                 text-align: left;
467         }
468         
469         .tListBegin{
470                 width: 100px;
471                 text-align: left;
472         }
473         
474         .tListEnd{
475                 width: 100px;
476                 text-align: left;
477         }
478         
479         .tListAfter{
480                 width: 85px;
481                 text-align: left;
482         }
483         
484         .tListOption{
485                 width: 80px;
486                 text-align: center;
487         }
488         
489         .timerState0 {
490                 color: #485052;
491         }
492         
493         .timerState1 {
494                 color: #990000;
495         }
496         
497         .timerState2 {
498                 color: #009900;
499         }
500         
501         .timerState3 {
502                 color: #000099;         
503         }
504         
505 /*****************
506 * EPG List
507 ******************/                     
508         .epgListItem{
509                 font-size:12px;
510                 font-weight: bold;
511         }