﻿div.productGrid {
    display: inline-block;
    margin-bottom: 12px;
}

div.productGrid:after {
    content: "";
    clear: both;
    display: table;
}

div.productGrid div.hr {
    border-bottom: 1px solid black;
    height: 1px;
}

div.productGrid table {
    border-collapse: collapse;
    /*min-width:638px;*/
    border-left: 1px solid black;
    border-right: 1px solid black;
    font-size: 13px;
    /*width: 100%;*/
}

    div.productGrid table thead tr {
        background-color: #eee;
        font-weight: bold;
        border-bottom: 1px solid #000;
    }

div.productGrid thead td {
    vertical-align: bottom;
}

    div.productGrid thead td:not(:last-child):not(.price) {
        border-right: 1px solid #000;
    }

div.productGrid tbody tr {
    background-color: #fff;
}

    div.productGrid tbody tr:last-child {
        /*border-bottom:1px solid black;*/
    }

    div.productGrid tbody tr.bottom {
        border-top: 1px solid black;
        background-color: #fff !important;
    }

        div.productGrid tbody tr.bottom td {
            padding: 0px;
        }

    div.productGrid tbody tr.smallCaseQty {
        display: none;
    }

div.productGrid a.smallCaseToggle {
    color: #0040FF;
    font-size: 10px;
}

    div.productGrid a.smallCaseToggle:before {
        content: "";
        clear: both;
        display: table;
    }

div.productGrid td {
    padding: 2px 0px 2px 2px;
}

html[data-useragent*='Trident'] div.productGrid td {
    /*fix IE11 issue with background leaking through table*/
    line-height: 1.194;
}

