styles.css

/* YUI 3.8.1 (build 5795) Copyright 2013 Yahoo! Inc. */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
.cf:before, .cf:after{content:""; display:table;} .cf:after {clear:both;} .cf{zoom:1;}

html{ height:100%; }

body{ color:#666; font:12px/1.5 arial; text-align:center; min-height:100%; }

label{ cursor:pointer; }
input[type=checkbox]{ margin:-1px 5px 0 0; vertical-align:text-top; }

menu{ position:absolute; top:45px; left:0; padding:10px; margin:0; text-align:left; }
	.walkerController{ background:#EEE; padding:6px; margin:8px 0; width:282px; border-left:8px solid deeppink; }
	.walkerController input[type=checkbox]{ display:none; }{   }
	menu button{ cursor:pointer; margin:0 0 5px 0; font-size:inherit; }
	
	.walkerController input[type=range]{ width:230px; }
		.walkerController input[type=range] + span{ float:right; line-height:2; }
		.stopPlay::after{ content:'Stop'; }
		.walkerController input:checked + .stopPlay::after{ content:'Play'; color:red; }
		.reverse::after{ content:'Go Reverse'; }
		.walkerController input:checked + .reverse::after{ content:'Go Forward'; }
	menu > div:first-of-type .delete{ display:none; }
	menu select option:first-child{ border-bottom:1px solid #CCC; font-weight:bold; }
	menu .delete{ background:#FFF; border:1px solid #CCC; border-radius:30px; color:#666; float:right; font-size:20px; height:20px; line-height:8px; padding:0 0 1px; width:20px; }
	menu .delete:hover{ background:#666; color:#fff; border-color:transparent; }
	.walkerController input{ padding:4px; margin-right:6px; width:70px; vertical-align:middle; }
	menu #addWalker{ padding:5px 20px; }
	
	header{ background:#333; width:100%; height:40px; line-height:36px; position:fixed; top:0; left:0; font-size:14px; }
		a.git, a.by{ position:absolute; top:2px; right:5px; opacity:0.3; -webkit-transition:0.3s cubic-bezier(0.055, 0.6, 0.2, 1); transition:0.3s cubic-bezier(0.055, 0.6, 0.2, 1); }
		a.git{ -webkit-transform:scale(0.6); transform:scale(0.6); -webkit-transform-origin:100% 0 0; transform-origin:100% 0 0; }
		a.git:hover, a.by:hover{ opacity:1; }
			a.git img{  }

		a.by{ text-transform:capitalize; right:auto; left:5px; font-weight:bold; color:#FFF; text-decoration:none; font-family:'Fjalla One', sans-serif; -webkit-transform-origin:0%; transform-origin:0%; }
		.social{ position:absolute; top:-15px; left:5px; -webkit-filter:blur(20px); opacity:0; -webkit-transition:1s ease-out; transition:.6s ease-out; }
		.social.show{ top:5px; opacity:1; -webkit-filter:none; }
		.fbLike{ height:21px; width:100px; border:none; }
		.twitter-share-button{  }
		.social > *{ opacity:.5; -webkit-transition:.2s ease-out; transition:.2s ease-out;  }
		.social > *:hover{ opacity:1; }

/* graphics */
.maze{ display:inline-block; vertical-align:middle; height:537px; width:536px; margin:100px auto; background:url('maze.png') 0 0 no-repeat; position:relative; }
	/* Walker */
	.walker{ position:absolute; z-index:1; font-size:25px; color:deeppink; height:25px; width:25px; text-align:center; line-height:25px; margin:-93px 0 0 28px; text-shadow:-6px 0px 2px rgba(0,0,0,0.3), 7px 0; }
	
#svgPath{ opacity:0; margin:-80px 0 0 39px; -webkit-transition:0.2s; transition:0.2s; }
#svgPath.show{ opacity:1; }