@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";
@import "bootstrap";

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}


.main { max-width: 100%; }
.container { max-width: 100%; width: 100%; }
.viewer { margin-left: 300px; }
.side-nav {
  background-color: #f5f5f5; padding: 20px; height: 100vh; overflow-y: scroll;
  position: fixed; width: 300px;
}
.side-nav-accordion .panel-body { padding-top: 0; }

.nav-toggle, .back-to-top { background: #000; color: #fff; cursor: pointer; }
.nav-toggle { display: none; z-index: 10; width: 100%; padding: 14px; }
.fa-bars { font-size: 36px; }

.back-to-top { position: fixed; bottom: 0; right: 0; padding: 12px; line-height: 1; border-top-left-radius: 5px;
  &, &:focus, &:hover { color: #fff; text-decoration: none; }
  &:after { font-family: 'FontAwesome'; content: "\f062"; font-size: 24px; }}

.nav-header, .nav-item { display: block; }

.nav-header {
  font-size: 11px; font-weight: bold; line-height: 20px; color: #999;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5); word-wrap:break-word;

  a {  font-family: "Source Sans Pro", sans-serif;
    font-weight: 700; font-size: 16px; background-color: #000000; color: #ffffff; }

}

.nav-item {
  a { color: #337ab7; font-weight: bold; }
}

h1, h2 {
  padding-bottom: 9px; border-bottom: 1px solid #eee;
}

.url-path {
  background: #000000; color: #ffffff; padding: 10px; @include border-radius(5px); word-wrap:break-word;
}

@media only screen and (max-width : 1200px) {
  .nav-toggle, .scroll-top { display: block; }
  .side-nav { display: block; z-index: 10; position: relative; width: 100%; height: auto;
    &.hide-side-nav { display: none; }}
  .viewer { margin-left: 0; width: 100%; }
  .row { margin-left: 0; margin-right: 0; }
}