distance.css

		html, body	{
			margin: 0;
			font-family: Lucida Grande, Arial, sans-serif;
		}
		#panel {
			position: fixed;
			width: 100%;
			z-index: 100;
			top: 0;
			-webkit-user-select: none;
			-moz-user-select: none;
			background-color: #999;
			background: -webkit-gradient(linear, left top, left bottom, from(#c2c2c2), to(#8a8a8a));
			border-bottom: solid 1px #666;
			-webkit-box-shadow: 0px 0px 10px #444;
			font-weight: bold;
			text-shadow: 0px 1px 1px #eee;
		}
		#panel, #panel > div > table {
			height: 80px;
		}
		#panel, #panel button {
			font-size: 80%;
		}
		
		#images button {
			border: 0;
			background-color: transparent;
			-webkit-border-radius: 5px;
			padding: 4px 10px;
			outline: 0;
		}
		#images .selected {
			background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 0, 0, 1)), to(rgba(192, 0, 0, 0.8)));
		}
		#images img	{
			max-width: 50px;
			max-height: 50px;
			cursor: pointer;
			vertical-align: middle;
			-webkit-box-shadow: 0px 2px 4px #444;
		}
		#images	{
			overflow: auto;
		}
		
		#distance {
			margin-top: 80px;
			font-size: 0;
			-webkit-user-select: none;
		}
		#distance span {
			margin: 8px;
			position: absolute;
			z-index: 2;
			font-size: 10px;
			color: #ddd;
			text-shadow: 0px 0px 2px #000, 0px 0px 4px #000, 0px 0px 8px #000, 0px 0px 16px #000;
			display: none;
		}
		/* Distances float next to each other */
		#distance div {
			float: left;
		}
		/* log clears that float*/
		#log {
			clear: both;
		}
		/* Clicking a canvas gives in layerX its position */ 
		#distance canvas {
			position: relative;
		}
		
		/* Image loader */
		#sourceImage {
			position: absolute;
			top: -30000px;
			left: -30000px;
		}
		
		/* Bezel displays active brush */
		#bezel {
			position: fixed;
			z-index: 10;
			bottom: 0;
			width: 100%;
			height: 1px;
			opacity: 1;
			display: none;
		}
		#bezel #brush {
			margin: 0 auto;
			margin-top: -400px;
			width: 220px;
			height: 220px;
			border: solid 2px rgba(255, 255, 255, 0.2);
			background-color: rgba(0, 0, 0, 0.2);
			-webkit-border-radius: 25px;
			color: white;
			text-align: center;
			font-size: 20px;
			text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.8);
		}
		#bezel #brush-shape {
			width: 150px;
			height: 150px;
			display: block;
			margin: 0 auto;
			margin-top: 25px;
		}

		#brushes-palette canvas {
			cursor: pointer;
		}
		
		/* Controls and their labels stand on the same line */
		#ui-distance  {
			white-space: nowrap;
		}
		/* UI vertical separator */
		#ui-distance > table > tbody > tr > td {
			border-right: solid 1px rgba(0, 0, 0, 0.3);
			border-left: solid 1px rgba(255, 255, 255, 0.3);
			padding: 2px 8px;
		}
		
		/* Description */
		#text {
			margin: 4em;
			color: #555;
		}
		h1, h2, h3, b {
			color: #000;
			margin-top: 2em;
		}
		code {
			color: black;
			background-color: rgba(0, 0, 0, 0.1);
			white-space: nowrap;
		}
		a {
			color: red;
			text-decoration: none;
		}
		#home {
			display: block; 
			text-align: center; 
			margin-top: 4em; 
			font-family: Futura-MediumItalic; 
			text-decoration: none; 
			letter-spacing: 1em; 
			font-size: 80%;
		}