inside/snapporder/scss/style.scss

// Comment out this import if you don't want to use normalize
@import './bower_components/foundation/scss/normalize';

// Or selectively include components
@import "foundation/components/grid";

@import "foundation/components/buttons";
@import "foundation/components/forms";
@import "foundation/components/block-grid";
@import "foundation/components/visibility";

$green: #58AA58;
$row-height: rem-calc(46);

body {
    line-height: 1.4;
    font-family: Arial, sans-serif;

    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        margin-top: rem-calc(10);
        font-family: Arvo, sans-serif;

    }
    ul {
        margin: 0;
        padding: 0;
        padding-left: rem-calc(20);
        padding-top: rem-calc(8);
    }
    p {
        margin: 0;
        margin-top: rem-calc(10);
    }
}
.container {
    @include grid-row();
    margin-top: rem-calc(10);
}
.title,
.subtitle {
    @include grid-column(12);
}
.subtitle {
    margin-bottom: rem-calc(10);
}
.about {
    @include grid-column(12);
    @media #{$medium-up} { @include grid-column(6); }
}
.profile {
    padding-left: 0;

    li {
        list-style: none;
        border-bottom: 1px solid #ccc;
        line-height: $row-height;
    }
    strong {
        display: inline-block;
        width: 30%;
        color: #4d4d4d;
    }
    .profile-value {
        display: inline-block;
        width: 70%;
        text-align: right;
    }
}
.activation {
    @include grid-column(12);
    @media #{$medium-up} { @include grid-column(6); }

    span.error {
        margin-bottom: 0;
    }

    .activation-form {
        label {
            font-weight: bold;
            display: inline-block;
            width: 30%;
            line-height: $row-height;
            &.no-width {
                font-weight: normal;
                display: inline-block;
                width: auto;
                border-bottom: 0;
                line-height: 1;
            }
        }
        .form-row {
            border-bottom: 1px solid #ccc;
        }
        input[type=text],
        input[type=password] {
            display: inline-block;
            width: 70%;
            background-color: white;
            border: 0;
            text-shadow: none;
            height: $row-height;
            margin: 0;
        }
        select {
            display: inline-block;
            width: 70%;
            background-color: white;
            border: 0;
            padding-left: 0;
            height: $row-height;
            outline: 0;
            margin: 0;

            &[name=day],
            &[name=month],
            &[name=year] {
                width: 23.333333333333%;
            }
        }
        input[name=zipcode],
        .area-wrap {
            width: 33.33333%;
        }
        .area-wrap {
            display: inline-block;
            padding-left: 4px;
        }
        label[for=id_newsletter] {
            border-bottom: 0;
        }
        .newsletter-text {
            display: inline-block;
            width: 70%;
            border-bottom: 0;
            height: $row-height;

            input {
                margin: 0;
                margin-right: 4px;
            }
        }
    }
}
.btn-submit {
    display: block;
    width: 100%;
    @media #{$medium-up} {
        display: inline-block;
        width: auto;
    }

}
#id_date_of_birth_day,
#id_date_of_birth_month,
#id_date_of_birth_year {
    width: 33.333333%;
}

.btn-submit,
.button {
    font-family: Arial, sans-serif;
    color: darken($green, 30%);
    font-weight: bold;
    font-size: 20px;
    padding: 0.8em 1.2em;
    border: none;
    background: $green url('../img/gradient.png') repeat-x bottom left;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid darken($green, 10%);
    display: inline-block;
    box-shadow: 0 1px 0 rgba(17, 73, 17, 0.1), 0 1px 0 lighten($green, 10%) inset;
    text-align: center;
    border-radius: 6px;
    margin: 0;

    &:hover,
    &:focus {
        background-color: lighten($green, 10%);
        color: darken($green, 20%);
    }
}

footer {
    @include grid-column(12);

    text-align: left;

    .logo {
        margin-right: rem-calc(36);
    }
}

/* Confirmation*/
.confirmed {
    margin-top: 0;
    footer {
        margin-top: rem-calc(20);
        text-align: center;
    }
}
.success-wrap {
    text-align: center;
    position: relative;
    .title {
        position: absolute;
        font-size: rem-calc(16);
        top: rem-calc(32);
        color: white;
        text-shadow: 2px 2px 0 black;
        .em {
            text-transform: uppercase;
            font-size: rem-calc(72);
        }
    }
    img {
    }
    .button-wrap {
        position: absolute;
        bottom: rem-calc(32);
        left: 0;
        right: 0;
        text-align: center;
    }
}