@import "base";
@import "mixins";
@import "compass";
//@import "blueprint/form";

/* -------------------------------------------------------------------------*/
/* Table of Contents
-- General Styles
---- Layout
---- General Styles
---- Headings
---- Links
-- Navigation
---- General Nav
---- Mega-Menu Navigation
-- Forms
---- Search
---- Advanced Search
-- Tables
-- Content
---- Browse and Item Pages
---- Collections
---- TagCloud
-- Plugins
---- Simple Pages
---- Geolocation
---- Exhibits

/* -------------------------------------------------------------------------*/
/* Layout */
#wrap {
    @include container;
/*    @include susy-grid-background;
*/
    overflow: hidden;
}
#search-container{@include span-columns(12 omega);}
.nav-menu {@include span-columns(12); margin-right:0;}
#content {@include span-columns(12 omega);}
.pagination {@include span-columns(12);}
#item-filters {@include span-columns(12 omega);}
#sort-links{@include span-columns(12);}
#outputs {@include span-columns(12)}
#advanced-search-form label {@include span-columns(12);}
#advanced-search-form .inputs {@include span-columns(12 omega);}
footer {@include span-columns(12 omega);}


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

* {
    @include box-sizing(border-box);
}

body {
    background-color:$background-color;
    font-family: $font-family-main;
    font-size: $base-font-size;
    line-height: $base-line-height;
    color: $text-color;
    margin:0;
}

.element-set,
.item,
.element,
.collection,
.exhibit,
.hTagcloud {
    padding:1em 0;
    overflow: hidden;
    clear:both;
}

#featured-item,
#featured-collection,
#featured-exhibit,
#recent-items {
    overflow: hidden;
    margin:1em 0 0;

    h2,
    h3,
    .item,
    .collection,
    .exhibit {
        padding: 0;
    }

    h2 {
        @include padding-leader(1, 2 * $base-font-size);
    }

    .image {
        @include leader();
    }

    img {
        float: right;
    }
}

#skipnav {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

#skipnav:focus {
    top: 0;
    z-index: 9999;
    clip: initial;
    height: auto;
    width: auto;
    padding: .5em;
    border: 1px blue dashed;
    color: $accent-light;
}

.intro {
    font-style: italic;
}

#content {
    padding:1em 0 2em 0;
    overflow: auto;
}

abbr, acronym {
    border:none;
    font-style: normal;
}

.clear {
    clear:both;
}

a.show {
    padding-left: 5px;
    font-style: italic;
}

blockquote {
    font-style:italic;
}

.view-items-link {
    margin:1em 0 .5em 0;
    a {
        @include link-button;
        display: inline;
    }
}

#outputs {
    margin-top:1em;
}

footer {
    padding:.5em 0;
    overflow: auto;
    border-top:5px double $grey-light;
}
/* -------------------------------------------------------------------------*/
/* Headings */

#{headings()} {
    font-family: $font-family-title;
    font-weight:normal;
    line-height: $base-line-height * 1.5;
    padding: .5em 0;
    margin:0;
    color: $grey-medium;
}
#{headings(4,6)} {
    font-style: $base-font-size * 1.2;
}
#{headings(5,6)} {
    font-weight: bold;
}
h1 {
    text-transform: uppercase;
    font-size: $base-font-size *2.5;
    clear:both;
    word-wrap: break-word;
}
h2 {
    font-size: $base-font-size * 2;
    text-transform: capitalize;
    border-top: 4px solid $grey-light;
}
h3 {
    font-size: $base-font-size * 1.5;
}
h6 {
    font-size:italic;
}
#site-title {
    color:$accent-dark;
    font-family: $font-family-title;
    text-transform: uppercase;
    font-size: $base-font-size * 2.5;
    font-weight: bold;
    line-height: $base-line-height * 2;
    margin: 20px 0;
    a{text-decoration:none; color:$accent-dark;}
}

/* -------------------------------------------------------------------------*/
/* Links */
a {
    @include link-colors($accent-main, saturate($accent-light,5%), $accent-light, lighten($accent-main, 10%), $accent-dark);
    text-decoration: none;
    &:hover{text-decoration:underline;}
}


/* -------------------------------------------------------------------------*/
/* General Navigation */
.navigation,
    #sort-links {
        list-style:none;
        padding:0;
        ul {
            margin:0;
            padding:0;
        }
        li {
            display:inline;
        }
}

.asc a:after,
.desc a:after {
    font-family: "FontAwesome";
}

.asc a:after {
    content: " \f0d8";
}

.desc a:after {
    content: " \f0d7";
}

