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

// MEDIATOOLS
//---------------------------------------------------------------

.dj-cat-title {
	font-family: @JMarticleTitleFontFamily;
  font-size: @JMarticleTitleFontSize;
  font-weight: @JMarticleTitleFontWeight;
  line-height: 1.1;
  margin: 0 0 @JMbaseSpace;
}

.dj-galleryGrid,
.dj-mslider,
.dj-tabber,
.nivoSlider,
.dj-slideshow,
.djslider-loader,
.dj-slideshowThumbs {
  margin: 0 !important;
}

.category-desc {
  margin: 20px 0;
}

.dj-slide-title {
  font-size: @JMmediatoolsTitleFontSize !important;
  color: @JMmediatoolsTitleFontColor !important;
  text-transform: @JMmediatoolsTitleFontTransfrom;
  font-weight: @JMmediatoolsTitleFontWeight !important;
	font-family: @JMmoduleTitleFontFamily !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-align: center;
	a {
	  color: @JMmediatoolsTitleFontColor !important;
	  &:hover {
	  	color: @JMstyle !important;
	  	text-decoration: none !important;
	  }
	}
}

.dj-slide-title + .dj-slide-description {
	margin-top: 3px;
}

.dj-slide-desc-bg {
  background: @JMmediatoolsDescriptionBackground !important;
  .opacity(@JMmediatoolsDescriptionBackgroundOpacity) !important;
}

.dj-slide-desc-text {
  font-size: @JMmediatoolsDescriptionFontSize !important;
  line-height: @JMbaseLineHeight !important;
  font-weight: @JMbaseFontWeight;
  padding: 20px !important;
  color: @JMmediatoolsDescriptionFontColor !important;
  text-align: center !important;
  a {
  	color: @JMmediatoolsDescriptionFontColor!important;
  	&:hover {
  		text-decoration: underline;
  	}
  }
}

.dj-slideshow-in,
.dj-slideshowThumbs-in,
.dj-slideshowThumbs .dj-indicators,
.dj-tabber,
.nivoSlider,
.box_skitter,
.dj-tab {
  .box-shadow(none) !important;
}

// Pagination reset
.djslider-loader .load-button,
.dj-slideshow .dj-load-button,
.dj-mslider .dj-load-button {
  border: none !important;
  background: none !important;
  .opacity(100) !important;
  .box-shadow(none) !important;
  .transition(none);
}

.dj-load-button .dj-key {
  font-weight: normal !important;
}

// Readmore
#jm-allpage .dj-readmore-wrapper {
	padding: 20px 0 0 !important;
	text-align: center !important;
	.dj-readmore {
		.readmore();
		color: @JMreadmoreFontColor !important;
	}
}

// Album Grid
#djmediatools .dj-categories {
	margin: 0 -10px;
  a.dj-category,
  a.dj-category:hover {
    color: @JMmediatoolsTitleFontColor;
    background: none;
    border: none;
    .box-shadow(none);
    .border-radius(none);
    padding: 0;
  }
	a.dj-category {
		margin: 0 10px 10px;
	}
	.dj-category-in {
		border: none;
	}
  .dj-ctitle-bg {
    background: @JMmediatoolsDescriptionBackground;
    .opacity(@JMmediatoolsDescriptionBackgroundOpacity) !important;
  }
  .dj-ctitle-in {
    padding: 20px !important;
    font-size: @JMmediatoolsTitleFontSize !important;
		color: @JMmediatoolsTitleFontColor !important;
		text-transform: @JMglobalTextTransfrom;
		font-weight: @JMmediatoolsTitleFontWeight !important;
    line-height: 1.2 !important;
    text-align: center;
		&:hover {
			color: @JMstyle !important;
		}
  }
}

