/* * Ark Animal Hospital - legacy design, ported from victorvillepetvet.com * * Every rule below is scoped under .ark-legacy-site so it can never bleed * out onto the rest of the WordPress theme (the original stylesheet used * bare element selectors like body, a, p, h1-h4, ul, hr, img). * * NOTE: the original stylesheet also referenced images/divider.jpg (for * hr.divider) and i/bullet.jpg (for ul.bullets). Neither class is used on * the Home or Contact pages, so both rules are kept for fidelity but are * harmless without those two image files. * * The form-related rules (label/input/textarea/select) from the original * stylesheet have been intentionally left out — the raw HTML contact form * is being replaced by Gravity Forms, and keeping those bare-element rules * would have styled Gravity Forms' own labels/inputs/selects too. */ .ark-legacy-site { margin: 0; padding: 0; font-family: arial; font-size: 14px; background: url(images/background.jpg) top center repeat-x #FEF7CB; line-height: 140%; color: #3F393C; /* Full-bleed: break out of the theme's (narrower) content column so this background spans the entire browser width, the way it did when it lived on on the original site. The 900px .wrapper below still centers itself normally inside this. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* Setting a background on makes browsers extend it to fill the whole viewport canvas automatically, even past short content - that special behavior doesn't apply to a plain div, so we replicate it manually here. Without this, short pages (like Home) reveal the theme's own background color below the footer. */ min-height: 100vh; } .ark-legacy-site .wrapper { width: 900px; margin-left: auto; margin-right: auto; } .ark-legacy-site .header { width: 900px; height: 166px; background: url(images/header.jpg) no-repeat; padding: 0px 0 0 0; position: relative; } .ark-legacy-site .menu { float: right; } .ark-legacy-site .menu ul { margin: 0 11px 0 0; padding: 0; list-style-type: none; } .ark-legacy-site .menu ul li { display: block; float: left; } .ark-legacy-site .menu ul li a { display: block; padding: 27px 12px 12px 12px; background: #D88D0F; color: #fff; font-weight: bold; font-size: 16px; font-family: verdana; margin-left: 4px; text-decoration: none; float: left; border: solid 1px #AA700B; border-top: none; } .ark-legacy-site .menu ul li a:hover, .ark-legacy-site .menu ul li a.active { color: #5B452A; background: #E8BE72; } .ark-legacy-site #container { width: 900px; margin: 0 auto; } .ark-legacy-site #top-round { background: url(images/top-round.jpg); width: 900px; height: 24px; } .ark-legacy-site #main { width: 840px; background: url(images/shadows.jpg) repeat-y; padding: 5px 30px; line-height: 150%; } .ark-legacy-site .footer { color: #3A3A3A; font-size: 11px; background: url(images/footer.jpg) top no-repeat; margin: 0 auto; height: 100px; padding: 35px 20px 0 20px; width: 860px; } .ark-legacy-site .footer a { color: #3A3A3A; text-decoration: none; } .ark-legacy-site .footer a:hover { color: #3A3A3A; text-decoration: underline; } .ark-legacy-site #factoid { border-top: solid 1px #78603E; padding-top: 10px; padding-bottom: 15px; margin-top: 30px; } .ark-legacy-site h1 { color: #92600A; font-family: verdana, arial; font-size: 24px; font-weight: bold; margin: 0 0 10px 18px; padding: 0; } .ark-legacy-site h2 { color: #12304B; font-family: arial; font-size: 16px; font-style: normal; margin: 15px 0 0 0; margin-bottom: 5px; padding: 0; } .ark-legacy-site h3 { font-size: 20px; color: #717166; font-family: "trebuchet ms", arial; font-style: normal; margin: 0px 0 6px 0px; padding: 0; font-weight: bold; } .ark-legacy-site h4 { font-size: 12px; color: #797979; font-style: normal; margin: 15px 0 6px 0px; padding: 0; font-weight: bold; } .ark-legacy-site ul.bullets { list-style-type: none; margin: 0; padding: 0; } .ark-legacy-site ul.bullets li { background: url(i/bullet.jpg) left no-repeat; padding-left: 20px; } .ark-legacy-site ul { font-size: 12px; line-height: 130%; } .ark-legacy-site hr.divider { border: none; background: url(images/divider.jpg) repeat-x; height: 8px; } .ark-legacy-site p { margin: 0 0 8px 0; } .ark-legacy-site .small { font-size: 12px; } .ark-legacy-site i { font-style: normal; } .ark-legacy-site .italic { font-style: italic; } .ark-legacy-site .note { font-size: 12px; color: #aaa; } .ark-legacy-site hr { background: #fff; border: none; border-bottom: solid 1px #78603E; margin: 10px 0 10px 0; height: 1px; } .ark-legacy-site a { color: #C18659; } .ark-legacy-site a:hover { color: #6F1B2B; } .ark-legacy-site .offsides { position: absolute; top: -1000px; left: -1000px; } .ark-legacy-site .mdMargR { margin-right: 10px; } .ark-legacy-site .mdMargL { margin-left: 10px; } .ark-legacy-site .lgMargL { margin-left: 20px; } .ark-legacy-site .xlgMargL { margin-left: 170px; } .ark-legacy-site .mdMargB { margin-bottom: 10px; } .ark-legacy-site .lgMargB { margin-bottom: 20px; } .ark-legacy-site .lpad { padding-left: 15px; } .ark-legacy-site .bord { padding: 3px; background: #fff; border: solid 1px #BFC1C3; } .ark-legacy-site .right-bord { border-right: solid 1px #DCE2E3; } .ark-legacy-site .alignleft { float: left; margin: 0 12px 5px 0; } .ark-legacy-site .alignright { float: right; margin: 0 0 5px 12px; } .ark-legacy-site .left { float: left; } .ark-legacy-site .right { float: right; } .ark-legacy-site .clear { clear: both; } .ark-legacy-site img { border: none; }