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