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

// --------------------------------------------------
// BOOTSTRAP COMPONENTS STYLES
// --------------------------------------------------

// Row Flex
@media (min-width: @screen-md-min) {
  .row-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex: 1 1 auto;

    +.row-flex {
      border-top: 1px solid @hr-border;
    }
  }

  .row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex: 0;
  }

  .row-flex > div[class*='col-'] {
     margin: 0 -.3px; /* hack adjust for wrapping */
  }

  .container-flex > div[class*='col-'] div {
    width: 100%;
  }

  .row-large {
    margin-left: -@grid-gutter-width * 2;
    margin-right: -@grid-gutter-width * 2;

    > div {
      padding-left: @grid-gutter-width * 2;
      padding-right: @grid-gutter-width * 2;

      + div {
        border-left: 1px solid @t3-border-color;
      }
    }
  }

  .container-large {
    padding-right: @grid-gutter-width * 2;
    padding-left: @grid-gutter-width * 2;
    width: @container-lg + @grid-gutter-width*3;
  }

  .flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
  }

  .flex-grow {
    display: flex;
    -webkit-flex: 2;
    flex: 2;
  }
}

.container {
  max-width: 100%;
}

//
// TITLES
// --------------------------------------------------

// Page header
// -----------
.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: 0 0 @line-height-computed;
  border-bottom: 1px solid @page-header-border-color;
}

.page-title,
.page-header h1 {
  line-height: 1;
  margin: 0;
}


// Page Subheader
// --------------
.page-subheader {
  border-bottom: 1px solid @t3-border-color;
  margin: 0 0 @line-height-computed;
  .clearfix();
}

.page-subtitle,
.page-subheader h2 {
  line-height: 1;
  margin: 0;
}

.page-header + .page-subheader {
  margin-top: -@line-height-computed; //If there is page header, then omit the space before page subheader
}


// Article Header
// --------------
.article-header {
}

.article-title,
.article-header h1 {
  margin: 0 0 @line-height-computed 0;
}

// Smaller "Article Title" in Blog and List layout
h2.article-title,
.article-header h2 {
}


// Item Header
// -----------
.item-title {
  font-weight: bold;
}



//
// MASHEAD & JUMBOTRON
// --------------------------------------------------

// Jumbotron (jumbotron.less)
// --------------------------
.jumbotron {

  h1, h2, h3 {
    margin-top: 0;
  }

  p {
    // Remove margin on last paragraph
    &:last-child {
      margin-bottom: 0;
    }
  }

  .container & {
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
  }

  @media screen and (min-width: @grid-float-breakpoint) {
    .container & {
    }
    h1 {
    }
  }

}

// Mashead
// --------
.masthead {
  padding: (@t3-global-padding * 2) 0;
  text-align: center;

  p {
    // Remove margin on last paragraph
    &:last-child {
      margin-bottom: 0;
    }
  }

  @media screen and (min-width: @grid-float-breakpoint) {
    padding: (@t3-global-padding * 4) 0;

    h1 {
      font-size: @font-size-base * 7;
    }

    p {
      font-size: @font-size-base * 2;
    }

    // Bigger mashead btn
    .btn-lg {
      margin-top: @line-height-computed;
      padding: 18px 42px;
      font-size: @font-size-base * 1.5;
    }
  }

}


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



//
// LABELS & BADGES
// --------------------------------------------------

// Labels (labels.less)
// --------------------

.label {

  // Add hover effects, but only for links
  &[href] {
    &:hover,
    &:focus {
    }
  }

  // Empty labels collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }
}

// Colors
// Contextual variations (linked labels get darker on :hover)

.label-default {
}

.label-primary {
}

.label-success {
}

.label-info {
}

.label-warning {
}

.label-danger {
}


// Badges (badges.less)
// --------------------

// Base classes
.badge {

  // Empty badges collapse automatically (not available in IE8)
  &:empty {
    display: none;
  }
}

// Hover state, but only for links
a.badge {
  &:hover,
  &:focus {
  }
}

// Quick fix for labels/badges in buttons
.btn .badge {
  position: relative;
  top: -1px;
}

