nav {
	float: right;
	padding: 20px;	
}

a.mainlinks {display: block; text-decoration: none; color:#ffffff; font-weight: bold; font-size: 18px;}
a.mainlinks:hover {display: block; text-decoration: none; color: #02b1ff;}

#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	background: #4C8FEC url("menu-icon.png") center;
}

a:hover#menu-icon {
	background-color: #444;
	border-radius: 4px 4px 0 0;
}

ul {
	list-style: none;
}

li {
	display: inline-block;
	float: left;
	padding: 10px
}


.current {
	color: #2262AD;
}

/*MEDIA QUERY*/
@media only screen and (max-width : 810px) {

	.header {

		position: absolute;

	}

	#menu-icon {

		display:inline-block;

	}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 0px;
		background: #fff;
		border: 1px solid #1e5e9c;
		right: 20px;
		top: 30px;
		width: 40%;
		border-radius: 4px 0 4px 4px;
		z-index:1000;

	}

	nav li {
		text-align: left;
		width: 100%;
		padding: 5px 5px;
		margin: 0;
		border: 1px solid #1e5e9c;
		background-color: #3f8fd5;
	}

	nav li a { 
        	display: block;
        	padding: 5px;
	}

	nav li a:hover { background-color:#c0e6f6; }


	nav:hover ul {
		display: block;
	}