/* #### GENERAL LAYOUT ######################################################################################################### */


#mwNavigation {

	position		: fixed;
	
	top			: 0px;
	left			: 0px;
	right			: 0px;

	height			: 48px; 
	
	overflow		: hidden; 

	box-shadow		: 0px 1px 7px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow	: 0px 1px 7px rgba(0, 0, 0, 0.6);
	-moz-box-shadow		: 0px 1px 7px rgba(0, 0, 0, 0.6);
	
}

/* Adding info line gap */
#mwNavigation {
	top			: 30px;
}

.sysDesktop {
	top			: 76px;
}

/* #### NavBarContainer ######################################################################################################## */

#mwNavigation .navBarHeader,
#mwNavigation .navBarFooter 
{

	position		: absolute;
	left			: 0px;
	right			: 0px;

	height			: 46px;  

	background		: #b7b7b7;

/**/
	background		: -moz-linear-gradient(top,  #b7b7b7 0%, #939394 100%);
	background		: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7b7b7), color-stop(100%,#939394));
	background		: -webkit-linear-gradient(top,  #b7b7b7 0%,#939394 100%);
	background		: -o-linear-gradient(top,  #b7b7b7 0%,#939394 100%);
	background		: -ms-linear-gradient(top,  #b7b7b7 0%,#939394 100%);
	background		: linear-gradient(top,  #b7b7b7 0%,#939394 100%);
	filter			: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#939394',GradientType=0 );

	border-top		: #E5E5E5 1px solid; 
	border-bottom		: #000000 1px solid; 

/*/
	background		: -moz-linear-gradient(top,  #b0afb0 0%, #858586 100%);
	background		: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0afb0), color-stop(100%,#858586));
	background		: -webkit-linear-gradient(top,  #b0afb0 0%,#858586 100%);
	background		: -o-linear-gradient(top,  #b0afb0 0%,#858586 100%);
	background		: -ms-linear-gradient(top,  #b0afb0 0%,#858586 100%);
	background		: linear-gradient(top,  #b0afb0 0%,#858586 100%);
	filter			: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0afb0', endColorstr='#858586',GradientType=0 );

	box-shadow		: 0px 0px 7px black;
	-webkit-box-shadow	: 0px 0px 7px black;
	-moz-box-shadow		: 0px 0px 7px black;
/**/

/*/
	box-shadow		: 0px 1px 7px black;
	-webkit-box-shadow	: 0px 1px 7px black;
	-moz-box-shadow		: 0px 1px 7px black;
/**/	

}

#mwNavigation .navBarOverlay
/*#mwNavigation .subNav */
{
	background		: rgba(90, 90, 90, 0.3);
}

#mwNavigation .navBarHeader {
	top			: 0px;
	height			: 46px;  
}

#mwNavigation .navBarFooter {

	bottom			: 0px;

	height			: 5px;
	line-height		: 5px;
}

/* Gray overlay over image background for whole navigation, except topnav and footer */
#mwNavigation .navBarOverlay {

	position		: absolute;
	
	top			: 48px;
	bottom			: 7px;
	left			: 0px;
	right			: 0px;
}

/* #### NAV ITEMS ############################################################################################################## */

.navContainer,
.navContainer UL,
.navContainer LI
{
	display			: block;
	
	list-style		: none;

	margin			: 0px;
	padding			: 0px;
	
}

.navContainer {
	display			: inline-block;
}

/* ==== Top Nav ================================================================================================================ */

.navContainer .topNav {
	float			: left;
}

/* ---- Nav Item Box ---- */

.navContainer .topNavItem {
	display			: block;
	position		: relative;
	
	margin			: 1px 0px;
	padding			: 0px 15px;	

	height			: 46px;
	line-height		: 46px;

	color			: #ffffff;
	text-shadow		: 1.0px 1px 1px #353535;

	background		: url('/cms2t/res/images/navbars/divider.png') no-repeat right center transparent;	

	text-decoration		: none;
	font-weight		: bold;
	
	white-space		: nowrap;
	
	cursor			: pointer;
}

.navContainer .topNav:last-child .topNavItem {
	background		: none;
	background-position	: right center;
}

/* ---- Nav Item Contents ---- */

.navContainer .topNavItem>* {
	display			: inline-block;
}

.navContainer .topNavItem>.Title {
} 

.navContainer .topNavItem>.Icon {
	display			: inline-block;
	vertical-align		: middle;
	
	margin-right		: 5px;

	width			: 32px;
	height			: 32px;
	
	background		: no-repeat transparent center top;
}

/* ---- Nav Groups ---- */

.navContainer .topNav.Hover .navGroup {
	background		: url('/cms2t/res/images/navbars/divider_hover.png') no-repeat right center #b7b7b7;	

	background		: url('/cms2t/res/images/navbars/divider_hover.png') no-repeat right center, 
				-moz-linear-gradient(top,  #b7b7b7 0%, #c8c8c9 100%);

	background		: url('/cms2t/res/images/navbars/divider_hover.png') no-repeat right center, 
				-webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7b7b7), color-stop(100%,#c8c8c9));

	background		: url('/cms2t/res/images/navbars/divider_hover.png') no-repeat right center, 
				-webkit-linear-gradient(top,  #b7b7b7 0%,#c8c8c9 100%);

	background		: url('/cms2t/res/images/navbars/divider_hover.png') no-repeat right center, 
				-o-linear-gradient(top,  #b7b7b7 0%,#c8c8c9 100%);

	background		: url('/cms2t/res/images/navbars/divider_hover.png') no-repeat right center, 
				-ms-linear-gradient(top,  #b7b7b7 0%,#c8c8c9 100%);

	background		: url('/cms2t/res/images/navbars/divider_hover.png') no-repeat right center, 
				linear-gradient(top,  #b7b7b7 0%,#c8c8c9 100%);
				
	color			: #66FFAA;
	text-shadow		: 0px 0px 3px black;
				
}

/* ==== Sub Nav ================================================================================================================ */

.navContainer .subNav {
	position		: relative;

	width			: 70px;
	padding			: 15px;
	margin-bottom		: 5px;
}

.navContainer .subNav:before {
	content			: '';
	
	position		: absolute;
	
	left			: -2px;
	top			: 15px;
	bottom			: 15px;
	
	width			: 2px;
	
	background		: url('/cms2t/res/images/wallpapers/default.jpg') repeat center top fixed gray;
/*	background-size		: cover; */
}

.navContainer .topNav:first-child .subNav:before {
	content			: '';
	display			: none;
}


/* ---- Sub nav items ---- */

.navContainer .subNav>LI {

	display			: block;
	overflow		: hidden;

	padding			: 0px;
	margin			: 0px;

	color			: #DDDDDD;
	text-shadow		: 0px 0px 2px #353535;
		
	font-weight		: bold;
	font-size		: 11px;

	text-align		: left;
	text-transform		: uppercase;
	
	white-space		: nowrap;

	cursor			: pointer;
}

.navContainer .topNav:hover .subNav>LI {
	color			: white;
}

.navContainer .topNav .subNav>LI:hover {
	color			: #66FFAA;
}

.navContainer .subNav A {
	display			: block;
	
	color			: inherit;
	text-decoration		: none;

	line-height		: 25px;
}

/* #### Z-INDEX ################################################################################################################ */

/*	Separating nav layers, starting from 2000 - which is nav itself
	Ordering from bottom to top
*/ 

#mwNavigation {
	z-index			: 2000;	
}

#mwNavigation .navBarFooter {
	z-index			: 2001;	
}

#mwNavigation .navBarHeader {
	z-index			: 2002;	
}

#mwNavigation .navContainer .topNavItem {
	z-index			: 2003;	
}

/* #### ANIMATIONS ############################################################################################################# */

/* All nav items have same width on hover (making big items smaller, small - bigger) */

#mwNavigation.Hover .topNav {
	width			: 165px !important;
}

#mwNavigation.Hover .subNav {
	width			: 135px !important;;
}


#mwNavigation,
#mwNavigation .topNav,
#mwNavigation .topNavItem,
#mwNavigation .subNav,
#mwNavigation .subNav>LI
{
	-webkit-transition	: all 0.2s ease-in-out;
	   -moz-transition	: all 0.2s ease-in-out;
	    -ms-transition	: all 0.2s ease-in-out;
	     -o-transition	: all 0.2s ease-in-out;
		transition	: all 0.2s ease-in-out;
}


/* #### NAV GROUPS ICONS ####################################################################################################### */

#mwNavigation.Touch .subNav>LI A {
	line-height		: 40px;
}

