// --------------------------------------------------------------
// # 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 styles
// ==========================================================================

// allpage
// --------------------------

#jm-allpage {
  position: relative;
  background: @JMpageBackground;
  padding-top: @JMbaseSpace;
  
  //add padding if sticky topbar
  &.stickytopbar {
    padding-top: @JMbaseSpace + @JMtopbarHeight;
  }
}

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

#jm-top-bar {
  background: @JMtopbarBackground;
  border-bottom: 1px solid @JMtopbarBorder;
  margin-bottom: @JMbaseSpace;
  color: @JMtopbarFontColor;
  font-size: @JMtopbarFontSize;
  line-height: @JMtopbarLineHeight;
  font-weight: @JMtopbarFontWeight;
  height: @JMtopbarHeight;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  p {
    margin: 0;
  }
  #jm-top-bar1,
  #jm-top-bar2 {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  //login module
  #login-form {
    margin: -16px 0;
    .control-group {
      display: inline-block;
      margin: 0;
    }
    #form-login-remember,
    ul,
    .input-prepend .add-on {
      display: none;
    }
    input#modlgn-username,
    input#modlgn-passwd {
      width: 162px;
      height: @JMtopbarHeight;
      line-height: 20px;
      padding: 15px;
      border-color: @JMtopbarBorder;
      border-top: 0;
      border-bottom: 0;
      border-right: 0;
      background: @JMtopbarBackground;
      color: jmlighten(@JMtopbarFontColor, 28%);
      &:focus {
        border-color: @JMtopbarBorder;
        .box-shadow(none);
      }
    }
    #form-login-submit .btn {
      background: url("../images/li-gray.png") no-repeat center center;
      font-size: 0;
      padding: 0 21px;
      line-height: @JMtopbarHeight;
      height: @JMtopbarHeight;
      width: 6px;
      border-top: 0;
      border-bottom: 0;
      border-left: 1px solid @JMtopbarBorder;
      border-right: 1px solid @JMtopbarBorder;
    }
    .login-greeting,
    .logout-button {
      display: inline-block;
    }
    .login-greeting {
      padding: 16px 0;
      font-size: @JMbaseFontSize;
      font-style: italic;
      margin-right: 10px;
    }
    .logout-button .btn {
      background: url("../images/logout.png") no-repeat center center;
      font-size: 0;
      padding: 0 21px;
      line-height: @JMtopbarHeight;
      height: @JMtopbarHeight;
      width: 16px;
      border-left: 1px solid @JMtopbarBorder;
      border-right: 1px solid @JMtopbarBorder;
    }
  }
}

#jm-top-bar1 .jm-module-raw {
  float: left;
  margin-right: 10px;
}

#jm-top-bar2 .jm-module-raw {
  float: right;
  margin-left: 10px;
}

// logo
// --------------------------

#jm-logo-sitedesc {
  background: @JMtopmenuBackground;
  border: 1px solid @JMtopmenuBorder;
  margin-bottom: @JMbaseSpace;
  min-height: 138px;
  position: relative;
  #jm-logo-sitedesc-in {
    position: absolute;
    width: 100%;
    padding: 25px;
    .box-sizing(border-box);
    bottom: 0;
  }
  h1#jm-logo {
    margin: 0;
    a {
      display: block;
    }
		img {
			border: none;
		}
  }
}

// topmenu
// --------------------------

#jm-top-menu-nav {
  margin-bottom: @JMbaseSpace;
}

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

#jm-font-switcher {
  margin-bottom: @JMbaseSpace;
}

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

#jm-maincontent {
	display: block;
  padding: @JMbaseSpace;
  border: 1px solid @JMcomponentBorder;
  background: @JMcomponentBackground;
  margin-bottom: @JMbaseSpace;
}

// footer-mod
// --------------------------

#jm-footer-mod {
  padding-top: @JMbaseSpace;
  background: @JMfooterBackground;
  border-top: 1px solid @JMfooterBorder;
  color: @JMfooterFontColor;
  font-weight: @JMfootermodFontWeight;
  font-size: @JMfootermodFontSize;
  ul li {
    background-position: left 5px;
  }
}

#jm-footer-mod-in {
  border-bottom: 1px solid @JMfooterBorder;
}

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

#jm-footer {
  background: @JMfooterBackground;
  font-size: @JMfooterFontSize;
  line-height: @JMbaseLineHeight;
  padding: 25px 0;
  color: @JMfooterFontColor;
  font-weight: @JMfooterFontWeight;
}

#jm-copyrights p {
  margin: 0;
}

// back to top
// --------------------------

#jm-back-top {
  position: fixed;
  bottom: @JMbacktotopPositionBottom;
  right: 0;
  margin-right: @JMbacktotopPositionRight;
  z-index: 9999;
  a {
    text-decoration: none;
    display: block;
    &:hover {
      cursor: pointer;
      text-decoration: none;
    }
  }
  span {
    display: block;
    height: @JMbacktotopHeight;
    .transition(all 1s ease 0s);
    width: @JMbacktotopWidth;
    background: url("../images/backtotop.png") no-repeat center center rgba(red(@JMbackToTopBackground), green(@JMbackToTopBackground), blue(@JMbackToTopBackground), 0.2);
    &:hover {
      background: url("../images/backtotop.png") no-repeat center center rgba(red(@JMbackToTopBackground), green(@JMbackToTopBackground), blue(@JMbackToTopBackground), 0.3);            
    }
  }
}

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

.texttoggler {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 1px;
  display: inline-block;
  text-decoration: none !important;
  &.small {
    font-size: 0.8em;
  }
  &.normal {
    font-size: 1.1em;
  }
  &.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;
}

// ==========================================================================
// RESPONSIVE DISABLED styles
// ==========================================================================

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

.responsive-disabled() when(ispixel(@JMfluidGridContainerLg)) {
  //disable sticky top-bar
  @media (max-width: @JMfluidGridContainerLg + @JMbaseSpace) {
    .responsive-disabled #jm-allpage.stickytopbar {
      padding-top: 0;
      #jm-top-bar {
        position: static !important;
      }
    }
    html.no-scroll {
      position: static !important;
      overflow-y: auto !important;
    }
  }  
  //set min width if responsive is disabled
  .responsive-disabled {
    min-width: @JMfluidGridContainerLg + @JMbaseSpace;
    #jm-allpage,
    #jm-footer-mod {
      min-width: @JMfluidGridContainerLg + @JMbaseSpace;
    }
  }
}

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

.responsive-disabled() when(ispercentage(@JMfluidGridContainerLg)) {
  //disable sticky top-bar
  @media (max-width: 979px) {
    .responsive-disabled #jm-allpage.stickytopbar {
      padding-top: 0;
      #jm-top-bar {
        position: static !important;
      }
    }
    html.no-scroll {
      position: static !important;
      overflow-y: auto !important;
    }
    .container-fluid {
      .box-sizing(border-box);
      max-width: 100%;
    }
  }  
  //set min width if responsive is disabled
  .responsive-disabled {
    min-width: 979px;
    #jm-allpage,
    #jm-footer-mod {
      min-width: 979px;
    }
  }
}

// call above mixins
// --------------------------

.responsive-disabled();