/*
 Stylesheet for index.html.
 */

@import mixins
@import variables

.ui-datepicker
    font-size: 0.7em

.twitter-typeahead
    width: 100%

.tt-hint
    color: $baseColor2

.tt-dropdown-menu
    width: 100%
    padding: 4px 0
    background-color: white
    border: 1px solid $baseColor2

    .tt-suggestion
        padding: 4px

        p
            margin: 0

            strong
                color: $baseColor1

        &.tt-cursor
            @extend .t1

            background-color: $baseColor1

            *
                color: white

div#search-field
    @extend .t2

    bottom: 0
    height: 50%
    left: 0
    margin: auto
    margin-top: 15%
    max-height: 100px
    position: absolute
    right: 0
    top: 0
    width: 34%

    #title
        font-size: 4em
        padding-bottom: 0.5em
        text-align: center

        #title-bit
            color: $baseColor1

        #title-angle
            color: $baseColor3

        #title-shift
            color: $baseColor2
            font-style: italic

    form#search-bar

        input[type="text"]
            @include vendor(box-sizing, border-box)

            border: 1px solid $baseColor1
            font-size: 1.1em
            margin-bottom: 0px
            padding: 6px
            width: 100%

        div#advanced-search
            background-color: white
            border: 1px solid $baseColor2
            margin: 0px
            overflow: auto

            >div
                @include vendor(box-sizing, border-box)

                float: left
                height: 100%

            >#col1
                width: 10%

            >#col2
                width: 84%

                ul
                    list-style: none

                    li
                        margin-bottom: 0.5em

                        label
                            display: block
                            font-size: 1.1em

                input[type="text"]
                    @extend .t2

                    border-color: $baseColor3
                    font-size: 1em
                    padding: 2px
                    width: 100%

                    &:hover
                        border-color: $baseColor2

                    &:focus
                        border-color: $baseColor1

                #upper-half
                    >div
                        float: left
                        width: 50%

                    #col2
                        input[type="text"]
                            width: 50%

    &.partly-visible
        height: 1%
        margin-top: 3%
        width: 60%

        #title
            display: none

div#results
    margin-left: auto
    margin-right: auto
    width: 80%

    div.result
        background-color: #F8F8F8
        margin-bottom: 10%
        margin-top: 1%
        padding: 1%

        &.cascade
            @extend .t3

            margin-bottom: 0%