#header{
	width:100%;
	z-index:1;
}
.header_panel{
	width:100%;
	height:32px;
	padding-left:2em;
	background-color:var(--header-bar-bg-color);
	box-sizing: border-box;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: scroll;
	display: flex;
	scrollbar-width:none;
}
.header_image_internal{
	width:100%;
	height:140px;
	background-image:var(--header-banner-img);
	background-size:70% auto;
	background-position:50% 24%;
	background-repeat:no-repeat;
}
.header_image{
	width:100%;
	height:140px;
	background-color:var(--header-bg-color);
	background-image:var(--header-bg-image);
	background-size:var(--header-bg-size);
	background-repeat:var(--header-bg-repeat);
}
.header_button_bg{
  mask: url(https://jettsecret.neocities.org/img/samples/test.svg);
  mask-image: url(https://jettsecret.neocities.org/img/samples/test.svg);
  -webkit-mask: url(https://jettsecret.neocities.org/img/samples/test.svg);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  width: 100%;
  width: 26px;
  height: 32px;
  background: var(--header-nav-bar-color);
  mask-size: cover;
  -webkit-mask-size: cover;
  position:relative;
	/*background-image:url(../imgs/ui/buttons.svg);
	background-position:0;
	background-repeat:no-repeat;
	background-size:auto 100%;*/
}
.header_button_text{
  color:var(--header-nav-text-color);
  padding:0 1em 0 2em;
  text-align:center;
  position:relative;
  left:0;top:-32px;
  height: 32px;
  width:fit-content;
  display:flex;
  align-items:center;
	/*background-image:url(../imgs/ui/buttons.svg);
	background-position:0;
	background-repeat:no-repeat;
	background-size:auto 100%;*/
}

.header_button{
	display:inline-block;
	height:32px;
	width:fit-content;
}

.header_button.current_page>.header_button_bg{
	background:var(--color-primary-accent);
}
.header_button.current_page>.header_button_text{
	color:var(--color-primary-accent);

}

.header_button_text>span{
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */


}
.header_button:not(.current_page):hover > .header_button_bg,.activeDD > .header_button_bg{
	background:var(--header-nav-hover-text-color);
}
.header_button:not(.current_page):hover > .header_button_text,.activeDD > .header_button_text{
	color:var(--header-nav-hover-text-color);
}


.header_dropdown{
	background-color:var(--color-main);
	display:flex;
	width:100%;
	flex-direction:row;
	box-sizing:border-box;
	padding-left:2em;
	height:26px;
}
.dropdown_item{
	padding:.2em .5em;
	padding-top:calc(.2em + 2px);
	color:white;
	font-size:10pt;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

}
.dropdown_item:hover{
	color:var(--header-hover-text-color);
	background-color:var(--header-hover-bg-color);
}

#nulldd{
	background-color:transparent;display:flex;
}

#crest{
	position:absolute;
	left:2em;
	top:22px;
}
#crest>img{
		width:auto;
		height:120px;
}
.header_menu_display{
	display:none;
}

#mobile_menu{
	width:100%;
	height:100%;
	background-color:white;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:100;
	display:none;
	justify-content:center;background-image:url(http://orig11.deviantart.net/2dd2/f/2012/275/7/7/black_and_grey_stripe_pattern_by_wiizkiid-d5gm6uv.png);
	background-size:16px;
}

.mobile_menu_wrapper{
	width:90%;
	display:flex;
	align-items:center;
	flex-direction:column;
	margin-top:160px;
	box-shadow:2px 2px 6px #222222dd;
	height:fit-content;
}
.noscroll{
	overflow-y:hidden;
}
.mobile_menu_item{
	background-color:#eee;
	width:100%;
	height:36px;
	font-size:14pt;
	padding:0 .5em;
	display:flex;
	box-sizing:border-box;
	align-items:center;
}
.mobile_menu_close{
	width:90%;
	position:absolute;

	width:90%;
	margin-top:20px;

	height:44px;
}
.mobile_menu_close>button{
	float:left;
	border:none;
	background-color:var(--color-primary-dark);
	padding:4px 4px;
	min-width:36px;
	min-height:36px;
	color:white;
	box-shadow:2px 2px 6px #222222dd;
	
}
.mobile_menu_close>button:not(.close){
	padding:4px 12px;
	
}

.mobile_menu_close>button.close{
	background-image:url('/imgs/ui/close.png');

	background-size:50%;
	background-position:50%;
	background-repeat:no-repeat;
}

