@import "bourbon/bourbon";
@import "base/grid-settings";
@import "neat/neat";
@import "base/base";


a[href=""] {
    outline: 1px solid red;
}

body > main {
    > header,
    > article > header,
    > article > section,
    > footer {
        > div {
            @include outer-container;
            > div {
                @include row();
                margin-bottom: 3em;
                .main {
                    @include span-columns(8);
                    h1 {
                        font-size: 2em
                    }
                    h2, h3, h4, h5, h6 {
                        margin: 1em 0 0.25em 0;
                    }
                }
                nav {
                    border-left: 1px solid $base-border-color;
                    @include span-columns(4);
                    @include pad(0 0 0 2 * $gutter)
                }
            }
        }
    }
}

section.intro {
    @include outer-container;
    > div {
        @include row();

        > div {
            text-align: center;
            @include span-columns(10);
            @include shift(1);
            margin-bottom: 0;
        }
    }
}

body {
    > main > article,
    > section {
        display: none;
    }
    #home {
        display: block;
    }
}


.modal dialog {
    float: left;
    margin-right: $gutter;
    width: 49%;

    &:last-child {
        margin-right: auto;
    }

    &:only-child {
        float: none;
    }
}


.extension-file {
    section:first-child {
        /* Add a border equal to the number of featured extensions - 1 */
        border-top: 2px solid $alt-background-color;
        position: relative;
        padding-top: 18 * $vertical-base;

        @include icon(before, upload, circular, true, 8*$vertical-base) {
            background-color: $green;
            color: $white;
            top: 2 * $vertical-base;
        }
    }

    button {
        background-color: $green;
        color: $alt-font-color;
    }
}

.extension-url {
    section:first-child {
        /* Add a border equal to the number of featured extensions - 1 */
        border-top: 2px solid $alt-background-color;
        position: relative;
        padding-top: 18 * $vertical-base;

        @include icon(before, link, circular, true, 8*$vertical-base) {
            background-color: $blue;
            color: $white;
            top: 2 * $vertical-base;
        }
    }

}

.extension-feature,
#dialogs .extension-feature,
.modal .extension-feature
 {
    section:first-child {
        h2 {
            margin-top: $vertical-base;
        }
    }

    section:last-child {
        padding: 0px;
    }

    ul {
        li {
            border-bottom: 1px solid $light-gray;
            padding: 2 * $vertical-base;

            a {
                position: relative;
                display: block;
                padding-right: 25px;
                @include icon(before, right-arrow) {
                    color: $blue;
                    position: absolute;
                    right: 0;
                    top: 50%;
                    margin-top: -.5em;
                    font-size: 1.5em;
                }
            }

            h3 {
                font-size: 1.125 * $base-font-size;
                font-weight: 600;
                margin-bottom: $vertical-base;
            }

            p {
                text-align: left;
                margin: 0;
                color: $base-font-color;
                font-weight: normal;
            }
        }
    }
}

footer {
    @include pad(5 * $vertical-base 0);
    section {
        @include span-columns(4);
        @include shift(1);
    }

    nav {
        @include span-columns(2);
        &:first-of-type {
            @include shift(1);
        }
        h2 {
            line-height: 1.5;
            margin-bottom: 0;
        }
    }
}

footer, main header {
    background-color: $alt-background-color;
    color: $alt-font-color;
}


body > main > header {
    @include row();
    height: $vertical-base * 10;
    line-height: $vertical-base * 10;
}

body > main > article {
    padding-top: $vertical-base * 10;
    margin-top: -$vertical-base * 10;
}

.scratchx-logo {
    float: left;

    span {
        @include hide-text;
        display: inline-block;
        background: url(../images/scratchx-logo.png) left center no-repeat;
        width: 192px;
        height: $vertical-base * 10;
    }
}

.main-nav {
    float: right;

    ul, li {
        display: inline-block;
    }
    li {
        margin-left: 50px;
    }
}

@import "home";
@import "editor";
@import "gallery";