﻿/*add by 9338*/
@media only screen and (max-width: 99999px) {
	#mainMenu { border-bottom: 2px solid rgba(4, 129, 177, 0.4); }
	#topMenuA { display: none; }
	#topMenuNav ul {
		float: right;
		line-height: 80px;
		margin: 0; padding: 0;
	}
	#topMenuNav li {
		text-align: center;
		display: inline-block;
	}
	#contentMenuA {
		display: none;
	}

	/* 
		LEVEL ONE
	*/
	ul.dropdown					{ font-size: 1.1em; position: relative; list-style: none; display: inline;}
	ul.dropdown:active			{ display: inline;}

	ul.dropdown li				{ width: 11em; font-weight: bold; float: left; z-index: 998; }
	ul.dropdown li a			{ color: #888888; display: block; padding-top: 4px; padding-bottom: 4px; }
	ul.dropdown li:last-child a	{ border-right: none; } /* Doesn't work in IE */
	ul.dropdown > li:hover		{ position: relative; }
	ul.dropdown > li:hover > a	{ color: brown; position: relative; }
	ul.menu-child li:hover		{ background-color: grey; position: relative; }
	ul.menu-child li:hover > a	{ color: whitesmoke }

	/* 
		LEVEL TWO
	*/
	ul.dropdown ul 				{ display: none; position: absolute; top: 100%; left: 0;  list-style: none;  padding-left: 0; border: 1px solid #e0e0e0; }
	ul.dropdown ul li 			{ width: 11em; border-bottom: 1px dotted #e0e0e0; float: none; background-color: #fff; }
	ul.dropdown ul li a			{ border-right: none; width: 100%; display: inline-block; }

	/* 
		LEVEL THREE
	*/
	ul.dropdown ul ul 			{ left: 100%; top: 0; }
	ul.dropdown li:hover > ul 	{ display: block; }
}

@media only screen and (max-width: 860px) {
	#mainMenu {
		border-bottom: none;
	}
	#topMenu { clear: both; }
	#topMenuA {
		display: block;
		padding: 3px;
		margin: 0 auto;
		text-align: center;
		border: 2px outset #ddd;
		border-radius: 5px;
	}
	#topMenuNav ul {
		display: none;
		position: fixed;
		z-index: 999;
		background-color: black;
		width: 99%;
		opacity: 0.9;
		border-radius: 4px;
		line-height: 30px;
	}
	#topMenuNav:hover ul { display: block; }
	#topMenuNav ul > li {
		text-align: center;
		display: inline-block;
		width: 100%;
		border-radius: 8px;
	}
	#topMenuNav ul > li > a { margin: 0 10px; }
	#topMenuNav ul > li:hover {
		background-color: grey;
	}
	#topMenuNav ul > li:hover a {
		color: white !important;
	}

	#contentMenuA {
		display: block;
		padding: 3px;
		margin: 0 auto;
		text-align: center;
		font-size: 1.2em;
		border: 2px outset #ddd;
		border-radius: 5px;
	}
	#contentMenuNav:hover ul.dropdown {
		display: block;
	}

	/* 
		LEVEL ONE
	*/
	ul.dropdown						{ font-size: 12pt; display: none; padding: 0; margin: 0; background-color: black; }
	ul.dropdown li					{ float: none; width: 100%; padding: .5em; }
	ul.dropdown li a				{ text-align: left; }
	ul.dropdown li:hover a			{ color: white !important; }

	/* 
		LEVEL TWO
	*/
	ul.dropdown li ul				{ display: none; position: relative; border: none; }
	ul.dropdown li ul li			{ padding: .5em; }
	ul.dropdown li:hover ul li		{ background: transparent; border: none; }
	ul.dropdown li:hover ul li a	{ color: #888888 !important; }
	ul.dropdown li:hover ul li:hover a	{ color: white !important; }

	/* 
		LEVEL THREE
	*/
	ul.dropdown li ul li ul					{ display: none; left: 0; }
	ul.dropdown li:hover ul li:hover ul		{ display: block; }
	ul.dropdown li:hover ul li:hover ul li a	{ color: #888888 !important; }
	ul.dropdown li:hover ul li:hover ul li:hover a	{ color: white !important; }
	/*
	ul.dropdown li:hover ul li:hover ul li:hover	{ background: transparent; border: none; border-radius: 8px; }
	ul.dropdown li:hover ul li:hover ul li:hover a	{ color: black !important; }
	*/

}