// Gallery Grid
#jm-allpage .dj-galleryGrid {
  //margin-left: -10px !important; // gutter width
	.dj-slide-desc-bg {
		background: @JMstyle !important;
		.opacity(@JMmediatoolsDescriptionBackgroundOpacity) !important;
	}
	.dj-slide-desc-in:after {
		content: '';
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		border: 1px solid @JMschemeFontColor;
		.opacity(40);
		pointer-events: none;
	}
  .dj-slide-desc .dj-slide-desc-text {
		color: @JMschemeFontColor !important;
  }
  .dj-slide-title {
		color: @JMschemeFontColor !important;
		text-transform: @JMglobalTextTransfrom !important;
		font-size: 20px !important;
		line-height: 1 !important;
		a {
			color: @JMschemeFontColor !important;
			&:hover {
				text-decoration: underline !important;
			}
		}
  }
}

#jm-allpage .grid-ms .dj-galleryGrid {
	.dj-slide-desc,
	.dj-slide-desc-in {
		height: 100%;
	}
	.dj-slide-desc-text {
		position: absolute;
		top: 50%;
		.translateY(-50%);
		width: 100%;
		.box-sizing(border-box);
	}
}


// Modern slider
.dj-mslider {
  .dj-indicators-in {
    padding: 5px !important;
    height: 30px;
    line-height: 30px;
  }
  .dj-load-button {
    height: 12px !important;
    width: 12px !important;
		margin: 3px 5px !important;
    .border-radius(100%) !important;
    background: @JMmediatoolsPaginationColor !important;
		border: none!important;
  }
	.dj-load-button:hover,
  .dj-load-button.dj-load-button-active {
		margin: 0 2px !important;
    background: transparent !important;
		border: 3px solid @JMmediatoolsPaginationActiveColor !important;
  }
}

//color-ms
#jm-allpage .color-ms,
#jm-header,
#jm-bottom1 {
	.dj-mslider {
		.dj-load-button {
			background: currentColor !important;
		}
		.dj-load-button:hover,
		.dj-load-button.dj-load-button-active {
			background: transparent !important;
			border-color: currentColor !important;
		}
	}
}

// Slider
.djslider-loader {
  .navigation-container-custom {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .navigation-container-custom .cust-navigation-in {
    padding: 15px 5px !important;
  }
  .load-button {
    height: 12px !important;
    width: 12px !important;
    margin: 3px 5px !important;
    .border-radius(100%) !important;
    background: @JMmediatoolsPaginationColor !important;
		border: none !important;
		//.box-sizing(border-box);
  }
	.load-button:hover,
  .load-button.load-button-active {
		margin: 0 2px!important;
    background: transparent !important;
		border: 3px solid @JMmediatoolsPaginationActiveColor !important;
  }
}

//color-ms
#jm-allpage .color-ms,
#jm-header,
#jm-bottom1 {
	.djslider-loader {
		.load-button {
			background: currentColor !important;
		}
		.load-button:hover,
		.load-button.load-button-active {
			background: transparent !important;
			border-color: currentColor !important;
		}
	}
}

// Slideshow
.dj-slideshow {
  .dj-indicators {
      margin-top: 20px !important;
  }
  .dj-load-button {
    display: inline-block;
    height: 30px !important;
    width: 30px !important;
    .border-radius(100%)!important;
    .transition(all 0.2s ease-in);
    margin: 0 2px !important;
		background: rgba(red(@JMmediatoolsPaginationBackground),green(@JMmediatoolsPaginationBackground),blue(@JMmediatoolsPaginationBackground), 0.8) !important;
  }
  .dj-load-button .dj-key {
    font-size: 12px !important;
		line-height: 30px !important;
		color: @JMmediatoolsPaginationFontColor !important;
  }
  .dj-load-button-active .dj-key,
  .dj-load-button:hover .dj-key {
    color: @JMmediatoolsPaginationActiveFontColor !important;
  }
  .dj-load-button-active,
	.dj-load-button:hover {
		background: @JMmediatoolsPaginationActiveBackground !important; 
	}
}

// Slideshow with thumbnails
.dj-slideshowThumbs {
  display: inline-block;
  .dj-indicators {
    padding: 10px 0 0 !important; 
  }
  .dj-indicators-in {
    padding: 0 !important;
  }
  .dj-load-button {
    margin: 0 10px 0 0 !important;
    border: none !important;
    .opacity(20) !important;
  }
  .dj-load-button:hover,
  .dj-load-button-active {
    .opacity(100) !important;
  }
  .dj-indicators {
    background: none !important;
  }
}

