/*
Template Name: Responsive Easy Member Neo
Template URL: http://www.easymemberpro/templates/responsive
Author: Easy Member Neo
Author URL: http://www.easymemberneo.com/
Description: This mobile ready template has been designed using the Bootstrap 3 Framework.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/*
NOTE: Anything within [[...]] are managable settings under responsive options.
*/


body {background:[[bodyBgUrl]] [[bodyBgRepeat]] [[bodyBgColor]]; color:[[bodyTextColor]];}
a {color:[[bodyLinkTextColor]];}
a:hover {color:[[bodyLinkHoverTextColor]];}
/*Nav Menu Options*/
.mainnav {
	background-color:[[topNavBgColor]];
	font-size:[[topNavFontSize]];
	color:[[topNavTextColor]];
	height: auto;
	min-height: [[mainLogoHeight]]px;
	border: 0; padding:0px; margin:0px;
}
.topnav-container{background:[[topNavContainerBgColor]];}

.mainnav-logo {width:auto;height:auto;padding: 0px;margin: 0 0 0 0;}
.logo{width: 100%;min-height: [[mainLogoHeight]]px;max-width: [[mainLogoWidth]]px;}
/* Responsive Menu Toggle Button */
.mainnav-toggle {border-color: #000;}
.icon-bar{background:#000;	}
.mainnav-toggle:focus, mainnav-toggle:hover {background:#fff;}
.mainnav-toggle:focus, mainnav-toggle:hover {background-color: #fff;}
/*Site Name*/
.siteName{padding-top:22px;}
.siteName a{font-size:[[topNavFontSize]];color:[[topNavTextColor]];}
.siteName a:hover {color:[[topNavTextColor]];text-decoration:none;}

.top-collapse{border:0; margin-left:0px; margin-right:0px;}
ul.sm li {margin-top:[[topMenu1Margin]]px;}
/*Level 1 Menu*/
ul.top-menu{background:[[topMenu1BgColor]];}
ul.top-menu a{background:[[topMenu1BgColor]]!important;color:[[topMenu1TextColor]]!important;font-size:[[topMenu1FontSize]];padding: 10px; margin-top:20px;}
ul.top-menu a:hover, ul.top-menu a:focus, ul.top-menu a:active, ul.top-menu a.highlighted {color:[[topMenu1HoverTextColor]]!important;background:[[topMenu1HoverBgColor]]!important;}
/*Level 2 Menu*/
.top-menu ul {background:[[topMenu2BgColor]];}
.top-menu ul a{background:[[topMenu2BgColor]]!important; color:[[topMenu2TextColor]]!important;font-size:[[topMenu2FontSize]];}
.top-menu ul a:hover, .top-menu ul a:focus, .top-menu ul a:active, .top-menu ul a.highlighted {color:[[topMenu2HoverTextColor]];background:[[topMenu2HoverBgColor]];}
/*Level 3 Menu*/
.top-menu ul ul{background:[[topMenu3BgColor]];}
.top-menu ul ul a{background:[[topMenu3BgColor]]!important; color:[[topMenu3TextColor]]!important;font-size:[[topMenu3FontSize]];}
.top-menu ul ul a:hover, .top-menu ul a:focus, .top-menu ul a:active, .top-menu ul a.highlighted {color:[[topMenu3HoverTextColor]]!important;background:[[topMenu3HoverBgColor]]!important;}
/*Main Container*/
.main-container {background:[[mainContainerBgUrl]] [[mainContainerBgRepeat]] [[mainContainerBgColor]]; color:[[mainContainerTextColor]];}

.bottom-collapse{border:0; margin-left:0px; margin-right:0px;}
.bottom-nav {background-color:[[bottomNavBgColor]];color:[[bottomNavTextColor]];font-size:[[bottomNavFontSize]];min-height: [[bottomLogoHeight]]px; border:none; margin-bottom:0;}
.bottomnav-container{background:[[bottomNavContainerBgColor]];}
.bottomnav-logo {width:auto;height:auto;padding: 0px;margin: 0 0 0 0;}
.bottomLogo{width: 100%;min-height: [[bottomLogoHeight]]px;max-width: [[bottomLogoWidth]]px;}
/*Bottom Menu*/
ul.bottom-menu {background:[[bottomMenu1BgColor]];margin-top:20px;}
ul.bottom-menu a {color:[[bottomMenu1TextColor]]!important;background:[[bottomMenu1BgColor]];font-size:[[bottomMenu1FontSize]];padding: 10px;}
ul.bottom-menu a:hover, .bottom-menu a:focus, .bottom-menu a:active, .bottom-menu a.highlighted {color:[[bottomMenu1HoverTextColor]]!important;background:[[bottomMenu1HoverBgColor]]!important;}


.copyright{font-size:[[bottomMenu1FontSize]];padding:15px;display:block;}
.poweredBy{padding:5px;}

#menu-button {display: none;}
#menu-button:before {content:'Menu -';}
#menu-button.collapsed:before {content:'Menu +';}

/*Restylings Based On Collaped Status [screensize]*/
@media screen and (max-width: 768px) {
	/* hide the menu when it has the "collapsed" class set by the script */
	#main-menu.collapsed {display: none;}
	/*.siteName {display: block;clear: both;}*/
	.copyright{display: block;clear: both;}
	.bottom-nav{ position:relative;}
	/*ul.bottom-menu a {padding: 10px!important; line-height:10px!important}*/
	.collapse.in{clear:both;margin-left:0; margin-right:0;}
	.main-container{margin-top:-20px;}
	.bottom-collapse{clear:both;}
}
/*Helper Classes*/
.clear-both{clear:both;}
.no-side-pad {padding-left:0;padding-right:0;}