@import url("common.css");

#sidebar {
float:left;
width: 16.5em;
margin-top: -0.5em;
color: #606060;
}

#main {
margin-left: 17.3em;
}

#sidebar h2 {
padding: 0em 0.2em 0em 0.2em;
background-color: #e8e8e8;
border: 1px solid #dadada;
font-style: italic;
font-variant: small-caps;
text-align: center;
opacity: 0.9;
}

#sidebar a {
color: #91bede;
}

#sidebar a:hover, #sidebar a:focus {
color: #286ea0;
}

#sidebar .menu, #sidebar .submenu {
display: block;
padding: 0.3em 0.2em 0.3em 0.75em;
font-size: 1.1em;
font-weight: bold;
border: 1px solid #ffffff;
background-color: #ffffff;
opacity: 0.7;
}

#sidebar .submenu {
padding-left: 1.5em;
}

#sidebar .menu:hover, #sidebar .menu:focus, #sidebar .submenu:hover, #sidebar .submenu:focus  {
background-color: #f8f8f8;
border: 1px solid #dadada;
opacity: 0.9;
}

#langvar {
color: #b0b0b0;
position: absolute;
top: 2px;
right: 5px;
}

#langvar a {
color: #b0b0b0;
}

/* responsive menu */
#menu-toggle-div {
  display: none;
  position: static;
  font-size: 3.6em;
}

#menu-toggle {
  color: #484848;
}

#menu-toggle:hover, #menu-toggle.show {
  color: #808080;
}

#sidebar {
  position: static;
}

#main pre {
  overflow-x: scroll;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 992px) {
  #container {
    border-left: none;
    border-right: none;
    margin-left: 0px;
    margin-right: 0px;
    width: auto;
  }

  #menu-toggle-div {
    display: block;
    position: absolute;
    top: 0.5em;
  }

  #sidebar {
    display: none;
    position: absolute;
    top: 5.5em;
    overflow: auto;
    padding: 0.5em 0 0.5em 0;
    background: #ffffff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }

  #sidebar.show {
    display: block;
    position: absolute;
    left: 0px;
    width: 100%;
  }

  #sidebar h2, a.submenu {
    display: none;
    visibility: hidden;
  }

  #sidebar h2, #sidebar .menu, #sidebar .submenu, #sidebar .menu:hover, #sidebar .menu:focus, #sidebar .submenu:hover, #sidebar .submenu:focus {
    opacity: 1.0;
  }

  #submenu {
    display: none;
    visibility: hidden;
  }

  #main {
    border-left: none;
    margin-left: 0px;
    padding-left: 0px;
  }
}