/* ============================================================
   Squarerigger Pub — uni.css, full rewrite
   Every background-image url() pointing at superbrawl.com has
   been removed and replaced with flat CSS (gradients, borders,
   border-radius, Unicode glyphs standing in for icon sprites).
   Layout widths that were hardcoded to the old 1000px canvas
   now scale with the site's own .wrap container instead.
   Semantic pick-result colors under #Report (.win/.cov/.vis/
   .hom/.fav/.spr/.dog/.ou/etc.) and data-row striping are left
   as solid colors, unchanged in meaning — those are functional,
   not decorative.
   NOTE: this rewrite matches the site's DESKTOP container width.
   The underlying layout is absolute-position/pixel-offset based
   throughout (Superbrawl's engine), so true mobile breakpoint
   behavior is a separate follow-up, not attempted here.
   ============================================================ */

:root{
  --ink:#121316; --ink-2:#1B1C20; --walnut:#2B2019; --walnut-2:#332419;
  --brass:#C6995C; --brass-soft:rgba(198,153,92,.28); --amber:#E8A94F;
  --cream:#F3EBDD; --cream-dim:rgba(243,235,221,.68); --line:rgba(198,153,92,.18);
}

body {font:normal 100% 'Manrope', Verdana, sans-serif;} * input {outline:none;} * {margin:0;} img {border:none;} ul {margin-top: 0.2em; margin-bottom: 0.5em;}
a:link, a:visited, a:active, a:hover	{text-decoration:none; color:var(--cream); font-family: 'Manrope', Verdana, sans-serif; outline:none;} a:hover		{text-decoration:underline; color:var(--amber);} div {padding:0px;}
.link1, .link1b {text-decoration:none; color:var(--cream); outline:none; font-weight:normal;} .link1b {font-weight:bold;}
input[type="button"]::-moz-focus-inner  {border:0px;}

/* #Browser {position:absolute; top:0px; left:0px; width:99.9%; margin:0px 0px 40px 0px; padding:0px 0px 40px 0px; z-index:1; background:linear-gradient(180deg, var(--walnut-2) 0%, transparent 220px);}  */
#Browser {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99.9%;
  margin: 0px 0px 40px 0px;
  padding: 0px 0px 40px 0px;
  z-index: 1;
  background: transparent;
}

#Wrapper {padding:0px; width:100%; min-height:1200px; margin:5px 0 40px 0; padding-bottom:40px; border:none; position:relative; top:0px; left:0px; box-sizing:border-box;} */

#Marquee  {border:none; font:bold 160% 'Fraunces', Georgia, serif; color:var(--cream); width:100%; height:150px; padding:0px; position:absolute; z-index:3;}
#MarqueeS {border:none; font:bold 160% 'Fraunces', Georgia, serif; color:var(--cream); width:100%; height:150px; padding:0px; position:absolute; z-index:2;display:none;}

/* --- Menu bar: flat tab/chip style, reusing the site's .chip
       visual language instead of the menus1.png sprite --- */
#Menu {color:var(--cream); border:none; font-size:80%; outline:none; padding:0px; position:absolute; z-index:3; background:transparent; height:20px; display:flex; gap:6px; align-items:center;}
#Menu div {float:left;}
#Menu div a:link, #Menu div a:visited, #Menu div a:active, #Menu div a:hover {text-decoration: none; color:var(--cream); outline:none;}
#Mlink {
  background:transparent; border:1px solid var(--brass-soft); border-radius:16px;
  padding:10px 16px; font-family:'IBM Plex Mono', monospace; line-height:1; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  text-transform:uppercase; letter-spacing:1px; font-size:10px; transition:all .2s ease;
}
#Mlink:hover, #Mlink a:hover { background:var(--brass); border-color:var(--brass); color:var(--ink); }
#Rephead {
  background:transparent; border-bottom:1px solid var(--brass-soft); padding:6px 4px;
  font-family:'IBM Plex Mono', monospace; line-height:1; box-sizing:border-box;
  display:inline-flex; align-items:center;
  text-transform:uppercase; letter-spacing:.5px; font-size:10px;
}
#Msep { background:none; border-left:1px solid var(--line); width:1px; height:30px; padding:0px; }
#Gmnu {height:25px; z-index:4; position:relative; top:-8px; left:-1px;}