/* ---- System Logo ---- */

.topNav .Icon.Logo {
	width			: 145px;
	height			: 24px;
	
	margin			: 0px;
	
	background-image	: url('/cms2t/res/images/navbars/Menu_Logo.png');
	background-position	: center top;
}

.topNav:hover .Icon.Logo {
	background-position	: center bottom;
}

#mwNavigation.Hover .topNav.System {
	width			: 180px !important;
}

/* ---- System Touch ---- */

.topNav .Icon.Touch {
	width			: 24px;
	height			: 24px;

	margin			: 0px;
	
	background-image	: url('/cms2t/res/images/navbars/touch_menu.24x.png');
	background-position	: center top;
}

.topNav:hover .Icon.Touch {
	background-position	: center bottom;
}

#mwNavigation .topNav.Touch {
	display			: none;
	float			: right;
	width			: 60px !important;
}

#mwNavigation .topNav.Touch .topNavItem {
	padding			: 0px;
	background-position	: left center;
}

/* ---- Sections ---- */

.topNav .Icon.Dashboard {
	background-image	: url('/res/system/images/navbar/sections.png');
	background-position	: 0px top;
}

.topNav:hover .Icon.Dashboard {
	background-position	: 0px bottom;
}

.topNav .Icon.Content {
	background-image	: url('/res/system/images/navbar/sections.png');
	background-position	: -32px top;
}

