// --------------------------------------------------------------
// # Copyright (C) joomla-monster.com
// # License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
// # Website: http://www.joomla-monster.com
// # Support: info@joomla-monster.com
// ---------------------------------------------------------------

// ==========================================================================
// JOOMLA COMPONENT styles
// ==========================================================================
  
// Headings
// --------------------------  
  
//page headings
h1.componentheading, //extension headings support
.tag-category > h1, //tag category
.page-header > h1, //global
.content-category > h1, //category-list
.categories-list > h1, //categories-list
.blog-featured > h1, //featured contacts
.contact-category > h1, //contact category
.contact > h1, //single contact
.newsfeed-category > h1, //newsfeed category
h1.page-title, //search form
.finder > h1, //smart search
.weblink-category > h1, //weblink category
.edit > h1 //submit weblink 
{
  color: @JMarticleFontColor;
  font-weight: @JMarticleFontWeight;
  margin: 0 0 30px;
  text-transform: @JMarticleTextTransform;
}  

//component headings  
h2.item-title, //featured
.tag-category > h2, //tag category
.page-header > h2, //global
.content-category > h2, //category-list category
.blog > h2, //blog category
.cat-children > h3, //category children
.contact-category > h2, //contact category
.weblink-category > h2, //weblink category
.newsfeed > h2, //single newsfeed
.newsfeed-category > h2, //newsfeed category 
.weblink-category > h2, //weblink category
.contact > h3, //contact headings
.feed > h2 //feed display module
{
  font-family: @JMarticleTitleFontFamily;
  font-size: @JMarticleTitleFontSize;
  font-weight: normal;
  color: @JMarticleFontColor;
  margin: 0 0 10px;
  display: block;
  text-transform: @JMarticleTextTransform;
  a {
    color: @JMarticleFontColor;
    &:hover {
      text-decoration: none;
      color: @JMstyle1;
    }
  }
}

//accordion etc. headings
h3.page-header {
  font-size: 1em;
  line-height: @JMbaseLineHeight;
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid @JMcomponentBorder;
  padding-bottom: 10px;
  margin-bottom: 10px;
  text-transform: @JMarticleTextTransform;
  color: @JMarticleFontColor;
  > .btn-mini {
    padding: 3px 6px;
    [class^="icon-"], 
    [class*=" icon-"] {
      margin-top: 0;
    }
  }
  > .badge {
    margin: 0 5px;
    vertical-align: middle;
  }
  a:not(.btn) {
    color: @JMarticleFontColor;
    &:hover {
      text-decoration: none;
      color: @JMstyle1;
    }
  }
}

// archived articles
// --------------------------

.archive {
  form {
    //filter options
    .filters {
       margin-bottom: @JMbaseSpace;
    }
    //items
    #archive-items > div {
      margin-bottom: @JMbaseSpace;
    }
    //pagination
    .pagination .counter {
      float: right;
    }
    //createdby same as article details
    .page-header .createdby {
      font-size: 0.9em;
      color: @JMbaseFontColorDisabled;
    }
  }
}

// category blog
// --------------------------

.blog,
.blog-featured {
  //category description
  .category-desc {
    margin-bottom: @JMbaseSpace;
  }  
  //leading article and rows
  .items-leading div[class*="leading-"],
  .items-row {
    margin-bottom: @JMbaseSpace;
  }
  .items-leading .leading:last-child,
  .items-row:last-child {
    margin-bottom: 0;
  }
  //more items
  .items-more {
    margin-bottom: @JMbaseSpace;
  }
  //category children
  .cat-children {}
}

//editor image
figure.pull-center,
figure.pull-left,
figure.pull-right {
  margin: 0 0 10px;
  max-width: 100%;
  a {
    color: @JMbaseFontColor;
    text-decoration: none;
  }
}

figure.pull-center {
  display: inline-block;
  position: relative;
  left: 50%;
  .translateX(-50%);
}

figure.pull-left {
  margin-right: @JMbaseSpace;
}

figure.pull-right {
  margin-left: @JMbaseSpace;
}

