/** 
 *------------------------------------------------------------------------------
 * @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 
 *------------------------------------------------------------------------------
 */


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


// ---------------------------------------------------------
// HOME SPOTLIGHTS
// ---------------------------------------------------------

// Spotlight 1
// -----------
.home .t3-sl-1 {
  padding: 0;

  // jumbotron
  .jumbotron {
    #gradient > .radial(@white, @grayLighter);
    border-bottom: 1px solid @T3borderColor;
    //jumbotron btn
    .btn-large {
      font-size: @baseFontSize * 1.75;
      padding: 18px ((@baseFontSize * 1.75) + 20px);
    }
  }

  // social buttons
  .t3-social {
    background: @grayLighter;
    padding: @T3globalPadding 0;

    .t3-social-btns {
      margin: 0;
      height: 20px;
      text-align: center;
    }

    .t3-social-btns li {
      display: inline-block;
      margin: 0 10px;
      height: 20px;
    }

  }

}


// Spotlight 1 (Inverted)
// ----------------------
.T3HomeSpotlight1() when (@T3SpotlightsInverted = 1) {

  // Begin: Mixin Styling
  color: @grayLighter;
  // jumbotron
  .jumbotron {
    #gradient > .radial(@grayDarker, @grayDarker);
    h1 {
      color: @white;
    }
  }

  // End: Mixin Styling
}

.T3HomeSpotlight1() when (@T3SpotlightsInverted = 0) {
  // Leave blank here because we will use the default style.
}

// Calling the styles
.home .t3-sl-1 {
  .T3HomeSpotlight1
}


// Spotlight 2
// -----------
.home .t3-sl-2 {
  text-align: center;
  p {
    font-size: @T3biggerFontSize;
    line-height: @baseLineHeight + 2px;
  }
}


// Spotlight 3 & 4
// ---------------
.home .t3-sl-3 p img {
  margin-bottom: @T3globalMargin;
}

.home .t3-sl-3,
.home .t3-sl-4 {
  border-top: 1px solid @T3borderColor;
  text-align: center;

  p {
    font-size: @T3biggerFontSize;
    line-height: @baseLineHeight + 2px;
  }

  // jumbotron
  .jumbotron {
    padding-top: 0;
    h1 {
      margin-bottom: @T3globalMargin / 2;
      margin-top: 0;
    }
    p {
      font-size: @baseFontSize * 1.5;
      line-height: 1.275;
      color: @grayLight;
    }
  }
}


// Spotlight 5
// -----------
.home .t3-sl-5 {
  background: @grayLighter;
  border-top: 1px solid @T3borderColor;
  padding: 0;

  // jumbotron
  .jumbotron {
    //jumbotron btn
    .btn-large {
      font-size: @baseFontSize * 1.75;
      padding: 18px ((@baseFontSize * 1.75) + 20px);
      //width: 269px;
    }
  }

  // arrow
  .section-arrow-alt {
    background: url("@{T3ImagePath}/arrow-section-alt.png") no-repeat center -1px @grayLighter;
    width: 37px;
    height: 19px;
    position: absolute;
    top: -1px;
    left: 50%;
    margin-left: -19px;
  }
}


// Spotlight 5 (Inverted)
// ----------------------

.T3HomeSpotlight5() when (@T3SpotlightsInverted = 1) {

  // Begin: Mixin Styling
  background: @grayDarker;
  border-bottom: 1px solid @T3borderColor;
  color: @grayLighter;

  // arrow
  .section-arrow-alt {
    display: none;
  }

  // End: Mixin Styling
}

.T3HomeSpotlight5() when (@T3SpotlightsInverted = 0) {
  // Leave blank here because we will use the default style.
}

// Calling the styles
.home .t3-sl-5 {
  .T3HomeSpotlight5
}