:root {
  --green-bright: rgb(102 204 102 / 100%);
  --green-light: rgb(102 204 102 / 90%);
  --red-bright: rgb(255 102 102 / 100%);
  --red-light: rgb(255 102 102 / 90%);
}

html {
	margin: 0;
	padding: 0;
	}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	color: #000000;
	font-family: Arial, sans-serif;
	line-height: 1.35;
}

button {
	border: 1px solid #cccccc;
	margin: 0 0.25em;
	cursor: pointer;
}

button[type="reset"] {
	background-color: #ffffff;
	border: 1px solid #cccccc;
	color: #666666;
}

button[type="submit"] {
	background-color: #558888;
	border: 1px solid #cccccc;
	color: #ffffff;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	box-shadow: 0px 0px 2px #cccccc;
}

@media screen {
	body {
		width: 100%;
		font-size: 100%;
		margin: 0px;
		padding: 0px;
	
	}
	
	#events_map_main { /* Google map on event listing page */
		float: right;
		width: 54%;
		margin-left: 1%;
		overflow: hidden;
	}

	#events_map { /* Google map on event listing page */
		clear: left;
		float: right;
		height: auto;
	}
	

}


@page {
	margin-left: 1cm;
	margin-right: 1cm;
}

@media print {
	body {
		font-size: 9pt;
	}

	button {
		display: none;
	}

	#main-guts, #content{ float: none; position: relative; margin: 0;}

	.full_width {
		page-break-before: auto;
		page-break-after: auto;
		page-break-inside: avoid;
		break-before: auto;
		break-after: auto;
		break-inside: avoid;
		
	}
	
	.page { /*roster review*/
		position: relative;
		display: block;
		clear: left;
		float: none;
		page-break-before: always !important;
		page-break-inside: avoid;
		break-before: always !important;
		break-inside: avoid;
		-webkit-region-break-inside: avoid;
		margin-bottom: 20em;
	} 

	#events_map_main { /* Google map on event listing page */
		float: right;
		width: 54%;
		margin-left: 1%;
		overflow: hidden;
	}
	
	#events_map { /* Google map on event listing page */
		
	}

	
}

.hidden {
	display: none !important;
}

a	{
	color: #000000;
	overflow-wrap: anywhere;
	}

a:hover {
	color: #990000;
	}

@media print {
	A	{
	text-decoration: none;
	}
}

h1, h2, h3 {
	margin-top: 0;
	margin-bottom: 0;
	overflow-wrap: anywhere;
	}
	

@media screen {
	.print_only {
		display: none; width: 0px;
	}
	.screen_only {
		display: block;
	}
	.screen_only.inline {
		display: inline;
	}
	
	
	h1 {
		font-size: 1.75em;
		}
	
	h2 {
		font-size: 1.5em;
		}
	
	h3 {
		font-size: 1.25em;
		}
}

@media print {
	.print_only {
		display: inline;
	}
	.screen_only {
		display: none;
	}
	
	
	
	h1 {
		font-size: 13pt;
		}
	
	h2 {
		font-size: 12pt;
		}
	
	h3 {
		font-size: 10pt;
		}


}



.header {
	display: flex;
	width: calc(100% - 20px);
	height: auto;
	padding: 10px;
	background: #669999 url(/art/topper_comp_bg1.png);
}
.header form {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 1em;
}
.header img {
	width: 100%;
	height: auto;
}

.header .logo {
	width: 20%;
	max-width: 139px;
	min-width: 100px;
}
.header .logo img {
	filter: drop-shadow(0 0 0.3em rgb(0 0 0 / 50%));
}

.header .tools {
	flex-grow: 1;
	flex-shrink: 2;
	padding: 0 10px;
}
.header .tools .tagline {
	display: inline-block;
	text-wrap: balance;
	width: fit-content;
	margin-bottom: 1em;
	font-style: italic;
	font-size: 1.25em;
	color: rgb(30 68 153 / 90%);
	filter: drop-shadow(0 0 0.1em rgb(255 255 255 / 60%));
}

.header .tools .tagline .name {
	font-weight: 700;
	font-style: normal;
	color: rgb(237, 32, 39);
}

.header .tools input[type="search"] {
	max-width: 140px;
}
.header .tools .sign-in {
	max-width: 700px;
}

.header .tools .sign-in .info {
	display: flex;
	gap: 0.25em;
	justify-content: space-between;
	max-width: 500px;
	padding: 0.3em 0.6em;
	border: 2px solid rgb(30 68 153 / 90%);
	background-color: rgb(255 255 255 / 100%);
	box-shadow: 6px 6px 4px rgb(0 0 0 / 30%);
	font-size: 1.25em;
	font-weight: 700;
}

