/* ============================================================
   Haverdyne Systems corporate website
   (c) 1998 Haverdyne Systems Pty Ltd
   Optimised for Netscape Navigator 4 / Internet Explorer 4
   ============================================================ */

html {
  background-color: #dfe6ee;
}

body {
  margin: 0;
  padding: 0;
  background-color: #dfe6ee;
  background-image: url("bg-tile.png");
  background-repeat: repeat;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000033;
  text-align: center;
}

/* ---- Outer page frame: fake table-based centred layout ---- */
.page {
  width: 760px;
  max-width: 96%;
  margin: 12px auto;
  background-color: #ffffff;
  border: 2px solid #4a6a8a;
  text-align: left;
}

/* ---- Top banner ---- */
.banner {
  background-color: #33557a;
  background-image: linear-gradient(to bottom, #6a8db5 0%, #33557a 55%, #1f3d5c 100%);
  border-bottom: 2px solid #1f3d5c;
  padding: 10px 14px;
  color: #ffffff;
}

.banner table {
  width: 100%;
  border-collapse: collapse;
}

.banner td {
  vertical-align: middle;
}

.company-name {
  font-family: "Times New Roman", Times, serif;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #ffffff;
  margin: 0;
  text-shadow: 1px 1px 0 #12253c;
}

.company-sub {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: #cdddee;
  text-transform: uppercase;
  margin-top: 2px;
}

.banner-est {
  text-align: right;
  font-size: 10px;
  color: #cdddee;
  font-style: italic;
  white-space: nowrap;
}

/* ---- Navigation bar of beveled buttons ---- */
.navbar {
  background-color: #c8d2dc;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #7f909f;
  padding: 6px 4px;
  text-align: center;
}

.navbtn {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #17324f;
  text-decoration: none;
  padding: 3px 12px;
  margin: 2px 1px;
  background-color: #d7dfe7;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #8494a3;
  border-bottom: 2px solid #8494a3;
}

.navbtn:hover {
  color: #000000;
  background-color: #e6ecf2;
}

.navbtn:active,
.navbtn.here {
  border-top: 2px solid #8494a3;
  border-left: 2px solid #8494a3;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

.navbtn.here {
  color: #000000;
  background-color: #eef2f6;
}

/* wrapper so the Careers button + NEW! flag stay together */
.nav-item {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

/* small "NEW!" starburst used in the nav next to Careers */
.nav-new {
  display: inline-block;
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 0 0 1px;
  vertical-align: middle;
}

.nav-new span {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  background-color: #cc0000;
  clip-path: polygon(
    50% 0%, 61% 20%, 83% 12%, 79% 35%, 100% 46%, 79% 57%,
    88% 79%, 64% 74%, 57% 97%, 43% 78%, 21% 88%, 25% 64%,
    2% 57%, 22% 43%, 12% 21%, 35% 26%
  );
}

.nav-new b {
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  color: #ffff33;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 8px;
  font-style: italic;
  text-shadow: 1px 1px 0 #660000;
  animation: blink 1.1s steps(2, start) infinite;
}

/* ---- Hero area with the (slick) prism ---- */
.hero {
  text-align: center;
  padding: 18px 14px 8px 14px;
  background-color: #ffffff;
}

.hero img.prism {
  width: 230px;
  height: auto;
  display: inline-block;
}

.tagline {
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;
  font-style: italic;
  color: #33557a;
  margin: 6px 0 2px 0;
}

.tagline-sub {
  font-size: 11px;
  color: #555555;
  margin-bottom: 8px;
}

/* ---- Thin horizontal rules ---- */
hr.thin {
  border: 0;
  border-top: 1px solid #8fa2b5;
  height: 1px;
  margin: 4px 14px;
  color: #8fa2b5;
  background-color: #8fa2b5;
}

/* ---- Content region ---- */
.content {
  padding: 6px 16px 14px 16px;
}

h2.section {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  color: #ffffff;
  background-color: #4a6a8a;
  border: 1px solid #33557a;
  padding: 3px 8px;
  margin: 16px 0 8px 0;
  text-align: center;
  letter-spacing: 1px;
}

h3.sub {
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  color: #33557a;
  margin: 10px 0 3px 0;
}

p {
  font-size: 12px;
  line-height: 1.5;
  color: #222222;
  margin: 0 0 8px 0;
}

/* two-column table-style layout for products */
.cols {
  width: 100%;
  border-collapse: collapse;
}

.cols td {
  vertical-align: top;
  width: 50%;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #222222;
}

.bullet {
  padding-left: 4px;
}

.bullet li {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 2px;
}

/* ---- "NEW!" starburst (used exactly once) ---- */
.starburst {
  display: inline-block;
  position: relative;
  width: 46px;
  height: 46px;
  margin-left: 6px;
  vertical-align: middle;
}

.starburst span {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  background-color: #cc0000;
  /* 12-point burst */
  clip-path: polygon(
    50% 0%, 61% 20%, 83% 12%, 79% 35%, 100% 46%, 79% 57%,
    88% 79%, 64% 74%, 57% 97%, 43% 78%, 21% 88%, 25% 64%,
    2% 57%, 22% 43%, 12% 21%, 35% 26%
  );
}

.starburst b {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  color: #ffff33;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 11px;
  font-style: italic;
  text-shadow: 1px 1px 0 #660000;
  animation: blink 1.1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* ---- Contact block ---- */
.contact-box {
  border: 1px solid #8fa2b5;
  background-color: #eef2f6;
  padding: 8px 12px;
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.7;
}

.contact-box a {
  color: #0000cc;
}

/* ---- Under construction motif (small, sparingly) ---- */
.underconstruction {
  text-align: center;
  font-size: 10px;
  color: #664400;
  background-color: #ffffcc;
  border: 1px dashed #cc9900;
  padding: 3px 6px;
  margin: 12px auto 4px auto;
  width: 260px;
}

/* ---- Footer ---- */
.footer {
  background-color: #c8d2dc;
  border-top: 1px solid #7f909f;
  padding: 10px 12px;
  text-align: center;
  font-size: 10px;
  color: #33475a;
  line-height: 1.7;
}

.footer a {
  color: #0000cc;
}

/* visitor counter — classic odometer GIF look:
   black LCD box with bordered, separated digit cells */
.counter {
  display: inline-block;
  background-color: #000000;
  border: 2px solid #000000;
  border-top-color: #444444;
  border-left-color: #444444;
  border-right-color: #999999;
  border-bottom-color: #999999;
  padding: 2px;
  vertical-align: middle;
  line-height: 0;
}

.counter span {
  display: inline-block;
  width: 13px;
  height: 18px;
  line-height: 18px;
  margin: 0 1px;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #33ff33;
  background-color: #0a0a0a;
  border: 1px solid #222222;
  text-shadow: 0 0 2px #33ff33;
}

/* footer utility line: site map + comments */
.footer-links {
  margin-top: 6px;
}

.footer-links a {
  color: #0000cc;
}

/* 88x31 style badges */
.badges {
  margin-top: 8px;
  text-align: center;
  line-height: 0;
}

.badge {
  display: inline-block;
  width: 88px;
  height: 31px;
  margin: 3px 4px;
  vertical-align: middle;
  border: 1px solid #000000;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
}

.badge b {
  display: block;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.05;
  padding-top: 4px;
  letter-spacing: 0;
}

.badge i {
  display: block;
  font-style: normal;
  font-size: 8px;
  line-height: 1.1;
}

.badge-netscape {
  background-color: #000000;
  background-image: linear-gradient(to bottom, #2a2a2a, #000000);
}

.badge-netscape b { color: #cccccc; }
.badge-netscape i { color: #66aaff; font-weight: bold; }

.badge-notepad {
  background-color: #dfdfdf;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  color: #000000;
}

.badge-notepad b { color: #000080; padding-top: 3px; }
.badge-notepad i { color: #333333; }

/* animated under-construction motif */
.uc-motif {
  display: inline-block;
  width: 40px;
  height: 26px;
  margin-left: 8px;
  vertical-align: middle;
  background-color: #ffcc00;
  border: 2px solid #000000;
  background-image: repeating-linear-gradient(
    45deg,
    #000000 0, #000000 6px,
    #ffcc00 6px, #ffcc00 12px
  );
  animation: uc-slide 0.6s linear infinite;
}

@keyframes uc-slide {
  from { background-position: 0 0; }
  to   { background-position: 17px 0; }
}

.uc-row {
  text-align: center;
}

a { color: #0000cc; }
a:visited { color: #551a8b; }

/* ---- Keep it usable on phones without modernising ---- */
@media (max-width: 640px) {
  body { font-size: 13px; }
  .page { width: 100%; max-width: 100%; margin: 0; border-left: 0; border-right: 0; }
  .company-name { font-size: 26px; }
  .banner-est { display: none; }
  .navbtn { padding: 4px 9px; margin: 2px; }
  .hero img.prism { width: 62%; }
  .cols, .cols tbody, .cols tr, .cols td { display: block; width: auto; }
}