// Quick fix for labels/badges in page-header- NNTH
.page-header {
  .label, .badge {
    vertical-align: middle;
  }
}



//
// THUMBNAILS  (thumbnails.less)
// --------------------------------------------------

// Mixin and adjust the regular image class
.thumbnail {
  > img {
  }
}

// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
}

// Image captions
.thumbnail .caption {
}



//
// ALERTS (alerts.less)
// --------------------------------------------------

// Base styles
// -------------------------
.alert {

  // Headings for larger alerts
  h4 {
    color: inherit;
  }

  // Provide class for links that match alerts
  .alert-link {
  }

}


// Dismissable alerts
// ------------------
.alert-dismissable {
}


// Alternate styles
// ---------------
.alert-success {
}

.alert-info {
}

.alert-warning {
}

.alert-danger {
}



//
// MEDIA OBJECTS (media.less)
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------

// Common styles
// -------------------------
.media,
.media .media {
}

.media:first-child {
  margin-top: 0;
}

.media-object {
  display: block;
}

.media-heading {
  margin: 0 0 5px;
}


// Media image alignment
// -------------------------
.media {
  > .pull-left {
    margin-right: 10px;
  }
  > .pull-right {
    margin-left: 10px;
  }
}


// Media list variation
// -------------------------
.media-list {
}



//
// LIST GROUP (list-groups.less)
// --------------------------------------------------
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
.list-group {
  // No need to set list-style: none; since .list-group-item is block level
}


// Individual list items
// -------------------------
.list-group-item {

  // first and last items
  &:first-child {
  }
  &:last-child {
  }

  // Align badges within list items
  > .badge {
    float: right;
  }
  > .badge + .badge {
    margin-right: 5px;
  }
}

// Linked list items
a.list-group-item {

  .list-group-item-heading {
  }

  // Hover state
  &:hover,
  &:focus {
  }

  // Active class on item itself, not parent
  &.active,
  &.active:hover,
  &.active:focus {

    // Force color to inherit for custom content
    .list-group-item-heading {
      color: inherit;
    }
    .list-group-item-text {
      color: lighten(@list-group-active-bg, 40%);
    }
  }
}

// Custom content options
// -------------------------
.list-group-item-heading {
}

.list-group-item-text {
}



//
// PANELS (panels.less)
// --------------------------------------------------
// Base class
.panel {
}

// Panel contents
.panel-body {
}


// Optional heading
.panel-heading {
  > .dropdown .dropdown-toggle {
    color: inherit;
  }
}

// Within heading, strip any `h*` tag of it's default margins for spacing.
.panel-title {
  > a {
    color: inherit;
  }
}

// Optional footer (stays gray in every modifier class)
.panel-footer {
}


// Collapsable panels (aka, accordion)
.panel-group {

  .panel {
    + .panel {
    }
  }

  .panel-heading {
    + .panel-collapse .panel-body {
    }
  }

  .panel-footer {
    + .panel-collapse .panel-body {
    }
  }

}


// Contextual variations
.panel-default {
}

.panel-primary {
}

.panel-success {
}

.panel-warning {
}

.panel-danger {
}

.panel-info {
}



//
// WELLS (wells.less)
// --------------------------------------------------
// Base class
.well {
  blockquote {
  }
}

// Sizes
.well-lg {
}

.well-sm {
}



//
// MODALS (modals.less)
// --------------------------------------------------
// Container that the modal scrolls within
.modal {
}

// Shell div to position the modal with bottom padding
.modal-dialog {
}

// Actual modal
.modal-content {
}

// Modal background
.modal-backdrop {
  // Fade for backdrop
  &.fade { .opacity(0); }
  &.in { .opacity(.5); }
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
}
// Close icon
.modal-header .close {
}

// Title text within header
.modal-title {
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
}

// Footer (for actions)
.modal-footer {
}

// Scale up the modal
@media screen and (min-width: @screen-sm-min) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    .box-shadow(0 5px 15px rgba(0,0,0,.5));
  }
}



//
// TOOLTIPS (tooltips.less)
// --------------------------------------------------

// Base class
.tooltip {
}

// Wrapper for the tooltip content
.tooltip-inner {
}

// Arrows
.tooltip-arrow {
}