.header .tools .sign-in .info .logout-link {
	font-weight: normal;
	font-size: 0.9em;
	color: #777777;
}

.header .tools .sign-in-top {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}
.header .tools .sign-in-top div {
	flex-grow: 1;
}
.header .tools .sign-in-top .sign-up {
	flex-grow: 1;
	text-align: right;
	padding-right: 2em;
	filter: drop-shadow(0 0 0.2em rgb(255 255 255 / 80%));
}
.header .tools .sign-in-top .sign-up a {
	border-bottom: none;
}


.header .tools .sign-in-top .sign-up .emphasis {
	font-weight: bold;
	color: rgb(237, 32, 39);
}

.header .tools input[type="email"], .header .tools input[type="password"] {
	flex-grow: 1;
	width: 20px;
	max-width: 200px;
}
.header .ad {
	flex: auto;
	text-align: center;
}
.header .ad img {
	min-width: 300px;
	max-width: 468px;
	max-height: 140px;
	margin: 0 auto;
}
.header .tools img {
	width: 20px;
	height: 15px;
}
@media screen and (max-width: 700px) {
	.header .tools {
		max-width: 65%;
	}
}

@media screen and (min-width: 999px) {
	.header {
		flex-wrap: wrap;
	}
	.header .ad {
		max-width: 468px;
	}
	.header .tools {
		flex-basis: min-content;
	}
}
@media screen and (max-width: 1000px) {
	.header {
		flex-wrap: wrap-reverse;
	}
	.header .ad {
		margin-bottom: 10px;
	}
}



/* new nav menu */

.navigation {
  position: relative;
	z-index: 300;
	background-color: #99cccc;
}
.navigation:not(.--jsfied) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.navigation .nav__hidden {
  display: none;
}
.navigation .nav__list {
	list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navigation .nav__list a {
	text-decoration: none;
	border: none;
}

.navigation .nav__list li {
	transition: 0.25s;
}

.navigation .nav__list li .nav_ul_submenu {
	display: none;
  position: absolute;
  background-color: #daebeb;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8);
  z-index: 1;
	list-style: none;
	padding: 1em 1em 0 1em;
}

.navigation .nav__list .nav_ul_submenu li {
	/* width: 16em; */
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	/* background: #ffffff;
	border-bottom: 1px solid #aaaaaa; */
}

.navigation .nav__list li:hover {
	background: #bbeeee;
}

.navigation .nav__list li:hover .nav_ul_submenu {
	display: block;
}

.navigation .nav__list > li {
  flex-grow: 1;
}
.navigation .nav__list > li > a {
  padding: 15px;
  white-space: nowrap;
}
.navigation .nav__list > li a {
  color: #990000;
  font-weight: 600;
	font-size: 0.9rem;
  text-transform: uppercase;
  transition: 0.25s;
}
.navigation .nav__list > li a:hover {
	color: #115555;
}

.navigation .nav__list .nav__item__more button {
  padding: 12px 0 0;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.navigation .nav__list .nav__item__more svg {
  width: 20px;
  height: 20px;
  transition: 0.25s;
}
.navigation.nav__active .nav__list .nav__item__more svg {
  transform: rotate(90deg);
}
.navigation .nav__list__more {
	background-color: #daebeb;
	list-style: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  display: none;
  max-width: 100%;
  min-width: 10em;
  margin: 0;
  padding: 5px 0;
  border-radius: 5px;
  box-shadow: 0 0.3em 0.5em rgba(0, 0, 0, 0.15);
  animation: nav-dropdown-animation 0.2s;
}
.navigation .nav__list__more li {
  padding: 10px 15px;
}
.navigation.nav__active .nav__list__more {
  display: block;
}

.navigation .nav__list li .nav__list__more .nav_ul_submenu {
	position: relative;
	box-shadow: none;
}

@keyframes nav-dropdown-animation {
  0% {
    opacity: 0;
    transform: translateY(-1em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* END new nav menu */


/*  new tabs */

.tabset_content {
	display: none;
}
.tabset_content.tabset_content_active {
	display: block;
}

.tabs {
  padding: 1em;
}

[role="tab"] {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 5px 5px 0 0;
  border: 1px solid grey;
  border-bottom: 0;
  padding: 0.2em;
	text-align: center;
}

[role="tab"] a {
	text-decoration: none;
	border-bottom: none;
}

[role="tab"]:hover {
	background: #99cccc;
}

[role="tab"].active {
	color:black ! important;
	background-color: #99cccc;
	font-weight: 600;
}

[role="tab"][aria-selected="true"] {
  z-index: 3;
}

[role="tabpanel"] {
  position: relative;
  padding: 0 0.5em 0.5em 0.7em;
  border: 1px solid grey;
  border-radius: 0 0 5px 5px;
  background: white;
  z-index: 2;
}

[role="tabpanel"]:focus {
  border-color: orange;
  outline: 1px solid orange;
}

/*  new tabs */






#main-topper {
    width: 100%;
    background-color: #669999;
    background: #669999 url(/art/topper_comp_bg_full.png);
    z-index: 200;
  }

#ad_strip {
	background-color: #000000;
	padding: 0 0 4px;
	height: 25px;
}

#ad_column {
	flex-grow: 2;
	flex-basis: 120px;
	min-width: 120px;
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	justify-content: center;
}

#ad_column div {
	flex-basis: 125px;
	max-width: 125px;
	flex-grow: 1;
	height: auto;
	text-align: center;
}

#ad_column div img {
	margin: 0 auto;
	width: 100%;
	height: auto;
}

 /*  END NAVIGATION */


