fix streaminterface design
[enigma2-plugins.git] / webinterface / src / web-data / style.css
1 button, span { 
2         behavior: url(webdata/IEFixes.htc);
3 }
4
5 body {  
6         text-align:left;
7         vertical-align: top;
8         margin:0px; 
9         font-family:Arial,sans-serif;
10         font-size: 12px;
11         background-color:#EEE;
12         color:#444;
13 }
14
15 a:link { color:#444; }
16 a:visited { color:#444; }
17 a:active { color:#444; }
18
19 hr{ border: 1px solid #BBB; 
20         margin-left: 3px;
21         margin-right: 3px;
22 }
23
24 form{
25         margin: 0px;
26         padding: 0px;
27 }
28
29 button {
30         background-image: url('gfx/button.png');
31         height: 20px;
32         width: 140px;
33         border: 1px solid #AAA;
34 }
35
36 button:hover, button.hover {
37         border: 1px solid #000;
38 }
39
40 #currentServiceName { 
41         font-family:Arial,sans-serif;
42         font-size:14px;
43         font-weight:bold;
44         
45         float:right;
46
47         color: #FFFFFF;
48         text-align:left;
49
50         width:30%;
51         height:20px;
52 }
53 .currentServiceEPGStarttime { 
54         font-family:Arial,sans-serif;
55         font-size:14px;
56         font-weight:bold;
57         
58         float:left;
59
60         color: #FFFFFF;
61         text-align:left;
62
63         width:40px;
64         height:20px;
65 }
66 .currentServiceEPGTitle { 
67         font-family:Arial,sans-serif;
68         font-size:14px;
69         font-weight:bold;
70         
71         float:left;
72
73         color: #FFFFFF;
74         text-align:left;
75
76         width:240px;
77         height:20px;
78 }
79 .currentServiceEPGDuration { 
80         font-family:Arial,sans-serif;
81         font-size:14px;
82         font-weight:bold;
83         
84         float:left;
85         color: #FFFFFF;
86         text-align:right;
87
88         width:70px;
89         height:20px;
90 }
91
92 #searchText{
93         border: 1px solid #000;
94         margin: 0 0 0 0;
95 }
96 #filterMovietag{
97         border: 1px solid #000;
98         margin: 0 0 0 0;
99 }
100
101 /**************************************************************
102 Make the ServiceList Table scrollable**************************
103 ***************************************************************/
104
105 /* define height and width of scrollable area. Add 16px to width for scrollbar          */
106 div.BodyContent {
107         border: 1px solid #000;
108         height: 455px;
109         overflow: auto;
110         margin: 0px 9px 0px;
111         font-size: 12px;
112 }
113
114 div.BodyContentChannellist {
115         clear: both;
116         max-height: 455px;
117         overflow: auto;
118 /*      width: 780px; */
119 }
120
121 .BodyContentChannellist{
122         font-size: 12px;
123 }
124
125 /* Reset overflow value to hidden for all non-IE browsers. */
126 html>body div.BodyContentChannellist {
127         overflow: hidden;
128         width: 780px;
129 }
130
131 /* define width of table. IE browsers only                 */
132 div.BodyContentChannellist table {
133         float: left;
134         width: 760px;
135         max-height: 455px;
136 }
137
138 /* define width of table. Add 16px to width for scrollbar.           */
139 /* All other non-IE browsers.                                        */
140 html>body div.BodyContentChannellist table {
141         width: 780px;
142 }
143
144 /* set table header to a fixed position. WinIE 6.x only                                       */
145 /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
146 /* an element that has an overflow property set, the relative value translates into fixed.    */
147 /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
148 thead.fixedHeader tr {
149         position: relative;
150         height: 30px;
151         background: url(gfx/banner_30.png);     
152 }
153
154 /* set THEAD element to have block level attributes. All other non-IE browsers            */
155 /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
156 html>body thead.fixedHeader tr {
157         display: block
158 }
159
160 /* make the TH elements pretty */
161 thead.fixedHeader th {
162         border: 0px;
163         font-weight: normal;
164         padding: 4px 3px;
165         text-align: left
166 }
167
168 /* make the A elements pretty. makes for nice clickable headers                */
169 thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
170         color: #FFF;
171         display: block;
172         text-decoration: none;
173         width: 100%
174 }
175
176 /* make the A elements pretty. makes for nice clickable headers                */
177 /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
178 thead.fixedHeader a:hover {
179         color: #FFF;
180         display: block;
181         text-decoration: underline;
182         width: 100%
183 }
184
185 /* define the table content to be scrollable                                              */
186 /* set TBODY element to have block level attributes. All other non-IE browsers            */
187 /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
188 /* induced side effect is that child TDs no longer accept width: auto                     */
189 html>body tbody.scrollContent {
190         display: block;
191         height: 422px;
192         /* This is realy bad for resolution below 1280x1024 */
193         overflow: auto;
194         width: 100%;
195 }
196
197 /* make TD elements pretty. Provide alternating classes for striping the table */
198 /* http://www.alistapart.com/articles/zebratables/                             */
199
200
201 tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
202         background: #FFF;
203         border-bottom: none;
204         border-left: none;
205         border-right: 1px solid #CCC;
206         border-top: 1px solid #DDD;
207         padding: 2px 3px 3px 4px;
208 }
209
210 /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
211 /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
212 /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
213 html>body thead.fixedHeader th {
214         width: 780px; 
215 }
216
217 /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
218 /* All other non-IE browsers.                                            */
219 /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
220 html>body tbody.scrollContent td {
221 width: 764px; 
222 }
223
224 /****************************************
225 normal stylesheet-stuff******************
226 *****************************************/
227
228 #Main{
229         width:960px;
230         background-color: #AAA;
231         text-align: left;
232         margin: 0; 
233         padding: 0;
234         overflow: auto;
235         vertical-align: top;
236         cursor: default;
237         border: 1px solid #000; 
238 }
239
240 #Content{
241         vertical-align: middle;  
242         float: left;
243         background-color: #FFF;
244         width: 800px;
245         padding-bottom: 10px;
246         border-right: 1px solid #000;
247         border-left: 1px solid #000;
248 }
249
250 #CurrentService { 
251         font-family: Arial,sans-serif;
252         font-size: 14px;
253         font-weight: bold;
254         float: left;
255         color: #FFFFFF;
256         
257         width: 55%;
258         height: 20px;
259 }
260
261 #CurrentEvent { 
262         font-family: Arial,sans-serif;
263         font-size: 14px;
264         font-weight: bold;
265         float: left;
266         color: #FFFFFF;
267         text-align: right;
268         width: 45%;
269         height: 20px;
270 }
271
272 #VolumePanel { 
273         font-family:Arial,sans-serif;
274         font-size:14px;
275         font-weight:bold;
276         
277         float:left;
278         color: #FFFFFF;
279         
280         width:25%;
281         height:20px;
282 }
283
284 #CurrentTime { 
285         font-family:Arial,sans-serif;
286         font-size:14px;
287         font-weight:bold;
288         
289         float:left;
290         text-align:right;
291         color: #FFFFFF;
292         
293         width: 11%;
294         height: 20px;
295 }
296
297 #SignalPanel { 
298         font-family:Arial,sans-serif;
299         font-size:14px;
300         font-weight:bold;
301         
302         float:left;
303
304         color: #FFFFFF;
305         text-align:right;
306
307         width:20px;
308         height:20px;
309 }
310 #StreaminterfaceButton { 
311         font-family:Arial,sans-serif;
312         font-size:14px;
313         font-weight:bold;
314         
315         float:left;
316
317         color: #FFFFFF;
318         text-align:right;
319
320         width:20px;
321         height:20px;
322 }
323
324
325 #RecordButton { 
326         float:left;
327         width:20px;
328         height:20px;
329 }
330
331 #ServiceInfo{
332         width:800px;
333         height: 20px;
334         border-bottom: 1px solid #000;
335         float:none;
336         clear:both;
337         padding: 0 0 0;
338         margin: 0 0 0;
339         vertical-align: middle;
340         background: url(gfx/banner.png);
341         color: #FFFFFF;
342 }
343
344 #nav{
345         float: left;
346         width: 117px;
347         background-color: #AAA;
348 }
349
350 #navTable{
351         background-color: #EEE;
352         vertical-align: middle;
353         font-size: 14px;
354         font-weight: bold;
355         width: 100%;
356         margin:0 0 0 0;
357         padding:0 0 0 0;
358 }
359
360 #NavHd{
361         background: url(gfx/banner.png);
362         color: #FFFFFF;
363         font-size:10px;
364         font-weight: bold;
365         height: 20px;
366         vertical-align: middle;
367 }
368 #RequestIndicator{
369         display: inline;
370         vertical-align: middle;
371         font-size:14px;
372         font-weight: bold;
373         height:20px;
374 }
375
376 #EventNowNext{
377 }
378
379 #updates{
380         visibility: hidden;
381 }
382
383 .navMenuPanel{
384         background-color: #BBB;
385 }
386 .navMenuHeader{
387         font-size: 14px;
388         border-top: 1px solid #000;
389         height: 20px;
390 }
391
392 .navMenuContent{
393         font-size: 12px;
394         font-weight: normal;
395         background-color: #EEE;
396         border: 0px;
397 }
398 .navMenuItem{
399         font-size: 12px;
400 }
401
402 .divblock{
403         width:100%;
404         float:none;
405         clear:both;
406 }
407
408 .event{
409         font-size:12px;
410         width:100%;
411         font-weight:bold;
412         background-color: #DDEEFF;
413         margin-bottom: 1px;
414         cursor:help;
415 }
416 .eventRA{
417         font-size:12px;
418         width:100%;
419         font-weight:bold;
420         text-align:right;
421         background-color: #DDEEFF;
422         margin-bottom: 1px;
423         cursor:help;
424 }
425
426 .eventExtDesc{
427         color: #777;
428         background-color: #FFF;
429         font-size:12px;
430         margin-bottom: 1px;
431         width:100%;
432 }
433
434 .bgMain{
435         background-color: #FFF;
436         width: 100%;
437 }
438 .sListHeader{
439         font-size: 14px;
440         font-weight: bold;
441         color: #FFF;
442         float:left;
443         width:50%;
444 }
445 .sListSearch{
446         font-size: 14px;
447         float:left;
448         width:50%;
449         text-align: right;
450         margin: 0 0 0 0;
451 }
452
453 .sListTh{
454         height: 30px;
455         background: url(gfx/banner_30.png);     
456         vertical-align: middle;
457 }
458
459 form.sListSearch{
460         text-align: right;
461 }
462 .sListSName{
463         font-size: 14px;
464         font-weight: bold;
465         float:left;
466         width:661px;
467 }
468
469 span.sListSLink{
470         display: block;
471         width: 656px;
472         height: 100%;
473         text-decoration: none;
474 }
475
476 span.sListSLink:hover, span.sListSLink.hover{
477         background-color: #DDD;
478 }
479
480 .sListExt{
481         border-left: 1px solid #CCC;
482         float:left;
483         width:90px;
484         text-align: right;
485 }
486 .sListEPGTime{
487         float:left;
488         width:60px;
489         text-align: left;
490 }
491 .sListEPGTitle{
492         border-left: 1px solid #CCC;
493         border-right: 1px solid #CCC;
494         float: left;
495         width:600px; 
496         text-align: left;
497 }
498 .sListEPGDuration{
499         float:left;
500         width:75px;
501         text-align: right;
502 }
503 .tListSName{
504         width: 180px;
505         text-align: left;
506 }
507 .tListTitle{
508         width: 150px;
509         text-align: left;
510 }
511 .tListDescr{
512         width: 150px;
513         text-align: left;
514 }
515 .tListRepeat{
516         width: 70px;
517         text-align: left;
518 }
519 .tListDuration{
520         width: 70px;
521         text-align: left;
522 }
523 .tListBegin{
524         width: 100px;
525         text-align: left;
526 }
527 .tListEnd{
528         width: 100px;
529         text-align: left;
530 }
531 .tListAfter{
532         width: 85px;
533         text-align: left;
534 }
535 .tListOption{
536         width: 80px;
537         text-align: center;
538 }
539 #TimerColor0 {
540         color: #000000;
541 }
542 #TimerColor1 {
543         color: #00BCBC;
544         background-color: #DDD;
545 }
546 #TimerColor2 {
547         color: #9F1919;
548         background-color: #DDD;
549 }
550 #TimerColor3 {
551         color: #00BCBC;
552         background-color: #DDD;
553 }
554
555 .pageHeader {
556         width:100%;
557         height: 30px;
558         background: url(gfx/banner_30.png);
559         color: #FFF;
560         font-weight:bold;
561 }
562
563 .aboutHeader {
564         width:100%;
565         color:#444444;
566         font-weight:bold;
567         background-color:#DDEEFF;
568 }
569
570 .about {
571         border: 1px solid #AAA;
572         width: 100%;
573         font-size: 12px;
574 }
575
576 .fullwidth {
577         width: 100%;
578 }
579
580 .aboutSection{
581         width:100%;
582         margin: 0 0 0 0;
583 }
584
585 .aboutSectionLeft{
586         width:50%;
587         vertical-align: top;
588 }
589
590 .aboutSectionRight{
591         width:50%;
592         vertical-align: top;
593 }
594
595 .aboutElement{
596         float: none;
597 }
598
599 .aboutElementLeft{
600         font-weight:bold;
601         width: 50%;
602         text-align: left;
603 }
604
605 .aboutElementRight{
606         width: 50%;
607 }
608
609 /* movielist */
610 .movieDetails {
611         border: 1px solid #AAA;
612         width: 100%;
613         font-size: 12px;
614 }
615
616 .movieElementRight{
617         width: 1%;
618 }
619
620 .movieElementLeft{
621         font-weight:bold;
622         width: 99%;
623         text-align: left;
624 }