a:visited {color: #009900; }
a:link {color: #009900; }
a:active {color: #009900; }
a:hover {color: #000099; }

/**********Site layout**********/
	* {
		box-sizing: border-box;
	}
	
	html {height: 100%;}

	body
	{
		border:0px;
		display:flex;
			flex-direction:column;	
		font-family:Arial, Helvetica, sans-serif;
		min-height:100vh;
		margin:0px;
		overflow:auto;
		padding:0px;
		position:relative;
		z-index:-1;
	}
	
	header, footer {
		background-color:#dbe4f0;
	}

	header {
		display:flex;
			justify-content:center;
		flex-grow:0;
		position: relative;
		z-index: 10;
	}
	
		header #header_container {
			display:flex;
				align-items:center;
				flex-direction:row;
				justify-content:center;
			width:100%;
				max-width:750px;			
		}
	
		header #logo {
			display:flex;
				align-items:center;
				flex-direction:row;
			flex-grow:0;
			margin-top:5px;
			margin-bottom:1px;
			padding:0px 5px;
			text-align:center;
		}
			
			header #logo img {
				border-radius:8px;
				margin:0px;
				padding:0px;
			}
	
			header #logo .logo
			{
				border:0;
				height:57px;
			}
			
			header #logo .name {
				font-family:Copperplate, Papyrus, fantasy;
				margin-left:10px;
			}
			
			header #logo::after {
				clear:both;
				content:"";
			}
			
		header #loginbar {
			flex-grow:1;
			font-size:12px;
			padding-right:10px;
			text-align:right;
		}
		
			header #loginbar button,
			header #loginbar .abtn {
				padding:1px 5px;
			}
			
			header #loginbar #loginintro {
				color:#333333;		
			}
			
			header #loginbar #loginlogin {
				display:flex;
					align-items:flex-end;
					flex-direction:column;
					justify-content:flex-end;
				font-size:14px;
			}
			
				#loginbar #loginlogin .loginrow {
					display:flex;
						align-items:center;
						flex-direction:row;
				}
		
				#loginbar #loginlogin .value {
					margin-right:5px;
				}
			
					#loginbar #loginlogin .value button,
					#loginbar #loginlogin .value .abtn {
					
					}
			
					#loginbar #loginlogin .value input {
						width:125px;
					}

			header #loginbar #loginrem {
				color:#333333;
				display:flex;
					flex-direction:row;
				font-size:11px;
				margin-right:55px;
				margin-top:3px;
			}

	footer 
	{
		display:flex;
			align-items:center;
		flex-shrink:0;
		height:30px;
	}
	
		#footer_container {			
			display:flex;
				align-items:center;
				flex-direction:row;
				justify-content:flex-end;
			font-size:13px;
			margin-left:auto;
			margin-right:auto;
			width:100%;
				max-width:750px;
		}
		
			#footer_container #copyright {
				flex-grow:2;
				text-align:right;
			}
		
			#footer_container #season_select {
				flex-grow:1;
				text-align:right;
			}

	#main 
	{
		display:flex;
			flex-direction:column;
		/*padding-bottom: 31px;  /*must be same height as footer */
		flex-grow:1;
		flex-shrink:1;
		position:relative;
		z-index:-1;
		/*padding-top: 50px;  height of header*/
	}
	
	.header_season_current {
		margin-left:auto;
		margin-right:auto;
		margin-bottom:10px;
		
		width:750px;
	}
		
		.header_season_current input[type="submit"] {
			color:orange !important;
		}
		
	.page_container {
		display:flex;
			flex-direction:column;
		height:calc(100% - 31px);  /*reduce by height of footer*/
		margin-left:auto;
		margin-right:auto;
		margin-bottom:10px;
		padding:0px 10px;
		position:relative;
		width:750px;
		z-index:-2;
	}
	
	.page_container_wide {
		min-width:750px;
		padding:0px 10px;
		width:auto;
	}
	
	.page_content
	{
		margin-left:0px;
	}

	.page_header
	{
		margin-left:0px;
		margin-bottom:15px;
	}

	.page_header_title
	{
		font-size:18px;
		font-weight:bold;
	}

	.page_header_subtitle
	{
		color:grey;
		font-size:12px;
		font-style:italic;
		font-weight:normal;
		margin-left:10px;
		margin-top:10px;
	}
	
	@media screen and (max-width: 700px) {
	
		header .icon {
			margin-bottom:5px;
			padding:0px;
		}
	
		header {

		}
	
			header #header_container {
				flex-direction:column;			
			}
	
			header #logo {

			}
			
				header #logo img {

				}
	
				header #logo .logo {

				}
			
				header #logo::after {

				}
			
			header #loginbar {
				padding-right:0px;
				padding:5px 0px;
				text-align:center;
				
				width:100%;
			}
		
				header #loginbar button,
				header #loginbar .abtn {
					
				}
			
				header #loginbar #loginintro {
	
				}
			
				header #loginbar #loginlogin {

				}
			
					#loginbar #loginlogin .loginrow {
						flex-direction:column;
						width:100%;
					}
		
					#loginbar #loginlogin .value {
						margin:3px 0px;
						padding:0px 8px;
						width:100%;
					}
			
						#loginbar #loginlogin .value button,
						#loginbar #loginlogin .value .abtn {
							height:25px;
							width:90%;					
						}
			
						#loginbar #loginlogin .value input {
							width:100%;
						}

				header #loginbar #loginrem {
					flex-direction:row !important;
					justify-content:center;
					margin-right:0px;
				}
		
		.header_season_current {
			width:calc(100% - 10px);
		}
		
			.header_season_current input[type="submit"] {
				width:100%;
			}

		#footer_container {			
			padding:0px 10px;
		}
		
			#footer_container #copyright {
				flex-grow:0;
				text-align:left;
			}

		.page_container {
			min-width:auto;
			width:100%;
		}
		
		.page_container_wide {
			margin-left:0px;
		}
	
		.page_content {
			margin-left:0px;
		}
		
		.page_header {
			margin-left:0px;
		}

		.page_header_title {

		}

		.page_header_subtitle {
			margin-left:0px;
		}
	
	}


