body{
		background: #eee;
		font: 13px 'trebuchet MS', Arial, Helvetica;
	}

	#nav-wrap {
			margin-left:250px;
	}
		
	#nav, #nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#nav .fa
	{
		font-size:18px !important;
		padding-right:10px;
	}
	
	#nav {
		width: 100%;
		background: #2C84EE;
	}
	
	#nav:before,
	#nav:after {
		content: "";
		display: table;
	}
	
	#nav:after {
		clear: both;
	}
	
	#nav {
		zoom:1;
	}
	
	#nav li {
		display:table-cell;
		text-align:center;
		border-left: 1px solid #0096FF;
    	border-right: 1px solid #005DA0;
    	font-family: Helvetica, Arial, sans-serif;
    	font-weight: bold;
    	font-size: 13px;
    	color: #f3f3f3;
    	text-shadow: 1px 1px 1px rgba(0,0,0,.6);
	}
	
	#nav a {
		float: left;
		width:100%;
		padding-top:12px;
		padding-bottom:12px;
		color: #fff;
		text-transform: uppercase;
		font: bold 12px Arial, Helvetica;
		text-decoration: none;
	}
	
	#nav li:hover > a {
		background-color:#006;
		color: #ccc; /*hover color */
		text-shadow: 1px 1px 1px rgba(0,0,0,.6);
	}
	
	*html #nav li a:hover { /* IE6 only */
		color: #ccc;
	}
	
	#nav ul {
		_margin: 0; /*IE6 only*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 72px;
		z-index: 99999;    
		background: #006699;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-ms-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;  
	}

	#nav li:hover > ul {
		opacity: 1;
		visibility: visible;
	}
	
	#nav ul ul {
		margin-top:-42px !important;
		top:auto;
		left: 241px;
		-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		box-shadow: -1px 0 0 rgba(255,255,255,.3);		
	}
	
	#nav ul ul ul {
		margin-top:-42px !important;
		top:auto;
		left: 154px;
		-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
		box-shadow: -1px 0 0 rgba(255,255,255,.3);	
	}
	
	#nav ul li {
		text-align:left;
		float: none;
		display: block;
		border: 0;
		_line-height: 0; /*IE6 only*/
		-moz-box-shadow: 0 1px 0 #006, 0 1px 0 #006;
		-webkit-box-shadow: 0 1px 0 #006, 0 1px 0 #006;
		box-shadow: 0 1px 0 #006, 0 1px 0 #006;
	}
	
	#nav ul li:last-child {   
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;    
	}
	
	#nav ul a {
		padding: 10px;
		width: 235px;
		_height: 10px; /*IE6 only*/
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
	}
	
	#nav ul ul a {
		padding-top:14.2px;
		padding-bottom:14.2px;
		width: 148px;
	}
	
	#nav ul ul ul a {
		width:100% !important;
	}
	
	#nav ul a:hover {
		background-color: #006;
		color:#fff;
		text-shadow: 1px 1px 1px rgba(0,0,0,.6);
	}
	
	#nav ul li:first-child > a {
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
	}
	
	#nav ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #006699;
	}
	
	#nav ul ul li:first-child a:after {
		left: -6px;
		top: 22px;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #006699;
	}
	
	#nav ul ul ul li:first-child a:after {
		left: -6px;
		top: 22px;
		margin-top: -15px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #006699;
	}
	
	#nav ul li:first-child a:hover:after {
		border-bottom-color: #006; 
	}
	
	#nav ul ul li:first-child a:hover:after {
		border-right-color: #006; 
		border-bottom-color: transparent; 	
	}
	
	#nav ul li:last-child > a {
		-moz-border-radius: 0 0 3px 3px;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}
	
	/* Mobile */
	#nav-trigger {
		display: none;
	}
	
	input[type=checkbox]
		{
			display:none;
		}
	.fa-bars 
	{
		display:none !important;
	}

	@media screen and (max-width: 600px) {

		/* nav-wrap */
		#nav-wrap {
			position: relative;
			margin-top:-20px;
		}
		
		.fa-bars 
		{
			display:block !important;
		}
		
		input[type=checkbox]
		{
			display:block;
			opacity: 0;
			height: 48px;
    		width: 48px;
		}
		
		input[type=checkbox] + span {
    	height: 31px;
    	width: 31px;
		position:absolute;
		z-index:-1;
		margin-top:-50px;
		color:#2C84EE;
		padding:5px;
		font-size:35px;
		}
		
		input[type=checkbox]:checked + span  {
    	background:#61a3f2;
    	height: 31px;
    	width: 31px;
    	padding: 0 0 0 0px;
		color:#fff;
		padding:5px;
		font-size:35px;
		}

		#nav-trigger {
		display: block;
		cursor:pointer
		}
		
		#nav-wrap * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
	
		/* main nav */
		#nav {
			margin: 0; padding:10px 0px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 99999;
			
		}

		#nav:after {
			content: '';
			position: absolute;
			left: 25px;
			top: -8px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
			border-bottom: 8px solid #006;
		}	

		#nav ul {
			position: static;
			visibility: visible;
			opacity: 1;
			margin: 0;
			display:none;
			z-index: 99999;
		}

		#nav ul ul {
			margin: 0 0 0 20px !important;			
		}

		#nav li {
			position: static;
			display: block;
			float: none;
			border: 0;
			padding:5px;
			width:100%;	
			padding-bottom:10px;
			border-bottom:1px solid #006;
			background:#f3f3f3;
			text-shadow:none !important;
			
		}
		
		
		#nav li:hover ul
		{
			display:block;
		}
		
		#nav ul li:hover ul ul
		{
			display:block;
		}
		
		label {display:block;}
		label ~ input[type="checkbox"] ~ #nav-wrap #nav {display:none;}
		label ~ input[type="checkbox"]:checked ~ #nav-wrap #nav {display:block;}​
		
		

		#nav ul li{
			margin-left: 5px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;		
		}

		#nav a{
			display: block;
			float: none;
			padding: 0;
			color: #000;
		}

		#nav a:hover{
			color: #006;
		}	

		#nav ul a{
			padding: 0;
			width: auto;		
		}

		#nav ul a:hover{
			background: none;	
		}

		#nav ul li:first-child a:after,
		#nav ul ul li:first-child a:after {
			border: 0;
		}		

		#nav ul li{
			display:none;
		}
	}

	@media screen and (min-width: 600px) {
		#nav {
			display: block !important;
		}
	}	

	/* iPad */
	.no-transition {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		opacity: 1;
		visibility: visible;
		display: none;  		
	}

	#nav li:hover > .no-transition {
		display: block;
	}