@import "compass/css3";

base-font-size    16px!default;
base-line-height  24px!default;
base-spacing-unit base-line-height!default;

body {
	background: grey;
	color: #555;
}

.header {

	width: 100%;
	background-color: #4C8FEC;
	height: $base-line-height * 2;
	margin-top: $base-line-height;
}

a {

	color: black;
	text-decoration: none;
	font-weight: bold;
	&:hover {
	color: white;

}

}

.current {

	color: white;

}

.menu-icon1 {

	display:inline-block;
	width: 100%;
	height: $base-line-height * 2;
	color: black;
	line-height: $base-line-height * 2;
	text-align: center;;

	}


	nav ul, nav:active ul {

		display: none;
		position: relative;
		padding: 0 $base-spacing-unit;
		background: #4C8FEC;
		width: 100%;
		list-style: none;

	}

	nav li {

		text-align: left;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {
		display: block;
	}


/*MEDIA QUERY*/

// @include media-query(desk){
  

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

nav {

	float: left;

	
	.menu-icon1 {
		display: none;
	}	
}

nav ul, nav:active ul {

		display: inline;
		padding: 0;
		width: 100%;
		
	}

	nav li {

		display: inline-block;
		width: auto;
		padding: 0 $base-spacing-unit;
		line-height: $base-line-height * 2;

	}


}