.secondary-nav,
    #secondary-nav {
        margin-bottom: 1em;
        overflow: auto;
        li {
            margin-right:10px;
            display: block;
            float:left;
            &.active a {
                font-weight: bold;
            }
        }
}
.browse,
  .tags,
  .items {
      .secondary-nav li, #secondary-nav li{
          @include line-button;
      }
}

.pagination{
    @include horizontal-list;
    margin:1em 0;
    .page-input {
        form {
            padding:0;
        }
        #page{
            width:30px;
            text-align:right;
        }
        input {
            width:30px;
            text-align:center;
            margin:0;
        }
    }
    .pagination_next a,
    .pagination_previous a,
    .previous-page a,
    .next-page a {
        @include link-button;
        line-height: $base-font-size * 1.5;
    }
}

.pagination_next a,
.pagination_previous a {
    display: inline-block;
    text-indent: -9999px;
    position: relative;
    width: 1.5 * $base-line-height;
    text-align: center;
}

.pagination_next a:after,
.pagination_previous a:after {
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5 * $base-line-height;
    height: 1.5 * $base-line-height;
    line-height: 1.5 * $base-line-height;
    text-indent: 0;
}

.pagination_previous a:after {
    content: "\f104";
}

.pagination_next a:after {
    content: "\f105";
}

.item-pagination {
    @include horizontal-list;
    padding:2em 0 1em 0;

    .next a, .previous a {
        @include link-button;
    }
}

#sort-links{
    margin:0 0 1em 0;
    .sort-label {
        float:left;
    }
    #sort-links-list {
        overflow: auto;
        padding-left:10px;
    }
    li {
        float:left;
        margin-right:10px;
        @include line-button;
        &.sorting a {
            text-decoration: underline;
            font-weight: bold;
        }
    }
}

#bottom-nav {
   display: none;
}

/* -------------------------------------------------------------------------*/
/* Top Navigation - Mega Menu Styles */

#top-nav {
    min-height: 40px;
/*    position:relative;
*/    .nav-menu {
        overflow: auto;
        background-color:lighten($grey-light, 5%);
        .active {
            background-color: lighten($accent-main, 10%);
            a{color:white;}
        }
    }
    li {
        display: block;
        width: 100%;
        .active a {
            color:white;
        }
        a {
            display:block;
            padding: 1em 0 1em 1em;
            &:hover {
                background-color:$accent-main;
                @include link-colors(white);
                text-decoration: none;
            }
        }

        &:last-of-type {
            border-color: transparent;
        }

        a.open {
            color:white;
            background-color: $accent-main;
        }
    }
    .sub-nav {
        display:none;
        background-color: lighten($grey-light, 10%);
    }
    .sub-nav.open {
        display: block;
        width:100%;
        position:relative;
        margin:0;
        padding:0;
        top:0;
        li {
            padding:0;
            a {
                color:$accent-main;
                padding:1em;
                border-bottom:1px solid white;
            }
            a:hover {
                color:white;
                text-decoration: none;
                background-color:lighten($accent-light, 10%);
            }
        }
        .active a{
            color:white;
        }
        ul a:before {
            content: "\2014\0020";
        }
    }

    [aria-haspopup="true"]:after {
        font-family: "FontAwesome";
        content: "\f0da";
        margin: 0 0 0 .5em;
        vertical-align: bottom;
    }

    [aria-haspopup="true"].open:after {
        content: "\f0d7";
    }
}

/* -------------------------------------------------------------------------*/
/* Forms */

form {
    fieldset {
        border:0;
        padding:0;
        margin: 0 0 rhythm() 0;
    }
    label, input, select {
        margin:1em .5em 1em 0;
    }
}

select {
    @include border-radius(0px);
    border: 1px solid $grey-light;
    height: 1.5 * $base-line-height;
    line-height: 1.5 * $base-line-height;
    font-size: $base-font-size;
    margin-right: 3px !important;
    display: inline-block;
}

input[type=text],
input[type=password] {
    border-color: $grey-light;
    @include rhythm-borders(1px, 0, $base-font-size, solid);
    min-height: 1.5 * $base-line-height;
    padding: rhythm(.25);
}

input[type=submit],
button,
.button {
    @include link-button;
}

.button:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

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

