/*

*/

.handheld-hidden
{
	display: none;
}

#navbox input,
#togglemenu
{
/*	Put all the buttons and the neutral radio button off screen	*/
	left: -9999px;
	display:none;
	position: absolute;
}

#nav-jacket
/*	Use position: fixed to pin the nav bar to the top of the screen
	Use position: absolute to let it scroll off screen	*/
{
	height: 48px;
	position: relative;
	margin: 0 auto;
	max-width: 1280px;
	z-index: 10000;
}

#navbox
/*	The container for all the nav items	*/
{
	font-family: 'ABeeZee', sans-serif;
	letter-spacing: 2px;
	position: relative;
}

#navbox label
{
	display: block;
}

#navbox label.togglemenu
/*	The 3 bars to show/hide the main menu	*/
{
	background: url(../files/1/mobile_menu_icon.gif) no-repeat center center;
	float: right;
	height: 48px;
	position: relative;
	width: 48px;
	z-index: 100;

	transition: 1s; 
	-webkit-transition: 1s;
}

#navbox #togglemenu:checked ~ label.togglemenu
/*	Change the 3 bars into an X when clicked	*/
{
	background: url(../files/1/mobile_menu_close.gif) no-repeat center center;
}

#navbox ul
/*	The main and sub menu dropdowns	*/
{
	position: relative;
	z-index: 100;
}

#navbox > ul
/*	The main menu	*/
{
	clear: both; 
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	width: 100%;
}

#navbox #togglemenu:checked ~ ul
/*	This equates to #navbox > ul	*/
{
	max-height: 3000px;
	opacity: 1;
}

#x-navbox .dropdown:before
/*	Put the down arrow in front of an item with a dropdown	*/
{
	border: 2px solid #fff;
	border-color: transparent #fff #fff transparent; /* colordef: dropdown arrow */
	content: "";
	float: left;
	height: 6px;
	left: 15px;
	margin: 0;
	position: relative;
	top: 34px;
	width: 6px;
	z-index:100;
 
	transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	-ms-transform: rotate(45deg);

	transition: 1s; 
	-webkit-transition: 1s;
}

#navbox ul li a,
#navbox ul li label
/*	Each menu item is either an a (standalone) or a label (reveals dropdown)	*/
{
	border-top: 1px solid #fff;
	color: #fff;
	display: block;
	font-size: 1.3em;
	letter-spacing: 2px;
	padding: 16px 30px;
	position: relative;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
	text-transform: uppercase;
}

#navbox ul li label
{
	padding: 6px 0 0 22px;
}

#navbox label.closetop
/*	This is placed over the top of label.opentop to allow closing of dropdown	*/
{
	border-top: none;
	display: none;
	height: 50px;
	margin-top: -50px;
	padding: 0;
	width: 100%;
}

#navbox .dropdown div
/*	The container for the dropdown submenus	*/
{
	max-height: 0;
	overflow: hidden;
	position: static;
	z-index: 0;

	transition: .5s;
	-webkit-transition: .5s;
}

#navbox .dropdown ul
/*	The dropdown submenus	*/
{
	background: #65895C;
	display: block;
	margin: 0;
	max-width: 100%;
	padding: 0 0 0 10px;
	width: 100%;
}

#navbox .dropdown a
/*	The dropdown subitems	*/
{
	border-top: 1px solid #ccc;
	font-size: 1.1em;
	padding: 10px 30px;
}

#navbox ul li ul li
/*	The subitems for hidden dropdowns	*/
{

}

/**********************************
***       Only for mobiles	***
**********************************/
@media screen and (max-width: 699px)
{

	#nav-jacket
	{
		margin-top: -48px;
	}

	#navbox label
	{
		cursor: pointer;
	}

	#navbox ul
	{
		background: #65895C;

		transition: 1.5s; 
		-webkit-transition: 1.5s;
	}

	#navbox ul li input:checked + div div
	/*	Reveal the submenu dropdown when button clicked	*/
	{
		max-height: 1500px;
		z-index: 1;
	}

	#navbox .dropdown ul
	{
		background: #65895C; /* dropdown submenu bg */
	}

	#navbox ul li input:checked + div label.opentop
	/*	The label of the button clicked	*/
	{
		background: #65895C;
	}

	#navbox ul li input:checked + .dropdown:before
	/*	When ticked turn the arrow 180 degrees */
	{
		top: 36px;

		transform: rotate(225deg); 
		-webkit-transform: rotate(225deg); 
		-ms-transform: rotate(225deg);
	}

	#navbox ul li input:checked + div .closetop
	/*	Put the label.closetop into place when the label.opentop has been clicked	*/
	{
		display: block;
	}

	#navbox ul ul a
	{
		background: #506B49;
	}

}

/**********************************
***     Only for full screen	***
**********************************/
@media screen and (min-width: 700px)
{

	.handheld-hidden
	{
		display: initial;
	}

	.handheld-only
	{
		display: none !important;
	}

	#nav-jacket
	/*
		position: fixed to pin it to the top of screen
		position: absolute to let it scroll up
	*/
	{
		background: #65895C;
	}

	#navbox label.togglemenu
	{
		display: none;
	}

	#navbox
	{
		border-bottom: none;
		height: 48px;
	}

	#navbox a
	{
		background: url(../files/1/menu-hover.gif) no-repeat;
		background-position: -180px 46px;

		transition: 1s;
		-webkit-transition: 1s;
	}

	#navbox a:hover
	{
		background-position: -0 46px;
	}

	#navbox > ul
	{
		float: left;
		margin-left: 50px;
		max-height: none;
		opacity: 1;
		overflow: visible;
		width: auto;
	}

	#navbox .dropdown
	{
		position: relative;
	}

	#navbox .dropdown:before
	{
		float: right;
		left: auto;
		right: 0;
		top: 20px;
	}

	#navbox .dropdown div
	{
		border-bottom: 1px solid #506B49;
		border-left: 1px solid #506B49;
		border-right: 1px solid #506B49;
		max-height: 0;
		position: absolute;
		opacity: 0;

		transition: .5s;
		-webkit-transition: .5s;
	}

	#navbox .dropdown ul
	{
		padding: 0;
	}

	#navbox > ul > li > a
	{
		border-top: 0;
		float: left;
	}

	#navbox ul li label,
	#navbox > ul > li > a
	{
	/*	font-size: 1em; */
		height: 48px;
		line-height: 48px;
		padding: 0 15px;

		transition: .5s; 
		-webkit-transition: .5s;
	}

	#navbox ul li label
	{
		padding-top: 2px;
	}

	#navbox .dropdown a
	/*	The dropdown subitems	*/
	{
		border-top: none;
	/*	font-size: .9em; */
		padding: 10px 30px;
		white-space: nowrap;

		transition: .5s; 
		-webkit-transition: .5s;
	}

	#navbox > ul > li > a:hover,
	#navbox ul li ul li a:hover
	{
		background-color: #506B49;
	}

	#navbox > ul > li > div
	{
		float: left;
	}

	#navbox > ul > li > div label
	{
		border-top: 0;
	}

	#navbox ul li .opentop:hover ~ div,
	#navbox .dropdown div:hover
	{
		max-height: 1500px;
		opacity: 1;
		z-index: 1;
	}

}