nav{float:right;}
.sf-menu {padding-right:34px;}
.sf-menu > li {
	position:relative;
	float:left;
	font:normal 14px/17px Arial, Helvetica, sans-serif;
	margin-right:10px;
}
	.sf-menu > li > a {
		display:block;
		padding:33px 23px 34px;
		color:#7b7473;
	}
		.sf-menu > li.sfHover > a,.sf-menu > li > a:hover, .sf-menu > li.current > a {text-decoration:none; color:#6c90ba; background:#ededed;}
/***submenu***/
.sf-menu ul {
	position:absolute;
	top:-999em;
	z-index:99;
	width:167px; 
	display:none;
	padding:10px 4px;
	background: url(../../clearviewmirrorglass.com/images/submenu-bg.gif) 21px top no-repeat #fff;
	box-shadow: 0px 2px 4px rgba(0,0,0,0.12);
	-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.12);
	-webkit-box-shadow:0px 2px 5px rgba(0,0,0,0.12);
}
.sf-menu li li{
	width:100%;
	padding:0;
	margin-bottom:1px;
	position:relative;
	font:normal 13px/16px Arial, Helvetica, sans-serif;
}
	.sf-menu li li a{display:block; padding:7px 17px; color:#7b7473;}
		.sf-menu li li > a:hover,.sf-menu li li.sfHover > a{ background-color:#acc6ca; color:#fff; text-decoration:none;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:0px;
	top:86px;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:-999em;
}
/***subsubmenu***/
.sf-menu ul ul{background-image:none;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:176px;
	top:-10px;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:-999em;
}

/* Design for a width of 768px */
@media only screen and (max-width: 995px){
	.sf-menu {padding-right:0px;}
	.sf-menu > li {margin-right:3px;}
	.sf-menu > li > a {padding:33px 13px 34px;}
	.sf-menu ul {width:130px;}
	.sf-menu li li a{display:block; padding:7px 10px; color:#7b7473;}
	ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left:140px;}
	.sf-menu > li > a .arrow{display:block; height:4px; width:100%; position:absolute; left:0; top:55px; background:url(../images/menu-arrow.gif) center top no-repeat;}
		.sf-menu > li.sfHover > a .arrow,.sf-menu > li > a:hover .arrow, .sf-menu > li.current > a .arrow{background-position:center bottom;}
	/***submenu***/
	.sf-menu ul {background-image:none;}
}

/* Design for a width of 480px*/
@media only screen and (max-width: 767px) {
	nav{float:none;}
	.sf-menu > li {float:none; margin-right:0px; margin-bottom:8px;}
	.sf-menu > li > a {background:#ededed; padding:13px 21px; color:#6c90ba;}
		.sf-menu > li.sfHover > a,.sf-menu > li > a:hover, .sf-menu > li.current > a {color:#fff; background:#a3c0c4;}
	.sf-menu > li > a .arrow{display:inline-block; height:4px; width:7px; position:static; background:url(../images/menu-arrow2.gif) center top no-repeat; margin-left:7px; vertical-align:2px;}
		.sf-menu > li.sfHover > a .arrow,.sf-menu > li > a:hover .arrow, .sf-menu > li.current > a .arrow{background-position:center bottom;}
	/***submenu***/
	.sf-menu ul {position:static; width:auto; padding:10px; background: url(../images/submenu-bg2.gif) 21px top no-repeat #ededed; box-shadow: none; -moz-box-shadow:none; -webkit-box-shadow:none;}
	.sf-menu li li{margin-bottom:1px;}
	.sf-menu li li a{display:block; padding:7px 21px; color:#7b7473;}
		.sf-menu li li > a:hover,.sf-menu li li.sfHover > a{ background-color:#acc6ca; color:#fff; text-decoration:none;}
	.sf-menu li li  a .arrow{display:inline-block; height:4px; width:7px; position:static; background:url(../images/menu-arrow2.gif) center top no-repeat; margin-left:7px; vertical-align:2px;}
		.sf-menu li li.sfHover a .arrow,.sf-menu li li a:hover .arrow, .sf-menu li li.current > a .arrow{background-position:center bottom;}
	/***subsubmenu***/
	.sf-menu ul ul {padding-right:0px; background: url(../images/submenu-bg2.gif) 21px top no-repeat #ededed;}
}

/* Design for a width of 320px */
@media only screen and (max-width: 479px){
}