/* ========================================================================== Village Animal Clinic — legacy site recreation Scoped under .vac-legacy-site so it can't leak into / be overridden by the active WordPress theme's global styles. ========================================================================== */ /* Full-bleed wrapper: breaks the legacy design out of the theme's content column so the tiled background + layout fills the entire browser window, exactly like the original static site did on . */ .vac-legacy-site { width: 100vw; margin: 0 calc(50% - 50vw); padding: 0; background: url(../images/background.jpg) repeat-x #F7F4F4; min-height: 100vh; font-family: arial, sans-serif; font-size: 14px; box-sizing: border-box; overflow-x: hidden; } .vac-legacy-site *, .vac-legacy-site *:before, .vac-legacy-site *:after { box-sizing: content-box; } .vac-legacy-site .surround {width: 800px; background: url(../images/shadows.png) repeat-y; margin-left: auto; margin-right: auto; padding: 0 9px 0 9px; } .vac-legacy-site .top {background: url(../images/header.png) no-repeat; height: 255px; width: 800px; margin: 0 auto; position: relative; } .vac-legacy-site .menu {width: 190px; float: left; } .vac-legacy-site .menu ul {list-style: none; margin: 15px 0 0 24px; padding: 0; } .vac-legacy-site .menu ul li {padding-top: 1px; margin: 0 0 10px 0; } .vac-legacy-site .menu ul a {display: block; color: #fff; font-size: 22px; width: 182px; padding: 3px 0px 3px 8px; text-decoration: none; } .vac-legacy-site .menu ul a:hover, .vac-legacy-site .menu ul a.active {background: #8C7166; text-decoration: none; color: #fff; } .vac-legacy-site .container {width: 770px; float: left; padding: 10px 15px 5px 15px; } .vac-legacy-site .content {width: 773px; } .vac-legacy-site .copy {padding: 10px 10px; width: 750px; background: url(../images/paw.jpg) bottom right no-repeat #fff; min-height: 226px; } .vac-legacy-site .botround {background: url(../images/botround.png); height: 21px; width: 818px; margin: 0 auto; } .vac-legacy-site .footer {text-align: right; width: 800px; padding: 0px 0 0 0; color: #000; font-size: 12px; margin: 0 auto 0 auto; height: 45px; } .vac-legacy-site .footer a {color: #000; text-decoration: none; } .vac-legacy-site .footer a:hover {text-decoration: underline; } .vac-legacy-site .facebook {float: right; } .vac-legacy-site ul.gallery {list-style: none; margin: 0 0 0 30px; padding: 0; } .vac-legacy-site ul.gallery li {float: left; margin: 0 10px 10px 0; padding: 0; cursor: pointer; } .vac-legacy-site ul.gallery li img {margin: 0; padding: 0; height: 110px; border: solid 1px #4B5360; width: 110px; display: block; } .vac-legacy-site #gallery ul {list-style: none; margin: 0 0 0 0px; padding: 0; } .vac-legacy-site #gallery li {float: left; margin: 0 10px 10px 0; padding: 0; cursor: pointer; } .vac-legacy-site #gallery li img {margin: 0; padding: 0; height: 80px; width: 80px; border: solid 1px #000; display: block; } .vac-legacy-site td {padding-right: 10px; } .vac-legacy-site ul.list {list-style-image: none; list-style-type: disc; } .vac-legacy-site ul.links li {margin-bottom: 5px; } .vac-legacy-site ul.links a {text-decoration: underline; } .vac-legacy-site ul.links a:hover {background: #e1e1e1; } .vac-legacy-site h1 {font-size: 22px; color: #977768; font-weight: normal; margin: 0 0 8px 0; padding: 0; } .vac-legacy-site h1 span {position: absolute; top: -9999px; left: -9999px; } .vac-legacy-site h2 {color: #FF0000; font-weight: normal; font-size: 16px; font-style: normal; margin: 5px 0 5px 0px; padding: 0; } .vac-legacy-site h3 {font-size: 16px; font-style: normal; margin: 0 0 10px 0px; padding: 0; color: #85474C; } .vac-legacy-site .indent {margin-left: 20px; } .vac-legacy-site p {margin-top: 0; margin-bottom: 1em; } .vac-legacy-site p.question {font-weight: bold; font-style: italic; font-size: 13px; } .vac-legacy-site i {font-style: normal; } .vac-legacy-site .italic {font-style: italic; } .vac-legacy-site .note {font-size: 11px; color: #666; padding: 3px 0 0 3px; height: 7px; } .vac-legacy-site hr {background: #AD6F34; border: none; border-bottom: solid 1px #641513; margin: 0 0 10px 0; height: 2px; } .vac-legacy-site hr.dotted {background: #fff; border: none; border-bottom: dotted 1px #504F55; margin: 0 0 10px 0; height: 1px; } .vac-legacy-site a {color: #925222; text-decoration: none; } .vac-legacy-site a:hover {text-decoration: underline; } .vac-legacy-site label, .vac-legacy-site input {display: block; margin: 0px 5px 5px 0; } .vac-legacy-site label {width: 100px; float: left; text-align: right; } .vac-legacy-site input.contact {width: 260px; } .vac-legacy-site select {float: left; margin-right: 3px; margin-bottom: 3px; } .vac-legacy-site .offsides {position: absolute; top: -1000px; left: -1000px; } .vac-legacy-site .mdMargR {margin-right: 10px; } .vac-legacy-site .lgMargR {margin-right: 40px; } .vac-legacy-site .mdMargL {margin-left: 10px; } .vac-legacy-site .lgMargL {margin-left: 20px; } .vac-legacy-site .xlgMargL {margin-left: 170px; } .vac-legacy-site .smMargB {margin-bottom: 5px; } .vac-legacy-site .mdMargB {margin-bottom: 10px; } .vac-legacy-site .lgMargB {margin-bottom: 20px; } .vac-legacy-site .left {float: left; } .vac-legacy-site .right {float: right; } .vac-legacy-site .clear {clear: both; } .vac-legacy-site img {border: none; } .vac-legacy-site .bord {border: solid 1px #CACACA; padding: 4px; background: #EFEFEF; } /* ========================================================================== Contact page — two column layout (form / map) ========================================================================== */ .vac-legacy-site .vac-contact-columns {width: 100%; } .vac-legacy-site .vac-contact-form-col {width: 48%; float: left; } .vac-legacy-site .vac-contact-map-col {width: 48%; float: right; } .vac-legacy-site .vac-contact-map-col iframe {width: 100%; height: 300px; border: 0; display: block; } .vac-legacy-site .vac-contact-directions {width: 100%; clear: both; text-align: center; padding-top: 20px; } .vac-legacy-site .vac-contact-directions p {margin-bottom: 8px; } /* ========================================================================== Adoption gallery + lightbox (self-contained, no jQuery plugin needed) ========================================================================== */ .vac-legacy-site .vac-lightbox-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 99999; text-align: center; } .vac-legacy-site .vac-lightbox-overlay.vac-open {display: block; } .vac-legacy-site .vac-lightbox-inner {position: relative; display: inline-block; top: 50%; transform: translateY(-50%); max-width: 90%; } .vac-legacy-site .vac-lightbox-inner img {max-width: 100%; max-height: 80vh; border: 4px solid #fff; } .vac-legacy-site .vac-lightbox-caption {color: #fff; font-size: 14px; margin-top: 10px; } .vac-legacy-site .vac-lightbox-close {position: absolute; top: -35px; right: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; text-decoration: none; } .vac-legacy-site .vac-lightbox-close:hover {text-decoration: none; color: #ddd; } /* Gravity Forms sits inside .copy un-styled by the legacy CSS above (its own theme handles labels/inputs) — this only resets spacing so it sits flush inside the legacy column. */ .vac-legacy-site .vac-contact-form-col .gform_wrapper {margin: 0; }