﻿#nav-wrap {
	margin-top: 00px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}


#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	padding:0px;
	margin:0px;
	
}

/* nav link */
#nav a {
    display: block;
    font-size: 14px;
    font-family: 'RobotoCondensed';
    color: #fff;
    text-decoration:none;   
    text-transform:uppercase;
    padding: 45px 15px 15px 15px;
    background: url(../images/menu-div.png) no-repeat left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#nav a:hover {
	_background-color: #f8f8f8;
	color: #000;
}

#nav li:hover>a {
    _background-color: #f8f8f8;
    color: #000;
    
}

#nav .active>a, #nav .active>a:hover {
    background-color: #164651;
	border-bottom: 2px solid #fff;
    color: #fff;
	box-shadow: inset 0px 0px 10px #2f5e00;
}

/* nav dropdown */
#nav ul {
	background: #f6f6f6;
	padding: 10px 0px;
	position: absolute;
	display: none; /* hide dropdown */
	width: auto;
	z-index:99999;
	margin-top:0px;
    box-shadow: 0px 5px 8px #c8c8c8;
	
}
#nav ul li {
	float: none;
	margin: 0px;
	padding: 0px;


}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
	
}


#nav li li a {
    display: block;
    font-size: 13px;
    font-family: 'RobotoRegular';
    color: #5c5d5e;
    text-decoration:none;
    text-transform: none;
    padding: 3px 15px;
    margin:0px;
    line-height:20px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: none;
}
#nav li li a:hover {
	background: none;
	color: #00a651;
}


.navlast { right:15px;}

@media screen and (min-width: 768px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}


/************************************************************************************
IPAD PORTRAIT
*************************************************************************************/
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
body { min-width: 768px; }
#header { clear: both; display: block; max-width:740px; margin:0 auto; float:none; padding:0px; position: relative;}

}

/*
/************************************************************************************
MOBILE
*************************************************************************************/

@media only screen and ( min-width: 240px) and ( max-width: 600px)
{
 
#header { clear: both; display: block; max-width:95%; background:#ccc; margin:0 auto; float:none; padding:0px; position: relative; text-align:left; z-index: 100000000;}
#header .logo {  display:block; padding:10px 0px 0px 0px; margin:0px; float:left; text-align:center; } 
#header .navigation { display:block; padding:0px; margin:0px; float:right; text-align:left;}


	/* nav-wrap */
	#nav-wrap {
		position: absolute;
		display:inline-block;
		padding:0px;
		margin:0px;
		float:right;
		top: 35px;
		right:0px;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		height: 50px;
		line-height:50px;
		background: url(images/menu-icon.png) no-repeat right center;
		padding: 0px 10px 0px 10px;
		width:50px;
		cursor: pointer;
		display: block; /* show menu icon */
		float:right;
		text-align:left;
		
	}
	#menu-icon:hover {
		background:url(images/menu-icon.png) no-repeat right center;
	}
	#menu-icon.active {
		background:url(images/menu-icon-active.png) no-repeat right center;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 50px;
		width: 200px;
		left: -140px;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		box-shadow: 1px 1px 3px #999999;
		display: none; /* visibility will be toggled with jquery */
		
	}
	#nav ul { padding:0px; margin:0px;}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
		padding:0px;
		line-height:25px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0px 0px 0px 10px;
		margin:0px;
		line-height:25px;
		border-left: 2px solid #999;
		color: #333;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* nav dropdown */
#nav ul {
	background: none;
	padding: 0px;
	margin:0px;
	position: absolute;
	display: none; /* hide dropdown */
	width: auto;
	
}
#nav ul li {
	margin: 0px;
	padding: 0px;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
    position: static;
}

#nav li li a:before {
   content: "- ";
}

#nav li li a {
    display: block;
    font-size: 13px;
    font-family: inherit;
    color: #999;
    text-decoration:none;
    text-transform: none;
    padding: 0px 10px;
    margin:0px;
    border:none;
    line-height:25px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: none;
}
#nav li li a:hover {
	background: none;
	color: #666;
}

}








