/**
 *  --------------------------------------------------------------------------------------
 *  Navigation CSS
 *  ----------------------------------------------------
 *  Modified	August 20, 2008
 *  @version	3.0.1
 *  @author	Chris Satterthwaite <chris@navigatormm.com>
 *  ----------------------------------------------------
 *  1.	Main Navigation Styles
 *  2.  Navigation Buttons
 *  3.	Main Navigation Dropdown
 *  4.	Main Navigation Fly Out
 *  --------------------------------------------------------------------------------------
 */

/* Main Navigation Styles
--------------------------------------------------------------------------------------- */
.navigation {
	font-size:			9px;
	list-style:			none;
	width:				955px;
	height:				27px;
	margin:				0 0 0 0;
	padding:            0 0 0 0;
	display:			block;
	position:			relative;
	z-index:			20;/* Is need so that dropdown apears in front of relative position objects in IE6 and IE7. */
	background:			url(../images/interface/nav.gif) no-repeat;
	}

.navigation li {
	position:			absolute;
	top:				0px;
	z-index:			30; /* ensure submenus appear above other page items.*/
}
.navigation li span {
	display:			none;
}
.navigation li a { 
	height:				27px;
	display:			block;
}

/* Navigation Buttons
--------------------------------------------------------------------------------------- */
.home { left:103px;	width:59px;}
.experience { left:162px; 	width:143px;}
.collections { left:305px;	width:173px;}
.specials { left:478px;	width:113px;}
.appointment { left:591px;	width:180px;}
.contact { left:771px;	width:81px;}

.home     a:hover, .home .selected { background: transparent url(../images/interface/nav.gif)  -103px   -27px no-repeat;}
.experience     a:hover, .experience .selected { background: transparent url(../images/interface/nav.gif)  -162px -27px no-repeat;}
.collections     a:hover, .collections .selected { background: transparent url(../images/interface/nav.gif)  -305px -27px no-repeat;}
.specials     a:hover, .specials .selected { background: transparent url(../images/interface/nav.gif)  -478px -27px no-repeat;}
.appointment     a:hover, .appointment .selected { background: transparent url(../images/interface/nav.gif)  -591px -27px no-repeat;}
.contact     a:hover, .contact .selected { background: transparent url(../images/interface/nav.gif)  -771px -27px no-repeat;}

/* Main Navigation Dropdown
--------------------------------------------------------------------------------------- */
.navigation li:hover ul,
ul.navigation li.sfHover ul {
	left:				10px; /* position first dropdown directly under parent li */
	top:				19px; /* should match the height of .nav set in the Structure.css.*/
}
.navigation li ul {
	position:			absolute; /* remove from flow and allow positioning */
	top:				-999px; /* hidedropdown in screen-reader and search-engine friendly way */
	width:				155px; /*sets the width of the drop down.*/
	list-style:			none;
	padding:            2px 0 2px 0;
	margin:             0 0 0 0;
	background:			#8b8d7b;
	z-index:			200; /* ensure dropdown appear above other page items.*/
}
.navigation li ul li{
	float:				left;
	position:			relative;
	z-index:			600; /* ensure dropdown appear above other page items.*/
	margin:				2px 5px 2px 5px;
}
.navigation li ul li a  {
	color:				#243316;
	text-decoration:	none;
	width:				140px;
	height:				14px;
	
	padding:            3px 0 7px 4px;
	display:			block; /* make IE6 obey width when text-indent is used */
	background:			#ece9e2;
}
.navigation li ul li a:hover {
	background:			#ece9e2;
	border:1px solid #243316;
	padding:            2px 0 6px 3px;
}


/* Main Navigation Fly Out
--------------------------------------------------------------------------------------- */
.navigation li:hover li ul,
.navigation li.sfHover li ul {
	top:				-999em; /* hide flyout in screen-reader and search-engine friendly way */
}
.navigation li li:hover ul,
ul.navigation li li.sfHover ul {
	left:				160px; /*sould be set the the width of the dropdown.*/
	top:				0px; /* position flyout horizontally aligned to parent li */
}
.navigation li ul li ul {
	position:			absolute; /* remove from flow and allow positioning */
	top:				-999px; /* hidedropdown in screen-reader and search-engine friendly way */
	width:				150px;
	padding:            0 0 0 0;
	margin:				0 0 0 0;
	list-style:			none;
}
.navigation li ul li ul li{
	width:				100%;
	float:				left;
	position:			relative;
	z-index:			50; /* ensure dropdown appear above other page items.*/
}
.navigation li ul li ul li a {
	color:				#00FF00;
	display:			block; /* make IE6 obey width when text-indent is used */
	font-weight:		bold;
	text-decoration:	none;
	height:				15px;
	padding:            10px 0 3px 10px;
	display:			block;
}
.navigation li ul li ul li a:hover {
color:					#FF0000;
}

/* Footer Navigation Styles
--------------------------------------------------------------------------------------- */
.footer-nav {
	font-size:			9px;
	list-style:			none;
	width:				767px;
	height:				17px;
	margin:				0 auto 0 auto;
	padding:            		0 0 0 0;
	display:			block;
	position:			relative;
	z-index:			20;/* Is need so that dropdown apears in front of relative position objects in IE6 and IE7. */
	background:			url(../images/interface/footer-nav.gif) no-repeat;
	}

.footer-nav li {
	position:			absolute;
	top:				0px;
	z-index:			30; /* ensure submenus appear above other page items.*/
}
.footer-nav li span {
	display:			none;
}
.footer-nav li a { 
	height:				17px;
	display:			block;
}

/* Footer Navigation Buttons
--------------------------------------------------------------------------------------- */
.footer-nav .home { left:25px;	width:55px;}
.footer-nav .experience { left:80px; 	width:137px;}
.footer-nav .collections { left:217px;	width:167px;}
.footer-nav .specials { left:384px;	width:109px;}
.footer-nav .appointment { left:493px;	width:173px;}
.footer-nav .contact { left:666px;	width:77px;}

.footer-nav .home     a:hover, .footer-nav .home .selected { background: transparent url(../images/interface/footer-nav.gif)  -25px   -17px no-repeat;}
.footer-nav .experience     a:hover, .footer-nav .experience .selected { background: transparent url(../images/interface/footer-nav.gif)  -80px -17px no-repeat;}
.footer-nav .collections     a:hover, .footer-nav .collections .selected { background: transparent url(../images/interface/footer-nav.gif)  -217px -17px no-repeat;}
.footer-nav .specials     a:hover, .footer-nav .specials .selected { background: transparent url(../images/interface/footer-nav.gif)  -384px -17px no-repeat;}
.footer-nav .appointment     a:hover, .footer-nav .appointment .selected { background: transparent url(../images/interface/footer-nav.gif)  -493px -17px no-repeat;}
.footer-nav .contact     a:hover, .footer-nav .contact .selected { background: transparent url(../images/interface/footer-nav.gif)  -666px -17px no-repeat;}