/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */
 

// --------------------------------------------------
// COMPONENT ADDONS
// --------------------------------------------------


// FEATURES INTRO
// --------------------------------------------
.features-intro {
  .t3-content {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.row-feature {
  border-top: 1px solid @t3-border-color;
  padding: (@t3-global-padding * 2) 0;
  font-size: @t3-font-size-bigger;
  color: @gray;
  line-height: 1.5;

  // Row Feature in a Page Mass Head
  .page-masthead & {
    padding: (@t3-global-padding * 2) 0;
  }

  // Bigger padding Desktop
  @media screen and (min-width: @screen-md) {
    padding: (@t3-global-padding * 3) 0;
    // Row Feature in a Page Mass Head
    .page-masthead & {
      padding: (@t3-global-padding * 5) 0;
    }
  }

  // Heading
  h1, h2 , h3 {
    line-height: 1.15;
    color: @gray-dark;
  }

  h1 {
    margin-top: 0;
    margin-bottom: (@t3-global-margin * 3);
    font-weight: 300;
    // Bigger font on Tablet / Desktop
    @media screen and (min-width: @screen-sm) {
      font-size: @font-size-h1 * 2;
    }
  }

  h1 + p {
    margin-top: -((@t3-global-margin * 3) - 5px);
  }

  h2 {
    margin-top: 0;
    margin-bottom: @t3-global-margin / 2;
    // Bigger font on Tablet / Desktop
    @media screen and (min-width: @screen-sm) {
      font-size: @font-size-h1;
    }
  }

  h3 {
    margin-top: @t3-global-margin;
    margin-bottom: @t3-global-margin;
    // Bigger font on Tablet / Desktop
    @media screen and (min-width: @screen-sm) {
      font-size: @font-size-h3 * 1.15;
    }
  }

  h3 + p {
    margin-top: -(@t3-global-margin / 2);
  }


  // Row Content
  // ------------------------
  .feature-ct {
    width: 100%;
    padding-top: @t3-global-padding / 2;
  }

  // Content alignment Tablet / Desktop
  @media screen and (min-width: @screen-sm) {
    .pull-left.item-image + .feature-ct {
      width: 50%;
      float: right;
      padding-left: @t3-global-padding;
    }
    .pull-right.item-image + .feature-ct {
      width: 50%;
      float: left;
      padding-right: @t3-global-padding;
    }
  }


  // Generic Rows Styles
  // ------------------------
  &.text-center {
    text-align: center;
  }

  // Alternate
  &.row-feature-alt,
  &:nth-child(even)  {
    background: @gray-lightest;
  }

  // Primary
  &.row-feature-primary {
    background: @brand-primary;
    color: lighten(@brand-primary, 50%);
    h1, h2, h3 {
      color: @white;
    }
    .feature-ct, p {
      color: lighten(@brand-primary, 50%);
    }
    .btn-primary {
      border-color: #fff;
    }
  }

  &.row-feature-primary + .row-feature-primary {
    border-top: 1px solid darken(@brand-primary, 10%);
  }

  // Narrower
  .row-feature-narrow {
    padding-top: @t3-global-padding;
    padding-bottom: @t3-global-padding;
  }

  &:first-child {
    border-top: 0;
  }

 
  // Row image
  // ------------------------
  .item-image {
    width: 100%;
    float: none;
    margin-bottom: @t3-global-margin;
    img {
      max-width: 100%;
    }
  }

  // Image alignment Tablet / Desktop
  @media screen and (min-width: @screen-sm) {
    .pull-left.item-image,
    .pull-right.item-image {
      max-width: 50%;
      min-width: 25%;
      margin-bottom: 0;
    }
    .pull-left.item-image {
      float: left;
      text-align: left;
      padding-right: @t3-global-padding;

    }
    .pull-right.item-image {
      float: right;
      text-align: right;
      padding-left: @t3-global-padding;
    }
  }


  // Row title
  // ------------------------
  .page-header {
    border: 0;
    margin: 0 0 @t3-global-margin;
    padding: 0;
  }

  // Jumbotron
  .jumbotron {
    background: transparent;
    position: relative;
    margin-top: 0;
    margin-bottom: @t3-global-margin;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;

    // Bigger margin on Tablet / Desktop
    @media screen and (min-width: @screen-sm) {
      margin-bottom: @t3-global-margin * 3;
    }

  }

  // Jumbotron masshead
  .masthead {
  }


  // Gallery
  // -------------------------
  .gallery {
    .thumbnail {
      border: 0;
      padding: 0;
      a {
        display: block;
        border: 1px solid @t3-border-color;
        padding: 3px;
        .transition(border-color 0.2s ease-in);
        img {
          width: 100%;
          padding: 0;
        }
        // Hover states
        &:hover, &:focus, &:active {
          border-color: darken(@t3-border-color, 20%);
          img {
            opacity: .7;
          }
        }
      }
    }
  }

// End
}




// SUPPORT POLICY
// ---------------------------------------
.support-policy {

  // Layout
  // ------------------
  .row-support-policy {
    margin-bottom: @t3-global-margin;
  }


  // The Policy
  // -------------------
  .policy-item {
    margin-bottom: @t3-global-margin;
    border: 1px solid @t3-border-color;

    // Title
    .col-type {
      position: relative;
      height: 100px;
      border-bottom: 1px solid @t3-border-color;
      background: @gray-lightest;
      h3 {
        position: absolute;
        bottom: 10px;
        left: 20px;
      }
    }

    // Detail
    .col-detail {
      height: 200px;
      padding: @t3-global-padding;
    }

    // Level
    .col-level {
      height: 80px;
      background: @gray-dark;
      color: #fff;
      position: relative;

      .face,
      .count-up,
      > strong {
        height: 80px;
        line-height: 80px;
      }

      .level-info {
        width: 160px;
        position: absolute;
        left: 0;
        bottom: 0;
        // Face exprestion
        .face {
          background-image: url(../images/emoticons.png);
          background-repeat: no-repeat;
          background-color: rgba(0,0,0,.35);
          display: table-cell;
          width: 80px;
          border-right: 1px solid rgba(0,0,0,.2);
        }
        // Percent
        .count-up {
          width: 80px;
          border-right: 1px solid rgba(0,0,0,.2);
          background-color: rgba(0,0,0,.15);
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          font-size: @font-size-large;
          font-weight: bold;
        }
      }

      strong {
        width: 100%;  
        color: @white;
        display: block;
        float: left;
        font-weight: bold;
        padding-left: 180px;
        font-size: @font-size-large;
      }

      // Levels
      &.level-1 {
        strong { background: @green; }
        .face { background-position: 0px 0px; }
      }

      &.level-2 {
        strong { background: darken(@green,10%); }
        .face { background-position: 0px -80px; }
      }

      &.level-3 {
        strong { background: @yellow; }
        .face { background-position: 0px -160px; }
        }

      &.level-4 {
        strong { background: darken(@yellow,10%); }
        .face { background-position: 0px -240px; }
      }

      &.level-5 {
        strong { background-color: @orange; }
        .face { background-position: 0px -320px; }
      }

      &.level-6 {
        strong { background: @red; }
        .face { background-position: 0px -400px; }
      }

    }
  // End Policy Item
  }


  // Row hover
  // --------------------------------
  &:hover {
    background: @white;
    border-color: @gray-lighter;

    .level-info .face {
      top: -70px;
    }

    .level-info .count-up {
      bottom: 0;
    }
  }

  // Style 2

  &.style2 {
    margin-bottom: @t3-global-margin * 3;
  }

  .row-heading {
    background: @gray-dark;
    color: @white;
    overflow: hidden;
    @media screen and (min-width: @screen-sm) {
      display: table;
      width: 100%;
    }

    & > div {
      border-right: 1px solid lighten(@gray-dark, 10%);
      font-size: @t3-font-size-smaller;
      font-weight: bold;
      padding: @t3-global-padding;

      // Bigger margin on Tablet / Desktop
      @media screen and (min-width: @screen-sm) {
        font-size: @t3-font-size-big;
        display: table-cell;
      }
    }

  }

  .row-body {
    border-left: 1px solid @t3-border-color;
    margin-bottom: @t3-global-margin;
    @media screen and (min-width: @screen-sm) {
      display: table;
      width: 100%;
      margin-bottom: 0;
    }

    & > div {
      border-right: 1px solid @t3-border-color;
      border-bottom: 1px solid @t3-border-color;
      padding: (@t3-global-padding / 2) @t3-global-padding;
      vertical-align: middle;
      // Bigger margin on Tablet / Desktop
      @media screen and (min-width: @screen-sm) {
        display: table-cell;
        float: none;
      }
    }

    .col-type {
      background: @gray-dark;
      color: @white;
      font-size: @t3-font-size-bigger;
      font-weight: bold;
      // Bigger margin on Tablet / Desktop
      @media screen and (min-width: @screen-sm) {
        background: transparent;
        color: @text-color;
      }
    }

    .col-level {
      font-size: @t3-font-size-bigger * 2;
      text-align: center;
    }

    .col-status {
      border-bottom: 0;
      .face {
        background-image: url(../images/emoticons.png);
        background-repeat: no-repeat;
        display: block;
        height: 80px;
        margin: 0 auto;
        width: 80px;
      }

      strong {
        color: @white;
        display: block;
        padding: 3px 0;
        text-align: center;
      }
    }

    &.level-1 .col-status {
      background: @green;

      .face {
        background-position: 0px 0px;
      }
    }

    &.level-2 .col-status {
      background: lighten(@green,4%);

      .face {
        background-position: 0px -80px;
      }
    }

    &.level-3 .col-status {
      background: lighten(@green,8%);
      .face {
        background-position: 0px -160px;
      }
    }

    &.level-4 .col-status {
      background: lighten(@green,12%);
      .face {
        background-position: 0px -240px;
      }
    }

    &.level-5 .col-status {
      background: lighten(@green,16%);
      .face {
        background-position: 0px -320px;
      }
    }

    &.level-6 .col-status {
      background: lighten(@green,20%);
      .face {
        background-position: 0px -400px;
      }
    }
  }

  .row-alt {
    background: @gray-lightest;
  }

  .support-yes {
    color: @green;
  }

  .support-no {
    color: darken(@gray-lighter, 5%);
  }

// End
}


// PRICING TABLE
// ---------------------------------------
.pricing-table {
  padding-top: @t3-global-padding * 2;
  padding-bottom: @t3-global-padding * 5;

  .col {
    margin-bottom: @t3-global-margin * 2;

    @media (min-width: @screen-md) {
      margin-bottom: 0;
    }

    // Remove padding of the column
    // ----------------------------
    &.no-padding {
      @media (min-width: 768px) {
        padding: 0;
      }      
    }

    &.shadow {
      @media (min-width: 768px) {
        box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
      }
    }


    // Typography's Pricing table
    // --------------------------
    .big-number {
      display: inline-block;
      font-size: @font-size-base * 5;

      sup {
        font-size: @font-size-base * 2;
        top: -1em;
      }
    }

    .btn {
      font-size: @font-size-base + 6;
      padding: (@t3-global-padding / 2) @t3-global-padding;
    }


    // Header of column
    // ----------------
    .col-header {
      background: @gray;
      color: @white;
      padding: (@t3-global-padding / 2) @t3-global-padding;
    }


    // Body of column
    // --------------
    ul {
      border: 1px solid @gray-lighter;
      border-bottom: 0;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        border-bottom: 1px solid @gray-lighter;
        font-size: @font-size-base + 2;
        padding: (@t3-global-padding / 2) @t3-global-padding;
        text-align: center;

        &.row1 {
          background: @gray-lightest;
        }

        i {
          color: @green;
          font-size: @font-size-base + 4;
        }

        &.no i {
          color: @red;
        }


        &.no {
          color: @gray-light;
          text-decoration: line-through;
        }
      }
    }


    // Footer of column
    // ----------------
    .col-footer {
      background: @gray-lighter;
      border: 1px solid darken(@gray-lighter, 10%);
      padding: @t3-global-padding;
    }

  }

  
  // Feature column
  // --------------
  .col-feature {
    z-index: 200;

    // Larger margin on Tablet / Desktop
    @media screen and (min-width: @screen-md) {
      margin-top: -@t3-global-margin;
    }   

    .col-header {
      background: @brand-primary;
      padding: ((@t3-global-padding / 2) + (@t3-global-margin / 2)) @t3-global-padding;
    }
  }


  // PRICING TABLE ( Style 2 )
  // -------------------------
  &.style2 {

    // First column
    .col:first-child {
      .col-header {
        border-radius: 5px 0 0 0;
      }

      .col-footer {
        border-radius: 0 0 0 5px;
      }
    }

    // Last column
    .col:last-child {
      .col-header {
        border-radius: 0 5px 0 0;
      }

      .col-footer {
        border-radius: 0 0 5px 0;
      }
    }

    .col-feature {
      border-radius: 5px;

      .col-header {
        border-radius: 5px 5px 0 0;
      }

      .col-footer {
        border-radius: 0 0 5px 5px;
      }
    }

  }

}


// OUR TEAM
// ---------------------------------------
.our-team {
  .lead {
    margin-bottom: @t3-global-margin * 3;
  }

  .thumbnail {
    text-align: center;
    border: 0;
    padding: 0 @t3-global-padding;

    .caption {
      padding-bottom: @t3-global-padding;
    }

    h3 {
      margin-bottom: 5px;
    }

    .btn {
      border-radius: 50%;
      height: 32px;
      line-height: 32px;
      margin: 0 2px;
      padding: 0;
      text-align: center;
      width: 32px;

      &:hover {
        background: @brand-primary;
        border-color: @brand-primary;
        color: @white;
      }
    }
  }

  
}


// MISC
// --------------------------------------------

// Video Wrapper
// -------------
// Use to wrap the Video and make it responsive
.video-wrapper {
  position: relative;
  padding-bottom: 51%;
  padding-top: 30px;
  height: 0;
  // The video
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}