/* Global rules: reset */
@import url('reset.css');

/* Global rules for all media types by default */
@media all {
	/* Inital display settings */
	#results, #no-css3mq, #features-list, #no-screen, #additional {
		display: none;
		}

	/* Common settings */
	span {
		white-space: nowrap;
		}
	abbr {
		border-bottom: dotted .1em;
		}
	code {
		font-family: 'PT Mono', Consolas, monospace;
		}
	strong {
		font-weight: bold;
		}
	em, mark {
		font-style: italic;
		}

	/* General content styling */
	.general {
		line-height: 1.5em;
		}
	.general h1, .general h2, .general h3, .general h4 {
		margin: 1.5em 0 .5em;
		font-weight: bold;
		}
	.general h1:first-child, .general h2:first-child, .general h3:first-child, .general h4:first-child {
		margin-top: 0;
		}
	.general h1 {
		font-size: 1.6em;
		}
	.general h2 {
		font-size: 1.4em;
		}
	.general h3 {
		font-size: 1.2em;
		}
	.general h4 {
		font-size: 1em;
		}
	.general p {
		margin-bottom: 1em;
		}
	.general ul, .general ol {
		margin-left: 1.5em;
		}
	.general ul {
		list-style-type: disc;
		}
	.general ol {
		list-style-type: decimal;
		}
	.general ul li, .general ol li {
		margin-bottom: 1em;
		}
	.general li > ul, .general li > ol {
		margin-top: 1em;
		}
	.general pre {
		margin-bottom: 1em;
		padding: 1em;
		border-radius: 1em;
		white-space: normal;
		}
	.general pre code {
		display: block;
		white-space: pre-wrap;
		}
	.general table {
		margin-bottom: 1em;
		}
	.general th {
		font-weight: bold;
		}
	.general th, .general td {
		padding: .25em .5em;
		text-align: left;
		vertical-align: top;
		}
	.general figure {
		margin-bottom: 1em;
		}
	}

/* Rules for the 'screen' media type by default */
@media screen {
	/* Display settings */
	#results, #no-css3mq, #additional {
		display: block;
		}

	/* Common settings */
	body {
		color: #000;
		background: #fff;
		font-family: 'PT Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
		font-size: 16px;
		}
	a, a:link {
		color: #009;
		text-decoration: underline;
		}
	a:visited {
		color: #969;
		}
	a:hover {
		text-decoration: none;
		}
	a:active {
		color: #900;
		}

	/* Layout */
	#page {
		padding: 16px;
		}

	/* General content styling */
	.general h1, .general h2, .general h3, .general h4 {
		color: #666;
		}
	.general h1, .general h2 {
		padding-bottom: .2em;
		border-bottom: solid 1px #ccc;
		}
	.general code {
		padding: 0 .3em;
		background: #f0f0f0;
		border-radius: .3em;
		}
	.general pre {
		border: solid 2px #ccc;
		background-image: -moz-linear-gradient(#fff 75%, #f0f0f0 100%);
		background-image: -webkit-linear-gradient(#fff 75%, #f0f0f0 100%);
		background-image: -o-linear-gradient(#fff 75%, #f0f0f0 100%);
		background-image: linear-gradient(#fff 75%, #f0f0f0 100%);
		}
	.general pre code {
		padding: 0;
		background: none;
		}
	.general table, .general th, .general td {
		border: solid 1px #ccc;
		}
	.general th {
		background: #f0f0f0;
		}
	.general th code {
		background: #ccc;
		}

	/* Some special elements */
	#no-css3mq {
		color: #c00;
		font-style: italic;
		}
	#another-test:before {
		content: '[';
		}
	#another-test:after {
		content: ']';
		}
	.size-data {
		color: #096;
		font-style: italic;
		}
	}

/* Rules for the 'print' media type by default */
@media print {
	/* Display settings */
	#no-screen {
		display: block;
		}

	/* Common settings */
	body {
		color: #000;
		font-family: 'PT Serif', Georgia, 'Times New Roman', Times, serif;
		font-size: 12pt;
		}
	h1, h2, h3, h4 {
		font-family: 'PT Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
		}
	h1, h2 {
		padding-bottom: .2em;
		border-bottom: solid 1pt #000;
		}
	a, a:link, a:visited {
		color: #000;
		text-decoration: underline;
		}

	/* General content styling */
	.general pre {
		border: solid 1pt #000;
		}
	.general table, .general th, .general td {
		border: solid 1pt #000;
		}
	}

/* Rules for any other media types but 'screen' by default */
@media not screen {
	/* Display settings */
	#no-screen {
		display: block;
		}
	}

