//--------------------------------------------------------------
// 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 #jm-allpage {
	padding-top: @JMbarHeight; //will be adjusted with jQuery
}

//wide option

.wide-page .container-fluid {
	max-width: @JMwideLayoutWidth;
}

// Bar
// --------------------------

.sticky-bar #jm-bar {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	.box-sizing(border-box);
	z-index: 9999;
	border-bottom: 1px solid @JMborder;
}

#jm-top-bar {
	background: @JMtopbarBackground;
	color: @JMtopbarFontColor;
	font-size: @JMtopbarFontSize;
	line-height: @JMtopbarHeight;
	border-bottom: 1px solid @JMborder;
	.box-sizing(border-box);
	p {
		margin: 0;
	}
}

#jm-top-bar1,
#jm-top-bar2 {
	width: 100%;
}

.topbar2 #jm-top-bar1 {
	width: @JMtopbar1Width;
}

.topbar2 #jm-top-bar2 {
	width: @JMtopbar2Width;
}

#jm-logo-nav {
	padding-top: (@JMbaseSpace - @JMtopmenuItemHeight);
	padding-bottom: (@JMbaseSpace - @JMtopmenuItemHeight);
	background: @JMlogonavBackground;
	color: @JMlogonavFontColor;
}

#jm-logo-sitedesc {
	#jm-logo {
		font-size: @JMlogoFontSize;
		font-family: @JMmoduleTitleFontFamily;
		line-height: (@baseLineHeight + (2 * @JMtopmenuItemHeight));
		margin: 0;
		a {
			color: @JMlogonavFontColor;
			text-decoration: none;
			&:hover {
				color: @JMstyleLink;
			}
		}
		img {
			border: none;
		}
	}
	#jm-sitedesc {
		line-height: 1.2;
	}
}

#jm-top-menu {
	padding-left: @JMbaseSpace;
	background: @JMtopmenuBackground;
	color: @JMtopmenuFontColor;
	text-align: center;
}

// Header
// --------------------------

#jm-header {
	color: @JMheaderFontColor;
	background: @JMheaderBackground;
	position: relative;
	z-index: 1;
}

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

#jm-header-bg + #jm-header-content {
	position: absolute;
	bottom: 0;
	left: 50%;
	right: auto;
	z-index: 3;
	width: 100%;
	margin-left: -(@JMfluidGridContainerLg/2);
	padding: 0;
}

.wide-page #jm-header-bg + #jm-header-content {
	margin-left: -(@JMwideLayoutWidth/2);
}

//if width 100%
.header100() when(@JMfluidGridContainerLg = 100%) {
	#jm-header-bg + #jm-header-content #jm-header-content-in {
		padding-left: (@JMbaseSpace /2);
		padding-right: (@JMbaseSpace /2);
	}
}
.header100();

// top 1 and 2 and 3
// --------------------------

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

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

#jm-top3 {
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
	background: @JMtop3Background;
	color: @JMtop3FontColor;
}

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

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

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

// bottom 1 and 2 and 3
// --------------------------

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

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

#jm-bottom3 {
	padding-top: (@JMbaseSpace * 2);
	padding-bottom: @JMbaseSpace;
	background: @JMbottom3Background;
	color: @JMbottom3FontColor;
}

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

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

#jm-footer {
	padding: 40px 0;
	line-height: 20px;
	font-size: @JMcopyrightFontSize;
	background: @JMcopyrightBackground;
	color: @JMcopyrightFontColor;
}

#jm-copyrights,
#jm-poweredby {
	a {
		color: @JMcopyrightFontColor;
		text-decoration: none;
		&:hover {
			color: jmlighten(@JMcopyrightFontColor, 50%);
			text-decoration: underline;
		}
	}
}

#jm-poweredby {
	margin: 0 10px;
}

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

#jm-back-top {
	a {
		display: block;
		padding-right: 7px;
		color: currentColor;
		text-decoration: underline;
		span {
			margin-left: 5px;
		}
		&:hover {
			text-decoration: none;
			span {
				position: relative;
				top: -3px;
				.transition(all 0.3s ease);
			}
		}
	}
}

// section space & border
// --------------------------

//white + gray
#jm-top1 + #jm-top2,
#jm-top1 + #jm-system-message + #jm-bottom3 {
	border-top: 1px solid @JMborder;
}

#jm-main + #jm-bottom3 {
	border-top: 1px solid @JMborder;
}

#jm-bottom2 + #jm-bottom3 {
	border-top: 1px solid @JMborder;
}

//gray + white
#jm-header + #jm-top1,
#jm-header + #jm-system-message + #jm-main,
#jm-header + #jm-system-message + #jm-bottom2 {
	border-top: 1px solid @JMborder;
}

#jm-top2 + #jm-system-message + #jm-main,
#jm-top2 + #jm-system-message + #jm-bottom2 {
	border-top: 1px solid @JMborder;
}

//white
#jm-bar + #jm-top1,
#jm-bar + #jm-system-message + #jm-main,
#jm-bar + #jm-system-message + #jm-bottom2 {
	padding-top: @JMbaseSpace;
}

#jm-top1 + #jm-system-message + #jm-main,
#jm-top1 + #jm-system-message + #jm-bottom2 {
	padding-top: 0;
}

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

//gray
#jm-top2 + #jm-system-message + #jm-bottom3 {
	padding-top: 0;
}

//dark
#jm-top3 + #jm-system-message + #jm-bottom1,
#jm-top3 + #jm-system-message + #jm-footer-mod {
	padding-top: 0;
}

#jm-bottom1 + #jm-footer-mod {
	padding-top: 0;
}

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

.responsive-disabled-pixels() when(ispixel(@JMfluidGridContainerLg)) {
	//set min width if responsive is disabled
	.responsive-disabled {
		min-width: @JMfluidGridContainerLg;
		#jm-allpage {
			min-width: @JMfluidGridContainerLg;
		}
	}
}
.responsive-disabled-pixels();

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

.responsive-disabled-percentage() when(ispercentage(@JMfluidGridContainerLg)) {
	@media (max-width: 1200px) {
		.container-fluid {
			.box-sizing(border-box);
			max-width: 100%;
		}
		#jm-header-bg + #jm-header-content {
			margin-left: -50%;
		}
		#jm-header-bg + #jm-header-content #jm-header-content-in {
			padding-left: (@JMbaseSpace /2);
			padding-right: (@JMbaseSpace /2);
		}
	}
	//set min width if responsive is disabled
	.responsive-disabled {
		min-width: 1200px;
		#jm-allpage {
			padding: 0!important;
			min-width: 1200px;
		}
		.sticky-bar #jm-bar {
			position: static;
		}
	}
}
.responsive-disabled-percentage();
