@import url('/prx/000/http/www.quirksmode.org/quirksmode.css');

@-ms-viewport {
	width: device-width;
}

* {
	box-sizing: border-box;
}

body {
	padding-top: 50px;
	padding-bottom: 50px;
}

h3:not(:first-of-type) {
	border-top: 3px double grey;
	padding-top: 10px;
	margin-top: 40px;
}

div:not(.floater) p {
	padding: 10px;
	font-size: 120%;
}

div:empty:before {
	content: "Untestable";
	background-color: #006699;
	color: white;
	padding: 10px;
	display: block;
	font-size: 120%;
}

.correct {
	display: none;
	background-color: #00882D;
	color: white;
}

.test {
	display: none;
	color: #00882D;
	padding: 0 10px;
}

.noSupport {
	background-color: #CB000F;
	color: white;
}

.console {
	width: 40%;
	border: 1px solid black;
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
}

.console div {
	max-height: 100px;
	overflow: auto;
	margin: 10px 0;
	border: 1px solid;
}

@media all and (max-width: 775px) {
	body {
		padding-left: 5%;
		padding-right: 5%;
		max-width: 525px;
		width: 100%;
		margin: 0 auto;
	}
	
	div.floater {
		margin-right: 0;
		width: 35%;
		min-width: 150px;
		margin-left: 5%;
	}
	
	.console {
		position: static;
		margin-top: 30px;
		width: 100%;
	}
	
}