themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css

   1 @charset "utf-8";
   2
   3 .lang_he {
   4         direction: RTL;
   5         unicode-bidi: embed;
   6 }
   7
   8 @media all {
   9
  10 html {
  11         min-height: 100%;
  12         height: auto;
  13         position:relative;
  14 }
  15
  16 body {
  17         color: #ffffff;
  18         background-color: #4a6b7c;
  19         background-position: bottom center;
  20         background-repeat: repeat-x;
  21         font-family: Verdana, Arial, sans-serif;
  22         font-size: 11pt;
  23         line-height: 100%;
  24         padding-bottom: 1.5em;
  25 }
  26
  27 * {
  28         margin: 0;
  29         padding: 0;
  30 }
  31
  32 .table { display: table; }
  33 .tr { display: table-row; }
  34 .thead { display: table-header-group; }
  35 .tbody { display: table-row-group; }
  36 .tfoot { display: table-footer-group; }
  37 .td, .th { display: table-cell; }
  38 .th { font-weight: bold; }
  39
  40 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
  41 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
  42
  43 .nowrap {
  44         white-space: nowrap;
  45 }
  46
  47 a img {
  48         border: none;
  49         text-decoration: none;
  50 }
  51
  52 ul.tabmenu {
  53         margin: 0;
  54         clear: both;
  55         display: block;
  56         vertical-align: bottom;
  57         font-size: 10pt;
  58         padding: 5px 0 0 5px;
  59 }
  60
  61 div.tabmenu2 {
  62         background-color: #AAAAAA;
  63         background-image: url(tabbg.png);
  64         background-repeat: repeat-x;
  65         margin-top: -1px;
  66         border: 1px solid #444444;
  67         border-bottom: none;
  68 }
  69
  70 div.tabmenu3,
  71 div.tabmenu4,
  72 div.tabmenu5 {
  73         background-color: #AAAAAA;
  74         background-image: url(tabbg.png);
  75         background-repeat: repeat-x;
  76         border: none;
  77 }
  78
  79 ul.tabmenu li {
  80         float: left;
  81         display: block;
  82         overflow: hidden;
  83 }
  84
  85 .lang_he ul.tabmenu li {
  86         float: right;
  87 }
  88
  89 ul.tabmenu li a {
  90         text-decoration: none;
  91         color: #444444;
  92         display: block;
  93         padding: 3px 8px;
  94         margin: 0 2px;
  95         line-height: 1.3em;
  96         border: 1px solid transparent;
  97         border-bottom: none;
  98         font-size: 85%;
  99 }
 100
 101 ul.tabmenu li.active a {
 102         font-weight: bold;
 103         color: #000000;
 104         background: #f5f5f5;
 105         border: 1px solid #AAAAAA;
 106         border-bottom: none;
 107 }
 108
 109 ul.tabmenu li a:hover {
 110         color: #444444;
 111         border-color: #444444;
 112 }
 113
 114 ul.l1 li a {
 115         background-color: #AAAAAA;
 116         background-image: url(tabbg.png);
 117         background-repeat: repeat-x;
 118         border-color: #444444;
 119 }
 120
 121 ul.l1 li.tabmenu-item-logout a {
 122         margin-left: 30px;
 123 }
 124
 125 .lang_he ul.l1 li.tabmenu-item-logout a {
 126         margin-right: 30px;
 127 }
 128
 129 abbr,
 130 acronym {
 131         font-style: normal;
 132         font-variant: normal;
 133 }
 134
 135 abbr[title],
 136 acronym[title] {
 137         border-bottom: 1px dotted;
 138         cursor: help;
 139 }
 140
 141 a:link abbr[title],
 142 a:visited abbr[title],
 143 a:link acronym[title],
 144 a:visited acronym[title] {
 145         cursor: pointer;
 146 }
 147
 148 code {
 149         font-family: monospace;
 150         white-space: pre;
 151 }
 152
 153 #maincontent ul {
 154         margin-left: 2em;
 155 }
 156
 157 .warning {
 158         color: red;
 159         background-color: white;
 160         font-weight: bold;
 161 }
 162
 163 .clear {
 164         clear: both;
 165 }
 166
 167 .skiplink,
 168 .navigation,
 169 .hidden {
 170         position: absolute;
 171         left: -1000px;
 172         top: -1000px;
 173         width: 0px;
 174         height: 0px;
 175         overflow: hidden;
 176         display: inline;
 177 }
 178
 179 .error {
 180         color: #ff0000;
 181         background-color: white;
 182 }
 183
 184 .alert-message {
 185         font-size: 9pt;
 186         font-weight: normal;
 187         padding: .5em;
 188         border-radius: 3px;
 189         color: #000;
 190 }
 191
 192 .alert-message.notice {
 193         background: linear-gradient(#ccc 0%, #eee 100%);
 194         color: #4a6b7c;
 195 }
 196
 197 .alert-message.warning {
 198         background: linear-gradient(#dda 0%, #dd8 100%);
 199         color: #c00;
 200 }
 201
 202 .alert-message > * {
 203         margin: .5em;
 204 }
 205
 206 .alert-message > h4 {
 207         font-weight: bold;
 208         font-size: 10pt;
 209 }
 210
 211 div.hostinfo {
 212         float: left;
 213         margin: 0;
 214         padding: 0;
 215         width: auto;
 216         font-size: 80%;
 217         padding: 0.5em;
 218 }
 219
 220 .lang_he div.hostinfo {
 221         float: right;
 222 }
 223
 224 #xhr_poll_status {
 225         cursor: pointer;
 226 }
 227
 228 #xhr_poll_status #xhr_poll_status_off {
 229         font-weight: bold;
 230         color: #FF0000;
 231 }
 232
 233 #xhr_poll_status #xhr_poll_status_on {
 234         font-weight: bold;
 235         color: #00FF00;
 236 }
 237
 238 #menubar {
 239         position: relative;
 240         width: 100%;
 241         background: #000000;
 242         color: #ffffff;
 243 }
 244
 245 #menubar .warning {
 246         color: red;
 247         background-color: #557788;
 248 }
 249
 250 html #menubar a:link,
 251 html #menubar a:visited {
 252         position: relative;
 253         display: block;
 254         padding: 0.5em;
 255         background: #000000;
 256         color: #ffffff;
 257         text-decoration: none;
 258         font-size: 80%;
 259         font-weight: normal;
 260 }
 261
 262
 263 html #menubar a:link:hover,
 264 html #menubar a:visited:hover,
 265 html #menubar a:link:active,
 266 html #menubar a:visited:active,
 267 #menubar a:link:focus,
 268 #menubar a:visited:focus {
 269         background: #000000;
 270         color: #ffff00;
 271         font-weight: bold;
 272 }
 273
 274 html #menubar a:link.active,
 275 html #menubar a:visited.active,
 276 html #menubar a:link.preactive,
 277 html #menubar a:visited.preactive {
 278         background: #000000;
 279         color: #ffff00;
 280         font-weight: bold;
 281 }
 282
 283 html #menubar a:link.warning,
 284 html #menubar a:visited.warning {
 285         background: #000000;
 286         color: red;
 287         font-weight: bold;
 288 }
 289
 290 #modemenu {
 291         width: auto;
 292         background: #000000;
 293         color: #ffffff;
 294         list-style: none;
 295         margin-right: 1px;
 296         margin-left: 2em;
 297         float: right;
 298 }
 299
 300 #modemenu li {
 301         float: right;
 302         list-style: none;
 303 }
 304
 305 #savemenu {
 306         float: right;
 307 }
 308
 309 .lang_he #savemenu {
 310         float: left;
 311 }
 312
 313 .lang_de #submenu_admin_uci {
 314         width: 12em;
 315 }
 316
 317 .lang_ru #submenu_admin_uci {
 318         width: 11.5em;
 319 }
 320
 321 textarea#syslog {
 322         width: 98%;
 323         min-height: 500px;
 324         border: 3px solid #cccccc;
 325         padding: 5px;
 326         font-family: monospace;
 327 }
 328
 329 #maincontainer {
 330         clear: both;
 331         width: 96%;
 332         margin: 0 auto;
 333         height:100%;
 334 }
 335
 336 #maincontent {
 337         padding: 0.5em;
 338         background: #f5f5f5;
 339         color: #000000;
 340         font-size: 80%;
 341         border-width: 0 1px 1px 1px;
 342         border-style: solid;
 343         border-color: #444444;
 344 }
 345
 346 .lang_he #maincontent {
 347         direction: rtl;
 348 }
 349
 350 #maincontent h2 {
 351         font-size: 150%;
 352         font-family: Trebuchet MS, Verdana, sans-serif;
 353         font-weight: bold;
 354         margin: 0.25em 0 0.7em 0;
 355         border-bottom: 1px solid;
 356         padding-top: 10px;
 357         padding-bottom: 4px;
 358 }
 359
 360 #maincontent h3 {
 361         margin: 0.5em 0 1.1em 0;
 362         font-size: 125%;
 363         font-weight: bold;
 364         font-style: italic;
 365         font-family: Trebuchet MS, Verdana, sans-serif;
 366         color: #27408B;
 367 }
 368
 369 #maincontent p {
 370         margin-bottom: 1em;
 371 }
 372
 373 .cbi-section {
 374         margin-bottom: 0.5em;
 375         padding: 0.5em 1em;
 376         border: 1px dotted #555555;
 377         background-color: #ffffff;
 378         color: #000000;
 379 }
 380
 381 .cbi-section legend {
 382         font-size: 110%;
 383         font-weight: bold;
 384         height: 1em;
 385         padding: 0 0.25em;
 386         background-color: transparent;
 387         color: #555555;
 388 }
 389
 390 .cbi-section h2 {
 391         margin: 0em 0 0.5em -0.5em !important;
 392 }
 393
 394 .cbi-section h3 {
 395         text-decoration: none !important;
 396         font-weight: bold !important;
 397         color: #555555 !important;
 398         margin: 0.25em !important;
 399         font-size: 100% !important;
 400 }
 401
 402 .cbi-section-descr {
 403         margin-bottom: 0.5em;
 404         font-size: 95%;
 405 }
 406
 407 .cbi-title-ref {
 408         color: inherit;
 409         text-decoration: none;
 410         padding-right: 18px;
 411         background: url('../resources/cbi/link.gif') no-repeat scroll right center;
 412         background-color: inherit;
 413 }
 414
 415 ul.cbi-apply {
 416         font-size: 90%;
 417 }
 418
 419 input:-webkit-input-placeholder {
 420         color: #AAAAAA;
 421 }
 422
 423 input:-moz-placeholder {
 424         color: #AAAAAA;
 425 }
 426
 427 input:-ms-input-placeholder {
 428         color: #AAAAAA;
 429 }
 430
 431 input[type=submit],
 432 input[type=reset],
 433 input[type=image],
 434 input[type=button] {
 435         cursor: pointer;
 436 }
 437
 438 select,
 439 input,
 440 textarea {
 441         background: #eeeeee;
 442         color: #000000;
 443         border-width: 1px;
 444         border-color: #000000;
 445 }
 446
 447 input[type=image] {
 448         border: none;
 449 }
 450
 451 input:focus,
 452 input:hover,
 453 select:focus,
 454 select:hover {
 455         background-color: #ffffff;
 456         color: #000000;
 457 }
 458
 459 select,
 460 input[type=text],
 461 input[type=password] {
 462         width: 20em;
 463 }
 464
 465 .td select,
 466 .td input[type=text],
 467 .td input[type=password] {
 468         width: 99%;
 469 }
 470
 471 img.cbi-image-button {
 472         cursor: pointer;
 473         margin: 0 2px;
 474         vertical-align: middle;
 475 }
 476
 477 .btn, .cbi-button {
 478         padding: 2px;
 479         border-radius: 3px;
 480         border: 1px solid #aaa;
 481         background: #eee 1px center no-repeat;
 482         text-decoration: none;
 483         color: #000;
 484         display: inline-block;
 485 }
 486
 487 .btn:hover, .cbi-button:hover {
 488         border-color: #4a6b7c;
 489         background-color: #fff;
 490 }
 491
 492 .btn[disabled],
 493 .btn[disabled]:hover,
 494 .cbi-button[disabled],
 495 .cbi-button[disabled]:hover {
 496         opacity: .6;
 497         cursor: default;
 498         border-color: inherit;
 499         background-color: inherit;
 500 }
 501
 502 input.cbi-input-user {
 503         background-image: url('../resources/cbi/user.gif');
 504         background-repeat: no-repeat;
 505         background-position: 1px center;
 506         color: #000000;
 507         text-indent: 17px;
 508 }
 509
 510 input.cbi-input-password {
 511         background-image: url('../resources/cbi/key.gif');
 512         background-repeat: no-repeat;
 513         background-position: 1px center;
 514         color: #000000;
 515         text-indent: 17px;
 516 }
 517
 518 input.cbi-input-find,
 519 input.cbi-button-find {
 520         background-image: url('../resources/cbi/find.gif');
 521         color: #000000;
 522         padding-left: 17px;
 523 }
 524
 525 input.cbi-input-reload {
 526         background-image: url('../resources/cbi/reload.gif');
 527         color: #000000;
 528         padding-left: 17px;
 529 }
 530
 531 input.cbi-input-add,
 532 input.cbi-button-add {
 533         background-image: url('../resources/cbi/add.gif');
 534         color: #000000;
 535         padding-left: 17px;
 536         padding-right: 1px;
 537 }
 538
 539 input.cbi-input-fieldadd,
 540 input.cbi-button-fieldadd {
 541         background-image: url(../resources/cbi/fieldadd.gif);
 542         color: #000000;
 543         padding-left: 17px;
 544 }
 545
 546 input.cbi-input-reset,
 547 input.cbi-button-reset {
 548         background-image: url('../resources/cbi/reset.gif');
 549         color: #000000;
 550         padding-left: 17px;
 551         padding-right: 1px;
 552 }
 553
 554 input.cbi-input-save,
 555 input.cbi-button-save {
 556         background-image: url('../resources/cbi/save.gif');
 557         color: #000000;
 558         padding-left: 17px;
 559         padding-right: 1px;
 560 }
 561
 562 /*
 563 input.cbi-input-apply,
 564 input.cbi-button-apply {
 565         background-image: url('../resources/cbi/apply.gif');
 566         color: #000000;
 567         padding-left: 17px;
 568         padding-right: 1px;
 569 }
 570 */
 571
 572 input.cbi-input-apply:before,
 573 input.cbi-button-apply:before {
 574         background-image: url('../resources/cbi/apply.gif');
 575         border: 2px solid red;
 576         width: 100px;
 577         height: 100px;
 578         content: ".";
 579         display: block;
 580         position: absolute;
 581 }
 582
 583 input.cbi-input-link,
 584 input.cbi-button-link {
 585         background-image: url('../resources/cbi/link.gif');
 586         color: #000000;
 587         padding-left: 17px;
 588         padding-right: 1px;
 589 }
 590
 591 input.cbi-input-download,
 592 input.cbi-button-download {
 593         background-image: url('../resources/cbi/download.gif');
 594         color: #000000;
 595         padding-left: 17px;
 596         padding-right: 1px;
 597 }
 598
 599 input.cbi-input-remove,
 600 div.cbi-section-remove input {
 601         background-image: url('../resources/cbi/remove.gif');
 602         color: #000000;
 603         padding-left: 17px;
 604         padding-right: 1px;
 605 }
 606
 607 input.cbi-button-up {
 608         background-image: url('../resources/cbi/up.gif');
 609         padding-left: 11px;
 610         padding-right: 1px;
 611 }
 612
 613 input.cbi-button-down {
 614         background-image: url('../resources/cbi/down.gif');
 615         padding-left: 11px;
 616         padding-right: 1px;
 617 }
 618
 619 input.cbi-button-edit {
 620         background-image: url('../resources/cbi/edit.gif');
 621         color: #000000;
 622         padding-left: 17px;
 623         padding-right: 1px;
 624 }
 625
 626 input.cbi-button-reload {
 627         background-image: url('../resources/cbi/reload.gif');
 628         color: #000000;
 629         padding-left: 17px;
 630         padding-right: 1px;
 631 }
 632
 633 input.cbi-button-reset {
 634         background-image: url('../resources/cbi/reset.gif');
 635         color: #000000;
 636         padding-left: 17px;
 637         padding-right: 1px;
 638 }
 639
 640 input.cbi-button-remove {
 641         background-image: url('../resources/cbi/remove.gif');
 642         color: #000000;
 643         padding-left: 17px;
 644         padding-right: 1px;
 645 }
 646
 647 .cbi-input-invalid {
 648         background-image: url('../resources/cbi/reset.gif');
 649         background-repeat: no-repeat;
 650         background-position: right;
 651         color: #FF0000 !important;
 652         border-color: #FF0000;
 653 }
 654
 655 div.cbi-section-remove input {
 656         border-bottom: none;
 657 }
 658
 659 textarea {
 660         margin-left: -1px;
 661         margin-bottom: 0.5em;
 662 }
 663
 664 form > div > input[type=submit],
 665 form > div > input[type=reset] {
 666         float: right;
 667         margin-left: 0.5em;
 668 }
 669
 670 table td, table th {
 671         color: #000000;
 672 }
 673
 674 .table .td, .table .th {
 675         color: #000000;
 676         padding: .25em 0;
 677         text-align: center;
 678         vertical-align: middle;
 679 }
 680
 681 .table.smalltext {
 682         background: #f5f5f5;
 683         color: #000000;
 684         border-top: 1px solid #666666;
 685         border-right: 1px solid #666666;
 686         border-bottom: 1px solid #666666;
 687         font-size: 90%;
 688         width: 80%;
 689         margin-left: auto;
 690         margin-right: auto;
 691         border-collapse: collapse;
 692 }
 693
 694 .table.smalltext .tr:hover .td {
 695         background-color: #bbddee;
 696         color: #000000;
 697 }
 698
 699 .table.smalltext .tr .th {
 700         padding: 0 0.25em;
 701         border-left: 1px solid #666666;
 702         text-align: left;
 703 }
 704
 705 .table.smalltext .tr .td {
 706         padding: 0 0.25em;
 707         border-top: 1px solid #666666;
 708         border-left: 1px solid #666666;
 709 }
 710
 711 .table.cbi-section-table .cbi-rowstyle-1 {
 712         background-color: #eeeeff;
 713         color: #000000;
 714 }
 715
 716 .table.cbi-section-table .cbi-rowstyle-1:hover,
 717 .table.cbi-section-table .cbi-rowstyle-2:hover {
 718         background-color: #b2c8d4;
 719         color: #000000;
 720 }
 721
 722 .table.cbi-section-table .cbi-section-table-cell {
 723         padding: 3px;
 724         white-space: nowrap;
 725 }
 726
 727 .cbi-section .cbi-rowstyle-1 h3 {
 728         background-color: #eeeeff;
 729         color: #555555;
 730 }
 731
 732 .cbi-rowstyle-2 {
 733         color: #000000;
 734 }
 735
 736 div.cbi-value {
 737         clear: left;
 738         vertical-align: middle;
 739         padding: 0.25em 0.6em;
 740         border-bottom: 1px dotted #bbbbbb;
 741 }
 742
 743 div.cbi-value:hover {
 744         background: #f8f8f8;
 745         color: #000000;
 746 }
 747
 748 .cbi-value-title {
 749         float: left;
 750         width: 40%;
 751         line-height: 1.8em;
 752 }
 753
 754 div.cbi-value-field {
 755         width: 58%;
 756         margin-left: 40%;
 757         padding: 0.25em 0;
 758 }
 759
 760 div.td.cbi-value-field {
 761         width: auto;
 762         vertical-align: middle;
 763 }
 764
 765 div.cbi-value-description {
 766         font-size: 90%;
 767         display: inline;
 768 }
 769
 770 div.cbi-section-create {
 771         clear: left;
 772         white-space: nowrap;
 773         vertical-align: top;
 774 }
 775
 776 div.cbi-section-create .cbi-button {
 777         margin: 0.25em;
 778 }
 779
 780 input.cbi-section-create-name {
 781         margin-right: -0.25em;
 782 }
 783
 784 div.cbi-map-descr {
 785         margin-bottom: 1em;
 786 }
 787
 788 div.cbi-optionals {
 789         padding: 0.25em;
 790         border-bottom: 1px dotted #bbbbbb;
 791 }
 792
 793 div.cbi-section-remove {
 794         float: right;
 795 }
 796
 797 .cbi-section-node {
 798         clear: both;
 799         border: 1px solid #BBBBBB;
 800         border-radius: 3px;
 801         padding-bottom: 0;
 802         position: relative;
 803 }
 804
 805 .cbi-section-node-tabbed {
 806         border-top-left-radius: 0;
 807 }
 808
 809 .cbi-section-node .cbi-value-last {
 810         border-bottom: none;
 811 }
 812
 813 .cbi-section-node .table div {
 814         padding-bottom: 0;
 815         border-bottom: none;
 816 }
 817
 818 .cbi-section-node div.cbi-section-table-row {
 819         margin: 0.25em;
 820 }
 821
 822 .table.cbi-section-table {
 823         width: 100%;
 824         font-size: 95%;
 825 }
 826
 827 .table.cbi-section-table .th,
 828 .table.cbi-section-table .td {
 829         text-align: center;
 830 }
 831
 832 .tr.cbi-section-table-descr .th {
 833         font-weight: normal;
 834         font-size: 90%;
 835         vertical-align: top;
 836 }
 837
 838 .td.cbi-section-table-optionals {
 839         text-align: left !important;
 840         padding-top: 1em;
 841 }
 842
 843 .cbi-value-helpicon img {
 844         vertical-align: bottom;
 845 }
 846
 847 div.cbi-error {
 848         font-size: 95%;
 849         font-weight: bold;
 850         color: #ff0000;
 851         background-color: #ffffff;
 852 }
 853
 854 .td.cbi-value-error {
 855         border-color: red;
 856 }
 857
 858 .cbi-value-error input,
 859 .cbi-value-error select {
 860         color: red;
 861         background-color: #ffcccc;
 862 }
 863
 864 .cbi-section-error {
 865         color: red;
 866         background-color: white;
 867         font-size: 95%;
 868         border: 1px dotted red;
 869         margin: 3px;
 870         padding: 3px;
 871 }
 872
 873 .cbi-value-field var {
 874         color: #2222FF;
 875 }
 876
 877 ul.cbi-tabmenu {
 878         padding: 3px 0;
 879         margin-left: 0 !important;
 880         list-style-type: none;
 881         position: relative;
 882         z-index: 10;
 883         top: 4px;
 884         line-height: 20px;
 885 }
 886
 887 ul.cbi-tabmenu li.cbi-tab,
 888 ul.cbi-tabmenu li.cbi-tab-disabled {
 889         display: inline;
 890         margin: 0;
 891 }
 892
 893 ul.cbi-tabmenu li.cbi-tab a,
 894 ul.cbi-tabmenu li.cbi-tab-disabled a {
 895         text-decoration: none;
 896         padding: 3px 7px;
 897         margin-right: 3px;
 898         border: 1px solid #BBBBBB;
 899         border-bottom: none;
 900         border-radius: 3px 3px 0 0;
 901         background-color: #EEEEEE;
 902         color: #BBBBBB;
 903 }
 904
 905 ul.cbi-tabmenu li.cbi-tab-highlighted a {
 906         color: #000000;
 907         background-color: #FFEEAA;
 908 }
 909
 910 ul.cbi-tabmenu li a:hover {
 911         color: #000000;
 912 }
 913
 914 ul.cbi-tabmenu li.cbi-tab a {
 915         padding-top: 4px;
 916         color: #000000;
 917         background-color: #FFFFFF;
 918 }
 919
 920 div.cbi-tab-descr {
 921         background-image: url(/luci-static/resources/cbi/help.gif);
 922         background-position: 0.25em 50%;
 923         background-repeat: no-repeat;
 924         border-bottom: 1px solid #CCCCCC;
 925         margin: 0.25em 0.25em 2em;
 926         padding: 0.5em 0.5em 0.5em 2em;
 927 }
 928
 929 .left {
 930         text-align: left !important;
 931 }
 932
 933 .right {
 934         text-align: right !important;
 935 }
 936
 937 .center {
 938         text-align: center !important;
 939 }
 940
 941 .luci {
 942         position: absolute;
 943         bottom: 0;
 944         left: 1em;
 945         height: 1.5em;
 946         font-size: 80%;
 947 }
 948
 949 .luci a:link,
 950 .luci a:visited {
 951         background-color: transparent;
 952         color: #666666;
 953         text-decoration: none;
 954         font-size: 70%;
 955 }
 956
 957 .inline {
 958         display: inline;
 959 }
 960
 961 .error500 {
 962         white-space: normal;
 963         border: 1px dotted #ff0000;
 964         background-color: #ffffff;
 965         color: #000000;
 966         padding: 0.5em;
 967 }
 968
 969
 970 .ifacebadge, .ifacebox {
 971         display: inline-flex;
 972         align-content: center;
 973         border: 1px solid #ccc;
 974         border-radius: 3px;
 975         padding: 2px;
 976         background: #fff;
 977         margin: .25em .5em;
 978 }
 979
 980 .ifacebox-head {
 981         background: #eee;
 982 }
 983
 984 .ifacebox-head.active {
 985         background: #90c0e0;
 986 }
 987
 988 .ifacebadge > img {
 989         margin-right: 5px;
 990         align-self: start;
 991 }
 992
 993 .ifacebadge-active {
 994         border-color: #000000;
 995         font-weight: bold;
 996 }
 997
 998 .ifacebox {
 999         flex-direction: column;
1000         margin: 0 10px;
1001         padding: 0;
1002         min-width: 100px;
1003 }
1004
1005 .ifacebox > * {
1006         padding: 2px;
1007 }
1008
1009
1010 .network-status-table {
1011         display: flex;
1012         flex-wrap: wrap;
1013 }
1014
1015 .network-status-table .ifacebox {
1016         margin: .5em;
1017         font-size: 90%;
1018         flex-grow: 1;
1019 }
1020
1021 .network-status-table .ifacebox-body {
1022         display: flex;
1023         flex-direction: column;
1024         height: 100%;
1025 }
1026
1027 .network-status-table .ifacebox-body > span {
1028         flex: 10;
1029 }
1030
1031 .network-status-table .ifacebox-body > div {
1032         display: flex;
1033         flex-wrap: wrap;
1034 }
1035
1036 .network-status-table .ifacebox-body .ifacebadge {
1037         flex: 1;
1038         margin: .5em .25em .25em .25em;
1039         padding: .5em;
1040         min-width: 220px;
1041         white-space: nowrap;
1042 }
1043
1044
1045 .zonebadge {
1046         padding: 2px;
1047         display: inline-block;
1048         white-space: nowrap;
1049         cursor: pointer;
1050 }
1051
1052 .zonebadge em,
1053 .zonebadge strong {
1054         margin: 3px;
1055         display: inline-block;
1056 }
1057
1058 .zonebadge input {
1059         width: 6em;
1060         height: 1.5em;
1061 }
1062
1063 .zonebadge-empty {
1064         border: 1px dashed #AAAAAA;
1065         color: #AAAAAA;
1066         font-style: italic;
1067         font-size: smaller;
1068 }
1069
1070
1071 .uci-change-list {
1072         font-family: monospace;
1073 }
1074
1075 .uci-change-list ins,
1076 .uci-change-legend-label ins {
1077         text-decoration: none;
1078         border: 1px solid #00FF00;
1079         background-color: #CCFFCC;
1080         display: block;
1081         padding: 2px;
1082 }
1083
1084 .uci-change-list del,
1085 .uci-change-legend-label del {
1086         text-decoration: none;
1087         border: 1px solid #FF0000;
1088         background-color: #FFCCCC;
1089         display: block;
1090         font-style: normal;
1091         padding: 2px;
1092 }
1093
1094 .uci-change-list var,
1095 .uci-change-legend-label var {
1096         text-decoration: none;
1097         border: 1px solid #CCCCCC;
1098         background-color: #EEEEEE;
1099         display: block;
1100         font-style: normal;
1101         padding: 2px;
1102 }
1103
1104 .uci-change-list var ins,
1105 .uci-change-list var del {
1106         /*display: inline;*/
1107         border: none;
1108         white-space: pre;
1109         font-style: normal;
1110         padding: 0px;
1111 }
1112
1113 .uci-change-legend {
1114         padding: 5px;
1115 }
1116
1117 .uci-change-legend-label {
1118         width: 150px;
1119         float: left;
1120         font-size: 80%;
1121 }
1122
1123 .uci-change-legend-label>ins,
1124 .uci-change-legend-label>del,
1125 .uci-change-legend-label>var {
1126         float: left;
1127         margin-right: 4px;
1128         width: 10px;
1129         height: 10px;
1130         display: block;
1131 }
1132
1133 .uci-change-legend-label var ins,
1134 .uci-change-legend-label var del {
1135         line-height: 6px;
1136         border: none;
1137 }
1138
1139
1140 }