/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding:	 0;
	list-style: none;
}
.sf-menu {
	line-height:	1.20;
	margin-bottom:	1em;
	width: 80%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}


.sf-menu ul {
	position: absolute;
	top: -999em;  /* <----  This hide the SubMenu off Screen) ----<<  */
	width: 260px; /* left offset of SubMenus need to match (see below) */
	
}
.sf-menu ul li {
	width: 260px;
}
.sf-menu li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float: left;
	position: relative;
	width: 16%; /* <----  Adjust this based on number of tabs  (100 dived by # of Tabs) ----<<   */
}
.sf-menu a {
	display: block;
	position: relative;
	/*overflow: hidden;*/
}
.sf-menu li:hover ul {
	left: -30px;
	top: 60px; /*    <----  This shows the Submenu - Adjust this to move Sub menu up and down ----<<   */
	z-index: 99;
}


/*** DEMO SKIN ***/


.sf-menu a.sub {
	border-left: 0;
	border-top:	 0;
	padding: .75em .4em;
	font-family: Arial, sans-serif;
	font-size: 10pt;
	color: #ffffff;
	text-decoration: none;
	border: none;
	text-align:center;
}

.sf-menu a.sub:hover, .sf-menu a.sub:focus, .sf-menu a.sub:active {
	border-left: 0;
	border-top:	 0;
	padding: .75em .4em;
	font-family: Arial, sans-serif;
	font-size: 10pt;
	color: #FDF400;
	text-decoration: none;
	border: none;
	text-align:center;
}



.sf-menu a.top_nav {
	border-left: 0;
	border-top:	 0;
	padding: .75em .4em;
	font-family: Arial, sans-serif;
	font-size: 1.19em;
    line-height: 1.25em;
	color: #ffffff;
	text-decoration: none;
	border: none;
	outline: 0;
	text-align:center;
}

.sf-menu a.top_nav:hover, .sf-menu a.top_nav:focus,  .sf-menu a.top_nav:active {
	border-left: 0;
	border-top:	 0;
	padding: .75em .4em;
	font-family: Arial, sans-serif;
	font-size: 1.19em;
    line-height: 1.25em;
	color: #FDF400;
	text-decoration: none;
	border: none;
	outline: 0;
	text-align:center;
}

/*For MultiLIne (ie; Staff Resources) */
.sf-menu a.top_navMulti {
	border-left: 0;
	border-top:	 0;
	padding: .75em .4em;
	font-family: Arial, sans-serif;
	font-size: 1.19em;
    line-height: 1.25em;
	color: #ffffff;
	text-decoration: none;
	border: none;
	outline: 0;
	text-align:center;
}

.sf-menu a.top_navMulti:hover, .sf-menu a.top_navMulti:focus,  .sf-menu a.top_navMulti:active {
	border-left: 0;
	border-top:	 0;
	padding: .75em .4em;
	font-family: Arial, sans-serif;
	font-size: 1.19em;
    line-height: 1.25em;
	color: #FDF400;
	text-decoration: none;
	border: none;
	outline: 0;
	text-align:center;
}


.sf-menu li, .sf-menu li li a {
	background: none;
    top: 0px;
}
.sf-menu li li {
	background-color: #7F0335;
	/*background-color: #444444;*/
    margin-left: 0px;
	/*height: 35px;*/
	margin: -10px 0px 0px 0px;
	padding-left: 7px;
}



.sf-menu li li li {
	background: #7F0335;
}


.sf-menu li:hover {
	border-left: 0;
	border-top:	 0;
	border: none;
	outline: 0;
}


	
a.showSubMenu1 {
	display: none;
}


img.SubMenu1,img.SubMenu2,img.SubMenu3,img.SubMenu4,img.SubMenu5,img.SubMenu6 {
	vertical-align:middle;
	display: none;
}


/*============= RESPONSIVE DESIGN =================*/

