text: //
  // Responsive: Landscape phone to desktop/tablet
  // --------------------------------------------------
  
  
  @media (max-width: 767px) {
  
    // Padding to set content in a bit
    body {
      padding-left: 20px;
      padding-right: 20px;
    }
    // Negative indent the now static "fixed" navbar
    .navbar-fixed-top,
    .navbar-fixed-bottom,
    .navbar-static-top {
      margin-left: -20px;
      margin-right: -20px;
    }
    // Remove padding on container given explicit padding set on body
    .container-fluid {
      padding: 0;
    }
  
    // TYPOGRAPHY
    // ----------
    // Reset horizontal dl
    .dl-horizontal {
      dt {
        float: none;
        clear: none;
        width: auto;
        text-align: left;
      }
      dd {
        margin-left: 0;
      }
    }
  
    // GRID & CONTAINERS
    // -----------------
    // Remove width from containers
    .container {
      width: auto;
    }
    // Fluid rows
    .row-fluid {
      width: 100%;
    }
    // Undo negative margin on rows and thumbnails
    .row,
    .thumbnails {
      margin-left: 0;
    }
    .thumbnails > li {
      float: none;
      margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
    }
    // Make all grid-sized elements block level again
    [class*="span"],
    .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
    .row-fluid [class*="span"] {
      float: none;
      display: block;
      width: 100%;
      margin-left: 0;
      .box-sizing(border-box);
    }
    .span12,
    .row-fluid .span12 {
      width: 100%;
      .box-sizing(border-box);
    }
    .row-fluid [class*="offset"]:first-child {
  		margin-left: 0;
  	}
  
    // FORM FIELDS
    // -----------
    // Make span* classes full width
    .input-large,
    .input-xlarge,
    .input-xxlarge,
    input[class*="span"],
    select[class*="span"],
    textarea[class*="span"],
    .uneditable-input {
      .input-block-level();
    }
    // But don't let it screw up prepend/append inputs
    .input-prepend input,
    .input-append input,
    .input-prepend input[class*="span"],
    .input-append input[class*="span"] {
      display: inline-block; // redeclare so they don't wrap to new lines
      width: auto;
    }
    .controls-row [class*="span"] + [class*="span"] {
      margin-left: 0;
    }
  
    // Modals
    .modal {
      position: fixed;
      top:   20px;
      left:  20px;
      right: 20px;
      width: auto;
      margin: 0;
      &.fade  { top: -100px; }
      &.fade.in { top: 20px; }
    }
  
  }
  
  
  
  // UP TO LANDSCAPE PHONE
  // ---------------------
  
  @media (max-width: 480px) {
  
    // Smooth out the collapsing/expanding nav
    .nav-collapse {
      -webkit-transform: translate3d(0, 0, 0); // activate the GPU
    }
  
    // Block level the page header small tag for readability
    .page-header h1 small {
      display: block;
      line-height: @baseLineHeight;
    }
  
    // Update checkboxes for iOS
    input[type="checkbox"],
    input[type="radio"] {
      border: 1px solid #ccc;
    }
  
    // Remove the horizontal form styles
    .form-horizontal {
      .control-label {
        float: none;
        width: auto;
        padding-top: 0;
        text-align: left;
      }
      // Move over all input controls and content
      .controls {
        margin-left: 0;
      }
      // Move the options list down to align with labels
      .control-list {
        padding-top: 0; // has to be padding because margin collaspes
      }
      // Move over buttons in .form-actions to align with .controls
      .form-actions {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  
    // Medias
    // Reset float and spacing to stack
    .media .pull-left,
    .media .pull-right  {
      float: none;
      display: block;
      margin-bottom: 10px;
    }
    // Remove side margins since we stack instead of indent
    .media-object {
      margin-right: 0;
      margin-left: 0;
    }
  
    // Modals
    .modal {
      top:   10px;
      left:  10px;
      right: 10px;
    }
    .modal-header .close {
      padding: 10px;
      margin: -10px;
    }
  
    // Carousel
    .carousel-caption {
      position: static;
    }
  
  }
  