// Cartilage Variables -------------------------------------------------------
//
// NOTE: Variable overrides must be set before Bootstrap is included!
//

@import "cartilage/variables";

// Twitter Bootstrap ---------------------------------------------------------

@import "bootstrap";

// Cartilage Mixins ----------------------------------------------------------

@import "cartilage/mixins";

// ---------------------------------------------------------------------------

html
{
  overflow: hidden;
}

body
{
  background-image: asset-url("cartilage/patterns/background.png", image);
}

// Structural Layout ---------------------------------------------------------

.container-absolute
{
  position: absolute;
  top: $navbarHeight;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  @include clearfix();
}

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

.navbar-inner
{

  //
  // Add a subtle bevel (highlight and shadow) to the navbar by using inset
  // box shadows.
  //
  @include box-shadow(#{inset 0px 1px 0px rgba(255, 255, 255, 0.15), inset 1px 0px 0px rgba(255, 255, 255, 0.05), inset -1px 0px 0px rgba(255, 255, 255, 0.05), inset 0px -1px 0px rgba(0, 0, 0, 0.5)});

}

.navbar
{
  //
  // Don't allow the user to select any text within the navbar.
  //
  @include user-select(none);

  .brand
  {

    //
    // Apply Fitt's law to the entire brand area. The navigation bar will be
    // clickable from all the way to the left of the browser window to the top
    // and bottom of the navigation bar. We will cap the overlap area on the
    // right side at 10px to leave 10px of unclickable space between the brand
    // and the navigation.
    //
    line-height: $navbarHeight;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 10px;
    margin-right: 10px;

    img
    {
      vertical-align: middle;

      max-width: none;

      //
      // Vertically aligning the image to the middle does not result in a
      // perfect alignment, depending on the font size of the brand element
      // itself. Offset it here to ensure we get it centered correctly.
      //
      // TODO This is to offset for better centering, but it's a total hack
      // and hard-coded...
      //
      padding-bottom: 6px;

      //
      // Don't allow the user to drag the brand image. This will allow the
      // user to drag the link to which the brand image points, instead,
      // which is likely what the user would want anyways.
      //
      @include user-drag(none);
    }
  }

  .btn
  {

    &.btn-navbar
    {
      //
      // Properly align buttons in the middle of the navigation bar, based on
      // the defined height of the navbar (and the known height of the buttons,
      // which at the time this was written was 30px).
      //
      // PATCH Submitted to Bootstrap (https://github.com/twitter/bootstrap/pull/1853)
      //
      margin-top: ($navbarHeight - 30px) / 2;

      //
      // Remove the excess right margin so that it aligns properly (at 20px)
      // from the right border.
      //
      margin-right: 0;
    }

  }

  //
  // Override the navigation styles within the context of the navigation bar
  // with our own tabbed implementation. We could override the nav-tabs class
  // instead, but it would be more to override and nav-tabs are not intended
  // to be used inside the navbar (as far as I can tell).
  //
  .nav
  {
    > li
    {
      > a
      {
        line-height: ($navbarHeight / 2);
        margin-top: ($navbarHeight / 2);
        margin-right: 6px;
        padding: 0 10px;
        color: white;

        text-shadow: 0 -1px 0 black;
        font-weight: bold;
        font-size: 13px;

        background-color: rgb(38, 46, 49);
        background-color: rgba(0, 0, 0, 0.25);

        @include border-radius(3px 3px 0 0);
        @include transition('color 0.25s, background-color 0.25s');

        &:hover
        {
          background-color: rgb(25, 33, 36);
          background-color: rgba(0, 0, 0, 0.45);
        }
      }

      &.active
      {
        > a
        {
          color: $navbarLinkColorActive;
          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
          @include gradient-vertical(rgb(244, 245, 246), rgb(248, 248, 249));

          // TODO We cannot use a drop-shadow because dropdowns in the navbar
          //      are at the wrong z-index, therefore we can't place the page-header
          //      above the navbar to pull off the desired shadow effect.
          // @include box-shadow(0 0 4px black);

          &:hover
          {
            //
            // Don't allow the text color to change for the active tab when
            // the user hovers over the link.
            //
            color: $navbarLinkColorActive;
          }
        }
      }
    }
  }
}

.btn-navbar .icon-bar
{
  display: block;
  width: 18px;
  height: 2px;
  background-color: #f5f5f5;
  @include border-radius(1px);
  @include box-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

.btn-navbar .icon-bar + .icon-bar
{
  margin-top: 3px;
}

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

#content
{

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

  #page-header
  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 48px;
    min-height: 48px;
    line-height: 48px;
    padding-left: 20px;
    padding-right: 20px;

    border-bottom: 1px solid rgb(198, 198, 199);
    border-bottom: 1px solid rgba(0, 0, 0, 0.45);
    @include gradient-vertical(rgb(248, 248, 249), rgb(252, 251, 252));
    @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.15));
    @include user-select(none);

    h1
    {
      line-height: inherit;
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
                   "Helvetica Neue", sans-serif;
      font-weight: 300;
      font-size: (46px / 2.25);
      color: rgb(76, 76, 76);
      color: rgba(0, 0, 0, 0.7);
      text-shadow: 0 1px 0px rgba(255, 255, 255, 0.9);

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      float: left;

      small
      {
        position: relative;
        font-size: inherit;
        color: rgba(0, 0, 0, 0.4);
        margin-left: 20px;
        line-height: inherit !important;
        height: inherit !important;
        padding-left: 20px;
        font-size: 80%;

        &:before
        {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          content: "";
          border-left: 1px solid rgb(216, 216, 217);
          border-left: 1px solid rgba(0, 0, 0, 0.1);
          border-right: 1px solid rgb(246, 246, 246);
          border-right: 1px solid rgba(255, 255, 255, 0.8);
          margin-right: 20px;
        }

        a
        {
          color: inherit;
          text-decoration: none;
          display: inline;
        }
      }
    }

    // button for toggling action items in responsive layouts
    .btn-actions
    {
      display: none;
      float: right;
      padding: 7px 10px;
      margin-left: 5px;
      margin-right: 0;
      margin-top: 9px;
      // @include buttonBackground($navbarBackgroundHighlight, $navbarBackground);
      @include box-shadow(#{inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075)});

      .icon-bar
      {
        display: block;
        width: 18px;
        height: 2px;
        background-color: #aaa;
        @include border-radius(1px);
        @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.75));
      }

      .icon-bar + .icon-bar
      {
        margin-top: 3px;
      }
    }
    // Override the default collapsed state
    .actions-collapse.collapse
    {
      height: auto;
    }

    ul.actions
    {
      float: right;
      margin-top: 9px;
      list-style: none;
      border: none;
      background: transparent;

      > li
      {
        float: left;
        margin-left: 12px;
      }
    }
  }

  #page-content
  {
    position: absolute;
    top: 49px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    > .alert
    {
      margin: 20px;
      @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.075));
      @include border-radius(3px);
    }
  }
}

