/*------------------------------------*\
	RESET
\*------------------------------------*/
@media (min-width: 861px)
{
	#nav, #nav li
	{
		margin:0;
		padding-left:0px;
	}
	#nav
	{
		list-style:none;
		font-weight:bold;
		/* Clear floats */
		float:left;
		width:100%;
		cursor: default;
	}
	#nav li
	{
		float:left;
		position:relative;
	}
	#nav a
	{
		display:block;
		padding:8px 5px 8px 5px;
		text-decoration:none;
		font-weight: bold;
		color:#555;
		font-size: 12px;
	}
	#nav a:hover
	{
		
	}
	
	/*--- DROPDOWN ---*/
	#nav li ul
	{
		position:absolute;
		left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	}
	#nav li ul img
	{
		margin-bottom: -4px;
		margin-left: 14px;
	}
	#nav ul
	{
		background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
		/*background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
		list-style:none;
		margin-left: 0px;
	}
	#nav ul li
	{
		float:none;
	}
	#nav ul a
	{
		white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
	}
	#nav li.hover ul
	{
		left:0px; /* Bring back on-screen when needed */
		top: 32px;
	}
	#nav li.hover ul
	{ /* Display the dropdown on hover */
		background-color: #FBFCFD;
		padding: 0px;
		border: 1px solid #D3D3D3;
		border-top: none;
		-webkit-box-shadow: 2px 2px 2px 0px rgba(51,51,51,0.5);
		-moz-box-shadow: 2px 2px 2px 0px rgba(51,51,51,0.5);
		box-shadow: 2px 2px 2px 0px rgba(51,51,51,0.5);
		z-index:20000;
		border-top:2px solid gray;
	}
	#nav li ul li
	{
		z-index: 50;
	}
	#nav li.hover ul li
	{
		border-left: none;
		padding-left: 0px;
	}
	#nav li.hover a
	{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
		color: #333;
		background-color: #EAEBEC;
	}
	#nav li.hover ul a
	{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
		border: none;
		padding-bottom: 5px;
		background-color: #FBFCFD;
	}
	#nav li.hover ul li a
	{ /* links inside of the expanded dropdown */
		font-weight: normal;
		float: none;
	}
	#nav li.hover ul li a:hover
	{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
		text-decoration: none;
		background-color: #EAEBEC;
	}
}