/* Rules for 'screen' devices with Media Queries support */
@media
	only screen
		and (min-width: 1px) {
	/* Display settings */
	#no-css3mq {
		display: none;
		}
	#features-list {
		display: block;
		}
	.feature:after {
		color: #c00;
		font-style: italic;
		content: '\0020\043d\0435\0438\0437\0432\0435\0441\0442\043d\043e';
		}
	}

/* Test rules for the 'orientation' media feature */
@media
	only screen
		and (orientation: portrait) {
	#orientation:after {
			color: #096;
			content: '\0020\043f\043e\0440\0442\0440\0435\0442\043d\0430\044f';
		}
	}
@media
	only screen
		and (orientation: landscape) {
	#orientation:after {
		color: #096;
		content: '\0020\043b\0430\043d\0434\0448\0430\0444\0442\043d\0430\044f';
		}
	}

/* Test rules for the 'width' media feature */
@media
	only screen
		and (max-width: 320px) {
	body {
		font-size: 12px;
		}
	#width:after {
		color: #096;
		content: '\0020\0434\043e\00a0'  '320' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-width: 321px)
		and (max-width: 480px) {
	body {
		font-size: 14px;
		}
	#width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '321' '\0020\0434\043e\00a0' '480' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-width: 481px)
		and (max-width: 640px) {
	#width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '481' '\0020\0434\043e\00a0' '640' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-width: 641px)
		and (max-width: 800px) {
	#width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '641' '\0020\0434\043e\00a0' '800' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-width: 801px)
		and (max-width: 1024px) {
	#width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '801' '\0020\0434\043e\00a0' '1024' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-width: 1025px)
		and (max-width: 1280px) {
	#width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1025' '\0020\0434\043e\00a0' '1280' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-width: 1281px) {
	#width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1281' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}

/* Test rules for the 'height' media feature */
@media
	only screen
		and (max-height: 320px) {
	#height:after {
		color: #096;
		content: '\0020\0434\043e\00a0'  '320' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-height: 321px)
		and (max-height: 480px) {
	#height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '321' '\0020\0434\043e\00a0' '480' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-height: 481px)
		and (max-height: 640px) {
	#height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '481' '\0020\0434\043e\00a0' '640' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-height: 641px)
		and (max-height: 800px) {
	#height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '641' '\0020\0434\043e\00a0' '800' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-height: 801px)
		and (max-height: 1024px) {
	#height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '801' '\0020\0434\043e\00a0' '1024' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-height: 1025px)
		and (max-height: 1280px) {
	#height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1025' '\0020\0434\043e\00a0' '1280' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-height: 1281px) {
	#height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1281' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}

/* Test rules for the 'device-width' media feature */
@media
	only screen
		and (max-device-width: 320px) {
	#device-width:after {
		color: #096;
		content: '\0020\0434\043e\00a0'  '320' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-width: 321px)
		and (max-device-width: 480px) {
	#device-width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '321' '\0020\0434\043e\00a0' '480' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-width: 481px)
		and (max-device-width: 640px) {
	#device-width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '481' '\0020\0434\043e\00a0' '640' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-width: 641px)
		and (max-device-width: 800px) {
	#device-width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '641' '\0020\0434\043e\00a0' '800' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-width: 801px)
		and (max-device-width: 1024px) {
	#device-width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '801' '\0020\0434\043e\00a0' '1024' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-width: 1025px)
		and (max-device-width: 1280px) {
	#device-width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1025' '\0020\0434\043e\00a0' '1280' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-width: 1281px) {
	#device-width:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1281' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}

/* Test rules for the 'device-height' media feature */
@media
	only screen
		and (max-device-height: 320px) {
	#device-height:after {
		color: #096;
		content: '\0020\0434\043e\00a0'  '320' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-height: 321px)
		and (max-device-height: 480px) {
	#device-height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '321' '\0020\0434\043e\00a0' '480' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-height: 481px)
		and (max-device-height: 640px) {
	#device-height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '481' '\0020\0434\043e\00a0' '640' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-height: 641px)
		and (max-device-height: 800px) {
	#device-height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '641' '\0020\0434\043e\00a0' '800' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-height: 801px)
		and (max-device-height: 1024px) {
	#device-height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '801' '\0020\0434\043e\00a0' '1024' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-height: 1025px)
		and (max-device-height: 1280px) {
	#device-height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1025' '\0020\0434\043e\00a0' '1280' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}
@media
	only screen
		and (min-device-height: 1281px) {
	#device-height:after {
		color: #096;
		content: '\0020\043e\0442\00a0' '1281' '\00a0\043f\0438\043a\0441\0435\043b\0435\0439';
		}
	}