/* This style is used as a general superstyle for the lefthand navigation bars. */
#navbar {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 150px;
    background-color: #e0e0a0;
    color: #000;
    padding: 10px 5px 10px 5px;
    text-align: center;
}

#navbar hr {
    border-top: 1px solid #997;
    border-bottom: 1px solid #ffe;
    border-left: 1px solid #997;
    border-right: 1px solid #ffe;
    width: 80%;
    margin: 20px auto;
}

.navbar ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    white-space: nowrap;
}

.navbar li {
    list-style-type: none;
    text-align: center;
    background-repeat: no-repeat;
    display: block;
}

.navbar li a {
    border: 0;
    text-decoration: none;
    background-repeat: no-repeat;
    color: #000;
    display: block;
}

.navbar li a:hover {
    background-repeat: no-repeat;
}

.navbar li img {
    border: 0;
}

/* This style is used by the primary left-hand navigation bar.  It provides specific backgrounds and sizes over the existing navbar
  superstyle. */
.navbarPrimary ul {
    line-height: 50px;
}
  
.navbarPrimary li {
    width: 140px;
    height: 50px;
    margin: 10px 5px;
    background-image: url('../images/navbar-button-disabled.png');
}

.navbarPrimary li a {
    background-image: url('../images/navbar-button.png');
}

.navbarPrimary li a:hover {
    background-image: url('../images/navbar-button-highlight.png');
}

/* This style is used by the secondary left-hand navigation bar.  It provides specific backgrounds and sizes over the existing navbar
  superstyle. */
.navbarSecondary ul {
    line-height: 40px;
}

.navbarSecondary li {
    width: 125px;
    height: 40px;
    margin: 10px 12px;
    background-image: url('../images/navbar-small-button-disabled.png');
}

.navbarSecondary li a {
    background-image: url('../images/navbar-small-button.png');
}

.navbarSecondary li a:hover {
    background-image: url('../images/navbar-small-button-highlight.png');
}

/* This style is used to both style and identify the left-hand nav
   bar's padding space.  This is used in conjunction with JavaScript
   to permit the navigation bar to *appear* to be the same height as
   the page's content element. */
#navbarPad {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    width: 160px;
    height: 1px;
    background-color: #e0e0a0;
    padding: 10px 0px 10px 0px;
    /* Note: the above is an IE-specific hack!  IE wasn't properly inserting
       the padding for this empty element, so we reduced the horizontal padding
       and increased the width to pacify crappy programming. */
}

/* This style is used by the navigation bar's separator. */
#navbarSeparator {
    position: absolute;
    height: 1px;
    left: 160;
    top: 0;
    margin: 0;
    width: 40px;
    padding: 10px 0px 10px 0px;
    background-image: url('../images/navbar-separator.png');
}

/* This style is used by the navigation bar's separator padding.  This
   is, of course, a very silly approach, but it means that the height
   adjusting JavaScript used to ensure that the navbar and the content
   element are rendered at the same height does not have to be
   modified to fit this situation. */
#navbarSeparatorPad {
    position: absolute;
    height: 1px;
    left: 160;
    top: 0;
    margin: 0;
    width: 40px;
    padding: 10px 0px 10px 0px;
    background-image: url('../images/navbar-separator.png');
}