/* NAVIGATION */
.NavBar {
    background-image: url('images/menu/menu_005_bg.jpg');
    background-repeat: repeat;
    width: 100%;
	border: solid #636363;
	border-width: 1px 0px 1px 0px;				
	vertical-align: middle;
    clear:both;
	}


/* DROPDOWN MENU THAT WORKS ON MOBILE DEVICES WITHOUT HOVER CAPABILITY ============== */
.mainmenucontainer { 
	max-width: 1000px;
    background-image: url('images/menu/menu_005_bg.jpg');
    background-repeat: repeat;
	border: none;
	border-width: 1px 0px 1px 0px;				
	margin: auto;
	vertical-align: middle;
	padding: 0; }

#mainmenu {
	margin: 0;
	padding: 0;
	width: 100%;
 	color: #fff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	line-height: 22px;  
}

#mainmenu a {	color: #FFFFFF;	text-decoration:none; font-family: 'Open Sans', Helvetica, sans-serif;	font-size: 16px; line-height: 22px !important;  /* otherwise links will have changing line heights on mobile devices */}
#mainmenu a:hover { color: #eedbbc; text-decoration:none; font-family: 'Open Sans', Helvetica, sans-serif;	font-size: 16px; 	line-height: 22px !important;  /* otherwise links will have changing line heights on mobile devices */}
	
/* - - - ADxMenu:BASIC styles [ MANDATORY ] - - - */
/* remove all list stylings */
#mainmenu, #mainmenu ul {	margin:0;	padding:0;	border:0;	list-style-type:none;	display:block;	z-index:1000;}


#mainmenu ul {
	margin: 0;
	padding: 0;
	text-align: left;
	background: #3D3D3D;

}
#mainmenu ul ul {
	margin: 0;
	padding: 0;
	margin-top: 0px;
	background: #3D3D3D;
}
#mainmenu li li {
	border: 1px solid #636363; /* doesn't do anything */
}	
#mainmenu li {
	height: 30px;
	margin: 0;
	padding-top: 8px;
	padding-bottom: 2px;
	vertical-align: middle;
    border:0;
	display:inline;
	float:left;	/* move all main list items into one row, by floating them */
	position:relative;/* position each LI, thus creating potential IE.win overlap problem */
	z-index:5;/* thus we need to apply explicit z-index here... */
	vertical-align:middle;
}

#mainmenu ul li {  display:block;	float:left; margin: 0;}
#mainmenu ul li: hover {  display:block; float:left; margin: 0; background: url(images/menu/menu_005_bghover.jpg) repeat-x left top;}
		
#mainmenu li:hover {
		background: url(images/menu/menu_005_bghover.jpg) repeat-x left top;
	z-index:10000;		/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space:normal;	/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
						see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
#mainmenu li ul {margin-top: 0px;}

#mainmenu li li {
	/*background:transparent url(../art/opacity.png);*/
	float: none;	/* items of the nested menus are kept on separate lines */
	height: 30px;	
	padding-top: 5px;
	vertical-align: middle;
	width: 200px; 
}
#mainmenu ul {
	visibility:hidden;	/* initially hide all submenus. */
	position:absolute;
	z-index:10;
	left:0;				/* while hidden, always keep them at the top left corner, */
	top:0;				/* to avoid scrollbars as much as possible */
}
#mainmenu li:hover>ul { 	visibility:visible;	/* display submenu them on hover */	top:100%;			/* 1st level go below their parent item */}
#mainmenu li li:hover>ul {/* 2nd+ levels go on the right side of the parent item */	top:0;	left:100%;}

/* -- float.clear --  force containment of floated LIs inside of UL */
#mainmenu:after, #mainmenu ul:after { 	content:".";	height:0;	display:block;	visibility:hidden;	overflow:hidden;	clear:both;}
#mainmenu, #mainmenu ul {/* IE7 float clear:*/	min-height:0;}
/* -- float.clear.END --  */

/*
#mainmenu ul { 	width:180px; }
#mainmenu ul ul {	width: 300px;} */
#mainmenu li.hidden {	display:none;}


/* FOR SPECIFIED VIEWPORT */ 
/* MUST BE ACCOMPANIED BY jquery-1.7.min.js and JS code block in header */

/* Large devices */ 
@media (min-width: 1000px) { 
	.NavBar {	height: auto; } 
	.Navigation {	width: 1000px; margin: auto;}
	#mainmenu li 	{padding-left: 11px;	padding-right: 11px;	}
	#mainmenu li li {padding-left: 11px;	padding-right: 11px;	}
}

/* Tablets to Desktops */ 
@media (min-width: 768px) and (max-width: 999px) {
	.Navigation { width: 100%; padding-right: 10px; padding-left: 10px;}
    #mainmenu li 	{padding-left: 9px;	padding-right: 9px;	}
	#mainmenu li li {padding-left: 9px;	padding-right: 9px;	}	
}

/* Large Phones */ 
@media (max-width: 767px) {
	#mainmenu li 	{padding-left: 7px;	padding-right: 7px;	}
	#mainmenu li li {padding-left: 7px;	padding-right: 7px;	}	
}

/* Small Phones */ 
@media all and (max-width: 329px) {

}