/**** BEGIN HOMES LISTING STYLES ****/

/*    Front End (Parent) Listing Page    */
.FListing {
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    padding: 5px;
    clear: both;
}

.FListingHeader {
    float: left;
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.FListingSearch {
    padding: 5px;
    vertical-align: bottom;
}

.HomeListingPager {
    clear: both;
    float: right;
    padding: 10px;
}
/*    Listing Page User Control    */
.HomesListingHeader {
    position: relative;
    padding: 5px;
    text-align: right;
}

.HomesListing {
    border-bottom: 2px solid var(--line);
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
}

    .HomesListing:hover {
        background-color: var(--gold-soft);
    }

.HomeListingImage {
    padding-top: 10px;
}

    .HomeListingImage img {
        border: 1px solid white;
        max-width: 100%;
    }

        .HomeListingImage img a {
            border: 1px solid var(--line);
        }

.HomeListingAddress {
    font-size: 18px;
}

.HomeListingNotes {
    padding-top: 10px;
}

.HomeListingPrice {
}

.HomeListingBBG {
    font-size: 14px;
    padding-left: 10px;
}

.HomeListingBeds {
    position: relative;
    float: left;
    padding: 5px;
}

.HomeListingBaths {
    position: relative;
    float: left;
    padding: 5px;
}

.HomeListingHalfBaths {
    position: relative;
    float: left;
    padding: 5px;
}

.HomeListingGarages {
    position: relative;
    float: left;
    padding: 5px;
}

.HomeListingMorebutton {
    padding-top: 5px;
}

/* Listing agent block. `display:none` was hiding this even though the control renders the
   data - it is shown when Web.config's showAgent=true AND listing.aspx sets
   ShowAgentinfo="true" (which shows the MLS listing agent, not the local RE_dbAgents
   record). showAgent=true is also what re-flows the row into columns: the control swaps
   this panel to col-sm-2/col-lg-2 and narrows the specs + image columns to match. */
.HomeListingAgent {
    vertical-align: top;
    text-align: center;
    padding: 5px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}

    .HomeListingAgent a {
        color: var(--gold-deep);
    }

        .HomeListingAgent a:hover {
            color: var(--ink);
        }

    .HomeListingAgent b {
        color: var(--ink);
        font-weight: 600;
    }

    .HomeListingAgent img {
        border: 0px solid #3f3f3f;
    }

/* ===== LISTING ROW LAYOUT (CSS ONLY - no code-behind changes) =====
   The bootstrap column classes on these panels are assigned in
   RealEstateList_Resp_integrity.ascx.vb's `If showAgent Then` branch, so rather than edit
   that shared control these rules just override the WIDTHS and the source order.

   1) Photo back to its pre-agent size on desktop. Enabling showAgent narrowed it from
      col-lg-4 (33.33%) to col-lg-3 (25%). Restoring it means re-balancing the whole row,
      or the three columns total >100% and the agent wraps onto its own line:
          image 33.333 + specs 50 + agent 16.667 = 100
   2) Address block first, then Price / MLS / School / Acreage. Those two panels are
      siblings in the same .row, so flex `order` sets the reading order without touching the
      markup. Only >=768px - below that everything stacks full width anyway. */
@media (min-width: 1200px) {
    .HomesListing > .HomeListingImage {
        width: 33.333333%;
    }

    .HomesListing > .HomesListingHomeSpecs {
        width: 50%;
    }

    .HomesListing > .HomeListingAgent {
        width: 16.666667%;
    }
}

@media (min-width: 768px) {
    /* direct children only - .HomeListingAddress has its own nested .row for beds/baths,
       which must NOT be flexed */
    .HomesListingHomeSpecs > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Address block FIRST (client request), then the price/MLS/school/acreage block.
       Note beds/baths/garages live INSIDE pnlAddress in the control markup, so they sit
       with the address rather than with the pricing. */
    .HomesListingHomeSpecs > .row > .HomeListingAddress {
        order: 1;
        width: 58%;
        float: none;
        padding-right: 18px;
    }

    .HomesListingHomeSpecs > .row > .HomeListingPrice {
        order: 2;
        width: 42%;
        float: none;
    }
}

.HomesListingHomeSpecs {
    position: relative;
    vertical-align: top;
    padding: 5px 0px 0 10px;
}
/**** END HOMES LISTING STYLES ****/

/**** BEGIN AGENTS LISTING STYLES ****/
.AgentListings {
    clear: both;
    margin: auto;
    padding-top: 10px;
}

.AgentListing {
    position: relative;
    float: left;
    margin: auto;
    text-align: center;
    min-height: 650px;
}

    .AgentListing img {
        border: 1px solid var(--line);
        max-width: 100%;
    }

.AgentListingName {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    text-transform: none;
}
.AgentListingName2 {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 600;
    text-transform: none;
}

.AgentListingName a {
    color: var(--ink);
}
.AgentListingName a:hover {
    color: var(--gold-deep);
}
.AgentTitle{
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--gold-deep);
}
.AgentOffice {
    text-align: center;
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: normal;
    font-style:italic;
}
/**** END AGENTS LISTING STYLES ****/