/**********Menubar**********/

	nav {
		background-color:aliceblue;
		display:flex;
			align-items:center;
		height:30px;
		margin-bottom:10px;
		position:sticky;
		position:-webkit-sticky;
			top:0px;
	}
	
		nav .menu_dropdown {
			display:flex;
				align-content:space-around;
				align-items:center;
				flex-direction:row;
				justify-content:center;
			margin:3px auto;
			width:700px;
			z-index:1000;
		
		}	
	
	/* Style The Dropdown Button */
	.dropbtn {
		background-color: #5970B2;
		border: none;
		border-radius:0px;
		color:white !important;
		cursor: pointer;
		display:flex;
			align-items:center;
			justify-content:center;
		height:20px;
		font-size: 11px;
		font-weight: bold;
		margin:0px;
			margin-right:2px;
		min-width:75px;
		padding:0px 10px;
		text-align:center;
		text-decoration:none;
	}

	/* The container <div> - needed to position the dropdown content */
	.dropdown {
		position: relative;
		display: inline-block;
		padding:0px;
	}

	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	/* Links inside the dropdown */
	.dropdown-content a {
		color: black;
		font-size: 11px;
		padding: 5px 10px;
		text-decoration: none;
		display: block;

	}

	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {
		background-color: #49A3FF;
		color: #FFF;
	}

	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
		display: block;
	}

	/* Change the background color of the dropdown button when the dropdown content is shown */
	.dropdown:hover .dropbtn {
		background-color: #49A3FF;
	}
	
	.menu_msg_count {
		background-color:red;
		border:1px solid red;
		border-radius:8px;
		display:inline-block;
		font-family:arial;
		font-size:9px;
		margin-left:2px;
		min-width:12px;
		padding:1px 1px;
		text-align:center;
		
		vertical-align:bottom;
	}
	
	/* Special for My Home page */
	
	nav .myhome {

	}
	
	nav .myhome a {
		background-color:orange;
	}
	
	nav .myhome a:hover
	{	
		background-color:darkorange !important;
	}
	
	@media screen and (max-width: 700px) {
	
		nav {
			height:auto;
			position:relative;
		}
	
			nav .menu_dropdown {
				align-items:center;
				flex-direction:column;
				justify-content:center;
				margin-bottom:5px;
				width:calc(100% - 10px);
			}
		
		.dropbtn {
			margin-right:0px;
			margin-bottom:5px;
			padding:0px;
		}

		/* The container <div> - needed to position the dropdown content */
		.dropdown {
			width:100%;
		}

		/* Dropdown Content (Hidden by Default) */
		.dropdown-content {

		}

		/* Links inside the dropdown */
		.dropdown-content a {

		}

		/* Show the dropdown menu on hover */
		.dropdown:hover .dropdown-content {
			display: none;
		}
	
	}	
	
