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

// TABS
//---------------------------------------------------------------

// Core
.btn() {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  line-height: @baseLineHeight;
  text-decoration: none;
  .border-radius(2px);
	border: 2px solid @JMbuttonBorder;
  background: @JMbuttonBackground;
  .box-sizing(border-box);
  font-family: inherit;
  font-size: @JMbuttonFontSize;
  font-weight: @JMbuttonFontWeight;
  padding: @JMbuttonPadding;
  height: auto;
  color: @JMbuttonFontColor;
	text-transform: @JMbuttonTextTransform;
  // Hover/focus/active state
  &:hover,
  &:focus,
	&:active {
    text-decoration: none;
    .transition(all 0.2s ease-in);  
		color: @JMbuttonFontColorHover;
		background: @JMbuttonBackgroundHover;
  }
}

#jm-allpage .djtabs.default-theme {
  margin: 0;
  .tabs-wrapper {
    font-size: 0; // remove inline-block space
  }
  .djtabs-in-border {
		border: none;
  }
  .djtabs-title-wrapper {
    display: inline-block;
    vertical-align: bottom;
		margin: 0 @JMbaseSpace 5px 0;
  }
  .djtabs-title {
    font: inherit;
    font-size: @JMtabsHeadFontSize;
    font-weight: @JMtabsHeadFontWeight;
    height: auto;
		width: auto !important;
    line-height: @JMtabsHeadLineHeight;
    margin: 0;
    padding: 13px 80px 10px;
    text-decoration: none;
    text-align: center;
    color: @JMtabsHeadFontColor;
    background: @JMtabsHeadBackground;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 3px solid @JMtabsHeadBorder;
    .border-radius(0);
    .box-sizing(border-box);
		text-transform: uppercase;
  }
  .djtabs-title:hover, 
  .djtabs-active-wrapper .djtabs-title {
		border: none;
		padding: 13px 80px;
  	color: @JMtabsHeadFontColorHover;
    background: @JMtabsHeadBackgroundHover;
  }
  .djtabs-in {
  	margin: 0;
    padding: @JMbaseSpace 0;
  }
  [class^="icon-"], [class*=" icon-"] {
    vertical-align: baseline;
    margin: 0;
  }
  .djtab-custom-html {
		float: left;
    display: block;
    margin: 0 10px 0 0;
		img {
			max-height: @JMtabsHeadLineHeight;
		}
  }
	.djtab-text {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0;
	}
	// accordion panel in tabs
	.djtabs-article-group {
		margin: 0;
		border-bottom: 1px solid @JMtabsBorder;
		&:first-child {
			border-top: 1px solid @JMtabsBorder;
		}
		&.djtabs-group-active {
			padding-bottom: 20px;
		}
	}
  .djtabs-panel {
    height: auto;
    margin: 0;
    padding: @JMTabsPanelPadding;
    background: none;
    border: none;
    .border-radius(0);
    span {
      line-height: @JMtabsPanelHeight;
    }
    .djtabs-panel-title {
      margin: 0 20px 0 0;
      font-size: @JMtabsPanelTitleFontSize;
      font-weight: @JMtabsPanelTitleFontWeight;
			font-family: @JMarticleTitleFontFamily;
      color: @JMtabsPanelTitleFontColor;
			text-transform: uppercase;
      a {
      	text-decoration: none;
      }
    }
    .djtabs-panel-date {
      margin: 0 10px 0 0;
      font: inherit;
      color: inherit;
      font-weight: @JMtabsPanelTitleFontWeight;
      line-height: @JMtabsPanelHeight;
    }
  }
  .djtabs-panel:hover {
		.djtabs-panel-title,
		.djtabs-panel-title a {
      color: @JMtabsPanelTitleFontColorHover !important;
    }
	}
  .djtabs-panel-active {
    .djtabs-panel-title	{
      color: @JMtabsPanelTitleFontColorHover;
    }
  }
  .djtabs-panel > span.djtabs-panel-toggler {
    margin: 0 0 0 10px;
		display: inline-block;
		font-family: 'Glyphicons Halflings';
		font-style: normal;
		font-weight: normal;
		font-size: 9px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background: none;
		width: auto;
		height: auto;
		text-align: center;
		&:after {
			content: "\2b";
			border: 2px solid @JMtabsBorder;
			padding: 2px 3px 3px 4px;
		}
  }
  .djtabs-panel-active > span.djtabs-panel-toggler:after {
    content: "\2212";
  }
	// .djtabs-article-body {
		// margin: 0 10px;
	// }
  // article category columns view
  .djtabs-article-group {
  	&.djtabs-article-out {
  		border: none;
  		margin-bottom: @JMbaseSpace;
  		.djtabs-panel {
  			border-top: 1px solid @JMtabsBorder;
  			border-bottom: 1px solid @JMtabsBorder;
  		}
  		.djtabs-article-body {
  			padding-top: 20px;
  		}
  	}
  }
  // single article
  .type-article {
  	.djtabs-article-group {
  		border: none;
  		padding: 0;
  	}
    .djtabs-panel {
      padding: 0;
      margin: 0 0 10px;
      border: none;
      span {
	  		line-height: (@JMtabsArticleFontSize * 1.3);
	  	}
    }
    .djtabs-panel-title {
			margin: 0;
    	font-size: @JMtabsArticleFontSize;
      font-weight: @JMtabsArticleFontWeight;
    }
    .djtabs-panel:hover {
			.djtabs-panel-title {
				color: @JMtabsPanelTitleFontColor;
			}
    	.djtabs-panel-title a {
    		color: @JMtabsPanelTitleFontColorHover;
    	}
    }
	  .djtabs-panel-active {
	    .djtabs-panel-title {
	      color: @JMtabsPanelTitleFontColor;
	    }
	  }
	  //panel date
	  .djtabs-panel-date {
	  	line-height: (@JMtabsArticleFontSize * 1.3);
	  }
  }
  // in article
  //date
  .djtabs-date-in {
		font: inherit;
		font-weight: 500;
		color: inherit;
  }
  //content
  .djtabs-article-content {
    font: inherit;
    color: inherit;
    margin: 0;
    a {
    	color: @JMstyleLink;
    }
  }
  .djtabs-article-footer {
    margin: 15px 0 0;
  }
  .djtabs-article-author,
  .djtabs-article-category {
    font: inherit;
    color: inherit;
    font-weight: @JMbaseFontWeight;
    margin: 0 0 0 10px;
    a {
      font-weight: @JMbaseFontWeight;
      color: @JMstyleLink;
    }
  }
  // readmore
  .djtabs-readmore {
    margin: 15px 0 0;
    display: block;
    width: 100%;
    text-align: left;
    a {
      .btn();
			font-style: normal;
      font-weight: @JMbuttonFontWeight;
    }
  }
  .tabsBlock {
    width: 100%;
    margin: 0;
  }
  // intro image
  .djtabs-article-img.dj-img-left {
    margin-right: 25px;
  }
  .djtabs-article-img.dj-img-right {
    margin-left: 25px;
  }
  .djtabs-article-img {
    margin-bottom: 25px;
  }
  //tabs title hidden
  .tabs-hidden + .djtabs-in-border {
  	background: none;
		border: none;
		color: inherit;
  	.djtabs-in {
  		padding: 0;
  	}
		.djtabs-article-group:first-child {
			border-top: none;
			.djtabs-panel {
				padding-top: 0;
			}
		}
		.djtabs-panel-title {
			color: inherit;
    }
		.djtabs-panel:hover {
			.djtabs-panel-title,
    	.djtabs-panel-title a {
    		color: @JMtabsPanelTitleFontColorHover;
    	}
    }
		.djtabs-panel-active {
	    .djtabs-panel-title {
	      color: @JMtabsPanelTitleFontColorHover;
	    }
	  }
	  .type-article .djtabs-panel-active {
	    .djtabs-panel-title	{
	      color: inherit;
	    }
	  }
		.type-article .djtabs-panel:hover {
			.djtabs-panel-title {
    		color: inherit;
    	}
    }
  }
}

//accordion view
#jm-allpage .djtabs.default-theme.accordion {
  .djtabs-title-wrapper {
    width: 100%;
		margin: 0;
  }
  .djtabs-title {
    width: 100% !important;
  }
}

//alternative color for different bg colors
//---------------------------------------------------------------------------

#jm-allpage #jm-header .djtabs.default-theme,
#jm-allpage #jm-top1 .djtabs.default-theme,
#jm-allpage #jm-bottom1 .djtabs.default-theme,
#jm-allpage .color-ms .djtabs.default-theme {
	.djtabs-title {
		border-color: currentColor;
	}
	// accordion panel in tabs
	.djtabs-article-group {
		border-color: currentColor;
	}
	.djtabs-panel > span.djtabs-panel-toggler {
		&:after {
			border-color: currentColor;
		}
  }
  // article category columns view
  .djtabs-article-group {
  	&.djtabs-article-out {
  		.djtabs-panel {
  			border-color: currentColor;
  		}
  	}
  }
}