#page-wrapper {
	display: flex;
	gap: 2em;
	flex-basis: 30%;
	flex-wrap: wrap;
	align-items: start;
}



#main-guts {
	flex-grow: 3;
	padding: 0 1em;
}

#main-guts.leagues {
	background: #ffffff url('/dingbats/league_header.png') no-repeat center top;
}

#main-guts.gateway {
	font-size: 76%;
}

@media screen and (min-width: 750px) {
	#main-guts {
		flex-basis: 60%;
	}

	#ad_column {
		border-left: 1px solid #dddddd;
		padding-left: 1em;
	}
}


#footer {
	display: flex;
	gap: 2em;
	width: 100%;
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid #dddddd;
}

#footer .contact {
	flex-basis: 30%; line-height: 180%;
}

#footer .mission {
	flex-shrink: 2; line-height: 150%;
}

#footer .social {
	display: flex; gap: 2em; flex-basis: 30%; flex-wrap: wrap;
}

#footer p {
	margin: 0.25rem;
}

#footer .textBold {
	font-weight: 600;
}

@media screen and (max-width: 500px) {
	#footer {
		flex-wrap: wrap;
	}
	#footer div {
		flex-grow: 1;
	}

	#footer .mission {
		order: -1;
	}
}

@media print {
	.header, .navigation, #footer, #main-topper, #ad_column {
		display: none;
	}

	#main-guts, #main-guts a {
		float: none;
		color: #000000;
		position: static;
		margin: 0;
		page-break-before: auto;
		page-break-inside: auto;
		page-break-after: auto;
		}

		#content {
			margin: 0;
		}
}



.home-top {
	display: flex;
	gap: 2em;
	border: 0px solid #aaaaaa;
	flex-flow: column;
}

@media screen and (max-width: 600px) {
	.home-top {
		flex-wrap: wrap;
	}
}


.home.content {
	flex-grow: 1;
	flex-wrap: wrap;
	display: flex;
	gap: 2em;
	border-bottom: 1px solid #dddddd;
	line-height: 1.65em;
}

.home.content div {
	flex-grow: 1;
}

.home.content a {
	text-decoration: none;
}

.home.content .gray-light {
	color: #999999;
}

.home.content h2 {
	margin: 0.25em 0 0 0;
}

.message-board-and-leagues-map {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
}

.home .news {
	flex-basis: 33%;
	flex-grow: 1;
}

.home .news .article, .home .events .event {
	padding: 0.5em 0 0.5em 0;
	border-bottom: 1px solid #dddddd;
	font-weight: 600;
}

.home .events .event p {
	margin: 0;
}

.home .events .event div {
	font-weight: 400;
}

.home .leagues-map {
	flex-grow: 1;
	min-width: 340px;
	text-align: center;
}

.home.bottom-section {
	margin-top: 2em;
}

#hidden-section, .flex-row.hide, .flex-column.hide {
	display: none;
}

button.hide {
	display: none;
}

