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

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