div#footer { padding: 0 0 36px; }

div#pageHeader h1 { font-size: 45px; margin-bottom: 4px; }
div#pageHeader p { font-size: 18px; line-height: 24px; margin-right: 25%; margin-bottom: 20px; }
div#pageHeader p small { font-size: 14px; line-height: 18px; opacity: .75; }

div.zurb.divider { background-image: url(/playground/osx-dock/zurb-divider.png); }

div#wooly-zurbian-card { background: url(/images/playground/wooly-zurbian/background.jpg) no-repeat; height: 960px; -webkit-border-radius: 9px; -moz-border-radius: 9px; -webkit-box-shadow: 0px 5px 15px rgba(0,0,0,0.5); -moz-box-shadow: 0px 5px 15px rgba(0,0,0,0.5); border: none; padding: 30px; position: relative; text-align: center; width: 820px; margin: 0 auto 80px auto; border: solid 2px #a1b901; }
h4#ages { position: absolute; right: 30px; top: 170px; font-weight: normal; }

@-webkit-keyframes shake {
	from {
		-webkit-transform: translateX(0px);
	}
	15% {
		-webkit-transform: translateX(-10px);
	}
	30% {
		-webkit-transform: translateX(-10px);
	}
	45% {
		-webkit-transform: translateX(10px);
	}
	70% {
		-webkit-transform: translateX(-10px);
	}
	85% {
		-webkit-transform: translateX(10px);
	}
	to {
		-webkit-transform: translateX(0px);
	}
}

div#wooly-zurbian-card.clear { -webkit-animation-name: shake; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: 1; }

ul.faces { margin: 0 0 -30px 0; padding: 0; }
ul.faces li { display: block; margin: -6px 0 12px; padding: 0 auto; }
ul.faces li a { background: #fff no-repeat; display: block; width: 70px; height: 80px; margin-left: 40px; border: solid 1px #ccc; border-width: 1px 1px 2px 2px; border-color: #ccc #ccc #999 #999; overflow: hidden; }
ul.faces li a:hover { border-color: #ccc #ccc #555 #555; }
ul.faces li p { font-size: 11px; line-height: 1.2; margin-top: 16px; }

ul.faces li a#yourFaceHere { background: url(/images/playground/wooly-zurbian/blank-face.gif) #f9f9f9 no-repeat; cursor: pointer; }
ul.faces li#yourFaceForm { position: relative; text-align: center; }
ul.faces li#yourFaceForm button { height: 30px; background: url(/images/playground/wooly-zurbian/upload-btn.png) no-repeat; width: 80px; position: relative; left: 2px; text-indent: -999px; cursor: pointer; padding: 0; }
ul.faces li#yourFaceForm button:active { background-position: 0px -30px; }

form#uploadForm { position: absolute; background: white; display: block; width: 300px; top: 0px; left: -60px; height: 24px; padding: 10px; border: solid 1px #777; border-width: 1px 1px 2px 2px; z-index: 200; }
form#uploadForm button#submitNewImage { position: absolute; left: 232px; top: 7px; }
form#uploadForm img#fileUploadSpinner { position: absolute; left: 288px; top: 10px; }

div#currentFace { background: #fff; border: solid 1px #aaa; width: 460px; height: 510px; position: relative; }
div#currentFace div.bg { background: url(/images/playground/wooly-zurbian/face-bg.png); width: 460px; height: 510px; position: absolute; left: -10px; bottom: -10px; z-index: 0;  }
div#currentFace div#faceContainer { width: 460px; height: 510px; overflow: hidden; background: #fff no-repeat; z-index: 20; position: relative; }


div#currentFace div#faceContainer div.filing { position: absolute; z-index: 50; width: 16px; height: 16px; background: url(/images/playground/wooly-zurbian/wooly-filings.png) no-repeat; }
div#currentFace div#faceContainer div.filing.rot1 { background-position: 0px 0px; }
div#currentFace div#faceContainer div.filing.rot2 { background-position: 0px -16px; }
div#currentFace div#faceContainer div.filing.rot3 { background-position: 0px -32px; }
div#currentFace div#faceContainer div.filing.rot4 { background-position: 0px -48px; }
div#currentFace div#faceContainer div.filing.rot5 { background-position: 0px -64px; }
div#currentFace div#faceContainer div.filing.rot6 { background-position: 0px -80px; }
div#currentFace div#faceContainer div.filing.rot7 { background-position: 0px -96px; }
div#currentFace div#faceContainer div.filing.rot8 { background-position: 0px -112px; }


div#currentFace div#magnetContainer { width: 520px; height: 85px; background: url(/images/playground/wooly-zurbian/magnet-container.png) no-repeat; position: absolute; bottom: 0px; left: 0px; z-index: 50; }

div#saveButton { position: relative; height: 120px; }
div#saveButton img#saveSpinner { position: absolute; top: 20px; right: 160px; }
div#saveButton button { width: 431px; height: 71px; background: url(/images/playground/wooly-zurbian/purple-button-sprite.png) no-repeat; text-indent: -999px; cursor: pointer; margin-bottom: 5px; }
div#saveButton button:active { background-position: 0px -71px; }

div#shared { position: relative; height: 120px; z-index: 200; padding: 0 172px; }
div#shared .column, div#shared .columns { text-align: left; }
div#shared label { display: block; }
div#shared input { padding: 3px 3px 4px; font-size: 13px; color: #555; width: 220px; }

div#shared ul li { float: left; margin-right: 8px; }
a#shareTwitter { display:block; text-indent: -999px; width: 81px; height: 30px; background: url(/images/playground/wooly-zurbian/tweet-button.png) no-repeat; }
a#shareFacebook { display:block; float: left; text-indent: -999px; width: 99px; height: 30px; background: url(/images/playground/wooly-zurbian/facebook-button.png) no-repeat; }
a#shareTwitter:active, a#shareFacebook:active { background-position: 0px -30px; }
a#startOver { text-indent: -999px; display: inline-block; width: 252px; height: 43px; background: url(/images/playground/wooly-zurbian/start-over-button.png) no-repeat; }
a#startOver:active { background-position: 0px -43px; }

img#creepyElves { position: absolute; left: 0px; bottom: 65px; z-index: 10; }
img#boysAndGirls { position: absolute; right: 15px; bottom: 65px; z-index: 10; }


div#woolyFooter { position: absolute; width: 820px; bottom: -8px; left: 30px; }
div#woolyFooter p#model { position: absolute; line-height: 1; left: 0px; bottom: 8px; text-align: left; }
div#woolyFooter p { text-align: center; line-height: 1.4; }
div#woolyFooter p a { font-weight: bold; color: #a9014b; }
div#woolyFooter p#copyright { position: absolute; line-height: 1; right: 0px; bottom: 20px; text-align: right; }



/*div#plasticBubble { border: 1px solid black;  height: 400px; width: 400px; position: relative; background-repeat: no-repeat; }*/
div#filings { border: 1px solid black; height: 50px; position: absolute; bottom: 0; width: 100%; }

/*div#plasticBubble img.filing { position: absolute; }*/
/*div.filing { z-index: 50; position: absolute; }*/
img.beardless { }