button.invisible {
	visibility: hidden;
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.flex-row.padded {
	column-gap: 2%;
}

.flex-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.flex-column.button {
	flex: 0;
	margin: 0 0.5em;
}

.flex-column button:hover {
	background-color: #cccccc;
}

.head {
	flex-basis: 18%;
	text-align: right;
	font-weight: 700;
}

.content {
	flex-basis: 80%;
}

.content .history .flex-row {
	padding: 0.3em 0;
	gap: 1.0em;
	border-bottom: 1px solid #eeeeee;
}
.content .history .flex-column {
	flex-grow: 3;
}

.flex-column.date {
	text-align: right;
}

.flex-row form {
	padding: 10px;
	margin-bottom: 10px;
	background: rgb(209, 217, 205);
}

form .header {
	padding-bottom: 1em;
	font-weight: 600;
}

.content .history .flex-column.tools {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: flex-end;
}
.content .history .flex-column.tools button {
	height: 20px;
}
.content .history .flex-column.tools .material-icons{
	font-size: 1.5rem;
}

.event-toolbar {
	margin: 1em 0;
	padding-bottom: 1em;
	border-bottom: 1px solid #dddddd;
	color: #666666;
}
.event-toolbar a {
	font-weight: 600;
	color: #000000
}

.event-wrapper .event-type {
	font-weight: 600;
	color: #666666;
}


.event-details {
	margin: 0.7em 0; display: flex; gap: 1em; flex-wrap: wrap;
}

.event-details p {
	margin: 0;
}

.event-tabs {
	margin: 0.5em 0;
	display: flex;
	gap: 0.5em;
	border-bottom: 1px solid #dddddd;
}
.event-tabs .tab {
	font-size: 1.15em;
	font-weight: bold;
	border: 0;
}

.event-tabs .tab.active {
	background-color: #99cccc;
}

.event-tabs .tab:first-child {
	margin-left: 0;
}
.event-tabs .tab:last-child {
	margin-right: 0;
}

.event-content .dates.row {
	display: flex;
	gap: 1em;
	padding: 0.25em 0em 0.35em 0em;
	border-top: 1px solid #aaaaaa;
}
.event-content .dates.row .division {
	flex-basis: 24%; flex-shrink: 2; text-align: right; overflow: hidden; text-overflow: ellipsis;
}

.event-content .dates.row .date {
	flex-basis: 74%; flex-grow: 2; min-width: 10em; word-wrap: break-all;
}

.listing {
	display: grid;
	grid-template-rows: auto;
}

.listing.event {
	grid-template-columns: [description] minmax(75px, 2fr) [title] minmax(150px, 3fr) [location] minmax(75px, 1fr);
}

.listing.team, .listing.league {
	grid-template-columns: [name] minmax(75px, 2fr) [location] minmax(75px, 1.4fr) [division] minmax(75px, 0.6fr);
}

.listing.rating {
	grid-template-columns: [team] minmax(100px, 2fr) [location] minmax(78px, 1fr) [rating] minmax(45px, 0.5fr) [updated] minmax(78px, 1fr);
}

.listing.discussion {
	grid-template-columns: [subject] minmax(75px, 2fr) [replies] minmax(25px, 0.5fr) [latest] minmax(75px, 1fr) [views] minmax(25px, .5fr);
}

.listing.thread {
	display: flex;
	flex-wrap: wrap;
}

.listing > div {
	border-top: #dddddd 1px solid;
	padding: 0.75em 0.5em;
}

.listing.discussion > div {
	border-top: 0px;
}

.listing.event .toc {
	background-color: #ccffee;
}

.listing.event .date {
	flex-basis: 130px;
	flex-grow: 1;
}

.listing.event .description {
	display: flex;
	flex-wrap: wrap;
}

.listing.event .description .type {
	flex-basis: 80px;
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.listing.event .description .extra {
	flex-basis: 30px;
	flex-grow: 1;
}

.listing.event .title {
	/* flex-basis: 39%; */
}

.listing .location {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	overflow-wrap: anywhere;
}

.listing .location .city {
	flex-basis: 100px;
	text-align: right;
	flex-grow: 1;
}
.listing .location .state {
	flex-grow: 1;
}

.listing.team .location, .listing.rating .team, .listing.rating .location {
	overflow: hidden;
	text-overflow: ellipsis;
}

.listing.team .division, .listing.league .teams, .listing.rating .rating, .listing.rating .updated {
	text-align: right;
}

.listing.thread .posting, .listing.thread .posting .metadata {
	display: flex;
}
.listing.thread .posting {
	align-items: start;
	flex-grow: 1;
	gap: 1em;
	flex-wrap: wrap;
	border-top: #dddddd 4px solid;
	padding: 0.75em 0;
}

.listing.thread .metadata {
	align-items: start;
	gap: 1em;
	flex-wrap: nowrap;
}
.listing.thread .metadata a {
	font-weight: 600;
	overflow-wrap: normal;
}
.listing.thread .metadata .member-division, .listing.thread .metadata .member-post-count {
	color: #999999;
}

.listing.thread .posting .message {
	overflow-wrap: anywhere;
}

@media screen and (min-width: 750px) {
	
	.listing.thread .posting {
		flex-wrap: nowrap;
	}
	
	.listing.thread .posting .metadata {
		display: block;
		min-width: 125px;
	}
	.listing.thread .posting .message {
		flex-grow: 2;
	}
}


@media screen and (max-width: 1200px) {
	.listing .location {
		gap: 0;
	}
	.listing .location .city::after {
		content: ', ';	
	}
	.listing .location .state {
		text-align: right;
	}
}

.search-results.message {
	overflow-wrap: anywhere;
}

.event-content .details {
	display: flex;
	gap: 1em;
	/* flex-wrap: wrap; */
}
.event-content .details .label, .event-content .details .value {
	flex-basis: 50%;
	flex-grow: 1;
}

.event-content .details .label {
	font-weight: 600;
	text-align: right;
}


.event-content .teams {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
}

.event-content .teams .column {
	flex-basis: 250px;
	flex-grow: 1;
}

.event-content .teams .division {
	margin-top: 1em; margin-bottom: 0.2em; padding-bottom: 0.2em; border-bottom: 2px solid #dddddd;
}

.event-content .teams .column .team {
	display: flex; gap: 0.5em; margin-bottom: 0.2em; padding-bottom: 0.2em; border-bottom: 1px solid #eeeeee;
}

.event-content .teams .column .team .name {
	width: 60%; overflow: hidden; text-overflow: ellipsis;
}

.event-content .teams .column .team .city {
	width: 29%; color: #666666; text-align: right; overflow: hidden; text-overflow: ellipsis;
}

.event-content .teams .column .team .state {
	width: 9%; color: #666666; overflow: hidden; text-overflow: ellipsis;
}

.tournament {
	width: 100%;
	margin: 0;
	padding: 0.7em 0;
	border-top: 1px solid #dddddd;
}

.tournament:hover {
	background: linear-gradient(to bottom, #eeeeee, transparent 20%, transparent), linear-gradient(to top, #eeeeee, transparent 20%)
}

.tournament .overview {
	display: initial;
	flex-basis: 70%;
	line-height: 140%;
}
.tournament .overview .secondary{
	color: #666666;
}

.tournament .payment {
	flex-basis: 20%;
	text-align: center;
	font-size: .7rem;
	color: #333333;
}

.tournament .tools, .flex-column.tools {
	text-align: right;
}

.tournament .tools button {
	background-color: transparent;
	border: 0px;
	margin: 0;
	padding: 0;
}
.tournament .button-row {
	padding-top: 1em;	
}
.tournament button {
	font-weight: 600;
	color: #999999;
}

.tournament button.cta {
	background-color: #669933;
	color: #ffffff;
}

.tournament button.cta:hover {
	background-color: #006600;
	color: #ffffff;
}

.tournament button:hover {
	background-color: #cccccc;
	color: #000000;
}


.tournament .edit > .flex-row{
	padding: 1em 0;
}

.tournament fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}	

.tournament form.margin-1 {
	margin: 0 0.5em;
}

.tournament form.shaded {
	padding: 1em;
	background: #eeeeee;
}

.roster_shell {
	clear: left;
	height: auto;
	}
	
.roster_player_row {
	clear: left;
	width: 100%;
	margin-bottom: 0em;
	padding-top: 0.5em; 
	border-top: 1px dotted #666666;
	}
	
.roster_player_cell {
	float: left;
	height: auto;
	margin-right: 1%;
}

.roster_player_cell.player_name_first {
	width: 10%;
	text-align: right;
}

.roster_player_cell.player_name_last {
	width: 9%;
	font-weight: bold;
}

.roster_player_cell.player_age {
	width: 2%;
	text-align: center;
}

.roster_player_cell.player_contact {
	width: 10%;
	font-size: 90%;
}

.roster_player_cell.registration {
	width: 11%;
	text-align: right;
}

.roster_player_cell.state {
	width: 3%;
	height: auto;
	text-align: center;
}
.roster_player_cell.player_history {
	width: 39%;
	font-size: smaller;
}

.roster_player_cell.player_rating {
	width: 1%;
	text-align: center;
}

.roster_player_cell.edit_tools {
	width: 5%;
	text-align: center;
	margin-right: 0;
}

.roster_player_row .add_player {
	background-color: #bbffcc;
}

.roster_player_row .remove_player {
	background-color: #ffcccc;
}

#active_players .roster_player_row .add_player {
	display: none;
}

#unused_players .roster_player_row .remove_player {
	display: none;
}

