nav ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility: hidden; /*IE6 rule*/
}

nav ul#main-menu{
margin: 0;
padding: 0;
list-style: none;
position:relative;
text-align: center; /*set value to "left", "center", or "right"*/
}

nav ul#main-menu li{
display: inline;

}

nav ul#main-menu li a{
font-family:"Font",Arial, "Times New Roman", Times, serif;
font-size:1.7em;
font-weight:500;
color: #FFF;
padding:25px;
text-decoration: none;
display:inline-block;
}


nav ul#main-menu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
/* border-bottom:5px solid navy; */
background-image:url(../images/active-state.png);
background-position:center 45px;
background-repeat:no-repeat;
}

nav ul#main-menu a.selected
{
	color:#26b864 !important;
}

/**********************************************/

@media (max-width: 1024px) 
{
	nav ul#main-menu li a
	{
		padding: 25px 20px;
		font-size:1.6em;
	}
}

@media (max-width: 880px) 
{
	nav ul#main-menu li a
	{
		padding: 25px 15px;
		font-size:1.5em;
	}
}

@media (min-width: 801px) 
{
	nav ul#main-menu
	{
		display:block !important;
	}
	
	nav a#pull
	{
		display:none;
		color:#FFF;
	}
}

@media (max-width: 800px) 
{
	nav a#pull
	{
		display:block;
	}
	
	nav ul#main-menu
	{
		display:none;
		position:absolute;
		top: 85px;
		right: 20px;
		border: 1px solid #333;
	}
	
	nav ul#main-menu li
	{
		display:block;
	}
	
	nav ul#main-menu li a
	{
		padding:15px;
		background-color: #161616;
		border-bottom: 1px solid #333;
		min-width: 150px;
	}
	
	nav ul#main-menu li a:hover
	{
		background-color:#26b864;
		color:#000;
	}
	
	nav ul#main-menu li a.selected:hover
	{
		color:#000 !important;
	}
	
	nav ul#main-menu li.active
	{
		background:none;
	}
	
	nav a#pull:after 
	{
		content:"";
		background: url('../images/nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 45px;
	}
		
	nav a#pull
	{
		display:block;
		color:#FFF;
	}
}