/* Taco John's Franchisee site navigation CSS Document */
#menu{
	position:relative;        		/* establish a menu-relative positioning context */
	float:left;                                     	/* play nicely with others */
	margin:0;
	padding:0;
	border:0;
}

#menu img{
	vertical-align:top;	 /* prevent images from being pushed down by text */
}

#menu ul{
	padding:0;
	margin:0;
	border:0;
	list-style-type:none;          /* we don't want to view the list as a list */
}                               

#menu li{
	float:left;    	/* this creates the side-by-side array of top-level buttons */
	position:relative;    	/* create local positioning contexts for each button */
	margin:0;
}
	

/*sets up look of buttons*/	
#menu li.nav-food{
	width:59px;
	height:26px;
	background:url(images/nav/nav_02.gif) no-repeat;
	}	
#menu li.nav-locations{
	width:107px;
	height:26px;
	background:url(images/nav/nav_03.gif) no-repeat;
}
#menu li.nav-promos{
	width:135px;
	height:26px;
	background:url(images/nav/nav_04.gif) no-repeat;
}
#menu li.nav-giftshop{
	width:105px;
	height:26px;
	background:url(images/nav/nav_05.gif) no-repeat;
}
#menu li.nav-franchisee{
	width:198px;
	height:26px;
	background:url(images/nav/nav-ro_06.gif) no-repeat;
}
#menu li.nav-careers{
	width:92px;
	height:26px;
	background:url(images/nav/nav_07.gif) no-repeat;
}


#menu ul li table{
	margin:-1px 0;              	/* IE5 needs -1px top and bottom table margins */
	border-collapse:collapse;      	/* IE5 needs this for the sub-menus to work */
}
/*======= TOP LEVEL MENU DEFINITIONS =======*/

#menu ul li ul {
	display:none;                 /* initially hide the entire list hierarchy */
	padding:1px;                   /* this is our box border width */
}

#menu ul li a,
#menu ul li a:visited {		/* unselected top-level menu items/buttons */
	display:block;
	float:left;
	text-decoration:none;
}

/*sets background colors when hovering over buttons. A dropdown won't appear in IE 6
if its button doesn't have this code*/
#menu li.nav-food a:hover,
#menu li.nav-food:hover a{
	width:59px;
	height:26px;
	background:url(images/nav/nav-ro_02.gif) no-repeat;
}
#menu li.nav-locations a:hover,
#menu li.nav-locations:hover a{
	width:107px;
	height:26px;
	background:url(images/nav/nav-ro_03.gif) no-repeat;
}
#menu li.nav-promos a:hover,
#menu li.nav-promos:hover a{
	width:135px;
	height:26px;
	background:url(images/nav/nav-ro_04.gif) no-repeat;
}
#menu li.nav-giftshop a:hover,
#menu li.nav-giftshop:hover a{
	width:105px;
	height:26px;
	background:url(images/nav/nav-ro_05.gif) no-repeat;
}
#menu li.nav-franchisee a:hover,
#menu li.nav-franchisee:hover a{
	width:198px;
	height:26px;
	background:url(images/nav/nav-ro_06.gif) no-repeat;
}
#menu li.nav-careers a:hover,
#menu li.nav-careers:hover a{
	width:92px;
	height:26px;
	background:url(images/nav/nav-ro_07.gif) no-repeat;
}


/*===== 2ND LEVEL MENU DEFINITIONS =====*/

#menu ul li:hover ul,
#menu ul li a:hover ul {                           /* 2nd level drop-down box */
	display:block;
	position:absolute;
	margin:0;
	top:24px;              	/* place us just up underneath the top-level images. need extra pixel for IE */
	left:0px;
	height:auto;     	/* the drop-down height will be determiend by line count */
	width:198px;
	z-index:2;				/*to put dropdown menu above buttons */
}

#menu ul li a:hover ul li,
#menu ul li:hover a ul li{
	float:none;
	margin:0;
	padding:0;
}
#menu li.nav-franchisee:hover .nav-learnmore,
#menu li.nav-franchisee a:hover .nav-learnmore{                   
	width:196px;
	height:30px;
	position:absolute;
	top:0;
}
#menu li.nav-franchisee:hover ul li.nav-apply,
#menu li.nav-franchisee a:hover ul li.nav-apply {                   
	width:196px;
	height:31px;
	position:absolute;
	top:30px;
}


/*dropdown menu unselected links*/
#menu li.nav-franchisee:hover .nav-learnmore a,
#menu li.nav-franchisee a:hover .nav-learnmore a {                   
	width:196px;
	height:30px;
	background:url(images/nav/nav_learnmore.gif) no-repeat #8aa557;
}
#menu li.nav-franchisee:hover ul li.nav-apply a,
#menu li.nav-franchisee a:hover ul li.nav-apply a {                   
	width:196px;
	height:31px;
	background:url(images/nav/nav_apply.gif) no-repeat #8aa557;
}

/*dropdown menu selected links*/
#menu li.nav-franchisee:hover ul li.nav-learnmore a:hover,
#menu li.nav-franchisee a:hover ul li.nav-learnmore a:hover,
#menu li.nav-franchisee:hover ul li.nav-learnmore:hover a,
#menu li.nav-franchisee a:hover ul li.nav-learnmore:hover a {                   
	width:196px;
	height:30px;
	background:url(images/nav/nav-ro_learnmore.gif) no-repeat #8aa557;
}
#menu li.nav-franchisee:hover ul li.nav-apply a:hover,
#menu li.nav-franchisee a:hover ul li.nav-apply a:hover,
#menu li.nav-franchisee:hover ul li.nav-apply:hover a,
#menu li.nav-franchisee a:hover ul li.nav-apply:hover a {                   
	width:196px;
	height:31px;
	background:url(images/nav/nav-ro_apply.gif) no-repeat #8aa557;
}

