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