body { background:url("images/GreenGradient.png") repeat-x; }

table#Toolbar { width:100%; border-spacing:2px; }
	table#Toolbar td { width:16%; padding-top:3px; padding-bottom:3px; text-align:center; background-color:#46008C; color:white; }
	table#Toolbar td a { color:white; }
	table#Toolbar td a:hover { text-decoration:none; background-color:#008F00; }

/* FYI, because you've already beaten this to death: The following is an equivalent of table#Toolbar, but has two drawbacks:
1) display:inline-block seems to get ignored on EmulateIE7 mode, though IE8, Firefox and Safari support it;  2) The width is an inexact
number (relative to 33% above), which can lead to unexpected wrapping, depending browser defaults.  There doesn't seem to be any way to
get the full width of the button to be a hyperlink, short of creating an image for the button, and hyperlinking that...at least not a
way that's supported by all browsers.  Using "li {float:left;}" seems to work in IE, but in Firefox and Safari, content following the
toolbar gets laid out inline, to the right of the toolbar.  Plus, this approach just feels wrong, like a butchering of the intent for
"float".  Note: display:inline-block appears to imply left and right borders, because I can't find a way to hide them. 

ul#Toolbar { list-style-type:none; padding:0; margin:0; }
	ul#Toolbar li { 
		width:237px; padding-top:3px; padding-bottom:3px; text-align:center; background-color:#46008C; color:white; 
		display:inline-block; border-top:2px solid white; border-bottom:2px solid white;
	}
	ul#Toolbar li a { color:white; }
	ul#Toolbar li a:hover { text-decoration:none; background-color:#008F00} */

div.Banner { margin:20px 60px; /* top/bottom left/right */ padding:10px; background:#DDDDFF; color:#404040; text-align:center; }
div.Banner ul { text-align:left; }
div.Banner button { font-size:12pt }

ul#Trademark { font-size:0.777em; }