/* studbook and sales addon stylesheets

    Author: Rowan Dierich
    For: Simplify Solutions Pty Ltd
    Date: 01/02/2018

 */
.listings .brochure.view,
#listings_results ul > li {
    background: radial-gradient(rgba(246, 246, 246, 0.6) 70%, rgba(200, 200, 200, 0.6)) no-repeat center, url('../listings/resource/spiration-light.png') repeat left top;
}
.listings header,
.listings .fill.centered, .listings .fill .centered {
    text-align: center;
}
.listings .fill hr {
    margin: 10px 0;
}
.listings .summary-table td.hr-line {
    padding: 0 30% 0 25%;
}

.listings h1, .listings h3.outside {
    float: none;
    padding-bottom: 5px;
    font-family: serif;
    font-weight: 500;
    letter-spacing: 2px;
    text-shadow: 2px 2px 1px #ccc;
    color: #998100;
    border-bottom: 0;
}
.listings h1 {
    font-size: 2.2em;
    margin: 2px;
}
.listings h3.outside {
    margin: 2px 2px 15px 2px;
    font-size: 1.6em;
}
.listings h3.outside span {
    font-style: italic;
    font-size: 0.8em;
    text-shadow: none;
    color: #808080;
}
.listings .tagline {
    text-align: center;
    font-family: serif;
    font-size: 1.7em;
    font-style: italic;
    border-bottom: 1px solid #5f5f5f;
    padding: 0 0 5px 0;
    margin: 2px;
    color: #808080;
}
.listings p.motif {
    background-image: url(../listings/resource/line_flourish_02.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 12%;
    padding: 0 0 35px 0;
    margin: 0 0 5px 0;
}
.listings .alpaca-spiel {
    position: relative;
    padding: 30px 30px 50px 30px;
    border-radius: 5px 3px 5px 3px;
    border-left: none;
    font-family: serif;
    border: 1px solid rgba(204, 204, 204, 0.5);
    box-shadow: 2px 2px 1px rgba(204, 204, 204, 1);
    background-image: url('../listings/resource/line_flourish_04.png');
    background-repeat: no-repeat;
    background-position: center 95%;
    background-size: 60%;
}
.listings .alpaca-spiel p {
    font-size: 13pt;
    font-style: italic;
    text-align: justify;
    line-height: 1.2;
}
form[name=animal_brochure_edit] h1 {
    display: inline-block;
}
h2.flare {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #414141;
    padding: 0 80px;
    font-family: serif;
    font-weight: 300;
    font-size: 2em;
    color: #414141;
    opacity: 0.8;
    display: inline-block;
}
/* when not inside a .fill element */
.listings header {
    text-align: center;
}
.listings header h2.flare.outside {
    margin: 0 auto;
}
h2.flare span {
    color: #414141;
    display: inline-block;
    padding: 0 60px 7px 60px;
    background-image: url(../listings/resource/left_flourish.png), url(../listings/resource/right_flourish.png);
    background-position: left, right;
    background-size: 50px, 50px;
    background-repeat: no-repeat, no-repeat;
}
.listings .fill h3 {
    font-weight: 300;
    font-size: 1.7em;
    margin: 10px 5% 15px 5%;
    padding: 5px 0;
    position: relative;
    text-align: center;
}
.listings .fill h3 span {
    background: #F6F6F6;
    padding: 5px 15px;
    position: relative;
    z-index: 1;
    font-family: serif;
}
.listings .fill h3:before {
    background: #ccc;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    top: 50%;
    width: 100%;
}
    /* non-elegant solution */
    .fill .result h3:before {
        background-color: transparent !important;
    }
.listings .fill h3:before {
    left: 0;
}
.listings .brochure.edit .input-group .form-control {
    padding: 0 2px;
}
/*** LISTING PAGE - tables ***/
.listings .information tr.price {
    font-size: 1.4em;
    font-family: serif;
    font-weight: 300;
}
.listings .information td.price {
    color: #74B446;
}
.listings table.maintable.table-embedded {
    border: none;
}
.listings .progeny-stats.table > thead > tr > th,
.listings .progeny-stats.table > tbody > tr > td {
    border-top: none;
}
.listings .progeny-stats.table > thead > tr > th:first-child {
    border-bottom: none;
}
.listings .progeny-stats.table > thead > tr > th:not(.green) {
    border-bottom: none;
}
.listings .vertical-90 {
    transform:
        translate(-30%,1000%)
        rotate(270deg)
    ;
    text-align: center !important;
    vertical-align: bottom !important;
    width: 120px;
}
.listings .progeny-stats td.green {
    text-align: right !important;
    padding-right: 10px;
    border-right: 2px solid #DDD !important;
}
.progeny-colours td {
    border: none !important;
    vertical-align: middle !important;
}

/*** SEARCH RESULTS ***/
/* general */
#listings_results {
    padding: 0;
    margin: 20px 0;
}
.view-mode {
    text-align: center;
    margin: 20px 0 10px 0;
    padding: 0;
}
.view-mode .gallery, .view-mode .list {
    padding: 0;
}
.view-mode a {
    font-size: 1.5em;
    text-align: center;
    transition: all 0.3s ease-in-out;
}
.view-mode a:hover {
    text-decoration: none;
    color: #74b446;
}
.view-mode a i {
    display:block;
    font-size:1em;
    color: #595959;
    padding: 0;
}
.view-mode a span {
    text-transform: uppercase;
    color: black;
    font-size: 0.8em;
}


