/* ============================================================
   responsive.css
   Mobile / small-screen rules for buy-realtraffic.com
   Added 24 Aug 2026. Loaded last, so it overrides the rules
   in tooplate_style.css without those files being changed.
   Delete the one <link> line in templates/header.php to
   switch all of this off again.
   ============================================================ */

/* Nothing should ever be able to push the page wider than the
   screen. This is what stops the sideways scrolling.          */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Pictures shrink to fit instead of forcing the page wide.    */
img {
  max-width: 100%;
  height: auto;
}

/* The header banner was pinned to exactly 1000px.             */
.head1-banner {
  width: 100%;
  max-width: 1000px;
}

/* The shadowed box that holds the whole page had width:1000px
   written straight into the tag, so it needs !important.      */
#tooplate_wrapper > div[style*="box-shadow"] {
  width: 100% !important;
  max-width: 1000px !important;
}

/* Tables were built for a desktop screen.                     */
#tooplate_main table {
  max-width: 100%;
}

/* ============================================================
   THE EMPTY SIDEBAR CELL

   Every page's main layout table starts with an empty cell,
   <td width="145">. It holds nothing at all - no text, no
   image, no link, nothing (checked on all 9 pages) - but it
   still takes up room and pushes everything after it to the
   right.

   This is what was throwing the alignment out. Measured on the
   sign-up page before this rule, the content sat 14px further
   from the left edge than the right at EVERY screen size:
   768px wide -> 29 left / 15 right, 1024 -> 56/42,
   1280 -> 184/170, 1440 -> 264/250. On a phone it was worse
   because the cell took 36px and pushed the form off the side
   of the screen entirely.

   Removed at every width, not just on phones. Every one of
   those sizes is dead centre now.
   ============================================================ */
#tooplate_content > table > tbody > tr > td[width="145"] {
  display: none;
}

/* ============================================================
   VERY NARROW PHONES (360px and similar)

   The page nests tables three deep and each level adds its own
   cell padding, which on a 360px screen added up to more than
   the screen itself and pushed the sign-up form over the edge.
   ============================================================ */
@media (max-width: 480px) {
  /* !important is needed here, and not for the usual reason.
     The phone block further down sets these same cells to 8px
     with a more specific selector, and it comes later in the
     file, so without this it simply wins and the form still
     hangs off the right on a 360px screen.                    */
  #tooplate_content td {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* ============================================================
   THE "I'M NOT A ROBOT" BOX ON THE SIGN-UP PAGE

   Google's reCAPTCHA box is a fixed 304px wide and cannot be
   resized - the width is set by Google, inside the frame.
   On a 320px phone (an old iPhone SE or a 5s) 304px plus the
   form's own border and padding came to more than the screen,
   so the sign-up panel hung off the right edge and its border
   was cut off. That one box was setting the minimum width for
   the whole form.

   Scaled down to 86% on those very narrow screens only, which
   brings it to 262px and lets the form sit square again.
   Measured at 320px: 21 items overhanging before, 0 after.
   Nothing at 360px or wider is affected by this - checked with
   the rule on and off in the same page load.
   ============================================================ */
@media (max-width: 340px) {
  #tooplate_main form .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
    width: 262px !important;
    height: 68px !important;
  }
  #tooplate_main form .g-recaptcha > div {
    width: 304px !important;
  }
}

/* ============================================================
   CONSISTENT SIDE SPACING

   The blocks down the middle of the page were each given their
   own left margin (0px on one, 18px on another, 58px on a
   third), so their left and right edges did not line up and
   the page looked untidy. Measured before this change, on a
   desktop screen: one block started 35px from the edge and
   finished 45px from the other side, the block under it
   started at 80px and finished at 70px.

   These rules put every block on the same left and right edge
   and let the padding on #tooplate_main provide the gutter.
   ============================================================ */
/* #tooplate_content had padding-left:5px and no matching
   padding on the right, which tilted everything inside it. */
#tooplate_content {
  padding-left: 0;
  padding-right: 0;
}

/* These blocks were each given a different left margin (0px on
   one, 18px on another, 58px on a third) while all being the
   same fixed width, so their left and right edges did not line
   up. Centring them makes the gap the same on both sides.

   Their WIDTH is deliberately left alone here. The 920px is
   load bearing on a full-size screen: the row of text ads
   inside it needs 909px to fit three across, so widening or
   narrowing this box drops the third ad onto its own line.

   Do NOT add max-width:100% here either. One .col_w880 sits
   inside an 850px box, so capping it at 100% shrinks it from
   920px to 850px and the third ad wraps onto its own row.
   The phone rules further down do cap it, which is right
   there because there is no room for columns anyway.         */
