﻿.wall-modal-overlay {
    /*background: url(../Colorbox/overlay.png) repeat 0 0;*/
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    opacity: 0;
}

    .wall-modal-overlay .close-wrapper {
        background-color: #fff;
        width: 831px;
        background-repeat: no-repeat;
        background-position: 800px;
        height: 35px;
    }

        .wall-modal-overlay .close-wrapper .close {
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            background: url(../Colorbox/controls.png) no-repeat -25px 0;
            width: 25px;
            height: 25px;
            text-indent: -9999px;
            margin: 5px 15px;
        }

.wall-modal-inner .brick {
    -webkit-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 5px 10px rgba(50, 50, 50, 0.5);
}

.wall-modal-inner {
    margin: 60px auto 0px auto;
    width: 840px;
    position: relative;
}

.wall-modal-content {
}

.brick-container {
    width: 1008px;
    margin-left: -5px;
    margin-top: 5px;
}

    .brick-container.brick-container-modal {
        width: 840px !important;
    }



.brick {
    float: left;
    margin: 5px;
    background-color: #fff;
    overflow: hidden;
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .1s;
    -moz-transition-duration: .1s;
    -o-transition-duration: .1s;
    transition-duration: .1s;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}

    .brick:hover { /*-ms-transform: scale(1.05, 1.05);
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        -o-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);*/ /*-webkit-box-shadow: 0px 8px 20px rgba(50, 50, 50, 0.4);
        box-shadow: 0px 8px 20px rgba(50, 50, 50, 0.4);
        z-index: 9999;*/
    }

/* QUICKBUY */

.quick-buy {
    /*height: 20%;
    max-height: 100px;*/
    width: 100%;
    height: 100%;
}

.quick-buy-goto-product {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.quick-buy-content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgb(229, 0, 125); /* Fall-back for browsers that don't
                                    support rgba */
    /*background: rgba(229, 0, 125, .5);*/
    position: absolute;
    width: 100%;
    padding: 5px;
    top: 0px;
}

.price-header {
    color: white;
    padding-right: 10px;
}

.size-elements {
    width: 100%;
    height: 100%;
}

    .size-elements .size-element-wrapper {
        width: 35px;
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 5px;
        display: table;
    }

        .size-elements .size-element-wrapper .size-element {
            color: white;
            text-align: center;
            background-color: black;
            cursor: pointer;
            height: 25px;
            width: 25px;
            display: table-cell;
            vertical-align: middle;
        }

            .size-elements .size-element-wrapper .size-element.notInStock {
                /*opacity: 0.5;*/
            }



