/* =========================================================
header-footer.css
---------------------------------------------------------
Header / nav / footer styles for IDX pages on jeffreyjkatz.com
Matches the modernized HTML pages (which use modern-responsive1.css).
Loads AFTER idx.css / main_style.css / responsive.css so the
modern header & footer rules take cascade priority for the
.vg-* classes and #nav selectors below.
Created: 2026-05-22
========================================================= */
/* ---------- Web fonts (Droid Serif is used by .vg-name and .vg-call) ---------- */
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 400;
src: local('Droid Serif'), local('DroidSerif'),
url(https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaI4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 700;
src: local('Droid Serif Bold'), local('DroidSerif-Bold'),
url(https://fonts.gstatic.com/s/droidserif/v6/QQt14e8dY39u-eYBZmppwYlIZu-HDpmDIZMigmsroc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* ---------- Page baseline (matches modern HTML pages) ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
color: #000;
font-family: Arial, Verdana, sans-serif;
background: #7595b2;
margin: 0;
}
img,
input[type='text'],
input[type='password'],
select,
textarea { max-width: 100%; }
hr { margin: 1.4em 0; }
a { color: #00F; }
/* ---------- Outer container (centered white card) ---------- */
.vg-shell {
max-width: 990px;
margin: 0 auto;
background: #fff;
border-radius: 10px;
padding: 3px 0 20px;
}
.vg-padd { padding: 0 30px; }
.vg-main { max-width: none; margin: 0; }
/* ---------- Header ---------- */
.vg-header {
min-height: 118px;
max-width: 990px;
margin: 0 auto;
position: relative;
text-align: left;
}
.vg-header-inner {
position: relative;
display: block;
padding: 0;
}
.vg-header-left {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: flex-start;
}
.vg-header-right {
position: absolute;
right: 0;
top: 0;
text-align: center;
margin: 20px 10px 0 0;
}
.vg-header-photo img { margin: 10px; display: block; }
.vg-header-balloon { width: 100px; text-align: center; }
.vg-header-balloon img { margin-top: 10px; }
.vg-headerinfo { margin-left: 95px; }
.vg-agentinfo {
border-bottom: 1px solid #000;
min-height: 77px;
padding-right: 95px;
text-align: center;
}
.vg-name { font: 36px/1.4em 'Droid Serif', serif; padding-top: 20px; text-align: center; }
.vg-call { font: 15px/1.4em 'Droid Serif', serif; text-align: center; padding-right: 95px; }
.vg-call a { color: inherit; text-decoration: none; }
.vg-header-logo img { width: 100px; height: 47px; display: inline-block; }
.vg-header-address { font-size: 10px; margin-top: 12px; }
/* ---------- Navigation ---------- */
#nav, #nav ul {
font-size: 15px;
text-shadow: 1px 1px 1px #3e587b;
font-family: Arial, sans-serif;
}
#nav label,
#nav ul li a {
border-bottom: 1px solid #555;
background: #6d8db0;
color: #fff;
}
#nav { position: relative; padding: 0 10px; text-align: left; }
#nav ul {
display: none;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
white-space: nowrap;
}
.roundCorner-left { border-radius: 5px 0 0 5px; }
.roundCorner-right { border-radius: 0 5px 5px 0; }
#nav ul li a {
display: block;
padding: .6em;
text-decoration: none;
border-right: 1px solid #555;
background: linear-gradient(to bottom, #6d8db0 0, #4f7197 100%);
}
#nav ul li a:hover { background: #3e587b; }
#nav ul li:last-of-type a { border-right: 0; }
#nav ul li ul li a { padding-left: 1.5em; }
#nav ul li ul li ul li a { padding-left: 3.125em; }
#nav input.trigger { position: absolute; top: -9999px; left: -9999px; }
#nav input.trigger:checked ~ ul,
#nav input.trigger:checked ~ ul li ul { display: block !important; }
#nav input.trigger:checked ~ label { border-radius: 5px 5px 0 0; }
#nav label {
position: relative;
display: block;
min-height: 2em;
padding: .45em;
font-size: 1.1em;
margin: 0;
cursor: pointer;
line-height: 2em;
border-radius: 5px;
background: linear-gradient(to bottom, #6d8db0 0, #4f7197 100%);
}
#nav label::after {
position: absolute;
right: 1em;
top: .2em;
content: "\2261";
font-size: 1.8em;
color: #fff;
}
@media only screen and (min-width: 200px) and (max-width: 925px) {
.roundCorner-left { border-radius: 0; }
.roundCorner-right { border-radius: 0 0 5px 5px; }
#nav ul li a { padding: 15px; }
}
@media only screen and (min-width: 925px) {
#nav ul { display: flex; flex-direction: row; }
#nav ul li { position: relative; text-align: center; flex: 1; }
#nav ul li ul {
display: none !important;
position: absolute;
top: 3.0625em;
left: 0;
width: 12.5em;
z-index: 200;
}
#nav ul li ul li { text-align: left; }
#nav ul li ul li ul { z-index: 300; top: 0; left: 12.4em; }
#nav ul li ul li ul li a { padding-left: 30px !important; }
#nav ul li:hover > ul { display: block !important; }
#nav input.trigger:checked ~ ul,
#nav input.trigger:checked ~ ul li ul { display: flex; flex-direction: row; }
#nav label { display: none; }
}
/* ---------- IDX call-to-action banner (red bar under nav) ---------- */
.vg-idx-cta-banner {
text-align: center;
color: #f00;
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
}
.vg-idx-cta-banner a {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
/* ---------- Footer ---------- */
.vg-footer {
text-align: center;
padding: 2em 1em 1em 1em;
max-width: 850px;
margin: 0 auto;
}
.vg-footer img { display: inline-block; vertical-align: middle; }
.vg-footer .vg-format2,
.vg-footer p.vg-format2 {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  font-family: Arial, sans-serif !important;
  text-align: center !important;
  max-width: 775px;
  margin: 0 auto 0.9em auto !important;
  line-height: 1.3 !important;
}
/* ---------- IDX BMLS disclaimer (MLS-required) ---------- */
.vg-idx-bmls {
text-align: center;
margin: 1.5em auto;
}
.vg-idx-bmls table {
max-width: 800px;
margin: 0 auto;
border-collapse: separate;
border-spacing: 4px;
}
.vg-idx-bmls td.vg-idx-bmls-icon {
vertical-align: top;
}
.vg-idx-bmls td.vg-idx-bmls-text {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
}
/* =========================================================
RESPONSIVE BREAKPOINTS
========================================================= */
@media only screen and (max-width: 990px) {
.vg-padd { padding: 0 4px; }
}
@media only screen and (max-width: 840px) {
body { background: #7595b2; }
}
@media only screen and (max-width: 768px) {
.vg-padd { padding: 0 6px; }
}
/* At 720px: hide photo + balloon, stack the header vertically.
RE/MAX block is first in DOM, so it appears at the top of the stack. */
@media only screen and (max-width: 720px) {
.vg-header-photo { display: none; }
.vg-header-balloon { display: none; }
.vg-header { min-height: 0; padding: 0; }
.vg-header-inner { padding: 0; }
.vg-header-left,
.vg-header-right {
position: static;
text-align: center;
margin: 0 auto;
}
.vg-header-left { display: flex; justify-content: center; }
.vg-header-address { margin-top: 4px; }
.vg-headerinfo { margin-left: 0; margin-top: 4px; }
.vg-agentinfo { border-bottom: 0; min-height: 0; padding: 0; }
.vg-call,
.vg-name { padding: 0; min-height: 0; }
.vg-name { padding-top: 4px; }
}
@media only screen and (max-width: 520px) {
.vg-name { text-align: center; margin: 0; width: 100%; }
}
@media only screen and (max-width: 480px) {
.vg-padd { padding: 0 12px; }
}
@media only screen and (max-width: 320px) {
.vg-header-inner > * { float: none; width: 100%; }
}