.topNav:hover .Icon.Content {
	background-position	: -32px bottom;
}

.topNav .Icon.Files {
	background-image	: url('/res/system/images/navbar/sections.png');
	background-position	: -64px top;
}

.topNav:hover .Icon.Files {
	background-position	: -64px bottom;
}

.topNav .Icon.Intouch {
	background-image	: url('/res/system/images/navbar/sections.png');
	background-position	: -96px top;
}

.topNav:hover .Icon.Intouch {
	background-position	: -96px bottom;
}

/* #### Responsive ############################################################################################################# */

@media screen and (max-width: 1000px) {

/* ---- Common topNav ---- */

	#mwNavigation.Hover .topNav,
	#mwNavigation .topNav {
	 	width			: 60px !important; 
	}

	#mwNavigation.Hover .topNav.hoverable.Hover {
	 	width			: 165px !important; 
	}

	#mwNavigation .topNavItem {
		padding			: 0px;
	}

	#mwNavigation .topNavItem .Icon {
		margin			: 0px;
	}
	
	#mwNavigation .topNavItem .Title {
		display			: none;
	}

/* ---- Common subNav ---- */

	#mwNavigation .subNav {
		display			: none;
	}

	#mwNavigation.Hover .topNav.Hover .subNav {
		display			: block;
	}
	
/* ---- Logo ---- */

	#mwNavigation.Hover .topNav.System {
		width			: 60px !important;
	}

	#mwNavigation .topNav .Icon.Logo {
		background		: url('/cms2t/res/images/navbars/Menu_Logo_cut.png') no-repeat top center transparent;
		width			: 24px;
		height			: 24px;
	}
	
/* ---- Search ---- */

	/* Special case, it's always available */

	#mwNavigation .topNav.Search {
	 	width			: 250px !important; 
	}

	#mwNavigation .topNav.Search .topNavItem {
		padding			: 0px 15px;
	}

	#mwNavigation .topNav.Search:hover .subNav {
	 	display			: none; 
	}
}

@media screen and (max-width: 640px) {
	#mwNavigation .topNav.section {
	 	display			: none; 
	}
/*	

	#mwNavigation .topNav.section {
		float			: none;
	}
*/

	#mwNavigation.Touch .topNav.Touch {
		display			: block;
	}

	#mwNavigation.Hover .topNav.System:hover,
	#mwNavigation.Hover .topNav.Touch:hover {
	 	width			: 60px !important; 
	}
	
	#mwNavigation .subNav {
		display			: block;
	}

}

@media screen and (max-width: 480px) {
	#mwNavigation .topNav.System {
		display			: none;
	}
}

@media screen and (max-width: 320px) {
	#mwNavigation .topNav.Search {
	 	width			: 150px !important; 
	}

}