#content {
    padding: 0 (2 * gutter()) $spacing-l;
}

/* @group ----- Header ----- */

header {
    position: relative;
    padding: $spacing-m 0 0 0;
    margin-bottom: 2 * $spacing-l;
}

header > * {
    padding: 0 (2 * gutter());
}

/* @end */

/* @group ----- Footer ----- */

footer {
    padding: 0 (2 * gutter()) $spacing-l;
}

/* @end */

/* @group ----- Navigation ----- */

header nav {
    margin: $spacing-m auto 0;
    position: static;
    padding: 0 (2 * gutter());
}

header nav:before {
    content: "";
    border: 0;
}

header nav ul a {
    padding: 0;
}

header nav ul li {
    position: static;
}

header nav.closed ul,
header nav ul ul li {
    height: auto;
    overflow: visible;
}

header nav ul a:hover {
    background-color: transparent;
}

header nav ul li,
header nav > ul li:last-child,
header nav > ul ul:hover > li {
    border: 0;
}

header nav ul.navigation {
    margin-left: -$spacing-s;
    position: static;

    li ul:before {
        display: none;
    }

    & > li {
        display: inline-block;
    }

    & > li:not(:last-child) {
        margin-right: $spacing-m;
    }

    & > li > ul {
        position: absolute;
        top: 100%;
        left: -9999px;
        background-color: #fff;
        padding: 0;
        list-style: none;
        width: 100%;
        border: solid $gray;
        border-width: 1px 0;
        padding: ($spacing-m - 1px) 0 ($spacing-s - 1px);
        display: flex;
        flex-direction: row;
        flex-flow: row wrap;
        z-index: 1;
    }

    & > li:hover > ul {
        @include container;
        padding: $spacing-m (2 * gutter());
        left: 0;
        right: 0;
        border-bottom: 0;
        border-color: $light;

        &:after {
            content: "";
            left: -9999px;
            right: -9999px;
            background-color: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            border-bottom: 1px solid $light;
            z-index: -1;
        }
    }

    & > li > ul > li {
        width: 25%;
        font-size: .75 * $base-font-size;
        font-weight: bold;
        padding-bottom: $spacing-l;
    }

    & > li > ul > li ul {
        font-weight: normal;
        padding: 0;
        list-style-type: none;
        height: auto;
    }
}

header nav > ul > li > a {
    margin: $spacing-s;
    height: $base-line-height;
}

/* All top-level nav items with siblings are parent items and get an arrow. */
header nav > ul > li > a:not(:only-child):after {
    font-family: "FontAwesome";
    content: "\f107";
    display: inline-block;
    margin-left: $spacing-s;
}

header nav > ul li:hover ul li {
    height: auto;
    padding: 0;
}

/* Second and Third level items */
header nav > ul > li > ul > li a,
header nav > ul > li > ul > li > ul > li a {
    padding-left: 0;
}

.sub-menu ul {
    border-bottom: 1px solid $light;
    padding-bottom: ($spacing-m - 1px);
}

.sub-menu li {
    display: inline-block;
    border: 0;
    padding: 0;
    margin-right: $spacing-m;

    &:first-of-type {
        border: 0;
        padding: 0;
    }
}

#search {
    left: 75%;
    border-left: 1px solid $light;
    padding: $spacing-s;
}

#search form input[type="text"],
#search form button[type="submit"] {
    height: $base-line-height;
    font-size: .75 * $base-font-size;
    line-height: $base-line-height;
}

#search form button[type="submit"] {
    width: $base-line-height;
    height: $base-line-height;
    padding: 0;

    &:before {
        line-height: $base-line-height;
    }
}

/* @end */

/* @group ----- Resource List ----- */

ul.resource-list .resource img {
    width: 4 * $spacing-l;
    height: auto;
    float: right;
    margin-left: $spacing-m;
}

ul.resource-list .resource img ~ * {
    width: calc(100% - #{4.5 * $spacing-l});
}

/* @end */

/* @group ----- Item Set ----- */

body.item-set .metadata {
    @include span(4 of 12 alpha);
    border-left: 5px solid $light;
    padding-left: gutter();
    clear: left;
}

body.item-set .metadata h4:first-of-type {
    margin-top: 0;
}

body.item-set .metadata ~ * {
    @include span(8 of 12 omega);
    border-left: 1px solid $light;
    padding-left: gutter();
}

body.item-set .metadata ~ h3,
body.item-set .metadata ~ .resource-list {
    margin: 0;
    padding-bottom: $spacing-l;
}

body.item-set .metadata ~ nav.pagination:first-of-type {
    margin-bottom: 0;
}

/* @end */

/* @group ----- Page and blocks ----- */

.preview-block {
    clear: both;
}

ul.preview.resource-list li:first-of-type {
    border-top: 1px solid $light;
    padding-top: ($spacing-l - 1px);
}

/* @end */