/* --- Header banner: flat gradient bar with a text label,
       replacing the headSV1.jpg raster banner --- */
#Header {
  background:linear-gradient(135deg, var(--walnut) 0%, var(--ink) 100%);
  background-repeat:no-repeat; padding:0px; position:absolute; top:0px; left:0px;
  border:1px solid var(--line); border-radius:10px; box-sizing:border-box;
  width:100%; display:flex; align-items:center; justify-content:center;
  display: none;
}
.BASEhd, .NFLhd {
  background:transparent; color:var(--cream); border:none; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.BASEhd::before, .NFLhd::before {
  content:"The Squarerigger Pub \2014 NFL Pool";
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.9rem;
  letter-spacing:.5px; color:var(--brass); text-align:center;
}


#Logbox .ti {
  font:normal 85% 'Manrope', Verdana, sans-serif; height:1.0em; background:var(--ink-2);
  color:var(--cream); border:1px solid var(--brass-soft); border-radius:3px; padding:3px 6px;
}
#Logbox a:link, #Logbox a:visited, #Logbox a:active, #Logbox a:hover	{text-decoration: none; color:var(--cream); font-family: 'Manrope', Verdana, sans-serif;}
#Logbox a:hover		{color:var(--amber);}
#Logbox td {padding-right:8px; height:36px; background:transparent;}
#Logbox .left, #Logbox .right {background:transparent; width:6px; padding:0px;}
#Logbox .button {margin:4px 2px 3px 2px; padding:4px 11px 7px 11px; height:1.8em; outline:none;}

/* Icon buttons: flat circular brass-outline buttons with a
   Unicode glyph in place of the sprites2.png icon sheet */
#Logbox .profile div, #Logbox .logout div, #Logbox .tools div {
  background:transparent; width:30px; height:30px; padding:0px; border:1px solid var(--brass-soft);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-size:14px; transition:all .2s ease;
}
#Logbox .profile div:hover, #Logbox .logout div:hover, #Logbox .tools div:hover {
  border-color:var(--brass); color:var(--brass); background:rgba(198,153,92,.08);
}
#Logbox .profile div::before { content:"\1F464"; }   /* profile */
#Logbox .tools div::before   { content:"\2699";  }   /* tools/gear */
#Logbox .logout div::before  { content:"\23FB";  }   /* logout/power */

/* Main output panel. poolstyles.css (loaded after this file)
   defines the authoritative width/height/z-index for #Output —
   this file intentionally leaves that untouched here. */
#Output a:link, #Output a:visited, #Output a:active, #Output a:hover	{background:transparent; text-decoration: none; color:var(--cream); font-family: 'Manrope', Verdana, sans-serif;}
#Output .link1, #Output .link1b, #Output a:hover		{text-decoration:underline; color:var(--amber);}
#Widget {position:absolute; padding:1px; border:none; color:var(--cream); font:normal 80% 'Manrope', Verdana, sans-serif; z-index:2;}


#Report {width:99%; margin:10px auto; font-size:110%;}
#Report table {border:1px solid var(--line); margin:0 auto; border-collapse:collapse;}
#Report th {color:var(--cream); background:var(--ink);}
#Report td {color:#000;}
#Report th .link1 {color:var(--cream); font-weight:normal;}
#Report tr.r1 td {background:#FFF; color:#000; border-bottom:1px solid #000;}
#Report tr.r2 td {background:#CCC; color:#000; border-bottom:1px solid #000;}
#Report tr.r3 td {background:#0F0; color:#000; border-bottom:1px solid #000;}
#Report tr.match td, #Report .match, #Report table td .match  {background:#F60; color:#000;}
#Report tr.spotlight td {background:#F09; color:#000; border-bottom:1px solid #000;}
#Report .vis  	{color:#FFF; background:#025BC0;}						/* visitor */
#Report .viss  	{color:#FFF; background:#025BC0;}						/* vis score */
#Report .hom  	{color:#FFF; background:#0000A3;}						/* home */
#Report .homs 	{color:#FFF; background:#00007C;}						/* home score */
#Report .cpik 	{color:#000; background:#FC3;}							/* correct pick */
#Report .win  	{color:#000; background:#FC3;}							/* win */
#Report .cov  	{color:#000; background:#0C0;}							/* cover */
#Report .fav  	{color:#FFF; background:#007C00;}						/* favorite */
#Report .spr  	{color:#FFF; background:#007C00;}						/* spread */
#Report .dog  	{color:#FFF; background:#007C00;}						/* underdog */

