nav{float:right;}
.sf-menu {padding-right:11px;}
.sf-menu > li {
	position:relative;
	float:left;
	font:bold 12px/15px Arial, Helvetica, sans-serif;
}
	.sf-menu > li > a {display:block; color:#232323; padding:44px 24px 37px;}
		.sf-menu > li.sfHover > a,.sf-menu > li > a:hover, .sf-menu > li.current > a {text-decoration:none; background:#ffcc00;}

/***submenu***/
.sf-menu ul {
	position:absolute;
	top:-999em;
	z-index:99;
	width:136px; 
	display:none;
	padding:12px 3px;
	background:url(../images/submenu-marker.gif) 25px 0 no-repeat #373737;
}
.sf-menu li li{
	width:100%;
	position:relative;
	font:12px/15px Arial, Helvetica, sans-serif;
}
	.sf-menu li li a{display:block; color:#f1f1ee; padding:2px 10px 3px 22px;}
		.sf-menu li li > a:hover,.sf-menu li li.sfHover > a{color:#232323; text-decoration:none; background:#dededa;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:0px;
	top:101px;
}
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:140px;
	top:-12px;
}
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 > li > a {padding:44px 10px 37px;}
	.sf-menu > li > a .arrow{display:block; width:100%; height:4px; background:url(../images/menu-arrow.png) center top no-repeat; position:absolute; top:62px; left:0px;}
}

/* Design for a width of 320px and 480px*/
@media only screen and (max-width: 767px) {
	nav{float:none;}
	/*menu*/
	.sf-menu {padding-right:0px;}
	.sf-menu li{float:none; background:#ffcc00; margin-bottom:6px; margin-right:0;}
		.sf-menu > li > a{padding:12px 25px;}
			.sf-menu > li.sfHover > a,.sf-menu > li > a:hover, .sf-menu > li.current > a {background:#373737; color:#f1f1ee;}
		.sf-menu > li > a .arrow{display:inline-block; width:7px; position:static; 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:100%; padding:12px 0; background:url(../images/submenu-marker1.gif) 25px 0 no-repeat #ffcc00;}
		.sf-menu ul li{padding:0 10px; width:auto; margin-bottom:0;}
		.sf-menu ul li a{color:#232323; padding:7px 15px;}
			.sf-menu li li a:hover,.sf-menu li li.sfHover > a{color:#f1f1ee; background:#373737;}
			.sf-menu li li a .arrow{display:inline-block; width:7px; height:4px; background:url(../images/menu-arrow.png) center top no-repeat; margin-left:7px; vertical-align:2px;}
				.sf-menu li li a:hover .arrow,.sf-menu li li.sfHover > a .arrow{background-position:center bottom;}
	/*subsubmenu*/
	.sf-menu ul ul{width:100%; background:url(../images/submenu-marker1.gif) 25px 0 no-repeat #ffcc00;}
		.sf-menu ul ul li{padding-right:0;}
}