.phfixed {
	position: fixed;
	top: 0px;
	height: 92px;
	width: 100%;
}

.phscroll {
	height:92px;
	position:relative;
}

.pbfixed {
	margin-top:92px;
}

.pbfixed ul {
	margin-bottom: 10px;
}

.pokerddmenu {
	position: relative;
	height: 100%;
	z-index: 5;
}

.pokerddmenu ul {
	list-style: none;
}

.pokerddmenu a, .pokerddmenu a:visited {
	text-decoration: none;
}

#nav
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	position: absolute;
	top: 30%;          /* distance of nav from top */
	left: 50%;
}

#nav.nav3
{
	width: 30em; /* 480 sets menu width */	
	margin-left: -15em; /* half menu width */
}
#nav.nav4
{
	width: 40em; /* 640 sets menu width */	
	margin-left: -20em; /* half menu width */
}

	#nav > a
	{
		display: none;
	}

	#nav li
	{
		position: relative;
	}
		#nav li a
		{
			color: #333; /* menu text */
			display: block;
		}
		#nav li a:active
		{
			background-color: #CCC !important; /* active menu background */
		}

	#nav span:after /* arrows */
	{
		width: 0;
		height: 0;
		border: 0.313em solid transparent; /* 5 */
		border-bottom: none;
		border-top-color: #888; /* dd arrow */
		content: '';
		vertical-align: middle;
		display: inline-block;
		position: relative;
		right: -0.313em; /* 5 */
	}

	/* first level */

	#nav > ul
	{
	height: 1.75em; /* 28 (16) menu height */
	margin-left: 2%;
	margin-right: 2%;
	}
	
		#nav > ul > li 
		{
			height: 100%;
			float: left;
		}
			
		#nav.nav3 > ul > li
		{
			width: 33.33%; /* 51em/3 for three items */
		}
		#nav.nav4 > ul > li
		{
			width: 25%; /* 25% for four items */
		}
		
		#nav > ul > li > a
		{
			height: 100%;
			font-size: 1em; /* 16 main item text size */
			line-height: 1.75em; /* 28/16 text position */
			text-align: center;
			background-color: #EEE; /* menu background */
			opacity: 0.7;
		}
		#nav > ul > li:not( :last-child ) > a
		{
			border-right: 1px solid #666; /* vertical separators in menu bar */
		}
		#nav > ul > li:hover > a,
		#nav > ul:not( :hover ) > li.active > a
		{
			color: #FFF;            /* menu hover */
			background-color: #60B0B0; /* menu hover background */
			opacity: 1;
		}


		/* second level */

		#nav li ul
		{
			background-color: #60B0B0; /* submenu background */
			display: none;
			opacity: 1;
			position: absolute;
			top: 100%;
		}
		
		#nav li ul li a {
			color: #FFF;               /* submenu color */
		}
		#nav li:hover ul
		{
			display: block;
			left: 0;
			right: 0;
			box-shadow: -2px 2px 5px #888;
		}
		#nav li:not( :first-child ):hover ul
		{
			left: -1px;
		}
		#nav li ul a
		{
			font-size: 0.9em; /* text size 14 */
			border-top: 1px solid #666; /* submenu separators */
			padding: 0.4em; /* 6 (16) submenu padding */
		}
		#nav li ul li a:hover,
		#nav li ul:not( :hover ) li.active a
		{
			color: #333;            /* submenu hover */
			background-color: #EEE; /* dropdown hover colour */
		}

@media only screen and ( max-width: 40em ) /* menu four width 40em */
{
	#nav.nav4
	{
		width: 100%;
		position: relative;
		padding: 0;
		margin: 0; 
		top: 28px; /* 28 to keep distance from top fixed */
		left: 0;
	}
}


@media only screen and ( max-width: 35em ) /* menu three width 30em but not less than mobile scr */
{
	#nav.nav3
	{
		width: 100%;
		position: relative;
		padding: 0;
		margin: 0;
		top: 28px; /* 28 to keep distance from top fixed */
		left: 0;
	}
}

@media only screen and ( max-width: 35em ) /* 560 px */
{
	#nav
	{
		position: relative;
		top: auto;
		left: auto; 
	}
		#nav > a
		{
			width: 2.5em; /* 40 menu icon */
			height: 2.5em; /* 40 menu icon */
			text-align: left;
			text-indent: -9999px; 
			background-color: #EEE; /* menu icon */
			position: absolute;
		
			right: 2%;
		}
			#nav > a:after
			{
				position: absolute;
				height:.25em;
				border-top: .75em double #333;
				border-bottom: .25em solid #333;
				top: 25%;
				left: 20%;
				right: 20%;
				content: '';
			}

		#nav > a
		{
			display: block;
		}


	/* first level */

	#nav > ul
	{
		height: auto;
		display: none;
		position: absolute;
		top: 40px;
		left: 50%;   
		right: 0;  
		box-shadow: -3px 3px 5px #888;
	}
		#nav:hover > ul
		{
			display: block;
		}
		#nav.nav3 > ul > li,
		#nav.nav4 > ul > li		
		{
			width: 100%;
			float: none;
		}
		
		#nav > ul > li > a
		{
			height: auto;
			text-align: left;
			padding: 7px; 
			opacity: 1;
		}
		
		#nav > ul > li:hover > a,
		#nav > ul:not( :hover ) > li.active > a
		{
			color: #FFF;            /* menu hover */
			background-color: #60B0B0; /* menu hover background */
			border-left: 1px solid #666; /* separator from callout */
			opacity: 1;
		}
		
		#nav > ul > li:not( :last-child ) > a
		{
			border-right: none;
			border-bottom: 1px solid #666; /* accordion horizontal separator */
		}

	#nav span:after /* arrows */
	{
		display: none;
	}
	#nav span:before /* arrows */
	{
		width: 0;
		height: 0;
		border: 0.375em solid transparent; /* 6 */
		border-left: none;
		border-right-color: #888; /* dd arrow */
		margin-right: 0.5em;
		content: '';
		vertical-align: middle;
		display: inline-block;
		position: relative;
	}


		/* second level */
		
		.phfixed #nav li:hover .submenucontainer
		{
			position: fixed;
			top: 5px;
			bottom: 5px;
			right: 48%;
			width: 50%;
			overflow: auto;
		}

		.phfixed #nav li:hover ul
		{
			position: relative;
			width: 85%;
			box-shadow: -2px 2px 5px #888;
		}
		
		.phscroll #nav li:hover ul
		{
			position: absolute;
			right: 100%;
			left: -90%;
			top: 0;
			box-shadow: -2px 2px 5px #888;
		}
		
		.phscroll #nav li:not( :first-child ):hover ul
		{
			top: -1px;
			left: -90%;
		}
		
		.phfixed #nav li:nth-child(1):hover ul
		{
			left: 15%;
			top: 63px;
		}
		
		.phfixed #nav li:nth-child(2):hover ul
		{
			left: 15%;
			top: 106px;
		}
		
		.phfixed #nav li:nth-child(3):hover ul
		{
			left: 15%;
			top: 149px;
		}
		
		.phfixed #nav li:nth-child(4):hover ul
		{
			left: 15%;
			top: 192px;
		}
		
		#nav li ul li a
		{
			padding: 6px 3px 6px 10px;
		}
		
		#nav li ul li:first-child a
		{
			border-top: 0; 
		}

}