body{
  margin: 0;
  padding: 112px 20px 0px 20px; /* 72 top bar + 40 padding */

  font-family: "Georgia", "Century Schoolbook", "Century", Times, serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 200;
  color: #333333;
}
html {
  padding-bottom: 40px;
}

.full-screen-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em; /* or padding: 2em; */
    box-sizing: border-box; /* Ensures padding doesn't break layout */
    overflow: hidden;
    background-color: rgba(0,0,0,0.75);
    z-index: 9999; /* Ensures it appears on top of everything */
}

.full-screen-image-container img {
    max-width: calc(100% - 4em);
    max-height: calc(100% - 4em);
    /* Accounts for 20px padding on both sides */
    /*max-width: 100%;
    max-height: 100%;*/
    box-shadow: 0 0 5em rgba(0, 0, 0, 0.5); /* Adds a soft shadow */
    width: auto;
    height: auto;
    object-fit: contain;
}

.full-screen-image-container a {
    border: none;
    text-decoration: none;
}
.full-screen-image-container a:hover {
    border: none;
    text-decoration: none;
}

.formbox {
  font-size: 12px;
  background-color: #eee;
  padding: .25em .5em;
  border-radius: .25em;
  margin: 0 .25em 0 0;
  color: #ddd;
  text-align: center;
}
.formbox:hover {
  text-decoration: none;
  border: none;
  background-color: red;

}
.formbox.V {
  background-color: green;
  color: #ccffcc;
}
.formbox.F {
  background-color: #aa0000;
  color: #ffcccc;
}
.formbox.O {
  background-color: orange;
  color: #ffff88;
}


.btn {
  -webkit-appearance: none;
  padding: .5em 1em;
  border-radius: 3px;
  border: 1px solid rgb(160,0,0);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  background-color: rgb(170,0,0);
  cursor: pointer;
}

.btn:hover{
  border: 1px solid rgb(170, 0, 0);
  background-color: rgb(200,0,0);
  color: white;
  /*border: 1px solid rgba(170, 0, 0, 0.4);
  background-color: rgba(170, 0, 0, 0.1);*/
}

.mLivescoreContainer 	{
  display: none;
  white-space: nowrap;
  text-align: center;
  position: fixed;
  z-index: 995;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 5px;
  background-color: rgba(170,0,0,0.97);
  color: rgba(255,255,255,0.9);
  box-shadow: 0px -1px 3px 1px rgba(0,0,0,0.33);
}
.mLivescoreTitle 		{ display: inline-block; margin-right: .5em; }
.mStatusHeader 			{ margin-right: .5em; display: inline-block; color: #c65454; }
.mStatusBlock 			{ display: inline-block; }
.mGameBlock 			{ display: inline-block; margin-right: .5em;  border: none;}
.mGameBlock a       { color: rgba(255,255,255,0.9); border:none;}
.mGameBlock a:hover { color: rgba(255,255,255,0.9); border:none;}
.mCreditBlock 			{ display: inline-block; border: none;}
.mLogo 					{ display: inline-block; width: 16px; max-height: 1em; position: relative; top: 2px; border: none;}
.mCreditText			{ display: none; }


table {
  font-size: 15px;
  line-height: 22px;
  color: #333333;
}

input, textarea {
  font-family: "Georgia", "Century Schoolbook", "Century", Times, serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 200;
  color: #333333;
  width: 100%;

  border: 1px solid #dddddd;
  padding: .5em;

}
input:focus, textarea:focus {
    outline: none;
}


.main_content_container {
  width: 960px;
  margin: 0px auto;

}
.main_content_column_left {
  float: left;
  width: 580px;
}
.main_content_column_right {
  float: right;
  width: 320px;
}

.ingress {
  font-weight: 600;
}

a.right_col_sponsor, a.right_col_sponsor:hover  {
  border:none;
}
img.right_col_sponsor {
  max-width: 120px;
  max-height: 60px;
}
p.right_col_sponsor {
  margin-top: 2em;
}

.news_story_image {

  width: 100%;
  /*max-width: 600px;*/
  /*border: 1px solid #333333;*/

}

.divider-spacing {
  padding: 0 .25em;
}
a {
  -webkit-tap-highlight-color: transparent;
  color: #333333;
  text-decoration: none;
  border-bottom: 1px solid #cccccc;
}

a:hover {
  /*background-color: rgba(170,0,0,.05);*/
  border-bottom: 1px solid #aa0000;
}

.byline {
  color: #808080;
}

.subtle {
  color: #808080;
}
.accent {
  color: #aa0000;
}

.r1 {
  font-size: 38px;
  line-height: 46px;
  color: #333333;
  font-weight: 500;
}

.r2 {
  font-size: 22px;
  line-height: 28px;
  color: #333333;
  font-weight: 400;
}

.main_card {
  width: 100%;
  /*box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);*/

  margin: 0 0 20px 0;
  border-bottom: 1px solid #dddddd;
  /*border-radius: 4px;*/
}

.color_card {
  padding: 20px;
  margin-bottom: 20px;
}

.sticky_card {
  /*background-color: rgba(0,0,0,0.025);*/
  /*background-color: rgba(170,0,0,0.05);*/
  background-color: rgba(100,0,0,0.05);

}
.sticky_card .subtle {
  color: rgba(0,0,0,0.6);
}


.forum_card {
  background-color: #eeeeee;
}

.upcoming_games_card {
  background-color: rgba(0,170,0,0.05);
}
.upcoming_games_card .subtle {
  color: rgba(0,0,0,0.6);
}

.recent_games_card {
  background-color: rgba(170,100,0,0.05);
}
.recent_games_card .subtle {
  color: rgba(0,0,0,0.6);
}


.todays_games_card {
    color: white;
    background-color: rgba(170,0,0,1);
}
.todays_games_card .subtle {
    color: rgba(255,255,255,0.6);
    background-color: rgba(170,0,0,1);
}

.bottom_consent_bar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 2em 0;
  text-align: center;
  background-color: rgba(170,0,0,0.97);
  color: rgba(255,255,255,0.9);
  box-shadow: 0px -1px 3px 1px rgba(0,0,0,0.33)
}

