studio-2013/wp-content/themes/studio13/sass/app.scss

@import "settings"; // Global Foundation Settings

@import "foundation/foundation-global"; // *always required
@import "foundation/components/global"; // *always required
@import "foundation/components/grid";
// @import "foundation/components/visibility";
@import "foundation/components/block-grid";
@import "foundation/components/type";
@import "foundation/components/buttons";
@import "foundation/components/forms"; // *requires components/buttons
// @import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
@import "foundation/components/button-groups"; // *requires components/buttons
// @import "foundation/components/dropdown-buttons"; // *requires components/buttons
// @import "foundation/components/split-buttons"; // *requires components/buttons
@import "foundation/components/flex-video";
// @import "foundation/components/section";
// @import "foundation/components/top-bar";  // *requires components/grid
@import "foundation/components/orbit";
@import "foundation/components/reveal";
// @import "foundation/components/joyride";
// @import "foundation/components/clearing";
// @import "foundation/components/alert-boxes";
// @import "foundation/components/breadcrumbs";
// @import "foundation/components/keystrokes";
@import "foundation/components/labels";
// @import "foundation/components/inline-lists";
@import "foundation/components/pagination";
// @import "foundation/components/panels";
// @import "foundation/components/pricing-tables";
// @import "foundation/components/progress-bars";
// @import "foundation/components/side-nav";
// @import "foundation/components/sub-nav";
// @import "foundation/components/switch";
// @import "foundation/components/magellan";
@import "foundation/components/tables";
// @import "foundation/components/thumbs";
// @import "foundation/components/tooltips";
// @import "foundation/components/dropdown";

@import "compass/typography/lists/inline-block-list";
@import "compass/css3/transform";
@import "compass/css3/transition";
@import "compass/css3/box-shadow";

/* General styles */
body {
    h1,h2,h3,h4 {
        text-transform: uppercase;
    }
    h1 {
        margin-bottom: 0.3em;
    }
    a {
        @include transition(
            background-color .15s ease,
            color .15s ease);

        &:hover {
            color: $secondary-color;
        }
    }
    
}
/* buttons */
body {
    .button {
        border: 0;
        @extend .secondary;
        @include box-shadow(none);
        text-transform: uppercase;
    }
    .btn-tiny {
        $size: 32px;
        text-align: center;
        font-size: 1.3em;
        display: inline-block;
        color: white;
        width: $size;
        height: $size;
        line-height: $size;
        .icon-twitter {
            font-size: 0.7em;
        }
    }
    .primary {
        background-color: $primary-color;

        &:hover {
            color: white;
            background-color: $secondary-color;
        }
    }
    .secondary {
        background-color: $secondary-color;

        &:hover {
            color: white;
            background-color: $primary-color;
        }
    }
}

header.header {
    margin-top: 2em;
    margin-bottom: 2em;
    .date {
        color: $primary-color;
        font-size: 3.45em;
        text-transform: uppercase;
        font-weight: 600;
        margin-bottom: 10px;
        display: inline-block;

    }
    .logo img {
        position: relative;
        bottom: -15px;
        left: 10px;

    }
    .nav-menu {
        @include inline-block-list;
        margin: 0 auto;
        background-color: $primary-color;

        a {
            font-size: 1.5em;
            font-weight: 600;
            display: inline-block;
            padding: .7em .8em;
            color: white;
            text-transform: uppercase;

            &:hover {
                background-color: $secondary-color;
            }
        }
    }
}
.highlight {
    a {
        height: 280px;
        line-height: 1.1;
        font-size: 2.5em;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
        display: block;
        color: white;
        background-color: $secondary-color;

        &:hover {
            color: white;
            background-color: $primary-color;
        }
        span {
            display: inline-block;
            padding-top: 30px;
            &.larger {
                padding-top: 55px;
                font-size: 1.6em;
            }
        }
        .number {
            font-size: 3em;

        }
    }
}
.separator {
    height: 2px;
    background-color: $secondary-color;
    margin: 2em 0;
    &.tiny-margin {
        margin-top: 0;
        margin-bottom: 0.4em;
    }
}
article {
    margin-bottom: 1em;

    p {
        margin-bottom: 0.6em;
    }

    .article-header {
        h1 a {
            color: inherit;

            &:hover {
                color: $primary-color;
            }
        }
        h4 a {
            color: $secondary-color;
            &:hover { color: $primary-color; }
        }
    }
    .entry-content {
        font-size: 0.9em;
    }
    
    .article-footer {
        text-align: right;
        margin-bottom: 2em;
    }
}
.moretag {
    font-weight: bold;
}
.bluebordered {
    border-left: 2px solid $primary-color;
}
.row.row.tweets-and-blog {
    margin-top: 2em;
    margin-bottom: 3em;
}
.social-media {
    font-size: 2em;
    color: $secondary-color;

    img, i {
        padding-left: 1em;
    }
    i {
        font-size: 1.5em;
        color: $primary-color;
    }
    .uppercase {
        text-transform: uppercase;
    }
}
.sidebar {
    .lineup {
        ul.artists {
            list-style-type: none;
            padding-left: 0;
            text-transform: uppercase;
            font-size: 1.2em;
            font-weight: bold;
            line-height: 1.2;

            a {
                color: $primary-color;
                &:hover {
                    color: white;
                    background-color: $secondary-color;
                }
            }

            &.headliners {
                margin-top: 1em;
                font-size: 2em;

                li:nth-child(even) a {
                    color: $secondary-color;
                    &:hover {
                        color: white;
                        background-color: $primary-color;
                    }
                }
            }
        }
    }

}
.footer {
    min-width: 100%;
    text-align: center;
    height: 400px;
    background-color: $primary-color;
    #inner-footer {
        img {
            margin-top: 100px;
        }
    }
}
.flying-megawhale {
    width: 719px;
    height: 582px;
    background-image: url("../images/megawhale.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: auto;
    margin-top: 4em;
    position: relative;
    top: 50px;
    z-index: -1;
}
.wave {
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background-color: $primary-color;

}
.wavetop {
    position: relative;
    bottom: 12px;
    height: 12px;
    background-image: url("../images/wave_top.png");
    background-size: 48px 12px;
    background-repeat: repeat-x;
    width:100%;
}
.row {
    /* FIXME: responsive */
    width: 1000px;
    max-width: 1000px;
}