* drop curvycorners in favor of css3 PIE (http://css3pie.com/), this fixes the "curre...
[enigma2-plugins.git] / webinterface / src / web-data / tpl / default / style.css
1 html,body {
2         font-family: Tahoma, Sans-Serif;
3         font-size: 14px;
4         font-weight: bold;
5         color: #fff;
6         text-align: center;
7         background: #555;
8 }
9
10 input,select {
11         font-family: Tahoma, Sans-Serif;
12         font-size: 14px;
13         font-weight: bold;
14         border: 1px solid #485052;
15         background-color: #fff;
16         color: #485052
17 }
18
19 a,a:visited,a:active {
20         color: #485052;
21         text-decoration: none
22 }
23
24 img {
25         border: 0
26 }
27
28 form {
29         margin: 2px
30 }
31
32 #notification {
33         color: #000;
34         width: 50%;
35         height: 32px;
36         position: absolute;
37         top: 0;
38         left: 25%;
39         text-align: center;
40         vertical-align: bottom;
41         z-index: 2
42 }
43
44 .wap a,.wap a:visited,.wap a:active {
45         color: #fff
46 }
47
48 .rounded {
49         display: block;
50         border-radius: 5px;
51         -webkit-border-radius: 5px;
52         -moz-border-radius: 5px;
53         behavior: url(/web-data/PIE.htc);
54 }
55
56 .black {
57         background: #000
58 }
59
60 .odd {
61         background-color: #FFF
62 }
63
64 .even {
65         background-color: #DDD
66 }
67
68 .fullwidth {
69         width: 100%
70 }
71
72 .center {
73         text-align: center
74 }
75
76 .small {
77         font-size: 11px;
78         font-weight: normal
79 }
80
81 a.underline {
82         text-decoration: underline
83 }
84
85 .right {
86         text-align: right
87 }
88
89 .block {
90         display: block
91 }
92
93 .bottom {
94         vertical-align: bottom
95 }
96
97 #banner {
98         width: 1000px;
99         height: 67px;
100         background: #000;
101         padding-left: 5px;
102         margin-bottom: 8px;
103         position: relative;
104 }
105
106 #banner a,#banner a:visited,#banner a:active {
107         color: #FFF;
108         text-decoration: none;
109 }
110
111 #bannerText {
112         margin-bottom: 5px;
113         padding-left: 2px;
114         padding-top: 6px
115 }
116
117 #bannerLeft {
118         width: 940px;
119         float: left
120 }
121
122 #powerState {
123         border: 0;
124         margin-left: 93px;
125         text-align: right
126 }
127
128 #bannerRight {
129         width: 50px;
130         text-align: right;
131         height: 60px;
132         float: left
133 }
134
135 #bannerRight img {
136         padding-top: 5px
137 }
138
139 #current a {
140         background: #000;
141         color: #FFF;
142 }
143
144 #current {
145         width: 999px;
146         background: #000;
147         padding-left: 3px;
148         padding-right: 3px;
149         padding-bottom: 1px;
150         margin-bottom: 8px;
151         position: relative;
152 }
153
154 .techInfo {
155         font-size: 10px
156 }
157
158 #currentTable {
159         margin-bottom: 10px;
160         padding-left: 2px;
161         padding-top: 3px;
162         width: 100%
163 }
164
165 #currentDuration {
166         text-align: right
167 }
168
169 .currentBulletToggle {
170         vertical-align: middle
171 }
172
173 #mainMenu {
174         background-color: #485052;
175         text-align: center;
176         overflow: hidden;
177         background: #000;
178         margin: 0;
179         padding: 0;
180         width: 940px
181 }
182
183 #mainMenu li {
184         list-style: none;
185         float: left;
186         width: 130px;
187         height: 21px;
188         margin-left: 2px;
189         background: #485052;
190         margin-top: 6px;
191         margin-bottom: 0;
192         padding: 0;
193         position: relative;
194         z-index: 2
195 }
196
197 #mainMenu a:hover,#mainMenu a:hover {
198         background: #AAA;
199         position: relative;
200         z-index: 3
201 }
202
203 #mainMenu li.hover,#mainMenu li.hover {
204         background: #AAA;
205         position: relative;
206         z-index: 3
207 }
208
209 #mainMenu a {
210         display: block;
211         padding-top: 1px;
212         padding-bottom: 3px
213 }
214
215 #instantRecordMenu {
216         z-index: 1000;
217         position: relative;
218         top: 5px;
219         right: 165px;
220         background: #FFF;
221         color: #485052;
222         width: 205px;
223         border: 1px solid #000;
224         opacity: .98;
225         text-align: left
226 }
227
228 #instantRecordMenu button {
229         width: 200px;
230         text-align: center
231 }
232
233 #navContainer {
234         float: left;
235         width: 160px
236 }
237
238 #nav {
239         width: 100%;
240         height: 250px;
241         background: #000;
242         padding-left: 5px;
243         border: 2px solid #000;
244         position: relative;
245 }
246
247 #nav a {
248         display: block
249 }
250
251 #nav {
252         background: #FFF;
253         padding-left: 0;
254         padding-right: 0
255 }
256
257 #navHd {
258         background: #000;
259         text-align: center;
260         width: 153px
261 }
262
263 #navContent {
264         color: #485052;
265         padding-left: 5px
266 }
267
268 #navSearch {
269         width: 100%;
270         height: 61px;
271         background: #FFF;
272         margin-top: 8px;
273         border: 2px solid #000;
274         position: relative;
275 }
276
277 #searchHd {
278         background: #000;
279         text-align: center;
280         width: 153px
281 }
282
283 #navVolume {
284         width: 100%;
285         height: 75px;
286         background: #FFF;
287         margin-top: 8px;
288         border: 2px solid #000;
289         position: relative;
290 }
291
292 #volHd {
293         background: #000;
294         text-align: center;
295         width: 153px
296 }
297
298 #content {
299         float: left;
300         background: #FFF;
301         width: 833px;
302         min-height: 308px;
303         margin-left: 8px;
304         border: 2px solid #000;
305         position: relative;
306 }
307
308 #contentHd {
309         background: #000;
310         width: 527px
311 }
312
313 #contentHdExt {
314         background: #000;
315         dipslay: block
316 }
317
318 #contentHdExt input {
319         padding: 1px;
320         margin-right: 2px;
321         margin-bottom: 2px;
322         border: 0;
323         color: #485052
324 }
325
326 #epgSearch {
327         width: 120px
328 }
329
330 .boxContent {
331         color: #485052;
332         padding: 3px
333 }
334
335 .navTable {
336         width: 100%
337 }
338
339 .navTable a:hover {
340         background-color: #CCC;
341         color: #485052;
342         display: block
343 }
344
345 .sListSName a {
346         display: block;
347         margin-right: 5px;
348         color: #485052
349 }
350
351 .sListSName a:hover {
352         background-color: #CCC;
353         color: #485052;
354         display: block
355 }
356
357 .sListMarker {
358         background-color: #485052;
359         color: #FFF
360 }
361
362 .sListEPGItem {
363         font-size: 12px;
364         margin: 0;
365         padding: 0
366 }
367
368 .sListSProgress {
369         display: inline-block;
370         margin: 0;
371         border: 1px solid #485052;
372         width: 50px;
373         height: 10px;
374         padding: 1px
375 }
376
377 .sListSProgressBar {
378         display: inline-block;
379         margin: 0;
380         background-color: #60aef2;
381         width: 0;
382         height: 100%
383 }
384
385 table.sListExtEpg {
386         width: 580px;
387         margin: 0;
388         padding: 0
389 }
390
391 .header {
392         padding-top: 2px;
393         padding-left: 4px;
394         padding-right: 4px;
395         display: block;
396         height: 22px
397 }
398
399 #container {
400         margin: 0 auto;
401         text-align: left;
402         width: 1005px
403 }
404
405 #contentTable {
406         scrollbar: auto;
407         width: 785px
408 }
409
410 #contentServices {
411         vertical-align: top;
412         width: 585px
413 }
414
415 #contentServices table {
416         scrollbar: auto;
417         width: 585px
418 }
419
420 #contentBouquets {
421         border-right: 1px solid #ccc;
422         vertical-align: top;
423         width: 220px
424 }
425
426 #contentMain {
427         padding: 8px;
428         margin-bottom: 5px
429 }
430
431 #contentMain {
432         clear: both;
433         overflow-y: auto;
434         width: 815px;
435         color: #485052
436 }
437
438 #contentMain div table {
439         float: left;
440         width: 599px
441 }
442
443 .sListItem {
444         width: 585px;
445         color: #485052
446 }
447
448 .mListItem {
449         width: 780px;
450         color: #485052
451 }
452
453 .mpListItem {mListItem
454         
455 }
456
457 .epgStart {
458         width: 50px;
459         color: #485052
460 }
461
462 .epgTitle {
463         width: 420px;
464         color: #485052
465 }
466
467 .epgLength {
468         width: 100px;
469         text-align: right;
470         color: #485052
471 }
472
473 .mListDetail {
474         font-size: 12px;
475         color: #485052
476 }
477
478 .mStart {
479         width: 160px;
480         color: #485052
481 }
482
483 .mTitle {
484         width: 650px;
485         color: #485052
486 }
487
488 .mLength {
489         width: 90px;
490         text-align: right;
491         color: #485052
492 }
493
494 #tools {
495         font-size: 12px;
496         text-align: center
497 }
498
499 #tools h1 {
500         font-size: 14px
501 }
502
503 .tools a,.tools a:hover,.tools a:visited {
504         text-decoration: underline
505 }
506
507 .toolsHeader {
508         color: #FFF;
509         font-weight: bold;
510         background-color: #000
511 }
512
513 .tools {
514         border: 1px solid #CCC;
515         width: 100%;
516         margin: 0;
517         padding: 0
518 }
519
520 .tools td {
521         font-size: 12px;
522         padding: 5px;
523         vertical-align: top
524 }
525
526 .toolsElementLeft {
527         font-weight: bold;
528         width: 15%;
529         text-align: left
530 }
531
532 .toolsElementCenter {
533         text-align: left
534 }
535
536 .toolsElementRight {
537         width: 10%;
538         text-align: left
539 }
540
541 #about {
542         font-size: 12px;
543         text-align: center
544 }
545
546 #about h1 {
547         font-size: 14px
548 }
549
550 #about a,#about a:hover,#about a:visited {
551         text-decoration: underline
552 }
553
554 .aboutHeader {
555         width: 100%;
556         color: #FFF;
557         font-weight: bold;
558         background-color: #000
559 }
560
561 .about {
562         border: 1px solid #CCC;
563         width: 100%;
564         margin: 0;
565         padding: 0
566 }
567
568 .about td {
569         font-size: 12px
570 }
571
572 .aboutElementLeft {
573         font-weight: bold;
574         width: 50%;
575         text-align: left
576 }
577
578 .aboutElementRight {
579         width: 50%
580 }
581
582 .w200h50 {
583         width: 200px;
584         height: 50px
585 }
586
587 .textRight {
588         text-align: right
589 }
590
591 .textLeft {
592         text-align: left
593 }
594
595 .textCenter {
596         text-align: center
597 }
598
599 .tListItemTable {
600         width: 100%
601 }
602
603 .tListSName {
604         text-align: left
605 }
606
607 .tListItem {
608         font-weight: bold;
609         font-size: 13px
610 }
611
612 .tListTitle {
613         width: 150px;
614         text-align: left
615 }
616
617 .tListDescr {
618         width: 150px;
619         text-align: left
620 }
621
622 .tListRepeat {
623         width: 70px;
624         text-align: left
625 }
626
627 .tListDuration {
628         width: 70px;
629         text-align: left
630 }
631
632 .tListBegin {
633         width: 100px;
634         text-align: left
635 }
636
637 .tListEnd {
638         width: 100px;
639         text-align: left
640 }
641
642 .tListAfter {
643         width: 85px;
644         text-align: left
645 }
646
647 .tListOption {
648         width: 80px;
649         text-align: center
650 }
651
652 .timerState0 {
653         color: #485052
654 }
655
656 .timerState1 {
657         color: #900
658 }
659
660 .timerState2 {
661         color: #090
662 }
663
664 .timerState3 {
665         color: #009
666 }
667
668 a.tEditTag {
669         margin: 3px 0 3px 0;
670         padding: 3px;
671         display: inline-block;
672         border: 1px solid #CCC
673 }
674
675 a.selected {
676         background: #ff9
677 }
678
679 .epgListItem {
680         font-size: 12px;
681         font-weight: bold
682 }
683
684 * html #banner {
685         width: 1005px;
686         height: 78px
687 }
688
689 * html #bannerRight {
690         width: 120px;
691         height: 60px
692 }
693
694 * html #nav {
695         width: 99%;
696         height: 250px;
697         background: #000;
698         padding-left: 5px
699 }
700
701 * html .navTable {
702         width: 95%
703 }
704
705 input.fd-hidden-input,select.fd-hidden-input {
706         display: none
707 }
708
709 .fd-screen-reader {
710         position: absolute;
711         left: -999em;
712         top: 0;
713         width: 1px;
714         height: 1px;
715         overflow: hidden;
716         outline: 0 none;
717         -moz-outline: 0 none
718 }
719
720 a.dp-disabled,.dp-disabled table {
721         opacity: .3 !important;
722         filter: alpha(opacity =   40)
723 }
724
725 .dp-disabled,.dp-disabled td,.dp-disabled th,.dp-disabled th span {
726         cursor: default !important
727 }
728
729 a.date-picker-control:focus,div.datePicker table td:focus {
730         overflow: hidden;
731         outline: 0 none;
732         -moz-outline: 0 none;
733         color: #6482aa !important
734 }
735
736 div.datePicker {
737         position: absolute;
738         z-index: 9999;
739         text-align: center;
740         font-size: 11px;
741         background: transparent;
742         color: #485052;
743         padding: 0;
744         -moz-user-select: none;
745         -khtml-user-select: none
746 }
747
748 div.static-datepicker {
749         position: relative;
750         top: 5px;
751         left: 0
752 }
753
754 div.datePicker table {
755         width: auto;
756         height: auto;
757         border-collapse: separate;
758         border-spacing: 1px;
759         background: #fff
760 }
761
762 div.datePicker tfoot th.drag-enabled,div.datePicker thead th.drag-enabled,div.datePicker thead th.drag-enabled span
763         {
764         cursor: move
765 }
766
767 iframe.iehack {
768         position: absolute;
769         background: #fff;
770         z-index: 9998;
771         padding: 0;
772         border: 0;
773         display: none;
774         margin: 0
775 }
776
777 a.date-picker-control:link,a.date-picker-control:visited {
778         position: relative;
779         display: -moz-inline-stack;
780         border: 0 none;
781         padding: 0;
782         margin: 0 0 0 4px;
783         background: transparent url(/web-data/lib/datepicker/media/cal-grey.gif)
784                 no-repeat 50% 50%;
785         min-width: 16px;
786         line-height: 1;
787         cursor: pointer;
788         visibility: visible;
789         text-decoration: none;
790         vertical-align: top
791 }
792
793 a.date-picker-control:hover,a.date-picker-control:active,a.date-picker-control:focus,a.dp-button-active:link,a.dp-button-active:visited,a.dp-button-active:hover,a.dp-button-active:active,a.dp-button-active:focus
794         {
795         background: transparent url(/web-data/lib/datepicker/media/cal.gif)
796                 no-repeat 50% 50% !important
797 }
798
799 * html a.date-picker-control {
800         width: 16px
801 }
802
803 a.date-picker-control {
804         display: inline-block
805 }
806
807 a.date-picker-control span {
808         display: block;
809         width: 16px;
810         height: 16px;
811         margin: auto 0
812 }
813
814 div.datePicker thead th span {
815         display: block;
816         padding: 0;
817         margin: 0;
818         text-align: center;
819         line-height: 1em;
820         border: 0 none;
821         background: transparent;
822         font-weight: bold;
823         cursor: pointer
824 }
825
826 div.datePicker th span.month-display,div.datePicker th span.year-display
827         {
828         display: inline;
829         text-transform: uppercase;
830         letter-spacing: 1px;
831         font-size: 13px;
832         cursor: default
833 }
834
835 div.datePicker th span.prev-but,div.datePicker th span.next-but {
836         font-weight: lighter;
837         font-size: 13px;
838         cursor: pointer !important
839 }
840
841 div.datePicker th span.prev-but:hover,div.datePicker th span.next-but:hover,div.datePicker th span.today-but:hover
842         {
843         color: #a84444
844 }
845
846 div.datePicker th span.today-but {
847         text-align: center;
848         margin: 0;
849         font-size: 13px;
850         width: 100%;
851         text-decoration: none;
852         padding-top: .3em;
853         text-transform: uppercase;
854         vertical-align: middle;
855         cursor: pointer !important
856 }
857
858 div.dp-disabled th span.prev-but,div.dp-disabled th span.next-but,div.dp-disabled th span.today-but,div.dp-disabled th span.prev-but:hover,div.dp-disabled th span.next-but:hover,div.dp-disabled th span.today-but:hover,div.datePicker th span.prev-but.fd-disabled:hover,div.datePicker th span.next-but.fd-disabled:hover,div.datePicker thead th span.fd-disabled,div.datePicker th span.fd-disabled:hover
859         {
860         color: #aaa;
861         cursor: default !important;
862         opacity: 1
863 }
864
865 div.datePicker th span.fd-day-header {
866         text-align: center;
867         margin: 0;
868         font-size: 11px;
869         text-decoration: none;
870         text-transform: lowercase;
871         cursor: pointer
872 }
873
874 div.datePicker table {
875         margin: 0;
876         padding: 0;
877         border: 1px solid #000;
878         background: #fff;
879         text-align: center;
880         width: auto;
881         empty-cells: show;
882         border-radius: 3px;
883         -moz-border-radius: 3px;
884         -moz-box-shadow: 0 0 5px #aaa
885 }
886
887 div.datePicker table tbody th,div.datePicker table td {
888         border: 0 none;
889         padding: 0;
890         text-align: center;
891         vertical-align: middle;
892         cursor: pointer;
893         background: #fff;
894         width: 2em;
895         height: 2em;
896         overflow: hidden;
897         outline: transparent none 0;
898         border: 1px solid #ccc;
899         text-transform: none;
900         -moz-border-radius: 2px;
901         border-radius: 2px
902 }
903
904 div.datePicker table td:focus,div.datePicker table td:active {
905         outline: 0 none red
906 }
907
908 div.datePicker table th {
909         border: 0 none;
910         padding: 0;
911         font-weight: bold;
912         color: #222;
913         text-align: center;
914         vertical-align: middle;
915         text-transform: none
916 }
917
918 div.datePicker table thead th {
919         height: auto !important
920 }
921
922 div.datePicker table tbody th {
923         border: 1px solid #dcdcdc
924 }
925
926 div.datePicker table thead th.date-picker-week-header,div.datePicker table tbody th.date-picker-week-header
927         {
928         background: url(/web-data/lib/datepicker/media/backstripes.gif);
929         color: #ccc;
930         font-style: oblique;
931         background: transparent;
932         cursor: default
933 }
934
935 div.datePicker table thead th.date-picker-week-header {
936         cursor: help;
937         border: 0 none;
938         padding: 0 0 .2em 0
939 }
940
941 div.datePicker tfoot th {
942         cursor: default;
943         font-weight: normal;
944         text-transform: uppercase;
945         letter-spacing: .1em;
946         border: 0 none;
947         background: #fff;
948         height: 2.8em
949 }
950
951 div.datePicker table tbody td.date-picker-unused {
952         background: #fff url(/web-data/lib/datepicker/media/backstripes.gif);
953         border-color: #dcdcdc;
954         cursor: default !important
955 }
956
957 div.datePicker table thead th.date-picker-title {
958         width: auto;
959         height: auto;
960         padding: .4em 0;
961         background: #000;
962         color: #FFF
963 }
964
965 div.datePicker table thead th.date-picker-day-header {
966         text-transform: lowercase;
967         cursor: help;
968         height: auto
969 }
970
971 div.datePicker table tbody td.date-picker-today {
972         background: #fff url(/web-data/lib/datepicker/media/bullet2.gif)
973                 no-repeat 0 0;
974         color: #646464 !important
975 }
976
977 div.datePicker table tbody td.month-out.date-picker-highlight {
978         color: #a86 !important
979 }
980
981 div.datePicker table tbody td.date-picker-highlight,div.datePicker table thead th.date-picker-highlight
982         {
983         color: #a86666 !important
984 }
985
986 div.datePicker table tbody td.date-picker-hover {
987         background: #fff url(/web-data/lib/datepicker/media/bg_header.jpg)
988                 no-repeat 0 0;
989         cursor: pointer;
990         border-color: #6482aa !important;
991         color: #6482aa;
992         text-shadow: 0 1px 1px #fff
993 }
994
995 div.datePicker table tbody td.day-disabled {
996         background: #fff url(/web-data/lib/datepicker/media/backstripes.gif)
997                 no-repeat 0 0;
998         color: #aaa !important;
999         cursor: default;
1000         text-decoration: line-through
1001 }
1002
1003 div.datePicker table tbody td.month-out {
1004         border-color: #ddd;
1005         color: #aaa !important;
1006         background: #fff
1007                 url(/web-data/lib/datepicker/media/gradient-e5e5e5-ffffff.gif)
1008                 repeat-x 0 -40px
1009 }
1010
1011 div.datePicker table tbody td.date-picker-selected-date {
1012         color: #333 !important;
1013         border-color: #333 !important
1014 }
1015
1016 div.datePicker table tbody td.out-of-range,div.datePicker table tbody td.not-selectable
1017         {
1018         color: #ccc !important;
1019         font-style: oblique;
1020         background: #fcfcfc !important;
1021         cursor: default !important
1022 }
1023
1024 div.datePicker table tbody th.month-out,div.datePicker table tbody th.out-of-range
1025         {
1026         color: #aaa !important;
1027         font-style: oblique;
1028         background: #fcfcfc !important
1029 }
1030
1031 div.datePicker table tbody th.out-of-range {
1032         opacity: .6;
1033         filter: alpha(opacity =   60)
1034 }
1035
1036 div.datePicker table tbody td.not-selectable {
1037         opacity: .8;
1038         filter: alpha(opacity =   80)
1039 }
1040
1041 div.datePicker table tbody tr {
1042         display: table-row
1043 }
1044
1045 div.datePicker table tfoot sup {
1046         letter-spacing: normal;
1047         text-transform: none;
1048         height: 0;
1049         line-height: 1;
1050         position: relative;
1051         top: -0.2em;
1052         vertical-align: baseline !important;
1053         vertical-align: top
1054 }
1055
1056 div.datepicker-focus table.datePickerTable {
1057         border-color: #999 !important
1058 }
1059
1060 div.datePicker table tbody tr td:focus,div.datePicker table tbody td.date-picker-hover
1061         {
1062         overflow: hidden;
1063         outline: 0 solid #f00;
1064         -moz-outline: 0 none;
1065         -o-highlight: 0 none;
1066         color: #6482aa !important
1067 }
1068
1069 div.static-datepicker table {
1070         -moz-box-shadow: 0 0 0 transparent
1071 }
1072
1073 div.datepicker-focus table {
1074         outline: 0;
1075         -moz-box-shadow: 0 0 5px #aaa
1076 }
1077
1078 *:-o-prefocus {
1079         outline: -o-highlight-border
1080 }
1081
1082 * html div.datePicker table td {
1083         background-image: none
1084 }
1085
1086 * html div.datePicker table td.date-picker-unused {
1087         background: #f2f2f2
1088 }
1089
1090 body.fd-drag-active {
1091         -webkit-user-select: none
1092 }
1093
1094 @media screen and (-webkit-min-device-pixel-ratio:0) {
1095         div.datePicker table {
1096                 -webkit-box-shadow: 0 0 5px #aaa;
1097                 -webkit-border-radius: 3px
1098         }
1099         div.static-datepicker table {
1100                 -webkit-box-shadow: 0 0 0 transparent
1101         }
1102         div.datepicker-focus table {
1103                 -webkit-box-shadow: 0 0 5px #aaa
1104         }
1105         div.datePicker table td,div.datePicker table tbody th {
1106                 padding: .1em;
1107                 -webkit-border-radius: 2px
1108         }
1109         div.datePicker table tbody td.date-picker-hover {
1110                 -webkit-box-shadow: 0 0 1px #6482aa
1111         }
1112 }