/* Delete/action icons: flat glyph buttons replacing
   trashsprite1.png's 4 sprite states (normal/hover/pressed/off) */
#Report .th1, #Report .th2, #Report .th3, #Report .th4 {
  background:var(--ink-2); color:var(--cream-dim); text-align:center; cursor:pointer;
  border-radius:3px; transition:all .2s ease;
}
#Report .th1::before, #Report .th2::before, #Report .th3::before, #Report .th4::before { content:"\00D7"; font-weight:bold; }
#Report .th3, #Report .th1:hover, #Report .th2:hover { background:var(--brass); color:var(--ink); }
#Report .thp {background:var(--brass); color:var(--ink);}
#Report .thp td {color:var(--ink);}
#Report .th1 .link1, #Report .th1 .link1b, #Report .th2 .link1, #Report .th2 .link1b {text-decoration:none; color:var(--cream); outline:none; font-weight:normal;}

#Box {border:1px solid var(--line); margin:auto; color:var(--cream); padding:10px; background:var(--ink-2); width: 100% !important; }
#Box th {background:transparent; white-space:nowrap; padding:3px; font-size:140%;} #Box table {margin:0 auto;} #Box td {white-space:nowrap;padding:3px;}
#Box td .link1 {color:#F00;}


#Forms {width:99%;} #Forms table {margin:0 auto; border:1px solid var(--line); border-collapse:collapse;} #Forms thead th {padding:3px 4px 3px 4px; height:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--cream);} #Forms tbody th {background:var(--ink); color:var(--cream); font-weight:normal; font-size:90%;} #Forms tbody td {font-weight:normal; font-size:90%;}

#strMarquee {width:600px; margin:1px; border:none; color:var(--cream); font:bold 120% 'Fraunces', Georgia, serif;}
#strTops, #strImages, #strVideo {width:300px; padding:0px; margin:2px 0px; border:none; text-align:center; color:var(--cream);}

#strTops table {width:300px; background:var(--ink); border-collapse:collapse; border:1px solid var(--line); margin:0 auto;}
#strTops th.head {background:var(--ink); color:var(--cream); padding:2px 5px; font-size:90%; text-align:center; border-bottom:1px solid var(--line);}
#strTops th {background:var(--brass); color:var(--ink); padding:2px 5px; font-size:90%; text-align:center; border-bottom:1px solid var(--line);}
#strTops td {background:var(--ink); color:var(--cream); padding:1px;}

#strImages {background:var(--ink-2); color:var(--cream);}
#strImages img {border:1px solid var(--line);}

#strColumn {text-align:left; width:375px; margin:2px; border:none; color:var(--cream); padding:2px 2px 30px 2px;}

/* --- Secondary widgets (blog/poll ticker) — not used on this
       page, flattened for completeness/consistency --- */
#sBlog {width:300px; height:300px; margin:2px 0px; border:1px solid var(--line); background:var(--ink-2);}
#sBlog #title {width:300px; height:23px; margin:0 auto; color:var(--cream); font-weight:bold;}
#sBlog #bContent {width:285px; height:250px; margin:0 auto; font-size:90%; border:1px dotted #FFF; color:#000; background:#FFF; overflow:hidden; text-align:left;}
#sBlog #down, #sBlog #up, #sBlog #add {
  background:transparent; width:20px; height:20px; border:1px solid var(--brass-soft); border-radius:3px;
  outline:none; margin:1px; display:flex; align-items:center; justify-content:center; color:var(--cream); font-size:11px; cursor:pointer;
}
#sBlog #down::before { content:"\25BC"; }
#sBlog #up::before   { content:"\25B2"; }
#sBlog #add::before  { content:"+"; }
#sBlog .subject {background:var(--ink); color:var(--cream);}
#sBlog .message {background:#CCC; color:#000;}

