﻿.product-filter {
    width: 225px;
    padding: 10px;
    font-weight: normal;
}

.product-filter hr {
    margin: 7px;
    padding: 0;
}

.product-filter-search {
    padding-bottom: 10px;
}

.product-filter-content {
    padding: 7px 7px;
    height: 250px;
    overflow: auto;
    border-style:ridge;
    border-width: 1px;
}

.product-filter-content p {
    margin: 2px;
}

.product-filter-buttons {
    width: 100%;
    text-align: center;
    margin: 10px auto;
}

.product-filter-button {
    width: 40%;
}

.product-search-and-results .results-pane .item-results a.destructive {
    color: #333333;
}

.dimension-filter-changed {
    color: #1f497d;
    font-weight: bold;
}

#top-panel {
    padding: 0 15px;
}

.top-panel-left {
    float: left;
    display: block;
    position: relative;
    width: 50%;
}

.top-panel-right {
    float: right;
    display: block;
    position: relative;
    width: 40%;
}

#top-panel > div > div.selected-category.top-panel-left > div > a {
    float: right;
    display: block;
    margin-top: -0.18em;
    margin-right: -0.5em;
    position: relative;
}

.category-header {
    width: 400px;
    border-style: outset;
    border-width: 2px;
    padding: 5px 8px;
    background-color: #081F2C;
    color: #FFC72C;
    font-size: 1.4em;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-align: center;
}

#bottom-panel {
    margin-top: 55px;
    width: 99.9%;
}

#category-selection-list > ul > li > a {
    color: #000000;
}

#category-selection-list {
    width: 400px;
    z-index: 1;
    position: absolute;
    background: #FFFFFF;
    border-style: outset;
    border-width: 1px;
}

#left-panel {
    width: 20%;
}

#results-panel {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    display: table;
}

#results-panel > div > div.row {
    width: 100%;
    margin: 0;
    padding: 0;
}
#results-panel > div.results-pane {
    width: 100%;
    margin: 0;
    padding: 0;
}

#results-panel > div > div.row > div.breadcrumbs {
    margin: 0;
    padding: 0;
    width: 55%;
}

#results-panel > div > div.row > div.paging {
    float: right;
    margin-top: 10px;
    padding: 0;
    width: 45%;
}

@media (min-width: 992px) {
    .product-search-and-results .results-pane {
        float: left;
        width: inherit;
    }

    .product-search-and-results .drill-down {
        float: left;
        width: 100%;
    }
}

/* For general iPad layouts */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    #left-panel {
        width: 20%;
    }

    #results-panel {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 3px;
        padding-right:3px;
    }

    #results-panel > div > div.row > div.breadcrumbs {
        margin: 0;
        width: 55%;
        float: left;
    }
    
    #results-panel > div > div.row > div.paging {
        float: right;
        padding: 0;
        width: 45%;
    }
} 

/* For portrait layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* For ipad landscape layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}

/*Mobile Overrides*/
#category-selection-list-mobile {
    z-index: 1;
    position: absolute;
    background: #FFFFFF;
    border-style: outset;
    border-width: 1px;
}

#category-selection-list-mobile > ul > li > a {
    color: #000000;
}

.category-header-mobile {
    width: 100%;
    border-style: outset;
    border-width: 2px;
    padding: 5px 8px;
    background-color: #081F2C;
    color: #FFC72C;
    font-size: 1.4em;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-align: center;
}

.top-panel-left-mobile {
    float: left;
    display: block;
    position: relative;
    width: 43%;
}

.top-panel-right-mobile {
    float: right;
    display: block;
    position: relative;
    width: 55%;
}
