/*make container div tall enough to hold the menu*/
#sgl-nav {
    height:50px;
}

/*ul.navLvl1 position is abs so that it will contain the floated LIs; probably should be relative,
but so far this is the only way i can get the background green in Moz; only other way is to
set a height for ul.navLvl1 so that it isn't an empty box and the background can be colored, but
getting the right height is tricky, esp. including box-model differences. I thought 4.2ems
would be the height of level 1 + level 2 and be correct ((font-size plus padding x 2) x 2),
but somehow this is way too big*/
ul.navLvl1, ul.navLvl1 ul {
    position:absolute;
    list-style:none;
    width:100%;
    padding:0;
    border:none;
    margin:0;
    background-color:#99CC00;
}

ul.navLvl1 li {
    float:left;
    padding:0;
    padding-left:0.2em;/*to put space between tabs*/
    border:0;
    margin:0;
}

ul.navLvl1 li a {
    display:block;
    position:relative;
    /*bottom:-1px;*//*shift down by the width of the containing LI's bottom border*/
    z-index:100;/*so these and their borders sit above the top border of the secondary UL, which
    we need in order to have a border extending full width of screen*/
    
    padding:0.25em 1.5em;
    /*border:1px solid #006699;*/
    margin:0px;
    background:#9DCDFE;
    font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    font-size:1.3em;
    font-weight:bold;
    color:white;
    text-align:center;
    /*text-transform:uppercase;*/
    text-decoration:none;
    letter-spacing:0.05em;
    white-space:nowrap;
}

ul.navLvl1 li a:visited {
    color:white;
}

ul.navLvl2 li a {
    font-weight:normal;
    font-size:1.1em;
}

ul.navLvl2 li a:visited {
    color:#006699;
}

ul.navLvl1 li a:hover {
    color:#006699;
    text-decoration:underline;
}

ul.navLvl1 li a#curPage {
    color:#006699;
    background:#E5F1FF;
    border-bottom-color:#E5F1FF;
}

/*hide all sublevels*/
ul.navLvl1 ul, ul.navLvl1 li.curPage ul ul {
    display : none;
}

/*except for the first sublevel, for current page*/
ul.navLvl1 li.curPage ul {
    position : absolute;
    left:0;
    display : block;
    width:100%;
    /*use max-width emulation hack from http://www.svendtofte.com/code/max_width_in_ie/, using the
    IE5.0+ dynamic properties syntax, see http://msdn.microsoft.com/workshop/author/dhtml/overview/recalc.asp*/
    _width:expression(document.body.clientWidth);
    
    padding:0;
    /*border:1px solid #006699;*/
    border-left:none;
    border-right:none;
    background:#E5F1FF;
}

ul.navLvl1 li.curPage li {
    /*clear L/R padding so we can do it in anchor instead, to hide leftmost pipe;
    but do top/bottom padding to cover over the pipe's top and bottom*/
    padding:0.4em 0;
}

ul.navLvl1 li.curPage li a {
    bottom:0;/*reset from level one's -1px*/
    left:-3px;/*hide leftmost pipe spacer*/
    padding:0 1.5em;
    border:none;
    border-left:1px solid #006699;/*pipe spacer*/
    margin:0;
    background:#E5F1FF;
    color:#006699;
}