#search-container {
    #search-form {
        position:relative;
        height: 1.5 * $base-line-height;
    }
    input[type=text] {
        margin: 0;
        @include calc(width, "100% - 34px");
    }

    &.with-advanced input[type=text] {
        @include calc(width, "100% - 76px");
    }

    .show-advanced,
    button {
        margin:0;
        width: 1.5 * $base-line-height;
        position: absolute;
        top: 0;
        text-align: center;
        color: $accent-main;

        &:hover {
            color: #fff;
        }

        &:after {
            font-family: "FontAwesome";
            text-indent: 0;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            line-height: $base-line-height;
            padding: rhythm(.25);
        }
    }

    &.with-advanced .show-advanced {
        right: 1.5833 * $base-line-height;
    }

    &.with-advanced button {
        right: 0;
    }

    .show-advanced,
    button {
        text-indent: -9999px;
        right: 0;
    }

    .show-advanced:after {
        content: "\f141";
    }

    button:after {
        content: "\f002";
    }

    #advanced-form {
        position: absolute;
        top: 1.5 * $base-line-height;
        background-color: $background-color;
        z-index: 20;
        width: 100%;
        border: 1px solid;
        border-color: $grey-light;
        border-top-color: #fff;
        padding:0 5%;
        text-align: left;

        &.closed {
            display: none;
        }

        label {
            font-weight: normal;
        }

        input[type=checkbox],
        input[type=radio] {
            margin: rhythm(.25) 5px 0 0;
            float:left;
        }
    }
}

#search-filters,
#item-filters {
    ul {
        list-style-type: none;
        padding: 0;
        @include trailer(1);
    }

    li {
        display: inline-block;
        vertical-align: top;

        &:not(:last-of-type) {
            border-right: 1px solid $text-color;
            padding-right: .5em;
            margin-right: .25em;
        }
    }

    ul ul {
        display: inline-block;
    }

    li li {
        text-transform: lowercase;

        &:not(:last-of-type):after {
            content: ", ";
        }

        &:not(:last-of-type) {
            border-right: 0;
            padding-right: 0;
            margin-right: .125em;
        }
    }
}
/* -------------------------------------------------------------------------*/
/* Advanced Search Form */

.field {
    border-top:1px solid $grey-light;
    overflow: auto;

    label {
        display: inline-block;
    }
}

#advanced-search-form {
    padding:2em 0;
    label, input, select, button {
        margin:.5em 0;
    }
}

.remove_search {
    padding: rhythm(.25) 10px;
    text-indent: -9999px;
    width: 1.5 * $base-line-height;
    position: relative;
    height: 1.5 * $base-line-height;
    display: inline-block;

    &:after {
        content: "\f00d";
        font-family: "FontAwesome";
        text-indent: 0;
        text-align: center;
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
        line-height: 1.5 * $base-line-height;
    }
}

.search-entry:first-child .advanced-search-joiner {
    display: none;
}

/* -------------------------------------------------------------------------*/
/* Tables */
table {
    width:100%;
    margin:1em 0;
    overflow: auto;
}
th,
td {
    border-bottom:1px solid $grey-light;
    margin:0;
    padding:0.5em 0;
}
th {
    border-width:3px;
    text-align:left;
}

/* -------------------------------------------------------------------------*/
/* Browse and Item Pages */

#recent-items .item {
    border-bottom:1px solid $grey-light;
    @include trailer();
}

.item {
    .item-img{
        padding-bottom:.5em;
        height: rhythm(5);
        float: right;

        img {
            height: 100%;
            width: auto;
            float: right;
        }
    }
}

.item-file img {
    max-width: 100%;
    height: auto;
}

.show {
    .element {
        border-top:1px solid $grey-light;
    }

    #output-format-list {
        @include horizontal-list;
    }
}

#itemfiles {
    .item-file {
        display: inline-block;
        padding-right:1em;
    }

    [class^="video-"].item-file,
    [class*=" video-"].item-file,
    [class^="audio-"].item-file,
    [class*=" audio-"].item-file {
        display: block;
        padding-right: 0;
    }
}

#itemfiles .download-link {
    display: block;
    height: rhythm(5);

    img {
        height: 100%;
        width: auto;
    }
}

/* -------------------------------------------------------------------------*/
/* File Pages */

body.files .item-file {
    @include trailer();
}

#sidebar {
    clear: both;
}

/* -------------------------------------------------------------------------*/
/* Collections */

.collections {
    .collection {
        margin-bottom:2em;
    }
    .element {
        margin: 0 0 1em 0;
        padding: 0;
        clear: none;
    }

    .item {
        border-top:1px solid $grey-light;

    }
}
#item-filters {
    ul{
        list-style-type: none;
        padding-left: 0;
    }
    .collection {
        overflow: initial;
        @extend h2;
        border-top:none;
    }
}

.image {
    float: right;
    margin: 0 0 rhythm() rhythm();
    height: rhythm(5);

    img {
        float: left;
        height: 100%;
        width: auto;
    }
}

