
.menu li.menuseparator {
	background: transparent url('../images/blueseparator.gif') repeat-x; 
	height: 2px;
	line-height: 2px;
	font-size: 1px;
}

.menu {
	/*font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;*/
	position:relative; 
	font-size:11px; 
	height: 29px;
}
.menu a:hover {
	text-decoration: underline;
}

.simpleMenu ul,
.menu ul {
	padding: 0; 
	margin: 0; 
	list-style-type: none; 
	position: absolute;
}

.menu ul li {
	color: white;
	cursor: pointer;
	font-size: 11px;
	font-weight: bold; 	/* we need text styling if using categoryFoldersTpl */
	height: 29px;
	line-height: 29px;
	margin-right: 0px; 
	width: 116px; 
	text-align: center;
	float: left;
	position: relative;
}

.menu ul li a { /* first level */
	background: transparent;
	border: 0px;	
	color: white;
	display: block; 
	font-weight: bold;
	font-size: 11px;
	text-decoration: none;
	overflow: hidden;
}

.menu ul li.first,
.simpleMenu ul li.first { /* align left */
  	text-align: left;
  	width: 35px;
  	margin-right: 45px;
}
/* ie6. otherwise second level extends */
.menu ul li ul li.first {
	margin-right: 0px;
}

.menu li.last {
	width: 50px;
  	margin-left: 70px;
}

.menu li li.last {
	margin-left: 0;
	width: 106px;
}

.menu li.last a { 
  	text-align: right;
}

/* hovering over the first level */
.menu ul li:hover a,		
.menu ul li:hover a.active,
.menu ul li:hover a:visited  { 	/* visited links when hovered over */
	background-color: #F80140;
	border: 0px; 
	color: white; 	
} 

/* hide the sublevels */
.menu ul li ul, 						/* hide the second level until we hover for it */
.menu ul li:hover ul li ul, 			/*	hide the third level until we hover for it*/
.menu ul li:hover ul li:hover ul li ul,
.menu ul li:hover ul li:hover ul li.hide ul { /* hide the fourth level until we hover for it*/
	display: none;
} 


/* second level when we need it to show up */

.menu ul li:hover ul { /* where the second level will appear when the first level is hovered over */
	display: block; 
	position:absolute; 
	top: 29px; 
	line-height: 20px;
	left: 0px; 
	width: 116px;
	background: #F80140;
}


.menu ul li ul li {
	padding-left: 10px;
	text-align: left;
	width: 106px;
	line-height: 20px;
	height: 20px;
}
.menu ul li ul li a {
	line-height: 20px;
	height: 20px;
}

.menu ul li ul li.first { /*,
.menu ul li ul li.first a*/
	width: 106px;
	line-height: 20px;
}
.menu ul li ul li.last {	/* last item in the 2nd level */
	padding-bottom: 5px;
}

.menu ul li.hide:hover ul a,
.menu ul li:hover ul a {
	text-align: left;
	color: white; 
}
.menu ul li ul li a {
	line-height: 20px;
}

/* for IE. the second level when first is hovered over and second level item hovered on */
.menu ul li:hover ul li:hover,
.menu ul li a ul li:hover,
.menu ul li:hover ul li:hover a { /* the last item when hovered over */
	background: #777676; 
	color: white;
}



/* third level when we need it to show up */
li > ul {
	top: auto;
	left: auto;
}

.menu ul li:hover ul li:hover ul,
.menu ul li:hover ul li:hover ul li,
.menu ul li:hover ul li:hover ul li a {
	background: #777676; 
}

.menu ul li:hover ul li:hover ul {  /* placement of third level when second level is hovered over */
	display: block; 
	left: 116px; 
	width: 140px;
	top: 0;
	background: #777676; 
}

.menu ul li.last:hover ul li:hover ul { /* placement of third level for last menu item when second level is hovered over */
	display: block; 
	position: absolute; 
	left: 100%; 
	top: 0;
}


.menu ul li ul li:hover a.hide { 	/* hide class denotes that this is a folder and has children */
	background: #777676;			/* the second level when the third level is hovered over */
	color: white;
}

.menu ul li ul li:hover ul li a.hide { 	/* third level menu item which has children but nothing is selected */
	background: #777676;
	color: white;
}

.menu ul li ul li a ul li a.hide:hover { 	/* third level menu item hovered on */
	background: transparent url('../images/menu_arrow_selected.gif') 95% 10px no-repeat; 
}

/* fourth level when we need it to show up */

.menu ul li:hover ul li:hover ul li:hover ul { /* placement of fourth level when third level is hovered over */
	display: block; 
	position: absolute; 
	left: 100%; 
	top: 0;
}

.menu ul li:hover ul li:hover ul li:hover a.hide { 	/* third level menu item which has children when hovered over */
	background-color: #0A51A1;
	color: white;
}

.menu ul li:hover a.last ul li:hover ul li:hover a.last  { /* placement of fourth level for last menu item when 3rd level is hovered over */
	display: block; 
	position: absolute; 
	left: -230px;
	top: 0;
}



.menu li.last a {
  	border: 0px;
}

.simpleMenu {
	height: 20px;
	width: 600px;
	font-size: 10px;
	float: left;
}

.simpleMenu ul li {
	float: left;
}
.simpleMenu a {
	color: #EC008C;
	float: left;
}




/* this is for the About menu 
#m41,
#m42,
#m43,
#m44,
#m139 {
	width: 140px;
	background: #F80140;
}*/

/* this is for the Our Services menu, needs to be very long
#m28,
#m28 .first,	
#m30,
#m33,
#m34,
#m35,
#m37,
#m38 {
	width: 230px;
	background: #F80140;
} */
