code.vuplus.com Git - vuplus_dvbapp-plugin/blob - 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         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: 50%;
  27                 height: 32px;
  28                 position: absolute;
  29                 top: 0px;
  30                 left: 25%;
  31                 text-align: center;
  32                 vertical-align: bottom;
  33                 z-index: 2;
  34         }
  35 /***********************
  36  WAP
  37  ***********************/
  38
  39         .wap a, .wap a:visited, .wap a:active{
  40                 color: #fff;
  41         }
  42
  43 /***********************
  44  GENERAL
  45  ***********************/
  46         .black{
  47                 background: #000;
  48         }
  49
  50         .odd{
  51                 background-color: #FFF;
  52         }
  53
  54         .even{
  55                 background-color: #DDD;
  56         }
  57
  58         .fullwidth {
  59                 width: 100%;
  60         }
  61
  62         .center {
  63                 text-align: center;
  64         }
  65
  66
  67 /***********************
  68  BANNER with MainMenu
  69  ***********************/
  70
  71         #banner{
  72                 width: 1000px;
  73                 height: 67px;
  74                 background: #000;
  75                 padding-left: 5px;
  76                 margin-bottom: 8px;
  77
  78
  79
  80         border-radius: 5px;
  81         -webkit-border-radius: 5px;
  82         -moz-border-radius: 5px;
  83
  84
  85         }
  86
  87         #banner a, #banner a:visited, #banner a:active{
  88                 color: #FFF;
  89                 text-decoration: none;
  90         }
  91
  92         #bannerText{
  93                 margin-bottom: 5px;
  94                 padding-left: 2px;
  95                 padding-top: 6px;
  96         }
  97
  98         #bannerLeft{
  99                 width: 940px;
 100                 float: left;
 101         }
 102
 103         #powerState{
 104                 border: 0px;
 105                 margin-left: 93px;
 106                 text-align: right;
 107         }
 108
 109         #bannerRight{
 110                 width: 50px;
 111                 text-align: right;
 112                 height: 60px;
 113                 float: left;
 114         }
 115
 116         #bannerRight img{
 117                 padding-top: 5px;
 118         }
 119
 120         #current a{
 121                 color: #FFF;
 122         }
 123
 124         #current{
 125                 width: 999px;
 126                 background: #000;
 127                 padding-left: 3px;
 128                 padding-right: 3px;
 129                 padding-bottom: 1px;
 130                 margin-bottom: 8px;
 131
 132         border-radius: 5px;
 133         -webkit-border-radius: 5px;
 134         -moz-border-radius: 5px;
 135
 136         }
 137
 138         .techInfo{
 139                 font-size: 10px;
 140         }
 141
 142         #currentTable{
 143                 margin-bottom: 10px;
 144                 padding-left: 2px;
 145                 padding-top: 3px;
 146                 width: 100%;
 147         }
 148
 149         #currentDuration{
 150                 text-align: right;
 151         }
 152
 153         #mainMenu{
 154                 background-color: #485052;
 155                 text-align: center;
 156                 overflow:hidden;
 157                 background: #000;
 158                 margin: 0;
 159                 padding: 0;
 160                 width: 940px;
 161         }
 162
 163         #mainMenu li{
 164                 list-style: none;
 165                 float: left;
 166                 width: 130px;
 167                 height: 21px;
 168                 margin-left: 2px;
 169                 background:#485052;
 170                 margin-top: 6px;
 171                 margin-bottom: 0px;
 172                 padding: 0px;
 173
 174                 border-radius: 5px;
 175         -webkit-border-radius: 5px;
 176         -moz-border-radius: 5px;
 177         }
 178
 179         #mainMenu a:hover, #mainMenu a:hover{ background: #AAA; }
 180         #mainMenu li.hover, #mainMenu li.hover{ background: #AAA; }
 181
 182         #mainMenu a{
 183                 display:block;
 184                 padding-top: 1px;
 185                 padding-bottom: 3px;
 186
 187                 border-radius: 5px;
 188         -webkit-border-radius: 5px;
 189         -moz-border-radius: 5px;
 190         }
 191
 192 /***************
 193  Upper Left Nav
 194  ***************/
 195
 196         #navContainer{
 197                 float:left;
 198                 width: 160px;
 199         }
 200
 201         #nav{
 202                 width: 100%;
 203                 height: 250px;
 204                 background: #000;
 205                 padding-left: 5px;
 206
 207                 border: 2px solid #000;
 208                 border-radius: 5px;
 209         -webkit-border-radius: 5px;
 210         -moz-border-radius: 5px;
 211         }
 212
 213         #nav a{
 214                 display: block;
 215         }
 216
 217         #nav{
 218                 background:#FFF;
 219                 padding-left: 0px;
 220                 padding-right: 0px;
 221
 222         }
 223
 224         #navHd{
 225                 background: #000;
 226                 text-align: center;
 227                 width: 153px;
 228         }
 229
 230         #navContent{
 231                 color: #485052;
 232                 padding-left: 5px;
 233         }
 234
 235         #navSearch{
 236                 width: 100%;
 237                 height: 61px;
 238                 background: #FFF;
 239                 margin-top: 8px;
 240
 241                 border: 2px solid #000;
 242                 border-radius: 5px;
 243         -webkit-border-radius: 5px;
 244         -moz-border-radius: 5px;
 245         }
 246
 247         #searchHd{
 248                 background: #000;
 249                 text-align: center;
 250                 width: 153px;
 251         }
 252
 253
 254         #navVolume{
 255                 width: 100%;
 256                 height: 75px;
 257                 background: #FFF;
 258                 margin-top: 8px;
 259
 260                 border: 2px solid #000;
 261                 border-radius: 5px;
 262         -webkit-border-radius: 5px;
 263         -moz-border-radius: 5px;
 264         }
 265
 266         #volHd{
 267                 background: #000;
 268                 text-align: center;
 269                 width: 153px;
 270         }
 271
 272
 273
 274 /**************
 275  Content
 276  **************/
 277         #content{
 278                 float: left;
 279                 background: #FFF;
 280                 width: 833px;
 281                 min-height: 308px;
 282                 margin-left: 8px;
 283
 284                 border: 2px solid #000;
 285                 border-radius: 5px;
 286         -webkit-border-radius: 5px;
 287         -moz-border-radius: 5px;
 288         }
 289         #contentHd{
 290                 background: #000;
 291                 width: 527px;
 292         }
 293         #contentHdExt{
 294                 background: #000;
 295                 dipslay:block;
 296         }
 297
 298         #contentHdExt input{
 299                 padding: 1px;
 300                 margin-right: 2px;
 301                 margin-bottom: 2px;
 302                 border: 0px;
 303                 color: #485052;
 304         }
 305
 306         #epgSearch{ width: 120px; }
 307
 308         .boxContent{
 309                 color: #485052;
 310                 padding: 3px;
 311         }
 312
 313 /*****************
 314 * Subnavigation
 315 ******************/
 316         .navTable{
 317                 width: 100%;
 318         }
 319
 320
 321         .navTable a:hover{
 322                 background-color:#CCC;
 323                 color: #485052;
 324                 display: block;
 325         }
 326
 327 /*****************
 328 * ServiceList
 329 ******************/
 330         .sListSName a{
 331                 display: block;
 332                 margin-right: 5px;
 333                 color: #485052;
 334         }
 335
 336         .sListSName a:hover{
 337                 background-color:#CCC;
 338                 color: #485052;
 339                 display: block;
 340         }
 341
 342         .sListEPGItem{
 343                 font-size:12px;
 344                 margin: 0px;
 345                 padding: 0px;
 346         }
 347
 348         .header{
 349                 padding-top: 2px;
 350                 padding-left: 4px;
 351                 padding-right: 4px;
 352                 display:block;
 353                 height: 22px;
 354         }
 355
 356         #container {
 357                 margin: 0 auto;   /* align for good browsers */
 358                 text-align: left; /* counter the body center */
 359                 width: 1005px;
 360         }
 361
 362         #contentTable{
 363                 scrollbar: auto;
 364                 width: 785px;
 365         }
 366
 367         #contentServices{
 368                 vertical-align: top;
 369                 width: 585px;
 370         }
 371
 372         #contentServices table{
 373                 scrollbar: auto;
 374                 width: 585px;
 375         }
 376
 377         #contentBouquets{
 378                 border-right: 1px solid #ccc;
 379                 vertical-align: top;
 380                 width: 220px;
 381         }
 382
 383         #contentMain{
 384                 padding: 8px;
 385                 margin-bottom: 5px;
 386         }
 387
 388         #contentMain {
 389                 clear: both;
 390                 overflow-y: auto;
 391                 width: 815px;
 392                 color: #485052;
 393         }
 394
 395         #contentMain div table {
 396                 float: left;
 397                 width: 599px;
 398         }
 399
 400         .sListItem{
 401                 /*border-bottom: 2px solid #CCC;*/
 402                 width: 580px;
 403                 color: #485052;
 404         }
 405
 406         .mListItem{
 407                 /*border-bottom: 2px solid #CCC;*/
 408                 width: 780px;
 409                 color: #485052;
 410         }
 411
 412 /*****************
 413 * ServiceList EPG
 414 ******************/
 415         .epgStart{
 416                 width: 50px;
 417                 color: #485052;
 418         }
 419
 420         .epgTitle{
 421                 width: 430px;
 422                 color: #485052;
 423         }
 424
 425         .epgLength{
 426                 width: 100px;
 427                 text-align: right;
 428                 color: #485052;
 429         }
 430
 431
 432 /*****************
 433 * MovieList EPG
 434 ******************/
 435         .mListDetail{
 436                 font-size: 12px;
 437                 color: #485052;
 438         }
 439
 440         .mStart{
 441                 width: 160px;
 442                 color: #485052;
 443         }
 444
 445         .mTitle{
 446                 width: 650px;
 447                 color: #485052;
 448         }
 449
 450         .mLength{
 451                 width: 90px;
 452                 text-align: right;
 453                 color: #485052;
 454         }
 455
 456 /*****************
 457 * Tools
 458 ******************/
 459
 460         #tools{
 461                 font-size: 12px;
 462                 text-align: center;
 463         }
 464
 465         #tools h1{
 466                 font-size: 14px;
 467         }
 468
 469         .tools a, .tools a:hover, .tools a:visited {
 470                 text-decoration: underline;
 471         }
 472
 473         .toolsHeader {
 474                 color:#FFF;
 475                 font-weight:bold;
 476                 background-color:#000;
 477         }
 478
 479         .tools {
 480                 border: 1px solid #CCC;
 481                 width: 100%;
 482                 margin: 0px;
 483                 padding: 0px;
 484         }
 485
 486         .tools td{
 487                 font-size:12px;
 488                 padding: 5px;
 489                 vertical-align:top;
 490
 491         }
 492
 493         .toolsElementLeft{
 494                 font-weight: bold;
 495                 width: 15%;
 496                 text-align: left;
 497         }
 498         .toolsElementCenter{
 499                 text-align: left;
 500         }
 501
 502         .toolsElementRight{
 503                 width: 10%;
 504                 text-align: left;
 505         }
 506
 507 /*****************
 508 * About
 509 ******************/
 510
 511         #about{
 512                 font-size: 12px;
 513                 text-align: center;
 514         }
 515
 516         #about h1{
 517                 font-size: 14px;
 518         }
 519
 520         #about a, #about a:hover, #about a:visited{
 521                 text-decoration: underline;
 522         }
 523
 524         .aboutHeader {
 525                 width:100%;
 526                 color:#FFF;
 527                 font-weight:bold;
 528                 background-color:#000;
 529         }
 530
 531         .about {
 532                 border: 1px solid #CCC;
 533                 width: 100%;
 534                 margin: 0px;
 535                 padding: 0px;
 536         }
 537
 538         .about td{
 539                 font-size:12px;
 540         }
 541
 542         .aboutElementLeft{
 543                 font-weight:bold;
 544                 width: 50%;
 545                 text-align: left;
 546         }
 547
 548         .aboutElementRight{
 549                 width: 50%;
 550         }
 551
 552         .w200h50{
 553                 width: 200px;
 554                 height: 50px;
 555         }
 556
 557 /*****************
 558 * Gears
 559 ******************/
 560         .gearsButton{
 561                 width: 125px;
 562                 height: 50px;
 563         }
 564
 565         .gearsEnabled{
 566                 background-color: #85C247;
 567         }
 568
 569         .gearsDisabled{
 570                 background-color: #FA3;
 571         }
 572
 573         .textRight{
 574                 text-align: right;
 575         }
 576
 577         .textLeft{
 578                 text-align: left;
 579         }
 580
 581         .textCenter{
 582                 text-align: center;
 583         }
 584
 585 /*****************
 586 * Timer
 587 ******************/
 588         .tListItemTable{
 589                 width: 100%;
 590         }
 591
 592         .tListHead{
 593                 /*background-color: #DDD; */
 594         }
 595
 596         .tListSName{
 597                 text-align: left;
 598         }
 599
 600         .tListItem{
 601 /*              background-color: #EEE; */
 602                 font-weight: bold;
 603                 font-size: 12px;
 604         }
 605
 606         .tListTitle{
 607                 width: 150px;
 608                 text-align: left;
 609         }
 610
 611         .tListDescr{
 612                 width: 150px;
 613                 text-align: left;
 614         }
 615
 616         .tListRepeat{
 617                 width: 70px;
 618                 text-align: left;
 619         }
 620
 621         .tListDuration{
 622                 width: 70px;
 623                 text-align: left;
 624         }
 625
 626         .tListBegin{
 627                 width: 100px;
 628                 text-align: left;
 629         }
 630
 631         .tListEnd{
 632                 width: 100px;
 633                 text-align: left;
 634         }
 635
 636         .tListAfter{
 637                 width: 85px;
 638                 text-align: left;
 639         }
 640
 641         .tListOption{
 642                 width: 80px;
 643                 text-align: center;
 644         }
 645
 646         .timerState0 {
 647                 color: #485052;
 648         }
 649
 650         .timerState1 {
 651                 color: #990000;
 652         }
 653
 654         .timerState2 {
 655                 color: #009900;
 656         }
 657
 658         .timerState3 {
 659                 color: #000099;
 660         }
 661
 662 /*****************
 663 * EPG List
 664 ******************/
 665         .epgListItem{
 666                 font-size:12px;
 667                 font-weight: bold;
 668
 669         }
 670
 671 /***************
 672 * IE6 Hackstuff
 673 ***************/
 674
 675         * html #banner{
 676                 width: 1005px;
 677                 height: 78px;
 678         }
 679
 680         * html #bannerRight{
 681                 width: 120px;
 682                 height: 60px;
 683         }
 684
 685         * html #nav{
 686                 width: 99%;
 687                 height: 250px;
 688                 background: #000;
 689                 padding-left: 5px;
 690         }
 691
 692         * html .navTable{
 693                 width: 95%;
 694         }