/* list view */
#listings_results ul > li {
    padding: 0;
    margin: 10px 0;
    border: 1px solid #CCC;
    border-radius: 3px;
}
#listings_results ul > li > a {
    display: block;
}
#listings_results ul > li a:hover {
    color: #000;
}
#listings_results ul > li a:hover h4 {
    text-decoration: underline;
}
#listings_results ul li .search-thumbnail {
    border: 1px solid #CCC;
    padding: 0;
}
#listings_results .info-wrapper {
    padding: 10px;
    margin: 0;
    height: 100%;
}
#listings_results h4 {
    margin: 0;
    padding: 0 15px;
    line-height: 1.5;
}
#listings_results h4 span {
    font-family: monospace;
    color: 595959;
}
#listings_results .primary-details {
    font-size: 0.8em;
    padding-right: none;
}
#listings_results .primary-details > div {
    padding: 0 5px;
}
#listings_results .primary-details > div > p {
    margin-bottom: 7px;
}
#listings_results .price {
    padding: 0;
}
#listings_results .price label {
    margin: 0;
    font-size: 1.5em;
    float: none;
}
#listings_results .price label span {
    color: #74B446;
}
.sort-by {
    float: right;
}
/* gallery view */
#listings_results .gallery-tile .search-thumbnail {
    border: 1px solid #CCC;
    float: none;
}
.gallery-tile {
    margin: 0 0 5px 0;
    padding: 10px 10px 0 10px;
    height: 220px;
    text-align: center;
    transition: 0.25s ease-in-out;
    font-size: 13px;
}
.gallery-tile a:hover {
    text-decoration: none;
}
.gallery-tile:hover {
    background-color: rgba(116, 180, 70, 0.15);
    border-radius: 5px;
}
.croppie-instance .button-section {
    border: 1px dotted #CCC;
}
.demo-wrapper {
    border: 1px dotted #CCC;
}
.upload-demo-wrap {
    height: 500px;
    border: 1px dotted #CCC;
}
/* .upload-demo .upload-demo-wrap,
.upload-demo .upload-result,
.upload-demo.ready .upload-msg {
    display: none;
}
.upload-demo.ready .upload-demo-wrap {
    display: block;
}
.upload-demo.ready .upload-result {
    display: inline-block;
}
.upload-demo-wrap {
    width: 300px;
    height: 300px;
    margin: 0 auto;
} */

/*** BOOTSTRAP RESPONSIVE BREAKPOINT OVERRIDES ***/
/* Note: For the Bootstrap breakpoints to work 'mobile first', the smallest, mobile breakpoint 'XS' must come last so that preference can flow to rules declared later in the document without resorting to more specific selectors */
/* LG */
@media (min-width: 1200px) {
    .brochure img.photo {
        width: 50%;
        float: left;
    }
    .listings .alpaca-spiel {
        margin-top: 15px;
        width: 45%;
        float: right;
    }
}
/* MD */
@media (max-width: 1199px) {
    .brochure img.photo {
        width: 50%;
        float: none;
    }
    .listings .alpaca-spiel {
        margin-top: 15px;
        width: 100%;
        float: none;
        clear: both;
        background-size: 35%;
    }
}
/* SM */
@media (max-width: 991px) {
    .brochure img.photo {
        width: 50%;
    }
    .listings .alpaca-spiel {
        margin-top: 15px;
        width: 100%;
        float: none;
        background-size: 35%;
    }
}
/* XS */
@media (max-width: 767px) {

    .listings header {
        padding-bottom: 2px;
    }
    .brochure h1 {
        line-height: 1.1;
    }
    .listings p.motif {
        background-size: 20%;
    }
    .brochure img.photo {
        width: auto;
    }
    .brochure .information table {
        text-align: center;
    }
    .listings .alpaca-spiel {
        margin-top: 15px;
        width: 100%;
        float: none;
        background-size: 55%;
    }
    .listings .vertical-90 {
    transform:
        translate(-45%,1000%)
        rotate(270deg)
    ;
    }
    .listings h2.flare {
        font-size: 1.5em;
        padding: 0 20px;
    }
    .listings h2.flare span {
        background-size: 40px, 40px;
        padding: 0 50px 4px 50px;
    }
    .listings h3 {
        font-size: 1.3em;
        margin: 10px 0;
    }
    #listings_results .price {
        text-align: center;
        margin: 15px 0;
    }
    #listings_results h4 {
        display: inline-block;
        padding-top: 15px;
        text-align:center;
    }
    #listings_results h4 span {
        display: block;
    }
    #listings_results .primary-details {
        padding: 10px 0;
    }
    h2.results_text {
        margin-top: 0;
    }
    .sort-by {
        float: left;
    }
    .view-mode {
        margin: 0 0 15px 0;
    }
    .view-mode > div > a {
    font-size: 1.3em;
    margin-bottom: 15px;
    }
    .gallery-tile figcaption {
        padding: 10px;
    }
}

}
/* custom smallest breakpoint */
@media(max-width:479px) {
    .listings p.motif {
        background-size: 23%;
    }
    #listings_results h4 {
        float:right;
        width: 65%;
        margin: 0;
    }
    #listings_results .primary-details {
        width: 100%;
    }
}
/* end studbook styles */