// Adam 2
// Bootswatch
// -----------------------------------------------------

#grid {
    .core {
        .span(@gridColumns) {
            width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns - 1));
        }
    }
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.1em;
}

.blockHeading {
    .rightSideHeader();
    .border-radius( 6px );
}

img.thumb {
    width: 50%;
    float: left;
    margin-right: 15px;
    max-width: 180px;
}

.btn-green {
    #gradient > .vertical(#8cc63e, darken(#8cc63e, 8%));
    color: #fff;
    text-shadow: none;

    &:hover {
        #gradient > .vertical(darken(#8cc63e, 8%), #8cc63e);
        color: #fff;
        text-shadow: none;
    }
}


body {
    background: url("/Kickstrap/img/body_bg.png") repeat-x scroll 0 0 #4D422A;
    // background: url("/Kickstrap/img/siteBG-fcicecream.jpg") no-repeat center top #fff;
    // background-size:cover;
    // background-attachment: fixed;
    // padding-bottom:30px;
    #weeklyAdBtn {
        float: right;
        margin-top: 20px;
        margin-right: 0;
        width: 230px;
    }

    #contentWrapper {
        background: #f5f0dc;

        #footer {
            #gradient > .vertical(@secondary, darken(@secondary, 2%));
            color: #000;

            a {
                color: #000;

                &:hover {
                    color: #fff;
                }
            }
        }
    }

    #bodyPadding {
        .row {
            margin-left: 0;
        }

        .container {
            #blankBuffer {
                height: 0px;
            }
        }

        .navbar {
            margin-bottom: 30px;

            li {
                line-height: 20px;
                /*line-height: 22px;*/ /* uncomment if you want the nav to be below the brand */
                font-size: 15px;
            }

            .nav {
                /*margin-top:49px;*/
            }

            .nav > li > a {
                padding: 10px 10px;
                font-family: @headingsFontFamily;
                text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
                color: #fff;

                &:hover {
                    #gradient > .vertical(@secondaryDark, @secondary);
                }
            }

            #facebookNav {
                font-size: 50px;
                margin-left: 0;
                margin-top: 1px;

                #facebookLink {
                    color: @primary;

                    &:hover {
                        background: none;
                        text-decoration: none;
                    }
                }
            }

            #departNav {
                margin-top: -30px;
            }

            .navbar-inner {
                min-height: @navbarHeight;
                padding: 0 0;
                background: none;
                border: none;
                // Prevent floats from breaking the navbar
                .clearfix();

                .container {
                    //#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
                    /*border-bottom: 16px solid @secondaryDark; */
                    background: url('/Kickstrap/img/header_bg.png') no-repeat #4d422a;
                    min-height: 136px;
                    position: relative;

                    .brand {
                        padding: 0 20px 10px;
                        margin-left: 20px;
                        font-family: @headingsFontFamily;
                        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
                        width: 270px;
                        height: 119px;
                        max-width: 50%;
                        width: 325px\9;
                        /*float: none;*/ /* uncomment if you want the nav to be below the brand */
                        img {
                            width: 325px;
                        }
                    }

                    .nav-collapse {
                        clear: both;

                        .nav {
                            margin-top: -10px;
                            margin-bottom: -10px;
                            #gradient > .vertical(@secondary, darken(@secondary, 2%));
                            width: 100%;

                            &.loggedNav {
                                margin-top: -130px;
                                color: #fff !important;
                                background: none !important;

                                a {
                                    color: #fff !important;
                                }
                            }
                        }
                    }

                    .nav.pull-right {
                        margin: -101px 20px 0 0;

                        li a:hover {
                            #gradient > .vertical(@primaryDark, @primary);
                        }
                    }
                }
            }

            &-inverse {

                .navbar-search .search-query {
                    color: @textColor;
                }
            }
        }

        #schoolCentsNav, #rewardsSC {
            display: none;
        }

        #rewardsContent {
            .tab-content {
                .span12 {
                    margin-left: 0;

                    &#rewardsPerks {
                        #allCouponsContainer, #couponModal {
                            .oneCoupon {
                                width: 28%;
                            }
                        }

                        .span7 {
                            width: 52%;
                        }
                    }
                }

                .c100.big {
                    font-size: 320px;
                }
            }
        }


        #mainContent {
            padding: 0;

            #contactContainer {
                .paragraphContainer {
                    h3, h4, p {
                        margin: 0;
                        line-height: 1.4em;
                    }

                    p {
                        font-size: 12px;
                    }

                    td {
                        vertical-align: top;
                    }
                }
            }

            #allFAQs {
                &.accordion {
                    .accordion-group {
                        border: none;
                        margin-left: 20px;
                        margin-bottom: 6px;

                        .accordion-heading {
                            background: @primary;
                            .border-radius(10px);

                            h3 {
                                margin: 0;

                                a {
                                    color: #fff;
                                }
                            }
                        }

                        .accordion-body {
                            .accordion-inner {
                                border: none;
                                padding-top: 6px;
                                padding-right: 0;

                                .accordion {
                                    margin-top: 2px;
                                    margin-bottom: 0;
                                    padding-bottom: 0;

                                    .accordion-group {
                                        margin-left: 0;

                                        .accordion-heading {
                                            background: @grayLighter;
                                            .border-radius(10px);

                                            .accordion-toggle {
                                                padding: 8px;
                                            }

                                            h4 {
                                                padding: 6px;
                                                margin: 0;
                                                color: #000;
                                            }
                                        }

                                        .accordion-body {
                                            .accordion-inner {
                                                padding-right: 15px;

                                                .aFeature {
                                                    padding-bottom: 0;
                                                    margin-bottom: 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }


            #rewardsContainer {
                h1, h2, h3, h4, h5, h6 {
                    margin-top: 16px;
                    margin-bottom: 0;
                }

                .span4 {
                    width: 33%;
                    float: right;
                }

                .span8 {
                    width: 61%;
                }
            }

            #allBlogPosts {
                .onePost {
                    margin-bottom: 20px;
                    padding-bottom: 20px;
                    border-bottom: 2px dotted @primary;

                    h2 {
                        margin-bottom: 0;
                        margin-top: -5px;
                    }

                    h5 {
                        margin-top: 4px;
                        margin-bottom: 8px;
                    }

                    img {
                        float: left;
                        margin-right: 2%;
                        margin-bottom: 5px;
                    }

                    li {
                        img {
                            float: none;
                            display: list-item;
                            margin-left: 0;
                        }
                    }
                }
            }

            #theBlogPost {
                li {
                    img {
                        float: none;
                        display: list-item;
                        margin-left: 0;
                    }
                }
            }

            #blogNavigation {
                p {
                    a {
                        margin-right: 12px;
                        color: @secondary;

                        &.currentPage {
                            font-weight: bold;
                            color: @primary;
                        }
                    }
                }
            }

            #blogPosts {
                margin-top: 30px;
                margin-bottom: 30px;
                //padding-top:30px;
                //border-top: 1px solid @grayLightMid;
                .onePost {
                    float: left;
                    margin-bottom: 0;
                    padding-bottom: 10px;
                    position: relative;
                    height: 170px;
                    //border-bottom: 1px solid @grayLightMid;
                    h4 {
                        line-height: 1em;
                        margin-bottom: 0px;
                        margin-top: 10px;
                    }

                    h6 {
                        line-height: 1em;
                        margin-bottom: 6px;
                        margin-top: 4px;
                    }

                    img {
                        margin: 0 auto;
                        display: block;
                    }

                    &.third {
                        width: 29%;
                        margin-right: 4%;
                    }

                    &.half {
                        width: 46%;
                        //margin-right:4%;
                        &.right {
                            float: right;
                        }
                    }

                    &.full {
                        width: 100%;
                        height: auto;
                        //margin-right:4%;
                        h4 {
                            font-size: 24px;
                        }

                        img {
                            width: 150px;
                        }
                    }
                }
            }

            #departmentOffset {
                h3 {
                    line-height: 1em;
                }

                .deptMainPhoto {
                    float: left;
                    width: 48%;
                    margin-right: 20px;
                    margin-bottom: 20px;
                }

                .deptMainPhotoOdd {
                    float: left;
                    width: 48%;
                    margin-bottom: 20px;
                }

                .deptMainPhotoSmall {
                    float: left;
                    width: 22%;
                    margin-bottom: 10px;
                    margin-right: 10px;
                }

                #exclusiveBrands {
                    .accordion-group {
                        border: none;

                        .accordion-heading {
                            border-bottom: 3px solid @primary;
                            padding-bottom: 0;
                            height: 60px;
                            position: relative;

                            &:hover {
                                background-color: @grayLighter;
                                border-bottom: 3px solid @grayLighter;
                            }

                            &.viewed {
                                background: @primary;
                                margin-top: 10px;
                                padding-bottom: 0;
                                .border-top-radius(10px);

                                & > a {
                                    color: #fff;
                                }

                                .smallPhoto {
                                    /*position: absolute;
								top: 5px;
								right: 5px;*/
                                    float: left;
                                    margin: 5px 10px 0;
                                    display: none;
                                }
                            }

                            a {
                                font-size: 18px;
                                line-height: 42px;
                            }

                            .smallPhoto {
                                /*position: absolute;
							top: 5px;
							right: 5px;*/
                                float: left;
                                margin: -3px 10px 0 0;
                                display: block;
                            }
                        }

                        .accordion-body {
                            border: none;

                            &.in {
                                border-bottom: @primary 15px solid;
                                .border-bottom-radius(10px);
                                margin-bottom: 10px;
                            }

                            .accordion-inner {
                                border: none;
                            }
                        }
                    }
                }
            }

            .carousel-buffer {
                background: none repeat scroll 0 0 rgba(0, 0, 0, 0.85);
                background-color: #3c3c3c;
                height: 30px;
                margin-top: 68px;
                text-align: center;

                i, span {
                    margin-top: 7px;
                    color: @grayLightMid;

                    &:hover {
                        color: #ffffff;
                        cursor: pointer;
                    }
                }
            }

            .sideContentContain {
                width: 100%;
                margin-bottom: 30px;

                .sideContent {
                    margin: 15px 15px 0 20px;
                }
            }

            #petersonDepts {
                margin: 15px 0;
                padding-bottom: 25px;
                border-bottom: 1px solid @grayLightMid;

                #leftDept {
                    width: 46.5%;
                    margin: 0 3% 0 0;
                    padding-right: 3%;
                    border-right: 1px solid @grayLightMid;
                    float: left;

                    h3 {
                        margin-top: 0;
                        margin-bottom: 0;
                    }
                }

                #rightDept {
                    width: 46.5%;
                    float: left;

                    h3 {
                        margin-top: 0;
                        margin-bottom: 0;
                    }
                }
            }

            #theDepartments {
                margin-top: 30px;
                padding-top: 10px;
                border-top: 1px solid @grayLightMid;

                #aboutUs {
                    /*border-bottom: 1px solid @grayLightMid;*/
                    margin-bottom: 30px;

                    img {
                        width: 260px;
                        float: left;
                        margin: 0 20px 20px 0;
                    }
                }

                .left {
                    width: 47%;
                    padding-right: 10px;
                    float: left;
                }

                .left .aDepartment:last-child, .right .aDepartment:last-child {
                    border-bottom: 0 solid #fff;
                }

                .right {
                    width: 47%;
                    padding-left: 10px;
                    float: right;
                }


                .aDepartment {
                    width: 100%;
                    float: left;
                    margin-bottom: 15px;
                    padding-bottom: 15px;
                    border-bottom: 1px solid @grayLightMid;

                    h3 {
                        line-height: 1em;
                        margin-bottom: 6px;
                        margin-top: 0;
                    }

                    img.thumb {
                        width: 50%;
                        float: left;
                        margin-right: 15px;
                        max-width: 180px;
                    }
                }
            }

            #rightSidebarCollapse {
                margin: 0;

                .accordion-group {
                    border: none;
                    margin-bottom: 15px;

                    .accordion-heading .accordion-toggle {
                        .rightSideHeader();
                        .border-radius( 6px );

                        span.padding-left {
                            padding-left: 12px;
                        }
                    }

                    .accordion-body {
                        margin-top: 0px;
                        padding-top: 0px;

                        h5 {
                            margin-top: 0;
                        }
                    }

                    .accordion-inner {
                        padding-top: 0;
                        padding-left: 20px;
                        border: none;

                        h5 {
                            color: @grayDarker;
                            margin-bottom: 0px;
                            margin-top: 8px;
                        }

                        p {
                            margin-left: 12px;
                            margin-bottom: 2px;
                        }
                    }
                }

                h4 {
                    color: #fff;
                    margin: 0;
                }

                #mapContain {
                    margin-top: 15px;
                }
            }

            #sharegroupContain {
                margin: 0 0 30px;

                h4 {
                    .rightSideHeader();
                    margin-bottom: 12px;
                }
            }

            .feedFacebookWall {
                margin: 0 0 30px;
                #gradient > .vertical(darken(#f5f0dc, 6%), #f5f0dc);
                position: relative;

                h4 {
                    .rightSideHeader();
                    margin-bottom: 12px;
                }

                #facebookWall {
                    padding-top: 50px;
                }

                .fb-control {
                    position: absolute;
                    top: 60px;
                    left: 15px;
                    width: 25px;
                    height: 25px;
                    margin-top: -17px;
                    font-size: 45px;
                    font-weight: 100;
                    line-height: 18px;
                    color: @white;
                    text-align: center;
                    background: @grayDarker;
                    border: 3px solid @white;
                    .border-radius(23px);
                    .opacity(50);
                    // we can't have this transition here
                    // because webkit cancels the carousel
                    // animation if you trip this while
                    // in the middle of another animation
                    // ;_;
                    // .transition(opacity .2s linear);
                    // Reposition the right one
                    &.right {
                        left: auto;
                        right: 15px;
                    }
                    // Hover state
                    &:hover {
                        color: @white;
                        text-decoration: none;
                        .opacity(90);
                    }
                }
            }

            #onlineShoppingBox {
                text-align: center;
            }

            #rewardsBox, #onlineShoppingBox {
                #gradient > .vertical(darken(#f5f0dc, 6%), #f5f0dc);

                h4.header {
                    .rightSideHeader();
                    .border-radius(6px);
                    margin-bottom: 12px;
                }

                #actionBtns {
                    margin-right: 12px;
                }

                #rewardsContain, #onlineShoppingContain {
                    margin: 10px 20px;
                }
            }

            #socialConnect {
                margin: 0 0 15px;
                #gradient > .vertical(darken(#f5f0dc, 6%), #f5f0dc);

                #socialConnectHeader {
                    .rightSideHeader();
                }

                p {
                    font-size: 55px;

                    span {
                        &:first-of-type {
                            margin-left: 20px;
                        }

                        margin: 6px 4px;

                        a {
                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }
    }
}


