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 .cbi-page-actions .cbi-button-reset {
1314         color: #ffffff;
1315         padding: 5px 14px 6px;
1316         background-color: #0064cd;
1317         background-repeat: repeat-x;
1318         background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
1319         background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
1320         background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
1321         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
1322         background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
1323         background-image: -o-linear-gradient(top, #049cdb, #0064cd);
1324         background-image: linear-gradient(top, #049cdb, #0064cd);
1325         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
1326         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1327         border-color: #0064cd #0064cd #003f81;
1328         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1329 }
1330
1331 .cbi-input-invalid {
1332         color: #FF0000;
1333         border-color: #FF0000;
1334 }
1335
1336 .cbi-button-up,
1337 .cbi-input-up {
1338         background-position: center center;
1339         background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1340         background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1341         background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1342         background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1343         background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1344         background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1345 }
1346
1347 .cbi-button-down,
1348 .cbi-input-down {
1349         background-position: center center;
1350         background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1351         background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1352         background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1353         background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1354         background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1355         background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1356 }
1357
1358 .cbi-button-find,
1359 .cbi-input-find {
1360         background-position: 6px center, left top;
1361         padding-left: 28px;
1362         background-image: url('../resources/cbi/find.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1363         background-image: url('../resources/cbi/find.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1364         background-image: url('../resources/cbi/find.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1365         background-image: url('../resources/cbi/find.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1366         background-image: url('../resources/cbi/find.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1367         background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1368 }
1369
1370 .cbi-button-add,
1371 .cbi-input-add {
1372         background-position: 6px center, left top;
1373         padding-left: 28px;
1374         background-image: url('../resources/cbi/add.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1375         background-image: url('../resources/cbi/add.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1376         background-image: url('../resources/cbi/add.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1377         background-image: url('../resources/cbi/add.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1378         background-image: url('../resources/cbi/add.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1379         background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1380 }
1381
1382 .cbi-button-apply,
1383 .cbi-input-apply {
1384         background-position: 6px center, left top;
1385         padding-left: 28px;
1386         background-image: url('../resources/cbi/apply.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1387         background-image: url('../resources/cbi/apply.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1388         background-image: url('../resources/cbi/apply.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1389         background-image: url('../resources/cbi/apply.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1390         background-image: url('../resources/cbi/apply.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1391         background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1392 }
1393
1394 .cbi-button-reset,
1395 .cbi-input-reset {
1396         background-position: 6px center, left top;
1397         padding-left: 28px;
1398         background-image: url('../resources/cbi/reset.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1399         background-image: url('../resources/cbi/reset.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1400         background-image: url('../resources/cbi/reset.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1401         background-image: url('../resources/cbi/reset.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1402         background-image: url('../resources/cbi/reset.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1403         background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1404 }
1405
1406 .cbi-button-edit,
1407 .cbi-input-edit {
1408         background-position: 6px center, left top;
1409         padding-left: 28px;
1410         background-image: url('../resources/cbi/edit.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1411         background-image: url('../resources/cbi/edit.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1412         background-image: url('../resources/cbi/edit.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1413         background-image: url('../resources/cbi/edit.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1414         background-image: url('../resources/cbi/edit.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1415         background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1416 }
1417
1418 .cbi-button-remove,
1419 .cbi-input-remove {
1420         background-position: 6px center, left top;
1421         padding-left: 28px;
1422         background-image: url('../resources/cbi/remove.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1423         background-image: url('../resources/cbi/remove.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1424         background-image: url('../resources/cbi/remove.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1425         background-image: url('../resources/cbi/remove.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1426         background-image: url('../resources/cbi/remove.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1427         background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1428 }
1429
1430 .cbi-button-reload,
1431 .cbi-input-reload {
1432         background-position: 6px center, left top;
1433         padding-left: 28px;
1434         background-image: url('../resources/cbi/reload.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1435         background-image: url('../resources/cbi/reload.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1436         background-image: url('../resources/cbi/reload.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1437         background-image: url('../resources/cbi/reload.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1438         background-image: url('../resources/cbi/reload.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1439         background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1440 }
1441
1442 .cbi-button-link,
1443 .cbi-input-link {
1444         background-position: 6px center, left top;
1445         padding-left: 28px;
1446         background-image: url('../resources/cbi/link.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1447         background-image: url('../resources/cbi/link.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1448         background-image: url('../resources/cbi/link.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1449         background-image: url('../resources/cbi/link.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1450         background-image: url('../resources/cbi/link.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1451         background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1452 }
1453
1454 .btn.active, .btn:active {
1455         -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1456         -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1457         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1458 }
1459
1460 .btn.disabled {
1461         cursor: default;
1462         background-image: none;
1463         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1464         filter: alpha(opacity=65);
1465         -khtml-opacity: 0.65;
1466         -moz-opacity: 0.65;
1467         opacity: 0.65;
1468         -webkit-box-shadow: none;
1469         -moz-box-shadow: none;
1470         box-shadow: none;
1471 }
1472
1473 .btn[disabled] {
1474         cursor: default;
1475         background-image: none;
1476         filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
1477         filter: alpha(opacity=65);
1478         -khtml-opacity: 0.65;
1479         -moz-opacity: 0.65;
1480         opacity: 0.65;
1481         -webkit-box-shadow: none;
1482         -moz-box-shadow: none;
1483         box-shadow: none;
1484 }
1485
1486 .btn.large {
1487         font-size: 15px;
1488         line-height: normal;
1489         padding: 9px 14px 9px;
1490         -webkit-border-radius: 6px;
1491         -moz-border-radius: 6px;
1492         border-radius: 6px;
1493 }
1494
1495 .btn.small {
1496         padding: 7px 9px 7px;
1497         font-size: 11px;
1498 }
1499
1500 /* Button icons for specific pages */
1501 .Startup .cbi-section-table input.cbi-input-apply,
1502 .Startup .cbi-section-table input.cbi-button-apply {
1503           background-image: url("../resources/cbi/apply.gif");
1504           background-position: 7px 4px;
1505           padding: 3px 9px 3px 27px;
1506 }
1507
1508 .Processes .cbi-section-table input.cbi-input-reload,
1509 .Startup .cbi-section-table input.cbi-input-reload {
1510           background-image: url("../resources/cbi/reload.gif");
1511           background-position: 7px 4px;
1512           padding: 3px 9px 3px 27px;
1513 }
1514
1515 .Processes .cbi-section-table input.cbi-input-remove,
1516 .Processes .cbi-section-table div.cbi-section-remove input,
1517 .Startup .cbi-section-table input.cbi-input-remove,
1518 .Startup .cbi-section-table div.cbi-section-remove input  {
1519           background-image: url("../resources/cbi/remove.gif");
1520           background-position: 7px 4px;
1521           padding: 3px 9px 3px 27px;
1522 }
1523
1524 .Processes .cbi-section-table input.cbi-input-reset,
1525 .Processes .cbi-section-table input.cbi-button-reset,
1526 .Startup .cbi-section-table input.cbi-input-reset,
1527 .Startup .cbi-section-table input.cbi-button-reset  {
1528           background-image: url("../resources/cbi/reset.gif");
1529           background-position: 7px 4px;
1530           padding: 3px 9px 3px 27px;
1531 }
1532
1533 .Startup .cbi-section-table input.cbi-input-save,
1534 .Startup .cbi-section-table input.cbi-button-save {
1535           background-image: url("../resources/cbi/save.gif");
1536           background-position: 7px 4px;
1537           padding: 3px 9px 3px 27px;
1538 }
1539
1540 :root .alert-message, :root .btn {
1541         border-radius: 0 \0;
1542 }
1543
1544 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1545         padding: 0;
1546         border: 0;
1547 }
1548
1549 .close {
1550         float: right;
1551         color: #000000;
1552         font-size: 20px;
1553         font-weight: bold;
1554         line-height: 13.5px;
1555         text-shadow: 0 1px 0 #ffffff;
1556         filter: alpha(opacity=25);
1557         -khtml-opacity: 0.25;
1558         -moz-opacity: 0.25;
1559         opacity: 0.25;
1560 }
1561
1562 .close:hover {
1563         color: #000000;
1564         text-decoration: none;
1565         filter: alpha(opacity=40);
1566         -khtml-opacity: 0.4;
1567         -moz-opacity: 0.4;
1568         opacity: 0.4;
1569 }
1570
1571 .alert-message {
1572         position: relative;
1573         padding: 7px 15px;
1574         margin-bottom: 18px;
1575         color: #404040;
1576         background-color: #eedc94;
1577         background-repeat: repeat-x;
1578         background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
1579         background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
1580         background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
1581         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
1582         background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
1583         background-image: -o-linear-gradient(top, #fceec1, #eedc94);
1584         background-image: linear-gradient(top, #fceec1, #eedc94);
1585         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
1586         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1587         border-color: #eedc94 #eedc94 #e4c652;
1588         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1589         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1590         border-width: 1px;
1591         border-style: solid;
1592         -webkit-border-radius: 4px;
1593         -moz-border-radius: 4px;
1594         border-radius: 4px;
1595         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1596         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1597         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1598 }
1599
1600 .alert-message .close {
1601         margin-top: 1px;
1602         *margin-top: 0;
1603 }
1604
1605 .alert-message a {
1606         font-weight: bold;
1607         color: #404040;
1608 }
1609
1610 .alert-message.danger p a,
1611 .alert-message.error p a,
1612 .alert-message.success p a,
1613 .alert-message.info p a {
1614         color: #ffffff;
1615 }
1616
1617 .alert-message h5 {
1618         line-height: 18px;
1619 }
1620
1621 .alert-message p {
1622         margin-bottom: 0;
1623 }
1624
1625 .alert-message div {
1626         margin-top: 5px;
1627         margin-bottom: 2px;
1628         line-height: 28px;
1629 }
1630
1631 .alert-message .btn {
1632         -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1633         -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1634         box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
1635 }
1636
1637 .label {
1638         padding: 1px 3px 2px;
1639         font-size: 9.75px;
1640         font-weight: bold;
1641         color: #ffffff !important;
1642         text-transform: uppercase;
1643         white-space: nowrap;
1644         background-color: #bfbfbf;
1645         -webkit-border-radius: 3px;
1646         -moz-border-radius: 3px;
1647         border-radius: 3px;
1648         text-shadow: none;
1649 }
1650
1651 a.label:link,
1652 a.label:visited {
1653         color: #ffffff;
1654 }
1655
1656 a.label:hover {
1657         text-decoration: none;
1658 }
1659
1660 .label.important {
1661         background-color: #c43c35;
1662 }
1663
1664 .label.warning {
1665         background-color: #f89406;
1666 }
1667
1668 .label.success {
1669         background-color: #46a546;
1670 }
1671
1672 .label.notice {
1673         background-color: #62cffc;
1674 }
1675
1676 /* LuCI specific items */
1677 .hidden { display: none }
1678
1679 #memtotal > div,
1680 #memfree > div,
1681 #memcache > div,
1682 #membuff > div,
1683 #conns > div  {
1684           border: 1px solid #CCCCCC;
1685           border-radius: 3px 3px 3px 3px;
1686           color: #808080;
1687           display: inline-block;
1688           font-size: 13px;
1689           height: 22 dpx;
1690           line-height: 18px;
1691 }
1692
1693 #xhr_poll_status {
1694           cursor: pointer;
1695 }
1696
1697 form.inline { display: inline }
1698
1699 header .pull-right { padding-top: 8px; }
1700
1701 #modemenu li:last-child span.divider { display: none }
1702
1703 #syslog {  width: 100%; }
1704
1705 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1706         background-color: #f9f9f9;
1707 }
1708
1709 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th  {
1710         background-color: #f5f5f5;
1711 }
1712
1713 .cbi-section-table tr.cbi-section-table-descr th {
1714         font-weight: normal;
1715 }
1716
1717 .left { text-align: left !important; }
1718
1719 .right { text-align: right !important; }
1720
1721 .cbi-value-field { line-height: 1.5em; }
1722
1723 .cbi-value-field input[type=checkbox],
1724 .cbi-value-field input[type=radio] {
1725         margin-top: 8px;
1726         margin-right: 6px;
1727 }
1728
1729 table table td,
1730 .cbi-value-field table td {
1731         border: none;
1732 }
1733
1734 table.cbi-section-table input,
1735 table.cbi-section-table textarea,
1736 table.cbi-section-table select {
1737         width: auto;
1738 }
1739
1740 table.cbi-section-table td.cbi-section-table-cell {
1741         white-space: nowrap;
1742         text-align: right;
1743 }
1744
1745 .cbi-value-description { display: inline; }
1746
1747 .cbi-value-description img { vertical-align: middle; }
1748
1749 .ifacebox {
1750         background-color: #FFFFFF;
1751         border: 1px solid #CCCCCC;
1752         margin: 0 10px;
1753         text-align: center;
1754         white-space: nowrap;
1755         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1756         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1757         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1758         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1759         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1760         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1761         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1762         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1763         -webkit-border-radius: 4px;
1764         -moz-border-radius: 4px;
1765         border-radius: 4px;
1766         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1767         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1768         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1769 }
1770
1771 .ifacebox .ifacebox-head {
1772         border-bottom: 1px solid #CCCCCC;
1773         padding: 2px;
1774 }
1775
1776 .ifacebox .ifacebox-body {
1777         padding: 6px;
1778 }
1779
1780 .ifacebadge {
1781         display: inline-block;
1782         white-space: nowrap;
1783         background-color: #FFFFFF;
1784         border: 1px solid #CCCCCC;
1785         padding: 2px;
1786         margin-left: 2px;
1787         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
1788         background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1789         background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
1790         background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1791         background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1792         background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
1793         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
1794         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1795         -webkit-border-radius: 4px;
1796         -moz-border-radius: 4px;
1797         border-radius: 4px;
1798         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1799         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1800         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1801 }
1802
1803 .ifacebadge-active {
1804         border-color: #000000;
1805         font-weight: bold;
1806 }
1807
1808 .zonebadge {
1809         padding: 2px;
1810         border-radius: 4px;
1811         display: inline-block;
1812         white-space: nowrap;
1813         color: #666666;
1814         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1815         cursor: pointer;
1816 }
1817
1818 .zonebadge em,
1819 .zonebadge strong {
1820         margin: 5px;
1821         display: inline-block;
1822 }
1823
1824 .zonebadge input {
1825         width: 6em;
1826         height: 1em;
1827 }
1828
1829 .zonebadge-empty {
1830         border: 1px dashed #AAAAAA;
1831         color: #AAAAAA;
1832         font-style: italic;
1833         font-size: smaller;
1834 }
1835
1836 div.cbi-value var,
1837 td.cbi-value-field var {
1838         font-style: italic;
1839         color: #0069D6;
1840 }
1841
1842 .uci-change-list {
1843         font-family: monospace;
1844 }
1845
1846 .uci-change-list ins,
1847 .uci-change-legend-label ins {
1848         text-decoration: none;
1849         border: 1px solid #00FF00;
1850         background-color: #CCFFCC;
1851         display: block;
1852         padding: 2px;
1853 }
1854
1855 .uci-change-list del,
1856 .uci-change-legend-label del {
1857         text-decoration: none;
1858         border: 1px solid #FF0000;
1859         background-color: #FFCCCC;
1860         display: block;
1861         font-style: normal;
1862         padding: 2px;
1863 }
1864
1865 .uci-change-list var,
1866 .uci-change-legend-label var {
1867         text-decoration: none;
1868         border: 1px solid #CCCCCC;
1869         background-color: #EEEEEE;
1870         display: block;
1871         font-style: normal;
1872         padding: 2px;
1873 }
1874
1875 .uci-change-list var ins,
1876 .uci-change-list var del {
1877         /*display: inline;*/
1878         border: none;
1879         white-space: pre;
1880         font-style: normal;
1881         padding: 0px;
1882 }
1883
1884 .uci-change-legend {
1885         padding: 5px;
1886 }
1887
1888 .uci-change-legend-label {
1889         width: 150px;
1890         float: left;
1891 }
1892
1893 .uci-change-legend-label>ins,
1894 .uci-change-legend-label>del,
1895 .uci-change-legend-label>var {
1896         float: left;
1897         margin-right: 4px;
1898         width: 10px;
1899         height: 10px;
1900         display: block;
1901 }
1902
1903 .uci-change-legend-label var ins,
1904 .uci-change-legend-label var del {
1905         line-height: 6px;
1906         border: none;
1907 }