.collection .image img,
.exhibit .image img {
    @include box-shadow(-6px -6px 0 #bbb, -12px -12px 0 #eee);
    margin-left: 12px !important;
}

/* -------------------------------------------------------------------------*/
/* TagCloud */

.hTagcloud {
    ul {
        list-style:none;
        margin-left:0;
        padding-left:0;
        padding-top:1em;
        li {
            display:inline-block;
            margin: (.25 * $base-line-height) 20px;
            margin-left: 0;
            a {
                text-decoration: none;
            }
        }
        .popular,
        .-popular {
            font-size:120%;
        }
        .v-popular {
            font-size:140%;
        }
        .vv-popular {
            font-size:180%;
        }
        .vvv-popular {
            font-size:220%;
        }
        .vvvv-popular {
            font-size:260%;
        }
        .vvvvv-popular {
            font-size:300%;
        }
        .vvvvvv-popular {
            font-size:320%;
        }
        .vvvvvvv-popular {
            font-size:340%;
        }
        .vvvvvvvv-popular {
            font-size:360%;
        }
    }
}

/* -------------------------------------------------------------------------*/
/* Simple Pages */

#simple-pages-breadcrumbs {
    margin-bottom: 1.5em;
    font-style: italic;
    a{
        @include link-button;
        display: initial;
    }
}

/* -------------------------------------------------------------------------*/
/* Geolocation */

#map {
    #map-links {
        padding-top:0 !important;
    }
    #link-block {
        height:auto;
    }
}

#geolocation {
    margin:1em 0;
}
/* -------------------------------------------------------------------------*/
/* Commenting */
#comments-container {
    margin:1em 0;
    #comments {
        margin:0;
        padding:0;
    }
}

#recaptcha_area input {
    min-height: 0;
}

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

#exhibit-pages:not(.full) {
    padding-top:0;
    ul {
        padding:0;
        list-style-type: none;
        li {
            padding: .5em 0;
            display:block;

            a {
                display:block;
                padding-left:1em;
                &:hover{text-decoration:none;}
            }
            ul a {
                &:before {
                    content: "\2014\0020";
                }
            }
        }
    }

    & > ul {
        margin-left: 0;
    }

    & > ul > li {
        border-top: 2px solid $grey-light;
    }
}

.exhibit .description p:first-of-type,
.collection .collection-description p:first-of-type {
    margin-top: 0;
}

#exhibit-pages.full {
    border-color: $grey-light;
    @include leading-border(2px, 0, $base-font-size, solid);

    ul {
        margin:1em 0 0 0;
        list-style-type: none;
        li {
            display:block;
            border-top:2px solid $grey-light;

            a {
                display:block;
                &:hover{text-decoration:none;}
            }
            ul {
                margin-left:2em;
            }
        }
    }

    .current-page {
        display:block;
        background-color: $accent-light;
        padding:.5em;
        color:white;
    }

    #secondary-nav {
        overflow:hidden;
        li {
            border:none;
            margin:0 .5em .5em 0;
        }
        ul {
            width:100%;
            float:left;
            margin:0;
            .current a {
                background-color: lighten($accent-main, 5%);
                color:white;
            }
            li {
                padding:0;
                display:block;
                float:left;

                a {
                    @include link-button;
                    margin-bottom:0;
                }

            }
        }
        & > li:nth-child(2) {
            display: block;
        }

        & > li:nth-child(3) {
            display: block;
            clear: both;
            a {@include line-button;}
        }

        & > li:nth-child(4) {
            display: block;
            clear: left;
            a {@include line-button;}
        }

        .exhibit-title {
            font-family:$font-family-title;
            text-transform: uppercase;
            padding:.5em 0;
            &:after { content: ":" }
        }
    }
}
#exhibit-child-pages {
    clear:both;
    overflow: hidden;
    padding:.5em 0;
    .exhibit-child-nav {
        margin:.5em 0;
        li {
            border:none;
            display:block;
            float:left;
            margin:0 5px 5px 0;

            a {
                @include link-button;
                @include line-button;
            }
        }
    }
}
.exhibit-block {
    margin-top:1em;
    padding-right:1em;
    overflow: auto;
    clear:both;
    .exhibit-items.left {
        margin-right:5%;
    }
    .exhibit-items.right {
        margin-left:5%;
    }
}

#exhibit-page-navigation {
    clear:both;
    margin:0;
    padding:1em 0em;

    #exhibit-nav-next,
        #exhibit-nav-prev {
            width: 45%;
            margin:.5em 0;
        }
    .current-page {
        clear:both;
        display:block;
        background-color: $accent-main;
        padding:.5em 0;
        color:white;
        margin-top:.5em;
    }
    #exhibit-nav-up {
        clear:both;
        width:100%;
    }
}
/* -------------------------------------------------------------------------*/
/* Html5MediaPlayer */

.mejs-inner button {
    /* Prevents all media player buttons from showing. */
    min-height: 0;
}
