/*
 * Process Valve Supplies. Reproduces the original ASP.NET site pixel for pixel: a fixed
 * 1239px table layout over a stretched background, Arial 9pt bold copy. Values come from the
 * original page's inline styles and "auto-style" classes.
 *
 * The pages have no doctype on purpose (see partials/header.php), so this runs in quirks mode.
 */

body { margin: 0; padding: 0; background-color: #fff; }

.fill { width: 100%; }
.b { font-weight: bold; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 3000; background: #fff; padding: 6px 10px; font: bold 9pt Arial, sans-serif; }
.skip-link:focus { left: 10px; }

/* Frame */
.frame { padding: 0; text-align: center; }
.frame__bg {
  background: url("/Graphics/background.jpg") left 0 top 0 / 100% 100% no-repeat padding-box;
  text-align: center;
  vertical-align: top;
  padding: 0;
}
.frame__page { margin: 0 auto; height: 1px; }

/* Masthead */
.masthead { padding: 0; height: 0; }
.masthead > table { margin-bottom: 0; height: 0; }
.masthead > table > tbody > tr > td { height: 0; }
.masthead table table { height: 20px; }
.masthead__logo { width: 450px; height: 62px; }
.masthead__logo-pos { width: 250px; position: relative; top: 70px; left: 180px; margin-left: -25px; margin-top: 10px; z-index: 1; }
.masthead__logo img { width: 195px; height: 93px; border: 0; }
.masthead__strap { width: 712px; height: 62px; vertical-align: bottom; }
.masthead__strap span { color: #333; font-family: Arial, sans-serif; font-size: 11pt; font-weight: bold; padding-bottom: 50px; padding-left: 10px; }
.masthead__phone { height: 62px; text-align: right; vertical-align: bottom; }
.masthead__phone img { width: 241px; height: 39px; margin-right: 120px; }

/* Menu bar */
.menubar {
  height: 35px;
  width: 100%;
  padding: 0 0 0 90px;
  vertical-align: middle;
  text-align: left;
  background: #3553a9 url("/Graphics/gradient1.jpg") no-repeat;
  font-family: Arial, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  color: #fff;
}
.menubar__gap1 { width: 209px; }
.menubar__gap2 { width: 79px; text-align: right; }
.menubar__about { width: 1%; border-left: 2px solid #fff; }
.menubar__contact { text-align: left; border-left: 2px solid #fff; }
.menubar__rest { text-align: right; }
.menubar__dropdown { position: relative; display: inline-block; vertical-align: top; z-index: 2001; }
.menubar__dropdown:hover { background-color: #6cc9cf; }
/* The original menu items were <input type="submit"> buttons; these match their metrics. */
.menubar__btn {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  height: 30px;
  padding: 0 6px;
  font-family: Arial, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  line-height: 30px;
  white-space: nowrap;
  text-decoration: none;
}
.menubar__btn--about { color: #000; }
.menubar__btn--contact { color: #fff; }
.menubar__btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Content cell */
.content { height: 40px; font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold; color: #fff; }
.content__inner { border: none; }
.heading { color: #3553a9; font-family: Arial, sans-serif; font-size: 16pt; font-weight: bold; }
.t { color: #000; font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold; }

/* Home (About Us) */
.home__margin-l { width: 13%; }
.home__margin-r { width: 12%; }
.home__body { padding-right: 30px; }
.home__intro { width: 544px; padding-right: 30px; padding-top: 10px; vertical-align: top; font-family: Arial, sans-serif; font-size: 9pt; }
.home__logos { text-align: center; }
.home__photo { width: 273px; }
.home__quality { padding-right: 70px; padding-left: 30px; padding-top: 20px; vertical-align: top; font-family: Arial, sans-serif; font-size: 9pt; }
.home__sister { text-align: center; }
.home__sister span { font-weight: bold; font-size: 10pt; color: #c44f00; }
.bordered { border: 1px solid #000; }

/* Contact Us */
.contact__details { vertical-align: top; padding-right: 0; padding-left: 165px; width: 243px; }
.contact__hours { width: 116%; }
.contact__days { width: 120px; }
.contact__times { padding-left: 5px; }
.contact__form { width: 341px; padding-left: 30px; border-left: 1px solid lightgray; vertical-align: top; }
.contact__map {
  border-left: 1px solid lightgray;
  padding-left: 30px;
  vertical-align: top;
  background: url("/Graphics/MAP.png") left 0 top 0 no-repeat;
}
.contact__maplink { color: blue; font-family: Arial, sans-serif; font-size: 9pt; }

.form__label { color: #3553a9; font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold; }
.form__hint { font-family: Arial, sans-serif; font-size: 7pt; }
.form__input { font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold; width: 271px; }
.form__enquiry { font-family: Arial, sans-serif; font-size: 9pt; height: 122px; width: 318px; }
.form__submit { font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold; }
.form__input[aria-invalid="true"], .form__enquiry[aria-invalid="true"] { border: 2px solid #b00020; }
.form__error { color: #b00020; font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold; }
.form__status { display: inline-block; max-width: 318px; font-family: Arial, sans-serif; font-size: 9pt; font-weight: bold; }
.form__status--ok { color: #2e7d32; }
.form__status--error { color: #b00020; }
.contact__form form { margin: 0; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Consent banner (only rendered when GA is configured) */
.cookie-settings { margin: 0; padding: 6px 0; text-align: center; font: 9pt Arial, sans-serif; }
.cookie-settings a { color: #555; }
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 3000; max-width: 420px;
  background: #fff; border: 1px solid #d9d9d9; border-top: 4px solid #3553a9; border-radius: 4px;
  padding: 14px 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
  font: 9pt/1.5 Arial, sans-serif; color: #222;
}
.consent p { margin: 0 0 10px; }
.consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent .button {
  padding: 6px 14px; border: 2px solid #3553a9; border-radius: 4px;
  background: #3553a9; color: #fff; font: bold 9pt Arial, sans-serif; cursor: pointer;
}
.consent .button--plain { background: #fff; color: #3553a9; }