/*
©2008 Wordplay Media

Author : Karen Fisher | Wordplay Media

Description : Stylesheet

*/

#nav, #nav ul {

	padding: 0;
	margin: 0;
	list-style: none;
	margin-left: 40px;
	width: 175px;
}

#nav a {
	display: block;
	height: 15px;
}

#nav li {
	float: left;
	width: 172px;
	margin: 40px 0 0 0;
	height: 15px;
}

#nav li a {
	width: 172px;
	height: 15px;
	text-indent: -9999px;
	overflow: hidden;
}

#nav li a:hover, #nav li a.active {
	background-position: 0px -15px !important;
}

#nav li a.home {
	background: url(/images/nav-Home.gif) 0px 0px no-repeat;
}

#nav li a.about {
	background: url(/images/nav-About.gif) 0px 0px no-repeat;
}

#nav li a.design {
	background: url(/images/nav-Design.gif) 0px 0px no-repeat;
}

#nav li a.portfolio {
	background: url(/images/nav-Portfolio.gif) 0px 0px no-repeat;
}

#nav li a.contact {
	background: url(/images/nav-Contact.gif) 0px 0px no-repeat;
}

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

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

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