.col_w920,
.col_w920_satt,
.col_w880,
.col_w880_satt {
  margin-left: auto;
  margin-right: auto;
}

/* NOTE about the row of text ads on the home page.

   That block is 850px wide and centred inside a 940px column,
   so it sits about 45px further in on each side than the
   blocks above and below it. It is even on both sides, so it
   does not look crooked - it is just narrower.

   It is set that way by a style written directly into the tag
   ("max-width: 850px; margin: 2.5em auto"), which is a
   deliberate choice by whoever built it, so I have left it
   alone rather than overrule it. If you would rather it lined
   up with the rest of the page, uncomment the block below.

#tooplate_content > .col_w880:nth-child(2) {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

*/

/* NOTE: .fp_box and .home_intro p are deliberately NOT touched
   here. Those two are the side-by-side columns that hold the
   text ads on a full-size screen. Widening them at desktop
   size makes the three ads run together into one paragraph.
   They are only made full width inside the phone rules lower
   down, where there is no room for columns anyway.           */

/* ============================================================
   TABLETS AND SMALL LAPTOPS
   ============================================================ */
@media (max-width: 1020px) {
  #tooplate_main {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* The page is built on a fixed column grid (920px, 880px and
     so on). Below a full-size screen those columns have to give
     way, otherwise the content is simply cut off the side.     */
  .col_w920,
  .col_w920_satt,
  .col_w880,
  .col_w880_satt {
    width: auto;
    max-width: 100%;
    margin-left: 0;
  }

  .fp_box,
  #tooplate_content > .col_w880:nth-child(2) > .fp_box {
    width: auto;
    max-width: 100%;
    margin-right: 0;
  }

  /* The intro paragraphs were floated at a fixed 660px. */
  .home_intro p {
    float: none;
    width: auto;
    max-width: 100%;
  }
}

/* ============================================================
   PHONES
   ============================================================ */
@media (max-width: 767px) {

  body {
    font-size: 15px;
    line-height: 1.45;
  }

  /* The top menu ran off the side. Now it wraps onto as many
     lines as it needs and each item is big enough to tap.     */
  #tooplate_menu ul {
    display: block;
    padding: 4px 0;
  }

  #tooplate_menu ul li {
    display: inline-block;
  }

  #tooplate_menu ul li a {
    height: auto;
    line-height: 1.2;
    padding: 11px 10px;
    font-size: 14px;
  }

  /* Same for the row of links in the footer. */
  #tooplate_menu_footer_satt ul li a {
    height: auto;
    line-height: 1.2;
    padding: 10px 8px;
    font-size: 14px;
  }

  #tooplate_main {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* The narrower side-by-side columns go one under the other. */
  .col_w260,
  .col_w260b,
  .col_w400,
  .col_w570 {
    float: none;
    width: auto;
    max-width: 100%;
    margin-right: 0;
  }

  /* NOTE: do not add "display: block" to table / tr / td here.
     It looks like it should help, but this page nests its
     content inside tables and #tooplate_main is set to
     overflow:hidden - breaking the table structure collapses
     that box to about 500px and silently cuts off most of the
     page. Widening the columns above is enough on its own.    */

  /* Form boxes fit the screen instead of forcing the sign-up
     and contact pages wider than the phone.                   */
  #tooplate_main input,
  #tooplate_main select,
  #tooplate_main textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Some of the layout tables were built with very generous
     cell padding (25px a side), which on a phone is most of
     the screen before any text is drawn.                      */
  #tooplate_main td[width],
  #tooplate_main table[cellpadding] td {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* The contact and sign-up forms are laid out as a two column
     table - label on the left, box on the right. Side by side
     that needs more width than a phone has, so on small screens
     the label sits above its box instead.

     Scoped to "form table" on purpose. Doing this to every
     table in #tooplate_main collapses the page (see the note
     further up).                                              */
  #tooplate_main form table,
  #tooplate_main form table tbody,
  #tooplate_main form table tr,
  #tooplate_main form table td {
    display: block;
    width: auto !important;
    max-width: 100%;
    text-align: left !important;
  }

  #tooplate_main form table td {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #tooplate_main form table td div[align="right"] {
    text-align: left !important;
  }

  #tooplate_main form input[type="text"],
  #tooplate_main form input[type="email"],
  #tooplate_main form input[type="password"],
  #tooplate_main form textarea,
  #tooplate_main form select {
    width: 100%;
  }

  /* Long links and pasted URLs wrap instead of stretching
     the page sideways.                                        */
  #tooplate_main a,
  #tooplate_main p,
  #tooplate_main td {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Anything with a hard pixel width written into the tag. */
  #tooplate_main img[width],
  #tooplate_main table[width] {
    width: auto !important;
    max-width: 100%;
  }
}