#sPoll {width:300px; height:300px; margin:2px 0px; border:1px solid var(--line); background:var(--ink-2); color:#000;}
#sPoll #title {width:300px; height:23px; margin:0 auto; color:var(--cream); font-weight:bold; padding:2px;}
#sPoll .question {padding:5px 2px 10px 2px; text-align:left; font-size:85%;}
#sPoll .answer {padding:5px; text-align:left;}
#sPoll #pai {
  background:transparent; width:30px; height:30px; border:1px solid var(--brass-soft); border-radius:50%;
  outline:none; margin:1px; display:flex; align-items:center; justify-content:center; color:var(--cream); cursor:pointer;
}
#sPoll #pai::before { content:"+"; }

#Fdiv {position:absolute; top:0px; left:0px; width:100%; height:130%; border:none; z-index:98;}
#Xdiv {position:relative; margin:35px; border:3px solid var(--brass); color:var(--cream); padding:3px; background:var(--ink-2); border-radius:10px;}
#Xdiv a:link, #Xdiv a:visited, #Xdiv a:active {color:var(--brass); text-decoration:none;}
#Xdiv a:hover		{ color:var(--amber);}
#Xdiv .ti {font:normal 75% 'Manrope', Verdana, sans-serif; height:1.2em;}
#Xdiv th {background:var(--ink); color:var(--cream); font-size:85%; padding:2px 5px;}
#Xdiv .button {font-size:85%;}
#Xdiv tr.r1 td {background:#FFF; color:#000;}
#Xdiv tr.r2 td {background:#CCC; color:#000;}
#Xdiv .link1 {color:var(--cream); text-decoration:none; outline:none; font-weight:normal;}

#xcon {display:none; width:160px; height:100px; padding:0px; position:fixed; top:0px; left:1110px; font:80% normal Verdana; border:0px solid #F00; background:transparent; color:#FF0; z-index:90;}
#Xdiv .xcon th {background:transparent; color:#0F0;}


#Mlink:has(a[href*="ac=rules"]) {
  display: none;
}

#Mlink:has(a[href*="ac=contact"]) {
  display: none;
}

#Mlink:has(a[href*="ac=help"]) {
  display: none;
}

#Mlink:has(#Gmnu) {
  display: none;
}

#Marquee {
  display: none;
}

#gameid {
  width: 13em !important;
}

#password {
  width: 13em !important;
}

#strImages {
  display: none !important;
}

#strColumn {
  font-size: 0;
  /* collapse original text so it doesn't show/take space */
  line-height: 0;
  width: 100% !important;
}

#strColumn>* {
  display: none;
  /* hide the <font> and <ul> entirely */
}

#strColumn::before {
  content: "Welcome to The Squarerigger Pub Pick 'Em pool 2026\A\A If you were in the pool last you will still be registered. If you had multiple teams for the playoffs please let me know which ones you would like deleted. Password is rigger to enter the pool for the first time you are back to the site. If you are new to the pool hit the Join button and use the password rigger to enter. Remember that everything is case sensitive and symbols are not accepted.\A\A The cost is $100 and includes the loser pool.\A Cameron\A\A If you have any questions please email me at theriggerpub@gmail.com";
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.5;
  display: block;
  width: 100% !important;
}


/* ==========================================================================
   Mobile override for the pick'em pool page
   Add this AFTER the site's existing stylesheet so it takes priority.
   ========================================================================== */

