// Here you can easily change your sites's layout.
// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.

//$header-font-size: 1em;
//$header-padding-top: 1.5em;
//$header-padding-bottom: 1.5em;

//$max-width: 1350px;
//$indented-lists: true;

// Padding used for layout margins
//$pad-min: 18px;
//$pad-narrow: 25px;
//$pad-medium: 35px;
//$pad-wide: 55px;

// Sidebar widths used in media queries
//$sidebar-width-medium: 240px;
//$sidebar-pad-medium: 15px;
//$sidebar-pad-wide: 20px;
//$sidebar-width-wide: 300px;

html {
    overflow-y: hidden;
}

.page-content {
    display: inline-block;
    height: calc(100% - 68px);;
    margin-top: 68px;
    overflow-y: scroll;
    padding-top: 32px;
    width: 100%;
}

#sidebar {
    .grid {
        position: fixed;
        width: 350px;
        .brand-logo-container {
            margin-top: 0;
        }
    }
}

.site-header {
    position: fixed;
    width: 100%;
    z-index: 999;
}

table {
    table-layout: fixed;
    width: 100%;

    th,td {
        word-wrap: break-word;
    }
}


@media only screen and (max-width: $lap-end) {
    #sidebar {
      .grid {
          position: initial;
          width: 100%;
        }
    }
    .site-header {
        .pull-right {
            position: fixed;
        }
    }
    .hero {
        > .grid-wrapper {
            z-index: 0;
        }

        img {
            margin-bottom: 8px;
        }
    }
  }