@font-face
{
	font-family: 'munro_smallregular';
	font-style:   normal;
	font-weight:  normal;
	src:          url( '/fonts/web/munro-small.ttf' ) format( 'truetype'), url( '/fonts/web/munro-small-webfont.woff2' ) format( 'woff2' ), url( '/fonts/web/munro-small-webfont.woff' ) format( 'woff' );
}



@font-face
{
	font-family: 'munro_regular';
	font-style:   normal;
	font-weight:  normal;
	src:          url( '/fonts/web/munro.ttf' ) format( 'truetype' ), url( '/fonts/web/munro-webfont.woff2' ) format( 'woff2' ), url( '/fonts/web/munro-webfont.woff' ) format( 'woff' );
}



input, select
{
	appearance: none;
	background-color: #eee;
	border: 1px solid #666;
	border-radius: 0.0ex;
	color: #333;
	display: inline-block;
	font-size: 14pt;
	height: 22px;
	padding: 2px 5px;
	margin: 2px 5px;
}

select
{
	height:        28px;
	margin-bottom: 1ex;
	overflow:      hidden;
	width:         124px;
}

input:focus, select:focus
{
	background-color: #fff;
	border-color: #fff;
}

input[type=text]
{
	display: block;
	width:   180px;
}

input[type=number]
{
	margin-left: 0ex;
	width:       5ex;
}



a
{
	color:           inherit;
	text-decoration: none;
}



body
{
	background-color: #aaa;
	color:            #ddd;
	font-family:      'munro_smallregular', monospace;
	font-size:        32pt;
	margin:           0px;
}



@media all and (min-width: 750px)
{
	div.body-content
	{
		background-color: inherit;
		margin:           0px auto;
		width:            750px;
	}

	div.mask-preview
	{
		float:      right;
		text-align: center;
		width:      400px;
	}

	form
	{
		float:       left;
		font-size:   16pt;
		margin-left: 1ex;
	}

	div#loading-overlay
	{
		height: 400px;
	}

	div#loading-spinner
	{
		margin: 116px auto;
	}
}

@media all and (max-width: 719px)
{
	div.body-content
	{
		background-color: inherit;
		margin:           0px auto;
	}

	div.footer
	{
		top: 280px;
	}

	div.mask-preview
	{
		position:   fixed;
		text-align: center;
		width:      400px;
	}

	form
	{
		background-color: #aaa;
		border-top: 1px solid #666;
		box-shadow: 0px -2px 2px #aaa;
		font-size:  16pt;
		padding:    1px 0px;
		position:   relative;
		top:        280px; /* this is 200px + h1-ish */
	}

/*
	form:before
	{
		background-color: #aaa;
		box-shadow: 0px -2px 2px #aaa;
		content:          "\a0";
		display:          block;
		line-height:      1px;
		padding:          2px 0px;
		border-top:       1px solid #666;
	}
*/

	div.mask-preview img
	{
		height: 200px;
		object-fit: cover;
		z-index: 5;
	}

	div#loading-overlay
	{
		height: 200px;
	}

	div#loading-spinner
	{
		margin: 16px auto;
	}

	h1
	{
		margin-bottom: 0px;
	}
}



div.footer
{
	clear:      both;
	font-size:  10pt;
	padding:    8ex 0ex 2ex 0ex;
	position:   relative;
	text-align: center;
}



div#loading-overlay
{
	background-color: rgba( 176, 176, 176, 0.3 );
	display:          none;
	position:         absolute;
	width:            400px;
}



div#loading-spinner
{
	animation:          rotate 0.8s infinite linear;
	border:             20px solid #aaa;
	border-right-color: transparent;
 	border-radius:      50%;
	height:             128px;
	width:              128px;
}
@keyframes rotate
{
	0% {
		transform: rotate(0deg);
	}
  100% {
		transform: rotate(360deg);
	}
}



div.mask-preview img
{
	display: block;
}



div.mask-preview a
{
	background-color: #999;
	border:           1px solid #666;
	color:            inherit;
	display:          block;
	font-size:        28pt;
	margin:           0px auto;
	margin-top:       1ex;
	padding:          0.1ex 0.5ex 0.5ex 0.5ex;
	text-align:       center;
	text-decoration:  none;
	width:            320px;
}



form
{
	margin-top: 2ex;
}



.mask-line
{
	background-color: #aaa;
	font-size: 16pt;
	padding:   1.0ex 0.5ex;
}



.mask-line a
{
	background-color: #999;
	border:           1px solid #666;
	color:            inherit;
	display:          block;
	margin:           0.5ex 0.25ex;
	padding:          0.0ex 0.5ex;
	text-decoration:  none;
	text-align:       center;
}



.template
{
	display: none;
}



h1
{
	background-color: inherit;
	margin-top:       0ex;
	margin-bottom:    0.25ex;
	position:         fixed;
	width:            100%;
}