.mobile_menu_item > .mobile_open_submenu_button{
	width:26px;
	height:26px;
	border:none;
	background-color:transparent;
	margin-right:4px;
	font-size:16pt;
	background-image:url('/imgs/ui/submenuClosedButton.png');
	background-size:90%;
	background-position:50%;
	background-repeat:no-repeat;
	
}
.submenu_open_root:not(.mobile_menu_wrapper) > .mobile_open_submenu_button {
	background-image:url('/imgs/ui/submenuOpenButton.png');
	filter:invert(1);
}
.mobile_sub_menu{
	display:none;
	margin:0;
	padding:0;
	width:100%;
	grid-template-columns:auto auto;
	flex-direction:column;
	height:auto;
	
}
.mobile_sub_menu.mobile_submenu_open{
	display:flex;
}
.mobile_sub_menu.gridly.mobile_submenu_open{
	display:grid;
}
.mobile_submenu_item
{
	padding:.25em 1.5em;
	width:100%;
	box-sizing:border-box;
	display:flex;
	align-items:center;
}
.mobile_submenu_item:nth-child(even){
 background-color:#eee;
}
.mobile_submenu_item:nth-child(odd){
 background-color:#ddd;
}
.mobile_sub_menu.gridly>.mobile_submenu_item:nth-child(4n){
 background:linear-gradient(-90deg,#eee,#ddd);
 justify-content:flex-end;
 border-left:solid #eee 1px;
}
.mobile_sub_menu.gridly>.mobile_submenu_item:nth-child(4n+1){
 background:linear-gradient(-90deg,#eee,#ddd);
 border-right:solid #ddd 1px;
}
.mobile_sub_menu.gridly>.mobile_submenu_item:nth-child(4n+3){
 background:linear-gradient(90deg,#eee,#ddd);
 border-right:solid #eee 1px;
}
.mobile_sub_menu.gridly>.mobile_submenu_item:nth-child(4n+2){
 background:linear-gradient(90deg,#eee,#ddd);
 justify-content:flex-end;
 border-left:solid #ddd 1px;
}
.submenu_open_root:not(.mobile_menu_wrapper) > a {
	color:white;
	cursor:pointer;
}
.submenu_open_root:not(.mobile_menu_wrapper) > a:hover,.submenu_open_root:not(.mobile_menu_wrapper) > a:active {
	color:var(--color-primary-accent);
}

.submenu_open_root:not(.mobile_menu_wrapper) {
	background-color:var(--color-main);
}
#acctbar{
	background:var(--account-bar-gradient);
	border-bottom:var(--color-primary-dark) 1px ridge;
	box-shadow: 0px 2px 4px var(--color-primary-accent);
	width:100%;
	box-sizing:border-box;
	height:18px;
	z-index:1000;
	position:absolute;
	color:var(--account-bar-text);
	
}
#acctbar>a{
	color:var(--account-bar-text);
	font-size:8pt;
	position:relative;
	top:2px;
	float:right;
	margin-right:12px;
	
}

.noshow{
	visibility:hidden;
	
}
.colspan{
	grid-column: 1 / -1;
}


#pick_team{
	position:fixed;
	left:5em;
	right:5em;
	top:4em;
	bottom:4em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:1em .5em;
	align-items:center;
	background-color:var(--main-content-bg-color);
	border-radius:2em;
	box-shadow:0 0 .5em var(--color-primary-accent);
	
}
.pt_details{
	padding:.5em 1em;
	width:100%;
}
.pick_team_group{
	display:grid;
	grid-template-columns:auto auto auto auto auto;
	width:80%;
	grid-column-gap:1em;
	grid-row-gap:.25em;
}

.team_selector{
	width:85%;
	justify-self:center;
	padding:.5em 1em 0em .5em;
	border-radius:1em;
}

.team_selector:hover{
	background-color:#42424266;
}
.team_selector.selected{
	background-color:var(--color-primary-accent);
}
.team_selector>img{
	width:100%;
	height:auto;
	
}

.team_selector>div{
	width:100%;
	text-align:center;
	min-height:22px;
}

.hidden{
display:none !important;
}

@media (max-aspect-ratio:3/2){
	
	html:not([data-rendering="1"]){
		.header_button_text{
			font-size:10pt;
		}

		.header_panel{
			padding-left:.5em;
		}
		#crest{
			left:.35em;
			top:30px;
		}
		#crest>img{
				height:100px;
		}
	}
	
}
@media (max-aspect-ratio:1/1){
	html:not([data-rendering="1"]){
		.header_image_internal{
			background-size:100% auto;
		}
		.header_dropdown{
			display:none;
		}
		
		#crest{
			top:18px;
			display:flex;
			justify-content:center;
			width:100%;
			
			left:0;
			
		}
		
		#crest>img{
				height:120px;
		}

		.header_button{
			font-size:8pt;
		}
		
		.header_button{
			display:none;
		}
		.header_menu_display{
			display:flex;
			width:32px;
			height:32px;
			align-items:center;
		}
		.header_menu_display>button{
		
			height:30px;
			width:32px;
			font-size:14pt;
			padding-top:-4px;
			border-radius:0px;
			border:none;
			background:url('/imgs/ui/openmenu.png');
			background-repeat:no-repeat;
			background-size:70%;
			background-position:50%;
		}
		
		.header_menu_display>button:hover,
		.header_menu_display>button:active{
			filter:invert(1);
			background-color:#aaaaaa;
			
		}
		#acctbar{display:none;}

		#header{
			position:sticky;
			top:0;
		}
		
		#mobile_theme_selector
		{
			position:absolute;
			bottom:.5em;
			left:0;right:0;
			width:100%;
			display:flex;
			justify-content:center;
		}
		
		#pick_team{
			left:1em;
			right:1em;
			bottom:auto;
		}
		.pick_team_group{
			width:100%;
			grid-template-columns:auto auto auto auto;
			grid-column-gap:.1em;
			grid-row-gap:.15em;
		}
		.team_selector{
			padding:.35em .5em 0 .5em;
		}
		.team_selector>div{
			font-size:10pt;
		}
		.pt_overflow_1{
			margin-left:100%;grid-column:1/2
		}
		.pt_overflow_2{
			margin-left:100%;grid-column:3/4
			
		}
	}
	
}

@media (max-aspect-ratio:1/2){
	
	html:not([data-rendering="1"]){
		#pick_team{
			top:1em;
		}
		.pick_team_group{
			grid-template-columns:auto auto auto ;
			grid-column-gap:.05em;
			grid-row-gap:.15em;
		}
		.pt_overflow_1{
			margin-left:0%;grid-column:auto;
		}
		.pt_overflow_2{
			margin-left:0%;grid-column:2
			
		}
		.team_selector{
			padding:.15em .25em 0 .25em;
		}
		.team_selector>div{
			font-size:9pt;
		}
		.pt_details>p{
			font-size:9pt;
		}
	}	
}