/*
©2009 Bam Creative

Author : Jay Hollywood | Bam Creative

Description : Stylesheet

*/
#nav {
	position: absolute;
	height: 40px;
	top: 35px;
	right: 0;
	}

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

#nav a {
	display: block;
	height: 40px;
	background: url(images/nav.gif) no-repeat;
}

#nav li {
	float: left;
	height: 40px;
}

#nav a#home {
	width: 47px;
	}

#nav a#home:hover {
	background-position: 0 -40px;
	}

#nav a#home.active {
	background-position: 0 -80px;
	}
	

#nav a#about {
	width: 55px;
	background-position: -47px 0;
	}

#nav a#about:hover {
	background-position: -47px -40px;
	}

#nav a#about.active {
	background-position: -47px -80px;
	}


#nav a#view-the-mag {
	width: 105px;
	background-position: -102px 0;
	}

#nav a#view-the-mag:hover {
	background-position: -102px -40px;
	}

#nav a#view-the-mag.active {
	background-position: -102px -80px;
	}
	
	
#nav a#submit {
	width: 62px;
	background-position: -207px 0;
	}

#nav a#submit:hover {
	background-position: -207px -40px;
	}

#nav a#submit.active {
	background-position: -207px -80px;
	}


#nav a#friends {
	width: 62px;
	background-position: -269px 0;
	}

#nav a#friends:hover {
	background-position: -269px -40px;
	}

#nav a#friends.active {
	background-position: -269px -80px;
	}



#nav a#shop {
	width: 50px;
	background-position: -331px 0;
	}

#nav a#shop:hover {
	background-position: -331px -40px;
	}

#nav a#shop.active {
	background-position: -331px -80px;
	}



#nav a#contact {
	width: 53px;
	background-position: -381px 0;
	}

#nav a#contact:hover {
	background-position: -381px -40px;
	}

#nav a#contact.active {
	background-position: -381px -80px;
	}




#nav 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 */
}