/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2017 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 
 *------------------------------------------------------------------------------
 */

// ---------------------------------------------------------
// MAIN TEMPLATE STYLES
// ---------------------------------------------------------

// 
// HEADER
// ---------------------------------------------------------

// Logo
// ----
.logo {
  position: absolute;
  top: 0;
  left: 0;  
  padding: 0;
  margin: 0;

  a {
    background: transparent;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    margin: 0;
  }

  &:hover a,
  a:hover,
  a:active,
  a:focus {
    background: @navbar-default-border;
    color: @navbar-default-link-hover-color;
    text-decoration: none;
  }

}

// Different Style on Tablets / Desktop
@media screen and (min-width: @grid-float-breakpoint) {
  .logo {
    position: static;
    a {
      background: @navbar-default-border;
    }

    &:hover a,
    a:hover,
    a:active,
    a:focus {
      color: @navbar-default-link-hover-color;
    }
  }
}


// Logo Position when Off-Canvas enable
.off-canvas-toggle + .container .navbar-header .logo {
  left: @navbar-height;
  border-left: 1px solid @navbar-default-border;
  // Remove border on Tablets / Desktop
  @media screen and (min-width: @grid-float-breakpoint) {
    border-left: 0;
  }
}


// Logo Image
// ----------
.logo-image {
  > a {
    max-width: 160px;
    max-height: 55px;

    > img {
      max-width: 100%;
    }
  }

  // Hide sitename and slogan
  span, small {
    display: none;
  }
}


// Logo Text
// ----------
.logo-text {
  text-transform: uppercase;
  font-size: @font-size-large;

  a {
    line-height: @navbar-height;
    padding: 0 @t3-global-padding;
  }

  &:hover a,
  a:hover,
  a:active,
  a:focus {
  }

  // Taglines
  .site-slogan {
    display: none;
  }

}



// Head Search
// -----------
.head-search {
  height: @navbar-height;
  position: absolute;
  right: 0;
  margin: 0;
  z-index: 1000;

  form {
    margin: 0;
  }
  
  label {
    display: none;
  }
  
  .search {
    background: @navbar-default-bg;
    border-left: 1px solid @navbar-default-border;
    border-right: 1px solid @navbar-default-border;
    position: relative;
    // Has background on Tablets / Desktop
    @media screen and (min-width: @grid-float-breakpoint) {
      background: @navbar-default-border;
    }
    // Place a search icon
    .fa-search {
      color: @navbar-default-color;
      content: "\f002";
      display: block;
      font-family: "FontAwesome";
      position: absolute;
      left: 20px;
      top: 19px;
      z-index: 1;

      &:hover {
        z-index: 0;
      }
    }
  }
  
  .form-control {
    border: 0;
    background: transparent;
    color: @navbar-default-color;
    height: @navbar-height - 1;
    line-height: @navbar-height - 20;
    position: relative;
    margin: 0;
    padding: 10px 15px 10px 40px;
    width: 0;
    .transition(width .2s);
    // Has background on Tablets / Desktop
    @media screen and (min-width: @grid-float-breakpoint) {
      height: @navbar-height;
    }
    // States
		&:hover, &:active, &:focus {
      color: @navbar-default-link-hover-color;
      box-shadow: none;
    }

    &:active, &:focus {
      width: 180px;
    }

    // Fix Auto Fill Search
		&:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #0067a2 inset;
      -webkit-text-fill-color: @white;
    }
		
		&::-moz-placeholder {
			color: @white;
		}
  }

  // End

  // Compatiblle J4 J5 - Smart  Search
  .mod-finder {

    input {
      z-index: 10;
    }
    
    > .awesomplete {
      position: relative;
      &::after {
        content: '\f002';
        color: #bbe6ff;
        display: inline-block;
        font-family: "FontAwesome";
        height: 16px;
        width: 16px;
        position: absolute;
        top: 19px;
        margin-left: 20px;
      }
    }

    .mod-finder__search {
      input {
        width: 100px;
        padding: 10px 15px;

        @media screen and (max-width: 576px){
          width: 50px;
        }
        
        &:focus {
          width: 200px;
        }
      }
    }
  }
}

// If there is a Navbar Toggle, then replace the Search
.navbar-toggle + .head-search {
  right: @navbar-height;
  max-width: 57px;

  @media screen and (max-width: @grid-float-breakpoint-max) {
		max-width: inherit;
    &:hover, &:focus, &:active {
      max-width: none;

      .form-control { 
        width: 180px;
      }
    }
  }
}

// Absolute position to right on Tablets / Desktop
@media screen and (min-width: @grid-float-breakpoint) {
  .head-search,
  .navbar-toggle + .head-search {
    right: @grid-gutter-width / 2;
    top: 0;
    max-width: none;
  }
}

// NAV
.nav {
  .open > a,
  .open > a:hover,
  .open > a:focus {
  }
}

.chzn-container-multi .chzn-choices li.search-field input[type="text"] {
  height: 30px;
}

.chzn-container  {
  max-width: 100%;
  .chzn-single {
    max-width: 260px;
  }
}

.ie8 {
  .radio.t3onoff {
    border: 0;
  }

  label.on, label.off {
    border: 1px solid @t3-border-color;
  }
}

.pagination > li > a, .pagination > li > span {
  margin-bottom: (@t3-global-margin/2);
}


// MISC 
#eblog-wrapper {
  line-height: 1.625;
}