//item image
.item-image {
  margin-bottom: 10px;
  max-width: 100%;
  a {
    color: @JMbaseFontColor;
    text-decoration: none;
  }
}

.pull-none.item-image {
  text-align: center;
}

.pull-left.item-image {
  margin-right: @JMbaseSpace;
}

.pull-right.item-image {
  margin-left: @JMbaseSpace;
}

//captions
div.img_caption {
  margin: 0 auto;
  max-width: 100%;
}

figcaption,
p.img_caption {
  text-align: center;
  background: @grayLighter;
  padding: 5px;
}

//readmore
.readmore {
  margin: 0;
  text-align: right;
  > a.btn {
    margin: 10px 0 0;
    font-size: @JMreadmoreFontSize;
    line-height: @JMreadmoreLineHeight;
    padding: 13px 50px;
    .icon-chevron-right {
      display: none;
    }
  }
}

// category list
// --------------------------

.category-list {
  .category-desc {
    margin-bottom: @JMbaseSpace;
  }
  //category children
  .cat-children {
    margin-top: @JMbaseSpace;
  }
}

// list all categories
// --------------------------

.categories-list { 
  .collapse {
    padding: 0 0 0 @JMbaseSpace;
  }
  .category-desc {
    margin-bottom: @JMbaseSpace;
  }
}

// single article
// --------------------------

//article details  
.article-info {
  font-size: 0.9em;
  color: @JMbaseFontColorDisabled;
  margin: 0 0 20px;
  ~ .article-info {
    margin: 0; 
  }
  .article-info-term {
    display: none;
  }
  dd {
    margin: 0;
  }
}

//rating
.content_rating {
  margin-bottom: 20px;
}

//voting
.content_vote {
  label {
    margin-right: 5px;
  }
}

//icons
.icons .pull-right {
  margin-bottom: 20px;
}

//tags
.tags {
  margin: 0 0 20px;
  display: inline-block;
  width: 100%;
  > span {
    float: left;
    margin-right: 5px;
    .label {
      display: block;
    }
  }
}

// Template Options
// --------------------------

.jm-alert {
  display: block;
}

#templates-form .form-horizontal .control-label {
  float: none;
  width: auto;
  text-align: inherit;
}

#templates-form .form-horizontal .controls {
  margin-left: 0;
  margin-right: 0;
}

// List Contacts in a Category
// --------------------------

.contact-category {
  //contact list
  ul.list-striped > li {
    border-bottom: 1px solid @JMcomponentBorder;
    padding: 10px 0;
    > .pull-right {
      margin-left: 10px;
    }
    .list-title {
      a {
        font-weight: 600;
        text-transform: uppercase;
        color: @JMarticleFontColor;
        &:hover {
          text-decoration: none;
          color: @JMstyle1;
        }
      }
    }
    > span {
      display: block;
    }
  }
  //subcategories titles
  h4.item-title {
    font-size: 1em;
    line-height: @JMbaseLineHeight;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    text-transform: @JMarticleTextTransform;
    color: @JMarticleFontColor;
    a {
      color: @JMarticleFontColor;
      &:hover {
        text-decoration: none;
        color: @JMstyle1;
      }
    }
  }
}

// Single Contact
// --------------------------

.contact {
  .contact-form {
    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      max-width: 400px;
    }
  }
  dl.contact-address {
    margin: @JMbaseSpace 0;
  }
}

// List Newsfeeds in a Category
// --------------------------

.newsfeed-category {
  ul.list-striped > li {
    .list-title {
      a {
        font-weight: 600;
        text-transform: uppercase;
        color: @JMarticleFontColor;
        &:hover {
          text-decoration: none;
          color: @JMstyle1;
        }
      }
    }
  }
  .cat-children {
    > ul > li {
      border-bottom: 1px solid @JMcomponentBorder;
      padding: 10px 0;
      background: none;
      .item-title {
        display: block;
        margin-bottom: 10px;
        a {
          font-weight: 600;
          text-transform: uppercase;
          color: @JMarticleFontColor;
          &:hover {
            text-decoration: none;
            color: @JMstyle1;
          }
        }
      }
      > ul {
        margin-top: 10px;
        border-top: 1px solid @JMcomponentBorder;
        > li {
          background: none;
          border-bottom: 1px solid @JMcomponentBorder;
          padding: 10px 0;
          margin-left: @JMbaseSpace;
          &.last {
            border-bottom: none;
          }
        }
      }
    }
    .newsfeed-count {
      display: inline-block;
      width: 100%;
      margin-bottom: 0;
      dt,
      dd {
        float: left;
      }
    }
  }
}

