@import "susy";
@import "base";
@import "compass";

/* -------------------------------------------------------------------------*/
/* Table of Contents 
-- Layout
-- General
-- Search
-- Navigation
-- Exhibits

/* -------------------------------------------------------------------------*/
/* Layout */
#site-title {@include span-columns (7,12);}
#search-container {@include span-columns (5 omega, 12);}
#featured {@include span-columns (7,12);}
.pagination {@include span-columns(12);}
#sort-links {@include span-columns(12);}
#recent-items {@include span-columns (5 omega, 12);}
#advanced-search-form label,
#advanced-search-form .label,
.field .columns.alpha {@include span-columns (3,12);}
#advanced-search-form .inputs,
.field .columns.omega,
.field .inputs,
div#contribution-type-form div.inputs {@include span-columns (9 omega, 12);}

.exhibits.summary #primary,
.exhibits.summary #content > h1:first-of-type,
.exhibits.show #content > h1:first-of-type,
#exhibit-blocks,
#exhibit-page-navigation {
    @include span-columns (8,12);
}

.exhibits #exhibit-pages:not(.full) {
    width: columns(4);
    display: inline-block;
    margin-right: 0;
}

.full ~ #exhibit-blocks,
.full ~ #exhibit-page-navigation {
    width: 100%;
}

/* -------------------------------------------------------------------------*/
/* General */

.image {
    float: right;
}

/* -------------------------------------------------------------------------*/
/* Search */

#search-container {
    margin: 30px 0;
}
/* -------------------------------------------------------------------------*/
/* Advanced Search Form */
#advanced-search-form .field {
    .two label {
        width: 100% !important;
    }
    label, 
    .label, 
    input, 
    select, 
    button {
       margin: 1em 0;
    }
}
/* -------------------------------------------------------------------------*/
/* Navigation */

/*------------ Mega Menu Styles -----------*/
/* mega menu list */
/*** Adapted from Emiglio by Kim Nguyen ****/
/* mega menu list */
#top-nav .nav-menu {
    width: 100%;
    display: block;
    overflow: initial;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 15;
    float: left;
    background-color: white;    
    .active {
        background-color: lighten($accent-main, 10%);
        a {
            color: white;
        }
    }
    li {
        width: auto;
        border: none;
    }
    a {
        text-decoration: none;
        padding: .5em;

        &:link, 
        &:visited {
            color: $accent-main;
        }
        
        &:hover, 
        &:focus {
            background-color: $accent-main;
        }
    }
/* a top level navigation item in the mega menu */
    .nav-item {
        list-style: none;
        display: block;
        float: left;
        padding: 0;
        margin: 5px 5px 0 0;
        background-color: lighten($grey-light, 5%);
        position: relative;

    }
    .nav-item.active {
        background-color: lighten($accent-main, 10%);
        a {
            color: white;
        }
    }
/* first descendant link within a top level navigation item */
    .nav-item > a {
        position: relative;
        display: inline-block;
        padding: .5em 1em;
        margin: 0;
        border: 0;
        color: $accent-main;
        &:hover {
            color: white;
        }
        &:focus {
            color: white;
        }
    }
/* focus/open states of first descendant link within a top level 
   navigation item */
    .nav-item > a:focus,
    .nav-item > a.open {
        background-color: $accent-main;
    }

/* open state of first descendant link within a top level 
   navigation item */
    .nav-item > a.open {
        background-color: $accent-main;
        color: white;
        border-bottom: none;
        z-index: 1;
    }
    .sub-nav {
        position: absolute;
        display: none;
        top: 2.5em;
        padding: 0;
        border: 0;
        margin: 0;
        background-color: $accent-light;
        z-index: 2;
        border: 1px solid lighten($grey-medium, 10%);
    }
    .sub-nav.open {
        display: block;
        background-color: lighten($grey-light, 10%);
        min-width: 250px;
        .active {
            background-color: lighten($grey-light, 10%);
            a {
                color: $accent-main;
                &:hover {
                    color: white;
                }
            }
        }
        ul {
            display: block;
            vertical-align: top;
            margin: 0;
            padding: 0;
            a {
                color: $accent-main;
                &:before {
                    content: "\2014\0020";
                }
            }
        }
        li {
            display: block;
            list-style-type: none;
            margin: 0;
            padding: 0;
            a {
                color: $accent-main;
                &:hover{
                    background-color: lighten($accent-light, 10%);
                    color: white;
                }
                &:focus {
                    background-color: lighten($accent-light, 10%);
                    color:white;
                }
            }
        }
    }
}

#bottom-nav {
    display: block;
    overflow: auto;
    margin-bottom: 1em;
    li {
        padding-right: 20px;
        @include line-button;
        display: block;
        float: left;
        &.active {
            font-weight: bold;
        }
        ul {
            display: none;
        }
    }
}

/* -------------------------------------------------------------------------*/
/* Exhibits */

.exhibits.summary #primary {
    .exhibit-description, 
    .exhibit-credits {
        padding-right: 1em;
    }
}
.exhibits.summary #exhibit-pages {
    padding-top: 0;
}
.exhibits.show {
    #secondary-nav.exhibit-page-nav li {
        float: left;
        margin-top: .5em;
        ul li {
            width: auto;
        }
    }
    #exhibit-page-navigation {
        #exhibit-nav-next, 
        #exhibit-nav-prev {
            width: 50%;
        }
        #exhibit-nav-up {
            clear: both;
            width: 33%;
            .current-page {
                clear: none;
            }
        }
    }
}
