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