/*
about body{text-align:center;}... IE6 needs text-align to center the mainContainer div. Opera &
Moz center the div by setting the margin of the mainContainer to 'auto' and ignore the text-align.

another possibility is to give the mainContainer {position:absolute;left:50%;margin-left:(-half-width)px;}
downside is that when reducing the window content floats from left side of screen.

With the first method IE and Opera don't do that. Mozilla still does except (BUG alert) when you give
the mainContainer a padding>0....

*/

body,html {width:100%;height:100%;margin:0;padding:0;text-align:center;}

body {background:#CCC url(images/body_bg.gif) no-repeat 50% 0;}

table#mainContainer {width:770px;height:100%;margin:0 auto;}
table#mainContainer td.header {height:110px;}
table#mainContainer td.menu {background:#FFF url(images/menu_bg_tile.gif) repeat-y top left;width:300px;vertical-align:top;text-align:left;}
table#mainContainer td.content {width:470px;background:#FFF url(images/content_bg.gif) no-repeat top left;vertical-align:top;text-align:left;}

div#menu {height:560px;background:url(images/menu_bg.jpg) repeat-y top left;padding-top:73px;} 

ul#nav, ul#nav ul { /* all menus */ padding:0;margin:0;list-style:none;position:relative;}
ul#nav.level0 li {float:left;position:relative;width:155px;height:24px;z-index:10;}
ul#nav a {display:block;height:24px;}

ul.level1 {position:relative;float:left;order-top:1px solid #FFF !important;}
ul.level1 li {float:left;width:155px !important;}
ul.level1 li a, ul.level1 li a:hover {display:block;width:135px;margin-left:20px;}
ul.level1 li a span {margin-left:10px;margin-right:10px;}

ul#nav li ul.level1 { /* second-level lists */	display:none;position:absolute;top:0px;left:145px;}

div#content {}
  div#contentInner {margin:30px 20px 20px 15px;}