@charset "utf-8";
/* CSS Document */

/* Navbar division */
#navbar
{
	float:right;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	font-weight:bold;
	margin-right:1em;
}

/* Remove bullets from ul in the navbar */
#navbar ul {
	list-style-type:none;
}

/* List items in the navbar */
#navbar li {
	float:left;
	/* Required for drop-down menus */
	position:relative;
	height:30px;
	width:8.25em;
}

/* Applies to navbar links, visited and unvisited */
#navbar a,
#navbar a:link,
#navbar a:visited
{
	text-decoration:none;
	color:#000;
	display:block;
	height:30px;
	text-align:center;
	outline-style:none;
}

/* Navbar hover, active, and current page links.
   Used with a slightly-unique navbar for each page,
   the li.selected rules cause the "hover" background
   image to be shown for the page currently being
   displayed.  It also causes the hover image to
   be pre-loaded (when the page itself loads), instead
   of dynamically when the user first hovers (which
   could cause a noticeable and undesirable delay). */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited {
	color:#fff;
}

/* Navbar division drop-down menu styles */
#navbar li ul {
	position:absolute;
	padding:0;
	width:8.25em;
	z-index:100;
	visibility:hidden;  /* keeps the drop-downs hidden by default */
}

/* Make drop-down visible on navbar hover */
#navbar li:hover ul
{
	visibility:visible;
}

#navbar li:hover ul li
{
	padding:4px;
	width:8.25em;
	background:#add038;
	border-top:1px solid #000;
}

/* Styling for <a> tags inside the drop-down menu, and
   only when the mouse pointer is touching an item in
    the navbar. */
#navbar li:hover ul li a
{
	color:#000;
	text-align:center;
	display:block;  /* converts to a block item so width/height can be applied */
	width:8.25em;
	height:auto;
}

/* Style rule for when the user is hovering over a drop-down item.
   Yes, there is acutally a pseudo-class called hover for a list item... */
#navbar li:hover ul li a:hover
{
	background:#add038;
	color:#fff;
}