.consentBarBtn, .consentBarBtn:hover {
  padding: .5em;
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.9);

}

#top_bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 72px;
  width: 100%;
  padding-left: 20px;
  background-color: rgba(170,0,0,0.97);
  border: none;
  box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.33)
}


.menu_item_top {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);

  /*
  border: 1px solid red;
  position: absolute;
  vertical-align: middle;
  height: 32px;*/
}

.exp_menu_item a {
  color: #F7E5E5;
  border-bottom: none;
  font-size: 20px;
  line-height: 32px;
}

.exp_menu_item .subtle {
  color: #DD9999;
}

.top_logo_text {
  color: #rgba(255,255,255,0.9);
  font-size: 20px;
}

.menu_item_top a {
  border: none;
  color: rgba(255,255,255,0.9);
}
#top_bar .divider-spacing {
  color: rgba(255,255,255,0.5);
}
.menu_item_top a:hover {
  color: rgba(255,255,255,1.0);
}

.no_decoration {
  border: none;
}
.no_decoration a {
  border: none;
}
.no_decoration a:hover {
  border: none;
}
.center {
  text-align: center;
}
.images_list {border: none; max-width:100%; max-height:580px; margin-bottom: 0.5em; }
.images_grid {border: none; width:90px; height:67.5px; margin: 0 8px 8px 0; }

/* ─────────────────────────────────────────────────────────────
   Gallery — album grid  (/galleri)
   ───────────────────────────────────────────────────────────── */

/* 3 columns on desktop.
   minmax(0, 1fr) instead of 1fr prevents grid cells from expanding
   beyond their share when images have large intrinsic dimensions. */
.galleri_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5em;
  margin-top: 1.5em;
}

/* Each card is wrapped in an <a> — suppress default link styling */
a.galleri_album_link {
  border: none;
  display: block;
}
a.galleri_album_link:hover {
  border: none;
}

/* Card shell */
.galleri_album_card {
  border: 1px solid #dddddd;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
a.galleri_album_link:hover .galleri_album_card {
  box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
}

/* Cover image: 4:3 crop, fills card width */
.galleri_album_card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: none;
}