/**** BEGIN AGENT DETAILS STYLES ****/
.AgentDetailMain {
    position: relative;
    width: 100%;
    margin: auto;
}

.AgentDetail {
    position: relative;
    width: 30%;
    margin: auto;
}

.AgentInfo {
    position: relative;
    width: 200px;
    padding-left: 5px;
}

.AgentImage {
    position: relative;
    width: 200px;
    padding-left: 5px;
}

    .AgentImage img {
        border: 0px solid #3f3f3f;
    }

.AgentLinks {
    position: relative;
    padding-top: 50px;
    padding-left: 50px;
    float: left;
}

.AgentBio {
    padding-top: 50px;
    float: left;
    clear: both;
}

.btnSeeListings a {
    text-align: left;
}
/**** END AGENT DETAILS STYLES ****/

/**** BEGIN HOME DETAILS STYLES ****/
.hd_DetailParent {
    padding: 5px 10px 0px 10px;
}

.hd_DetailContainer {
    padding: 25px 0px 0px 0px;
}

.hd_DetailControl {
    padding: 10px;
}

    .hd_DetailControl h1 {
        color: var(--ink);
        text-align: left;
        margin-top: 0px;
        font-size: 24px;
    }

.hd_Text {
    height: 100%;
}

.hd_HomeSpecs {
    font-size: 18px;
}

    .hd_HomeSpecs label {
    }

    .hd_HomeSpecs a {
        font-weight: bold;
    }

.hd_Agents {
    background-color: var(--ink);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 5px;
    padding: 2px;
    margin-bottom: 10px;
}

    .hd_Agents a {
        color: var(--gold);
        text-decoration: underline;
    }

    .hd_Agents h2 {
        padding-left: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: var(--display);
        font-size: 24px;
        color: white;
    }

.hd_AgentInfo {
    text-align: center;
    color: white;
}

    .hd_AgentInfo img {
        border: 1px solid var(--line);
    }

.hd_OtherAgentInfo {
    text-align: center;
}

.hd_RoomSpecs {
    padding: 3px 0px 3px 0px;
}

    .hd_RoomSpecs img {
        padding: 0 10px 0 3px;
    }

    /* half baths need no icon - the text already reads "N Half Baths", so this is just the
       gap the old dot.gif spacer provided (kept as a server span so imgHalfBath.Visible works) */
    .hd_RoomSpecs .hd_SpecGap {
        display: inline-block;
        width: 10px;
    }

    /* bed/bath/garage now render as Font Awesome <i> icons (see RealEstateDetails_Resp_integrity.ascx) */
    .hd_RoomSpecs i {
        padding: 0 10px 0 4px;
        color: var(--gold-deep);
        font-size: 1.05em;
        vertical-align: baseline;
    }

.hd_Notes {
    padding-top: 15px;
    clear: both;
}

.hd_Features {
}

    .hd_Features h2 {
        margin: 50px 0 0 0;
    }

.google-maps {
    position: relative;
    height: 312px;
    overflow: hidden;
}

    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

.hd_PaymentCalc {
    background-color: var(--ink);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 5px;
    padding: 2px;
    margin-top: 10px;
}

    .hd_PaymentCalc h2 {
        padding-left: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: var(--display);
        font-size: 24px;
        color: white;
    }


    .hd_PaymentCalc label {
        color: white;
        font-size: 14px;
    }

