#navbar {
  position:     fixed;
  z-index:      100;
  top:            0;
  left:           0;
  bottom:         0;
  width:         20em;
  background:   #fffbb9;
  border-right: 1px solid #000000;
  box-shadow:   0.5em 0 1.4em rgba(0, 0, 0, 0.2);
}

#navbar #logo {
  width:  100%;
  margin:   0;
  padding:  0;
}

#navbar #logo img {
  height:   6em;
  width:  auto;
}

#navbar #sitemap {
  position:        fixed;
  box-sizing:      border-box;
  top:               6em;
  bottom:            1em;
  width:            19em;
  margin:            0;
  overflow:        auto;
}

#navbar li a {
  display:         block;
  box-sizing:      border-box;
  width:           100%;
  height:            2.2em;
  padding:           0.1em;
  background:      #fefefe;
  color:           #000000;
  border:          1px solid #dfdfdf;
  text-decoration: none;
  overflow:        hidden;
  border-radius:     0.2em;
}

#navbar li a:hover {
  background:   #d597e9;
  color:        #7b219f;
  border-color: #47135d;
}

#navbar li a:active {
  background:   #3b028e;
  color:        #ffffff;
  border-color: #1a013f;
}

#navbar li a img {
  float:   left;
  width:   1.6em;
  height:  1.6em;
  margin:  0.2em;
}

#navbar li.page {
  list-style: square outside url('/navbar.inc/page_unselected.png');
}

#navbar li.page.break {
  margin-top:   0.5em;
}

#navbar li.page.selected {
  list-style: square outside url('/navbar.inc/page_selected.png');
}

#navbar li.page.selected a, #navbar li.section.selected a.sect_lnk {
  background:   #3b028e;
  color:        #ffffff;
  border-color: #1a013f;
}

#navbar li.page.selected a:hover, #navbar li.section.selected a:hover.sect_lnk {
  background:   #d597e9;
  color:        #7b219f;
  border-color: #47135d;
}

#navbar li.page .title {
  display:       block;
  font-size:       0.85em;
  font-weight:   bold;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

#navbar li.page .desc {
  display:       block;
  font-size:       0.7em;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

#navbar li.section {
 list-style:  square outside url('/navbar.inc/section_open.png');
}

#navbar li.section ul {
  display:     none;
}

#navbar li.section.open {
  list-style:  square outside url('/navbar.inc/section_close.png');
}

#navbar li.section.open ul {
  display:     block;
}

#navbar li.section .title {
  display:       block;
  font-weight:   bold;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

#navbar #copyright {
  position:   absolute;
  bottom:       0;
  left:         0;
  width:      100%;
  height:     auto;
  font-size:    0.6em;
  text-align: center;
}