/* BEFORE. Deliberately period-accurate to roughly 2012, because a caricature
   would prove nothing: the comparison is only worth anything if this is the
   kind of site a real trade business would actually still be running.
   Fixed 960px canvas, no viewport meta, no media queries, gradient chrome,
   Verdana at 11px, headline over a busy photograph with no scrim. */

body {
  margin: 0;
  padding: 0;
  background: #dfe4ea url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23dfe4ea'/><rect width='2' height='2' fill='%23d7dce3'/></svg>) repeat;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #333333;
}
#wrapper { width: 960px; margin: 12px auto; background: #ffffff; border: 1px solid #b9c0ca; }
.clear { clear: both; }
a { color: #1f4f9c; }

/* ---- Header ---- */
#header { background: #ffffff; padding: 14px 16px 10px; border-bottom: 3px solid #ffd200; }
#logo { float: left; }
.logo-main {
  font-family: Arial, Helvetica, sans-serif; font-size: 34px; font-weight: bold; letter-spacing: 1px;
  color: #1f3a6e;
  /* the period bevel */
  text-shadow: 1px 1px 0 #ffffff, 2px 2px 2px rgba(0,0,0,0.35);
}
.logo-sub { font-family: Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: 3px; color: #6b7480; }
#headercontact { float: right; text-align: right; }
#headercontact p { margin: 2px 0; }
.bignum { font-family: Arial, Helvetica, sans-serif; font-size: 26px; font-weight: bold; color: #cc0000; }
.small { font-size: 10px; color: #777777; }

/* ---- Nav: gradient buttons with bevels ---- */
#nav { background: #1f3a6e; background: linear-gradient(#3a5da0, #1f3a6e); border-top: 1px solid #6f8ec9; }
#nav ul { margin: 0; padding: 0; list-style: none; }
#nav li { float: left; border-right: 1px solid #16294f; }
#nav a {
  display: block; padding: 9px 17px; color: #ffffff; text-decoration: none;
  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.45);
}
#nav a:hover, #nav a.on { background: linear-gradient(#ffe14d, #ffd200); color: #1f3a6e; text-shadow: none; }

/* ---- Banner: type straight onto a busy photograph ---- */
#banner { position: relative; }
#banner img { display: block; width: 960px; height: 300px; }
#bannertext { position: absolute; left: 30px; top: 90px; width: 600px; }
#bannertext h1 {
  margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 30px; color: #ffffff;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.7);
}
#bannertext p { margin: 8px 0 0; font-size: 15px; font-style: italic; color: #ffe14d; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); }

/* ---- Body ---- */
#main { padding: 18px 16px 24px; }
#content { float: left; width: 640px; }
#sidebar { float: right; width: 260px; }
h2 {
  font-family: Arial, Helvetica, sans-serif; font-size: 17px; color: #1f3a6e;
  border-bottom: 1px dotted #c3c9d2; padding-bottom: 5px; margin: 20px 0 10px;
}
#content p { line-height: 1.7; margin: 0 0 11px; text-align: justify; }

#whytable { width: 100%; margin: 12px 0 4px; }
#whytable td { width: 33%; vertical-align: top; padding: 8px 10px; text-align: center; }
.icon {
  width: 42px; height: 42px; margin: 0 auto 8px; line-height: 42px; border-radius: 21px;
  background: linear-gradient(#ffe14d, #f0b800); color: #1f3a6e; font-size: 22px;
  box-shadow: inset 0 1px 0 #fff8cc, 0 2px 3px rgba(0,0,0,0.3);
}
#whytable h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #cc0000; margin: 0 0 6px; letter-spacing: 1px; }
#whytable p { font-size: 10px; line-height: 1.6; margin: 0; color: #555555; }

#serviceslist { margin: 8px 0 12px 18px; padding: 0; }
#serviceslist li { line-height: 1.9; }

.box { border: 1px solid #c3c9d2; margin-bottom: 12px; background: #f6f8fa; }
.box h4 {
  margin: 0; padding: 6px 9px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1px;
  color: #ffffff; background: linear-gradient(#3a5da0, #1f3a6e); text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
}
.box p { margin: 0; padding: 9px; line-height: 1.7; }
.red { color: #cc0000; font-weight: bold; }
.testi { font-style: italic; color: #555555; }

/* ---- Footer ---- */
#footer { background: #1f3a6e; color: #c9d4e8; padding: 12px 16px; text-align: center; }
#footer p { margin: 3px 0; font-size: 10px; }
#footer a { color: #ffd200; }
.tiny { font-size: 9px; color: #8ea1c4; }

/* The disclosure is intentionally NOT period accurate. It has to be legible. */
#samplenote { background: #fffbe6; border-top: 2px solid #ffd200; padding: 12px 16px; }
#samplenote p { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.6; color: #4a4636; }