//
// 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"], 
  .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