/*
©2009 Bam Creative

Author : Jay Hollywood | Bam Creative

Description : Stylesheet

*/





#nav {
	position: absolute;
	top: 138px;
	left: 0;
}

#nav ul, #nav-user ul  {
	float: left;
	padding: 0;
	margin: 0;
	list-style: none;
}


#nav a, #nav-user a  {
	display: block;
	width: auto;
	height: 34px;
}

/* nav without comps
#nav li {
	float: left;
	height: 34px;
	background: url(../art/nav.jpg) no-repeat 0 0;
	display: block;
}
*/

#nav li {
	float: left;
	height: 34px;
	background: url(../art/navrecipes.jpg) no-repeat 0 0;
	display: block;
}

#nav li#home {
	width: 72px;
	}

#nav li#home:hover {
	background-position: 0 -34px;
	}

#nav li#home.active {
	background-position: 0 -68px;
	}
	

#nav li#why-ezyshop {
	width: 125px;
	background-position: -72px 0;
	}

#nav li#why-ezyshop:hover {
	background-position: -72px -34px;
	}

#nav li#why-ezyshop.active {
	background-position: -72px -68px;
	}

#nav li#browse {
	width: 85px;
	background-position: -197px 0;
	}

#nav li#browse:hover {
	background-position: -197px -34px;
	}

#nav li#browse.active {
	background-position: -197px -68px;
	}
	
#nav li#services {
	width: 88px;
	background-position: -282px 0;
	}

#nav li#services:hover {
	background-position: -282px -34px;
	}

#nav li#services.active {
	background-position: -282px -68px;
	}
	
#nav li#help {
	width: 66px;
	background-position: -370px 0;
	}

#nav li#help:hover {
	background-position: -370px -34px;
	}

#nav li#help.active {
	background-position: -370px -68px;
	}
	
#nav li#contact {
	width: 88px;
	background-position: -436px 0;
	}

#nav li#contact:hover {
	background-position: -436px -34px;
	}

#nav li#contact.active {
	background-position: -436px -68px;
	}

#nav li#recipes {
	width: 80px;
	background-position: -524px 0;
	}

#nav li#recipes:hover {
	background-position: -524px -34px;
	}

#nav li#recipes.active {
	background-position: -524px -68px;
	}

/*
#nav li#comps {
	width: 112px;
	background-position: -524px 0;
	}

#nav li#comps:hover {
	background-position: -524px -34px;
	}

#nav li#comps.active {
	background-position: -524px -68px;
	}
	
*/

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

#nav ul li a span, #nav-user ul li a span {
	padding:0;
	margin:-9999px 0 0 -9999px;		/* this is a trick for if someone has css turned off, inside the anchor tag, write <span>$page-name</span> if css is off the name will appear as text, if not the css kicks it out of view */
}

#nav-user {
	width: 323px;
	height: 34px;
	display: block;
	position: absolute;
	top: 138px;
	right: 0;
	}

#nav-user li {
	background: url(../art/loggedinnav.jpg) no-repeat 0 0;
	float: left;
	height: 34px;
	display: block;
	}

#nav-user li#account {
	width: 80px;
	background-position: 0 0;
	}

#nav-user li#account:hover {
	background-position: 0 -34px;
	}

#nav-user li#account.active {
	background-position: 0 -68px;
	}


#nav-user li#orders {
	width: 69px;
	background-position: -80px 0;
	}

#nav-user li#orders:hover {
	background-position: -80px -34px;
	}

#nav-user li#orders.active {
	background-position: -80px -68px;
	}


#nav-user li#referrals {
	width: 87px;
	background-position: -149px 0;
	}

#nav-user li#referrals:hover {
	background-position: -149px -34px;
	}

#nav-user li#referrals.active {
	background-position: -149px -68px;
	}



#nav-user li#logout {
	width: 87px;
	background-position: -236px 0;
	}

#nav-user li#logout:hover {
	background-position: -236px -34px;
	}

#nav-user li#logout.active {
	background-position: -236px -68px;
	}

#product-menu {
	width: 191px;
	background: url(../art/menubottom.gif) no-repeat bottom left;
	padding: 0 0 5px 0;
	margin: 0 14px;
	}
	

ul#menu {
	width: 191px;
	background: url(../art/menutop.gif) no-repeat #d9d9d9;
	display: block;
	margin: 0;
	padding: 8px 0 0;
	} 

ul#menu li {
	padding: 0;
	margin: 0;
	display: block;
	margin: 0 5px;
	}

ul#menu li a {
	width: 165px;
	height: 20px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	letter-spacing: -1px;
	font-weight: bold;
	text-decoration: none;
	color: #6aba2f;
	display: block;
	background: url(../art/menuli.gif) no-repeat 0 0;
	padding: 8px;
	}
	
ul#menu li a:hover {
	background: url(../art/menuli.gif) no-repeat -181px 0;
	}

ul#menu li ul {
	margin: -1px 0 0 0;
	padding: 0;
	}

ul#menu li li {
	padding: 0;
	margin: 0 3px;
	width: 175px;
	}

ul#menu li ul li a {
	background: url(../art/submenubg.gif) no-repeat 0 0 #51a211;
	width: 147px;
	height: auto;
	color: #fff;
	font-weight: normal;
	letter-spacing: 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1em;
	padding: 5px 20px 5px 8px;
	margin: 0;
	border-top: 1px solid #6bd31a;
	border-bottom: 1px solid #468f0f;
	}

ul#menu li ul li a:hover {
	background: url(../art/submenubg.gif) no-repeat -175px 0 #41830d;
	}