/* jdc 05/10/2016 - Style overrides to help with adjustments to the content in the triggermarketing landing page mockups.
    There are a few things like the property photos not supported in the current AutoMail Plus styles and I need to tweak some others.
    I don't like the way the logo behaves after the first media query breakpoint, etc....
*/
body {font-size:18px; font-family:'Open Sans', sans-serif; color:#000;}

#mls_landing_page #recent_sales_trands {text-align: center;}
#mls_landing_page .salesTrendsBtnDiv {margin: 25px 0 75px 0;}
#mls_landing_page #recent_sales_trands h4 {margin-bottom: 25px; text-align: left;}
#mls_landing_page #recent_sales_trands div {margin-left: 5%; margin-right: 5%; }
#mls_landing_page .chart_sec h4 strong {margin-bottom: 0;}
#mls_landing_page .estimated_sec div.price {margin: 0 15px 0 0; float: left; border-bottom: none; padding-bottom: 0;}
#mls_landing_page .homeValueBtn {float: left; font-weight: 500; font-size: 16px; margin-bottom: 5px; margin-top: 5px;}
#mls_landing_page .propertyDetails {float: none; margin-bottom: 10px;}
#mls_landing_page .propertyRemarks {border-top: 1px solid #999999; padding-top: 15px;}
#mls_landing_page .recent_sale #map_canvas {width: 100%;height: 358px;}
.address-autocomplete-suggestion-list {
    margin-left: 0px;
  }
#wrnameDisclaimer { font-style: italic; }
#contactFormThankYou {display: none;}
/* place holders for some styles I am going to adjust at specific media query break points to fix the logo and contact information sections.
    I don't like how they adjust in the responsive layouts at smaller breakpoints. This new way seems much more fluid to me. */
.logo-container{}
.contact-info-container {}

.sample-banner{
    text-align: center;
    padding: 10px 80px;
    margin: -25px 15px 15px 15px;
    background: #FFFFEC;
    border: 1px solid #EBEBEB;
    font-size: 15px;
}
.sample-banner h3 {
    font-weight: bold;
    line-height: 40px
}

.img-responsive {
    display: inline;
}

#search-new-address {margin: 10px 0 10px;}
#search-new-address .search-query {width: 100%;}

@media (min-width: 768px) {
    .logo-container{width: 250px;float: right;left: 0;}
    .logo-container p {margin-top: 20px;}
    .contact-info-container {position: inherit; width: 450px;}
}
@media (max-width: 767px) {
    .logo-container{width: 100%; float: inherit; text-align: center;}
    .contact-info-container {position: inherit; width: 100%;}
    body header {margin-bottom: 10px;}
    .logo {margin-bottom: 10px;}
    .logo-container p {margin-bottom: 20px;}
    #mls_landing_page #mlsPhotosAlternate div {
        height: 60px;
    }
    .sample-banner { margin-top: 0px; }
}
/* terrible time trying to implement a polymer style select element. Instead, just style out our own here... */
#snapshotState {
    position: relative;
    outline: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #999;
    color: #212121;
    text-align: inherit;
    font-family: Roboto, Noto, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

#stateLabel {
    margin-top: 5px;
    color: #727272;
    text-align: inherit;
    font-family: Roboto, Noto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}