themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css

   1 /*!
   2  * LuCI Bootstrap Theme
   3  * Copyright 2012 Nut & Bolt
   4  * By David Menting <david@nut-bolt.nl>
   5  * Based on Bootstrap v1.4.0
   6  *
   7  * Copyright 2011 Twitter, Inc
   8  * Licensed under the Apache License v2.0
   9  * http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  12  */
  13 /* Reset.less
  14  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here       that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
  15  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
  16 html {
  17         margin: 0;
  18         padding: 0;
  19 }
  20
  21 body {
  22         margin: 0;
  23         padding: 5px;
  24 }
  25
  26 h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
  27 small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
  28 form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
  29 .table, .tbody, .tfoot, .thead, .tr, .th, .td {
  30         margin: 0;
  31         padding: 0;
  32         border: 0;
  33         font-weight: normal;
  34         font-style: normal;
  35         font-size: 100%;
  36         line-height: 1;
  37         font-family: inherit;
  38 }
  39
  40 abbr[title], acronym[title] {
  41         border-bottom: 1px dotted;
  42         cursor: help;
  43 }
  44
  45 table {
  46         border-collapse: collapse;
  47         border-spacing: 0;
  48 }
  49
  50 ol, ul {
  51         list-style: none;
  52 }
  53
  54 q:before,
  55 q:after,
  56 blockquote:before,
  57 blockquote:after {
  58         content: "";
  59 }
  60
  61 html {
  62         overflow-y: scroll;
  63         font-size: 100%;
  64         -webkit-text-size-adjust: 100%;
  65         -ms-text-size-adjust: 100%;
  66 }
  67
  68 a:focus {
  69         outline: thin dotted;
  70 }
  71
  72 a:hover, a:active {
  73         outline: 0;
  74 }
  75
  76 article,
  77 aside,
  78 details,
  79 figcaption,
  80 figure,
  81 footer,
  82 header,
  83 hgroup,
  84 nav,
  85 section {
  86         display: block;
  87 }
  88
  89 sub, sup {
  90         font-size: 75%;
  91         line-height: 0;
  92         position: relative;
  93         vertical-align: baseline;
  94 }
  95
  96 sup {
  97         top: -0.5em;
  98 }
  99
 100 sub {
 101         bottom: -0.25em;
 102 }
 103
 104 img {
 105         border: 0;
 106         -ms-interpolation-mode: bicubic;
 107 }
 108
 109 button,
 110 input,
 111 select,
 112 option,
 113 textarea {
 114         font-size: 100%;
 115         margin: 0;
 116         box-sizing: border-box;
 117         vertical-align: baseline;
 118         *vertical-align: middle;
 119 }
 120
 121 button, input {
 122         line-height: normal;
 123         *overflow: visible;
 124 }
 125
 126 button::-moz-focus-inner, input::-moz-focus-inner {
 127         border: 0;
 128         padding: 0;
 129 }
 130
 131 button,
 132 input[type="button"],
 133 input[type="reset"],
 134 input[type="submit"] {
 135         cursor: pointer;
 136         -webkit-appearance: button;
 137 }
 138
 139 button[disabled],
 140 input[type="button"][disabled],
 141 input[type="reset"][disabled],
 142 input[type="submit"][disabled] {
 143         opacity: 0.7;
 144 }
 145
 146 input[type="search"] {
 147         -webkit-appearance: textfield;
 148         box-sizing: content-box;
 149 }
 150
 151 input[type="search"]::-webkit-search-decoration {
 152         -webkit-appearance: none;
 153 }
 154
 155 textarea {
 156         overflow: auto;
 157         vertical-align: top;
 158 }
 159
 160 /*
 161  * Scaffolding
 162  * Basic and global styles for generating a grid system, structural layout, and page templates
 163  * ------------------------------------------------------------------------------------------- */
 164 body {
 165         background-color: #ffffff;
 166         margin: 0;
 167         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 168         font-size: 13px;
 169         font-weight: normal;
 170         line-height: 18px;
 171         color: #404040;
 172         padding-top: 58px;
 173 }
 174
 175 .container {
 176         width: 100%;
 177         max-width: 940px;
 178         margin-left: auto;
 179         margin-right: auto;
 180         zoom: 1;
 181 }
 182
 183 .container:before, .container:after {
 184         display: table;
 185         content: "";
 186         zoom: 1;
 187 }
 188
 189 .container:after {
 190         clear: both;
 191 }
 192
 193 a {
 194         color: #0069d6;
 195         text-decoration: none;
 196         line-height: inherit;
 197         font-weight: inherit;
 198 }
 199
 200 a:hover {
 201         color: #00438a;
 202         text-decoration: underline;
 203 }
 204
 205 .pull-right {
 206         float: right;
 207 }
 208
 209 .pull-left {
 210         float: left;
 211 }
 212
 213 /* Typography.less
 214  * Headings, body text, lists, code, and more for a versatile and durable typography system
 215  * ---------------------------------------------------------------------------------------- */
 216 p,
 217 .cbi-map-descr,
 218 .cbi-section-descr {
 219         font-size: 13px;
 220         font-weight: normal;
 221         line-height: 18px;
 222         margin-bottom: 9px;
 223 }
 224
 225 p small {
 226         font-size: 11px;
 227         color: #bfbfbf;
 228 }
 229
 230 h1,
 231 h2,
 232 h3,
 233 h4,
 234 h5,
 235 h6 {
 236         font-weight: bold;
 237         color: #404040;
 238 }
 239
 240 h1 small,
 241 h2 small,
 242 h3 small,
 243 h4 small,
 244 h5 small,
 245 h6 small {
 246         color: #bfbfbf;
 247 }
 248
 249 h1 {
 250         margin-bottom: 18px;
 251         font-size: 30px;
 252         line-height: 36px;
 253 }
 254
 255 h1 small {
 256         font-size: 18px;
 257 }
 258
 259 h2 {
 260         font-size: 24px;
 261         line-height: 36px;
 262 }
 263
 264 h2 small {
 265         font-size: 14px;
 266 }
 267
 268 h3,
 269 h4,
 270 h5,
 271 h6 {
 272         line-height: 36px;
 273 }
 274
 275 h3 {
 276         font-size: 18px;
 277 }
 278
 279 h3 small {
 280         font-size: 14px;
 281 }
 282
 283 h4 {
 284         font-size: 16px;
 285 }
 286
 287 h4 small {
 288         font-size: 12px;
 289 }
 290
 291 h5 {
 292         font-size: 14px;
 293 }
 294
 295 h6 {
 296         font-size: 13px;
 297         color: #bfbfbf;
 298         text-transform: uppercase;
 299 }
 300
 301 ul, ol {
 302         margin: 0 0 18px 25px;
 303 }
 304
 305 ul ul,
 306 ul ol,
 307 ol ol,
 308 ol ul {
 309         margin-bottom: 0;
 310 }
 311
 312 ul {
 313         list-style: disc;
 314 }
 315
 316 ol {
 317         list-style: decimal;
 318 }
 319
 320 li {
 321         line-height: 18px;
 322         color: #808080;
 323 }
 324
 325 ul.unstyled {
 326         list-style: none;
 327         margin-left: 0;
 328 }
 329
 330 dl {
 331         margin-bottom: 18px;
 332 }
 333
 334 dl dt, dl dd {
 335         line-height: 18px;
 336 }
 337
 338 dl dt {
 339         font-weight: bold;
 340 }
 341
 342 dl dd {
 343         margin-left: 9px;
 344 }
 345
 346 hr {
 347         margin: 20px 0 19px;
 348         border: 0;
 349         border-bottom: 1px solid #eee;
 350 }
 351
 352 strong {
 353         font-style: inherit;
 354         font-weight: bold;
 355 }
 356
 357 em {
 358         font-style: italic;
 359         font-weight: inherit;
 360         line-height: inherit;
 361 }
 362
 363 small { font-size: 0.9em }
 364
 365 address {
 366         display: block;
 367         line-height: 18px;
 368         margin-bottom: 18px;
 369 }
 370
 371 code, pre {
 372         padding: 0 3px 2px;
 373         font-family: Monaco, Andale Mono, Courier New, monospace;
 374         font-size: 12px;
 375         border-radius: 3px;
 376 }
 377
 378 code {
 379         background-color: #fee9cc;
 380         color: rgba(0, 0, 0, 0.75);
 381         padding: 1px 3px;
 382 }
 383
 384 pre {
 385         background-color: #f5f5f5;
 386         display: block;
 387         padding: 8.5px;
 388         margin: 0 0 18px;
 389         line-height: 18px;
 390         font-size: 12px;
 391         border: 1px solid #ccc;
 392         border: 1px solid rgba(0, 0, 0, 0.15);
 393         border-radius: 3px;
 394         white-space: pre;
 395         white-space: pre-wrap;
 396         word-wrap: break-word;
 397 }
 398
 399 /* Forms.less
 400  * Base styles for various input types, form layouts, and states
 401  * ------------------------------------------------------------- */
 402 form {
 403         margin-bottom: 18px;
 404 }
 405
 406 fieldset {
 407         margin-bottom: 9px;
 408         padding-top: 9px;
 409 }
 410
 411 fieldset legend {
 412         display: block;
 413         font-size: 19.5px;
 414         line-height: 1;
 415         color: #404040;
 416         padding-top: 20px;
 417         *padding: 0 0 5px 0px;
 418         /* IE6-7 */
 419
 420         *line-height: 1.5;
 421         /* IE6-7 */
 422
 423 }
 424 form .cbi-tab-descr {
 425         line-height: 18px;
 426         margin-bottom: 18px;
 427 }
 428
 429 form .clearfix,
 430 form .cbi-value {
 431         margin-bottom: 18px;
 432         zoom: 1;
 433         overflow: hidden;
 434 }
 435
 436 form .clearfix:before, form .clearfix:after,
 437 form .cbi-value:before, form .cbi-value:after  {
 438         display: table;
 439         content: "";
 440         zoom: 1;
 441 }
 442
 443 form .clearfix:after,
 444 form .cbi-value:after {
 445         clear: both;
 446 }
 447
 448 label,
 449 input,
 450 select,
 451 textarea {
 452         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 453         font-size: 13px;
 454         font-weight: normal;
 455         line-height: normal;
 456 }
 457
 458 form .input,
 459 form .cbi-value-field {
 460         margin-left: 200px;
 461 }
 462
 463 form .cbi-value label.cbi-value-title {
 464         padding-top: 6px;
 465         font-size: 13px;
 466         line-height: 18px;
 467         float: left;
 468         width: 180px;
 469         text-align: right;
 470         color: #404040;
 471 }
 472
 473 input[type=checkbox], input[type=radio] {
 474         cursor: pointer;
 475 }
 476
 477 input,
 478 textarea,
 479 select,
 480 .uneditable-input {
 481         display: inline-block;
 482         width: 210px;
 483         height: 30px;
 484         padding: 4px;
 485         font-size: 13px;
 486         line-height: 18px;
 487         color: #808080;
 488         border: 1px solid #ccc;
 489         border-radius: 3px;
 490 }
 491
 492 select {
 493         padding: initial;
 494         background: #fff;
 495         box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
 496 }
 497
 498 input[type=checkbox], input[type=radio] {
 499         width: auto;
 500         height: auto;
 501         padding: 0;
 502         margin: 3px 0;
 503         *margin-top: 0;
 504         /* IE6-7 */
 505
 506         line-height: normal;
 507         border: none;
 508 }
 509
 510 input[type=file] {
 511         background-color: #ffffff;
 512         padding: initial;
 513         border: initial;
 514         line-height: initial;
 515         box-shadow: none;
 516         width: auto !important;
 517 }
 518
 519 input[type=button], input[type=reset], input[type=submit] {
 520         width: auto;
 521         height: auto;
 522 }
 523
 524 select, input[type=file] {
 525         *height: auto;
 526         *margin-top: 4px;
 527         /* For IE7, add top margin to align select with labels */
 528 }
 529
 530 select[multiple] {
 531         height: inherit;
 532         background-color: #ffffff;
 533 }
 534
 535 textarea {
 536         height: auto;
 537 }
 538
 539 .uneditable-input {
 540         background-color: #ffffff;
 541         display: block;
 542         border-color: #eee;
 543         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
 544         cursor: not-allowed;
 545 }
 546
 547 ::-moz-placeholder {
 548         color: #bfbfbf;
 549 }
 550
 551 ::-webkit-input-placeholder {
 552         color: #bfbfbf;
 553 }
 554
 555 input, textarea {
 556         transition: border linear 0.2s, box-shadow linear 0.2s;
 557         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 558 }
 559
 560 input:focus, textarea:focus {
 561         outline: 0;
 562         border-color: rgba(82, 168, 236, 0.8);
 563         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
 564 }
 565
 566 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
 567         box-shadow: none;
 568         outline: 1px dotted #666;
 569 }
 570
 571 form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
 572         color: #b94a48;
 573 }
 574
 575 form .clearfix.error input, form .clearfix.error textarea {
 576         color: #b94a48;
 577         border-color: #ee5f5b;
 578 }
 579
 580 form .clearfix.error input:focus, form .clearfix.error textarea:focus {
 581         border-color: #e9322d;
 582         box-shadow: 0 0 6px #f8b9b7;
 583 }
 584
 585 form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
 586         color: #b94a48;
 587         background-color: #fce6e6;
 588         border-color: #b94a48;
 589 }
 590
 591 form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
 592         color: #c09853;
 593 }
 594
 595 form .clearfix.warning input, form .clearfix.warning textarea {
 596         color: #c09853;
 597         border-color: #ccae64;
 598 }
 599
 600 form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
 601         border-color: #be9a3f;
 602         box-shadow: 0 0 6px #e5d6b1;
 603 }
 604
 605 form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
 606         color: #c09853;
 607         background-color: #d2b877;
 608         border-color: #c09853;
 609 }
 610
 611 form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
 612         color: #468847;
 613 }
 614
 615 form .clearfix.success input, form .clearfix.success textarea {
 616         color: #468847;
 617         border-color: #57a957;
 618 }
 619
 620 form .clearfix.success input:focus, form .clearfix.success textarea:focus {
 621         border-color: #458845;
 622         box-shadow: 0 0 6px #9acc9a;
 623 }
 624
 625 form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
 626         color: #468847;
 627         background-color: #bcddbc;
 628         border-color: #468847;
 629 }
 630
 631 input[disabled],
 632 select[disabled],
 633 textarea[disabled],
 634 input[readonly],
 635 select[readonly],
 636 textarea[readonly] {
 637         background-color: #f5f5f5;
 638         border-color: #ddd;
 639 }
 640
 641 .actions,
 642 .cbi-page-actions {
 643         background: #f5f5f5;
 644         margin-bottom: 18px;
 645         padding: 17px 20px 18px 17px;
 646         border-top: 1px solid #ddd;
 647         border-radius: 0 0 3px 3px;
 648         text-align: right;
 649 }
 650
 651 .actions .secondary-action,
 652 .cbi-page-actions .secondary-action{
 653         float: right;
 654 }
 655
 656 .actions .secondary-action a,
 657 .cbi-page-actions .secondary-action a {
 658         line-height: 30px;
 659 }
 660
 661 .actions .secondary-action a:hover,
 662 .cbi-page-actions .secondary-action a:hover {
 663         text-decoration: underline;
 664 }
 665
 666 .help-inline, .help-block {
 667         font-size: 13px;
 668         line-height: 18px;
 669         color: #bfbfbf;
 670 }
 671
 672 .help-inline {
 673         padding-left: 5px;
 674         *position: relative;
 675         /* IE6-7 */
 676
 677         *top: -5px;
 678         /* IE6-7 */
 679
 680 }
 681
 682 .help-block {
 683         display: block;
 684         max-width: 600px;
 685 }
 686
 687 /*
 688  * Tables.less
 689  * Tables for, you guessed it, tabular data
 690  * ---------------------------------------- */
 691 .tr { display: table-row; }
 692 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
 693 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
 694
 695 .table {
 696         display: table;
 697         width: 100%;
 698         margin-bottom: 18px;
 699         padding: 0;
 700         font-size: 13px;
 701         border-collapse: collapse;
 702 }
 703
 704 .table .th, .table .td {
 705         display: table-cell;
 706         vertical-align: middle; /* Fixme */
 707         padding: 10px 10px 9px;
 708         line-height: 18px;
 709         text-align: left;
 710 }
 711
 712 .table .th {
 713         padding-top: 9px;
 714         font-weight: bold;
 715         vertical-align: middle;
 716 }
 717
 718 .table .td {
 719         vertical-align: top;
 720         border-top: 1px solid #ddd;
 721 }
 722
 723 .table .tbody .th {
 724         border-top: 1px solid #ddd;
 725         vertical-align: top;
 726 }
 727
 728 /* Patterns.less
 729  * Repeatable UI elements outside the base styles provided from the scaffolding
 730  * ---------------------------------------------------------------------------- */
 731 header {
 732         height: 40px;
 733         position: fixed;
 734         top: 0;
 735         left: 0;
 736         right: 0;
 737         z-index: 10000;
 738         overflow: visible;
 739         color: #BFBFBF;
 740 }
 741
 742 header a {
 743         color: #bfbfbf;
 744         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 745 }
 746
 747 header h3 a:hover, header .brand:hover, header ul .active > a {
 748         background-color: #333;
 749         background-color: rgba(255, 255, 255, 0.05);
 750         color: #ffffff;
 751         text-decoration: none;
 752 }
 753
 754 header h3 {
 755         position: relative;
 756 }
 757
 758 header h3 a, header .brand {
 759         float: left;
 760         display: block;
 761         padding: 8px 20px 12px;
 762         margin-left: -20px;
 763         color: #ffffff;
 764         font-size: 20px;
 765         font-weight: 200;
 766         line-height: 1;
 767 }
 768
 769 header p {
 770         margin: 0;
 771         line-height: 40px;
 772 }
 773
 774 header .fill {
 775         background-color: #222;
 776         background-repeat: repeat-x;
 777         background-image: linear-gradient(to bottom, #333333, #222222);
 778         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 779         padding: 0 5px;
 780 }
 781
 782 header div > ul, .nav {
 783         display: block;
 784         float: left;
 785         margin: 0 10px 0 0;
 786         position: relative;
 787         left: 0;
 788 }
 789
 790 header div > ul > li, .nav > li {
 791         display: block;
 792         float: left;
 793 }
 794
 795 header div > ul a, .nav a {
 796         display: block;
 797         float: none;
 798         padding: 10px 10px 11px;
 799         line-height: 19px;
 800         text-decoration: none;
 801 }
 802
 803 header div > ul a:hover, .nav a:hover {
 804         color: #ffffff;
 805         text-decoration: none;
 806 }
 807
 808 header div > ul .active > a, .nav .active > a {
 809         background-color: #222;
 810         background-color: rgba(0, 0, 0, 0.5);
 811 }
 812
 813 header div > ul.secondary-nav, .nav.secondary-nav {
 814         float: right;
 815         margin-left: 10px;
 816         margin-right: 0;
 817 }
 818
 819 header div > ul.secondary-nav .menu-dropdown,
 820 .nav.secondary-nav .menu-dropdown,
 821 header div > ul.secondary-nav .dropdown-menu,
 822 .nav.secondary-nav .dropdown-menu {
 823         right: 0;
 824         border: 0;
 825 }
 826
 827 header div > ul a.menu:hover,
 828 .nav a.menu:hover,
 829 header div > ul li.open .menu,
 830 .nav li.open .menu,
 831 header div > ul .dropdown-toggle:hover,
 832 .nav .dropdown-toggle:hover,
 833 header div > ul .dropdown.open .dropdown-toggle,
 834 .nav .dropdown.open .dropdown-toggle {
 835         background: #444;
 836         background: rgba(255, 255, 255, 0.05);
 837 }
 838
 839 header div > ul .menu-dropdown,
 840 .nav .menu-dropdown,
 841 header div > ul .dropdown-menu,
 842 .nav .dropdown-menu {
 843         background-color: #333;
 844 }
 845
 846 header div > ul .menu-dropdown a.menu,
 847 .nav .menu-dropdown a.menu,
 848 header div > ul .dropdown-menu a.menu,
 849 .nav .dropdown-menu a.menu,
 850 header div > ul .menu-dropdown .dropdown-toggle,
 851 .nav .menu-dropdown .dropdown-toggle,
 852 header div > ul .dropdown-menu .dropdown-toggle,
 853 .nav .dropdown-menu .dropdown-toggle {
 854         color: #ffffff;
 855 }
 856
 857 header div > ul .menu-dropdown a.menu.open,
 858 .nav .menu-dropdown a.menu.open,
 859 header div > ul .dropdown-menu a.menu.open,
 860 .nav .dropdown-menu a.menu.open,
 861 header div > ul .menu-dropdown .dropdown-toggle.open,
 862 .nav .menu-dropdown .dropdown-toggle.open,
 863 header div > ul .dropdown-menu .dropdown-toggle.open,
 864 .nav .dropdown-menu .dropdown-toggle.open {
 865         background: #444;
 866         background: rgba(255, 255, 255, 0.05);
 867 }
 868
 869 header div > ul .menu-dropdown li a,
 870 .nav .menu-dropdown li a,
 871 header div > ul .dropdown-menu li a,
 872 .nav .dropdown-menu li a {
 873         color: #999;
 874         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
 875 }
 876
 877 header div > ul .menu-dropdown li a:hover,
 878 .nav .menu-dropdown li a:hover,
 879 header div > ul .dropdown-menu li a:hover,
 880 .nav .dropdown-menu li a:hover {
 881         background-color: #191919;
 882         background-repeat: repeat-x;
 883         background-image: linear-gradient(to bottom, #292929, #191919);
 884         color: #ffffff;
 885 }
 886
 887 header div > ul .menu-dropdown .active a,
 888 .nav .menu-dropdown .active a,
 889 header div > ul .dropdown-menu .active a,
 890 .nav .dropdown-menu .active a {
 891         color: #ffffff;
 892 }
 893
 894 header div > ul .menu-dropdown .divider,
 895 .nav .menu-dropdown .divider,
 896 header div > ul .dropdown-menu .divider,
 897 .nav .dropdown-menu .divider {
 898         background-color: #222;
 899         border-color: #444;
 900 }
 901
 902 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
 903         padding: 4px 15px;
 904 }
 905
 906 li.menu, .dropdown {
 907         position: relative;
 908 }
 909
 910 a.menu:after, .dropdown-toggle:after {
 911         width: 0;
 912         height: 0;
 913         display: inline-block;
 914         content: "&darr;";
 915         text-indent: -99999px;
 916         vertical-align: top;
 917         margin-top: 8px;
 918         margin-left: 4px;
 919         border-left: 4px solid transparent;
 920         border-right: 4px solid transparent;
 921         border-top: 4px solid #ffffff;
 922         opacity: 0.5;
 923 }
 924
 925 .menu-dropdown, .dropdown-menu {
 926         background-color: #ffffff;
 927         float: left;
 928         position: absolute;
 929         top: 40px;
 930         left: -9999px;
 931         z-index: 900;
 932         min-width: 160px;
 933         max-width: 220px;
 934         _width: 160px;
 935         margin-left: 0;
 936         margin-right: 0;
 937         padding: 6px 0;
 938         zoom: 1;
 939         border-color: #999;
 940         border-color: rgba(0, 0, 0, 0.2);
 941         border-style: solid;
 942         border-width: 0 1px 1px;
 943         border-radius: 0 0 6px 6px;
 944         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 945         background-clip: padding-box;
 946 }
 947
 948 .menu-dropdown li, .dropdown-menu li {
 949         float: none;
 950         display: block;
 951         background-color: transparent;
 952 }
 953
 954 .menu-dropdown .divider, .dropdown-menu .divider {
 955         height: 1px;
 956         margin: 5px 0;
 957         overflow: hidden;
 958         background-color: #eee;
 959         border-bottom: 1px solid #ffffff;
 960 }
 961
 962 header .dropdown-menu a, .dropdown-menu a {
 963         display: block;
 964         padding: 4px 15px;
 965         clear: both;
 966         font-weight: normal;
 967         line-height: 18px;
 968         color: #808080;
 969         text-shadow: 0 1px 0 #ffffff;
 970 }
 971
 972 header .dropdown-menu a:hover,
 973 .dropdown-menu a:hover,
 974 header .dropdown-menu a.hover,
 975 .dropdown-menu a.hover {
 976         background-color: #dddddd;
 977         background-repeat: repeat-x;
 978         background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
 979         color: #404040;
 980         text-decoration: none;
 981         box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
 982 }
 983
 984 .open .menu,
 985 .dropdown.open .menu,
 986 .open .dropdown-toggle,
 987 .dropdown.open .dropdown-toggle {
 988         color: #ffffff;
 989         background: #ccc;
 990         background: rgba(0, 0, 0, 0.3);
 991 }
 992
 993 .open .menu-dropdown,
 994 .dropdown.open .menu-dropdown,
 995 .open .dropdown-menu,
 996 .dropdown.open .dropdown-menu {
 997         left: 0;
 998 }
 999
1000 .dropdown:hover ul.dropdown-menu {
1001         left: 0;
1002 }
1003
1004 .dropdown-menu .dropdown-menu {
1005           position: absolute;
1006           left: 159px;
1007 }
1008
1009 .dropdown-menu li {
1010           position: relative;
1011 }
1012
1013 .tabs, .cbi-tabmenu {
1014         margin: 0 0 18px;
1015         padding: 0;
1016         list-style: none;
1017         zoom: 1;
1018 }
1019
1020 .tabs:before,
1021 .cbi-tabmenu:before,
1022 .tabs:after,
1023 .cbi-tabmenu:after {
1024         display: table;
1025         content: "";
1026         zoom: 1;
1027 }
1028
1029 .tabs:after, .cbi-tabmenu:after {
1030         clear: both;
1031 }
1032
1033 .tabs > li, .cbi-tabmenu > li {
1034         float: left;
1035 }
1036
1037 .tabs > li > a, .cbi-tabmenu > li > a {
1038         display: block;
1039 }
1040
1041 .tabs,
1042 .cbi-tabmenu {
1043         border-color: #ddd;
1044         border-style: solid;
1045         border-width: 0 0 1px;
1046 }
1047
1048 .tabs > li,
1049 .cbi-tabmenu > li {
1050         position: relative;
1051         margin-bottom: -1px;
1052 }
1053
1054 .cbi-tabmenu.map {
1055         margin: 0;
1056 }
1057
1058 .cbi-tabmenu.map > li {
1059         font-size: 16.5px;
1060         font-weight: bold;
1061 }
1062
1063 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1064         display: none;
1065 }
1066
1067 .tabs > li > a,
1068 .cbi-tabmenu > li > a {
1069         padding: 0 15px;
1070         margin-right: 2px;
1071         line-height: 34px;
1072         border: 1px solid transparent;
1073         border-radius: 4px 4px 0 0;
1074 }
1075
1076 .tabs > li > a:hover,
1077 .cbi-tabmenu > li > a:hover {
1078         text-decoration: none;
1079         background-color: #eee;
1080         border-color: #eee #eee #ddd;
1081 }
1082
1083 .tabs .active > a, .tabs .active > a:hover,
1084 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1085 .cbi-tab > a:link, .cbi-tab > a:hover {
1086         color: #808080;
1087         background-color: #ffffff;
1088         border: 1px solid #ddd;
1089         border-bottom-color: transparent;
1090         cursor: default;
1091 }
1092
1093 .tabs .menu-dropdown, .tabs .dropdown-menu,
1094 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1095         top: 35px;
1096         border-width: 1px;
1097         border-radius: 0 6px 6px 6px;
1098 }
1099
1100 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1101 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1102         border-top-color: #999;
1103         margin-top: 15px;
1104         margin-left: 5px;
1105 }
1106
1107 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1108 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1109         border-color: #999;
1110 }
1111
1112 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1113 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1114         border-top-color: #555;
1115 }
1116
1117 .tab-content > .tab-pane,
1118 .tab-content > div {
1119         display: none;
1120 }
1121
1122 .tab-content > .active {
1123         display: block;
1124 }
1125
1126 .breadcrumb {
1127         padding: 7px 14px;
1128         margin: 0 0 18px;
1129         background-color: #f5f5f5;
1130         background-repeat: repeat-x;
1131         background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
1132         border: 1px solid #ddd;
1133         border-radius: 3px;
1134         box-shadow: inset 0 1px 0 #ffffff;
1135 }
1136
1137 .breadcrumb li {
1138         display: inline;
1139         text-shadow: 0 1px 0 #ffffff;
1140 }
1141
1142 .breadcrumb .divider {
1143         padding: 0 5px;
1144         color: #bfbfbf;
1145 }
1146
1147 .breadcrumb .active a {
1148         color: #404040;
1149 }
1150
1151 footer {
1152         margin-top: 17px;
1153         padding-top: 17px;
1154         border-top: 1px solid #eee;
1155 }
1156
1157 .btn.danger,
1158 .alert-message.danger,
1159 .btn.danger:hover,
1160 .alert-message.danger:hover,
1161 .btn.error,
1162 .alert-message.error,
1163 .btn.error:hover,
1164 .alert-message.error:hover,
1165 .btn.success,
1166 .alert-message.success,
1167 .btn.success:hover,
1168 .alert-message.success:hover,
1169 .btn.info,
1170 .alert-message.info,
1171 .btn.info:hover,
1172 .alert-message.info:hover {
1173         color: #ffffff;
1174 }
1175
1176 .btn .close, .alert-message .close {
1177         font-family: Arial, sans-serif;
1178         line-height: 18px;
1179 }
1180
1181 .btn.danger,
1182 .alert-message.danger,
1183 .btn.error,
1184 .alert-message.error {
1185         background-color: #c43c35;
1186         background-repeat: repeat-x;
1187         background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
1188         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1189         border-color: #c43c35 #c43c35 #882a25;
1190         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1191 }
1192
1193 .btn.success, .alert-message.success {
1194         background-color: #57a957;
1195         background-repeat: repeat-x;
1196         background-image: linear-gradient(to bottom, #62c462, #57a957);
1197         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1198         border-color: #57a957 #57a957 #3d773d;
1199         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1200 }
1201
1202 .btn.info, .alert-message.info {
1203         background-color: #339bb9;
1204         background-repeat: repeat-x;
1205         background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
1206         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1207         border-color: #339bb9 #339bb9 #22697d;
1208         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1209 }
1210
1211 .btn,
1212 .cbi-button {
1213         cursor: pointer;
1214         display: inline-block;
1215         background-color: #e6e6e6;
1216         background-repeat: no-repeat;
1217         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1218         padding: 5px 14px 6px;
1219         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1220         color: #333;
1221         font-size: 13px;
1222         line-height: normal;
1223         border: 1px solid #ccc;
1224         border-bottom-color: #bbb;
1225         border-radius: 4px;
1226         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1227 }
1228
1229 .btn:hover,
1230 .cbi-button:hover {
1231         color: #333;
1232         text-decoration: none;
1233 }
1234
1235 .btn:focus,
1236 .cbi-button:focus {
1237         outline: 1px dotted #666;
1238 }
1239
1240 .btn.primary,
1241 .cbi-page-actions .cbi-button-apply,
1242 .cbi-page-actions .cbi-button-save,
1243 .cbi-page-actions .cbi-button-reset {
1244         color: #ffffff;
1245         padding: 5px 14px 6px;
1246         background-color: #0064cd;
1247         background-repeat: repeat-x;
1248         background-image: linear-gradient(to bottom, #049cdb, #0064cd);
1249         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1250         border-color: #0064cd #0064cd #003f81;
1251         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1252 }
1253
1254 .cbi-input-invalid,
1255 .cbi-value-error input {
1256         color: #FF0000;
1257         border-color: #FF0000;
1258 }
1259
1260 .cbi-button-up,
1261 .cbi-input-up {
1262         background-position: center center;
1263         background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1264 }
1265
1266 .cbi-button-down,
1267 .cbi-input-down {
1268         background-position: center center;
1269         background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1270 }
1271
1272 .cbi-button-find,
1273 .cbi-input-find {
1274         background-position: 6px center, left top;
1275         padding-left: 28px;
1276         background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1277 }
1278
1279 .cbi-button-add,
1280 .cbi-input-add {
1281         background-position: 6px center, left top;
1282         padding-left: 28px;
1283         background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1284 }
1285
1286 .cbi-button-apply,
1287 .cbi-input-apply {
1288         background-position: 6px center, left top;
1289         padding-left: 28px;
1290         background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1291 }
1292
1293 .cbi-button-reset,
1294 .cbi-input-reset {
1295         background-position: 6px center, left top;
1296         padding-left: 28px;
1297         background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1298 }
1299
1300 .cbi-button-edit,
1301 .cbi-input-edit {
1302         background-position: 6px center, left top;
1303         padding-left: 28px;
1304         background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1305 }
1306
1307 .cbi-button-remove,
1308 .cbi-input-remove {
1309         background-position: 6px center, left top;
1310         padding-left: 28px;
1311         background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1312 }
1313
1314 .cbi-button-reload,
1315 .cbi-input-reload {
1316         background-position: 6px center, left top;
1317         padding-left: 28px;
1318         background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1319 }
1320
1321 .cbi-button-link,
1322 .cbi-input-link {
1323         background-position: 6px center, left top;
1324         padding-left: 28px;
1325         background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1326 }
1327
1328 .cbi-button-download,
1329 .cbi-input-download {
1330         background-position: 6px center, left top;
1331         padding-left: 28px;
1332         background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1333 }
1334
1335 .btn.active, .btn:active {
1336         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1337 }
1338
1339 .btn.disabled {
1340         cursor: default;
1341         background-image: none;
1342         opacity: 0.65;
1343         box-shadow: none;
1344 }
1345
1346 .btn[disabled] {
1347         cursor: default;
1348         background-image: none;
1349         opacity: 0.65;
1350         box-shadow: none;
1351 }
1352
1353 .btn.large {
1354         font-size: 15px;
1355         line-height: normal;
1356         padding: 9px 14px 9px;
1357         border-radius: 6px;
1358 }
1359
1360 .btn.small {
1361         padding: 7px 9px 7px;
1362         font-size: 11px;
1363 }
1364
1365 /* Button icons for specific pages */
1366 .Startup .cbi-section-table input.cbi-input-apply,
1367 .Startup .cbi-section-table input.cbi-button-apply {
1368           background-image: url("../resources/cbi/apply.gif");
1369           background-position: 7px 4px;
1370           padding: 3px 9px 3px 27px;
1371 }
1372
1373 .Processes .cbi-section-table input.cbi-input-reload,
1374 .Startup .cbi-section-table input.cbi-input-reload {
1375           background-image: url("../resources/cbi/reload.gif");
1376           background-position: 7px 4px;
1377           padding: 3px 9px 3px 27px;
1378 }
1379
1380 .Processes .cbi-section-table input.cbi-input-remove,
1381 .Processes .cbi-section-table div.cbi-section-remove input,
1382 .Startup .cbi-section-table input.cbi-input-remove,
1383 .Startup .cbi-section-table div.cbi-section-remove input  {
1384           background-image: url("../resources/cbi/remove.gif");
1385           background-position: 7px 4px;
1386           padding: 3px 9px 3px 27px;
1387 }
1388
1389 .Processes .cbi-section-table input.cbi-input-reset,
1390 .Processes .cbi-section-table input.cbi-button-reset,
1391 .Startup .cbi-section-table input.cbi-input-reset,
1392 .Startup .cbi-section-table input.cbi-button-reset  {
1393           background-image: url("../resources/cbi/reset.gif");
1394           background-position: 7px 4px;
1395           padding: 3px 9px 3px 27px;
1396 }
1397
1398 .Startup .cbi-section-table input.cbi-input-save,
1399 .Startup .cbi-section-table input.cbi-button-save {
1400           background-image: url("../resources/cbi/save.gif");
1401           background-position: 7px 4px;
1402           padding: 3px 9px 3px 27px;
1403 }
1404
1405 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1406         padding: 0;
1407         border: 0;
1408 }
1409
1410 .close {
1411         float: right;
1412         color: #000000;
1413         font-size: 20px;
1414         font-weight: bold;
1415         line-height: 13.5px;
1416         text-shadow: 0 1px 0 #ffffff;
1417         opacity: 0.25;
1418 }
1419
1420 .close:hover {
1421         color: #000000;
1422         text-decoration: none;
1423         opacity: 0.4;
1424 }
1425
1426 .alert-message, .errorbox {
1427         position: relative;
1428         padding: 7px 15px;
1429         margin-bottom: 18px;
1430         color: #404040;
1431         background-color: #eedc94;
1432         background-repeat: repeat-x;
1433         background-image: linear-gradient(to bottom, #fceec1, #eedc94);
1434         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1435         border-color: #eedc94 #eedc94 #e4c652;
1436         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1437         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1438         border-width: 1px;
1439         border-style: solid;
1440         border-radius: 4px;
1441         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1442 }
1443
1444 .alert-message .close {
1445         margin-top: 1px;
1446         *margin-top: 0;
1447 }
1448
1449 .alert-message a {
1450         font-weight: bold;
1451         color: #404040;
1452 }
1453
1454 .alert-message.danger p a,
1455 .alert-message.error p a,
1456 .alert-message.success p a,
1457 .alert-message.info p a {
1458         color: #ffffff;
1459 }
1460
1461 .alert-message h5 {
1462         line-height: 18px;
1463 }
1464
1465 .alert-message p {
1466         margin-bottom: 0;
1467 }
1468
1469 .alert-message div {
1470         margin-top: 5px;
1471         margin-bottom: 2px;
1472         line-height: 28px;
1473 }
1474
1475 .alert-message .btn {
1476         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1477 }
1478
1479 .label {
1480         padding: 1px 3px 2px;
1481         font-size: 9.75px;
1482         font-weight: bold;
1483         color: #ffffff !important;
1484         text-transform: uppercase;
1485         white-space: nowrap;
1486         background-color: #bfbfbf;
1487         border-radius: 3px;
1488         text-shadow: none;
1489 }
1490
1491 a.label:link,
1492 a.label:visited {
1493         color: #ffffff;
1494 }
1495
1496 a.label:hover {
1497         text-decoration: none;
1498 }
1499
1500 .label.important {
1501         background-color: #c43c35;
1502 }
1503
1504 .label.warning {
1505         background-color: #f89406;
1506 }
1507
1508 .label.success {
1509         background-color: #46a546;
1510 }
1511
1512 .label.notice {
1513         background-color: #62cffc;
1514 }
1515
1516 /* LuCI specific items */
1517 .hidden { display: none }
1518
1519 #memtotal > div,
1520 #memfree > div,
1521 #memcache > div,
1522 #membuff > div,
1523 #conns > div  {
1524           border: 1px solid #CCCCCC;
1525           border-radius: 3px 3px 3px 3px;
1526           color: #808080;
1527           display: inline-block;
1528           font-size: 13px;
1529           line-height: 18px;
1530 }
1531
1532 #xhr_poll_status {
1533           cursor: pointer;
1534 }
1535
1536 form.inline { display: inline }
1537
1538 header .pull-right { padding-top: 8px; }
1539
1540 #modemenu li:last-child span.divider { display: none }
1541
1542 #syslog {  width: 100%; }
1543
1544 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1545         background-color: #f9f9f9;
1546 }
1547
1548 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th  {
1549         background-color: #f5f5f5;
1550 }
1551
1552 .cbi-section-table tr.cbi-section-table-descr th {
1553         font-weight: normal;
1554 }
1555
1556 .left { text-align: left !important; }
1557
1558 .right { text-align: right !important; }
1559
1560 .center { text-align: center !important; }
1561
1562 .cbi-value-field { line-height: 1.5em; }
1563
1564 .cbi-value-field input[type=checkbox],
1565 .cbi-value-field input[type=radio] {
1566         margin-top: 8px;
1567         margin-right: 6px;
1568 }
1569
1570 table table td,
1571 .cbi-value-field table td {
1572         border: none;
1573 }
1574
1575 .table.cbi-section-table input,
1576 .table.cbi-section-table textarea,
1577 .table.cbi-section-table select {
1578         width: auto;
1579 }
1580
1581 .table.cbi-section-table .td.cbi-section-table-cell {
1582         white-space: nowrap;
1583         text-align: right;
1584 }
1585
1586 .table.cbi-section-table .td.cbi-section-table-cell select {
1587         width: inherit;
1588 }
1589
1590 .table.valign-middle .td {
1591         vertical-align: middle;
1592 }
1593
1594 .cbi-value-description { display: inline; }
1595
1596 .cbi-value-description img { vertical-align: middle; }
1597
1598 .cbi-section-error {
1599         border: 1px solid #FF0000;
1600         border-radius: 3px;
1601         background-color: #FCE6E6;
1602         padding: 5px;
1603 }
1604
1605 .cbi-section-error ul { margin: 0 0 0 20px; }
1606
1607 .cbi-section-error ul li {
1608         color: #FF0000;
1609         font-weight: bold;
1610 }
1611
1612 .ifacebox {
1613         background-color: #FFFFFF;
1614         border: 1px solid #CCCCCC;
1615         margin: 0 10px;
1616         text-align: center;
1617         white-space: nowrap;
1618         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1619         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1620         border-radius: 4px;
1621         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1622         display: inline-flex;
1623         flex-direction: column;
1624         line-height: 1.2em;
1625         min-width: 100px;
1626 }
1627
1628 .ifacebox .ifacebox-head {
1629         border-bottom: 1px solid #CCCCCC;
1630         padding: 2px;
1631         background: #eee;
1632 }
1633
1634 .ifacebox .ifacebox-head.active {
1635         background: #90c0e0;
1636 }
1637
1638 .ifacebox .ifacebox-body {
1639         padding: 6px;
1640 }
1641
1642 .ifacebadge {
1643         display: inline-flex;
1644         flex-direction: row;
1645         white-space: nowrap;
1646         background-color: #FFFFFF;
1647         border: 1px solid #CCCCCC;
1648         padding: 2px;
1649         margin-left: 2px;
1650         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1651         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1652         border-radius: 4px;
1653         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1654         cursor: default;
1655         line-height: 1.2em;
1656 }
1657
1658 .ifacebadge img {
1659         width: 16px;
1660         height: 16px;
1661         vertical-align: middle;
1662         margin-right: .25em;
1663 }
1664
1665 .ifacebadge-active {
1666         border-color: #000000;
1667         font-weight: bold;
1668 }
1669
1670 .network-status-table {
1671         display: flex;
1672         flex-wrap: wrap;
1673 }
1674
1675 .network-status-table .ifacebox {
1676         margin: .5em;
1677         flex-grow: 1;
1678 }
1679
1680 .network-status-table .ifacebox-body {
1681         display: flex;
1682         flex-direction: column;
1683         height: 100%;
1684         text-align: left;
1685 }
1686
1687 .network-status-table .ifacebox-body > span {
1688         flex: 10;
1689 }
1690
1691 .network-status-table .ifacebox-body > div {
1692         display: flex;
1693         flex-wrap: wrap;
1694 }
1695
1696 .network-status-table .ifacebox-body .ifacebadge {
1697         flex: 1;
1698         margin: .5em .25em 0 .25em;
1699         padding: .5em;
1700         min-width: 220px;
1701 }
1702
1703 .zonebadge {
1704         padding: 2px;
1705         border-radius: 4px;
1706         display: inline-block;
1707         white-space: nowrap;
1708         color: #666666;
1709         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1710         cursor: pointer;
1711 }
1712
1713 .zonebadge > em,
1714 .zonebadge > strong {
1715         margin: 5px;
1716         display: inline-block;
1717 }
1718
1719 .zonebadge input {
1720         width: 6em;
1721 }
1722
1723 .zonebadge-empty {
1724         border: 1px dashed #AAAAAA;
1725         color: #AAAAAA;
1726         font-style: italic;
1727         font-size: smaller;
1728 }
1729
1730 div.cbi-value var,
1731 .td.cbi-value-field var {
1732         font-style: italic;
1733         color: #0069D6;
1734 }
1735
1736 .uci-change-list {
1737         font-family: monospace;
1738 }
1739
1740 .uci-change-list ins,
1741 .uci-change-legend-label ins {
1742         text-decoration: none;
1743         border: 1px solid #00FF00;
1744         background-color: #CCFFCC;
1745         display: block;
1746         padding: 2px;
1747 }
1748
1749 .uci-change-list del,
1750 .uci-change-legend-label del {
1751         text-decoration: none;
1752         border: 1px solid #FF0000;
1753         background-color: #FFCCCC;
1754         display: block;
1755         font-style: normal;
1756         padding: 2px;
1757 }
1758
1759 .uci-change-list var,
1760 .uci-change-legend-label var {
1761         text-decoration: none;
1762         border: 1px solid #CCCCCC;
1763         background-color: #EEEEEE;
1764         display: block;
1765         font-style: normal;
1766         padding: 2px;
1767         line-height: 19px;
1768         white-space: pre;
1769 }
1770
1771 .uci-change-list var ins,
1772 .uci-change-list var del {
1773         display: inline;
1774         /*border: none;*/
1775         white-space: pre;
1776         font-style: normal;
1777         padding: 0px;
1778 }
1779
1780 .uci-change-legend {
1781         padding: 5px;
1782 }
1783
1784 .uci-change-legend-label {
1785         width: 150px;
1786         float: left;
1787 }
1788
1789 .uci-change-legend-label > ins,
1790 .uci-change-legend-label > del,
1791 .uci-change-legend-label > var {
1792         float: left;
1793         margin-right: 4px;
1794         width: 10px;
1795         height: 10px;
1796         display: block;
1797 }
1798
1799 .uci-change-legend-label var ins,
1800 .uci-change-legend-label var del {
1801         line-height: 6px;
1802         border: none;
1803 }