/*
 * Default styles for CattlePress
 */

/*
 * Header strip
 */

.post-type-archive-cattlepress_item .page_title h1, .tax-cattlepress_category .page_title h1 {
    margin:1em .5em 0 0;
    display:inline-block;
    vertical-align: bottom;
}

.page_title .cattlepod-archive-filter {
    margin:0;
    padding: 0.4em .75em;
    background: rgba(0,0,0,0.35);
    display: inline-block;
    vertical-align: bottom;
    border-radius: 5px;
}

    .cattlepod-archive-filter>* {
        display:inline-block;
        vertical-align: middle;
    }

    .cattlepod-archive-filter label {
        margin: 0 .25em 0 0;

        /* Better vertical centered alignment with select */
        padding:0 0 0.1em;
    }

    .cattlepod-archive-filter select {
        border-radius:inherit;
    }

/* Archive view (mostly!) */
.blocklist, .blocklist li {
    margin:0;
    padding:0;
    list-style:none;
}

.cattlepod-archive-header {
    padding: .75em 0 .5em;
}

@media (min-width:700px) {

    .cattlepod-archive-header {
        padding: .75em .6em .5em;
        border-radius:0 0 3px 3px;
        background: #f8f5f1;
        position: relative;
    }
    
}

@media (min-width:520px) {

    .cattlepod-archive-list .cattlepod-archive-header {
        padding: .75em 1em .5em;
        border-radius:0 0 3px 3px;
        background: #f8f5f1;
        position: relative;
    }
    
}

.blocklist dl, .blocklist dt, .blocklist dd {
    margin:0;
    padding:0;
}

.blocklist dt {
    float:left;
    margin-right:.25em;
    font-weight:bold;
}

.blocklist .cattlepress_thumb {
    display:block;
    overflow:hidden;
}

.no_image {
    width: 100%;
    height: auto;
}

.product_images .cattlepress_thumb {
    margin-right:0;
}

#content .cattlepress_thumb, .cattlepress_thumb img {
    border:none;
    display:block;
}

#content .blocklist .cattlepress_thumb img {
    display:inline;
    vertical-align:bottom;
}

.cattlepod-archive-list h2 {
    margin:0;
}

.cattlepod-query h2 {
    margin:0 0 .25em;
}

.cattlepod-archive-list > li .cattlepress_animal_image {
    margin:0;
    margin-left: -300px;
    width: auto;
    float:left;
}
.cattlepod-archive-content {
    margin-bottom: 47px;
}

.button.disabled,
.button.button-disabled {
    background: transparent;
    color: transparent;
}

.cattlepod-archive-list > li {
    width: 100%;
    display:block;
    position:relative;
    margin:0 0 1.5em;
    padding:0;
}

.cattlepod-archive-list > li .cattlepress_animal_image {
    margin:0;
    width:auto;
    float:none;
}

.no_image .cattlepress_thumb {
    width: 100%;
}

.cpa-buttons > .button {
    width: 100%;
    font-size:.9em;
    margin-bottom: .5em;
}

.cattlepod-archive-list > li .cattlepress_animal_image > img {
    width: 100%;
    height: auto;
}

.cattlepod-archive-list > li .cattlepress_animal_image {
    width: 100%;
    margin-left: 0;
    float: none;
}

.cattlepod-archive-content, .cattlepod-listing-link {
    margin:.5em 0;
}

    /* Different margin on homepage to match featured property */
    .home .cattlepod-listing-link {
        margin:0 0 .7em;
    }

.blocklist dl.cpa-data {
    margin-bottom: 4px;
}

.cpa-buttons > .button {
    width: auto;
    display: inline-block;
}

@media screen and (min-width: 520px) and (max-width:720px) {

    .cattlepod-archive-list > li {
        padding-left: 230px;
    }

        .cattlepod-archive-list > li .cattlepress_animal_image {
            width: 210px;
            margin-left: -220px;
            float: left;
        }

}

/* No upper width bound - we're kicking off grid styles in this media query */
@media screen and (min-width: 720px) {

    /* 3 Column */

    .cattlepod-archive-list.cattlepod-archive-columns > li {
        margin-right:3%;
        float: left;
        width: 31.333%;
    }

    .cattlepod-archive-list.cattlepod-archive-columns .cpa-buttons > .button {
        display: block;
    }

}

    @media screen and (min-width: 720px) and (max-width:960px) {

        .cattlepod-archive-list.cattlepod-archive-columns > li:nth-child(3n) {
            margin-right:0;
        }

        .cattlepod-archive-list.cattlepod-archive-columns > li:nth-child(3n+1) {
            clear:left;
        }

    }

@media screen and (min-width: 960px) and (max-width:1400px) {

    /* 4 column */

    .cattlepod-archive-list.cattlepod-archive-columns > li {
        width: 22.75%;
        margin-right:3%;
    }

    .cattlepod-archive-list.cattlepod-archive-columns > li:nth-of-type(4n) {
        margin-right:0;
    }

    .cattlepod-archive-list.cattlepod-archive-columns > li:nth-of-type(4n+1) {
        clear:left;
    }
}

@media screen and (min-width: 1400px) {

    /* 5 Column */

    .cattlepod-archive-list.cattlepod-archive-columns > li {
        width: 18.4%;
        margin-right:2%;
    }

    .cattlepod-archive-list.cattlepod-archive-columns > li:nth-of-type(5n) {
        margin-right:0;
    }

    .cattlepod-archive-list.cattlepod-archive-columns > li:nth-of-type(5n+1) {
        clear: left;
    }

}


/* Single view */

.ad-nav ul, .ad-nav li {
    list-style:none;
    margin:0;
    padding:0;
}

.cattlepress_primary, .ad-nav a {
    display:block;
    padding:0;
}

.ad-nav a {
    float:left;
    margin:0 5px 5px 0;
}

.cattlepress_primary img {
    max-width:100%;
    height:auto;
    display:block;
    clear:both;
}

.single-cattlepress_item #primary {
    margin:0 -26.4% 0 0;
}

.cattlepress_animal_image, .cattlepress_animal_image img {
    display:block;
}

.animal_info {
    box-shadow:0 0 0 2px rgba(0,0,0,0.07);
    padding:.8em .8em .3em;
    background:#fff;
    position:absolute;
    z-index:5;
    top:0;
    left:0;
}

    @media (max-width:500px) {
        .animal_info {
            position:relative;
        }
    }

    @media (min-width:860px) {
        /* When gm8 is still 2 columns, we don't want the animal info overflowing the first column */
        .animal_info {
            max-width: 70.5%;
        }
    }

    .animal_stats, .animal_stats li {
        margin:0;
        padding:0;
        list-style:none;
    }

    .animal_stats li {
        margin:0 1em .5em 0;
        float:left;
    }

        .animal_stats .gender {
            margin-bottom:0;
        }

        .animal_stats .pedigree_link {
            margin-right:0;
        }