/**********Tabbar**********/
	#tabbar {

	}
	
	
	.tabbar
	{	
		display:flex;
			flex-direction:row;
			justify-content:center;
		font-size:11px;
		font-weight:bold;
		z-index: 30;
		
		margin-left:auto;
		margin-right:auto;
		margin-bottom:10px;
		margin-top:10px;
		min-height:25px;
		width:550px;

	}

	.tabbar div {

	}

	.tabbar div a
	{	
		background-color: SkyBlue;
		border-radius:10px;
		color: #FFF;
		display: flex;
			align-items:center;
			justify-content:center;
		height:20px;
		margin:0px;
			margin-right:2px;
		min-width:75px;
		padding: 4px 10px;
		text-decoration: none
	}

	.tabbar div a:hover
	{	
		background-color: DodgerBlue;
	}
	
	.tabbar div .selected {
		background-color: DodgerBlue;
	}
	
	.tabbar .myhome_link {
		padding-left:10px;
	}
	
	.tabbar .myhome_link a {
		background-color:orange;
	}
	
	.tabbar .myhome_link a:hover
	{	
		background-color:darkorange;
	}
	
	.tabbar_count {
		background-color:red;
		border:1px solid red;
		border-radius:8px;
		display:inline-block;
		font-family:arial;
		font-size:7px;
		margin-left:2px;
		min-width:10px;
		padding:1px 1px;
		text-align:center;
		
		vertical-align:bottom;
	}
	
	@media screen and (max-width: 700px) {

		.tabbar {
			flex-direction:column;
			justify-content:flex-start;
			/*margin-bottom:5px;*/
			height:auto;
			padding:0px 10px;
			width:calc(100% - 10px);
		}

		.tabbar div {
			margin-bottom:5px;
		}
		
		.tabbar div a {
			min-width:100%;
			margin-right:0px;
			
		}
		
		.tabbar .myhome_link {
			padding-left:0px;
		}
	
	}
	
/***********Page Header***********/	
	#message_affirm
	{
		color:green;
		text-align:center;
		font-size:14px;
	}

	#message_alert
	{
		color:red;
		text-align:center;
		font-size:14px;
	}
	
	.message_affirm
	{
		color:green;
		text-align:center;
		font-size:14px;
		margin-bottom:10px;
	}
	
	.message_alert
	{
		color:red;
		text-align:center;
		font-size:14px;
		margin-bottom:10px;		
	}
	
	@media screen and (max-width: 700px) {
		
		.message_affirm {
			max-width:100%;
		}
	
		.message_alert {	
			max-width:100%;		
		}	
	
	}
	
/**********Alert Messages**********/

	/*modal css and html from https://iiiji.com/css-only-modal-lightbox-pop-up-on-page-load/*/
	/*above website is gone; utilized https://www.w3schools.com/howto/howto_css_modals.asp (How TO - CSS/JS Modal)*/
	.modal {
		z-index: 10000;
		display: block;
		padding-top: 100px;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0,0.5);	
		
		opacity:1;
		
		/*transition:opacity 0.4s, z-index 0.6s;*/
		transition-property:opacity, z-index;
		transition-duration:0.4s;
		transition-timing-function:ease;
		transition-delay:0s;
	}
	
		.modalshow {
			z-index:10000 !important;
			opacity:1;
		}
	
	.modal-content {
		background-color: #fff;
		border-radius:8px;
		font-size:15px;
		margin: auto;
		max-width: 500px;
		outline: 0;
		padding: 0;
		position: relative;
		
		display:flex;
			align-items:center;
	}
	
	.modal-img {
		display:flex;
			align-items:center;
			justify-content:center;
		width:80px;
	}
	
		.modal-img img {
			height:65px;
		}
	
	.modal-inner { 
		padding: 20px 30px;
	}
	
	.modal-close {
		background: #ccc;
		border-radius:0px 8px 0px 8px;
		cursor:pointer;
		padding: 6px 10px;
		position: absolute;
			right: 0;
			top: 0;
		user-select: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
		-webkit-touch-callout: none;
	}
	
	.modal-note {
		color:grey;
		font-size:13px;
		margin-left:10px;
	}
	
	/*.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}*/
	
	@media screen and (max-width: 700px) {
		
		.modal-content {
			max-width: 90%;
		}
		
		.modal-inner { padding: 15px 15px; }
		
		.modal-note {margin-left:0px;}
		
	}
	
