@import url('/static/css/shared.less');

article {
    .headline {
        .right {
            cursor: pointer;
        }

        .selected_work {
            background-image: url('/static/img/headline_icons_sprite.png');
            
            &.index {
                background-position: 0 0;
            }
            
            &.sorting {
                background-position: 0 -40px;
            }
        }
        
        .time_machine {
            &.right {
                margin-right: -1px;
            }
        }
    }

    .years {
        display: none;

        position: relative;

        height: 41px;
        width: 920px;

        margin-top: -1px;

        background-color: #FFF;

        line-height: 41px;

        font-family: 'Aller', sans-serif;
        font-size: 15px;
        color: #969696;

        padding: 0px 15px;

        &:after {
            content: '';
            position: absolute;
            left: 0; top: 41px;

            width: 950px;
            height: 5px;
            background-image: url('/static/img/time_machine_shad.png');
        }

        ul {
            display: inline-block;
            text-align: center;

            width: 773px;
            margin: 0 auto;

            li {
                font-family: 'GothamBookRegular', sans-serif;

                display: inline-block;
                padding-right: 15px;

                a {
                    color: #969696;

                    &:hover { color: @link-color; }
                }
            }
        }

        .text {
            padding-right: 15px;
        }

        .navigation {
            padding: 14px 0px 14px 15px;
            height: 13px;

            a {
                padding-right: 6px;
                display: inline-block;
                height: 13px;
                vertical-align: top;

                &:last-of-type { padding-right: 0; }
            }

            span {
                .nt;

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

                width: 13px;
                height: 13px;

                &.previous {
                    background-image: url('/static/img/nav/arrows_sprite.png');
                    background-position: 0 0;

                    &:hover {
                        background-position: 0 -13px;
                    }
                }

                &.next {
                    background-image: url('/static/img/nav/arrows_sprite.png');
                    background-position: 0 -26px;

                    &:hover {
                        background-position: 0 -39px;
                    }
                }
            }
        }
    }
}

#project_grid {
    margin-top: 20px;

    li {
        @fadein-time: 0.15s;
        @fadeout-time: 0.35s;

        .img_container {
            .transition(all @fadeout-time ease);
            border: solid 8px white;
            position: relative;

            background-color: #f5f5f5;

            // don't screw up when there's no picture
            width: 214px;
            height: 154px;

            /* display image over loading */
            img {
                position: relative;
                z-index: 1;
            }

            .new {
                position: absolute;

                // float top-right
                top: 0; right: 0;
                width: 60px; height: 60px;

                background-image: url('/static/img/new_ribbon.png');
                z-index: 2; // above image (see above)
            }

            &:before {
                .transition(inherit);

                content: '';
                position: absolute;
                left: -8px; top: -8px;

                opacity: 0;

                width: 228px; // 230px - 2px
                height: 169px;
                border: 1px solid #ebebeb;
            }

            &:after {
                .transition(inherit);

                content: '';
                position: absolute;
                left: -7px; top: -7px;

                width: 228px;
                height: 3px;
                background-color: #e6a07d;

                z-index: -1; /* hide behind other elements border */
            }

            .loading {
                position: absolute;
                left: 65px; top: 70px;

                width: 83px;
                height: 14px;

                background-image: url('/static/img/loading_sprite.png');
                z-index: 0;
            }
        }

        position: relative;

        margin: 10px 0px;
        margin-right: 10px;

        float: left;
        width: 230px;
        height: 219px;

        text-shadow: 1px 1px 0px #fff;

        /* if you change the 4n to something else, update the JS code too */
        &:nth-of-type(4n) { margin-right: 0px; }
        &.4n { margin-right: 0px; }

        .bottom_text {
            .transition(all @fadeout-time ease);

            position: absolute;
            bottom: 9px;

            width: 230px;

            p {
                text-align: center;

                color: #969696;

                &.title {
                    color: @link-color;
                    font-family: 'Aller', sans-serif;
                    font-size: 15px;

                    margin-bottom: 4px;
                }
            }

            /*
             * Until https://bugs.webkit.org/show_bug.cgi?id=23209 is fixed, we
             * cannot use CSS transitions in Chrome.
             */
            /*
            &:after {
                .transition(inherit);

                content: '';
                position: absolute;
                left: 0px; top: -8px;

                width: 230px;
                height: 10px;

                background-image: url('/static/img/tile_shadow.png');
            }
            */
        }

        .drop_shadow {
            .transition(all @fadeout-time ease);

            position: absolute;
            left: 0px; top: 171px;

            width: 230px;
            height: 10px;

            background-image: url('/static/img/tile_shadow.png');
        }

        &:hover {
            .img_container {
                .transition(all @fadein-time ease);
                border-bottom-width: 53px;

                &:before {
                    .transition(inherit);
                    height: 218px;
                    opacity: 1;
                    top: -12px;
                    background-position: 0px 220px;
                }

                &:after {
                    .transition(inherit);
                    top: -11px;
                }
            }

            .bottom_text {
                .transition(all @fadein-time ease);
                bottom: 15px;

                .title {
                    .transition(inherit);
                    color: darken(@link-color, 10%);
                }

                /* see commented code above...
                &:after {
                    .transition(inherit);
                    top: 43px;
                }
                */
            }

            .drop_shadow {
                .transition(all @fadein-time ease);
                top: 216px;
            }
        }
    }
}

#pagination {
    margin: 20px 10px 0px 10px;

    background-image: url('/static/img/pagination_bar.png');
    background-repeat: repeat-x;

    width: 930px;

    text-align: center;

    font-family: 'GothamBookRegular', sans-serif;
    font-size: 14px;

    color: #969696;
    text-shadow: 1px 1px 0 #fff;

    li {
        display: inline-block;
        width: 34px;
        height: 12px;

        border-top: solid 5px transparent;
        padding-top: 8px;

        a { color: inherit; }

        &.nh {
            font-family: inherit !important;
            color: inherit !important;
            &:hover { border-top-color: transparent; }
        }

        &.current {
            font-family: 'GothamBlackRegular', sans-serif;
            border-top-color: #c8c8c8;
        }

        &.sep {
            border-top-color: #d8d8d8;
            &:hover { border-top-color: #d8d8d8; }
        }

        &:hover {
            font-family: 'GothamBlackRegular', sans-serif;
            color: @link-color;
            border-top-color: #e6a07d;
        }

        div {
            .nt;

            display: inline-block;
            vertical-align: middle;
            margin-bottom: 2px;

            width: 8px;
            height: 11px;

            &.previous {
                background-image: url('/static/img/nav/page_sprite.png');
                background-position: 0 0;

                &:hover {
                    background-position: 0 -11px;
                }
            }

            &.next {
                background-image: url('/static/img/nav/page_sprite.png');
                background-position: 0 -22px;

                &:hover {
                    background-position: 0 -33px;
                }
            }
        }
    }
}