@charset "UTF-8";

html{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration-skip-ink: none;
	font-size:16px;
}

/* ===Bigger root font size for mobile===
	Our design is generally mobile first, but since platforms that don't support media queries are
nearly guaranteed to be desktop, the principle of progressive enhancement demands a desktop-first
approach for this part.

	What we're trying to do here is set a base minimum size for text readability and button usability
and let the layout adapt to that. This minimum readable size correlates well with physical screen size.
Because of virtual pixels it does not correlate well with dpi and it is really unrelated to 
window size on desktop, or screen orientation on mobile.
Most "responsive" techniques seem to hold the layout above all else, accepting lots of space wasting,
creating the usual bad feeling associated with mobile first designs on desktop.

- Media query based on webkit-device-pixel-ratio != 1 worked except
	it breaks zoom on desktop. That is, you'd get mobile styles at anything other than 100% zoom
	(unacceptable)
- Media query based on max-width gives you mobile styles on desktop when the window is small
- Media query based on resolution (dpi) seems useless because it gives wrong platform styles where
	big and small screen DPI ranges overlap (think 4K laptop vs 1080p phone)
- Media query based on max-device-width works but is apparently deprecated.
- Forgetting media queries and setting the font size in vmin units makes it
	scale with window size on desktop (disgusting)
*/
@media screen and (max-device-width: 25cm){
	html{
		font-size:12px;
	}
}

body{
	text-align:center;
}

/* Topbar */
.header
{
	background-color:#FFF;
	height:4.4rem;
	text-align:center;
	border:0;margin:0;padding:0;
	overflow:hidden;
	border-bottom: none;
}

.nav
{
	background-color:#EEE;
	position:relative;
}

.header #logo{
	max-height:4.4rem;
	max-width:calc(100% - 4px);
}

.header>a
{
	font-size:1.16rem;
	height:calc(100% - 2px);
	display:inline-block;
	border:0;margin:0;
	overflow:hidden;
	text-decoration:none;
	color:black;
	padding:0 1em 0 1em;
	border-width:0 0 2px 0;
	border-color:#000;
	border-style:solid;
	margin:0 0.1em 0 0.1em;
	white-space:normal;
	z-index:10;
	position:relative;
}

/*@font-face { font-family: "EmojiFont"; src: url('emojiFont.woff') format('woff'); text-decoration: none; font-style: normal; }*/

/* This could have been on a:first-line instead of needing a 
   separate span, but current chrome and FF add an extra layer of padding
   when you increase the font size of first-line
   
   Note: providing a font which includes our emojis does produce the expected difference
   in IE but still doesn't stop android from doing emoji image replacement
*/
.header>a>span{
	font-size:175%;
	display:table;
	text-align:center;
	margin:0 auto 0 auto;
	/*font-family:'EmojiFont';*/
}

.header .icons a:hover{
	background-color:#DDD;
}

.header a.selectedNav,
.header .navTab:target+a
{
	border-color:#00F;
}

.header>.navTab{
	display:none;
	position:absolute;
	left:0;
	right:0;
	top:4.4rem;
	height:0;
	text-align:center;
	white-space:normal;
	z-index:10;
	background-color:#FFF;
}

.header>.navTab:target{
	height:auto;
	min-height:calc(100% - 8.8em);
	display:block;
	z-index:12;
}

.header>.navTab.navTabDefault{
	height:auto;
	display:block;
	z-index:11;	
}

/* Login */
.auth{
	top:3em;
	border:none;
	text-align:center;
	white-space:normal;
	font-size:200%;
}

.auth input[type=text],
.auth input[type=submit],
.auth input[type=password],
.auth input[type=email]
{
	font-size:inherit;
	width:auto;
	max-width:90%;
	margin-top:0.75em;
}

@media screen and (max-device-width: 25cm){
	.auth input[type=text],
	.auth input[type=submit],
	.auth input[type=password],
	.auth input[type=email]
	{
		font-size:200%;
	}
}

.auth input[type=text],
.auth input[type=password],
.auth input[type=email]
{
	border-radius:0.5em;
	border-width:0;
	background-color:#EEE;
	padding:0.2em;
}

.auth p{
	text-align:left;
	padding:1em;
}

/* Auth menu */
#loginMgmt+label+label{
	float:right;
	font-size:1.16rem;
	height:4.4rem;
	width:4.4rem;
	line-height:normal;
	background-color:rgb(220,220,220);
	border-width:0;
	border-color:rgb(220,220,220);
	border-style:solid;
	z-index:20;position:relative;
}

#loginMgmt+label+label:first-line{
	font-size:175%;
}

#loginMgmt+label+label+div>div{
	font-size:1.5rem;
	margin:0 0.5em 0 0.5em;
}

#loginMgmt+label+label+div>div ul{
	list-style-type:none;
	margin:0;
	padding:0;
	width:100%;
}

#loginMgmt+label+label+div>div li{
	margin:0 0 0.25em 0;
	width:100%;
	background-color:#DDD;
	padding:0.25em;
	border-radius:0.25em 0 0 0.25em;
}

#loginMgmt+label+label+div>div li a,
#loginMgmt+label+label+div>div li input
{
	margin:0;
	padding:0;
	width:100%;
	color:#000;
	text-decoration:none;
	cursor:pointer;
	background:none;
	border:none;
	font-size:inherit;
	text-align:left;
	display:inline-block;
}

#loginMgmt+label+label+div>div li a span{

}

/* Common class lib */
dl.bigDL{
	font-size:150%;
	overflow:hidden;
	max-width:max-content;
}
.bigDL dt{
	background-color:#EEE;
	width:12em;
	display:block;
	float:left;
	clear:left;
	vertical-align:top;
	overflow:hidden;
}
.bigDL dd{
	display:block;
	float:left;
	margin:0 0 0.15em 1em;
	text-align:left;
	overflow:hidden;
}

.centerBody{
	text-align:left;
	margin:0 auto 0 auto;
	width:fit-content;
	width: -moz-fit-content;
	max-width:calc(100% - 2em);
	padding:0 1em 0 1em;
	overflow:hidden;
	overflow-wrap:break-word;
}
.centerBody>*{
	width:auto;
}

.stepIndicator div{
	width: 8em;
	display: inline-block;
	background-color:#EEE;
	border:#EEE 2px solid;
	color:#333;
	margin:0.1em 0.5em 0.5em 0.5em;
	padding:0;
	position:relative;
}

.stepIndicator div:after{
	content:'';
	width: 0; 
	height: 0; 
	border: calc(0.5em + 4px) solid transparent;
	border-left-color:#EEE;
	position: absolute;
	left:calc(100% + 1px);
	top:-2px;
}

.stepIndicator div:before{
	content:'';
	width: 0; 
	height: 0; 
	border: calc(0.5em + 4px) solid transparent;
	border-left-color:#FFF;
	position: absolute;
	left:-2px;
	top:-2px;
}

div.currentStep{
	border:#FF0 2px solid;
	background-color:#FF0;
	color:#000;
}

div.currentStep:after{
	border-left-color:#FF0;
}