// Standard Section (white header, drop shadow, etc) -------------------------

.standard-section
{
  position: relative;
  margin: 20px;
  background-color: rgb(245, 247, 247);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgb(195, 196, 196);
  border: 1px solid rgba(0, 0, 0, 0.2);
  @include border-radius(3px);
  @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.075));

  header
  {
    padding: 10px 20px;
    background-color: white;
    border-bottom: 1px solid rgb(217, 217, 217);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    @include border-radius(2px 2px 0 0);

    h1
    {
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
      font-weight: 300;
      font-size: 20.4px;
      color: rgb(128, 128, 128);
      color: rgba(0, 0, 0, 0.5);
      margin: 0;
    }

    .header-actions
    {
      position: absolute;
      right: 20px;
      top: 20px;

      form, button, a
      {
       float: left;
       display: inline;
       margin-left: 10px;
      }
    }
  }

  .section-content
  {
    padding: 20px;
  }

  table
  {
    margin-bottom: 0;

    th:first-of-type, td:first-of-type
    {
      padding-left: 20px;
    }

    th:last-of-type, td:last-of-type
    {
      padding-right: 20px;
    }
  }

  iframe
  {
    width: 100%;
    height: 240px;
    border: none;
  }

  fieldset
  {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

// Responsive Layout -------------------------------------------------------

// @import "bootstrap-responsive";
// @import "cartilage/responsive";