body {
    margin: 0;
    padding-top: 0px;
}

img {
    display: block;
    margin:  auto;
    width: 80%;
}

/* progress bars have height of 4 pixels */
.progress {
    height: 8px;
    border-radius: 0px;
}

/* make markdown tables beautiful */
table {
    border-collapse: collapse;
    margin-left: 50px;
}
thead, tbody, td, th {
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

textarea {
    font-family: monospace !important;
}

/* Hack to avoid name clash between pygments and mathjax */
.MathJax .mo,
.MathJax .mi {
    color: inherit;
}

/* ======================================================================== */
body,html,.row-offcanvas {
  height:100%;
}


#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#f5f5f5;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}
#main {
  padding-top: 10px;
  height:100%;
  overflow:auto;
}
#body {
  padding-bottom: 50px;
}

/* https://medium.com/wdstack/bootstrap-sidebar-examples-e363021395ff#.ek5vc75p8
 * off Canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width:calc(100% + 220px);
  }

  .row-offcanvas-left
  {
    left: -220px;
  }

  .row-offcanvas-left.active {
    left: 0;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
}