// Single News Feed
// --------------------------

.newsfeed {
  > ol {
    list-style: none;
    margin: 0;
    > li > h3 {
      font-size: 1em;
      a {
        font-weight: 600;
        text-transform: uppercase;
        color: @JMarticleFontColor;
        &:hover {
          text-decoration: none;
          color: @JMstyle1;
        }
      }
    }
  }
  .feed-description,
  .feed-item-description {
    margin-bottom: @JMbaseSpace;
  }
  .feed-item-description {
    img[align="right"] {
      margin-left: @JMbaseSpace;
      margin-bottom: 10px;
    }
    img[align="left"] {
      margin-right: @JMbaseSpace;
      margin-bottom: 10px;
    }
  }
}

//images
.img-intro-left {
  float: left;
  margin-right: @JMbaseSpace;
  margin-bottom: 10px;
}  

.img-intro-right {
  float: right;
  margin-left: @JMbaseSpace;
  margin-bottom: 10px;
}  

.img-intro-none {
  text-align: center;
  margin-bottom: 10px;
}  

// Search Results
// --------------------------

.search {
  #searchForm {
    display: inline-block;
    width: 100%;
    .form-limit {
      float: left;
    }
    .counter {
      float: right;
    }
  }
  .phrases-box,
    fieldset.only {
      padding: 0 0 20px;
      label {
      display: inline-block;
      margin-right: 10px;
    }
  } 
  fieldset.phrases {
    padding-bottom: 20px;
  }
}

.search-results {
  .result-title {
    margin-top: 10px;
    margin-bottom: 5px;
    a {
      font-weight: 600;
      text-transform: uppercase;
      color: @JMarticleFontColor;
      &:hover {
        text-decoration: none;
        color: @JMstyle1;
      }
    }
    &:first-child {
      margin-top: 0;
    }
  }
  .result-category,
  .result-created {
    font-size: 0.9em;
    color: @JMbaseFontColorDisabled;
  }
}

// Search Advanced
// --------------------------

.finder {
  ul#finder-filter-select-dates li.filter-date {
    float: none;
    width: auto;
  }
  #finder-filter-select-list {
    margin-top: 20px;
  }
  .filter-date-operator {
    margin-bottom: 10px;
    + .input-append {
      margin-bottom: 10px;
    }
  }
  ul.search-results > li {
    margin-top: 10px;
    &:first-child {
      margin-top: 0;
    }
    > h4 {
      font-size: 1em;
      a {
        font-weight: 600;
        text-transform: uppercase;
        color: @JMarticleFontColor;
        &:hover {
          text-decoration: none;
          color: @JMstyle1;
        }
      }
    }
    .result-url {
      font-size: 0.9em;
      color: @JMbaseFontColorDisabled;
    }
  }
  
  .search-pagination {
    margin-top: @JMbaseSpace !important;
    .pagination {
      display: inline-block;
    }
    .search-pages-counter {
      float: right;
    }
  }
}

// List of All Tags
// --------------------------

.tag-category {
  > form > .thumbnails > li {
    float: none;
    margin: 0 0 @JMbaseSpace;
  }
  > form > .thumbnails > li > h3 {
    font-size: 1em;
    a {
      font-weight: 600;
      text-transform: uppercase;
      color: @JMarticleFontColor;
      &:hover {
        text-decoration: none;
        color: @JMstyle1;
      }
    } 
  }
}

// Tagged items
// --------------------------

