@font-face
{
	font-family:'fixedsysttfmonospaced';
	src:url('../fonts/fixedsys500c-webfont.eot');
	src:url('../fonts/fixedsys500c-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/fixedsys500c-webfont.woff') format('woff'),
		url('../fonts/fixedsys500c-webfont.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}

@font-face
{
	font-family:'Conv_executable';
	src:url('../fonts/executable.eot');
	src:url('../fonts/executable.eot?#iefix') format('embedded-opentype'),
		url('../fonts/executable.woff') format('woff'),
		url('../fonts/executable.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}

@font-face
{
	font-family:'fontello';
	src:url('../fonts/fontello.eot?32712787');
	src:url('../fonts/fontello.eot?32712787#iefix') format('embedded-opentype'),
		url('../fonts/fontello.woff?32712787') format('woff'),
		url('../fonts/fontello.ttf?32712787') format('truetype');
	font-weight:normal;
	font-style:normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before
{
  font-family:"fontello";
  font-style:normal;
  font-weight:normal;
  speak:none;
  display:inline-block;
  text-decoration:inherit;
  width:1em;
  margin-right:0.2em;
  text-align:center;
  font-variant:normal;
  text-transform:none;
  line-height:1em;
  margin-left:0.2em;
}
 
.icon-shuffle-1:before
{
	content:'\e801';
}

html
{
	height:100%;
	overflow:hidden;
}

	body
	{
		height:100%;
		overflow:hidden;
		background-color:#DDD;
		-webkit-font-smoothing:none;
		-moz-osx-font-smoothing:grayscale;
	}

	.courier
	{
		font-family:"Courier";
		font-size:13px;
		line-height:12px;
	}

	.fixedsys
	{
		font-family:"fixedsysttfmonospaced";
		font-size:15px;
		line-height:13px;
	}

	.executable
	{
		font-family:"Conv_executable";
		font-size:16px;
		line-height:12px;
	}

		#background
		{
			color:#BBB;
			position:relative;
			opacity:0;
		}

		section
		{
			width:720px;
			height:405px;
			position:absolute;
			top:47%;
			left:50%;
			margin:-190.35px 0 0 -360px;
		}

			h1
			{
				position:absolute;
				text-transform:uppercase;
				color:#000;
				opacity:0;
			}

			.courier h1
			{
				top:-38px;
				font-size:69px;
			}

			.fixedsys h1
			{
				font-size:66px;
				top:-33px;
				margin-left:-5px;
			}

			.executable h1
			{
				font-size:72px;
				margin-top:-34px;
			}

				h1 em
				{
					color:#F00;
				}

			p
			{
				width:100%;
				text-align:center;
				height:100%;
				position:absolute;
				opacity:0;
			}

			.safari p
			{
				pointer-events:none;
			}

			.courier p
			{
				background-color:#FFF;
				color:#000;
			}

			.fixedsys p
			{
				background-color:#00F;
				color:#FFF;
			}

			.executable p
			{
				background-color:#000;
				color:#C0C0C0;
			}

			section canvas
			{
				position:absolute;
				height:100%;
				width:405px;
				left:50%;
				margin-left:-202.5px;
			}

			section div
			{
				position:absolute;
				height:20px;
				width:100%;
				bottom:-30px;
				opacity:0;
			}

				section button
				{
					display:none;
				}

				div button
				{
					width:20px;
					height:100%;
				}

				button.scheme
				{
					margin-right:10px;
					border:5px solid;
				}

				button.courier
				{
					background-color:#000;
					border-color:#FFF;
				}

					button.courier:hover
					{
						background-color:#FFF;
						border-color:#000;
					}

				button.executable
				{
					background-color:#C0C0C0;
					border-color:#000;	
				}

					button.executable:hover
					{
						background-color:#000;
						border-color:#C0C0C0;	
					}

				button.fixedsys
				{
					background-color:#FFF;
					border-color:#00F;
				}

					button.fixedsys:hover
					{
						background-color:#00F;
						border-color:#FFF;
					}

				button.video
				{
					float:right;
					background-color:#FFF;
					color:#000;
					text-align:center;
					line-height:24px;
					font-size:15px;
				}

					button.video:hover
					{
						background-color:#000;
						color:#FFF;
					}

					.firefox button i
					{
						position:relative;
						top:-2px;
						left:-2px;
					}

			section > button
			{
				position:absolute;
				width:100%;
				height:100%;
				text-align:center;
				font-size:75px;
				opacity:0;
				visibility:hidden;
			}

		body > button
		{
			display:none;
		}

		button.touch
		{
			display:block;
			position:absolute;
			width:100%;
			height:100%;
			top:0;
		}

		#hidden
		{
			position:absolute;
			width:100%;
			height:100px;
			bottom:-100px;
			opacity:0;
			/*top:0;*/
		}

			video
			{
				background-color:#0F0;
				height:100px;
			}

			#hidden canvas
			{
				width:200px;
				height:100px;
				background-color:#F00;
			}

			img
			{
				height:100px;
				display:block;
			}