@media screen and (max-width: 1265px){
	
	/*For MultiLIne (ie; Staff Resources) */
	.sf-menu a.top_navMulti {
		border-left: 0;
		border-top:	 0;
		padding: .25em .4em;
		font-family: Arial, sans-serif;
		font-size: 1.19em;
		line-height: 1.25em;
		color: #ffffff;
		text-decoration: none;
		border: none;
		outline: 0;
		text-align:center;
	}

	.sf-menu a.top_navMulti:hover, .sf-menu a.top_navMulti:focus,  .sf-menu a.top_navMulti:active {
		border-left: 0;
		border-top:	 0;
		padding: .25em .4em;
		font-family: Arial, sans-serif;
		font-size: 1.19em;
		line-height: 1.25em;
		color: #FDF400;
		text-decoration: none;
		border: none;
		outline: 0;
		text-align:center;
	}
	
}

@media screen and (max-width: 935px){
	
	.sf-menu a.top_nav {
		padding: .95em .4em;
		font-size: 1.06em;
		line-height: 1.20em;
	}

	.sf-menu a.top_nav:hover, .sf-menu a.top_nav:focus,  .sf-menu a.top_nav:active {
		padding: .95em .4em;
		font-size: 1.06em;
		line-height: 1.20em;
	}
	
	/*For MultiLIne (ie; Staff Resources) */
	.sf-menu a.top_navMulti {
		padding: .45em .4em;
		font-size: 1.06em;
		line-height: 1.20em;
	}

	.sf-menu a.top_navMulti:hover, .sf-menu a.top_navMulti:focus,  .sf-menu a.top_navMulti:active {
		padding: .45em .4em;
		font-size: 1.06em;
		line-height: 1.20em;
	}
	
}



@media screen and (max-width: 775px){
	
	
	
	ul.sf-menu {
		background-color: #7f0335;
		visibility: hidden;
		width: 100%;
		display: inline-block;
	}
	
	
	.sf-menu ul, .sf-menu li:hover ul {
		position: relative;
		top: 5px; /* <----  This shows the Submenu - Adjust this to move Sub menu up and down ----<<   */
		left: 0px;
	}
	
	
	.sf-menu li.top {
		float: none;
		text-align: left;
		margin: 0px 0px 25px 20px;
		width: 80%;
	}
	
	.sf-menu li li, .sf-menu li li:hover {
		background-color: #7f0335;
		top: 0px;
		left: 0px;
		margin: -10px 0px 0px 0px;
		padding-left: 7px;
		width: 80%;
		float: none;
		text-align: left;
	}

	
	.sf-menu a.top_nav, .sf-menu a.top_navMulti {
		width: 100px;
		font-size: 14pt;
		color: #ffffff;
		text-align: left;	
		display: inline-block;
		padding: 0px 7px 12px 7px;
		
	}
	
	.sf-menu a.top_nav:hover, .sf-menu a.top_navMulti:hover {
		width: 100px;
		font-size: 14pt;
		color: #FDF400;
		text-align: left;
		display: inline-block;
		padding: 0px 7px 12px 7px;
	}
	
	.sf-menu a.sub {
		border-left: 0;
		border-top:	 0;
		padding: .75em .4em;
		font-family: Arial, sans-serif;
		font-size: 12pt;
		color: #ffffff;
		text-decoration: none;
		border: none;
		text-align:left;
	}
	
	.sf-menu a.sub:hover, .sf-menu a.sub:focus, .sf-menu a.sub:active {
		border-left: 0;
		border-top:	 0;
		padding: .75em .4em;
		font-family: Arial, sans-serif;
		font-size: 12pt;
		color: #FDF400;
		text-decoration: none;
		border: none;
		text-align:left;
	}
	
	a.showSubMenu1,a.showSubMenu2,a.showSubMenu3,a.showSubMenu4,a.showSubMenu5,a.showSubMenu6 {
		display: inline-block;
		font-size: 1.19em;
		line-height: 1.80em;
		color: #ffffff;
		margin-left: 50px;
		overflow: visible;
	}
	
	img.SubMenu1,img.SubMenu2,img.SubMenu3,img.SubMenu4,img.SubMenu5,img.SubMenu6 {
		vertical-align:middle;
		display: inline-block;
	}
}