/**
 * $JA#COPYRIGHT$
 */
 
// VARIABLES & MIXINS
// ------------------
@import "../vars.less"; // Modify this for custom colors, font-sizes, etc


//
// DEMO TYPOGRAPHY
// --------------------------------------------------------
// Used for Typography Page. Removed if you don't want it :)

.docs-section {
  margin-bottom: @t3-global-margin * 3;
  font-size: @font-size-base;

  .page-header {
    border-bottom: 1px solid @t3-border-color;
    margin-bottom: @t3-global-margin*2;
    padding-bottom: @t3-global-margin;

    h1 {
      font-size: 36px;
      margin: 0;

      @media (min-width: @screen-sm) {
        font-size: @font-size-h1;
      }
    }
  }

  > h2 {
    margin-bottom: @t3-global-margin;
  }

  > h3 {
    color: @gray-dark;
    margin-bottom: @t3-global-margin;
  }

  .dropdown-menu {
    padding: 0;
    margin: 0;

    li {
      padding: 0 @t3-global-padding;

      &:first-child {
        padding-top: (@t3-global-padding / 2);
      }

      &:last-child {
        padding-bottom: (@t3-global-padding / 2);
      }
    }
  }

  .panel-body {
    padding: 15px;
  }
}


// Core Typo
// ----------------
.example-type {
  h1,h2,h3,h4,h5,h6 {
    margin: @t3-global-margin 0;
  }
}


// Color Swatches
// ----------------
.example-colors {
  .swatch-item {
    width: 100%;
    min-height: 100px;
    position: relative;
    background: @gray-dark;
    color: @white;
    margin-bottom: @t3-global-margin;

    @media (min-width: @screen-lg) {
      min-height: 123px;
    }

    dl {
      width: 100%;
      position: absolute;
      bottom: 0;
      padding: 20px;
      margin: 0;
      font-size: 15px;
    }
  }
  // The colors
  .color-brand-primary {
    background: @brand-primary;
  }
  .color-brand-secondary {
    background: @brand-secondary;
  }
  .color-brand-success {
    background: @brand-success;
  }
  .color-brand-danger {
    background: @brand-danger;
  }
  .color-brand-warning {
    background: @brand-warning;
  }
  .color-brand-info {
    background: @brand-info;
  }
  // TGrayscale Levels
  .color-gray-darker {
    background: @gray-darker;
  }
  .color-gray-dark {
    background: @gray-dark;
  }
  .color-gray {
    background: @gray;
  }
  .color-gray-light {
    background: @gray-light;
    color: @gray-dark;
  }
  .color-gray-lighter {
    background: @gray-lighter;
    color: @gray-dark;
  }
  .color-gray-lightest {
    background: @gray-lightest;
    color: @gray-dark;
  }
}


// Forms
// ----------------
.example-buttons,
.example-inputs {
  .btn,
  .form-control {
    box-shadow: none;
    width: 100%;
    margin-bottom: @t3-global-margin;
  }

  ul {
    padding: 0;
    list-style: none;

    li {

      // Left align the logo on  Tablets / Desktop
      @media screen and (min-width: @screen-sm) {
        float: left;
        width: 30%;
        padding-right: @t3-global-padding;
      }
    }
  }
}


// Navigation
// ----------------
.example-navigation {
  .tab-content {
    padding: @t3-global-padding 0;
  }

  h3 {
    color: @gray-dark;
    margin: 0 0 26px;
  }
}


// Typography
// ----------------
.example-type {

  h1,
  h2 {
    margin-top: 0;
    small {
      display: block;
    }
  }

  h1 {
    margin-top: 0;
  }
}
