.menu {
	top: 1px;		/* This is for Firefox, IE needs to be -1px */
	right: 1px;
	BORDER-RIGHT: #000 1px solid; Z-INDEX: 100; 
	WIDTH: 100%;
	FONT-FAMILY: arial, sans-serif; POSITION: relative; HEIGHT: 20px
}

#menu_id {
    float: left;
    width: 100%;
    top:1px;
    font-size: 100%;
    position:  relative;
    background: #0099cc;
    border: 1px solid;
    clear: left;
}


.menu UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
	float : left;
}

.menu UL UL {
	WIDTH: 90px
}

/* This width specifies the distance between menu tabs */
/* The Top here is used to line up with the containing DIV */
.menu LI {
	FLOAT: left; WIDTH: 120px; POSITION: relative;
	top: -1px;
}
.menu A {
	BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 12px; 
	BACKGROUND: #09c; BORDER-LEFT: #000 1px solid; WIDTH: 120px; COLOR: #fff; LINE-HEIGHT: 19px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 20px; TEXT-DECORATION: none;
	
}
.menu A:visited {
	BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 12px; 
	BACKGROUND: #09c; BORDER-LEFT: #000 0px solid; WIDTH: 120px; COLOR: #fff; LINE-HEIGHT: 19px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 20px; TEXT-DECORATION: none;
	border-bottom #000 1px solid;
	
}


/* Trying to load a picture to create a rounded corner on the right.  */
.menu A.firsttab {
	height: 21px;
	width: 110px;
	border-style: none;
	background-image: url(images/icons/menu_1rtab.gif); 
	background-repeat: no-repeat;
}

/* Trying to load a picture to create a rounded corner on the right.  */
.menu A.firsttab:hover {
	height: 21px;
	width: 110px;
	border-style: none;
	background-image: url(images/icons/menu_1rtab_hover.gif); 
	background-repeat: no-repeat;
}

/* This will highlight the page link in the menu we are currently on */	
.home .menu #home a, .about .menu #about a, .projects .menu #projects a, .products .menu #products a, .services .menu #services a, .contact .menu #contact a {
	COLOR: Black;
	BACKGROUND: #d4d8bd;		/* #b7d186; */
	}

/* This will use the active page image on the last tab */
.contact .menu #contact a.firsttab {
	height: 21px;
	width: 110px;
	border-style: none;
	background-image: url(images/icons/menu_1rtab_active.bmp); 
	background-repeat: no-repeat;
}


/* I needed to add this otherwise it won't highlight the items in the dropdown menu if we are currently on that page */
.contact .menu #contact a:hover,
 .about .menu #about a:hover,
 .projects .menu #projects a:hover,
 .products .menu #products a:hover,
 .services .menu #services a:hover,
 .contact .menu #contact a:hover {
	COLOR: Black;
	BACKGROUND: #b7d186;		/* #b7d186;  */
	}

/* This changes the image when hovering over the first tab */
.contact .menu #contact a.firsttab:hover {
	height: 21px;
	width: 110px;
	border-style: none;
	background-image: url(images/icons/menu_1rtab_hover.gif); 
	background-repeat: no-repeat;
}	


* HTML .menu A {
	WIDTH: 79px
}
* HTML .menu A:visited {
	WIDTH: 79px
}
.menu UL UL A.drop {
	/* This is the first drop down list that have a trailing drop down list */
	BACKGROUND: url(/images/icons/grey-arrow.gif) #d4d8bd no-repeat 130px center;
	
}
.menu UL UL A.drop:visited {
	BACKGROUND: url(/images/icons/grey-arrow.gif) #d4d8bd no-repeat 130px center;
	
}
.menu UL UL A.drop:hover {
	
	BACKGROUND: url(/images/icons/blue-arrow.gif) #c9ba65 no-repeat 130px center;
	
}
.menu UL UL :hover > A.drop {
	BACKGROUND: url(/images/icons/blue-arrow.gif) #c9ba65 no-repeat 130px center;
	
}
.menu UL UL UL A {
	BACKGROUND: #e2dfa8;
	
}
.menu UL UL UL A:visited {
	BACKGROUND: #e2dfa8;
	
}
.menu UL UL UL A:hover {
	BACKGROUND: #b2ab9b ;	/* b2ab9b */
	
}
/* TOP places the first drop down item below the main menu bar */
.menu UL UL {
	BORDER-TOP: #000 1px solid; left: -1px; VISIBILITY: hidden; WIDTH: 90px; POSITION: absolute; TOP: 22px; HEIGHT: 0px;
	
	
}

/* This I added to allow the drop down menu to be right aligned so it doesnt overhang the side */
.menu UL UL.left {
	left: -31px;
	/* text-align: right; */
}



* HTML .menu UL UL {
	TOP: 21px
}
.menu UL UL UL {
	LEFT: 149px; WIDTH: 90px; TOP: -1px
}
.menu UL UL UL.left {
	LEFT: -1490px
}
.menu TABLE {
	LEFT: 0px; POSITION: absolute; TOP: 0px; BORDER-COLLAPSE: collapse
}
.menu UL UL A {
	/* This and the following are the first drop down menu back colors, with trailing drop menus */
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BORDER-LEFT-WIDTH: 1px; BACKGROUND: #d4d8bd; BORDER-BOTTOM-WIDTH: 1px; PADDING-BOTTOM: 5px; WIDTH: 128px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto; BORDER-RIGHT-WIDTH: 1px;
	/*BACKGROUND: #ffe;*/
}
.menu UL UL A:visited {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BORDER-LEFT-WIDTH: 1px; BACKGROUND: #d4d8bd; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; WIDTH: 128px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto; BORDER-RIGHT-WIDTH: 1px;
	/*BACKGROUND: #ffe;*/
}

/* The lastdrop class is so we can put a bottom border on the end of the drop menu */
.menu UL UL A.lastdrop {
	BORDER-BOTTOM-WIDTH: 1px;
}
.menu UL UL A.lastdrop:visited {
	BORDER-BOTTOM-WIDTH: 1px;
}


* HTML .menu UL UL A {
	WIDTH: 128px
}
* HTML .menu UL UL A:visited {
	WIDTH: 128px
}

.menu A:hover {
	BACKGROUND: #b7d186; COLOR: #000;
	
}
.menu UL UL A:hover {
	BACKGROUND: #b7d186; COLOR: #000;
	
}
.menu :hover > A {
	BACKGROUND: #b7d186; COLOR: #000;
	
}
.menu UL UL :hover > A {
	BACKGROUND: #b7d186; COLOR: #000;
	
}


.menu UL LI:hover UL {
	VISIBILITY: visible
}
.menu UL A:hover UL {
	VISIBILITY: visible
}
.menu UL :hover UL UL {
	VISIBILITY: hidden
}
.menu UL :hover UL :hover UL {
	VISIBILITY: visible
}