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

// LAYOUT
//---------------------------------------------------------------

//site wrapper
#jm-allpage {
  position: relative;
  background: @JMpageBackground;
}

.sticky-bar.make-sticky #jm-allpage {
	padding-top: @JMlogoNavHeight;
}

// top bar
// --------------------------

#jm-top-bar {
	background: @JMtopbarBackground;
	color: @JMtopbarFontColor;
	padding: (@JMbaseSpace/2) 0;
}

// Logo Nav
// --------------------------

#jm-logo-nav {
	padding: 20px 0;
	background: @JMtopmenuBackground;
	color: @JMtopmenuFontColor;
}

#jm-logo-sitedesc {
	font-family: @JMtopmenuFontFamily;
	font-weight: bold;
  #jm-logo {
		font-size: 2.5em;
    line-height: 1;
    margin: 0;
    a {
    	color: @JMtopmenuFontColor;
    }
  }
  #jm-sitedesc {
		padding-top: 10px;
    font-size: 1.2em;
    line-height: 1.1;
    color: @JMtopmenuFontColor;
  }
}

// sticky bar
.sticky-bar.off-canvas #jm-logo-nav {
	left: 0;
  right: 0;   
  width: 100%;
  z-index: 9999;
}

.sticky-bar.make-sticky-top #jm-logo-nav {
  top: 0;
  bottom: auto;
	left: 0;
  right: 0;
  position: fixed;   
  width: 100%;
  z-index: 9999;
}

.sticky-bar.make-sticky-bottom #jm-logo-nav {
	top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;   
  width: 100%;
  z-index: 9999;
}

// header
// --------------------------

#jm-header {  
	position: relative;
	color: @JMheaderFontColor;
	background-color: @JMheaderBackground;
  z-index: 1;
  &:before { //background image
	  background-repeat: no-repeat;
	  background-position: center;
	  .background-size(cover);
	  content: '';
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  right: auto;
	  z-index: 1;
	}
}

.header-img #jm-header {
	padding: @JMheaderTopPadding 0;
}

.header-bg #jm-header {
	padding: 0;
}

#jm-header-content {
	position: relative;
  z-index: 10;
  padding: (@JMbaseSpace *2) 0;
  &:before { //background color
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: auto;
		z-index: -1;
		background: @JMheaderOpacityColor;
		.opacity(@JMheaderOpacity * 100);
	}
}

//header-bg position
#jm-header-bg {
  position: relative;
  z-index: 2;
}

.header-bg #jm-header-content {
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  width: 100%;
	z-index: 3;
	.translateY(50%);
	
}

.header-bg #jm-header-content.pstatic {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	bottom: auto;
	.translateY(0);
	margin: 0;
}

// Top1, Top2
// --------------------------

#jm-top1 {
	background: @JMtop1Background;
	color: @JMtop1FontColor;
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
}

#jm-top2 {
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
}

// main
// --------------------------

#system-message .alert {
  margin: (@JMbaseSpace /2) 0;
  a {
    text-decoration: none;
  }
}

#jm-main {
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
	background: @JMmainBackground;
}

#jm-maincontent {
  margin-bottom: @JMbaseSpace;
}

#jm-logo-nav + #jm-colorful-line + #jm-main {
	padding-top: @JMbaseSpace;
}

// bottom
// --------------------------

#jm-bottom1 {
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
  background: @JMbottom1Background;
  color: @JMbottom1FontColor;
}

#jm-bottom2 {
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
}

// footer
// --------------------------

#jm-footer-mod {
	background: @JMtop1Background;
	color: @JMtop1FontColor;
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
}

#jm-footer {
	background: @JMfooterBackground;
	color: @JMfooterFontColor;
	padding: @JMbaseSpace 0;
	line-height: 20px;
  a {
  	text-decoration: none;
  	&:hover {
			text-decoration: underline;
  	}
  }
}

// section space
// --------------------------

#jm-top2 + #jm-main,
#jm-top2 + #jm-bottom2,
#jm-main + #jm-bottom2 {
	padding-top: 0;
}

// Back to top
// --------------------------

#jm-back-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	left: auto;
	z-index: 9999;
	a {
    text-decoration: none;
    display: block;
    &:hover {
      cursor: pointer;
      text-decoration: none;
    }
  }
	span {
		display: block;
		height: 60px;
		.transition(all 1s ease 0s);
		width: 60px;
		background-color: @JMstyle;  
		background-repeat: no-repeat;
		background-position: center center;
		background-image: url("../images/backtotop.png");
		.opacity(60);
		&:hover {
			.opacity(90);
		}
	}
}

// template width in pixels
// --------------------------

.responsive-disabled-pixels() when(ispixel(@JMfluidGridContainerLg)) {
  //set min width if responsive is disabled
  .responsive-disabled {
    min-width: @JMfluidGridContainerLg;
    #jm-allpage {
			padding: 0!important;
      min-width: @JMfluidGridContainerLg;
    }
		.sticky-bar #jm-logo-nav {
      position: static !important;
    }
  }
}
.responsive-disabled-pixels();

// template width in percentage
// --------------------------

.responsive-disabled-percentage() when(ispercentage(@JMfluidGridContainerLg)) {
  @media (max-width: 1170px) {
    .container-fluid {
      .box-sizing(border-box);
      max-width: 100%;
    }
  }  
  //set min width if responsive is disabled
  .responsive-disabled {
    min-width: 1170px;
    #jm-allpage {
      padding: 0!important;
      min-width: 1170px;
    }
		.sticky-bar #jm-logo-nav {
      position: static !important;
    }
  }
}
.responsive-disabled-percentage();

// font-switcher
// --------------------------

#jm-font-switcher {
  text-align: right;
  margin: 0 0 15px;
}

.texttoggler {
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none!important;
  margin: 0 1px;
  display: inline-block;
}

.texttoggler.small {
  font-size: 0.8em;
}

.texttoggler.normal {
  font-size: 1.1em;
}

.texttoggler.large {
  font-size: 1.3em;
}

.smallview #jm-maincontent {
  font-size: 0.9em;
  line-height: 1.5em;
}

.largeview #jm-maincontent {
  font-size: 1.1em;
  line-height: 1.5em;
}

