/*
  subSilver Theme for phpBB
*/


 /* General page style. The scroll bar colours only visible in IE5.5+ */

body {
  margin-left:   5px;
  margin-right:  5px;
  margin-bottom: 5px;

  font-family: Helvetica, "Verdana", "Courier New", Arial, sans-serif;
  background-color: #23237B;
}

/* General font families for common tags */
font,th,td,p { font-family: "Verdana", "Courier New", Arial, Helvetica, sans-serif; }
a:link,a:active,a:visited { color : #3D6A93; }
a:hover		{ text-decoration: underline; color : #809BAE; }
hr	{ height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}


/* This is the border line & background colour round the entire page */
.bodyline {
  background-color: #f7f7f7;
  border: 1px #98AAB1 solid;
}

/* Main table cell colours and backgrounds */
td.row1 { background-color: #333333; }
td.row2 { background-color: #282828; }
td.row3 { background-color: #333333; }

td.topic1 { background-color: #06244A; }
td.topic2 { background-color: #051D3B; }
td.topic3 { background-color: #06244A; }


/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
    background-color: #FFFFFF;
    background-image: url(images/cellpic2.jpg);
    background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th {
  color: black;
  font-size: xx-small;
  font-weight: bold;
  background-image : url('/templates/subSilver/sub_fzero/images/topiclist_header.gif');
}

td.cat,
td.catHead,
td.catSides,
td.catLeft,
td.catRight,
td.catBottom {
  color: black;
  font-size: xx-small;
  font-weight: bold;
  background-image : url('/templates/subSilver/sub_fzero/images/topiclist_header.gif');
}


/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,
td.catHead,
td.catBottom {
  height: 29px;
  border-width: 0px 0px 0px 0px;
}

th.thHead,
th.thSides,
th.thTop,
th.thLeft,
th.thRight,
th.thBottom,
th.thCornerL,
th.thCornerR {
  font-weight: bold;
  border: #6495ED;
  border-style: solid;
  height: 28px;
}

td.row3Right,
td.spaceRow {
  background-color: #333333;
  border: #6495ED;
  border-style: solid;
}

/* Forum Headers */
th.thHead,
td.catHead {
  font-size: 12px;
  border-width: 1px 1px 0px 1px;
}
th.thSides,td.catSides,td.spaceRow	 { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right	 { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft	  { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop	 { border-width: 1px 0px 0px 0px; text-align : center;}
th.thCornerL { border-width: 0px 0px 0px 0px;  text-align : center;}
th.thCornerR { border-width: 1px 1px 0px 0px;  text-align : center;  }

h1,h2	{	font-weight: bold; 	font-size: 22px; 	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;	text-decoration: none; 	line-height: 120%; 	color: black;}


/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #CCCCCC; }
a.gen,a.genmed,a.gensmall { color: #CCCCCC; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover	{ color: #809BAE; text-decoration: underline; }
.gensmall A:link{ color: #CCCCCC; text-decoration: underline; }
.gensmall A:visited { color: #CCCCCC; text-decoration: underline; }
.gensmall A:hover{ color: #809BAE; text-decoration: underline; }


/* The register, login, search etc links at the top of the page */
.mainmenu		{ font-size : 11px; color : #CCCCCC;}
a.mainmenu		{ text-decoration: none; color : #CCCCCC;  }
a.mainmenu:hover{ text-decoration: underline; color : #809BAE; }


/* Forum category titles */
.cattitle		{ font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #000000; }
a.cattitle		{ text-decoration: none; color : #000000; }
a.cattitle:hover{ text-decoration: underline; }


/* Forum title: Text and link to the forums used in: index.php */
.forumlink		{ font-weight: bold; font-size: 12px; color : #CCCCCC; }
a.forumlink 	{ text-decoration: none; color : #CCCCCC; }
a.forumlink:hover{ text-decoration: underline; color : #809BAE; }


/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav			{ font-weight: bold; font-size: 11px; color : #CCCCCC;}
a.nav			{ text-decoration: none; color : #CCCCCC; }
a.nav:link		{ text-decoration: none; color : #CCCCCC; }
a.nav:visited		{ text-decoration: none; color : #CCCCCC; }
a.nav:hover		{ text-decoration: underline; }


/* titles for the topics: could specify viewed link colour too */
.topictitle			{ font-weight: bold; font-size: 11px; color : #CCCCCC; }
a.topictitle:link   { text-decoration: none; color : #cccccc; cursor:pointer;}
a.topictitle:visited { text-decoration: none; color : #cccccc; cursor:pointer;}
a.topictitle:hover	{ text-decoration: underline; color : #809BAE; cursor:pointer;}


/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name			{ font-size : 11px; color : #000000;}
.name A:link   { text-decoration: underline; color : #cccccc; }
.name A:visited { text-decoration: underline; color : #cccccc; }
.name A:hover	{ text-decoration: underline; color : #809BAE; }

/* Location, number of posts, post date etc */
.postdetails		{ font-size: 10px; color: #CCCCCC;}
.postdetails A:link	{ text-decoration: underline; color : #CCCCCC; }
.postdetails A:visited	{ text-decoration: underline; color : #CCCCCC; }
.postdetails A:hover	{ text-decoration: underline; color : #809BAE; }



/* The content of the posts (body of text) */
.postbody { font-size : 12px; color : #cccccc;}
.postcontents {font-size :12px; color : #000000;}
a.postlink:link	{ text-decoration: none; color : #cccccc; }
a.postlink:visited { text-decoration: none; color : #cccccc; }
a.postlink:hover { text-decoration: underline; color : Red;
}


/* Quote & Code blocks */
.code,
.quote {
  font-size: 11px;
  background-color: #FAFAFA;
	border: 1px solid #D1D7DC;
}

.code {
  font-family: Courier, 'Courier New', sans-serif;
  	color: #006600;
}

.quote {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #444444;
  line-height: 125%;
}


/* Copyright and bottom info */
.copyright          { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #CCCCCC; letter-spacing: -1px; }
a.copyright         { text-decoration: none; color: #CCCCCC; }
a.copyright:link    { text-decoration: none; color : #CCCCCC; }
a.copyright:visited { text-decoration: none; color : #CCCCCC; }
a.copyright:hover   { text-decoration: underline; color : #CCCCCC; }


/* Form elements */
input, textarea, select {
  color : #000000;
  font: normal 11px Verdana, Arial, Helvetica, sans-serif;
  border-color : #000000;
  border:1px solid black;
}

/* The text input fields background colour */
input.post, textarea.post, select {
	background-color : #FFFFFF;
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
	background-color : #EFEFEF;
	color : #000000;
	font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main submit button option */
input.mainoption {
	background-color : #FAFAFA;
	font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
	background-color : #FAFAFA;
	font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline {
	background-color: #DEE3E7;
	border-style: none;
}


/* Post body styles */

div#posts_container {
  display: flex;
  flex-direction: column;
}

div.postbody_root, div.postbody_reply {
	color: black;
	font-family: "Verdana", "Courier New", Arial, Helvetica, sans-serif;
	background-color : #F7F7F7;

	display: flex;
	flex-direction: column;
	/* Allow absolute positioning of adminbars relative to this postbody */
	position: relative;

	padding: 12px 35px 28px 35px;
	border-radius: 8px;
}
div.postbody_reply {
  margin-bottom: 2px;
}
div.postbody_root {
	margin-bottom: 15px;
}

div.postbody_reply a.reply_button {			/* hide post button for replies */
	display:none;
}

div.postbody_root img.subject_left {
  /* The subject bar won't look good when shrunk, and this particular element
  of the subject bar has nothing in it to otherwise prevent it from shrinking */
  flex-shrink: 0;
}
div.postbody_reply img.subject_left {
	display:none;
	font-size:10pt;
	font-family: "Verdana", "Courier New", Arial;
}

div.post_title {
  display: flex;
  align-items: center;
}
div.postbody_root div.post_title {
	background-image: url("/templates/subSilver/sub_fzero/images/fz_post_tb.gif");
	color: #ECECEC;
	font-size: 12px;
}
/* Is this class name even used anywhere? */
div.mfo_postbody_reply div.post_title {
	font-weight: bold;
  font-size: 10pt;
  font-family: "Verdana", "Courier New", Arial;
}

div.postbody_reply div.post_subject {
	padding-left: 30px;
	font-weight: bold;
  font-size: 10pt;
  font-family: "Verdana", "Courier New", Arial;
}

div.post_main_row {
  display: flex;
}
div.post_main_column {
  flex-grow: 1;
}

div.post_info {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

	font-size:  8pt;
	white-space: nowrap;
	text-align: right;
}

table.post_signature_table {
	margin-top : 0.5em;
}
div.post_count {
	color: silver;
	font-size: 8pt;
}
div.post_rank {
	color: black;
    font-weight : bold;
    font-size : 8pt;
	font-style : normal;
}
div.post_username {
	font-size : 18px;
	font-style : normal;
	font-weight : bold;
	text-decoration : none;
}
div.post_message {
	padding-top: 6px;
	padding-left: 30px;
	text-align: left;
  font-size: 10pt;
  font-family: "Verdana";
}

td.post_signature {
    font-size : 8pt;
    font-family : "Verdana";
    border-color: black;
	border-style: solid;
	border-width: 1px;
	border-top-width : 1px;
	border-bottom-width : 0px;
	border-left-width : 0px;
	border-right-width : 0px;
}

div.post_part_nt {			/* hide user info for empty posts */
	display:none;
}


/* Top menu styles */

#mfomenu {
  display: flex;
  flex-wrap: wrap;

  margin: 10px;
  padding: 0;

  /* Make the menus pop over the other header stuff, not under */
  z-index: 1;
  /* Ensure the z-index is passed to descendants */
  position: relative;
}
#mfomenu, #mfomenu a {
  font-size: 18px;
  font-family: "Verdana", Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: hsl(0, -1%, 90%);
}

#mfomenu li {
  padding: 0 0.5em;
  list-style: none;
}

#mfomenu li ul {
  display: none;

  /* Don't push other elements when a sub-menu pops up */
  position: absolute;

  white-space: nowrap;
  background-color: #000033;
  padding: 0.5em 0;
}

#mfomenu li:hover ul {
  display: flex;
  flex-direction: column;
}

#mfomenu li ul li a, #mfomenu li ul li hr {
  color: hsl(0, -1%, 75%);
}

#mfomenu a {
  text-decoration: none;
}

#mfomenu a:hover {
  color: #809BAE;
  text-decoration: underline;
}

/* Spoiler styles */
.spoiler { border-right: 1px solid; padding-right: 6px; border-top: 1px solid; margin-top: 10px; padding-left: 6px; padding-bottom: 6px; border-left: 1px solid; padding-top: 6px; border-bottom: 1px solid; position: relative}
.spoilertitlebox { margin-top: -16px }
.spoilertitle { background-color: white }
.spoilertext { display: none }

/* Admin bar styles */
div.adminbar {
  position: absolute;
  /* Line up with the top of the postbody */
  top: 0px;
  /* Javascript makes this start off on the right, with buttons allowing it
  to move between the left and right sides. JS also determines the position
  from top. */
  left: 0px;

  /* Hidden by default; Javascript will un-hide for admin users */
  visibility: hidden;
  white-space: nowrap;
}

div.adminbar a img {
  opacity: .3;
}

div.adminbar a:hover img {
  opacity: .9;
}

/* quote table styles */

table.quote_table {
	width: 94%;
}

td.quote_message {
  padding: 3px;
  border: black 1px solid;
  background-color: #DEDEE3;
  font-size: 10pt;
  font-family: "Verdana";
}

table.quote_table td.quote_name {
  padding: 3px;
  font-weight: bold;
  font-family: Verdana;
  font-size: 10pt;
}

/* Rest of the header after the MFO menu */

div#fzc-header {
  display: flex;
  align-items: center;
  position: relative;  /* Ensure the logo menu links can be absolute positioned */
  background-image: linear-gradient(to bottom, rgb(1, 5, 60), rgb(35, 35, 123));
}
div#fzc-header > * {
  flex-shrink: 0;  /* Don't allow elements to shrink */
}

/* Links next to logo in header */

a.logo-menu-item {
  position: absolute;
  text-decoration: none;  /* No underline */
  text-shadow: 1px 5px 2px black;
  font-family: Verdana;
  font-size: 11px;  /* Trying to make this fit with the logo image */
  font-weight: bold;
  font-style: italic;
  color: rgb(220, 220, 220);
}

/* Game selector in header */

div#SelectedForums {
  display: block;
}
div#UnSelectedForums {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
div#UnSelectedForums > div {
  display: flex;
}

div#SelectedForums > div {
  display: none;
}

div#SelectedForums > div#f4-4,
div#SelectedForums > div#f5-5,
div#SelectedForums > div#f48-48,
div#SelectedForums > div#f49-49,
div#SelectedForums > div#f50-50,
div#SelectedForums > div#f51-51  {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: 40px;
}

div#UnSelectedForums > div > a#f4-4,
div#UnSelectedForums > div > a#f5-5,
div#UnSelectedForums > div > a#f48-48,
div#UnSelectedForums > div > a#f49-49,
div#UnSelectedForums > div > a#f50-50,
div#UnSelectedForums > div > a#f51-51  {
  display: none;
}

/* Social media buttons and game-menu buttons bar */
div#button-bar,
div.home-page-box-header-bar {
  background-image: linear-gradient(
    to bottom,
    hsl(0, -1%, 70%),
    hsl(0, -1%, 60%) 10%,
    white 40%,
    white 60%,
    hsl(0, -1%, 50%) 90%,
    hsl(0, -1%, 60%));
}

div#button-bar {
  display: flex;
  height: 30px;
  align-items: center;
  padding-left: 10px;
  gap: 10px;
}
div#button-bar > a {
  margin: 2px;
}

#button-bar form {
  margin: 0px;
}


/*Topic Preview Tooltip Styles */
#previewtooltip {
 width: 450px;
}

#previewtooltip_content1 {
 width: 450px;
 height: 100px;
 padding-top: 15px;
 background: url("/templates/subSilver/sub_fzero/images/topicpreview_back.gif") no-repeat top left;
}

#previewtooltip_content2 {
 padding: 0px;
 margin:  5px;
 margin-top: 0px;
 font: 11px Verdana;
 color: black;
 width: 440px;
 height: 80px;
}

#previewtooltip_content table.quote_table td.quote_name {
	padding: 3px;
	font-weight: bold;
	font-size: 10pt;
 	color: white;
}


/********** Home Page Styles ***************/
div.contentdiv {
	background-color: #C1D6EE;
	border: 1px solid #111111;
	padding-bottom: 2px;
}

span.contenttext {
	color: #000000;
	font-size: 10pt;
}

div.hiddencontent {
	background-color: #C1D6EE;
	height: 300px;
	display: none;
	width: 100%;
}

span.postedby {
	font-family: verdana;
	font-size: 8pt;
}

.contentlinks          { color : #000000; }
a.contentlinks:link    { text-decoration: none; color : #000000; }
a.contentlinks:visited { text-decoration: none; color : #000000; }
a.contentlinks:hover   { text-decoration: underline; color : #000000; }

div.genhidden { display: none; }

#general1,
#general2,
#general3,
#general4 {
	display: none;
}

#general0 {
	display: block;
}

img.active {
	cursor: pointer;
	margin-left: 10px;
}

img.inactive {
	cursor: default;
	margin-left: 10px;
}

.homecontents {
	padding: 5px;
	padding-top: 30px;
	padding-bottom: 15px;
	width: 171px;
}

#gencontent {
	padding: 5px;
	padding-top:    10px;
	padding-bottom: 15px;
	width: 171;
}

#clcontent   { background:url(/templates/subSilver/sub_fzero_stuff/images/climax_content.gif) repeat-x top left; }
#gplcontent  { background:url(/templates/subSilver/sub_fzero_stuff/images/gpl_content.gif)    repeat-x top left; }
#gxcontent   { background:url(/templates/subSilver/sub_fzero_stuff/images/gx_content.gif)     repeat-x top left; }
#mvcontent   { background:url(/templates/subSilver/sub_fzero_stuff/images/mv_content.gif)     repeat-x top left; }
#xcontent    { background:url(/templates/subSilver/sub_fzero_stuff/images/x_content.gif)      repeat-x top left; }
#snescontent { background:url(/templates/subSilver/sub_fzero_stuff/images/snes_content.gif)   repeat-x top left; }

.topiclist {
	cursor: default;
	height: 182px;
	padding: 5px;
	font: 10pt Verdana;
}

.newspost {
	cursor: default;
	height: 182px;
	padding: 5px;
	overflow: auto;
	display: none;
	font: 10pt Verdana;
}

.newsmidleft {
	background: url(/templates/subSilver/sub_fzero_stuff/images/news_mid_left.gif) repeat-y top left;
	width: 12px;
}

.newsmidright {
	background: url(/templates/subSilver/sub_fzero_stuff/images/news_mid_right.gif) repeat-y top right;
	width: 17px;
}

.newstopleft {
  width: 100%;
}

#newstopleftgen  { background-image:url(/templates/subSilver/sub_fzero_stuff/images/news_top_left_gen.gif);    }
#newstopleftcl   { background-image:url(/templates/subSilver/sub_fzero_stuff/images/news_top_left_climax.gif); }
#newstopleftgpl  { background-image:url(/templates/subSilver/sub_fzero_stuff/images/news_top_left_gpl.gif);    }
#newstopleftgx   { background-image:url(/templates/subSilver/sub_fzero_stuff/images/news_top_left_gx.gif);     }
#newstopleftmv   { background-image:url(/templates/subSilver/sub_fzero_stuff/images/news_top_left_mv.gif);     }
#newstopleftx    { background-image:url(/templates/subSilver/sub_fzero_stuff/images/news_top_left_x.gif);      }
#newstopleftsnes { background-image:url(/templates/subSilver/sub_fzero_stuff/images/news_top_left_snes.gif);   }


.newsbotleft {
	background-image: url(/templates/subSilver/sub_fzero_stuff/images/news_bot_left.gif);
	width: 100%;
}

div#home-page-column-container {
  display: flex;
}

div.home-page-box {
  margin: 15px 8px;
}
div.home-page-box-header-bar {
  border-radius: 10px 10px 0 0;
  padding: 3px 0 3px 8px;
  box-shadow: 4px 4px 8px 0 hsla(0, -1%, -1%, 0.6);
}
div.home-page-box-body, div.home-page-box-without-header {
  background-color: white;
  font-family: Verdana;
  font-size: 0.8em;

  padding: 8px;
  box-shadow: 4px 4px 8px 0 hsla(0, -1%, -1%, 0.6);
}
div.home-page-box-body {
  border-radius: 0 0 10px 10px;
}
div.home-page-box-without-header {
  border-radius: 10px;
}
div.home-page-box-body.links {
  line-height: 2.0em;
}
div.home-page-box-body.links > a,
div.home-page-box-body.news > a {
  text-decoration: none;
}
div.home-page-box-body.links > a:hover,
div.home-page-box-body.news > a:hover {
  text-decoration: underline;
}

div.home-page-ladder-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: hsl(240, 80%, 92%);
}
div.home-page-ladder-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
div.home-page-ladder-group {
  /* Allow children to use absolute positioning */
  position: relative;
}
div.home-page-ladder-group > div.header,
div.home-page-ladders-text {
  padding: 3px 12px;
}
div.home-page-ladder-group > div.body {
  /* Hide until hover. This makes the menus basically inaccessible on mobile,
  but in this case it's not the worst thing ever because you can still access
  individual ladders from ladderhome. */
  display: none;
  /* Pop-over menu; don't push other elements. */
  position: absolute;
  /* Pop over the other header stuff, not under. */
  z-index: 1;
  /* Position at bottom of parent element. */
  top: 100%;

  padding: 3px 12px;
}
div.home-page-ladder-group:hover,
div.home-page-ladder-group > div.body {
  background-color: hsl(240, 80%, 84%);
}
div.home-page-ladder-group,
div.home-page-ladder-group > div.header > a,
div.home-page-ladder-group:hover > div.body {
  display: flex;
  flex-direction: column;
}
div.home-page-ladder-group > div.header > a > span,
div.home-page-ladder-group > div.body > a {
	white-space: nowrap;
}
div.home-page-ladder-group > div.header > a {
  text-decoration: none;
}
div.home-page-ladder-group > div.header > a > span.game-name {
  text-decoration: none;
  font-weight: bold;
  color: hsl(300, 80%, 40%);
}
div.home-page-ladder-group > div.header > a:hover > span.game-name {
  text-decoration: none;
  font-weight: bold;
  color: hsl(300, 80%, 50%);
}
div.home-page-ladder-group > div.header > a > span.game-details {
  font-size: 0.7em;
  color: black;
}
div.home-page-ladder-group > div.header > a:hover > span.game-details {
  font-size: 0.7em;
  color: hsl(0, -1%, 30%);
}
div.home-page-ladder-group > div.body > a {
  text-decoration: none;
}
div.home-page-ladder-group > div.body > a:hover {
  text-decoration: underline;
}


/*****
******
*****/
.block-images img {
  display: block;
}

/* overall_ladder */

.page-overall-ladder span.diff { color: red; font-size: 7pt; }
.page-overall-ladder td.indexcell { padding: 3px; text-align: center; }
.page-overall-ladder td.namecell { padding: 3px; }
.page-overall-ladder div.navigation { margin-bottom: 10px; }
.page-overall-ladder a.nounderline { text-decoration: none; }
.page-overall-ladder img.flag { height: 11px; width: 16px; border: none; }

.scoreboard {
  text-align: left;
  font: 9pt Verdana;
  width: 100%;
  border: 1px black solid;
  border-radius: 10px;
  border-spacing: 0px;
}

.scoreboard .entries tr:nth-child(2n + 1) td { background-color: #e5e5e5;  }
.scoreboard .entries tr:nth-child(2n) td { background-color: #f7f7f7;  }

.scoreboard thead td:first-child { border-radius: 10px 0px 0px 0px; }
.scoreboard thead td:last-child { border-radius: 0px 10px 0px 0px; }

.scoreboard .entries tr:last-child td:first-child { border-radius: 0px 0px 0px 10px; }
.scoreboard .entries tr:last-child td:last-child{ border-radius: 0px 0px 10px 0px; }

.scoreboard thead a { display: block; text-align: center; }
.scoreboard thead a:hover { color: black; }
.scoreboard thead td {
  background: linear-gradient(0deg,
                rgba(100,100,100,1) 0%,
                rgba(255,255,255,1) 40%,
                rgba(255,255,255,1) 60%,
                rgba(100,100,100,1) 100%
              );
  height: 26px;
  font-weight: bold;
  padding: 5px 10px;
}
.scoreboard thead td:hover {
  background: linear-gradient(0deg,
                rgba(120,50,50,1) 0%,
                rgba(255,255,255,1) 40%,
                rgba(255,255,255,1) 60%,
                rgba(120,50,50,1) 100%
              );
}


.scoreboard .entries td:nth-child(n+2) {
  border-left: 1px #a5a5a5 solid;
  padding: 5px;
}

.page-player-summary .championship-performance td { text-align: center; }
.page-player-summary .ladder-performance td { text-align: center; }

.page-championships-ladder .af-ladder .entries a { color: black; }
.page-championships-ladder .af-ladder .entries tr:nth-child(1) td { background-color: yellow; }
.page-championships-ladder .af-ladder .entries tr:nth-child(2) td { background-color: #e5e5e5; }
.page-championships-ladder .af-ladder .entries tr:nth-child(3) td { background-color: #B57600; }

.page-championships-ladder .srpr-ladder .entries a { color: black; }
.page-championships-ladder .srpr-ladder .entries tr:nth-child(1) td { background-color: yellow; }
.page-championships-ladder .srpr-ladder .entries tr:nth-child(2) td { background-color: #e5e5e5; }
.page-championships-ladder .srpr-ladder .entries tr:nth-child(3) td { background-color: #B57600; }

.page-championships-ladder .extra-ladder .entries a { color: black; }
.page-championships-ladder .extra-ladder .entries tr:nth-child(2n + 1) td:nth-child(2) { background-color: #c7e19e; }
.page-championships-ladder .extra-ladder .entries tr:nth-child(2n + 1) td:nth-child(3) { background-color: #c7e19e; }
.page-championships-ladder .extra-ladder .entries tr:nth-child(2n + 1) td:nth-child(4) { background-color: #c7e19e; }
.page-championships-ladder .extra-ladder .entries tr:nth-child(2n + 2) td:nth-child(2) { background-color: #89ca9d; }
.page-championships-ladder .extra-ladder .entries tr:nth-child(2n + 2) td:nth-child(3) { background-color: #89ca9d; }
.page-championships-ladder .extra-ladder .entries tr:nth-child(2n + 2) td:nth-child(4) { background-color: #89ca9d; }

.ladder-home-section {
  display: grid;
  grid-template-areas: "banner ladder-leaders active-players" "banner your-times your-times";
  gap: 10px;
  padding: 10px;

  background-color: #ebf4fe;

  font-family: Verdana;
  font-size: 10px;
  font-weight: bold;
  margin-bottom: 20px;
  border: 1px solid black;
  border-radius: 10px;
}

.ladder-home-section > div {
  border: 1px solid black;
  border-radius: 10px;
  background-color: #f7f7f7;
  box-shadow: 1px 1px 5px black;
}

.ladder-home-section-header {
  text-align: center;
  background: linear-gradient(0deg,
                rgba(150,150,150,1) 0%,
                rgba(255,255,255,1) 40%,
                rgba(255,255,255,1) 60%,
                rgba(150,150,150,1) 100%
              );
  line-height: 26px;
  border-radius: 10px 10px 0px 0px;
  text-transform: uppercase;
}

.ladder-home-image {
  grid-area: banner;
  border-radius: 10px;
  display: block;
  padding: 0px;
  margin: 0px;
}

div.ladder-leaders {
  grid-area: ladder-leaders;
}
div.ladder-leaders > div {
  display: flex;
  justify-content: space-around;
}
div.ladder-leaders > div > div {
  display: flex;
  flex-direction: column;
}
div.ladder-leaders > div > div > span {
  margin: 1px 0;
}

.active-players {
  grid-area: active-players;
}

.active-players .ladder-home-section-body {
  overflow: auto;  /* Use scrollbars as necessary */

  display: flex;
  flex-direction: column;
}

.my-times {
  grid-area: your-times;
}
.my-times .ladder-home-section-body {
  display: flex;
  padding: 10px;
}

.see-also {
  background-color: #ebf4fe;
  font-family: Verdana;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.page-player-ladder .main-content {
  max-width: 960px;
  margin: 0px auto;
}

.page-player-ladder .player-ladder-score {
  display: grid;
  grid-template-areas:
    "course-label course-value splits"
    "lap-label lap-value -";
}

.page-player-ladder .course-label { grid-area: course-label; }
.page-player-ladder .course-value { grid-area: course-value; display: flex; gap: 10px; }
.page-player-ladder .lap-label { grid-area: lap-label; }
.page-player-ladder .lap-value { grid-area: lap-value; display: flex; gap: 10px; }
.page-player-ladder .splits { grid-area: splits; }
.page-player-ladder .scoreboard { margin-bottom: 20px; }

.section-box {
  font: 10pt Verdana; background-color: #f7f7f7; padding: 10px 20px; margin-bottom: 20px; border: 1px black solid; border-radius: 10px;
}

p.header {
  font-weight: bold;
  text-align: center;
}

.page-login, .page-register, .page-password-change, .page-email-change,
.page-username-change {
  & .error { background-color: pink; border: 1px solid red; padding: 3px 0px; }
}

.page-login .section-box.login,
.page-activate .section-box,
.page-activation-resend .section-box,
.page-password-reset .section-box.password-reset,
.page-password-change .section-box.password-change {
  text-align: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.page-register .section-box.register,
.page-profile .section-box {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.page-register img.registration-quiz {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid lightgray;
}


.page-client .record-row {
  display: grid;
  margin-bottom: 2px;
  grid-template: auto auto / repeat(5, auto);
}

.page-client .proof-container {
  padding: 2px;
  border: 1px solid #b53b35;
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: #fffada;
  grid-column-start: 1;
  grid-column-end: span 5;
  display: none;
}

.page-game .main-content {
  max-width: 960px;
  margin: 0px auto;
}

.page-ladder .main-content {
  max-width: 960px;
  margin: 0px auto;
}

.page-rules .rules-content {
  background-color: hsl(0, 0%, 90%);
  padding: 20px;
  border-radius: 20px;
}
.page-rules .rules-content h1 {
  text-align: center;
  font-size: 32px;
}
.page-rules .rules-content h2 {
  text-align: center;
  margin-top: 1em;
  border-top: 1px solid lightgray;
  padding-top: 1em;
}
.page-rules .rules-content h3 {
  margin-top: 1.5em;
}
.page-rules .rules-content p {
  font-family: Arial;
}
.page-rules .rules-content ul,
.page-rules .rules-content ol {
  /*
  Goals:
  - Don't have the top-level lists be too far indented from top-level
    paragraphs, since sometimes rules just start with a list instead of
    being preceded by text.
  - Don't have second-level lists by too far indented from top-level lists,
    or it'll look uneven.
  */
  padding-left: 25px;
}