﻿#shopContent {
    width: 800px;
    margin: auto;
    min-height: 500px;
}

#pnlResults li {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 6px;
}

#browseTrail {
    height: 14px;
}


span.title {
    font-size: 12pt;
    font-weight: bold;
}

a.gridCategory {
    color: #000;
}

a.category {
    display: inline-block;
}

a.root {
    color: firebrick;
    font-size: 13pt;
    font-weight: bold;
    margin-top: 25px;
}

a.sub {
    font-size: 11pt;
    color: firebrick;
    font-weight: bold;
    margin-top: 15px;
}

a.item {
    color: #000;
    font-size: 9pt;
    font-weight: bold;
    margin-top: 5px;
}

a.linkText {
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}

#pnlTrail {
    margin-left: 20px;
}

div.partialSearches {
    font-size: 14px;
}

    div.partialSearches ul {
        margin-left: 24px;
    }

    div.partialSearches span.query {
        color: #0000CD;
    }

    div.partialSearches span.excluded {
        text-decoration: line-through;
        color: #ccc;
    }

    div.partialSearches a {
        color: #d4232d;
    }

        div.partialSearches a:hover {
            color: #000;
        }

div.imageGrid {
    margin-bottom: 15px;
}

    div.imageGrid div.table {
        display: table;
    }

    div.imageGrid div.col1 {
        display: table-cell;
        vertical-align: top;
        width: 110px;
    }

    div.imageGrid div.col2 {
        display: table-cell;
        vertical-align: top;
    }

    div.imageGrid img {
        margin-top: 15px;
        width: 100px;
        height: 100px;
    }

    div.imageGrid span a {
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
    }

span.parentName {
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    span.parentName a {
        text-decoration: none;
    }

div.categoryGroup {
    margin-top: 10px;
    margin-bottom: 30px;
    float: left;
}

/*185 per column
  30 margin in between columns*/
.group1Col {
    width: 185px; /*(1 * 185) + (0 * 30)*/
}

.group2Col {
    width: 400px; /*(2 * 185) + (1 * 30)*/
}

.group3Col {
    width: 615px; /*(3 * 185) + (2 * 30)*/
}

.group4Col {
    width: 830px; /*(4 * 185) + (3 * 30)*/
}

.groupMargin {
    margin-right: 30px;
}

div.linkSpacer {
    margin-top: 7px;
    width: 185px;
    float: left;
}

div.linkDiv {
    width: 130px;
    height: 155px;
    text-align: center;
    margin: auto;
}

    div.linkDiv img {
        width: 100px;
        height: 100px;
    }

a.imgLink {
    position: absolute;
}

div.collapse {
    display: none;
}

a.searchShowAll {
    float: right;
    width: 95px;
    height: 22px;
    border: 1px solid black;
    background-color: #eee;
    color: white;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 8px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    text-decoration: none;
}

@media(min-width:1260px) {
    #shopContent {
        width: 987px;
    }

    #pgHeader {
        font-size: 26px !important;
    }

    span.parentName {
        font-size: 16px;
    }

    a.linkText {
        font-size: 13px;
    }

    div.partialSearches {
        font-size: 16px;
    }

    div.imageGrid img {
        width: 180px;
        height: 180px;
        margin-right: 10px;
        margin-top: 0px;
    }

    div.categoryGroup {
        margin-bottom: 80px;
    }

    .group1Col {
        width: 225px;
    }

    .group2Col {
        width: 478px;
    }

    .group3Col {
        width: 732px;
    }

    .group4Col {
        width: 987px; /*(4 * 185) + (3 * 30)*/
    }

    div.linkSpacer {
        width: 224px;
    }

    div.linkDiv {
        width: 150px;
    }

    div.linkDiv img {
        width: 130px;
        height: 130px;
    }

    a.showAll {
        margin-right: 8px;
        top: 30px;
        position: relative;
    }
}