.roster_player_row .agreement {
	padding: .05em .1em;
}

.roster_player_row .agreement.incomplete {
	background-color: #FF9999;
}

.roster_player_row .agreement.complete {
	background-color: #66CC66;
}

@media screen {
	.roster_shell {
		float: left;
	}
	.roster_player_row {
		float: left;
	}
	
}

@page {
		margin-bottom: 5em;
		orphans: 2;
		widows: 2;
	}
	
@media print {
	
	.roster_shell {
		position: relative;
		float:none !important; /* This fixes the won't-print-past-page-1 bug re-introduced in FF3.6 */
		margin-bottom: 1em;
		padding-bottom: 1em;
		border-bottom: 2px solid #aaaaaa;
	}
	
	.roster_player_row {
		position: relative;
		float: none;
		page-break-before: auto;
		page-break-inside: avoid;
	}

	.roster_player_cell {
		position: relative;
		page-break-before: avoid;
		page-break-inside: avoid;
	}

	.print-hide {
		display: none;
	}
		
}


#player_dashboard {
	display: flex;
}

.news-item {
	overflow: auto;
}

.message-board.topper {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 0 0.5em 0;
}

.member-details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
}

.member-details .detail {
	flex-basis: 300px;
	flex-grow: 1;

	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.member-details .detail .label {
	flex-basis: 100px;
	text-align: right;	
}

.member-details .detail .value {
	flex-grow: 1;
	font-weight: 600;
}

.listing.discussion .subject, .listing.discussion .replies-count, .listing.discussion .latest-reply-date, .listing.discussion .views {
	padding: 1em 0.25em 0;
	margin: 4px 0 0 0;
	border-top: 4px solid #dddddd;
}

.listing.discussion .subject:not(:nth-child(5)), .listing.discussion .replies-count:not(:nth-child(6)), .listing.discussion .latest-reply-date:not(:nth-child(7)), .listing.discussion .views:not(:nth-child(8)) {
	margin: 16px 0 0 0;
}

.listing.discussion .subject {
	text-wrap: wrap;
	word-break: break-word;
	font-weight: 600;
	font-size: 18px;
	padding-left: 0.5em;
}
.listing.discussion .header-label, .listing .header-label, .listing .header-label a {
	color: #999999;
}

.listing.discussion .header-label.header-label:not(:first-child), .listing.discussion .replies-count, .listing.discussion .latest-reply-date, .listing.discussion .views {
	text-align: right;
}

.listing.discussion .message {
	grid-column: 1 / 5;
	padding: 0.5em 0.5em 0 0.5em;
}

.message-board.next {
	margin: 1em 0;
}

 /*  FOR AJAX functions */

#livesearch { 
	display: block;
	position:relative;
	margin:1em;
	width: auto; 
	z-index:1;
	}
  