/**********Header Pages**********/
	
	.index_bar {
		display:none;
	}

	.index_block {
		background-color:AliceBlue;
		border-bottom:1px solid lightgrey;
	}
	
	.index_block .i_row {
		border-width:1px 1px 0px 1px;
			border-style:solid;
			border-color:lightgrey;
		display:flex;
			align-items:center;
			flex-direction:row;
		padding:5px;
	}
	
	.index_block .i_row label {
		flex-grow:1;
		font-size:12px;
	}
	
	.index_block .i_row .i_value {
		flex-basis:175px;
		flex-grow:0;
		flex-shrink:0;
		font-size:13px;
	}
		
	@media screen and (max-width: 700px) {
	
		.index_bar {
			display:flex;
		}

		.index_block .i_row {
			align-items:flex-start;
			flex-direction:column;
		}
		
		.index_block .i_row label {
			margin-left:5px;
		}
		
		.index_block .i_row .i_value {
			flex-basis:0px;
			margin-bottom:5px;
		}	
	}
	
/**********About**********/

	.about_header {
		margin-left:25px;
	}
	
	.about_content {
		color:darkblue;
		font-size:14px;
		margin-left:50px;
		
	}
	
	@media screen and (max-width: 700px) {
		
		.about_header {
			margin-left:0px;
		}	

		.about_content {
			margin-left:0px;
		}	
	}
	
/**********Generic Block Row Display**********/

	.gblock {
		border:1px solid grey;
		margin-left:auto;
		margin-right:auto;
		
		max-width:650px;
	}
	
	.gblock_row {
		display:flex;
			align-items:center;
			flex-direction:row;
		margin-bottom:10px;
	}
	
		.gblock_row label {
			color:grey;
			flex-grow:0;
			font-size:14px;
			min-width:200px;
			padding-right:5px;
			text-align:right;
		}
		
		.gblock_row .value {
			flex-grow:1;
			font-size:14px;
		}
		
		.gblock_row .note {
			color:grey;
			font-size:10px;
			max-width:500px;
		}
		
	.gblock_row_center {
		justify-content:center;
		max-width:700px;
	}
	
	.gblock_section {
		margin-bottom:20px;
	}
	
		.gblock_section .title {
			background-color:grey;
			color: white; 
			font-size: 11px;
			margin-bottom:10px;
			max-width:700px;
			padding:5px;	
		}
	
	@media screen and (max-width: 700px) {

		.gblock {
			border:0px;
			width:100%;
		}
	
		.gblock_row {
			align-items:flex-start;
			flex-direction:column;
		}
	
			.gblock_row label {
				margin-bottom:5px;
				padding-right:0px;
				text-align:left;
				width:100%;
			}
			
			.glbock_row input[type="submit"] {
				width:100%;
			}
		
			.gblock_row .value {
				width:100%;
			}
			
			.gblock_row .note {
				color:grey;
				font-size:10px;
				max-width:100%;
			}
			
				.gblock_row .value input {
					width:100%;
				}
				
		.gblock_row_center {
			max-width:100%;
		}
				
		.gblock_section {
			
		}
	
			.gblock_section .title {
				max-width:100%;	
			}
	
	}
	