.store-status {
    padding-right: 5px;
    padding-top: 5px;
    left: -100%;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.store-status-content {
    background: rgb(0, 176, 170);
    /*background: rgba(0, 176, 170, 0.8);*/
    padding: 5px 20px 5px 5px;
    color: white;
    font-size: 80%;
    text-transform: uppercase;
}

.store-status-text {
    display: inline-block;
}

.store-status-link {
    color: #000;
}

.close-store-status {
    position: absolute;
    top: 12px;
    right: 10px;
    width: 9px;
    height: 9px;
    background: url(../Images/Buttons/close_status.png) no-repeat;
    cursor: pointer;
    z-index: 2;
    opacity: 0.6;
}


/* OVERRIDES ON THE SMALLEST OF BRICKS*/
div.brick_1x1 .size-element-wrapper, div.brick_1x2 .size-element-wrapper, div.brick_1x3 .size-element-wrapper, div.brick_1x4 .size-element-wrapper {
    width: 24px !important;
    height: 24px !important;
    padding: 2px;
}

div.brick_1x1 .size-element, div.brick_1x2 .size-element, div.brick_1x3 .size-element, div.brick_1x4 .size-element {
    /*font-size: 70%;*/
    height: 16px !important;
    width: 24px !important;
}

div.brick_1x1 .close-store-status, div.brick_1x2 .close-store-status, div.brick_1x3 .close-store-status, div.brick_1x4 .close-store-status {
    top: 5px;
    right: 5px;
}

div.brick_1x1 .store-status, div.brick_1x2 .store-status, div.brick_1x3 .store-status, div.brick_1x4 .store-status {
    padding-right: 0px;
    padding-top: 0px;
}

div.brick_1x1 .store-status-content, div.brick_1x2 .store-status-content, div.brick_1x3 .store-status-content, div.brick_1x4 .store-status-content {
    padding-right: 15px;
}
/* //OVERRIDES ON THE SMALLEST OF BRICKS*/


/* //QUICKBUY */
.grid-product {
    height: inherit;
    text-align: center;
    cursor: pointer;
}

.grid-image {
    height: inherit;
}

    .grid-image.linkedImage {
        cursor: pointer;
    }

    .grid-image img {
        height: 100%;
        width: 100%;
    }

.grid-video {
    height: 100%;
    width: 100%;
}

.grid-wysiwyg {
    padding: 5px;
    overflow: hidden; /* Unsure about if this is what we want when content stretches outside the box... */
}

div.brick_1x1 {
    width: 158px;
    height: 120px;
}

div.brick_1x2 {
    width: 158px;
    height: 250px;
}

div.brick_1x3 {
    width: 158px;
    height: 380px;
}

div.brick_1x4 {
    width: 158px;
    height: 510px;
}

div.brick_2x1 {
    width: 326px;
    height: 120px;
}

div.brick_2x2 {
    width: 326px;
    height: 250px;
}

div.brick_2x3 {
    width: 326px;
    height: 380px;
}

div.brick_2x4 {
    width: 326px;
    height: 510px;
}

div.brick_3x1 {
    width: 494px;
    height: 120px;
}

div.brick_3x2 {
    width: 494px;
    height: 250px;
}

div.brick_3x3 {
    width: 494px;
    height: 380px;
}

div.brick_3x4 {
    width: 494px;
    height: 510px;
}

div.brick_4x1 {
    width: 662px;
    height: 120px;
}

div.brick_4x2 {
    width: 662px;
    height: 250px;
}

div.brick_4x3 {
    width: 662px;
    height: 380px;
}

div.brick_4x4 {
    width: 662px;
    height: 510px;
}

div.brick_5x1 {
    width: 830px;
    height: 120px;
}

div.brick_5x2 {
    width: 830px;
    height: 250px;
}

div.brick_5x3 {
    width: 830px;
    height: 380px;
}

div.brick_5x4 {
    width: 830px;
    height: 510px;
}

div.brick_6x1 {
    width: 998px;
    height: 120px;
}

div.brick_6x2 {
    width: 998px;
    height: 250px;
}

div.brick_6x3 {
    width: 998px;
    height: 380px;
}

div.brick_6x4 {
    width: 998px;
    height: 510px;
}

.grid-product .product-brick-image-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    bottom: 40px;
}

    .grid-product .product-brick-image-wrapper img {
        max-height: 100%;
        width: auto;
    }

.grid-product .product-brick-info {
    position: absolute;
    padding: 5px;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

    .grid-product .product-brick-info .brand-category {
        color: #9a9a9a;
    }

.grid-product .product-brand-logo {
    position: absolute;
    top: 10px;
    right: 10px;
}

    .grid-product .product-brand-logo img {
        max-width: 60px;
        height: auto;
    }


div.brick_1x1 .grid-product .brand-category {
    display: none;
}

div.brick_1x1 .grid-product .product-brick-image-wrapper {
    bottom: 25px;
}

    div.brick_1x1 .grid-product .product-brick-image-wrapper img {
        width: 90%;
        height: auto;
        max-height: none;
        margin-top: -45px;
    }

div.brick_1x1 .grid-product .product-brand-logo img {
    max-width: 30px;
    height: auto;
}
