html { height: 100%; width: 100%; }
	body { height: 100%; width: 100%; background: #0066a1; margin: 0; padding: 0; }
	
	#wrapper  { height: 100%; width: 100%; position: relative; overflow: hidden; }
	
	#sorcerer-hat { height: 1021px; width: 1021px; background: url(hat.png) no-repeat 50% 50%; position: absolute; top: 0;  }
	#thanks-text { height: 66px; width: 249px; background: url(thanks-text.png) no-repeat 50% 50%; position: absolute; top: 0; }
	#separator { height: 40px; width: 665px; background: url(separator.png) no-repeat 50% 50%; position: absolute; top: 0; }
	#messages { height: 100px; width: 740px; position: relative; top: 0; }
	
	#messages:hover  #arrow-right, #messages:hover #arrow-left { visibility: visible; } 
	#messages #arrow-right { height: 30px; width: 36px; background: url(arrow.png) no-repeat 0 0; display: block; visibility: hidden; position: absolute; top: 8px; right: 0px; }
	#messages #arrow-left { height: 30px; width: 36px; background: url(arrow.png) no-repeat 0 -60px; display: block; visibility: hidden; position: absolute; top: 8px; left: 0px;  }
	#messages #arrow-right:hover { background-position: 0 -30px; }
	#messages #arrow-left:hover { background-position: 0 -90px; }
	
	#messages #spotlight { height: 100px; display: table; padding: 0 70px; font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; color: white; }
	#messages #spotlight p { width: 600px; margin: 0; padding: 0; display: table-cell; vertical-align: top; text-align: center; }
	#messages #spotlight p span { color: #ffd016; font-size: 12px; }
	
	#footer { width: 400px; position: absolute; top: 0; left: 0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 11px; color: #add2ed; text-align: center; text-align: center; }
	#footer a { text-decoration: none; color: #add2ed; }
	#footer a:hover { color: white; }