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 }
 483
 484 .btn:hover, .cbi-button:hover {
 485         border-color: #4a6b7c;
 486         background-color: #fff;
 487 }
 488
 489 .btn[disabled],
 490 .btn[disabled]:hover,
 491 .cbi-button[disabled],
 492 .cbi-button[disabled]:hover {
 493         opacity: .6;
 494         cursor: default;
 495         border-color: inherit;
 496         background-color: inherit;
 497 }
 498
 499 input.cbi-input-user {
 500         background-image: url('../resources/cbi/user.gif');
 501         background-repeat: no-repeat;
 502         background-position: 1px center;
 503         color: #000000;
 504         text-indent: 17px;
 505 }
 506
 507 input.cbi-input-password {
 508         background-image: url('../resources/cbi/key.gif');
 509         background-repeat: no-repeat;
 510         background-position: 1px center;
 511         color: #000000;
 512         text-indent: 17px;
 513 }
 514
 515 input.cbi-input-find,
 516 input.cbi-button-find {
 517         background-image: url('../resources/cbi/find.gif');
 518         color: #000000;
 519         padding-left: 17px;
 520 }
 521
 522 input.cbi-input-reload {
 523         background-image: url('../resources/cbi/reload.gif');
 524         color: #000000;
 525         padding-left: 17px;
 526 }
 527
 528 input.cbi-input-add,
 529 input.cbi-button-add {
 530         background-image: url('../resources/cbi/add.gif');
 531         color: #000000;
 532         padding-left: 17px;
 533         padding-right: 1px;
 534 }
 535
 536 input.cbi-input-fieldadd,
 537 input.cbi-button-fieldadd {
 538         background-image: url(../resources/cbi/fieldadd.gif);
 539         color: #000000;
 540         padding-left: 17px;
 541 }
 542
 543 input.cbi-input-reset,
 544 input.cbi-button-reset {
 545         background-image: url('../resources/cbi/reset.gif');
 546         color: #000000;
 547         padding-left: 17px;
 548         padding-right: 1px;
 549 }
 550
 551 input.cbi-input-save,
 552 input.cbi-button-save {
 553         background-image: url('../resources/cbi/save.gif');
 554         color: #000000;
 555         padding-left: 17px;
 556         padding-right: 1px;
 557 }
 558
 559 /*
 560 input.cbi-input-apply,
 561 input.cbi-button-apply {
 562         background-image: url('../resources/cbi/apply.gif');
 563         color: #000000;
 564         padding-left: 17px;
 565         padding-right: 1px;
 566 }
 567 */
 568
 569 input.cbi-input-apply:before,
 570 input.cbi-button-apply:before {
 571         background-image: url('../resources/cbi/apply.gif');
 572         border: 2px solid red;
 573         width: 100px;
 574         height: 100px;
 575         content: ".";
 576         display: block;
 577         position: absolute;
 578 }
 579
 580 input.cbi-input-link,
 581 input.cbi-button-link {
 582         background-image: url('../resources/cbi/link.gif');
 583         color: #000000;
 584         padding-left: 17px;
 585         padding-right: 1px;
 586 }
 587
 588 input.cbi-input-download,
 589 input.cbi-button-download {
 590         background-image: url('../resources/cbi/download.gif');
 591         color: #000000;
 592         padding-left: 17px;
 593         padding-right: 1px;
 594 }
 595
 596 input.cbi-input-remove,
 597 div.cbi-section-remove input {
 598         background-image: url('../resources/cbi/remove.gif');
 599         color: #000000;
 600         padding-left: 17px;
 601         padding-right: 1px;
 602 }
 603
 604 input.cbi-button-up {
 605         background-image: url('../resources/cbi/up.gif');
 606         padding-left: 11px;
 607         padding-right: 1px;
 608 }
 609
 610 input.cbi-button-down {
 611         background-image: url('../resources/cbi/down.gif');
 612         padding-left: 11px;
 613         padding-right: 1px;
 614 }
 615
 616 input.cbi-button-edit {
 617         background-image: url('../resources/cbi/edit.gif');
 618         color: #000000;
 619         padding-left: 17px;
 620         padding-right: 1px;
 621 }
 622
 623 input.cbi-button-reload {
 624         background-image: url('../resources/cbi/reload.gif');
 625         color: #000000;
 626         padding-left: 17px;
 627         padding-right: 1px;
 628 }
 629
 630 input.cbi-button-reset {
 631         background-image: url('../resources/cbi/reset.gif');
 632         color: #000000;
 633         padding-left: 17px;
 634         padding-right: 1px;
 635 }
 636
 637 input.cbi-button-remove {
 638         background-image: url('../resources/cbi/remove.gif');
 639         color: #000000;
 640         padding-left: 17px;
 641         padding-right: 1px;
 642 }
 643
 644 .cbi-input-invalid {
 645         background-image: url('../resources/cbi/reset.gif');
 646         background-repeat: no-repeat;
 647         background-position: right;
 648         color: #FF0000 !important;
 649         border-color: #FF0000;
 650 }
 651
 652 div.cbi-section-remove input {
 653         border-bottom: none;
 654 }
 655
 656 textarea {
 657         margin-left: -1px;
 658         margin-bottom: 0.5em;
 659 }
 660
 661 form > div > input[type=submit],
 662 form > div > input[type=reset] {
 663         float: right;
 664         margin-left: 0.5em;
 665 }
 666
 667 table td, table th {
 668         color: #000000;
 669 }
 670
 671 .table .td, .table .th {
 672         color: #000000;
 673         padding: .25em 0;
 674         text-align: center;
 675         vertical-align: middle;
 676 }
 677
 678 .table.smalltext {
 679         background: #f5f5f5;
 680         color: #000000;
 681         border-top: 1px solid #666666;
 682         border-right: 1px solid #666666;
 683         border-bottom: 1px solid #666666;
 684         font-size: 90%;
 685         width: 80%;
 686         margin-left: auto;
 687         margin-right: auto;
 688         border-collapse: collapse;
 689 }
 690
 691 .table.smalltext .tr:hover .td {
 692         background-color: #bbddee;
 693         color: #000000;
 694 }
 695
 696 .table.smalltext .tr .th {
 697         padding: 0 0.25em;
 698         border-left: 1px solid #666666;
 699         text-align: left;
 700 }
 701
 702 .table.smalltext .tr .td {
 703         padding: 0 0.25em;
 704         border-top: 1px solid #666666;
 705         border-left: 1px solid #666666;
 706 }
 707
 708 .table.cbi-section-table .cbi-rowstyle-1 {
 709         background-color: #eeeeff;
 710         color: #000000;
 711 }
 712
 713 .table.cbi-section-table .cbi-rowstyle-1:hover,
 714 .table.cbi-section-table .cbi-rowstyle-2:hover {
 715         background-color: #b2c8d4;
 716         color: #000000;
 717 }
 718
 719 .table.cbi-section-table .cbi-section-table-cell {
 720         padding: 3px;
 721         white-space: nowrap;
 722 }
 723
 724 .cbi-section .cbi-rowstyle-1 h3 {
 725         background-color: #eeeeff;
 726         color: #555555;
 727 }
 728
 729 .cbi-rowstyle-2 {
 730         color: #000000;
 731 }
 732
 733 div.cbi-value {
 734         clear: left;
 735         vertical-align: middle;
 736         padding: 0.25em 0.6em;
 737         border-bottom: 1px dotted #bbbbbb;
 738 }
 739
 740 div.cbi-value:hover {
 741         background: #f8f8f8;
 742         color: #000000;
 743 }
 744
 745 .cbi-value-title {
 746         float: left;
 747         width: 40%;
 748         line-height: 1.8em;
 749 }
 750
 751 div.cbi-value-field {
 752         width: 58%;
 753         margin-left: 40%;
 754         padding: 0.25em 0;
 755 }
 756
 757 div.td.cbi-value-field {
 758         width: auto;
 759         vertical-align: middle;
 760 }
 761
 762 div.cbi-value-description {
 763         font-size: 90%;
 764         display: inline;
 765 }
 766
 767 div.cbi-section-create {
 768         clear: left;
 769         white-space: nowrap;
 770         vertical-align: top;
 771 }
 772
 773 div.cbi-section-create .cbi-button {
 774         margin: 0.25em;
 775 }
 776
 777 input.cbi-section-create-name {
 778         margin-right: -0.25em;
 779 }
 780
 781 div.cbi-map-descr {
 782         margin-bottom: 1em;
 783 }
 784
 785 div.cbi-optionals {
 786         padding: 0.25em;
 787         border-bottom: 1px dotted #bbbbbb;
 788 }
 789
 790 div.cbi-section-remove {
 791         float: right;
 792 }
 793
 794 .cbi-section-node {
 795         clear: both;
 796         border: 1px solid #BBBBBB;
 797         border-radius: 3px;
 798         padding-bottom: 0;
 799         position: relative;
 800 }
 801
 802 .cbi-section-node-tabbed {
 803         border-top-left-radius: 0;
 804 }
 805
 806 .cbi-section-node .cbi-value-last {
 807         border-bottom: none;
 808 }
 809
 810 .cbi-section-node .table div {
 811         padding-bottom: 0;
 812         border-bottom: none;
 813 }
 814
 815 .cbi-section-node div.cbi-section-table-row {
 816         margin: 0.25em;
 817 }
 818
 819 .table.cbi-section-table {
 820         width: 100%;
 821         font-size: 95%;
 822 }
 823
 824 .table.cbi-section-table .th,
 825 .table.cbi-section-table .td {
 826         text-align: center;
 827 }
 828
 829 .tr.cbi-section-table-descr .th {
 830         font-weight: normal;
 831         font-size: 90%;
 832         vertical-align: top;
 833 }
 834
 835 .td.cbi-section-table-optionals {
 836         text-align: left !important;
 837         padding-top: 1em;
 838 }
 839
 840 .cbi-value-helpicon img {
 841         vertical-align: bottom;
 842 }
 843
 844 div.cbi-error {
 845         font-size: 95%;
 846         font-weight: bold;
 847         color: #ff0000;
 848         background-color: #ffffff;
 849 }
 850
 851 .td.cbi-value-error {
 852         border-color: red;
 853 }
 854
 855 .cbi-value-error input,
 856 .cbi-value-error select {
 857         color: red;
 858         background-color: #ffcccc;
 859 }
 860
 861 .cbi-section-error {
 862         color: red;
 863         background-color: white;
 864         font-size: 95%;
 865         border: 1px dotted red;
 866         margin: 3px;
 867         padding: 3px;
 868 }
 869
 870 .cbi-value-field var {
 871         color: #2222FF;
 872 }
 873
 874 ul.cbi-tabmenu {
 875         padding: 3px 0;
 876         margin-left: 0 !important;
 877         list-style-type: none;
 878         position: relative;
 879         z-index: 10;
 880         top: 4px;
 881         line-height: 20px;
 882 }
 883
 884 ul.cbi-tabmenu li.cbi-tab,
 885 ul.cbi-tabmenu li.cbi-tab-disabled {
 886         display: inline;
 887         margin: 0;
 888 }
 889
 890 ul.cbi-tabmenu li.cbi-tab a,
 891 ul.cbi-tabmenu li.cbi-tab-disabled a {
 892         text-decoration: none;
 893         padding: 3px 7px;
 894         margin-right: 3px;
 895         border: 1px solid #BBBBBB;
 896         border-bottom: none;
 897         border-radius: 3px 3px 0 0;
 898         background-color: #EEEEEE;
 899         color: #BBBBBB;
 900 }
 901
 902 ul.cbi-tabmenu li.cbi-tab-highlighted a {
 903         color: #000000;
 904         background-color: #FFEEAA;
 905 }
 906
 907 ul.cbi-tabmenu li a:hover {
 908         color: #000000;
 909 }
 910
 911 ul.cbi-tabmenu li.cbi-tab a {
 912         padding-top: 4px;
 913         color: #000000;
 914         background-color: #FFFFFF;
 915 }
 916
 917 div.cbi-tab-descr {
 918         background-image: url(/luci-static/resources/cbi/help.gif);
 919         background-position: 0.25em 50%;
 920         background-repeat: no-repeat;
 921         border-bottom: 1px solid #CCCCCC;
 922         margin: 0.25em 0.25em 2em;
 923         padding: 0.5em 0.5em 0.5em 2em;
 924 }
 925
 926 .left {
 927         text-align: left !important;
 928 }
 929
 930 .right {
 931         text-align: right !important;
 932 }
 933
 934 .center {
 935         text-align: center !important;
 936 }
 937
 938 .luci {
 939         position: absolute;
 940         bottom: 0;
 941         left: 1em;
 942         height: 1.5em;
 943         font-size: 80%;
 944 }
 945
 946 .luci a:link,
 947 .luci a:visited {
 948         background-color: transparent;
 949         color: #666666;
 950         text-decoration: none;
 951         font-size: 70%;
 952 }
 953
 954 .inline {
 955         display: inline;
 956 }
 957
 958 .error500 {
 959         white-space: normal;
 960         border: 1px dotted #ff0000;
 961         background-color: #ffffff;
 962         color: #000000;
 963         padding: 0.5em;
 964 }
 965
 966 .errorbox {
 967         border: 1px solid #FF0000;
 968         background-color: #FFCCCC;
 969         padding: 5px;
 970         margin-bottom: 5px;
 971 }
 972
 973 .errorbox a {
 974         color: #000000 !important;
 975 }
 976
 977
 978 .ifacebadge, .ifacebox {
 979         display: inline-flex;
 980         align-content: center;
 981         border: 1px solid #ccc;
 982         border-radius: 3px;
 983         padding: 2px;
 984         background: #fff;
 985         margin: .25em .5em;
 986 }
 987
 988 .ifacebox-head {
 989         background: #eee;
 990 }
 991
 992 .ifacebox-head.active {
 993         background: #90c0e0;
 994 }
 995
 996 .ifacebadge > img {
 997         margin-right: 5px;
 998         align-self: start;
 999 }
