html{
	font:3.5vmin/1.4 Arial,Verdana,Helvetica,sans-serif;
	overflow-y:scroll;
	color:#333;
}

body{
	margin:0;
	padding:0;
	background:#4d6eab;
}
@media(orientation:landscape) and (min-height:600px){
	html{
		/*.035*600px*/
		font-size:21px;
	}
}
@media(orientation:portrait) and (min-width:600px){
	html{
		/*.035*600px*/
		font-size:21px;
	}
}

.social{
	float:right;
	margin:0 0 1em .5em;
}
.social::before{
	content:"Share";
	vertical-align:middle;
}

.ad::before{
	content:"Advertisement";
	display:block;
	text-align:center;
	line-height:2.1rem;
}
.ad::before,.social::before{
	font-size:.82rem;
	color:#777;
}

h2{
	font-size:1.5em;
}
h3{
	font-size:1.15em;
}
h4{
	font-size:1em;
}
b,h2,h3,h4{
	color:#113373;
}

h1{
	font-size:1.7em;
	text-align:center;
	text-transform:uppercase;
	color:inherit;
	font-weight:normal;
	margin:0 0 1.5em;
}
b{
	font-weight:normal;
}
label{
	margin-right:1em;
	vertical-align:middle;
}
label:last-of-type{
	margin-right:0;
}
input{
	vertical-align:middle;
	font:inherit;
}
input[type=color]{
	padding:0;
	width:4rem;
	height:1.4rem;
}
output{
	color:#777;
}
fieldset{
	border:1px solid #b4b9c3;
	border-radius:.25em;
	padding:1em;
	background:repeating-linear-gradient(45deg,#f9f9f9 0,#f9f9f9 2em,#fff 2em,#fff 3em);
}
fieldset:nth-of-type(odd){
	background:repeating-linear-gradient(-45deg,#f9f9f9 0,#f9f9f9 2em,#fff 2em,#fff 3em);
}

.disabled{
	opacity:.3;
	pointer-events:none;
}

legend{
	font-weight:bold;
}

fieldset.servicechooser,a.servicechooser{
	display:inline-block;
	font-size:75%;
	margin:0 1em 1em 0;
	padding:0;
	white-space:nowrap;
	border:1px solid #eee;
	background:linear-gradient(rgba(240,240,240,.65),rgba(255,255,255,.8));
}
a.servicechooser{
	text-align:center;
	font-weight:bold;
	color:inherit;
	font-size:60%;
	padding:.5em 1em;
	line-height:2;
	text-decoration:none;
}
fieldset.servicechooser:disabled{
	opacity:.3;
}
fieldset.servicechooser>legend{
	line-height:2;
	width:100%;
	text-align:center;
	padding:0;
	cursor:default;
}
fieldset.servicechooser>legend>span,a.servicechooser>div{
	box-shadow:.2em .2em .5em rgba(0,0,0,.1);
	border-radius:.3em;
	border:.2em solid #fff;
	display:inline-block;
	width:5em;
	height:5em;
}
fieldset.servicechooser:disabled>legend>span{
	background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
}
fieldset.servicechooser>legend:hover>span{
	background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2));
}

fieldset.servicechooser>label{
	margin:.5em;
	font-size:.9em;
	color:#777;
	text-transform:uppercase;
}
button,a.button{
	display:inline-block;
	padding:0 .5em;
	background:#ab2515;
	color:#fff;
	border:1px solid #000;
	border-radius:.2em;
	font:inherit;
	font-weight:bold;
	text-decoration:none;
	line-height:2;
}

