/* ==========================================================================
   Check Mark Paid To Read Email - home page
   Rebuild of the 2010-era page. Layout, colours and typography reproduce the
   original tables; the markup is valid HTML5 and every local rule is here.
   Shared rules (img, .sr-only, #clock, .footer) are in base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */

html {
  background: #000088;
}

body {
  margin: 8px;
  background: #000088 url("../images/bluesatinwallp.jpg") repeat 0 0;
  color: #000;
  font: 16px/normal "Times New Roman", Times, serif;
}

/* --------------------------------------------------------------------------
   Outer frame: 60% wide, 5px green border, 5px white border-spacing
   -------------------------------------------------------------------------- */

.frame {
  width: 60%;
  margin: 0 auto;
  background: #fff;
  border: 5px solid #15a326;
  border-collapse: separate;
  border-spacing: 5px;
}

.frame > tbody > tr > td {
  padding: 1px;
  border: 1px solid #15a326;
  vertical-align: top;
}

.frame-head td {
  background: #15a326;
}

/* Header graphics. line-height: 0 removes the descender gap under the
   images so the two rows stack to the original 76px. */

.masthead {
  margin: 0;
  padding: 2px 0;
  line-height: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Intro block
   -------------------------------------------------------------------------- */

.intro {
  text-align: center;
}

.tutorial {
  margin: 16px 0;
}

/* --------------------------------------------------------------------------
   Program table
   -------------------------------------------------------------------------- */

.programs {
  width: 100%;
  background: #fff;
  border: 1px solid #444578;
  border-collapse: separate;
  border-spacing: 1px;
}

.programs .col-check { width: 72px; }
.programs .col-name { width: 446px; }
.programs .col-levels { width: 110px; }
.programs .col-minimum { width: 123px; }

.programs th {
  padding: 3px;
  border: 1px solid #444578;
  background: #15a326;
  color: #fafcef;
  font: bold 13px Arial, Helvetica, sans-serif;
  text-align: center;
  vertical-align: middle;
}

.programs th.checked {
  color: #fff;
  text-align: left;
}

.programs td {
  padding: 3px;
  border: 1px solid #444578;
  text-align: center;
  vertical-align: middle;
}

/* Referral levels / minimum payout use Arial size=3 (16px). */

.programs td.info {
  font: 16px Arial, Helvetica, sans-serif;
}

/* Program name cell: banner on top, justified description below. */

.programs td p {
  margin: 0;
}

.programs td .banner {
  margin: 0 0 16px;
  line-height: 0;
}

.programs td .desc {
  text-align: justify;
}

.programs .check {
  line-height: 0;
}

/* --------------------------------------------------------------------------
   iGetPTC block
   -------------------------------------------------------------------------- */

.igetptc {
  text-align: center;
}

/* Sizes match the original h3 / h4 / h2 defaults. */

.igetptc .iget-title {
  margin: 18.72px 0;
  font-size: 18.72px;
  font-weight: bold;
}

.igetptc .iget-line {
  margin: 21.28px 0;
  font-size: 16px;
  font-weight: bold;
}

.igetptc .cta {
  margin: 19.92px 0;
  font-size: 24px;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   Guide / tutorial text
   -------------------------------------------------------------------------- */

/* The original left <blockquote> unclosed, so everything below the tutorial
   text inherited a 40px indent. The padding reproduces that alignment. */

.guide {
  padding: 0 40px;
  text-align: left;
}

.guide p {
  margin: 16px 0;
}

.guide .step {
  color: green;
  font-weight: bold;
}

.rule {
  height: 0;
  margin: 8px 0;
  border: 0;
  border-top: 1px solid #00f;
}

.rule-sm { width: 195px; }
.rule-md { width: 300px; }
.rule-lg { width: 620px; }

.section-head {
  margin: 16px 0;
}

.coinpayments {
  margin: 16px 0 32px;
  text-align: center;
}

.resources {
  margin: 16px 0;
  text-align: center;
}

.footer {
  margin: 40px 0 0;
}

/* Grey rule at the very bottom of the page, outside the frame. */

.footer-rule {
  width: 800px;
  max-width: 100%;
  height: 0;
  margin: 8px auto;
  border: 0;
  border-top: 1px solid #818181;
}