// Tabber
.dj-tabber {
  padding: 0 !important;
  display: inline-block;
	border: none !important;
  .dj-tab {
    background: @JMmediatoolsTabberTabBackground !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border-bottom: 1px solid @JMborder !important;
		img {
			margin-right: 15px !important;
			border: none !important;
		}		
  }
  span.dj-tab-in {
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-shadow: none !important;
		span {
			color: @JMmediatoolsTitleFontColor !important;
		}
  }
	.dj-tab-active {
	  background: @JMmediatoolsTabberTabBackgroundActive !important;
		span.dj-tab-in span {
			color: @JMschemeFontColor !important;
		}
	}
  .dj-tabs-right .dj-tab-indicator {
	  background: url('../images/@{JMimgDir}/dj-tab-indicator-right.png') right center !important;
	}
	.dj-tabs-left .dj-tab-indicator {
	  background: url('../images/@{JMimgDir}/dj-tab-indicator-left.png') left center !important;
	}
	.dj-tab-indicator {
    width: 10px !important;
  }
}

// Skitter
.box_skitter {
  margin: 0 auto;
  border: none !important;
  .label_skitter {
    background: none !important;
    .opacity(100) !important;
    color: @JMmediatoolsDescriptionFontColor !important;
  }
  .label_skitter p {
    font-size: @JMmediatoolsDescriptionFontSize !important;
    letter-spacing: none !important;
    color: @JMmediatoolsDescriptionFontColor !important;
    font-family: inherit !important;
    letter-spacing: normal !important;
  }
  .info_slide {
    .opacity(100) !important;
  }
  .image_number {
    font-size: 12px !important;
    color: @JMmediatoolsPaginationFontColor !important;
    box-shadow: none !important;
    .border-radius(100%) !important;
    padding: 0 !important;
    border: none! important;
    background: rgba(red(@JMmediatoolsPaginationBackground),green(@JMmediatoolsPaginationBackground),blue(@JMmediatoolsPaginationBackground), 0.8) !important;
    margin: 0 2px !important;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
  }
  .image_number_select,
  .image_number:hover {
    color: @JMmediatoolsPaginationActiveFontColor !important;
    background: @JMmediatoolsPaginationActiveBackground !important;
  }
  .info_slide {
    padding: 0 !important;
  }
  
  &.skitter-square .next_button,
  &.skitter-square .prev_button {
    top: 35px !important;
    bottom: auto !important;
    .opacity(70)!important;
  }
  &.skitter-square .next_button:hover,
  &.skitter-square .prev_button:hover {
    .opacity(100)!important;
  }
}

// Nivo slider
.slider-wrapper {
  margin: 0 auto;
  position: relative;
}

#jm-allpage .slider-wrapper .dj-readmore-wrapper a {
  display: inline-block !important;
}

#jm-allpage .slider-wrapper .nivo-controlNav {
  position: absolute;
  z-index: 6;
  left: 15px;
  top: 15px;
  padding: 0 !important;
  a {
    background: rgba(red(@JMmediatoolsPaginationBackground),green(@JMmediatoolsPaginationBackground),blue(@JMmediatoolsPaginationBackground), 0.8) !important;
    margin: 0 4px !important;
    .opacity(100) !important;
    text-indent: 0 !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    font-weight: normal!important;
    line-height: 30px !important;
    color: @JMmediatoolsPaginationFontColor !important;
    .transition(all 0.2s ease-in);
    text-decoration: none!important;
    .border-radius(100%)!important;
    &.active,
    &:hover {
      color: @JMmediatoolsPaginationActiveFontColor !important;
			background: @JMmediatoolsPaginationActiveBackground !important;
    }
  }
}

// Kwicks panels
@JMmediatoolsDescriptionBackgroundOpacityKW: (@JMmediatoolsDescriptionBackgroundOpacity / 100);