// MEDIA QUERIES
// -----------------------------------------------------

@media (max-width: 995px) {

    body {
        #bodyPadding {
            .navbar .navbar-inner {
                margin-top: 15px;
            }

            #mainContent {

                #socialConnect {
                    p {
                        font-size: 45px;

                        span {
                            margin: 1% 4%;

                            &:first-of-type {
                                margin-left: 7%;
                            }
                        }
                    }
                }

                #theDepartments {
                    .left {
                        /*width:auto;*/
                        margin-bottom: 15px;
                        padding-bottom: 15px;
                        border-bottom: 1px solid @grayLightMid;
                    }

                    .right {
                        /*width:auto;*/
                    }

                    .left .aDepartment:last-child {
                        padding-bottom: 0;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

@media (max-width: 780px) { //convert the nav to a button

    input.span4, textarea.span4, .uneditable-input.span4 {
        width: 94%;
    }

    body {
        .ui-widget-content {
            left: 27px !important;
            width: 78%;
        }

        #loggedOutContainerMobile a {
            padding: 0px;
        }

        #bodyPadding {

            .navbar {
                margin-bottom: 13px;

                .navbar-inner {
                    .container {
                        .btn-navbar {
                            margin: 60px 20px 0 0;
                        }

                        .nav-collapse {
                            background: @grayDark;
                        }
                    }
                }

                .nav > li > .dropdown-menu.pull-right {
                    visibility: collapse;
                }
            }

            #mainContent {
                #myCarousel {
                    min-height: 240px;

                    .carousel-inner {
                        .item {
                            .carousel-caption {
                                min-height: 30px;

                                p {
                                    display: none;

                                    &.readMoreBtn {
                                        display: block;
                                    }
                                }
                            }
                        }
                    }
                }

                .feedFacebookWall {
                    #facebookWall {
                        .fb-wall-box {
                            width: 100%;
                            float: left;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 580px) {
    body {
        #bodyPadding {
            #mainContent {
                #blogPosts {
                    margin-top: 30px;
                    margin-bottom: 30px;
                    //padding-top:30px;
                    //border-top: 1px solid @grayLightMid;
                    .onePost {
                        float: left;
                        margin-bottom: 0;
                        padding-bottom: 10px;
                        position: relative;
                        height: 270px;
                        //border-bottom: 1px solid @grayLightMid;
                        h4 {
                            line-height: 1em;
                            margin-bottom: 0px;
                            margin-top: 10px;
                        }

                        h6 {
                            line-height: 1em;
                            margin-bottom: 6px;
                            margin-top: 4px;
                        }

                        img {
                            margin: 0 auto;
                            display: block;
                        }

                        &.third {
                            width: 29%;
                            margin-right: 4%;
                        }

                        &.half {
                            width: 46%;
                            //margin-right:4%;
                            &.right {
                                float: right;
                            }
                        }

                        &.full {
                            width: 100%;
                            height: auto;
                            //margin-right:4%;
                            h4 {
                                font-size: 24px;
                            }

                            img {
                                width: 150px;
                            }
                        }
                    }
                }

                #departmentOffset {
                    .deptMainPhoto {
                        float: left;
                        width: 46%;
                        margin-right: 10px;
                        margin-bottom: 20px;
                    }

                    .deptMainPhotoOdd {
                        float: left;
                        width: 46%;
                        margin-bottom: 20px;
                    }

                    .deptMainPhotoSmall {
                        float: left;
                        width: 46%;
                        margin-bottom: 10px;
                        margin-right: 10px;
                    }
                }

                #myCarousel {
                    min-height: 240px;

                    .carousel-inner {
                        .item {
                            .carousel-caption {
                                p {
                                }
                            }
                        }
                    }
                }



                #theDepartments {
                    .left {
                        width: auto;
                        margin-bottom: 15px;
                        padding-bottom: 15px;
                        border-bottom: 1px solid @grayLightMid;
                    }

                    .right {
                        width: auto;
                    }

                    .left .aDepartment:last-child {
                        padding-bottom: 0;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
