themes/default/less/sugarmobile.less

   1
   2 .navbar .nav-collapse {height: 0}
   3
   4 /* Body and structure
   5 -------------------*/
   6 body {
   7   position: relative;
   8   padding: 47px 0;
   9   background: @grayDarker url(../img/black_linen_v2.png);
  10 }
  11
  12 // Modals
  13  .modal {
  14    position: absolute;
  15    top:   10px;
  16    left:  10px;
  17    right: 10px;
  18    width: auto;
  19    margin: 0;
  20    &.fade.in { top: auto; }
  21  }
  22  .modal-header .close {
  23    padding: 10px;
  24    margin: -10px;
  25  }
  26
  27 .container-fluid {
  28   background: @white;
  29   height: 100%;
  30 }
  31
  32 footer {
  33         position: fixed;
  34         bottom: 0;
  35 }
  36
  37 .tcenter {
  38         text-align: center;
  39 }
  40 .tleft {
  41         text-align: left;
  42 }
  43 .tright {
  44         text-align: right;
  45 }
  46
  47 // Hide everything in the navbar save .brand and toggle button */
  48 .nav-collapse {
  49   overflow: hidden;
  50   height: 0;
  51 }
  52 .navbar-fixed-top .navbar-inner {
  53   padding: 5px;
  54 }
  55
  56 /* Typography */
  57 h1, h2, h3, h4, h5, h6 {
  58   font-family: "Open Sans", arial, sans-serif;
  59   font-weight: 400;
  60 }
  61
  62 h1 {font-size: 26px !important;}
  63
  64 /* activity and twitter */
  65
  66 article {
  67   position: relative;
  68         display: block;
  69   padding: 8px 32px 8px 52px;
  70   border-top: 1px solid darken(@grayLighter, 5%);
  71   min-height: 52px;
  72 }
  73 article div {
  74   display: table-cell;
  75   vertical-align: middle;
  76   height: 52px;
  77 }
  78 article [class^="icon-star"] {
  79 position: absolute;
  80 top: 24px;
  81 left: 16px;
  82 font-size: 24px;
  83 }
  84
  85 #detailListing article {
  86   padding: 8px 32px 8px 16px !important;
  87 }
  88
  89
  90 article [id^="listing-action"] i.grip {
  91   position: absolute;
  92   vertical-align: middle;
  93   top: 0;
  94   right: 0;
  95   padding: 0 4px 0 8px;
  96   line-height: 68px;
  97   width: 16px;
  98   letter-spacing: -4px;
  99   z-index: 1;
 100   font-style: normal;
 101   height: 100%;
 102   color: darken(@grayLight, 15%);
 103 }
 104 article [id^="listing-action"] i.on {
 105   left: 0;
 106   #gradient > .horizontal( darken(@grayDarker, 8%), darken(@grayDarker, 2%));
 107   color: @black;
 108   text-shadow: -1px 0 0 lighten(@grayDarker, 1%);
 109   @shadow: 1px 0 4px rgba(0,0,0,.4);
 110   .box-shadow(@shadow);
 111 }
 112 article [id^="listing-action"] span {
 113   position: absolute;
 114   top: 0;
 115   left: 0;
 116   width: 100%;
 117   height: 100%;
 118   z-index: 0;
 119   background: @grayDarker url(../img/black_linen_v2.png);
 120   @shadow: inset 0 2px 4px @black, inset 0 -2px 4px @black;
 121   .box-shadow(@shadow);
 122   list-style: none;
 123   text-align: center;
 124 }
 125
 126 article [id^="listing-action"] a, #record-action a {
 127 padding: 4px 6%;
 128  display: inline-block;
 129  width: 26px;
 130  height: 26px;
 131  color: @white;
 132  text-shadow: 0 1px 0 @black, 0 1px 4px @black;
 133  text-decoration: none;
 134  text-align: center;
 135 }
 136 article [id^="listing-action"] a {
 137   padding: 26px 0 0 5%;
 138 }
 139
 140 article p {
 141         display: block;
 142 }
 143 article p:last-child {
 144         margin: 0;
 145 }
 146 #activity article:nth-child(odd), #twitter article:nth-child(odd), #sActivity article:nth-child(odd), .modal article:nth-child(odd) {
 147         background: @grayLighter;
 148 }
 149
 150 /* Messages
 151 ------------*/
 152
 153
 154 /* Tweak navbar brand link to be super sleek
 155 -------------------------------------------------- */
 156 .cube {
 157   background: url(../img/badge_256.png) 50% 50% no-repeat;
 158   background-size: 50%;
 159   position: absolute;
 160   top: 0;
 161   left: 0;
 162   z-index: 2000;
 163   display: block;
 164   height: 44px;
 165   width: 44px;
 166   @shadow: inset -1px 0 0 @black, 1px 0 0 lighten(@black, 20%);
 167   .box-shadow(@shadow);
 168   }
 169 .navbar .cube:hover {
 170   text-decoration: none;
 171   }
 172 .navbar-fixed-top .cube {
 173   -webkit-transition: all .2s linear;
 174      -moz-transition: all .2s linear;
 175           transition: all .2s linear;
 176 }
 177 .navbar-fixed-top .cube:hover {
 178   text-decoration: none;
 179 }
 180
 181 .navbar .avatar, .block .avatar {
 182   height: 32px;
 183   width: 32px;
 184 }
 185 #activity .avatar {
 186   height: 48px;
 187   width: 48px;
 188 }
 189 .navbar .avatar {
 190 margin-top: -3px;
 191         .border-radius(2px);
 192 }
 193
 194 .navbar .btn {
 195         margin-top: 8px;
 196         min-width: 16px;
 197         padding: 3px 4px !important;
 198 }
 199
 200 .logo {
 201   background: url(../img/sugar-red-sm.png) 0 0 no-repeat;
 202   display: block;
 203   margin: 14px 0 0 10px;
 204   text-indent: -7000px;
 205   height: 20px;
 206   width: 150px;
 207 }
 208
 209 date {
 210         font-size: 85%;
 211         color: #888;
 212 }
 213
 214 .navbar .container-fluid {margin-top: 0;}
 215 .container-fluid {margin-top: 16px;}
 216
 217 /* Icons
 218 ------------------------- */
 219 [class^="icon-"] {
 220   font-size: 16px;
 221 }
 222 .actions [class^="icon-"] {
 223   .opacity(80);
 224 }
 225 a [class^="icon-"] {
 226   .opacity(80);
 227 }
 228 a:hover [class^="icon-"]{
 229   .opacity(90);
 230 }
 231 .the-icons {
 232   margin-left: 0;
 233   list-style: none;
 234 }
 235 .the-icons i:hover {
 236   background-color: rgba(255,0,0,.25);
 237 }
 238
 239 .icon-phone {
 240   background: url('../img/phone.png') no-repeat 50% 50%;
 241   background-size: 80%;
 242   height: 26px;
 243   width: 26px;
 244   margin-bottom: -22px;
 245 }
 246
 247
 248 .navbar [class^="icon-"] {
 249   margin-top: 2px;
 250 }
 251
 252 .btn [class^="icon-"] {
 253   margin-top: 1px;
 254 }
 255
 256 .icon-star {
 257   color: @orange;
 258 }
 259 .icon-star-empty {
 260   color: @grayLight;
 261 }
 262
 263 .btn-fixed {
 264   width: 178px;
 265   margin-right: 10px;
 266 }
 267 .wide {
 268   width: 98%;
 269   text-align: center;
 270 }
 271
 272 body {
 273   overflow: hidden;
 274   height: 100%;
 275   margin: 0;
 276   padding: 0;
 277 }
 278
 279 /* mobile menu foo */
 280
 281 html {
 282   width: 100%;
 283   height: 100%;
 284   overflow: hidden;
 285 }
 286 .onL .navbar {
 287   position: absolute;
 288   left: 86%;
 289   top: 0px;
 290   width: 100%;
 291   height: 100%;
 292   @shadow: -1px 0 4px rgba(0,0,0,.4);
 293   .box-shadow(@shadow);
 294 }
 295 .onR .navbar {
 296   position: absolute;
 297   left: -86%;
 298   top: 0px;
 299   width: 100%;
 300   height: 100%;
 301   @shadow: -1px 0 4px rgba(0,0,0,.4);
 302   .box-shadow(@shadow);
 303 }
 304 .onL #listing *, .onL .bizcard *, .onR #listing *, .onR .bizcard * {
 305   display: none;
 306 }
 307 .onL .navbar .nav-collapse  {
 308   float: none;
 309   position: absolute;
 310   top: 0;
 311   left: -86%;
 312   display: block;
 313   width:86%;
 314   height: 100%;
 315   background: @grayDarker url(../img/black_linen_v2.png);
 316 }
 317 .onR .navbar .nav-collapse {
 318   float: none;
 319   position: absolute;
 320   top: 0;
 321   right: -86%;
 322   display: block;
 323   width:86%;
 324   height: 100%;
 325   background: @grayDarker url(../img/black_linen_v2.png);
 326 }
 327
 328 .onL .navbar .nav-collapse #moduleList, .onR .navbar .nav-collapse #createList {
 329   overflow: scroll;
 330   -webkit-overflow-scrolling:touch;
 331   height: 100%;
 332 }
 333 .onR .navbar .nav-collapse #moduleList, .onL .navbar .nav-collapse #createList {
 334   display: none;
 335 }
 336
 337 #scroll {
 338   margin: 10px 0;
 339   height: 80%;
 340   position: absolute;
 341   left: 0;
 342   top: 46px;
 343   width: 100%;
 344   overflow: scroll;
 345   -webkit-overflow-scrolling:touch;
 346   padding-bottom: 146px;
 347   display: block;
 348 }
 349
 350 #listing {
 351   height: 90%;
 352   position: absolute;
 353   left: 0;
 354   width: 100%;
 355   overflow: scroll;
 356   -webkit-overflow-scrolling: touch;
 357   display: block;
 358 }
 359
 360
 361 #detailListing #listing {
 362   height: 40% !important;
 363 }
 364
 365 #listing > article:first-child {
 366         margin-top:33px;
 367 }
 368
 369 #listing > article:last-child {
 370         margin-bottom:20px;
 371 }
 372
 373 #listing article {
 374         -webkit-transition: all .25s ease-in-out;
 375 }
 376
 377 #listing article.deleted {
 378     opacity:0;
 379 }
 380
 381 .navbar [class^="icon-"] {
 382   color: @white;
 383   text-shadow: 0 -1px 0 @black;
 384 }
 385
 386 #backRecord {
 387   position: absolute;
 388   top: 10px;
 389   left: 10px;
 390   z-index: 2000;
 391 }
 392
 393 #saveRecord {
 394   position: absolute;
 395   top: 10px;
 396   right: 10px;
 397   z-index: 2000;
 398 }
 399
 400 .navbar #search, .navbar #back .icon-chevron-left {
 401   position: absolute;
 402   top: 11px;
 403   left: 58px;
 404 }
 405
 406 .navbar #create {
 407   position: absolute;
 408   top: 0;
 409   right: 0;
 410   height: 34px;
 411   width: 44px;
 412   @shadow: inset 1px 0 0 lighten(@black, 20%), -1px 0 0 @black;
 413   .box-shadow(@shadow);
 414   text-align: center;
 415   padding-top: 10px;
 416 }
 417
 418 #detailListing #listing {
 419 /*
 420   top: 202px;
 421   padding-bottom: 190px;
 422 */
 423 }
 424
 425 #detailListing #listing article:first-child {
 426   margin-top:184px;
 427 }
 428
 429 #searchForm {
 430   position: absolute;
 431   top: 0;
 432   left: 0;
 433   z-index: 2000;
 434   width: 100%;
 435   height: 44px !important;
 436   background: @grayDarker url(../img/black_linen_v2.png);
 437 }
 438 #searchForm .btn {
 439   position: absolute;
 440   top:1px;
 441   right: 0px;
 442   width: inherit;
 443   }
 444
 445 .search-query {
 446   border-color: #000;
 447   color: @grayDarker;
 448   position: absolute;
 449   padding: 4px;
 450   left: 10px;
 451   top: 9px;
 452   height: 28px;
 453   width: 70% !important;
 454   .border-radius(4px);
 455   z-index: 1080;
 456 }
 457
 458 .navbar h1 {
 459   font-size: 16px !important;
 460   text-align: center;
 461   font-weight: 700;
 462   width: auto !important;
 463   overflow: hidden;
 464   margin: 0 auto;
 465   text-shadow: 0 -1px 0 @black;
 466   z-index: 0;
 467   color: @white;
 468 }
 469
 470 .bizcard {
 471   position: fixed;
 472   top: 46px;
 473   width: 100%;
 474   z-index: 1000;
 475   min-height: 70px;
 476   overflow: auto;
 477   padding: 16px 0 66px 0;
 478   color: @white;
 479   text-shadow: 0 -1px 0 @black;
 480   #gradient > .vertical( darken(@grayDarker, 5%), darken(@grayDarker, 15%));
 481   @shadow: 0 1px 4px rgba(0,0,0,.6);
 482   .box-shadow(@shadow);
 483 }
 484 .bizcard a {
 485   color: @white;
 486 }
 487 .bizcard .avatar {
 488   height: 68px;
 489   width: 68px;
 490   position: absolute;
 491   right: 16px;
 492   top: 16px;
 493   .border-radius(6px);
 494   @shadow:  0 -1px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.6);
 495   .box-shadow(@shadow);
 496 }
 497
 498 .bizcard h3 {
 499   font-size: 16px;
 500   font-weight: 700;
 501   color: @white;
 502   margin: 0;
 503   padding: 0;
 504   line-height: 20px;
 505 }
 506 .bizcard .card {
 507   margin: 0 0 0 16px;
 508 }
 509
 510 .bizcard #accountDescription{
 511   margin: 10px 0 0;
 512 }
 513
 514 #record-action {
 515   text-align: center;
 516   position: absolute;
 517   left: 0;
 518   bottom: 0;
 519   width: 100%;
 520   #gradient > .vertical( darken(@grayDarker, 5%), darken(@grayDarker, 15%));
 521    height: 52px;
 522   @shadow: inset 0 -1px 0 @black, inset 0 1px 0 lighten(@black, 20%);
 523   .box-shadow(@shadow);
 524 }
 525
 526 .tabs article {
 527   #gradient > .vertical( darken(@grayDarker, 5%), darken(@grayDarker, 15%));
 528    height: 52px;
 529   @shadow: inset 0 -1px 0 @black, inset 0 1px 0 lighten(@black, 20%);
 530   .box-shadow(@shadow);
 531 }
 532
 533 .onL .nav-collapse li {
 534   .border-radius(0px);
 535   background: @grayDarker url(../img/black_linen_v2.png);
 536   @shadow: inset -2px 0 4px rgba(0,0,0,.8), inset 0 -2px 0 @grayDark;
 537   .box-shadow(@shadow);
 538 }
 539
 540 .onR .nav-collapse li {
 541   .border-radius(0px);
 542   background: @grayDarker url(../img/black_linen_v2.png);
 543   @shadow: inset 2px 0 4px rgba(0,0,0,.8), inset 0 -2px 0 @grayDark;
 544   .box-shadow(@shadow);
 545 }
 546
 547
 548 .navbar a {text-decoration: none;}
 549
 550 .nav-collapse .nav > li > a {
 551   margin: 0 !important;
 552   .border-radius(0px);
 553 }
 554
 555 .navbar .nav li.active a {
 556 #gradient > .vertical(darken(@grayDarker, 15%), darken(@grayDarker, 5%));
 557 color: @gray;
 558 @shadow: inset -2px 0 4px rgba(0,0,0,.8), inset 0 -2px 0 @grayDark;
 559 .box-shadow(@shadow);
 560 }
 561
 562 .navbar .nav li a:hover {background: none !important;}
 563
 564 .nav-collapse li a .btn {
 565   margin: -2px 0 0 !important;
 566   border-color: @black;
 567   color: @white;
 568 }
 569
 570 .nav-collapse li li a {
 571  background: none;
 572  margin: 0;
 573 }
 574
 575 .alert {
 576  z-index: 2000;
 577  position: absolute;
 578  width: 100%;
 579  height: 20px;
 580  bottom: -1px;
 581  left: -1px;
 582  .border-radius(0px);
 583  padding: 5px 10px;
 584  .opacity(94);
 585  color: @white;
 586  text-shadow: none;
 587  font-weight: bold;
 588  margin: 0;
 589  font-size: 11px;
 590  background: @black;
 591 }
 592
 593 .over {
 594  z-index: 2000;
 595  position: absolute;
 596  width: 100%;
 597  height: auto;
 598  bottom: 0;
 599  #gradient > .vertical( lighten(@grayDarker, 10%), darken(@grayDarker, 10%));
 600  .border-radius(0px);
 601  padding: 2% 0 2%;
 602  font-weight: bold;
 603  margin: 0;
 604  text-align: center;
 605  @shadow: inset 0 1px 0 rgba(0,0,0,.8), inset 0 3px 0 rgba(255,255,255,.1), 0 -1px 10px rgba(0,0,0,.8);
 606  .box-shadow(@shadow);
 607  -webkit-transition: all .2s linear;
 608     -moz-transition: all .2s linear;
 609          transition: all .2s linear;
 610
 611 }
 612
 613 .over h4 {
 614   color: @white;
 615   margin: 1% 0
 616 }
 617
 618 .over .btn:first-child {
 619   width: 80%;
 620   margin: 2% 0 1% 0;
 621 }
 622
 623 .over .btn {
 624   width: 80%;
 625   margin: 1% 0;
 626 }
 627
 628 .modal .brand {
 629   background: url(../img/brand_256.png) 50% 50% no-repeat;
 630   background-size: 70%;
 631   text-indent: -7000px;
 632   margin: 15px auto 15px;
 633   width: 260px;
 634   height: auto;
 635   -webkit-transition: all .2s linear;
 636      -moz-transition: all .2s linear;
 637           transition: all .2s linear;
 638   }
 639 .navbar h1.brand {
 640   background: url(../img/brand_256.png) 50% 50% no-repeat;
 641   background-size: 80%;
 642   text-indent: -7000px;
 643   width: 100%;
 644   margin: 0 auto;
 645   }
 646
 647
 648 /* edit record
 649 --------------*/
 650 .pad {
 651   background: @white;
 652   margin: 10px 10px;
 653         .border-radius(3px);
 654 }
 655 #createRecord.form-horizontal .control-group > label  {
 656   width: 25% !important;
 657   margin-right: 2% !important;
 658   float: left !important;
 659   text-align: right !important;
 660   font-weight: 600;
 661   font-size: 11px;
 662 }
 663 #createRecord input, #createRecord textarea, #createRecord select, #createRecord .uneditable-input {
 664   width: 75% !important;
 665   border: none;
 666   background: none;
 667   box-shadow: none;
 668   height: 26px;
 669   display: block;
 670 }
 671 #createRecord.form-horizontal .controls {
 672   margin-left: 26%;
 673 }
 674 #createRecord.form-horizontal .control-group:first-child {
 675   border-top: none;
 676 }
 677 #createRecord.form-horizontal .control-group {
 678   position: relative;
 679         display: block;
 680   padding: 10px;
 681   margin: 0;
 682   border-top: 1px solid darken(@grayLighter, 5%);
 683 }
 684 #createRecord .avatar {
 685   height: 32px;
 686   width: 32px;
 687 }
 688
 689 li.divider-horizontal {
 690   background: @black;
 691   height: 10px;
 692   display: block;
 693   line-height: 10px;
 694   padding: 10px;
 695 }
 696
 697 /* Log In
 698 ----------*/
 699 #login {
 700         background: #E61718 url(../img/leather-red.png);
 701   @shadow: inset 0 -4px 60px rgba(0,0,0,.8);
 702   .box-shadow(@shadow);
 703 }
 704 #login .modal, #login .modal-header, #login .modal-footer, #login .modal-body {
 705 border: none;
 706 padding: 0 !important;
 707 margin: 0 !important;
 708 background: none;
 709 @shadow: none;
 710 .box-shadow(@shadow);
 711 }
 712 #login input, #login .btn {
 713   width: 260px !important;
 714   margin: 0 auto !important;
 715   padding: 10px !important;
 716   @shadow:  1px 2px 0 rgba(0,0,0,.2);
 717   .box-shadow(@shadow);
 718   border: none;
 719 }
 720
 721 #login .btn {
 722 #gradient > .vertical( darken(@red, 15%), darken(@red, 35%));
 723 @shadow: 0 1px 0 rgba(0,0,0,.3), inset -1px -1px 0 rgba(0,0,0,.2), inset 1px 1px 0 rgba(0,0,0,.2);
 724 .box-shadow(@shadow);
 725 color: @white;
 726 text-shadow: 0 -1px 0 rgba(0,0,0,.6);
 727 }
 728
 729 #login .modal input[type=submit] {
 730   @shadow:  1px 1px 0 rgba(0,0,0,.2);
 731   .box-shadow(@shadow);
 732   width: 260px !important;
 733 }
 734 #login .modal input:focus {
 735   border: none;
 736   @shadow: 2px 2px 0 lighten(@red, 20%), 2px 2px 0 lighten(@red, 20%);
 737   .box-shadow(@shadow);
 738   outline: 0;
 739 }
 740
 741 #login {text-align: center;}
 742 #login .btn-sugar {
 743   float: none;
 744   margin-left:-80px !important;
 745   position: absolute;
 746   bottom: 10%;
 747   width: auto;
 748   left: 50%;
 749 }
 750 #login .modal .btn {float: none !important;}
 751 #login .modal .pull-left {
 752 display: block;
 753 float: none !important;}
 754
 755 #login .btn.btn-sugar {width: 140px!important;}
 756
 757 /* Alert overrider */
 758 .alert-success {background: darken(@green, 20%); color: #fff; text-shadow: none;}
 759 .alert-danger, .alert-error {background: @red;  color: #fff;}
 760
 761
 762 /* TOUR */
 763 #tour {
 764   background: url('../img/tour.png') no-repeat;
 765   height: 100%;
 766   position: absolute;
 767   top: 0;
 768   left: 0;
 769   width: 100%;
 770   z-index: 3000;
 771 }
 772
 773
 774 /* Navbar collapse */
 775
 776   .navbar-fixed-top .navbar-inner {
 777     padding: 5px;
 778   }
 779
 780   // Nav collapse clears brand
 781   .navbar .nav-collapse {
 782     clear: left;
 783   }
 784   // Block-level the nav
 785   .navbar .nav {
 786     float: none;
 787     margin: 0 0 (@baseLineHeight / 2);
 788   }
 789   .navbar .nav > li {
 790     float: none;
 791   }
 792   .navbar .nav > li > a {
 793     margin-bottom: 2px;
 794   }
 795   .navbar .nav > .divider-vertical {
 796     display: none;
 797   }
 798   .navbar .nav .nav-header {
 799     color: @navbarText;
 800     text-shadow: none;
 801   }
 802   // Nav and dropdown links in navbar
 803   .navbar .nav > li > a,
 804   .navbar .dropdown-menu a {
 805     padding: 12px 15px;
 806     font-weight: bold;
 807     color: @navbarLinkColor;
 808   }
 809   .navbar .dropdown-menu li + li a {
 810     margin-bottom: 2px;
 811   }
 812   .navbar .nav > li > a:hover,
 813   .navbar .dropdown-menu a:hover {
 814     background-color: @navbarBackground;
 815   }
 816   // Dropdowns in the navbar
 817   .navbar .dropdown-menu {
 818     position: static;
 819     top: auto;
 820     left: auto;
 821     float: none;
 822     display: block;
 823     max-width: none;
 824     margin: 0 15px;
 825     padding: 0;
 826     background-color: transparent;
 827     border: none;
 828     .border-radius(0);
 829     .box-shadow(none);
 830   }
 831   .navbar .dropdown-menu:before,
 832   .navbar .dropdown-menu:after {
 833     display: none;
 834   }
 835   .navbar .dropdown-menu .divider {
 836     display: none;
 837   }
 838   // Forms in navbar
 839   .navbar-form,
 840   .navbar-search {
 841     float: none;
 842     padding: (@baseLineHeight / 2) 15px;
 843     margin: (@baseLineHeight / 2) 0;
 844     border-top: 1px solid @navbarBackground;
 845     border-bottom: 1px solid @navbarBackground;
 846     @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
 847     .box-shadow(@shadow);
 848   }
 849   // Pull right (secondary) nav content
 850   .navbar .nav.pull-right {
 851     float: none;
 852     margin-left: 0;
 853   }
 854   // Static navbar
 855   .navbar-static .navbar-inner {
 856     padding-left:  10px;
 857     padding-right: 10px;
 858   }
 859   // Navbar button
 860   .btn-navbar {
 861     display: block;
 862   }
 863
 864   // Hide everything in the navbar save .brand and toggle button */
 865   .nav-collapse {
 866     overflow: hidden;
 867     height: 0;
 868   }