.tag-category {
  ul.list-striped > li {
    border-bottom: 1px solid @JMcomponentBorder;
    padding: 10px 0;
    > h3 {
      font-size: 1em;
      a {
        font-weight: 600;
        text-transform: uppercase;
        color: @JMarticleFontColor;
        &:hover {
          text-decoration: none;
          color: @JMstyle1;
        }
      } 
    }
  }
}

// List Web Links in a Category
// --------------------------

.weblink-category {
  ul.list-striped > li {
    border-bottom: 1px solid @JMcomponentBorder;
    padding: 10px 0;
    .list-title {
      margin-bottom: 10px;
      a {
        font-weight: 600;
        text-transform: uppercase;
        color: @JMarticleFontColor;
        &:hover {
          text-decoration: none;
          color: @JMstyle1;
        }
      }
    }
  }
  .cat-children {
    > ul > li {
      border-bottom: 1px solid @JMcomponentBorder;
      padding: 10px 0;
      background: none;
      .item-title {
        display: block;
        margin-bottom: 10px;
        a {
          font-weight: 600;
          text-transform: uppercase;
          color: @JMarticleFontColor;
          &:hover {
            text-decoration: none;
            color: @JMstyle1;
          }
        }
      }
      > ul {
        margin-top: 10px;
        border-top: 1px solid @JMcomponentBorder;
        > li {
          background: none;
          border-bottom: 1px solid @JMcomponentBorder;
          padding: 10px 0;
          margin-left: @JMbaseSpace;
          &.last {
            border-bottom: none;
          }
        }
      }
    }
    .weblink-count {
      display: inline-block;
      width: 100%;
      margin-bottom: 0;
      dt,
      dd {
        float: left;
      }
    }
  }
}

// Registration
// --------------------------

strong.red,
span.star {
  color: #ff0000;
}

// User Profile
// --------------------------

.profile {
  .btn-toolbar + fieldset {
    clear: both;
  }
}

// Miscellaneous
// --------------------------

//hides severals labels in Joomla
.element-invisible {
  display: none !important;
}

//chosen script
.chzn-container {
  li {
    background: none;
  }
}

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

//joomla tooltip
.tip-wrap {
  .tip {
  max-width: 300px;
  padding: 3px 8px;
  color: @white;
  text-align: center;
  text-decoration: none;
  background-color: @black;
  .border-radius (6px);
  font-size: 11px;
  font-weight: 400;
  z-index: 9999;
  .opacity(80);
  }
  .tip-top {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: @black;
    .opacity(80);
  }
  .tip-title {
    font-weight: bold;
  }
}

//joomla edit button
.jmodedit {
  z-index: 9999;
}

//article index
.article-index {
  margin-left: @JMbaseSpace;
  + .pagenavcounter {
    margin-bottom: 10px;
  }
}

//system message
#jm-system-message .alert {
  margin: @JMbaseSpace 0;
}

//pagination
.pagination .counter {
  margin: 4px 0;
}

.pagination ul > li > span.pagenav {
  background: @paginationActiveBackground;
  color: @white;
}

.pagination ul > li.pagination-start,
.pagination ul > li.pagination-prev,
.pagination ul > li.pagination-next,
.pagination ul > li.pagination-end {
  > a,
  > span {
    font-size: 0;    
  }
}

.pagination ul > li.pagination-start {
  > a,
  > span.pagenav  {
    background: url("../images/pagination-start.png") no-repeat center 12px;
    width: 10px;
    height: 22px;
  }
}

.pagination ul > li.pagination-prev {
  > a,
  > span.pagenav  {
    background: url("../images/pagination-prev.png") no-repeat center 12px;
    width: 5px;
    height: 22px;
  }
}

.pagination ul > li.pagination-end {
  > a,
  > span.pagenav  {
    background: url("../images/pagination-end.png") no-repeat center 12px;
    width: 10px;
    height: 22px;
  }
}

.pagination ul > li.pagination-next {
  > a,
  > span.pagenav  {
    background: url("../images/pagination-next.png") no-repeat center 12px;
    width: 5px;
    height: 22px;
  }
}