@media (max-width: 600px) {

  /* ---- Overall wrapper ---- */
  #Wrapper,
  #Browser {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* ---- Marquee title ---- */
  #Marquee,
  #MarqueeS {
    font-size: 1.1em !important;
    white-space: normal !important;
    text-align: center;
    padding: 4px;
  }

  /* ---- Login box ---- */
  #Logbox {
    float: none !important;
    width: 100% !important;
    display: block;
    margin: 0 0 8px 0;
  }

  #Logbox table {
    width: 100% !important;
  }

  #Logbox table,
  #Logbox tbody,
  #Logbox tr,
  #Logbox td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  #Logbox td.left,
  #Logbox td.right {
    display: none !important;
    /* spacer cells not needed when stacked */
  }

  #Logbox td {
    padding: 4px 0 !important;
  }

  #Logbox input[type="text"],
  #Logbox input[type="password"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    font-size: 16px;
    /* prevents iOS auto-zoom on focus */
  }

  #Logbox input[type="button"] {
    width: 100%;
    margin: 4px 0;
  }

  /* ---- Top menu / nav ---- */
  #Menu {
    display: flex !important;
    flex-wrap: wrap;
    width: 100% !important;
    box-sizing: border-box;
    top: 240px;
    padding-right: 20px;
  }

  #Menu #Mlink,
  #Menu .mlink {
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 4px !important;
  }

  #Menu #Msep {
    display: none !important;
    /* decorative separators just eat space */
  }

  #Gmnu select {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ---- Main content area ---- */
  #Output {
    width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
    top: 290px;
  }

  #Output table {
    width: 100% !important;
  }

  /* The strColumn / strImages two-column layout stacks on mobile */
  #Output table,
  #Output tbody,
  #Output tr,
  #Output td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #strColumn,
  #strImages {
    width: 100% !important;
    box-sizing: border-box;
    padding: 4px 0;
  }

  #strColumn img,
  #strImages img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- Ad banner: absolutely positioned, will overlap content on mobile ---- */
  #banner {
    position: static !important;
    width: 100% !important;
    max-width: 320px;
    height: auto !important;
    margin: 8px auto !important;
    display: block;
  }

  /* ---- Diagnostic / processing boxes: keep off-screen on mobile, never show over content ---- */
  #Diag,
  #Proc {
    max-width: 90vw;
  }

}

/* ==========================================================================
   Mobile override for the Player Registration ("join") form
   Add this AFTER the site's existing stylesheet so it takes priority.
   ========================================================================== */

@media (max-width: 600px) {

  #join {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* The table has a fixed width="300" attribute — override it */
  #join table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Stack every row/cell instead of the 3-column (label | field | field) layout */
  #join table,
  #join thead,
  #join tbody,
  #join tr,
  #join td,
  #join th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
  }

  #join th {
    text-align: center !important;
    font-size: 1.1em;
    padding: 8px 0 !important;
  }

  /* Row labels ("Names:", "Login Info:", "Email:") */
  #join td[align="right"] {
    text-align: left !important;
    font-weight: bold;
    padding-top: 10px !important;
  }

  #join td {
    padding: 4px 0 !important;
  }

  /* Inputs full width and touch-friendly */
  #join input[type="text"],
  #join input[type="password"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    font-size: 16px;
    /* prevents iOS auto-zoom on focus */
    padding: 6px 4px;
    margin-top: 2px;
  }

  /* Join code field is narrow by nature but should still stretch */
  #join input#joincode {
    width: 100% !important;
  }

  /* Terms checkbox row: keep checkbox and text readable inline */
  #join input[type="checkbox"] {
    width: auto !important;
    vertical-align: top;
    margin-right: 6px;
  }

  /* Register button full width and easy to tap */
  #join input[type="button"].button {
    width: 100%;
    padding: 10px 0;
    font-size: 1em;
    margin-top: 8px;
  }

  /* Terms list: keep readable margins, no overflow */
  #join ul {
    padding-left: 20px !important;
    margin: 6px 0;
  }

  #join li {
    margin-bottom: 6px;
    line-height: 1.4;
  }

  /* "(more info)" links: give them a bit of tap spacing */
  #join a font.link1 {
    display: inline-block;
    padding: 2px 0;
  }

}