.com_weblinks {
  .weblink-categories {
    .page-header.item-title .btn {
      padding: 5px;
      
      .fa-minus{
        display: block;
      }

      .fa-plus {
        display: none;
      }
    }
    
    .page-header.item-title .btn.collapsed {
      .fa-minus {
        display: none;
      }

      .fa-plus {
        display: block;
      }
    }
  }
}


// ---------------------------------------------------------
// SPOTLIGHTS
// ---------------------------------------------------------
.t3-spotlight {
  display: -webkit-flex; 
  display: flex; 
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap;

  > div {
    @media screen and (max-width: @screen-xs-max) {
      margin-bottom: @t3-global-margin;
    }
  }
}

.t3-spotlight:not(:root:root) { 
  @media screen and (min-width: @screen-md-min) {
    .col-md-3 {
      width: 24.9%;
    }

    .col-md-4 {
      width: 33.2%;
    }

    .col-md-6 {
      width: 49.8%;
    }

    .col-md-12 {
      width: 100%;
    }
  }

  @media screen and (max-width: @screen-sm-max) {
    .col-sm-3 {
      width: 24.9%;
    }

    .col-sm-4 {
      width: 33.2%;
    }

    .col-sm-6 {
      width: 49.8%;
    }

    .col-sm-12 {
      width: 100%;
    }
  }
  
  @media screen and (max-width: @screen-xs-max) {
    .col-xs-3 {
      width: 24.9%;
    }

    .col-xs-4 {
      width: 33.2%;
    }

    .col-xs-6 {
      width: 49.8%;
    }

    .col-xs-12 {
      width: 100%;
    }
  }
} 



.t3-sl {
  padding-bottom: @t3-global-padding * 2;
  padding-top: @t3-global-padding * 2;

  @media screen and (max-width: @screen-xs-max) {
    padding-bottom: @t3-global-padding;
    padding-top: @t3-global-padding;
  }

  // Modules
  .t3-module {
    margin-bottom: 0;
    // If there are 2 modules, then add proper margin
    + .t3-module {
      margin-top: @t3-global-margin;
    }
  }

  // Larger padding in Tablet / Desktop
  @media screen and (min-width: @screen-sm) {
    padding-bottom: @t3-global-padding * 3;
    padding-top: @t3-global-padding * 3;
  }
}

// Spotlight 1
// -----------
.t3-sl-1 {
  border-bottom: 1px solid @t3-border-color;
}

// Spotlight 2
// -----------
.t3-sl-2 {
}

// Spotlight 3
// -----------
.t3-sl-3 {
}

// Spotlight 4
// -----------
.t3-sl-4 {
}



// ---------------------------------------------------------
// MAIN BODY
// ---------------------------------------------------------
.t3-mainbody {
  padding-top: @line-height-computed ;
  padding-bottom: @line-height-computed;
}

// Content
// -------
.t3-content {
  padding-top: @line-height-computed ;
  padding-bottom: @line-height-computed;
}

// Sidebars
// --------
.t3-sidebar {
  padding-top: @line-height-computed;
  padding-bottom: @line-height-computed;
}

.t3-sidebar-1 {
}

.t3-sidebar-2 {
}



// ---------------------------------------------------------
// FOOTER
// ---------------------------------------------------------
.t3-footer {
  background: @t3-footer-background;
  color: @t3-footer-text-color;
  .clearfix();

  // small
  small {
    display: block;
    font-size: 100%; //Use global footer font size.
  }

  // links
  a {
    // Link States
    &:hover, &:active, &:focus {
    }
  }

}

// Footer Spotlight
// ----------------
.t3-footer-sl {
  padding: @t3-global-padding 0;
  .clearfix();

  // Larger padding on Tablet / Desktop
  @media screen and (min-width: @screen-sm) {
    padding: (@t3-global-padding * 2) 0;
  }

  // Footer Spotlight Modules
  .t3-module {
    background: @t3-footer-module-background;
    color: @t3-footer-module-text-color;
    margin-top: @line-height-computed / 2;
    margin-bottom: @line-height-computed / 2;

    .module-title {
      color: @t3-footer-module-title-color;
      font-size: @font-size-large;
      margin-bottom: @line-height-computed / 2;
    }

    ul {
      list-style: none;
      margin-left: 0;
      margin-bottom: 0;
      padding-left: 0;

      > li {
        line-height: 24px;
        // links
        > a {
          color: @t3-footer-module-text-color;
          // Link States
          &:hover, &:active, &:focus {
            color: @t3-footer-module-text-color;
          }
        }
      }
    }

  }

}

// Back to Top
// -----------
#back-to-top {
  z-index: 999;
  position: fixed;
  right: @t3-global-margin;
  top: auto;

  &.affix {
    bottom: @t3-global-margin * 2;
  }

  a {
    outline: none;
  }

  i {
    font-size: @font-size-large + 10;
  }
}

// Copyright
// ---------
.t3-copyright {
  border-top: 1px solid @t3-border-color;
  font-size: @font-size-small;
  padding: (@t3-global-padding * 2) 0 (@t3-global-padding * 4);
  .clearfix();
  small {
    margin-bottom: 5px;
  }
}

.copyright {
    margin-bottom: @line-height-computed;
}

.poweredby {
  .clearfix();

  // Align right on Tablet / Desktop
  @media screen and (min-width: @screen-sm-max) {
    text-align: right;
  }

  .t3-logo,
  .t3-logo-small {
    display: inline-block;
  }
}

.mod-preview-info {
  z-index: 2000;
}


// Easyblog
// ------------------
#ezblog-body {
  .blog-text p,
  .blog-text li {
    line-height: 1.625;
  }
}

