/* for this demo only */

/* the styling */

#nav {float:left; padding-left:10px; width:992px; height:32px; background-image:url(../images/navbg.jpg); padding-top:2px;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none; display:block; float:left;}

#nav .sub {margin:0; padding:0; list-style:none;}

#nav li {display:block; float:left; margin:0; padding:0; position:relative; z-index:100;}
#nav .current li {z-index:50;}

#nav .select a, 
#nav .current a {display:block; height:2.5em; float:left; width:90px; padding:0 0 0 9px; border-bottom:1px solid #113a81; text-decoration:none;line-height:2.4em; white-space:nowrap;}

/* calculate the required widths of the top level */
#nav .one a {width:80px; font-size:14px;color:#FFF;}
#nav .two a {width:50px; font-size:14px;color:#FFF;margin-left:15px;}
#nav .select a b, 
#nav .current a b {height:100%; display:block; padding:0 15px 0 6px; color:#553;}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:1em;}

#nav .select a:hover b {color:#000; cursor:pointer;}

#nav .current a {background-position:0 -150px; border-color:#fff;width:110px;}
#nav .current a b {background-position:100% -150px; color:#000;}

#nav .sub li a:hover, 
#nav .select a:hover .sub li a:hover, 
#nav .select li:hover .sub li a:hover {border-color:#aba; background:#0f367c; color:#fff; width:110px;}

#nav .current .sub, 
#nav .select a:hover .sub, 
#nav .select li:hover .sub {display:block; position:absolute; top:2.5em;filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;}

* html #nav .current .sub, * html #nav .select a:hover .sub {margin-top:0; margin-t\op:1px;}

#nav .current .sub li a, 
#nav .select a:hover .sub li a, 
#nav .select li:hover .sub li a {display:inline; background:#fff; border:1px solid #ddd; padding:0 10px; width:auto; white-space:nowrap; font-weight:normal; font-size:0.9em; height:2em; line-height:1.9em;width:110px; color:#000;}

#nav .select a:hover, 
#nav li:hover a {background-position:0% -150px;}

#nav .select a:hover b, 
#nav .select li:hover a b {background-position:100% -150px;}

/* calculate the left edge position of each sub level */
#nav .one .sub {left:0;}
* html #nav .four .sub {margin-left:-18px; marg\in-left:-27px;}
