#nav{
	overflow: visible;
	text-align: right;
	float: right;
	width: 50%;
}

#nav a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #33405d;
	text-decoration: none;
	padding: 3%;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	margin: 0px;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	transition: all 0.8s ease;
	text-transform: uppercase;
}

@media only screen and (max-width: 800px) {
#nav a {
	display: block;
	text-align: left;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCC;
	padding: 1% 5%;
		}
}

#nav a:hover{
	background-color: #33405d;
	color: #FFF;
	box-shadow: 1px 1px 5px #CCCCCC;
}


/*-----------------------Side Navigation----------------------------*/
#nav_right{
	width:24%;
	float:right;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 3%;
	padding-bottom: 3%;
	padding-left: 3%;
}
@media only screen and (max-width: 800px) {
#nav_right{
	width: auto;
	float:none;
	clear: both;
	padding: 0%;
	border-top-style: dotted;
	border-top-width: 1px;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	}
}
#nav_right ul{
	padding-left: 0px;
	list-style-type: none;
}
#nav_right li a{
	text-decoration: none;
	padding: 3% 7%;
	color: #33405d;
	font-size: 90%;
	display: block;
	background-color: #F3F3F3;
	margin-bottom: 1%;
	border-radius:8px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
	font-weight: bold;
	}
#nav_right li a:hover{
	background-color: #CCC;
	}