/* ===== DETAIL PAGE: dark cards + hover colors =====
   warm.css loads AFTER home.css, so its generic inner-page rules win any specificity TIE:
     .container .control-label {color:var(--ink)}   (0,2,0)
     .container h2             {color:var(--ink)}   (0,1,1)
     .container a:hover        {color:var(--ink)}   (0,2,1)
   --ink is near-black, which is invisible on the ink-colored .hd_Agents / .hd_PaymentCalc
   cards and makes links "turn black" on mouse-over. The rules below deliberately carry an
   EXTRA class so they outrank warm.css instead of tying with it. Keep .container in the
   selectors - dropping it drops the specificity and warm.css takes over again. */

/* no link anywhere on the detail page should hover to near-black (0,3,1 beats 0,2,1) */
.container .hd_DetailControl a:hover {
    color: var(--gold-deep);
}

/* dark cards: field labels + headings must be white (0,3,0 and 0,2,1 respectively) */
.container .hd_Agents .control-label,
.container .hd_Agents label,
.container .hd_PaymentCalc .control-label,
.container .hd_PaymentCalc label {
    color: #fff;
}

.container .hd_Agents h2,
.container .hd_PaymentCalc h2 {
    color: #fff;
	 font-size: 24px;
	 margin-top: 10px;
}

/* dark cards: links stay gold and brighten to white on hover - never black.
   MUST come after the .hd_DetailControl a:hover rule above (same 0,3,1 specificity,
   so source order decides). */
.container .hd_Agents a,
.container .hd_PaymentCalc a {
    color: var(--gold);
}

.container .hd_Agents a:hover,
.container .hd_PaymentCalc a:hover {
    color: #fff;
}
.container .hd_Features h2{
	margin-top: 20px;
}
.hd_OtherRealtorInfo {
    text-align: center;
    padding-top: 50px;
    font-size: small;
    clear: both;
}

.hd_InteractiveBtns {
    padding: 0 0 0 20px;
}

    .hd_InteractiveBtns a {
        padding-right: 5px;
        font-size: 11px;
    }

    /* video link now uses a Font Awesome <i> icon instead of video.png */
    .hd_InteractiveBtns i {
        font-size: 16px;
        color: var(--gold-deep);
        vertical-align: middle;
    }

.hd_ImageRotator {
}

.hd_ImageRotatorInstructions {
    text-align: right;
    padding-right: 5px;
    font-size: 11px;
}

.hd_ImageRotator img {
    padding: 5px;
    margin: 0px auto;
}
/***** END HOME DETAIL STYLES *****/

/**** BEGIN HOME SEARCH STYLES ****/

/*    Parent Container    */
.hs_SearchParent {
    margin: 0px auto;
    width: 831px;
}

.hs_SearchControl {
}

.hs_HeaderArea h1 {
    text-align: left;
}

.hs_SearchControl label {
    color: var(--ink);
}

/*    Header Area    */
.hs_QuickSearch {
    position: relative;
    vertical-align: top;
    color: var(--ink);
    text-align: right;
}
.rbWidth span {
    min-width: 150px;
}

.hs_SchoolDistCBItem {
    display: inline-block;
}
.hs_QuickStreet {
    padding-bottom: 5px;
    padding-top: 10px;
}

.hs_QuickMLS {
    text-align: right;
    padding-top: 5px;
}

.hs_MLSValidation {
    text-align: right;
    padding-right: 40px;
}

/*    Search Area    */
.hs_SearchArea {
    clear: both;
}

.hs_MultiPage {
    padding: 25px 5px 25px 10px;
    color: var(--ink);
    border: 1px solid var(--line);
    margin: 0px auto;
    display: inline-block;
    width: 100%;
    background-color: white;
}

.hs_Instructions {
    text-align: center;
    padding-bottom: 10px;
    clear: both;
}

.hs_pageview {
    height: auto !important;
}

.hs_Type {
    padding: 3px 0 3px 0;
}

.hs_Beds {
    padding: 3px 0 3px 0;
}

.hs_Baths {
    padding: 3px 0 3px 0;
}