/***********General Formatting***********/
	button,
	.button,
	input[type=submit] {
		border:1px solid lightgrey;
		background-color:white;
		border-radius:6px;
		color:black;
		cursor:pointer;
		display:inline-flex;
			align-items:center;
			justify-content:center;
		font-family:Arial, Helvetica, sans-serif;
		font-weight:normal;
		font-size:11px;
		padding:2px 8px;
		text-align:center;
		text-decoration:none;
	}
	
	input { font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:3px; text-indent:1px;}

	form {
		margin-bottom: 0px;
		padding:0px;
	}
	
	select {
		background-color:white;
		border:1px solid lightgrey;
		border-radius:4px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:11px;
	}

	textarea { font-family:Arial, Helvetica, sans-serif; font-size:11px; padding:3px; }
		
	.anchor {
		display:block !important;
		min-height:150px !important;
		margin-top:-150px !important;
		position:relative;
		visibility:hidden !important;
		width:0px;
		z-index:-10;
	}

	.bold {font-weight:bold;}
	.italic {font-style:italic;}
	.normal {font-weight:normal;}
	
	.center
	{
		margin-left:auto;
		margin-right:auto;
		text-align:center !important;
	}
	
	.img_new {
		display:inline-block;
		margin:0px;
		height:10px;
		width:30px;
	}
	
	.img_player_icon
	{
		margin:0px;
		height:12px;
	}
	
	.img_sort
	{
		border:0px;
		width:10px;
		height:10px;
	}
	
	.left { text-align:left !important; }

	.cBlack {color:black;}
	.cBlue {color:blue !important;}
	.cDarkBlue {color:darkblue;}	
	.cDarkGreen {color:darkgreen;}
	.cGreen {color:green;}
	.cGrey {color:grey;}
	.cLightGrey {color:lightgrey;}
	.cRed {color:red !important;}
	.cTax {color:darkred;}
	.cDerby {color:rgb(209, 72, 79);}

	.font10 {font-size:10px;}		
	.font11 {font-size:11px;}
	.font12 {font-size:12px;}
	.font13 {font-size:13px;}
	.font14 {font-size:14px;}

	.logo_name {
		display:flex;
			align-items:center;
	}

	.logo_team {
		border:1px solid lightgrey;
		border-radius:4px;
		display:flex;
			align-items:center;
			justify-content:center;
		height:100px;
		text-align:center;
		width:100px;
	}

		.logo_team a {
			display:flex;
				align-items:center;
			max-width:95px;
			max-height:95px;
		}

		.logo_team img {
			border-radius:4px;
			max-width:90px;
			max-height:90px;
		}
	
	.logo_team_none {
		align-items:center;
		color:lightgrey;
		font-size:20px;
	}
	
	.logo_team_tiny {
		background-color:white;
		border:0.5px solid lightgrey;
		border-radius:2px;
		display:inline-flex;
		height:17px;
		padding:0.5px 1px;
		width:17px;		
	}
	
		.logo_team_tiny a {
			color:lightgrey;
			display:inline-flex;
			text-decoration:none;
			max-height:15px;
			max-width:15px;
		}
	
		.logo_team_tiny img
		{
			border-radius:2px;
			max-width:15px;
			max-height:15px;
		}
		
	.logo_team_tiny_none {
		color:lightgrey;
		font-size:5px;
	}
	
		.logo_team_tiny_none span {
			text-decoration:none !important;
		}
	
	.margint10 { margin-top:10px; }
	
	.marginl5 { margin-left:5px; }
	.marginl10 { margin-left:10px; }
	.marginl20 { margin-left:20px; }
	.marginl25 { margin-left:25px; }
	.marginl35 { margin-left:35px; }
	.marginl50 { margin-left:50px; }
	.marginl150 { margin-left:150px; }
	
	.noborder { border:none !important; }

	.padl10 { padding-left:10px; }

	.table_container {
		margin-bottom:10px;
	}
	
	.txt_center { text-align:center; }
	.txt_left { text-align:left !important; }
	.txt_right { text-align:right; }
	
	.w45 { width:45px; }
	.w75 { width:75px; }
	
	@media screen and (max-width: 700px) {
		
		.table_container {
			border:1px solid lightgrey;
			overflow-x:auto;
		}
	}