/* nav.css: CSS for navigation elements */

/*	
	For more information on how this technique works: 
	http://www.alistapart.com/articles/sprites/
*/

/* Begin:MainNav */
ul#MainNav
{
	width: 537px;
	height: 81px;
	margin: 0; padding: 0;
	position: absolute;
	left: 220px;
	top: 0;
}
ul#MainNav li 
{
	margin: 0; padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}
ul#MainNav li, ul#MainNav a
{
	display: block;
	height: 23px;
	text-decoration: none;
	font-size: 12px;
	text-indent: -2000px; /* Moves text off-screen, but still visible to search engines and screen readers */
	/* Hidden from IE/Mac \*/overflow: hidden;/* End Hidden from IE/Mac */
}

ul#MainNav { background: transparent url(/Images/Common/nav_main.gif) no-repeat; }

/* Offset and widths for each tab */
ul#MainNav li#TabShop { left: 158px; top: 58px; width: 54px; }
ul#MainNav li#TabStory { left: 210px; top: 58px; width: 64px; }
ul#MainNav li#TabMakeDiff { left: 272px; top: 58px; width: 160px; }
ul#MainNav li#TabContactUs { left: 430px; top: 58px; width: 102px; }

/*
	On hover, or if class for li is set to "Selected", load background image into link, 
	and shift left and up to show corresponding "on" version
*/
ul#MainNav li a:hover,
ul#MainNav li a:active,
ul#MainNav li a:focus,
ul#MainNav li a.Selected { background: transparent url(/Images/Common/nav_main.gif) no-repeat; }

ul#MainNav li#TabShop a:hover,
ul#MainNav li#TabShop a:active,
ul#MainNav li#TabShop a:focus,
ul#MainNav li#TabShop a.Selected { background-position: -158px -81px; }

ul#MainNav li#TabStory a:hover,
ul#MainNav li#TabStory a:active,
ul#MainNav li#TabStory a:focus,
ul#MainNav li#TabStory a.Selected { background-position: -210px -81px; }

ul#MainNav li#TabMakeDiff a:hover,
ul#MainNav li#TabMakeDiff a:active,
ul#MainNav li#TabMakeDiff a:focus,
ul#MainNav li#TabMakeDiff a.Selected { background-position: -272px -81px; }

ul#MainNav li#TabContactUs a:hover,
ul#MainNav li#TabContactUs a:active,
ul#MainNav li#TabContactUs a:focus,
ul#MainNav li#TabContactUs a.Selected { background-position: -430px -81px; }

/* End:MainNav */

/* Begin:StoryNav */
ul#StoryNav a:link, ul#DifferenceNav a:link{ 
	color: #989898 !important;
	}
ul#StoryNav a:visited, ul#DifferenceNav a:visited{ 
	color: #989898 !important;
	}
ul#StoryNav a:hover, ul#DifferenceNav a:hover{ 
	color: #ffffff !important;
	}
ul#StoryNav a:active, ul#DifferenceNav a:active{ 
	color: #ffffff !important;
	}
	
ul#StoryNav
, ul#DifferenceNav
{
	width: 194px;
	margin: 0; 
	padding: 0;
	margin-right: 45px;
}

	ul#StoryNav li
	, ul#DifferenceNav li 
	{
		margin: 0; 
		padding: 0;
		list-style: none;
		background: transparent url(/Images/Common/horiz_dots_grey.gif) repeat-x left bottom;
	}

		ul#StoryNav li
		, ul#StoryNav li a
		, ul#DifferenceNav li
		, ul#DifferenceNav li a
		{
			display: block;
			text-decoration: none;
			font-size: 11px;
			font-weight: bold;
			color: #989898;
			text-transform: none;
			line-height: 1.6em;
		}


		ul#StoryNav li a
		, ul#DifferenceNav li a
		{
			padding-top: .1em;
			padding-bottom: .1em;
			padding-left: 4px;
		}

		ul#StoryNav li a:hover
		, ul#StoryNav li a:active
		, ul#StoryNav li a:focus
		, ul#StoryNav li a.Selected
		, ul#DifferenceNav li a:hover
		, ul#DifferenceNav li a:active
		, ul#DifferenceNav li a:focus
		, ul#DifferenceNav li a.Selected
		{
			color: #ffffff;
			background-color: #99cccc;
		}

		ul#StoryNav li a.Selected
		, ul#DifferenceNav li a.Selected
		{
			background-color: #669999 !important;
		}
		
		ul#StoryNav li ul.ItemMenu
		{
			margin: 0; 
			padding: 0;
		}
		
		ul#StoryNav li ul.ItemMenu li
		{
			margin: 0; 
			padding: 0;
			list-style: none;
			background: none;
		}

		ul#StoryNav ul.ItemMenu li a
		{
			font-weight: bold;
			font-size: 10px;
			text-transform: none;
			margin-left: 15px;
			color: #999999;
			
		}

		ul#StoryNav ul.ItemMenu li a:hover
		, ul#StoryNav ul.ItemMenu li a.Selected
		{
			xfont-weight: bold;
			background-color: #99cccc;
			color: #ffffff;
		}

/* End:StoryNav */

/* 
Begin:ProductCategorySubNav 

NOTE: Link and background colors change by category context. The styles to control
that are located in Category.css.	
*/
ul#ProductCategorySubNav
{
	width: 194px;
	margin: 0; 
	padding: 0;
}

ul#ProductCategorySubNav a:link{ 
	color: #989898;
	}
ul#ProductCategorySubNav a:visited{ 
	color: #989898;
	}
ul#ProductCategorySubNav a:hover{ 
	color: #ffffff;
	}
ul#ProductCategorySubNav a:active{ 
	color: #ffffff;
	}
	
ul#ProductCategorySubNav li ul.ItemMenu li a:link{ 
	color: #989898;
	}
ul#ProductCategorySubNav li ul.ItemMenu li a:visited{ 
	color: #989898;
	}
ul#ProductCategorySubNav li ul.ItemMenu li a:hover{ 
	color: #989898;
	}
ul#ProductCategorySubNav li ul.ItemMenu li a:active{ 
	color: #ffffff;
	}
	
	ul#ProductCategorySubNav li 
	{
		margin: 0; 
		padding: 0;
		list-style: none;
		background: transparent url(/Images/Common/horiz_dots_grey.gif) repeat-x left bottom;
	}

	ul#ProductCategorySubNav li.First
	{
		background-image: none;
	}

	ul#ProductCategorySubNav li
	, ul#ProductCategorySubNav a
	{
		display: block;
		text-decoration: none;
		font-size: 11px;
		font-weight: bold;
		color: #ff0000;
		text-transform: uppercase;
		line-height: 1.6em;
	}
	
	ul#ProductCategorySubNav a
	{
		padding-top: .1em;
		padding-bottom: .1em;
		padding-left: 4px;
	}

		ul#ProductCategorySubNav li ul.ItemMenu
		{
			margin: 0; 
			padding: 0;
		}
		
		ul#ProductCategorySubNav li ul.ItemMenu li
		{
			margin: 0; 
			padding: 0;
			list-style: none;
			background: none;
		}

		ul#ProductCategorySubNav ul.ItemMenu li a
		{
			font-weight: bold;
			font-size: 10px;
			text-transform: none;
			margin-left: 15px;
			color: #999999;
		}

		ul#ProductCategorySubNav ul.ItemMenu li a:hover
		, ul#ProductCategorySubNav ul.ItemMenu li a.Selected
		{
			xfont-weight: bold;
		}

/* End:ProductCategorySubNav */