#teams_list { 
	margin:1em;
	}

.field-row {
	padding: 5px 0 5px .5em;
	border-bottom: 1px solid #dddddd;
	background: transparent;
	width: 100%;
}

.field-row:hover {
	background: #dddddd;
}

.suggestion { 
	margin: 0.50em 0;
  padding: .5em .25em;
	background: #eeeeee;
}
  
.suggestion:hover { 
	background: #dddddd;
}

.suggestion a { 
	display: block;
	border-bottom: none;
}

#suggestion { 
	margin: 0.25em 0;
	padding: 0.1em;
	background: #eeeeee;
	}
  
#suggestion:hover { 
	background: #dddddd;
}

.suggestion .label-light {
	margin-left: 1em;
	color: #999999;
}

 /*  END AJAX functions */
  
  
  
  
  
  
  
  
.full_width {
	width: 100%;
	height: auto;
	}

.data_row_label {
	float: left;
	height: auto;
	font-weight: bold;
}

.clickable {
	cursor: pointer;
}

.clickable:hover {
	background-color: #eeeeee;
}

@media screen and (max-width: 649px) {
	.column1 {
		clear: left;
		float: left;
		width: 100%;
		margin: 0;
	}
	
	
	.column2 {
		clear: left;
		float: left;
		width: 100%;
		margin-top: 2em;
	}
	
	
	.data_row_label {
		clear: left;
		width: 100%;
		margin: 0;
		text-align: left;
		}
		
	.data_row_label.condensed {
		width: 20%;
		margin-right: 1%;
		text-align: right;
		}
		
	.data_row_content {
		float: left;
		clear: left;
		width: 100%;
		height: auto;
	}

	.data_row_content.condensed {
		clear: none;
		width: 79%;
		}

	}


@media screen and (min-width: 650px) {
	.column1 {
		float: left;
		width: 48%;
		margin-right: 4%;
	}
	
	.column2 {
		float: left;
		width: 48%;
		margin: 0;
	}
	
	
	.data_row_label {
		width: 39%;
		margin-right: 1%;
		text-align: right;
		}

	.data_row_label.condensed {
		width: 9%;
		}


	.data_row_content {
		width: 60%;
		float: left;
		height: auto;
		}
	
	.data_row_content.condensed {
		width: 90%;
		}
}


.data_row_content p {
	margin: .2em 0;
}


.data_row_content input[type=text] {
	width: 95%
}

.disabled {
	color: #000000;
	background-color: #eeeeee;
	border: 1px solid #cccccc;
}

.textinput {
	width: 100%;
}


.margin_top1 {
	padding: .3em 0;
}

.margin_top2 {
	padding: .5em 0;
}