//captcha
#jform_captcha .recaptcha_theme_white,
#jform_captcha .recaptcha_theme_blackglass,
#jform_captcha .recaptcha_theme_red {
  #recaptcha_response_field {
    height: auto;
    line-height: 1;
    padding: 1px !important;
  }
}
#jform_captcha .recaptcha_theme_clean {
  #recaptcha_response_field {
    border-color: @inputBorder !important;
  }
}

#jform_captcha .recaptchatable a, 
#jform_captcha .recaptchatable a:hover {
  color: @JMlinkColor;
}

#jform_captcha .recaptcha_theme_blackglass.recaptchatable a, 
#jform_captcha .recaptcha_theme_blackglass.recaptchatable a:hover {
  color: @white;
}

// ==========================================================================
// JOOMLA MODULES styles
// ==========================================================================

// Menu
// --------------------------

.nav li {
  background: none;
  padding: 0;
}

.nav.menu {
  margin: 0 -30px;
  li {
    margin: 1px 0 0;
    &:first-child {
      margin: 0;
    }
    a,
    span.separator {
      color: jmdarken(@JMmoduleFontColor,40%);
      font-size: 14px;
      line-height: 20px;
      padding: 10px 30px; 
      position: relative;
      img {
        margin-right: 10px;
      }
    }
    span.separator {
      display: block;
    }
    ul {
      list-style: none;
      margin: 0;
    }
    ul li {
      a {
        display: block;
        padding: 10px 10px 10px 20px;
        background: url("../images/li-menu.png") no-repeat left center;
      }
      > a:hover,
      > a:focus,
      &.active > a {
        text-decoration: none;
        color: @JMmenuFontColorHover;
      }
    }
  }
  > li {
    &.parent > a {
      position: relative;
      padding-right: 40px;
      &:after {
        content: '';
        position: absolute;
        width: 6px;
        height: 3px;
        background: url("../images/li-parent.png") no-repeat;
        right: 30px;
        top: 50%;
        margin-top: -3px;
      }
    }
    > a:hover,
    > a:focus,
    &.active > a {
      color: @JMmenuFontColorHover;
      background: @JMmoduleBorder;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: @JMmenuBorderHover;
      }
    }
    > ul {
      padding: 0 0 0 30px;
      ul {
        padding: 0 0 0 20px;
      }
    }
  }
}

.jm-module.blank-ms {
  .nav.menu {
    margin: 0;
    a,
    span.separator {
      color: jmdarken(@JMbaseFontColor,40%);
    }
    > li {
      > a:hover,
      > a:focus,
      &.active > a {
        background: @JMmoduleBorder;
      }
    }
  }
}  

#jm-offcanvas .jm-module.blank-ms {
  .nav.menu {
    a,
    span.separator {
      color: @JMoffCanvasFontColor;
    }
    > li {
      > a:hover,
      > a:focus,
      &.active > a {
        color: @JMmenuFontColorHover;
      }
    }
  }
}

// Most Read
// --------------------------

ul.mostread li {
  background: url("../images/li.png") no-repeat left 6px;
  padding: 0 0 0 20px;
  margin: 10px 0;
  &:first-child {
    margin-top: 0;
  }
}

// News Flash
// --------------------------

.newsflash,
.newsflash-horiz {
  .readmore {
    display: inline-block;
    margin: 10px 0 0;
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    padding: 4px 12px;
    text-transform: lowercase;
    color: @JMbuttonFontColor;
    background: @JMbuttonBackground;
    border: 1px solid @btnBorder;
    &:hover,
    &:focus {
      color: @JMbuttonFontColorHover;
      background: @JMbuttonBackgroundHover;
      text-decoration: none;
    }
  }
  .newsflash-title {
    font-weight: normal;
    font-size: 1em;
    margin: @JMbaseSpace 0 5px;
    clear: both;
    &:first-child {
        margin: 0 0 5px;
    }
  }
}

.newsflash-horiz {
  margin: 0 -(@JMbaseSpace/2);
  > li {
    float: left;
    width: 50%;
    padding: 0 (@JMbaseSpace/2);
    .box-sizing(border-box);
  }
}

