.sf-menu {
	background: #c00 url(/img/bg-1.png) repeat-x;
	font-family: corbel,tahoma,sans-serif;
	font-size: 0.85em;
	padding: 0 0 4.9em 1.6em;
	position: relative;
}

.sf-menu acronym{
	cursor:inherit
}

.sf-menu ul{
	position:absolute;
	top:-9999px;
	left:0;
	width:100%
}

.sf-menu li{
	float:left;
	position:static;
	margin:0 1px 0 0
}

.sf-menu li:hover{
	visibility:inherit /* fixes IE7 'sticky bug' */
}

.sf-menu a{
	display:block;
	position:relative;
	padding:11px 16px 7px 16px;
	text-decoration:none;
	color:#494949;
	outline: 0
}

.sf-menu li:hover ul, .sf-menu li.sfHover ul{
	left:0;
	top:34px; /* match top ul list item height */
	z-index:99
}

.sf-menu ul a{
	padding:8px 15px;
	text-decoration:none;
	color:#fff
}

/*** arrows **/
.sf-menu a.sf-with-ul{
	padding-right:22px;
	min-width:1px /* trigger IE7 hasLayout so spans position accurately */
}

.sf-sub-indicator{
	position:absolute;
	display:block;
	right:10px;
	top:18px;
	width:9px;
	height:5px;
	text-indent:-9999px;
	overflow:hidden;
	background:url(/img/sprite-1.png) no-repeat
}

/* apply hovers to modern browsers */
.current a.sf-with-ul .sf-sub-indicator,
a:focus .sf-sub-indicator,
a:hover .sf-sub-indicator,
a:active .sf-sub-indicator,
li:hover a .sf-sub-indicator,
li.sfHover a .sf-sub-indicator{
	background-position:0 -35px /* arrow hovers for modern browsers*/
}

.sf-menu li li{
	position:relative
}

.sf-menu ul li{
	width:auto;
	float:left;
	margin:0
}

.sf-menu li.current a,
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu li li.current,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active{
	color:#fff;
	background:url(/img/bg-2.png) repeat-x
}

.sf-menu ul li.current a{
	background:transparent
}

.sf-menu li.sfHover a{
	color:#fff
}

.current-link,
.sf-menu ul li:hover,
.sf-menu ul li.sfHover,
ul.sf-menu ul li:hover li,
ul.sf-menu ul li.sfHover li,
.sf-menu ul a:focus,
.sf-menu ul a:hover,
.sf-menu ul a:active{
	text-decoration:underline;
	background:transparent
}



/* BEGIN: iPhone ================== */
@media screen and (max-device-width: 480px){
	.sf-menu {
		background: none;
		padding:0;
		border-bottom:1px solid #ddd;
		font-size: 1.1em;
	}
	
	.sf-menu > li{
		float:none;
		margin:0;
		border-top:1px solid #ddd
	}
	
	.sf-menu > li > a{
		padding-bottom:11px
	}
	
	.sf-menu ul{
		position:relative !important;
		top:0
	}
	
	.sf-menu ul li{
		float:none
	}
	
	.sf-menu li.sfHover ul{
		top:0;
		font-size: 0.8em;
		padding:0 0 0 5%;
		background:#c00
	}
}
/* END: iPhone ================== */