/* nav */
#nav {
	position: relative;
	margin: 20px 0;
	padding-right:2%;
	
}
#nav ul {
	margin: 0;
	padding: 0;
}
#nav li {
	text-align:center;
	font-size:25px;
	font-family:"Lucida Sans Unicode";
	margin: 0px 5px 5px 0px;
	padding: 1%;
	list-style: none;
	display: inline-block;
	width:100%;
	background-color:#000000;
	border-radius:51px;
}
#nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #ffffff;
	width:100%;
}
#nav li:hover {
	background-color: #9a9a9a;
}


#wrap
{
background-color: #fff;
width:100%;
height:100%;
top:0%;
left:0%;
}
#header
{
background-color: #ffffff; 
width:100%; 
height:20%;
position:absolute;
top:0%;
left:0%;
}
#navigation
{
background-color: #000000;
width:9%;
height:80%;
position:absolute;
top:20%;
left:0%;
z-index:1;
}
#body
{
background-color:#9a9a9a; 
width:91%;
height:80%;
position:absolute;
top:20%;
left:9%;
} 

@media screen and (max-width: 600px) {
	#nav {
		position: fixed;
		min-height: 40px;
		
	}	
	
	#navigation{
	position:fixed;
	
	
	}
	#nav ul {
		width: 115px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #fff url(images/icon-menu#png) no-repeat 9px 10px;
		
	}
	#nav li {
		align:center;
		text-align:center;
		font-size:15px;
		font-family:Arial;
		width:115px;
		display: none; /* hide all <li> items */
		margin-left: 0;
		display:none;
	}
	#nav #current {
		display: block; /* show only current <li> item */
	}
	#nav a {
		display: block;
		padding: 5px 5px 5px 32px;
		text-align: left;
	}
	#nav #current a {
		background: none;
		color: #666;
	}

	/* on nav hover */
	#nav ul:hover {
		background-image: none;
	}
	#nav ul:hover li {
		display: block;
		margin: 0 0 5px;
	}
	#nav ul:hover #current {
		background: url(images/icon-check#png) no-repeat 10px 7px;
	}

	/* right nav */
	#nav#right ul {
		left: auto;
		right: 0;
	}

	/* center nav */
	#nav#center ul {
		left: 50%;
		margin-left: -90px;
	}
	
}