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