<html>
@charset "utf-8";

.Fixed
{
position: fixed;
top: 20px;
left: 1px;
}
/* Member-type badges — one rule per row in the club's memtypes table, so a type
   the club adds is coloured everywhere without touching this file. */
.sales {
background-color:white;
width:750px;
margin-left: auto;
margin-right: auto;
}
.style9 {font-size: xx-large}
.style3 {color: #000000}
/* .Member is coloured by the memtypes block above. ".Other" is the catch-all
   agenda_email_send.php/agenda_email_send_legacy.php use for a member whose type is not "Member". */
.Other  {color: #ffffff}
.style1 {color: #FF0000}
.style2 {color: #000000; }
.style14 {font-size: 14px}
.style3 {font-size: 18px}
.style4 {color: #000000; font-size: 24px; }
.style5 {font-size: 24px; }
.style8 {
font-size: 20px;
color: #000000;
}

.style77 {
color:#ffffff;
border: none;
background-color:#292e7f;
}
.style99 {
font-size:15pt;
border:none;
background-color:#292e7f;
color:#ffffff;
}

.zstyle88 {
background-color:#292e7f;
color:#ffffff;
font-size:12pt;
text-align: left;
border: none;
}
.style88 {
background-color:#292e7f;
color:#ffffff;
font-size:12pt;
text-align: right;
border: none;
}
.style88l {
background-color:#292e7f;
color:#ffffff;
font-size:12pt;
text-align: left;
border: none;
}
.style89 {
background-color:#292e7f;
color:#ffffff;
font-size:12pt;
text-align: left;
border: none;
}

.style87 {
background-color:#292e7f;
color:#ffffff;
font-size:12pt;
text-align: left;
border: none;
}
h1
{
font-size:25pt;
text-align: center;
color: #ffffff;
}
h2
{
font-size:18pt;
color:#ffffff;
}
h3
{
font-size:18pt;
color:#ffffff;
background-color:#292e7f;
display:inline-block;
white-space: normal;
}
h5
{
font-size:10pt;
color:#ffffff;
background-color:#292e7f;
white-space: normal;
}
a:link {
color: #ffff00;
text-decoration: none;
}
a:visited {
color: #ffff00;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: none;
border: 0px solid white;
}
/* Form action buttons. Bare <button> is left alone deliberately — on the
   classic agenda pages those are the role buttons, which carry their own
   palette classes (.mine, .available, …). */
.button,
input[type="submit"],
input[type="button"] {
border: none;
border-radius: 10px;
padding: 6px 14px;
font-weight: bold;
cursor: pointer;
color: #ffffff;
background: linear-gradient(to bottom, #42aaff, #003366);
}
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
background: #ff0000;
color: #ffffff;
}
/***************************/

body {
background-repeat: no-repeat;
background-position: center 2cm;
background-color:#292e7f;
background-image: url(images/ta.jpg);
background-size:27%;
color:#ffffff;
z-index:20;
}
/*
*/
#mainhead {
position: fixed;
right: 0;
top: 5%;
width: 8em;
margin-top: -4.5em;
top: 5%;
}

.column {
float: left;
white-space: nowrap;
font-weight: bold;
}
.slideContainer {
white-space: nowrap;
width: 18000px;
}
/*
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
*/
/* Agenda role buttons — driven by the per-club palette (club_colours),
   the same colours the SPA (spa.php) uses, so the whole site matches. */
.mine {
background-color:#ffa500;
color:#000000;
}
.mine:hover { background-color:#ffb733; color:#000000; }
.available{
background-color:#90ee90;
color:#000000;
}
.available:hover { background-color:#a6f5a6; color:#000000; }
.canpick{
background-color:#cfe8ec;
color:#000000;
}
.canpick:hover { background-color:#e0f2f5; color:#000000; }
.theName{
background-color:#ffd400;
color:#000000;
}
.theName:hover { background-color:#ffe04d; color:#000000; }
.taken{
border: none;
background-color:#6b6b6b;
color:#ffffff;
}
.taken:hover { background-color:#808080; color:#ffffff; }
.tourguide-theme{
background-color:#800080;
color:#ffffff;
cursor:pointer;
}
.tourguide-theme:hover { background-color:#9b30ff; color:#ffffff; }
.stylemailsend {
font-size: 36px;
color: #ffffff;
}
.style100 {color: #ffffff}
.nav {
}
.nav li {
display:inline; }
.nav a {
display:inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #ffffff;
border-right: 0px solid #ccc;
background: linear-gradient(to bottom, #42aaff, #003366);
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
behavior:url(PIE.htc);
}
.nav li a:hover {
background: #ff0000;
color: #ffffff;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
border-radius: 60px;
behavior:url(PIE.htc);
}

/* ============================================================
   MOBILE / SMALL SCREEN SUPPORT
   Pages are built from fixed-width layout tables and 480px inputs.
   These rules only apply at phone widths, so the desktop layout
   is untouched. Every page links this file, so this covers the app.
   ============================================================ */
@media (max-width: 820px) {

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 6px;
    /* Long unbroken URLs / codes are a major source of sideways scroll */
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Nothing may be wider than the screen */
  *, *::before, *::after { box-sizing: border-box; }

  img, iframe, embed, object, video { max-width: 100%; height: auto; }

  /* Fixed-width centred container used on the marketing/login pages */
  .sales { width: auto !important; max-width: 100%; }

  /* Layout tables carry hard width="770" etc. Let them shrink, and let a
     genuinely wide data grid scroll on its own instead of blowing out the page. */
  table {
    max-width: 100% !important;
    width: auto !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
  td, th { word-break: break-word; }

  /* Form controls: fluid, not 480px fixed.
     16px min font-size stops Android/iOS auto-zooming on focus. */
  input, select, textarea, button {
    max-width: 100% !important;
    font-size: 16px !important;
  }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="date"],
  select, textarea {
    width: 100% !important;
    min-height: 44px;
    padding: 8px;
  }
  textarea { min-height: 90px; }

  /* Comfortable tap targets (WCAG ~44px) */
  input[type="submit"], input[type="button"], input[type="reset"], button, .button {
    min-height: 44px;
    padding: 10px 16px;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 22px !important;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
  }

  /* Menu pages list their links as bare text in table cells, which leaves
     them tightly stacked and easy to mis-tap. Give each its own row. */
  td > a {
    display: block;
    padding: 11px 4px;
  }

  /* Nav pills: stack and wrap instead of running off the right edge */
  .nav { padding-left: 0; }
  .nav li { display: block; margin: 0 0 8px 0; }
  .nav a {
    display: block;
    width: 100%;
    padding: 12px 15px;
    text-align: center;
  }

  /* Headings sized in pt overflow narrow screens */
  h1 { font-size: 22px; }
  h2 { font-size: 19px; }
  h3, h5 { font-size: 16px; display: block; }

  /* ---- Member-facing role picker (memberupdate.php / styles_memberupdate_legacy.php) ----
     On desktop the meeting dates sit side by side in an 18000px-wide
     nowrap carousel. On a phone that means scrolling sideways through
     18000px to find your role, so stack the dates vertically instead. */
  .slideContainer {
    width: 100% !important;
    white-space: normal !important;
  }
  .column {
    float: none !important;
    width: 100% !important;
    white-space: normal !important;
    margin-bottom: 18px;
  }
  /* Role buttons: full-width and tappable rather than a cramped inline row */
  .column button {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    padding: 12px;
    white-space: normal;
  }
}

/* Very small phones */
@media (max-width: 400px) {
  h1 { font-size: 19px; }
  body { margin: 4px; }
}

