@CHARSET "ISO-8859-1";
/* Menus */
/* Old */
div#navContainer {height:30px; width:100%; margin-top:0px; background-color:#25aae2; }
div#navBar {height:30px; width:100%; 
	background-color:#25aae2; padding: 0 0.2em 0.2em 0.2em;}
#mainmenu ul { background-color:#25aae2;  padding:0;}

/* Google's Custom Search embed (see navbar.inc.php) sets its own input width
   via an inline style="width:100%", intended to fill its own generated
   table markup. That percentage compounds badly with the .halfcolumn/.right
   layout classes and div.mainbody's padding further up the page (both in
   asif.css.inc.php) - somewhere in that nested-table percentage chain it
   resolves to 0px, so the search box has been invisible/unusable ever since
   it was added. Overriding to a fixed pixel width sidesteps the whole
   percentage-resolution problem; !important is required since it has to
   beat Google's own inline style. */
input.gsc-input { width: 160px !important; }

#mainmenu ul li { float:left; list-style:none;  padding:0; position:relative; width:11.09%; }

.menuimage { height:25px; margin-right:5px; }

/* Change a to p for toprow */
#mainmenu ul li a{ border-left:1px solid #25aae2;  width:100%;; }
#mainmenu ul li a:hover { border-left:1px solid #25aae2; border-right:1px solid #25aae2; width:100%; }

/* Dropdown part */
#mainmenu ul li ul { position:absolute; float:left; clear:left; }
.dropnwide { width:100%; }
.dropwide { width:150%; }
.dropxwide { width:200%; }
.dropxxwide { width:250%; }

#mainmenu ul li ul li{ width:100%;  z-index: 255; }
#mainmenu ul li ul li a.dropdown { width:100%;   } 
#mainmenu ul li ul li a.dropnwide {  width:100%; } 
#mainmenu ul li ul li a.dropend {  width:100%;  }
#mainmenu ul li ul li a.endend {  width:100%;    }
/* Hovering over the Dropdown part */
#mainmenu ul li ul li a.dropdown:hover {border:0;  width:100%;   } 
#mainmenu ul li ul li a.dropnwide:hover {border:0; width:100%;  } 
#mainmenu ul li ul li a.dropend:hover {  width:100%;      } 
#mainmenu ul li ul li a.endend:hover {  width:100%;      } 

.menuitem  { height:30px; line-height:30px; font-size:15px; 
text-align:center; text-decoration:bold; margin:0;  
display:block; background-color:#25aae2; color:#000000;  
}
.menuitem:hover { font-size:15px;
display:block; background-color:#000000; color:#25aae2; 
}

.menudrop { text-align:left; padding-left:10px; 
border-top:0px; border-right:1px solid #25aae2; 
border-bottom:0px; border-left:1px solid #25aae2; 
}
.menuend  { text-align:left; padding-left:10px;
border-top:0px; border-right:1px solid #25aae2;
border-bottom:1px solid #25aae2; border-left:1px solid #25aae2;
border-radius:0 0 15px 15px; }

/* Mobile navbar: the desktop nav above is a horizontal float:left row with
   mouseenter/mouseleave-driven dropdowns (see asif.js) - neither works on a
   touch screen, so below this width it becomes a collapsible stacked menu
   with tap-to-expand dropdowns instead. */
#navToggle { display:none; }

@media (max-width: 768px) {
	div#navContainer { height:auto; }
	div#navBar { height:auto; padding:0.4em; }

	#navToggle {
		display:block; width:100%; text-align:left; padding:0.6em;
		font-size:16px; background-color:#25aae2; color:#000000;
		border:1px solid #000000; border-radius:6px;
	}

	#mainmenu { display:none; }
	#mainmenu.navOpen { display:block; }

	#mainmenu ul { width:100%; }
	#mainmenu ul li { float:none; width:100%; position:relative; }

	/* dropdowns stack in normal flow (indented) instead of floating absolutely */
	#mainmenu ul li ul { position:static; float:none; clear:both; display:none; }
	#mainmenu ul li ul.navOpen { display:block; }
	#mainmenu ul li ul li { padding-left:1.5em; }

	.menuitem, .menuitem6 { text-align:left; padding-left:0.6em; height:auto; line-height:2.2em; }

	/* the collapsed mobile header has far less room than the desktop nav row -
	   160px would overflow it, so shrink the fixed-width override from above */
	input.gsc-input { width: 90px !important; }
}