#mainmenu {
	font-family: Tahoma; 
	height:30px;
	float:left;
	width:600px;
}

/* -------------------------------MAIN menu items--------------------------------- */

#mainmenu ul {
	padding:0; 
	margin:0;
	list-style-type: none;
	display:block;
}
#mainmenu ul li {
	float:left;
	position:relative;
}

/* this is main menu at idle */
#mainmenu ul li a, #mainmenu ul li a:visited {
	display:block; 
	text-decoration:none;
	font-weight: bold;
	font-family:Tahoma;
	font-size:11px;
	color:#fff;
	padding:0; 
}
/* this is main menu when rollover */
#mainmenu ul li:hover a,
#mainmenu ul li a:hover {
	color: #895c60;
	text-decoration: none;
	font-weight: bold;
	padding: 0px 0px 0px 0px;
	text-align:left;
	font-family:Tahoma;
	font-size:11px;
}


/* this is the table inside the drop down menu */
#mainmenu table, #mainmenu table table, #mainmenu table table table {
	margin:0;
	border-collapse:collapse;
	padding:0;
}

/* -------------------------------FIRST DROP DOWN / SUB MENU--------------------------------- */
/* the first drop down menu on idle*/
#mainmenu ul li ul {
	display: none; /* the first drop down menu does not appear when on idle*/
	z-index:2; /* putting z-index here will help drop down to appear above container */
	top:30px;
	* top:30px; /*this controls the positioning of the first drop down in IE*/
}

/*when rollover the main items, show this ul aka the sub menu*/
/*this controls the attributes of the sub menu*/
#mainmenu ul li:hover ul,
#mainmenu ul li a:hover ul {
	display:block; 
	position:absolute; 
	padding-top:0px;
	width:170px;
	* width:170px;
	border:1px solid #895c60;
	z-index:50;
	background-color:#fff;
}

/* -------------------------------SECOND DROP DOWN / SUB SUB MENU--------------------------------- */
/* the second drop down menu aka sub sub menu on idle*/
#mainmenu ul li ul li ul {
	visibility:hidden; 
}
/*this is the sub menu link items (not on hover, just attributes of links) when rollover main item (li)*/
#mainmenu ul li:hover ul li a,
#mainmenu ul li a:hover ul li a {
	display:block; 
	background:#c18181; /*the background color for the first drop down*/
	color:#fff; 
	padding:5px 10px; 
	width:150px;
	* width:150px;
	font-weight:normal;
	z-index:50;
}

/*this one changes the color of the sub menu li item*/
/* need the li:hover. if delete, sub menu on ie does not highlight and background color of sub sub menu does not appear*/
#mainmenu ul li:hover ul li a:hover,  
#mainmenu ul li a:hover ul li a:hover {
	background:#fff; /*the background color for the rollover of items in the first drop down*/
	color:#895c60;
	font-family:Tahoma;
	font-size:11px;
	font-weight:normal;
}
/* this the position of the sub sub menu box when you hover of li item in the sub menu */
#mainmenu ul li ul li:hover ul,
#mainmenu ul li ul li a:hover ul {
	visibility:visible; 
	left:100%; 
	top:0px;
	width:170px;
	*width:170px;
	z-index:100;
	background-color:#fff;
}

/*this is when second drop down menu aka sub sub menu on idle (that means no rollover) */
#mainmenu ul li ul li ul li a,
#mainmenu ul li ul li ul lu a:visited {
	width:150px;
	* width:150px;
	padding:5px 10px;
	background:#f5f4ef;
	font-weight:normal;
}

/*this is when u roll over second drop down menu items aka sub sub menu items*/
#mainmenu ul li ul li ul li a:hover {
	background:#fff; /*the background color for the rollover of items in the sub sub drop down*/ 
	color:#895c60; 
	/*width:170px;
	* width:170px;
	padding:5px 10px;
	font-weight:normal;*/
	/*the four items above which has been commented out is not needed because it takes the values from the above css already*/
}

/* -------------------------------THIRD DROP DOWN / SUB SUB SUB MENU--------------------------------- */
/* hide sub sub sub menu when the first drop down item(s) is rolled over */
#mainmenu ul li:hover ul li ul li ul,
#mainmenu ul li a:hover ul li ul li ul {
	visibility:hidden; 
}
/* hide sub sub sub menu when the first drop down item(s) is rolled over */
#mainmenu ul li ul li:hover ul li ul,
#mainmenu ul li ul li a:hover ul li ul {
	visibility:hidden; 
}

/* this the position of the sub sub sub menu box when rollover item on second drop down menu */
#mainmenu ul li ul li ul li:hover ul,
#mainmenu ul li ul li ul li a:hover ul {
	visibility:visible;
	left:100%; 
	top:0px;
	width:170px;
	* width:170px;
	z-index:200;
}