// Bootstrap Support ---------------------------------------------------------

@import "bootstrap-responsive";

// Cartilage Support ---------------------------------------------------------

@import "cartilage/variables";
@import "cartilage/mixins";

// Up to Landscape Phone -----------------------------------------------------

@media (max-width: 480px)
{

}

// Landscape Phone to Small Desktop and Portrait Tablet ----------------------

@media (max-width: 768px)
{

}

// Landscape Phone to Small Desktop and Portrait Tablet ----------------------

@media (max-width: 768px)
{

  html
  {
    overflow: visible;
  }

  body
  {
    padding: 0;
  }

  // Navigation Bar ----------------------------------------------------------

  .navbar-fixed-top,
  .navbar-fixed-bottom
  {
    margin: 0;
  }

  // Containers --------------------------------------------------------------

  .container-fluid
  {
    padding-left: 20px;
    padding-right: 20px;
  }
}

// Portrait Tablet to Default Desktop ----------------------------------------

@media (min-width: 768px) and (max-width: 979px)
{

}

// Tablets and Below --------------------------------------------------------

@media (max-width: 979px)
{

  // Navigation Bar ---------------------------------------------------------

  .navbar
  {
    margin-bottom: 0;
  }

  .navbar-fixed-top,
  .navbar-fixed-bottom
  {
    margin: 0;

    .navbar-inner
    {
      padding: 0;
    }
  }

  .navbar .brand
  {
    float: none;
    line-height: $navbarHeight;
    padding: 0 10px 0 inherit;
    margin: 0 10px 0 -20px;
    display: inline-block;
  }

  .navbar .nav > li > a
  {
    margin: 0;
    margin-bottom: 10px;
    line-height: ($navbarHeight / 2.75);
    @include border-radius(3px);
  }

  .navbar .nav > li:last-of-type > a
  {
    margin-bottom: 20px;
  }

  // Absolute Container ------------------------------------------------------

  .container-absolute
  {
    position: relative;
    top: auto;
    overflow: visible;
  }

  // Application Content -----------------------------------------------------

  #content
  {

    // Page Header -----------------------------------------------------------

    #page-header
    {
      position: relative;
      height: auto;

      // Actions Button
      .btn-actions
      {
        display: block;
      }

      // Hide the pageactions
      .actions-collapse
      {
        overflow: hidden;
        height: 0;
        clear: left;
      }

      // Block-level the nav
      ul.actions
      {
        float: none;
        padding: 0;
        margin-left: 0;

        > li
        {
          float: none;
          margin-left: 0;
        }

        .btn
        {
          float: none;
          margin: 0 0 ($baseLineHeight / 2);
          display: block;
        }
      }
    }

    // Page Content ----------------------------------------------------------

    #page-content
    {
      position: static;
      overflow: visible;
    }
  }

}

// Default Desktop -----------------------------------------------------------

@media (min-width: 980px)
{
  .actions-collapse.collapse
  {
    height: auto !important;
  }
}

// Large Desktop and Up ------------------------------------------------------

@media (min-width: 1200px)
{

}