.margin_top3 {
	padding: .7em 0;
}


.ruled_top {
	border-top: 1px solid #dddddd;
}


.ruled_bottom {
	border-bottom: 1px solid #dddddd;
}

.cell {
	float: left;
	height: auto;
}



.option-header {
	font-size: 1.5em;
	font-weight: bold;
}

.option-description {
	font-size: 1.15em;
	line-height: 1.5;
}














/* xx-small | x-small | small | medium | large | x-large | xx-large  */


.white7light { color: #ffffff;}

.white9bold { color: #ffffff; font-weight: bold; line-height: 115%;}

.white9light { color: #ffffff;}

.white12bold { color: #ffffff; font-weight: bold;}

.newsheader { color: #ffffff; font-size: 16px; font-weight: bold;}

.black9light { color: #000000; text-decoration: none;}

.black9bold { color: #000000; font-weight: bold; text-decoration: none;}


.black7light { color: #000000;}


.black7bold { color: #000000; font-weight: bold;}


.black10bold {color: #000000; font-weight: 600;}

.black10light { color: #000000;}

.black12bold { color: #000000; font-size: large; font-weight: bold;}

.black12light { color: #000000; font-size: large;}


.head1 { color: #000000; font-weight: bold;}

.red7bold { color: #660000; font-weight: bold;}

.red12bold { color: #660000; font-size: small; font-weight: bold;}

.red16bold { color: #660000; font-weight: bold;}

.brown9bold { color: #666633; font-weight: bold;}

.news { color: #000000;}

.news2 { color: #000000; font-weight: bold;}

.byline { color: #000000; font-weight: bold;}

.storybig { color: #000000; font-size: 12pt; line-height: 120%;}

.jump { color: #000000; font-weight: bold;}

.mainhead { color: #000000; font-size: 18pt; font-weight: bold;}

.teaserred { color: #990000; font-size: small; font-weight: bold; line-height: 100%; text-transform: uppercase;}

.teaserredlc { color: #990000; font-size: small; font-weight: bold; line-height: 100%; text-decoration: none;}

.teaserredbig { color: #990000; font-size: small; font-weight: bold; line-height: 100%;text-decoration: none;}

.teaserblue { color: #003366; font-size: x-small; font-weight: bold; line-height: 100%;}

.teaserbluebig { color: #003366; font-size: small; font-weight: bold; line-height: 100%; text-decoration: none;}

.teasergreen { color: #336633; font-weight: bold; line-height: 100%; text-transform: uppercase;}

.teaserorange { color: #993300; font-weight: bold; line-height: 100%; text-transform: uppercase;}

.teaserbrown { color: #333300; font-weight: bold; line-height: 100%; text-transform: uppercase;}

.textarea_small { font-size: xx-small; font-weight: normal; font-family: Helvetica, Arial, sans-serif; background-color:#cccc99;}

.textarea_small_light { font-size: xx-small; font-family: Helvetica, Arial, sans-serif; background-color:#cccc99;}

.text_gray { color: #aaaaaa;}

.edit_thank {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	vertical-align: middle;
	width: 50%;
	font-weight: bold;
	text-align: center;
	border:1px solid #cc3300;
	padding: 0.5em;
	background-color: #ffff99;
	}
	
	
.newsstory {
	padding: 4px;
}
	
.newsdescription {
	display: none;
}

.bold {
	font-weight: 600;
}

.color-red {
	color: #990000;
}

#player_photo_div {
	clear: left;
	float: left;
	position: relative;
	max-width: 20%; 
	min-width: 80px;
	height: 100px;
	margin-right: 1em;
}

#player_photo_div #player_photo_edit_link {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}

#player_photo_div #player_photo_edit_display {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}

.player-edit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
}

.player-edit .fields-grid {
	display: grid;
	grid-template-columns: 100px 2fr;
	margin-bottom: 1em;
}

.player-edit .fields-grid > div {
	padding: 0.5em;
	border-bottom: 1px solid #eeeeee;
}

.player-edit .fields-grid > div.label {
	text-align: right;
	color: #666666;
}


.player-edit button[type="button"] {
	background-color: transparent;
	border: 0px;
	margin: 0;
	padding: 0;
}

.player-edit button[type="button"] > span {
	color: #666666;
	font-size: 18px;
}

#player-registration, #player-newspaper {
	padding: 0.5em 1%;
	margin-bottom: 1cap;
}

#player-registration.current, #player-newspaper.current {
	background-color: var(--green-light);
}

#player-registration.expired, #player-newspaper.expired {
	background-color: var(--red-light);
}

#player-registration .details {
	margin: 0.5em 0;
}

#player-registration .details > div {
	display: flex;
	gap: 0.5em;
	padding: 0.1em 0;
}

#player-registration .details .label {
	flex-basis: 12em;
	flex-shrink: 0;
	text-align: right;
	display: flex;
	flex-direction: column;
	color: #444444;
}
#player-registration .details .last-updated .value {
	font-weight: 400;
}

#player-registration .details .value {
	flex-grow: 2;
	font-weight: 600;
}
#player-registration-form-fields input[type="radio"]:checked + label  {
	font-weight: bold;
}

#email-data-bouncebacks, #email-data-unsubscribes {
	display: none;
	}

#player-email-data {
	/* padding-bottom: .5em;
	margin-bottom: .5em; */
}

#player-email-data .container{
margin-top: 0.5em;
}

#player-email-data .item{
	clear: left;
	float: left;
	width: 100%;
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid #dddddd;
	}

#player-email-data span {
	border-right: 1px solid #aaaaaa;
	padding-right: 1em;
	margin-right: 1em;
	}

#player-email-data .header {
	font-weight: 600;
	}
	
#player-email-data .container {
	padding-bottom: 0.5em;
	border-bottom: 1px solid #dddddd;
	}

	#player-email-data .event, #player-email-data .date {
	margin-right: 5%;
	text-align: right;
	}

#player-email-data .event {
	width: 15%;
	}

#player-email-data .date {
	width: 25%;
	}

#player-email-data .subject {
	width: 50%;
	}
	
#player-email-data .details {
	clear: left;
	width: 100%;
	font-size: 80%;
	}


.border-top {
	float: left;
	height: auto;
	width: 100%;
	margin-top: .45em;
	padding-top: 0.45em;
	border-top: 1px solid #aaaaaa;
	}
	


ul.category_list {
	list-style: none;
	margin: 0;
	padding: 0;
	}

ul.category_list ul li {
	list-style: none;
	display: inline;
	margin-left: 1em;
	padding: 0;
	}


.leagues-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.leagues-list .header {
	font-weight: 600;
}

.leagues-list .state {
	flex-basis: 35px;
	text-align: right;
}

.leagues-list .league {
	flex-grow: 1;
	flex-basis: 80%;
}

#league_notes {
    background-color: #FFFFFF;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
    border: 0px solid #aaaaaa;
}

.edit_leaguenotes_link a, .edit_leaguenotes_link a:hover {
    color: #ffffff;
}

#league_notes:hover .edit_leaguenotes_link {
	display: block;
}

.edit_leaguenotes_link {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: none;
    height: 20px;
    opacity: 0.7;
    padding: 6px 23px 0 10px;
    position: absolute;
    left: 0;
    top: 0;
}

#notes_edit_links a {
	color: #FFFFFF;
}


.league_logo {
    background-color: #FFFFFF;
    display: block;
    overflow: hidden;
    position: relative;
    width: 150px;
}

.league_logo a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.league_logo:hover .edit_leaguelogo {
	display: block;
}

.edit_leaguelogo {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: none;
    height: 20px;
    opacity: 0.7;
    padding: 6px 7px 0 23px;
    position: absolute;
    right: 1px;
    top: 0;
}



.store_item {
	float: left;
	width: 28%;
	padding: 0 1% 0 1%;
	background:url('/dingbats/store_item_bg_light.png') top center no-repeat;
}


.store_item:hover {
	background:url('/dingbats/store_item_bg_dark.png') top center no-repeat;
}

.store_item h4 {
	margin-bottom: .5em;
}

.store_item p {
	margin-top: .2em;
}

.store_item_single {
	float: left;
	width: 100%;
	padding: 0 0 .5em 0;
	margin: 0;
	border-bottom: 2px solid #aaaaaa;
	background:url('/dingbats/store_item_bg_light.png') top center no-repeat;
}


.store_item_single:hover {
	background:url('/dingbats/store_item_bg_dark.png') top center no-repeat;
}

.store_item_single h4 {
	margin-bottom: 0;
}
.store_item_single p {
	margin-top: .2em;
}



#dockingbar {
display: flex;
gap: 3em;
background:transparent url(/dingbats/dockingbar_bg.png) left top;
top:0;
left: 0;
padding: .5em 1%;
position:fixed;
height: 50px;
margin-left: auto;
margin-right: auto;
width:100%;
border-bottom: 2px solid #ffffbb;
z-index:500000;
font-size: 76%;
box-shadow: 0 0.3em 0.5em rgba(0, 0, 0, 0.35);
}

@media print {
	#dockingbar {
		display: none;
	}
}

#gateway_activity {
	width: 90%;
	height: auto;
}

/* dialog element */
dialog {
	box-shadow: -5px 5px 10px #000000;
}
dialog::backdrop {
	background-color: #000000;
	opacity: 0.75;
}