// Latest Articles
// --------------------------

ul.latestnews li {
  background: url("../images/li.png") no-repeat left 6px;
  padding: 0 0 0 20px;
  margin: 10px 0;
  &:first-child {
    margin-top: 0;
  }
}

// Archived Articles
// --------------------------

ul.archive-module > li {
  background: url("../images/li-archive.png") no-repeat left center;
  padding: 0 0 0 20px;
  margin: 10px 0;
  &:first-child {
    margin-top: 0;
  }
}

// Related Items
// --------------------------

ul.relateditems li {
  background: url("../images/li.png") no-repeat left 6px;
  padding: 0 0 0 20px;
}

// Article Categories
// --------------------------

ul.categories-module > li  {
  h1, h2, h3, h4, h5, h6 {
    font-size: 1em;
  }
}

// Article Category
// --------------------------

ul.category-module > li {
  > a {
    display: block;
    margin-bottom: 5px;
  }
  span {
    font-size: 0.9em;
    color: @JMbaseFontColorDisabled;
    display: block;
  }
  .mod-articles-category-readmore a {
    display: inline-block;
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    padding: 4px 12px;
    text-transform: lowercase;
    color: @JMbuttonFontColor;
    background: @JMbuttonBackground;
    border: 1px solid @btnBorder;
    &:hover,
    &:focus {
      color: @JMbuttonFontColorHover;
      background: @JMbuttonBackgroundHover;
      text-decoration: none;
    }
  }
}

// Login
// --------------------------

#form-login-username,
#form-login-password {
  label.element-invisible {
    display: none;
  }
}

#login-form ul li .icon-arrow-right {
  display: none;
}

// Latest Users
// --------------------------

ul.latestusers li {
  background: url("../images/li.png") no-repeat left 6px;
  padding: 0 0 0 20px;
}

// Smart Search
// --------------------------

#mod-finder-searchform {
  margin: 0;
  a {
    display: block;
    margin-top: 5px;
  }
  label.finder {
    padding: 0 10px;
  }
}

#mod-finder-advanced {
  .form-horizontal .control-label {
    float: none;
    width: auto;
  }
  .form-horizontal .controls {
    margin: 0;
  }
}

// Feed Display
// --------------------------

.feed {
  h2 ~ ul.newsfeed {
    margin-top: 10px;
  }  
  ul.newsfeed > li {
    .feed-link {
      font-size: 1em;
      a {
        display: block;
        margin-bottom: 5px;
      }
    }
  }
}

// Weblinks
// --------------------------

.weblinks > li {
  margin-top: 10px;
  &:first-child {
    margin-top: 0;
  }
  > a:first-child {
    display: block;
    margin-bottom: 5px;
  }
  > br {
    display: none;
  }
}

// Search
// --------------------------

.search input#mod-search-searchword {
  width: auto;
}

// Wrapper
// --------------------------

iframe.wrapper {
  max-width: 100%;
}

// Popular Tags
// --------------------------

.tagspopular.tagscloud {
  .tag {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 6px;
    a {
      background: @JMbuttonBackground;
      float: left;
      padding: 6px 30px;
      font-weight: normal;
      color: @JMbuttonFontColor;
      text-decoration: none;
      &:hover,
      &:focus {
        color: @JMbuttonFontColorHover;
        background: @JMbuttonBackgroundHover;
        text-decoration: none;
      }
    }
  }
} 

// ==========================================================================
// JOOMLA CUSTOM PAGES styles
// ==========================================================================

// Error Page
// --------------------------

.jm-error-page {
  text-align: center;
  > h1 {
    color: @JMarticleFontColor;
    font-size: 64px;
    line-height: 1;
    text-transform: uppercase;
  }
  > h2 {
    color: @JMarticleFontColor;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0 0 @JMbaseSpace * 2;
  }
  > p {
    margin: 0 0 @JMbaseSpace * 2;
  }
  input.inputbox {
    max-width: 260px;
  }
  .moduletable {
    margin: 0 0 @JMbaseSpace * 2;
  }
}