#jm-allpage .kwicks {
  li {
    background: none;
    max-width: 100%;
  }
  .dj-slide-desc {
    max-width: 100%; 
    background: rgba(red(@JMmediatoolsDescriptionBackground), green(@JMmediatoolsDescriptionBackground), blue(@JMmediatoolsDescriptionBackground), @JMmediatoolsDescriptionBackgroundOpacityKW)!important;
    .opacity(0)!important;
  }
  .kwicks-expanded {
    .dj-slide-desc {
      .opacity(100)!important;
    }
  }
}

// loader   
.dj-loader {
  background: url("../images/ajax-loader.gif") no-repeat !important;
  width: 128px !important;
  height: 15px !important;
  left: 50% !important;
  margin-left: -64px !important;
  top: 50% !important;
  margin-top: -7px;
} 

//header
#jm-header {
	//loader
	.djslider-loader {
		background-image: url('../images/ajax-loader.gif');
		background-position: center 20%;
		background-repeat: no-repeat;
	}
	.dj-slide-desc-bg {
		background: @JMheaderOpacityColor !important;
		.opacity(@JMheaderOpacity * 100) !important;
	}
	.dj-slide-title {
		font-size: @JMwelcomeTitleFontSize !important;
		color: @JMheaderFontColor !important;
		font-weight: @JMmoduleTitleFontWeight !important;
		line-height: 1.1 !important;
		a {
			color: @JMheaderFontColor !important;
			&:hover {
				color: @JMstyle !important;
			}
		}
	}
	.dj-slide-title + .dj-slide-description {
		margin-top: 20px;
	}
	.dj-slide-desc-text {
		font-size: @JMwelcomeSubtitleFontSize !important;
		padding: 60px !important;
		color: @JMheaderFontColor !important;
		a {
			color: @JMheaderFontColor!important;
		}
	}
}

//noimage-ms suffix
#jm-allpage .noimage-ms {
  .djslider {
    height: auto!important;
  }
  .slider-container {
    position: static;
  }
  .slider-container > ul > li {
    height: auto!important;
  }
  .slider-container > ul > li img {
    display: none;
  }
	.slider-container > ul > li .dj-slide-desc img {
    display: inline-block;
		width: auto;
  }
  .dj-slide-desc {
    height: auto;
    position: static;
  }
  .dj-slide-desc-bg {
    background: none!important;
  }
  .dj-slide-desc-text {
    padding: 0!important;
  }
  .dj-slide-description {
    white-space: normal!important;
    overflow: visible!important;
  }
	.navigation-container {
		position: absolute;
		width: 100%;
	}
	.navigation-container-custom .cust-navigation-in {
		padding-top: (@JMbaseSpace *2) !important;
	}
}

//navigation-ms suffix
.navigation-ms {
  img.prev-button,
  img.next-button,
  img.play-button,
  img.pause-button,
  img.dj-prev,
  img.dj-next,
  img.dj-play,
  img.dj-pause {
    background-position: center center;
    background-repeat: no-repeat;
    .transition(all 0.2s ease-in);
		width: 51px;
		height: 51px;
		border: 3px solid @JMmediatoolsNavigationBackground;
		.border-radius(100%);
    &:hover {
      background-color: @JMmediatoolsNavigationBackground;    
    }
  }
  .dj-slideshow-in:hover .dj-navigation img,
  .dj-slideshowThumbs-in:hover .dj-navigation img,
  .dj-tabber-in:hover .dj-navigation img {
    .opacity(100) !important;
  }
  img.prev-button,
  img.dj-prev {
    background-image: url("../images/navi/prev.png");
		&:hover {
			background-image: url("../images/navi/prev-hover.png");
		}
  }
  img.next-button,
  img.dj-next {
    background-image: url("../images/navi/next.png");
		&:hover {
			background-image: url("../images/navi/next-hover.png");
		}
  }
  img.play-button,
  img.dj-play {
    background-image: url("../images/navi/play.png");
    margin-left: -26px !important;
		&:hover {
			background-image: url("../images/navi/play-hover.png");
		}
  }
  img.pause-button,
  img.dj-pause {
    background-image: url("../images/@{JMimgDir}/pause.png");
    margin-left: -26px !important;
		&:hover {
			background-image: url("../images/navi/pause-hover.png");
		}
  }
}