div.productGrid td.item > div {
    width: 104px;
}

    div.productGrid td.item > div.trim {
        width: 104px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

div.productGrid td.item a {
    color: #000;
}

    div.productGrid td.item a:hover {
        color: #d4232d;
    }

div.productGrid td.custom {
}

div.productGrid td > div.trim {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.productGrid td.price {
    text-align: right;
}

    div.productGrid td.price > div {
        width: 125px;
    }

div.productGrid td.uom {
    text-align: center;
}

    div.productGrid td.uom > div {
        text-align: center;
        width: 85px;
    }

div.productGrid td.cart {
    text-align: center;
}

    div.productGrid td.cart > div {
        width: 77px;
    }

div.productGrid td.login {
    text-align: center;
}

    div.productGrid td.login a {
        color: #000;
        margin-left: 10px;
    }

div.productGrid tbody td.border {
    border-right: 1px solid #000;
}

div.productGrid input.cartQty {
    width: 36px;
    height: 17px;
    border: 1px solid #000;
    font-size: 13px;
    font-family: Avalon,Arial,sans-serif;
    margin-left: 2px;
    margin-right: 3px;
    padding: 1px;
}

div.productGrid button.cartButton {
    width: 35px;
    height: 17px;
    border: 1px solid #000;
    background-color: #D4232D;
    color: #fff;
    font-size: 13px;
    line-height: 12px;
    font-family: Avalon,Arial,sans-serif;
}

div.productGrid thead td.caseQty {
    text-align: center;
}

div.productGrid tbody td.caseQty {
    text-align: right;
    padding-right: 8px;
}

div.productGrid div.caseQty {
    position: relative;
}

div.productGrid div.caseHeader {
    position: absolute;
    top: -15px;
    z-index: 2;
    width: 193px;
    background-color: #eee;
}

div.productGrid .fraction {
    font-size: 10px;
    position: relative;
    top: -1px;
}

div.productGrid tr.shade {
    background-color: #eee;
}

div.productGrid tr.lineBelow {
    border-bottom: 1px solid black;
}

div.productGridMsg {
    background-color: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    z-index: 10;
}

    div.productGridMsg img {
        width: 16px;
        height: 16px;
        display: inline-block;
        margin-left: 142px;
    }

div.productGrid div.dropdown {
    margin-right: 2px;
}

    div.productGrid div.dropdown div.colorSwatch {
        width: 10px;
        height: 10px;
        display: inline-block;
        float: left;
        margin-right: 4px;
        margin-top: 2px;
    }

    div.productGrid div.dropdown div.twoColorSwatch {
        width: 10px;
        height: 10px;
        display: inline-block;
        float: left;
        margin-right: 4px;
        margin-top: -1px;
    }

        div.productGrid div.dropdown div.twoColorSwatch div {
            width: 5px;
            display: inline-block;
            float: left;
        }

div.colorName {
    overflow: hidden;
}

html:not([data-useragent*='Chrome']) div.productGrid div.dropdown div.colorName {
    margin-top: 1px;
}

div.productGridColorDialog {
    display: none;
    font-family: Avalon, Arial, sans-serif;
}

    div.productGridColorDialog div.colorOption {
        width: 70px;
        height: 70px;
        display: block;
        float: left;
        margin-right: 5px;
        cursor: pointer;
        text-align: center;
    }

        div.productGridColorDialog div.colorOption:hover .colorSwatch {
            border: 2px solid #aaa;
        }

    div.productGridColorDialog div.colorSwatch {
        width: 25px;
        height: 25px;
        display: inline-block;
        margin-bottom: 3px;
        border: 2px solid #fff;
    }

    div.productGridColorDialog div.colorOption:hover .twoColorSwatch {
        border: 2px solid #aaa;
    }

    div.productGridColorDialog div.twoColorSwatch {
        width: 29px;
        height: 29px;
        display: inline-block;
        margin-bottom: 3px;
        border: 2px solid #fff;
    }

        div.productGridColorDialog div.twoColorSwatch div {
            width: 12px;
            height: 25px;
            display: inline-block;
            float: left;
        }

            div.productGridColorDialog div.twoColorSwatch div:last-child {
                width: 13px;
            }

#divMouseOverPic {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    width: 100px;
    height: 100px;
    background-color: white;
}

#imgMouseOverPic {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}

div.productGrid img.colorPreview {
    float: right;
}

div.gridCaption {
    font-size:13px;
}

    div.gridCaption span.bold {
        font-weight: bold;
    }

div.alertDiv {
    border: 1px solid red;
}

.alertDivHide {
    display: none;
}

.alertDivShow {
    display: block;
}

img.alertImg {
    height: 100%;
    width: 3%;
}

div.alertTxt {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.uomUnit {
    max-height: 18px;
    width: 75% !important;
    float: left;
    padding-left: 25%;
}

.uomAlert {
    max-height: 18px;
    width: 25% !important;
    float: left;
}

img.alertImgRow {
    max-width: 18px;
    max-height: 18px;
}

div.productGrid div.dropdown div.selectContent div.selectDefault {
    margin-left: 8px;
}


@media (min-width: 1260px) {

    div.productGrid table {
        font-size: 15px;
    }

    div.productGrid input.cartQty {
        font-size: 15px;
    }

    div.productGrid a.smallCaseToggle {
        font-size: 12px;
    }

    div.productGrid td.item > div {
        width: 125px;
    }

        div.productGrid td.item > div.trim {
            width: 125px;
        }

    div.productGrid td.price > div {
        width: 137px;
    }

    div.productGrid td.uom > div {
        width: 93px;
    }

    div.productGrid td.cart > div {
        width: 84px;
    }

    div.gridCaption {
        font-size: 15px;
    }

    div.productGrid div.dropdown {
        min-width: 120px !important;
    }

    div.productGrid div.dropdown div.selectContent {
        margin-top: -2px;
        width: 100px !important;
    }

        div.productGrid div.dropdown div.selectContent div.selectDefault {
            margin-left: 10px;
        }

    div.productGrid div.dropdown div.colorSwatch {
        margin-top: 4px;
    }
}

@media print {
    div.productGrid table thead {
        display: table-row-group;
    }
}