/*    Price Row    */
.hs_PriceRange {
}

/*    Payment Row    */
.hs_PaymentRange {
}

/*    Number of Units Row    */
.hs_NumberOfUnits {
}

/*    Square Footage Row    */
.hs_SquareFootage {
}

/*    School District Area    */
.hs_SchoolDistSelectType {
    text-align: left;
}

.hs_SchoolDistRBItem {
    padding-right: 10px;
    float: left;
}

.hs_SchoolDistCBList {
    width: 100%;
    padding: 0 10px 0 10px;
}

.hs_SchoolDistCBItem {
    display: inline-block;
}

/*    'Get Listings' Button    */
.hs_SubmitButton {
    padding: 25px 0 0 0;
}
/**** END HOME SEARCH STYLES ****/

.empTableMain {
    font-size: 10px;
}

    .empTableMain td {
        font-size: 11px;
    }

    .empTableMain input {
        font-size: 11px;
    }

.empTable {
    border: 2px solid #A80000;
}

.empTableHead {
    border: 2px solid #A80000;
    background-color: #CFE2F4;
}

/* ===== SEARCH PAGE TABS (Telerik RadTabStrip, e.g. search.aspx) =====
   COLLISION WARNING: warm.css defines the site layout container as
   .wrap {max-width:1240px; margin:0 auto; padding:0 32px}  -- and Telerik renders every
   tab label as <span class="wrap"><span class="innerWrap">Residential</span></span>.
   So each tab was inheriting 32px of side padding and auto margins, which is what made the
   tab strip look broken. The reset below neutralises that; keep it if warm.css's .wrap
   changes. (Same family of bug as the bootstrap .badge collision.) */
.tabstrip li a .wrap,
.tabstrip li a .innerWrap {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    color: inherit;
    line-height: inherit;
    text-align: inherit;
}
/* NOTE: do not try to reset `float` here. Telerik's skin sheet is injected by the control
   and lands AFTER warm.css/home.css in <head>, so its `.tabstrip li a .wrap{float:left}`
   (identical specificity) wins on source order. The float is Telerik's intended layout and
   is what keeps the tabs on one row - leave it alone. */

.RadTabStrip_Home {
    height: auto;
    font-weight: normal;
    letter-spacing: 0;
    border-bottom: 2px solid var(--line);
    margin-bottom: 30px;
}

    .RadTabStrip_Home li {
        margin: 0 6px 0 0;
    }

    /* the anchor carries the whole tab: padding, background, rounded top corners */
    .RadTabStrip_Home .level1 li a {
        display: block;
        padding: 13px 26px;
        margin-bottom: -2px; /* overlap the strip's bottom border */
        font-family: var(--sans);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--ink-soft);
        background-color: transparent;
        border: 2px solid transparent;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        text-align: center;
        text-decoration: none;
        transition: background-color .2s, color .2s;
    }

        .RadTabStrip_Home .level1 li a:hover {
            color: var(--ink);
            background-color: var(--gold-soft);
            text-decoration: none;
        }

        /* current tab: solid gold, reading as joined to the panel below */
        .RadTabStrip_Home .level1 li a.selected,
        .RadTabStrip_Home .level1 li a.selected:hover {
            color: var(--ink);
            background-color: var(--gold);
            border-color: var(--gold);
        }

@media (max-width: 640px) {
    .RadTabStrip_Home .level1 li a {
        padding: 11px 16px;
        font-size: 14px;
    }
}

.normalText, .normalText:hover {
    COLOR: white;
    FONT-SIZE: 10pt;
    text-decoration: underline;
}

.Share {
    float: right;
    padding-right: 5px;
}

.BackButton {
    float: left;
}
#officebreak{
	padding: 0px;
}
@media (max-width: 768px) {
    .AgentListing {
        position: relative;
        width: 300px;
        height: 200px;
        float: left;
        margin: auto;
        text-align: center;
    }

    .hs_HeaderArea h1 {
        text-align: left;
        font-size: 24px;
    }

    .hs_QuickStreet {
        padding-bottom: 5px;
        padding-top: 10px;
        font-size: 12px;
    }

    .hs_QuickMLS {
        text-align: right;
        padding-top: 5px;
        font-size: 12px;
    }
}