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-algin: 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 * About
 458 ******************/
 459
 460         #about{
 461                 font-size: 12px;
 462                 text-align: center;
 463         }
 464
 465         #about h1{
 466                 font-size: 14px;
 467         }
 468
 469         #about a, #about a:hover, #about a:visited{
 470                 text-decoration: underline;
 471         }
 472
 473         .aboutHeader {
 474                 width:100%;
 475                 color:#FFF;
 476                 font-weight:bold;
 477                 background-color:#000;
 478         }
 479
 480         .about {
 481                 border: 1px solid #CCC;
 482                 width: 100%;
 483                 margin: 0px;
 484                 padding: 0px;
 485         }
 486
 487         .about td{
 488                 font-size:12px;
 489         }
 490
 491         .aboutElementLeft{
 492                 font-weight:bold;
 493                 width: 50%;
 494                 text-align: left;
 495         }
 496
 497         .aboutElementRight{
 498                 width: 50%;
 499         }
 500
 501         .w200h50{
 502                 width: 200px;
 503                 height: 50px;
 504         }
 505
 506 /*****************
 507 * Gears
 508 ******************/
 509         .gearsButton{
 510                 width: 125px;
 511                 height: 50px;
 512         }
 513
 514         .gearsEnabled{
 515                 background-color: #85C247;
 516         }
 517
 518         .gearsDisabled{
 519                 background-color: #FA3;
 520         }
 521
 522         .textRight{
 523                 text-align: right;
 524         }
 525
 526         .textLeft{
 527                 text-align: left;
 528         }
 529
 530         .textCenter{
 531                 text-align: center;
 532         }
 533
 534 /*****************
 535 * Timer
 536 ******************/
 537         .tListItemTable{
 538                 width: 100%;
 539         }
 540
 541         .tListHead{
 542                 /*background-color: #DDD; */
 543         }
 544
 545         .tListSName{
 546                 text-align: left;
 547         }
 548
 549         .tListItem{
 550 /*              background-color: #EEE; */
 551                 font-weight: bold;
 552                 font-size: 12px;
 553         }
 554
 555         .tListTitle{
 556                 width: 150px;
 557                 text-align: left;
 558         }
 559
 560         .tListDescr{
 561                 width: 150px;
 562                 text-align: left;
 563         }
 564
 565         .tListRepeat{
 566                 width: 70px;
 567                 text-align: left;
 568         }
 569
 570         .tListDuration{
 571                 width: 70px;
 572                 text-align: left;
 573         }
 574
 575         .tListBegin{
 576                 width: 100px;
 577                 text-align: left;
 578         }
 579
 580         .tListEnd{
 581                 width: 100px;
 582                 text-align: left;
 583         }
 584
 585         .tListAfter{
 586                 width: 85px;
 587                 text-align: left;
 588         }
 589
 590         .tListOption{
 591                 width: 80px;
 592                 text-align: center;
 593         }
 594
 595         .timerState0 {
 596                 color: #485052;
 597         }
 598
 599         .timerState1 {
 600                 color: #990000;
 601         }
 602
 603         .timerState2 {
 604                 color: #009900;
 605         }
 606
 607         .timerState3 {
 608                 color: #000099;
 609         }
 610
 611 /*****************
 612 * EPG List
 613 ******************/
 614         .epgListItem{
 615                 font-size:12px;
 616                 font-weight: bold;
 617
 618         }
 619
 620 /***************
 621 * IE6 Hackstuff
 622 ***************/
 623
 624         * html #banner{
 625                 width: 1005px;
 626                 height: 78px;
 627         }
 628
 629         * html #bannerRight{
 630                 width: 120px;
 631                 height: 60px;
 632         }
 633
 634         * html #nav{
 635                 width: 99%;
 636                 height: 250px;
 637                 background: #000;
 638                 padding-left: 5px;
 639         }
 640
 641         * html .navTable{
 642                 width: 95%;
 643         }