@media(min-width:800px){
	.description>div:first-child{
		float:right;
		width:37%;
		margin-left:1em;
		margin-bottom:1em;
	}
	.setupform{
		clear:right;
	}
}
@media(max-width:799px){
	.description{
		display:flex;
		flex-direction:column;
	}
	.description>div+div{
		order:-1;
		margin-bottom:1.5em;
	}
	h1{
		margin-bottom:0;
	}
}
#previewDiv{
	position:-webkit-sticky;
	position:sticky;
	z-index:9;
	top:0;
	background:#f9f9f9;
	border-bottom:1px solid #b4b9c3;
}
#previewDiv>div{
	padding-top:1em;
	padding-bottom:1em;
	background:#113373;
	color:#fff;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
}
#previewDiv label{
	float:right;
	margin:0 0 0 1em;
	font-size:.8em;
}

#previewDiv h3{
	margin:0;
	color:inherit;
}
#previewFrame{
	display:block;
	border:0;
	width:100%;
	height:7em;
}
#codetf{
	height:20em;
	overflow-x:hidden;
	overflow-y:scroll;
	background:#dfe7f5;
	border:1px solid #000;
	word-wrap:break-word;
}
pre{
	font-family:monospace;
	font-size:.75em;
	white-space:pre-wrap;
}
a{
	color:#ab2515;
}

footer{
	text-align:center;
	border-top:1px solid #b4b9c3;
	margin-top:4em;
	color:#999;
}
footer>div{
	margin:2em 0;
}
footer{
	font-size:.82rem;
}
footer a,header a{
	color:inherit;
	text-decoration:none;
}
footer ul{
	list-style:none;
	padding:0;
}
footer ul>li{
	display:inline;
	margin:0 .5em;
}
.wrapper{
	max-width:1200px;
	margin:0 auto;
	padding-top:1rem;
	padding-bottom:.5rem;
	background:#fff;
	box-shadow:0 0 25px rgba(0,0,0,.6);
}
.sheet-width-block{
	margin-left:-1rem;
	width:100%;
}
.wrapper,.sheet-width-block{
	padding-left:1rem;
	padding-right:1rem;
}
.errmsg{
	text-align:center;
	color:#a00;
	font-weight:bold;
}

ul{
	padding-left:1em;
	margin:0;
}
li{
	margin-top:.5em;
}

label{
	white-space:nowrap;
}
label.checkbox{
	display:inline-flex;
	align-items:center;
	cursor:default;
	white-space:normal;
}
label.checkbox:hover>span:first-of-type{
	box-shadow:0 0 .1em rgba(0,0,0,.7);
}
label.checkbox input{
	display:none;
}
label.checkbox span:first-of-type{
	flex:0 0 1ex;
	position:relative;
	margin-right:.4em;
	width:1ex;
	height:1ex;
	border-width:.1em;
	border-style:solid;
}
label.checkbox input:checked+span::after{
	content:"";
	position:absolute;
	bottom:11%;
	left:52%;
	border-bottom:.18em solid #ab2515;
	border-left:.15em solid #ab2515;
	width:1.3ex;
	height:.4ex;
	transform-origin:0 100%;
	transform:rotateZ(-43deg);
}

*[data-focustooltip]{
	position:relative;
}
*[data-focustooltip]:focus::before{
	position:absolute;
	bottom:calc(100% + .8em);
	left:-.7em;
	white-space:nowrap;
	background:#555;
	color:#fff;
	font-weight:normal;
	padding:.7em;
	border-radius:.3em;
	content:attr(data-focustooltip);
}
*[data-focustooltip]:focus::after{
	position:absolute;
	left:30%;
	top:-.85em;
	border-top:.6em solid #555;
	border-left:.6em solid transparent;
	border-right:.6em solid transparent;
	content:"";
}
#layout-cookiemsg{
	background:#ccc;
	color:#222;
	line-height:2em;
	padding:.5em;
	border-bottom:1px solid #027;
	font-size:.75em;
}
#layout-cookiemsg a{
	color:#fff;
	background:#222;
	padding:.32em;
	text-decoration:none;
	font-weight:normal;
	white-space:nowrap;
	cursor:pointer;
	border-radius:3px;
}
th{
	text-align:left;
	white-space:nowrap;
}
td{
	padding:.5em 0 .5em .5em
}