1000
1001 .ifacebadge-active {
1002         border-color: #000000;
1003         font-weight: bold;
1004 }
1005
1006 .ifacebox {
1007         flex-direction: column;
1008         margin: 0 10px;
1009         padding: 0;
1010         min-width: 100px;
1011 }
1012
1013 .ifacebox > * {
1014         padding: 2px;
1015 }
1016
1017
1018 .network-status-table {
1019         display: flex;
1020         flex-wrap: wrap;
1021 }
1022
1023 .network-status-table .ifacebox {
1024         margin: .5em;
1025         font-size: 90%;
1026         flex-grow: 1;
1027 }
1028
1029 .network-status-table .ifacebox-body {
1030         display: flex;
1031         flex-direction: column;
1032         height: 100%;
1033 }
1034
1035 .network-status-table .ifacebox-body > span {
1036         flex: 10;
1037 }
1038
1039 .network-status-table .ifacebox-body > div {
1040         display: flex;
1041         flex-wrap: wrap;
1042 }
1043
1044 .network-status-table .ifacebox-body .ifacebadge {
1045         flex: 1;
1046         margin: .5em .25em .25em .25em;
1047         padding: .5em;
1048         min-width: 220px;
1049         white-space: nowrap;
1050 }
1051
1052
1053 .zonebadge {
1054         padding: 2px;
1055         display: inline-block;
1056         white-space: nowrap;
1057         cursor: pointer;
1058 }
1059
1060 .zonebadge em,
1061 .zonebadge strong {
1062         margin: 3px;
1063         display: inline-block;
1064 }
1065
1066 .zonebadge input {
1067         width: 6em;
1068         height: 1.5em;
1069 }
1070
1071 .zonebadge-empty {
1072         border: 1px dashed #AAAAAA;
1073         color: #AAAAAA;
1074         font-style: italic;
1075         font-size: smaller;
1076 }
1077
1078
1079 .uci-change-list {
1080         font-family: monospace;
1081 }
1082
1083 .uci-change-list ins,
1084 .uci-change-legend-label ins {
1085         text-decoration: none;
1086         border: 1px solid #00FF00;
1087         background-color: #CCFFCC;
1088         display: block;
1089         padding: 2px;
1090 }
1091
1092 .uci-change-list del,
1093 .uci-change-legend-label del {
1094         text-decoration: none;
1095         border: 1px solid #FF0000;
1096         background-color: #FFCCCC;
1097         display: block;
1098         font-style: normal;
1099         padding: 2px;
1100 }
1101
1102 .uci-change-list var,
1103 .uci-change-legend-label var {
1104         text-decoration: none;
1105         border: 1px solid #CCCCCC;
1106         background-color: #EEEEEE;
1107         display: block;
1108         font-style: normal;
1109         padding: 2px;
1110 }
1111
1112 .uci-change-list var ins,
1113 .uci-change-list var del {
1114         /*display: inline;*/
1115         border: none;
1116         white-space: pre;
1117         font-style: normal;
1118         padding: 0px;
1119 }
1120
1121 .uci-change-legend {
1122         padding: 5px;
1123 }
1124
1125 .uci-change-legend-label {
1126         width: 150px;
1127         float: left;
1128         font-size: 80%;
1129 }
1130
1131 .uci-change-legend-label>ins,
1132 .uci-change-legend-label>del,
1133 .uci-change-legend-label>var {
1134         float: left;
1135         margin-right: 4px;
1136         width: 10px;
1137         height: 10px;
1138         display: block;
1139 }
1140
1141 .uci-change-legend-label var ins,
1142 .uci-change-legend-label var del {
1143         line-height: 6px;
1144         border: none;
1145 }
1146
1147
1148 }