/*TOP LEVEL MENU*/
#menu {width:100%;}

#menu {
	text-align:left;
	padding:0;
	margin: 0;
	}

#menu ul { 
    position:relative;
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	width:100%;
	}
	

	
#menu ul li {position:relative;}/*this allows proper positioning of second level sub menus*/
	
#menu ul li {
	display:inline;
	float:left;
	line-height:30px;
	padding-left:20px;
	padding-right:10px;
	}

/*line elements and link elements need to have same color in case not all the line elements are links*/	

#menu ul li a{
	text-decoration:none;
	display:block;
	}

#menu ul li a:hover {cursor:pointer;}
	
#menu a:active {color:#0FF;}

/*FIRST LEVEL SUB MENU*/
#menu ul.sub {
  display: none;
  position:absolute;
  top:30px;
  margin:0; padding:0;
  width:110px; /*should be same width as sub menu links, including padding of the links if not set to 0px*/
  }

#menu ul.sub li {
	margin:0; padding:0 20px;
	/*left padding is same as top level menu items*/
	}
	
#menu li li a {
	text-decoration:none;
	width:100px;
	line-height:30px;
	margin:0; padding:0px 5px 5px 0px;
	}
/*This displays the sub menu when the line item is hovered over*/		
#menu ul li:hover ul.sub {
	display: block;
	}
	
#menu li a:hover, #menu li:hover a {
	 cursor:default;
	}


/*SECOND LEVEL SUB MENU*/
#menu ul.sub2 {
  display: none;
  position:absolute;
  top:0px;
  left:130px;
  margin:0; padding:0px 5px 10px 5px;
  width:160px; /*should be same width as sub menu links, including padding of the links if not set to 0px*/
  }

#menu ul.sub li:hover ul.sub2 {
	display: block;
	}
	
.sub2 a {width:300px;}