#outer {width:100%; text-align:center; background:url(filters.jpg) no-repeat right bottom; position:relative;}
.pad1 {width:51px; background:#3300cc; float:left; margin-top:0px; margin-right:0px;}
.pad2 {width:52px; background:#3300cc; float:left; margin-top:0px;}
.topline {width:100%; height:3px; background:#3300cc;}

#menu {z-index:100; list-style-type:none; padding:0; margin:0 0 0 0px;}
#menu ul {z-index:100; list-style-type:none; padding:0; margin:0;}
#menu li {z-index:100; float:left; background:#cdc; margin:0px 0px 0 0; border:1px solid #fff; width:14.08%; border-collapse: collapse;}

#menu li.xsub {background:#3300cc;}
#menu li.xsub1 {background:#0099ff;}
#menu li.xsub2 {background:#0033ff;}

#menu li.sub {background:#3300cc; width:100%;}
#menu li.sub1 {background:#0099ff; width:100%;}
#menu li.sub2 {background:#0033ff; width:100%;}

#menu li.sub3 {background:#ff6699; width:100%;}
#menu li.sub4 {background:#ff9999; width:100%;}
#menu li.sub5 {background:#ffff00; width:100%;}
#menu li.sub6 {background:#00cc00; width:100%;}
#menu li.sub7 {background:#9966cc; width:100%;}

/* for IE5.5 and IE6 only */

#menu li a {display:block; color:#ffffff; font-weight: bold; font-family:verdana, sans-serif; font-size:11px; padding:3px 5px 3px 5px; text-decoration:none; text-align:left;}
#menu li a table {position:absolute; left:0; top:0px; width:0; height:0;}

#menu :hover {/*color:#fff; background:#3300cc;*/ position:relative;}
#menu :hover > a {/*color:#fff; background:#3300cc;*/}

#menu ul, 
#menu :hover ul ul,
#menu :hover ul :hover ul ul,
#menu :hover ul :hover ul ul.left {visibility:hidden; width:0; height:0; overflow:hidden;}

#menu :hover ul {visibility:visible; overflow:visible; position:absolute; height:auto; width:100%; left:-1px;top:20px; background:url(transparent.gif);} /* the background image is for IE7 */