/* Shown when an album has no cover photo yet */
.galleri_album_card_no_img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galleri_album_card_caption {
  padding: 0.5em 0.6em 0.6em;
}
.galleri_album_card_name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.galleri_album_card_count {
  font-size: 13px;
  line-height: 18px;
  color: #808080;
}

/* ─────────────────────────────────────────────────────────────
   Gallery — photo grid inside an album  (/galleri/{id})
   ───────────────────────────────────────────────────────────── */

/* Denser grid than the album listing: auto-fills with ~150px min */
.galleri_foto_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75em;
  margin-top: 1.5em;
}

/* Remove default link styling from photo links */
a.galleri_foto_link {
  border: none;
  display: block;
  min-width: 0;
}
a.galleri_foto_link:hover {
  border: none;
}

/* Photo card: aspect-ratio lives on the card itself so the grid cell
   keeps its shape even when the image file is missing. */
.galleri_foto_card {
  overflow: hidden;
  background-color: #f0f0f0;
  aspect-ratio: 4 / 3;
}
.galleri_foto_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  transition: opacity 0.15s ease;
}
a.galleri_foto_link:hover .galleri_foto_card img {
  opacity: 0.85;
}

.mobile_only_tr { display: none; }
.mobile_only { display: none; }
.mobile_100p { width: 49%; display: inline-block;}

.tab_nav a {
  color: rgba(170,0,0,1);
  border-color: rgba(170,0,0,1);
}
.tab_nav {
  margin-bottom: 2em;
}

.selected_tab {
  color: #333333;
  /*border-bottom: 2px solid rgba(170, 0, 0, 1)*/
}

@media only screen and (max-width: 780px) {
  .desktop_only { display: none; }
  .mobile_only { display: initial; }
  .mobile_only_tr { display: table-row;}
  .mobile_100p {width: 100%; display:block}

  .main_content_container {
    width: 100%;
  }
  .main_content_column_left {
    width: 100%;
  }

  .main_content_column_right {
    display: none;
  }

  /* Gallery: 2 columns on narrow screens */
  .galleri_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;
  }
}

/* ─────────────────────────────────────────────────────────────
   Gallery lightbox
   ───────────────────────────────────────────────────────────── */

/* Full-screen backdrop */
#gif_lb {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  cursor: pointer;
}

/* Centred image + caption wrapper */
#gif_lb_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 120px);
  cursor: default;
  text-align: center;
}
#gif_lb_img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  display: block;
  border: none;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

/* Caption: title + tagged persons */
#gif_lb_cap {
  margin-top: 0.6em;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  line-height: 20px;
}
#gif_lb_cap a {
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
#gif_lb_cap a:hover {
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}

/* Prev / next arrows */
.gif_lb_nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* above #gif_lb_wrap which covers full width on mobile */
  color: rgba(255, 255, 255, 0.5);
  font-size: 60px;
  line-height: 1;
  cursor: pointer;
  padding: 0.1em 0.3em;
  user-select: none;
  -webkit-user-select: none;
}
.gif_lb_nav:hover { color: rgba(255, 255, 255, 0.95); }
#gif_lb_prev { left:  0; }
#gif_lb_next { right: 0; }

/* Close button */
#gif_lb_close {
  position: fixed;
  top: 0.4em;
  right: 0.6em;
  z-index: 2; /* above #gif_lb_wrap */
  color: rgba(255, 255, 255, 0.5);
  font-size: 42px;
  line-height: 1;
  cursor: pointer;
  padding: 0.15em;
  user-select: none;
}
#gif_lb_close:hover { color: rgba(255, 255, 255, 0.95); }

@media only screen and (max-width: 780px) {
  /* Image fills nearly full width; arrows overlay the image edges.
     Use 100% (relative to parent) not 100vw to avoid iOS scrollbar-width issue. */
  #gif_lb_wrap {
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
  }
  #gif_lb_img {
    width: 100%;
    max-height: calc(100vh - 100px);
  }
  .gif_lb_nav {
    /* font-size unchanged (visual size stays the same);
       larger padding = larger touch hit area */
    font-size: 38px;
    padding: 0.6em 0.7em;
    background: rgba(0, 0, 0, 0.28);
  }
  #gif_lb_close {
    font-size: 34px;
    padding: 0.4em;
  }
}