#navbuttons {
	position: absolute;
	top: 140px;
	right: 18px;
}

#navbuttons a:hover {
		background-color: #336699;
}

#navbuttons a {
	display: block;
	height: 20px;
	padding: 0px 6px;
	vertical-align: top;
	text-decoration: none;
	color: #FFFFFF;
}

#navbuttons .heading {
	height: 22px;
	vertical-align: top;
	border-width: 1px;
	border-style: solid;
	border-color: #AAAAAA;
	background-color: orange;
}

#navbuttons .heading:hover, #navbuttons .heading.over {
	background-color: #336699;
}

#navbuttons .navitem a {
	border-width: 1px;
	border-style: solid;
	border-color: #AAAAAA;
}

li {
	position: relative;
	float: left;
	width: 120px;
	cursor: default;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#navbuttons li ul {
	display: none;
	position: absolute;
	z-index: 5;
	top: 0px;
	width: 120px;
	padding: 0px;
	background-color: orange;
	left: 120px;
	text-align: left;
}

/*the second rule 'li.over' is what we use to get over IE's inability to*/
/*correctly apply the :hover pseudo-class to things other than a tags*/
/*We define .over as the class to use in the JS script below*/
#navbuttons li:hover ul, #navbuttons li.over ul {
	display: block;
}