/* --- Reset --- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .clear{float:none;clear:both} html {box-sizing: border-box;} *, *:before, *:after {box-sizing: inherit;}

html, body {
	width: 100%;
	height: 100%;
	
	font-family: 'Share Tech Mono', monospace;
	
	font-size: 3.6vw;
	overflow: hidden;
}

html, body, small {
	color: rgba(0,0,0,.35);
}

html {
	display: table;
	padding: 1.5vw;
	background: #FFF;
}

body {
	display: table-cell;
	vertical-align: middle;
	
	background: rgb(13,170,128);
	background: -moz-linear-gradient(-45deg,  rgba(13,170,128,1) 1%, rgba(9,124,98,1) 100%);
	background: -webkit-linear-gradient(-45deg,  rgba(13,170,128,1) 1%,rgba(9,124,98,1) 100%);
	background: linear-gradient(135deg,  rgba(13,170,128,1) 1%,rgba(9,124,98,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0daa80', endColorstr='#097c62',GradientType=1 );
}

#view-title {
	position: absolute;
	top: 3vw;
	left: 3vw;
	font-size: .35em;
	background: #FFF;
	
	padding: .75vw;
	color: rgb(13,170,128);
}


small {
	font-size: .5em;
}

.message {
	margin: 0 15%;
	text-align: center;
	padding: .5em 0;
	
	
}

.align-center {
	text-align: center;
}

table {
	margin: 0 auto 1em auto;
}

table td {
	padding: 0 .25em;
	text-align: right;
	color: #FFF;
}

table tr:nth-child(even) td {
	opacity: .65;
}

table tr td:last-child {
	text-align: left;
}




#userAgent {
	font-size: .5em;
}






.hr,
.vr {
	display: block;
	margin: 0;
	background: #FFF;
	position: absolute;
}

.hr {
	height: 1px;
	width: calc(50vw - 4vw);
	bottom: 4vw;
	right: 4vw;
}

.hr span,
.vr span  {
	display: block;
	height: 10px;
	width: 1px;
	margin: 0;
	background: rgba(255,255,255,1);
	position: absolute;
	top: 0;
}

.hr span:first-child {
	left: 0;
}

.hr span:nth-child(2) {
	right: 0;
}

.vr {
	height: calc(50vh - 4vw);
	width: 1px;
	bottom: 4vw;
	right: 4vw;
}

.vr span  {
	height: 1px;
	width: 10px;
}	

.vr span:first-child {
	top: 0;
	right: -10px;
}

.vr span:nth-child(2) {
	right: -10px;
	top: calc(100% - 1px);
}



.devicePixelRatio {display: none;}



#viewportOrientation td:first-child span:before {
	content: 'Landscape';
	display: inline;
}

@media only screen and (orientation: portrait) {
	.message {
		margin: 0 auto;
	}
	
	#viewportOrientation td:first-child span:before {
		content: 'Portrait';
	}
}


#resolutionDpi td:first-child span:before {
	content: '?';
}

@media (max-resolution: 71dpi) {
	#resolutionDpi td:first-child span:before {
		content: '< 72';
	}
}

@media (resolution: 72dpi) {
	#resolutionDpi td:first-child span:before {
		content: '72'!important;
	}
}

@media (resolution: 96dpi) {
	#resolutionDpi td:first-child span:before {
		content: '96'!important;
	}
}

@media (resolution:110dpi) {
	#resolutionDpi td:first-child span:before {
		content: '110'!important;
	}
}

@media (resolution: 192dpi) {
	#resolutionDpi td:first-child span:before {
		content: '192'!important;
	}
}

@media (resolution: 240dpi) {
	#resolutionDpi td:first-child span:before {
		content: '240'!important;
	}
}

@media (min-resolution: 240dpi) {
	#resolutionDpi td:first-child span:before {
		content: 'min. 240';
	}
}




@media (-webkit-min-device-pixel-ratio: 1) {
	#resolutionDpi td:first-child span:before {
		content: '> 1';
	}
	.dpi {display: none;}
	.devicePixelRatio {display: inline;}
}

@media (-webkit-device-pixel-ratio: 1.2) {
	#resolutionDpi td:first-child span:before {
		content: '1.2';
	}
	.dpi {display: none;}
	.devicePixelRatio {display: inline;}
}


@media (-webkit-device-pixel-ratio: 1.3) {
	#resolutionDpi td:first-child span:before {
		content: '1.3';
	}
	.dpi {display: none;}
	.devicePixelRatio {display: inline;}
}




/*
@media (min-resolution: 193dpi) and (max-resolution: 239dpi) {
	#resolutionDpi td:first-child span:before {
		content: '193 – 239';
	}
}
*/




@-webkit-keyframes fadeIn {from {opacity: 0}to {opacity: 1;}}
@keyframes fadeIn {from {opacity: 0}to {opacity: 1;}}

#view-title,
.message {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}