/* custom.css - https://static.utahhousingguide.com/custom.css
Site-wide style overrides. Edit here, then run scripts\deploy-static.bat.
Loaded render-blocking from . Do NOT convert the to the async
pattern (media="print" onload="this.media='all'") - the display:none rules
below would then apply after first paint, so visitors would see the social
column and sharebar flash on screen and then vanish. */
/* --- Layout ------------------------------------------------------------- */
/* Keeps short pages from leaving a gap above the footer.
245px = header + footer chrome; revisit if either changes height. */
#contentarea {
min-height: calc(100vh - 245px);
}
/* --- Theme elements we don't use ---------------------------------------- */
#socialColumn,
#sharebarDiv {
display: none;
}
/* Header phone number: replace the CMS's tilted phoneIcon.png (an ![]()
next to
the tel: link) with a clean handset drawn on the link itself. Same glyph as the
mobile menu's Call Now button in custom.js. */
#headerPhone img,
.slideheaderPhone img {
display: none;
}
#headerPhone a,
.slideheaderPhone a {
padding-left: 27px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.21c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat 0 50% / 19px 19px;
}
/* Contact page: suppress the linked entries in the info table. */
#cntctus div table tbody tr td a {
display: none;
}
/* --- IDX listing grid + search ------------------------------------------ */
/* !important is required here: IDX writes its own styles late. */
.viewgrid_price,
.ia_grid_price {
color: #1F93FF !important;
}
.viewgrid_dom,
.ia_grid_dom {
background-color: #1F93FF !important;
}
#ia_search_btns a {
color: #3931FF !important;
}
/* --- Listing page theme -------------------------------------------------- */
/* One card type everywhere (white, 10px radius, soft shadow, no border), black
text, dark-blue links, grey captions. idxlst02.css and the Kendo BlueOpal
theme load AFTER this file, so every override here is anchored on an id
(#opaque #ia_listing, #maintabs, ...) to out-rank them; !important appears
only where the CMS wrote inline styles. custom.js "Listing facts" builds
.uhg-facts (price / specs / address / area links) and rewrites the spec
tiles into "4 beds" lines. */
#opaque #ia_listing {
color: #222;
font-size: 15px;
}
#opaque #ia_listing a,
#opaque #ia_listing #areaitemValue a,
#opaque #ia_listing #lstWidget a,
#opaque #ia_listing #mainDetail a,
#opaque #ia_listing #propmsg a {
color: #1a5276;
font-weight: inherit;
text-decoration: none;
}
#opaque #ia_listing a:hover,
#opaque #ia_listing #areaitemValue a:hover,
#opaque #ia_listing #lstWidget a:hover {
color: #0f3d5c;
text-decoration: underline;
font-size: inherit; /* idxlst02 sets 1em on :hover, which reflowed the page */
font-weight: inherit;
}
#opaque #ia_listing .uhg-grade-credit a,
#opaque #ia_listing .uhg-grade-credit a:hover {
font-size: 12px;
}
#opaque #ia_listing .k-content,
#opaque #ia_listing .k-widget {
color: #222; /* BlueOpal paints these #003f59 */
}
/* Button bar */
#opaque #ia_listing #btnbar {
border: 0;
margin-bottom: 14px;
padding-bottom: 0;
}
#opaque #btnbar .k-button,
#opaque #btnbar .k-button:hover {
background: #fff;
background-image: none;
border: 1px solid #d5d5d5;
border-radius: 6px;
color: #222;
box-shadow: none;
padding: 6px 12px;
font-size: 14px; /* same in both states: no reflow on hover */
font-weight: 400;
text-decoration: none;
}
#opaque #btnbar .k-button:hover {
border-color: #1a5276;
color: #1a5276;
}
/* "See in Person" and "Request Showing" open the same form: keep one, as the CTA.
custom.js "Listing facts" relabels #btnMore. */
#opaque #btnbar #btnShow {
display: none;
}
#opaque #btnbar #btnMore.k-button,
#opaque #btnbar #btnMore.k-button:hover {
border: 2px solid #1a5276;
color: #1a5276;
font-weight: 700;
padding: 5px 24px 5px 22px; /* optical: bold "r" ends tighter than the "R" starts */
}
#opaque #btnbar #btnMore.k-button:hover {
background: #eef4f8;
}
#opaque #btnbar #btnMore .k-icon {
display: none;
}
/* Summary card (right column) */
.uhg-facts {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 12px rgba(20, 30, 40, .06);
padding: 20px 22px 18px;
}
#opaque #ia_listing #ia_price {
order: 0;
width: auto;
padding: 0;
margin: 0 0 8px;
text-align: left;
color: #111;
font-size: 28px;
line-height: 1.15;
font-weight: 700;
}
#opaque #ia_listing #ia_specs {
order: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px 16px;
margin: 0 0 10px;
}
#opaque #ia_listing #ia_specs .lineitem {
float: none;
width: auto;
margin: 0;
padding: 0;
border: 0;
text-align: left;
font-size: 15px;
color: #444;
white-space: nowrap;
}
#opaque #ia_listing #ia_specs .lineitem b {
font-size: 15px;
font-weight: 700;
color: #111;
}
#opaque #ia_listing #ia_address {
order: 2;
margin: 0;
text-align: left;
font-size: 15px;
color: #444;
}
#opaque #ia_listing #ia_address h1 {
font-size: 15px;
font-weight: 400;
}
#opaque #ia_listing #ia_links {
order: 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px 16px;
margin: 16px 0 0;
padding-top: 14px;
border-top: 1px solid #ececec;
}
#opaque #ia_listing #areaitem {
width: auto;
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
line-height: 1.4;
overflow-wrap: anywhere;
}
#opaque #ia_listing #areaitem > div {
padding: 0 !important; /* CMS inline padding:5px */
}
#opaque #ia_listing #areaitemTitle,
#opaque #ia_listing #areaitemValue {
float: none;
display: inline;
padding: 0;
font-size: 14px;
}
#opaque #ia_listing #areaitemTitle {
color: #6b7280;
}
#opaque #ia_listing #areaitemTitle::after {
content: ': ';
}
#opaque #ia_listing #areaitemValue,
#opaque #ia_listing #areaitemValue a {
font-weight: 600;
}
/* Tabs: flat text tabs, the panel is a card */
#maintabs.k-tabstrip {
background: transparent;
background-image: none;
border: 0;
padding: 0;
margin-top: 24px;
box-shadow: none;
}
#maintabs .k-tabstrip-items {
padding: 0;
margin: 0;
border-bottom: 1px solid #e3e3e3;
}
#maintabs #liTabWalk {
display: none; /* Walkscore tab: the CMS embed no longer works */
}
#maintabs .k-loading {
display: none; /* Kendo's per-tab progress bar, a dark line across the top */
}
#maintabs .k-tabstrip-items .k-item {
background: transparent;
background-image: none;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
margin: 0 6px -1px 0;
padding: 0;
box-shadow: none;
}
#maintabs .k-tabstrip-items .k-item.k-state-active {
background: transparent;
border-bottom-color: #1a5276;
}
#maintabs .k-tabstrip-items .k-link {
color: #444;
font-size: 15px;
padding: 10px 14px;
border: 0;
border-radius: 0;
}
#maintabs .k-tabstrip-items .k-state-active .k-link {
color: #111;
font-weight: 700;
}
#maintabs > .k-content {
background: #fff;
border: 0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 12px rgba(20, 30, 40, .06);
margin: 0;
padding: 22px 26px;
color: #222;
}
/* Detail tab */
#opaque #ia_listing #mainDetail {
font-size: 15px;
}
#opaque #ia_listing #mainDetail > div {
margin: 0 !important;
}
#opaque #ia_listing #lstRemarks {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.6;
}
#opaque #ia_listing #propmsg {
width: auto;
margin: 0 0 22px;
padding: 10px 14px;
border-radius: 8px;
background: #fff4e5;
font-size: 14px;
}
#opaque #ia_listing #PropDetailTitle {
margin: 22px 0 4px;
padding: 0 0 5px;
border: 0;
border-bottom: 2px solid #eee;
text-align: left;
font-size: 16px;
font-weight: 700;
color: #111;
}
#opaque #ia_listing #PropDetailItem {
width: auto;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
background: transparent !important; /* CMS inline zebra */
font-size: 14px;
}
#opaque #ia_listing #PropDetailItem > div:first-child {
color: #6b7280;
}
#opaque #ia_listing #showings_phone,
#opaque #ia_listing #disc_phone {
color: #222 !important;
font-weight: 600 !important;
}
/* Request Showing + Mortgage Calculator widgets */
#opaque #ia_listing #lstWidget {
background: #fff;
border: 0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 12px rgba(20, 30, 40, .06);
padding: 20px 22px 22px;
margin-bottom: 20px;
}
#opaque #ia_listing #lstWidgetTitle {
background: transparent;
padding: 0;
margin: 0 0 12px;
text-align: left;
color: #111;
font-size: 18px;
font-weight: 700;
}
#opaque #ia_listing #mainShowContent {
width: 100% !important;
margin: 0 !important;
}
#opaque #ia_listing #mainShowContent > div {
margin: 0 !important;
}
#opaque #ia_listing #lstWidget table {
width: 100%;
border-collapse: collapse;
}
#opaque #ia_listing #lstWidget td,
#opaque #ia_listing #lstWidget th {
padding: 5px 0;
font-size: 14px;
font-weight: 400;
color: #444;
text-align: left;
}
#opaque #ia_listing #lstWidget td:first-child:not([colspan]) {
width: 1%;
padding-right: 12px;
white-space: nowrap;
}
#opaque #ia_listing #lstWidget input:not([type]),
#opaque #ia_listing #lstWidget input[type="text"],
#opaque #ia_listing #lstWidget textarea {
width: 100%;
box-sizing: border-box;
padding: 9px 10px;
border: 1px solid #cfd4da;
border-radius: 6px;
background: #fff;
color: #222;
font: inherit;
font-size: 14px;
}
#opaque #ia_listing #lstWidget textarea {
min-height: 90px;
}
#opaque #ia_listing #lstWidget .k-datetimepicker,
#opaque #ia_listing #lstWidget .k-picker-wrap {
width: 100% !important;
box-sizing: border-box;
border-radius: 6px;
border-color: #cfd4da;
background: #fff;
background-image: none;
}
#opaque #ia_listing #lstWidget .k-picker-wrap .k-input {
padding: 8px 10px;
border: 0;
border-radius: 6px;
height: auto;
color: #222;
font: inherit;
font-size: 14px;
}
#opaque #ia_listing #showOn {
margin: 12px 0 4px !important;
}
#opaque #ia_listing #showOn label {
display: block;
margin-bottom: 4px;
font-size: 14px;
color: #444;
}
#opaque #ia_listing #optin {
margin: 10px 0 14px;
}
#opaque #ia_listing #agree_div {
text-align: left !important;
font-size: 12px;
line-height: 1.45;
color: #6b7280;
}
#opaque #ia_listing #btnShowMe.k-button,
#opaque #ia_listing #btnLoanCalc.k-button {
display: block;
width: 100%;
box-sizing: border-box;
padding: 12px;
margin-top: 4px;
border: 0;
border-radius: 6px;
background: #1a5276;
background-image: none;
box-shadow: none;
color: #fff !important; /* CMS inline color:#000 */
font-size: 16px;
font-weight: 600;
text-align: center;
}
#opaque #ia_listing #btnShowMe.k-button:hover,
#opaque #ia_listing #btnLoanCalc.k-button:hover {
background: #0f3d5c;
color: #fff !important;
text-decoration: none;
}
#opaque #ia_listing #btnShowMe .k-icon,
#opaque #ia_listing #btnLoanCalc .k-icon {
display: none;
}
#opaque #ia_listing #LoanCalcValue {
color: #111;
font-weight: 700;
}
#opaque #ia_listing #lstWidgetLoanInfo {
width: auto;
margin: 14px 0 0;
text-align: left !important;
font-size: 14px;
color: #444;
}
#opaque #ia_listing #lstWidgetLoanDisc {
font-size: 12px !important;
margin-top: 12px !important;
text-align: left !important;
color: #6b7280;
}
/* Disclosures */
#opaque #ia_listing #divDisclosures {
margin: 24px 0 0;
font-size: 13px;
line-height: 1.5;
color: #6b7280;
}
#opaque #ia_listing #lstDisclosure {
margin-bottom: 12px;
}
/* --- Listing photo gallery (built by custom.js "Listing gallery") ------- */
/* The CMS ships #gallery > #imgTitle (button bar) + #imgCtr > img#ssimg and
sizes the image by its natural height, which shifts the page as it loads.
These rules give #imgCtr its final 4:3 box BEFORE the script runs, so the
swap to the new gallery is not a layout change. Photos are 4:3 (2048x1536),
so cover-cropping is normally a no-op. */
#imgTitle {
display: none;
}
#gallery {
/* Reserve the thumbnail strip height (see .uhg-thumbs) until JS builds it. */
padding-bottom: calc(100% / 6.75 + 8px);
}
#gallery.uhg-ready {
padding-bottom: 0;
}
#imgCtr {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
max-height: calc(100vh - 180px);
overflow: hidden;
margin: 0;
background: #1b1b1b;
border-radius: 10px;
cursor: zoom-in;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
@supports not (aspect-ratio: 1) {
#imgCtr { height: 0; padding-top: 75%; max-height: none; }
#gallery { padding-bottom: 98px; }
.uhg-thumbs { height: 90px; }
.uhg-thumb { width: 135px; }
}
#imgCtr img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
object-fit: cover;
cursor: inherit;
}
/* Two stacked layers crossfade; the visible one may run a slow pan/zoom. */
.uhg-layer {
opacity: 0;
transition: opacity .7s ease;
transform-origin: 50% 50%;
will-change: transform, opacity;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.uhg-layer.is-on { opacity: 1; }
.uhg-layer.is-contain { object-fit: contain; } /* portrait / panorama: never crop */
@keyframes uhg-kb-a { from { transform: scale(1); } to { transform: scale(1.12) translate(-2.5%, -1.5%); } }
@keyframes uhg-kb-b { from { transform: scale(1.12) translate(2.5%, 1.5%); } to { transform: scale(1); } }
@keyframes uhg-kb-c { from { transform: scale(1); } to { transform: scale(1.12) translate(2.5%, -1.5%); } }
@keyframes uhg-kb-d { from { transform: scale(1.12) translate(-2.5%, 1.5%); } to { transform: scale(1); } }
.uhg-layer.kb-a { animation: uhg-kb-a 8.5s linear forwards; }
.uhg-layer.kb-b { animation: uhg-kb-b 8.5s linear forwards; }
.uhg-layer.kb-c { animation: uhg-kb-c 8.5s linear forwards; }
.uhg-layer.kb-d { animation: uhg-kb-d 8.5s linear forwards; }
#imgCtr.is-paused .uhg-layer { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.uhg-layer { animation: none !important; transition: none; }
}
/* Overlaid controls, shared by the inline stage and the fullscreen viewer. */
.uhg-btn {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, .94);
color: #222;
font: 600 13px/1 'Roboto Slab', Georgia, serif;
box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background .15s, transform .15s;
}
.uhg-btn:hover { background: #fff; }
.uhg-btn:active { transform: scale(.95); }
.uhg-btn:focus-visible { outline: 3px solid #1F93FF; outline-offset: 2px; }
.uhg-btn svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.uhg-arrow {
top: 50%;
width: 48px;
height: 48px;
margin-top: -24px;
}
.uhg-arrow.uhg-prev { left: 12px; }
.uhg-arrow.uhg-next { right: 12px; }
.uhg-arrow svg { width: 28px; height: 28px; }
.uhg-play {
top: 12px;
left: 50%;
transform: translateX(-50%);
height: 34px;
padding: 0 14px 0 10px;
}
.uhg-play:active { transform: translateX(-50%) scale(.95); }
.uhg-play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.uhg-count {
position: absolute;
z-index: 3;
right: 12px;
bottom: 12px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(0, 0, 0, .6);
color: #fff;
font: 600 12px/1 'Roboto Slab', Georgia, serif;
letter-spacing: .02em;
pointer-events: none;
}
/* Thumbnail filmstrip: ~4.4 thumbs visible, scrolls sideways, current one outlined. */
.uhg-thumbs {
position: relative; /* offsetLeft of thumbs is measured from here */
display: flex;
gap: 6px;
width: 100%;
aspect-ratio: 6.75 / 1;
margin-top: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.uhg-thumbs::-webkit-scrollbar { display: none; }
.uhg-thumb {
flex: 0 0 auto;
height: 100%;
aspect-ratio: 3 / 2;
margin: 0;
padding: 0;
border: 2px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #e4e4e4;
cursor: pointer;
opacity: .78;
scroll-snap-align: start;
-webkit-appearance: none;
appearance: none;
transition: opacity .15s;
}
.uhg-thumb:hover { opacity: 1; }
.uhg-thumb.is-current { opacity: 1; border-color: #1F93FF; }
.uhg-thumb:focus-visible { outline: 3px solid #1F93FF; outline-offset: -3px; }
.uhg-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* Fullscreen viewer: whole image, no panning; click the dark area or X to close. */
.uhg-fs {
position: fixed;
z-index: 100000; /* above the CMS #slideMenuBar (9999) */
top: 0; right: 0; bottom: 0; left: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, .96);
cursor: zoom-out;
}
.uhg-fs.is-open { display: flex; }
.uhg-fs img {
display: block;
max-width: 100vw;
max-height: 100vh;
width: auto;
height: auto;
object-fit: contain;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.uhg-fs .uhg-arrow { width: 56px; height: 56px; margin-top: -28px; }
.uhg-fs .uhg-arrow.uhg-prev { left: 16px; }
.uhg-fs .uhg-arrow.uhg-next { right: 16px; }
.uhg-fs-close {
top: 16px;
right: 16px;
width: 56px;
height: 56px;
}
.uhg-fs-close svg { width: 30px; height: 30px; }
.uhg-fs .uhg-count { top: 20px; left: 20px; right: auto; bottom: auto; font-size: 14px; }
html.uhg-noscroll, html.uhg-noscroll body { overflow: hidden; }
/* Phones get the mobile template (below); tablets get the desktop page zoomed
out (body min-width 980px), so their controls are enlarged to stay tappable. */
@media (pointer: coarse) and (min-width: 700px) {
.uhg-arrow { width: 60px; height: 60px; margin-top: -30px; }
.uhg-arrow svg { width: 34px; height: 34px; }
.uhg-play { height: 42px; font-size: 16px; padding: 0 18px 0 14px; }
.uhg-play svg { width: 20px; height: 20px; }
.uhg-count { font-size: 15px; padding: 7px 12px; }
}
@media (max-width: 600px) {
.uhg-arrow { width: 40px; height: 40px; margin-top: -20px; }
.uhg-arrow svg { width: 24px; height: 24px; }
.uhg-arrow.uhg-prev { left: 8px; }
.uhg-arrow.uhg-next { right: 8px; }
.uhg-play { top: 8px; height: 30px; font-size: 12px; }
.uhg-count { right: 8px; bottom: 8px; font-size: 11px; }
.uhg-fs .uhg-arrow { width: 44px; height: 44px; margin-top: -22px; }
.uhg-fs-close { width: 44px; height: 44px; top: 10px; right: 10px; }
.uhg-fs-close svg { width: 24px; height: 24px; }
}
/* --- Mobile listing template (jQuery Mobile page #myPage) ---------------- */
/* Phones get /cgi-bin/real?pge=mobile for every listing URL (server-side by
user agent). Same head snippet, different markup: custom.js adopts
#panelPhotos as the gallery, builds .uhg-facts from #im_prop_* and puts the
grade cards after the description. idxmob01.css and the jQM theme load
before this file; everything here is anchored on #myPage / #panelPhotos,
with !important only against CMS inline styles. */
#panelPhotos,
#panelMap {
margin: 0 10px;
}
#panelPhotos:not(.uhg-ready) {
padding-bottom: calc(100% / 6.75 + 8px); /* thumb strip, reserved before JS */
}
#panelPhotos > #hmeimg {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
background: #1b1b1b;
}
#panelPhotos > table {
display: none; /* CMS prev / "1 of N" / next row */
}
#myPage #im_prop_tabs {
margin: 10px 10px 0;
}
/* Menu panel: big green call button above the page list (custom.js addCallButton). */
#nav-panel .uhg-call {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 0 12px;
padding: 13px 12px;
border-radius: 8px;
background: #1e8e3e;
color: #fff !important;
text-decoration: none !important;
text-shadow: none;
line-height: 1.2;
}
#nav-panel .uhg-call:active {
background: #17752f;
}
#nav-panel .uhg-call svg {
flex: 0 0 auto;
width: 26px;
height: 26px;
fill: currentColor;
}
#nav-panel .uhg-call b {
display: block;
font-size: 18px;
font-weight: 700;
}
#nav-panel .uhg-call small {
display: block;
margin-top: 2px;
font-size: 13px;
font-weight: 400;
opacity: .92;
}
#daheader #headtitle .uhg-headlogo {
display: inline-block;
line-height: 0;
vertical-align: middle;
}
#daheader #headtitle .uhg-headlogo img {
display: block;
width: auto;
height: 36px;
}
#myPage .uhg-facts {
margin: 12px 10px 0;
padding: 18px 18px 16px;
}
#myPage #im_prop_price {
margin: 0 0 8px;
color: #111;
font-size: 26px;
line-height: 1.15;
font-weight: 700;
}
#myPage #im_prop_specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px 14px;
margin: 0 0 10px;
}
#myPage #im_prop_specs .lineitem {
float: none;
width: auto;
margin: 0;
padding: 0;
border: 0;
text-align: left;
font-size: 15px;
color: #444;
white-space: nowrap;
}
#myPage #im_prop_specs .lineitem b {
font-size: 15px;
font-weight: 700;
color: #111;
}
#myPage #im_prop_addr h1 {
margin: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #444;
}
#myPage #im_prop_btns {
display: flex;
gap: 10px;
margin: 14px 0 0;
}
#myPage #im_prop_btns > div {
float: none !important;
width: auto !important;
flex: 1 1 0;
}
#myPage #im_prop_btns a.ui-btn {
margin: 0;
padding: 11px 8px;
border: 1px solid #d5d5d5;
border-radius: 6px;
background: #fff;
box-shadow: none;
text-shadow: none;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
}
#myPage #im_prop_btns a.ui-btn:after {
display: none; /* jQM icon */
}
#myPage #im_prop_btns a.ui-btn span {
color: #222 !important; /* CMS inline red */
}
#myPage #im_prop_btns a.uhg-cta {
border: 2px solid #1a5276;
padding: 10px 8px;
}
#myPage #im_prop_btns a.uhg-cta span {
color: #1a5276 !important;
font-weight: 700;
}
#myPage #im_prop_detail {
margin: 0 10px 20px;
color: #222;
font-size: 15px;
}
#myPage .im_prop_title {
margin: 22px 0 6px;
font-size: 16px;
font-weight: 700;
color: #111;
}
#myPage #im_prop_remarks {
font-size: 15px;
line-height: 1.6;
}
#myPage #PropDetailTitle {
margin: 22px 0 4px;
padding: 0 0 5px;
border: 0;
border-bottom: 2px solid #eee;
text-align: left;
font-size: 16px;
font-weight: 700;
color: #111;
}
#myPage #PropDetailItem {
width: auto;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
background: transparent !important; /* CMS inline zebra */
font-size: 14px;
}
#myPage .PropDetailLeft {
font-weight: 400;
color: #6b7280;
}
#myPage #showings_phone {
color: #222 !important;
font-weight: 600 !important;
}
#myPage #lstWidget {
border: 0;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 4px 12px rgba(20, 30, 40, .06);
padding: 18px 18px 20px;
margin: 20px 0;
}
#myPage #lstWidgetTitle {
background: transparent;
padding: 0;
margin: 0 0 12px;
text-align: left;
color: #111;
font-size: 18px;
font-weight: 700;
}
#myPage #mainShowContent {
width: 100% !important;
margin: 0 !important;
}
#myPage #mainShowContent > div {
margin: 0 !important;
}
#myPage #lstWidget table {
width: 100%;
border-collapse: collapse;
}
#myPage #lstWidget td,
#myPage #lstWidget th {
padding: 5px 0;
font-size: 14px;
font-weight: 400;
color: #444;
text-align: left;
}
#myPage #lstWidget td:first-child:not([colspan]) {
width: 1%;
padding-right: 12px;
white-space: nowrap;
}
#myPage #lstWidget input:not([type="checkbox"]):not([type="radio"]),
#myPage #lstWidget textarea {
width: 100%;
box-sizing: border-box;
padding: 10px;
border: 1px solid #cfd4da;
border-radius: 6px;
background: #fff;
color: #222;
font: inherit;
font-size: 16px; /* 16px+ stops iOS zooming the field */
}
#myPage #lstWidget textarea {
min-height: 90px;
}
#myPage #agree_div {
text-align: left !important;
font-size: 12px;
line-height: 1.45;
color: #6b7280;
}
#myPage #lstWidget a {
color: #1a5276;
}
#myPage #lstWidget a.ui-btn {
display: block;
width: auto;
margin: 6px 0 0;
padding: 13px;
border: 0;
border-radius: 6px;
background: #1a5276;
box-shadow: none;
text-shadow: none;
font-size: 16px;
font-weight: 600;
text-align: center;
}
#myPage #lstWidget a.ui-btn:after {
display: none;
}
#myPage #lstWidget a.ui-btn span {
color: #fff !important;
}
#myPage #LoanCalcValue {
color: #111;
font-weight: 700;
}
#myPage #lstWidgetLoanInfo {
width: auto;
margin: 14px 0 0;
font-size: 14px;
color: #444;
}
#myPage #im_prop_agent {
margin: 20px 0 0;
}
#myPage .jqm-agent p {
font-size: 15px !important; /* CMS inline 18px */
}
#myPage #im_prop_disc {
margin: 16px 0;
text-align: left;
font-size: 12px;
line-height: 1.5;
color: #6b7280;
}
#myPage #uhg-grades {
margin: 18px 0 4px;
}
#myPage .uhg-grade-credit a {
font-size: 12px;
color: #1a5276;
text-decoration: none; /* jQM theme underlines content links */
}
/* --- Walk Grade / Crime Grade cards (built by custom.js "Listing grades") -- */
/* Appended to #homefacts below the summary card, stacked: Crime Grade above
Walk Grade, full column width. custom.js fetches each card's HTML and
renders it in a srcdoc frame with UHG-only overrides (OVERRIDE_CSS there),
sizing the frame to its content; a card that cannot be fetched falls back
to the plain 340px-wide widget iframe at its fixed height. */
#uhg-grades {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-top: 16px;
}
.uhg-grade {
min-width: 0;
}
.uhg-grade iframe {
display: block;
width: 100%;
border: 0;
}
/* The srcdoc copy pads its body 3px/6px so the card shadow is not clipped
(OVERRIDE_CSS in custom.js); pull the frame out by the same amounts so the
card edges sit exactly on the column. */
.uhg-grade iframe[srcdoc] {
width: calc(100% + 12px);
margin: -3px 0 0 -6px;
}
.uhg-grade-credit {
margin: 4px 0 0;
font-size: 12px;
line-height: 1.3;
}
#ia_listing .uhg-grade-credit a {
font-size: 12px;
color: #1F93FF;
}