topbar

/* we use a media query so this only displays on larger screens -- it will revert to sidebar for mobile view */
@media (min-width: 768px) {

  /* set the row that holds the sidebar/content divs to display as column */
  .row.row-offcanvas.row-offcanvas-left {
    flex-direction: column;
  }

  /* make the content area full width of the page and give it a little extra padding */
  #content {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 30px 40px 20px 40px;
    margin: 0px auto;
  }

  /* set the sidebar to be full width of the page, give it a little padding and set the sidenav properties */
  #sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    padding: .25rem;
  }

  /* set sidenav links to display next to each other */
  .side-nav li {
    display: inline-block;
    line-height: 1;
  }

  /* controls the border radius for the subheader blocks on character profiles */
  .side-nav li.subheader {
    border-radius: 1rem;
    padding: .25rem;
  }

  /* controls the border radius for the user/character icons */
  .side-nav li.character-name .display-character img, .side-nav li .display-user img {
    border-radius: 1rem;
  }

  /* adjust padding on sidenav links to they're a little closer together */
  .side-nav li>a {
    padding: .25rem .5rem;
  }

  /* make the icons next to sidebar links a little closer to the link */
  .side-nav li .sidebar-icon {
    margin-right: .25rem;
  }

  /* shift the shape of the sidebar stats so they look a bit nicer */
  .side-nav li .sidebar-stat {
    padding: 0 .25rem;
    margin-left: .2rem;
    border-radius: 1rem;
  }

  /* fix padding on the character link for character profiles */
  .side-nav .display-character a {
    padding: .25rem .5rem;
  }

  /* fix padding on the user link for user profiles */
  .side-nav .display-user a {
    padding: .25rem .75rem .25rem 0px;
  }

  /* move sidenav sub link icons a bit closer to the link */
  .sidebar-sub-icon {
    margin-left: .2rem;
  }
  li.subnavigation-link i.fa-fw.mr-2{
    margin-right: .2rem !important;
  }

  /* get rid of some subheader margin we don't need */
  .side-nav li.subheader.subheader-margin {
    margin-top: 0px; margin-bottom: 0px;
  }

  /* hide the header, the sideblurb as it wont fit, the username on character profiles, the divider lines, fix the display for the favs button */
  li.header, li.blurb, li.subnavigation-header, li.user-name, li.divider, .hide {
    display: none !important;
  }

  /* get rid of default bottom margin on sidenav container so our sidebar is an even height
  -- as a bonus i changed the display to flex so if you're feeling ambitious you can use the order property */
  .side-nav {
    display:flex:
    flex-direction: row;
    justify-content: center;
    margin-bottom: 0px;
  }


  /* i give the header a little extra padding... cuz i think it looks better */
  #header {padding: 5px 0px;}
}