#siteHeaderBar {
	text-align: center;
	background-color: #34212c;
	color: #fbf8ed;
	border-bottom: 5px solid #222;
	margin-bottom: 1em;
}

#siteHeaderBar > ul {
	padding: 0.25em;
	margin: 0;
	display: inline-block;
	list-style-type: none;
}

#siteHeaderBar > ul > li {
	list-style: none;
	display: inline-block;
}


#siteMenu {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	border-radius: 0;
}

#siteMenu:hover,
#siteMenu:focus {
	background: #2a1a23;
	box-shadow: 0 0 0 1px #3c2a34 inset, 0 0 0 0 #3c2a34 inset;
}


#siteMenu > .icon {
	color: #fdfcf6;
}

#siteMenu:hover > .icon.bars,
#siteMenu:focus > .icon.bars {
	color: #FFF;
}


#siteMenu > .menu {
	background: #fdfcf6;
	left: 0 !important;
	right: unset !important;
}

#siteMenu > .menu > .header {
	font-size: 1em;
	color: #559107;
}

#siteMenu > .menu > .item {
	font-size: 1.333rem !important;
	padding: 1rem;
	position: relative;
}

#siteMenu .hoverBox {
	position: absolute;
	inset: 0;
	/* border: 1px solid #998e94; */
	display: none;
}

#siteMenu .item:hover .hoverBox {
	display: block;
}


#siteMenu .hoverBox .boxCorner {
	position: absolute;
	height: 7px;
	width: 8px;
}

#siteMenu .item:hover .hoverBox .boxCorner {
	opacity: 1;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 400ms;
}


#siteMenu .dev {
	background-color: #ffea2e;
	position: relative;
	display: inline-block;
    bottom: 0;
}

.hoverBox .boxCorner.upper {
	top: 3px;
	border-top: 1px solid #998e94;
}

.hoverBox .boxCorner.lower {
	bottom: 3px;
	border-bottom: 1px solid #998e94;
}

.hoverBox .boxCorner.right {
	right: 3px;
	border-right: 1px solid #998e94;
}

.hoverBox .boxCorner.left {
	left: 3px;
	border-left: 1px solid #998e94   /*#52454c #34212c*/ ;
}



.hoverBox .boxCorner.upper.zero-in {
	animation-name: ZeroInTop, fadeInOpacity;
}

.hoverBox .boxCorner.lower.zero-in {
	animation-name: ZeroInBottom, fadeInOpacity;
}

.hoverBox .boxCorner.right.zero-in {
	animation-name: ZeroInRight, fadeInOpacity;
}

.hoverBox .boxCorner.left.zero-in {
	animation-name: ZeroInLeft, fadeInOpacity;
}



@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes ZeroInTop {
	0% {
		top: 0;
	}
	100% {
		top: 3px;
	}
}

@keyframes ZeroInRight {
	0% {
		right: 0;
	}
	100% {
		right: 3px;
	}
}

@keyframes ZeroInBottom {
	0% {
		bottom: 0;
	}
	100% {
		bottom: 3px;
	}
}

@keyframes ZeroInLeft {
	0% {
		left: 0;
	}
	100% {
		left: 3px;
	}
}




#tetrisPageLink:hover #tetrisIcon {
	rotate: 90deg;
	transform: translate(4px, 7px);
}

#tetrisIcon {
	position: relative;
	width: 35px;
	height: 8px;
	display: inline-block;
}

#tetrisIcon .icon.square {
	font-size: 0.4em;
	margin: 0;
	padding: 0;
	position: absolute;
}

#tetrisIcon .icon.bottom {
	bottom: 0;
}

#tetrisIcon .icon.top {
	bottom: 1em;
}

#tetrisIcon .icon.left {
	left: 0;
}

#tetrisIcon .icon.mid {
	left: 1em;
}

#tetrisIcon .icon.right {
	left: 2em;
}




#siteHeaderLogoContainer {
	padding-top: 0.25em;
	position: relative;
}

.parallelogramIndicator {
	display: flex;
	position: absolute;

	transform: skewX(-15deg);
	
	padding: 3px 9px;

	font-size: 12px;
	/* font-style: italic; */
	z-index: 1;

	width: max-content;
	bottom: -18px;
}

.parallelogramIndicator > span {
	transform: skewX(15deg);
}



#experimentalSiteIndicator {
	background-color: #83bb3a;
	left: 65px;
}

#betaSiteIndicator {
	background-color: #bb3a89;
	left: 160px;
}

#authenticatedSiteIndicator {
	background-color: #3495b3;
	left: 209px;
}

#inDevSiteIndicator {
	background-color: #fffb2b;
	left: 209px;
	color: #63552a
}








#siteHeaderLogoAnchor {
	color: #fbf8ed;
	text-decoration: none;
}

#siteHeaderLogoAnchor:hover {
	color: #ddd9d2;
}

#siteHeaderLogoAnchor > h2 {
	width: 176px;
}


#siteLogoImage {
	height: 48px;
	margin: 0;
}

.logoText {
	display: inline-block;
	padding: 0;
	color: #fbf8ed !important;
	vertical-align: middle;
}


#sudokuIconContainer {
	display: inline-block;
	vertical-align: middle;
    width: 31px;
}

#sudokuIcon {
	width: 1em;
	height: 1em;
}


@media only screen and (max-device-width: 480px) {

	#siteHeaderLogoAnchor > .ui.header {
		
		/* THE MOBILE ELEMENT IS TOO NARROW, SOMEHOW,
			TO LET THESE 2 ELEMENTS DISPLAY NEXT TO EACH OTHER  */
		width: 196px;
	}

}


@media only screen and (max-device-width: 410px) {

	#siteHeaderBar {
		text-align: unset;
		padding-left: 48px;
		min-width: 360px;
	}

}