@charset "utf-8";
* { margin: 0; padding: 0; }
html, body { font: 12px/1.2 Georgia, "Times New Roman", Times, serif; height: 100%; color: #343434; }

body {}
body #page { width: 960px; margin: auto; position: relative; }
a { color: #903325; }

/* Shared Elements */
	/* Page Backgrounds */
body.home     { background: url(/assets/images/bg1-tile.jpg) repeat center -13px; }
body.upload,
body.mystache,
body.video,
body.survey,
body.stache   { background: url(/assets/images/bg2-tile.png) repeat-y center top; }
body.send,
body.final    { background: url(/assets/images/bg3-tile.png) repeat-y center top; }

h1 { font-size: 1.5em; font-weight: normal; color: #791211; text-align: center; margin: 0 0 0.3em 0; }
p { margin: 0 0 1em 0; }
div.form { position: relative; }
.center { text-align: center; }

body #page div.hnavs { position: absolute; top: 0; left: 450px; width: 215px; height: 50px; background: url(/assets/images/quiz-navs.png) no-repeat 0 0; }
body #page div.hnavs a { display: block; float: left; text-indent: -9999px; outline: none; }
body #page div.hnavs a#nvH { width: 95px; height: 45px; }
body #page div.hnavs a#nvG { width: 120px; height: 45px; }

.frame { position: relative; width: 720px; height: 376px; font-size: 16px; }
.frame .inner { width: 100%; height: 100%; padding: 50px; background: url(/assets/images/bg-frame.png) no-repeat 0 0; }

.frame-upload { position: relative; width: 620px; height: 376px; font-size: 16px; }
.frame-upload .inner { width: 100%; height: 100%; padding: 50px; background: url(/assets/images/bg-frame.png) no-repeat 0 0; }

.upload-frame { position: relative; width: 620px; height: 276px; font-size: 16px; }
.upload-frame .inner { background: url(/assets/images/bg-frame.png) no-repeat 0 0; width: 100%; height: 100%; padding: 50px; }

.frame2 { position: relative; width: 414px; height: 276px; padding: 50px; margin: 0 0 1em 0; font-size: 16px; background: url(/assets/images/bg-frame2.png) no-repeat 0 0; }

.frame .caption, .frame2 .caption, .frame-upload .caption { font-style: italic; color: #76090b; }

body.done .frame2 p { font-size: 22px; }
.rpnl { float: right; width: 258px; height: 292px; margin: 80px 0 0 0; background: url(/assets/images/btn-robot.png) no-repeat 0 0; }
.rpnl a { display: block; width: 100%; height: 100%; text-indent: -9999px; }

.lpnl  { float: left; margin: 0; width: 240px; height: 480px; }
.miniH { width: 240px; height: 180px; margin: 0 0 0 25px; }
.miniV { width: 180px; height: 240px; margin: 0 0 0 95px; }


.whtframes { width: 758px; height: 277px; background: url(/assets/images/bg-white-frames.png) no-repeat 0 0; }
.frame-wht2 { float: right; width: 375px; height: 390px; padding: 25px 50px; background: url(/assets/images/bg-white-frames2.png) no-repeat 0 0; }
.frame-wht2 p { font-size: 18px; }

.btn { position: absolute; top: 400px; left: 550px; width: 129px; height: 87px; }
.btn2 { position: absolute; top: 400px; left: 50px; width: 129px; height: 87px; }

div#btn-nextgal { margin-top: 200px; }
div#btn-nextgal a { display: block; width: 100%; height: 100%; text-indent: -9999px; outline: none; background: url(/assets/images/btn-next.png) no-repeat 0 0; }
div#btn-prev { margin-top: 200px; }
div#btn-prev a { background: url(/assets/images/btn-previous.png) no-repeat 0 0; display: block; width: 100%; height: 100%; text-indent: -9999px; outline: none; }
div#btn-next a { display: block; width: 100%; height: 100%; text-indent: -9999px; outline: none; background: url(/assets/images/btn-next.png) no-repeat 0 0; }
div#btn-submit input { background: url(/assets/images/btn-submit.png) no-repeat 0 0; }
div#btn-startsurvey { width: 167px; height: 87px; }
.input-button { display: block; border: none; width: 129px; height: 87px; text-indent: -9999px; background: url(/assets/images/btn-startsurvey.png) no-repeat 0 0; cursor: pointer; }
div#btn-startsurvey input { width: 167px; height: 87px; }

.clip-hanging-arrow { position: absolute; top: 0; left: 0; width: 305px; height: 206px; margin: -10px 0 0 0; padding: 0;/* background: url(/assets/images/arrow-hang.png) repeat center top; */}
.clip-photos1 { position: absolute; top: 120px; left: 550px; z-index: 5; width: 157px; height: 181px; background: url(/assets/images/clip-photos01.png) no-repeat 0 0; }
.clip-cert-horseshoe { width: 150px; height: 106px; }
.clip-stache-gallery { position: absolute; top: 0; left: 0; z-index: 5; width: 425px; height: 239px; background: url(/assets/images/clip-stache-gallery.png) no-repeat 0 0; }

body.video .clip-hanging-arrow   { position: absolute; top: 0; left: 0; width: 305px; height: 206px; }
body.video .clip-hanging-arrow a { display: block; width: 305px; height: 206px; text-indent: -9999px; background: url(/assets/images/arrow-hang.png) repeat center top; }


/* Home Elements */
body.home  {}
body.home #page { height: 800px; background: url(/assets/images/bg1.jpg) no-repeat 0 0; }
body.home #page div.header { position: absolute; top: 60px; left: 375px; width: 425px; height: 200px; }
body.home #page div.header p { font-size: 14px; line-height: 1.2; }

#photos { position: absolute; top: 195px; left: 205px; width: 600px; height: 360px; }
#holly1 { position: absolute; top: 100px; right: 0; width: 325px; height: 334px; background: url(/assets/images/holly.png) no-repeat 0 0; }
#get-stached-arrow   { position: absolute; top: 400px; right: 50px; width: 316px; height: 229px; z-index: 4; }
#get-stached-arrow a { display: block; width: 100%; height: 100%; /*width: 300px; height: 155px;*/ text-indent: -9999px; outline: none; background: url(/assets/images/arrow.png) no-repeat 0 0; }


#my-stache-arrow   { position: absolute; top: 500px; right: 50px; width: 316px; height: 229px; z-index: 4; }
#my-stache-arrow a { display: block; width: 100%; height: 100%; /*width: 300px; height: 155px;*/ text-indent: -9999px; outline: none; background: url(/assets/images/arrow.png) no-repeat 0 0; }



#video   { position: absolute; top: 575px; left: 190px; width: 300px; height: 151px; }
#video a { display: block; width: 100%; height: 100%; text-indent: -9999px; outline: none; background: url(/assets/images/clip-chrissy.png) no-repeat 0 0; }

#gallery   { position: absolute; top: 600px; right: 200px; width: 213px; height: 85px; }
#gallery a { display: block; width: 100%; height: 100%; text-indent: -9999px; outline: none; background: url(/assets/images/stache-gallery.png) no-repeat 0 0; z-index: 5; }
#hhb { position: absolute; top: 700px; right: 150px; font-size: 15px; color: #eadec6; }
#hhb span { font-size: 200%; }

/* Survey Elements */
body.survey  {}
body.video #page,
body.survey #page { width: 720px; padding: 214px 0 0 0; }
body.survey #page #step { position: absolute; top: 480px; left: 35px; font-size: 17px; color: #933d2c; }
body.survey #page #surveystep { position: absolute; top: 280px; left: 35px; font-size: 17px; color: #933d2c; }
body.survey #page #gallerystep { position: absolute; top: 500px; left: 35px; font-size: 17px; color: #933d2c; }
form {}
form div.item { width: 550px; position: absolute; top: 100px; left: 0px; font-size: 18px; color: #000000; }
form div.item div.q { }
form div.item div.q span { float: left; margin: 0 0.5em 2em 0; }
form div.item label { display: block; clear: both; padding: 2px 0 2px 10px; }
form div.item input { float: left; clear: left; margin: 4px; }
form div.item label span { float: left; }

.errSummary  { position: absolute; top: 400px; left: 125px; padding: 20px; background: #87080A; font-size: 17px; font-weight: bold; color: #ffffff; z-index: 5; }
.errSummary2 { position: absolute; top: 600px; left: 125px; padding: 20px; background: #87080A; font-size: 17px; font-weight: bold; color: #ffffff; z-index: 5; width: 330px; }

body.send .errSummary { top: 380px; left: 330px; width: 240px; }

.hide { display: none; }
.show { display: block; }

div.gallery-photos { width: 570px; position: absolute; top: 100px; left: 75px; font-size: 18px; color: #000000; }

/* Upload Photo Elements */
body.upload {}
body.upload #page { width: 720px; padding: 214px 0 0 0; }

/* My Stache Elements */
body.mystache {}
body.mystache #page { width: 720px; padding: 100px 0 0 0; }

/* Send Elements */
body.send {}
body.send #page { width: 800px; padding: 115px 0 0 0; }
body.send #page div.hnavs { left: 550px; }

div.form label       { display: block; clear: both; overflow: auto; margin: 0 0 4px 0; padding: 0; }

div.form label span  { display: block; float: left; clear: left; width: 75px; text-align: right; margin: 0; padding: 0 8px 0 0; }

div.form label input,
div.form label textarea { display: block; float: left; width: 250px; margin: 0; padding: 0; font-size: 12px; line-height: 1.2; padding: 2px; }
input#btn-send { display: block; width: 105px; height: 53px; margin-left: 240px; background: url(/assets/images/btn-send.png) no-repeat 0 0; border: none; }

.skip-step { margin: 0 0 0 260px; font-size: 14px; color: #903325; }
.skip-step a { font-size: 14px; color: #903325; text-decoration: none; }

#holly2 { position: absolute; top: 50px; left: 75px; width: 356px; height: 581px; z-index: -1; background: url(/assets/images/holly2.png) no-repeat 0 0; }


/* Customize my stache elements */

body.stache {}
body.stache div.wrapper { overflow: auto; }
body.stache div.coll, body.stache div.colr {}

body.stache div.coll { float: left; clear: left;  width: 307px; height: 377px; margin: 200px 50px 0 50px; position: relative; font-size: 18px; }
body.stache div.coll .inner { padding: 25px; height: 100%; background: url(/assets/images/bg-white-frames3.png) no-repeat 0 0; }

body.stache div.colr { float: left; clear: right; width: 500px; height: 550px; margin: 100px 0 0 0; }

.stachename { font-size: 24px; }

.btn-export { position: absolute; top: 325px; left: 50px; width: 213px; height: 87px; }
.btn-export a { display: block; width: 100%; height: 100%; text-indent: -9999px; outline: none; background: url(/assets/images/btn-done-submit.png) no-repeat 0 0; }

/* Video */
.frame-video { background: url(/assets/images/bg-frame2a.png) no-repeat 0 0; width: 514px; height: 446px; padding: 50px 0 0 0; margin: 0 0 0 125px; }

/* Final page elements */
body.final {}
body.final #page { width: 800px; padding: 30px 0 0 0; }
body.final #page div.hnavs { left: 550px; }

body.final div.wrapper { overflow: auto; width: 780px; margin: auto; }

body.final div.wrapper div.buttons { float: left; width: 260px; padding: 14px 0 0 0; }
body.final div.wrapper div.buttons ul { list-style: none; margin: 0; padding: 0; }
body.final div.wrapper div.buttons ul li { display: block; width: 251px; height: 67px; margin: 0 0 4px 0; }
body.final div.wrapper div.buttons ul li a { display: block; width: 100%; height: 100%; text-indent: -9999px; }
#fnlbtn-print a    { background: url(/assets/images/btn-print-your-photo.png) no-repeat 0 0; }
#fnlbtn-save a     { background: url(/assets/images/btn-save-to-your-computer.png) no-repeat 0 0; }
#fnlbtn-restache a { background: url(/assets/images/btn-re-stache-yourself.png) no-repeat 0 0; }
#fnlbtn-send a     { background: url(/assets/images/btn-send-to-more-people.png) no-repeat 0 0; }

body.final div.wrapper div.cert-info { float: left; width: 502px; height: 294px; background: url(/assets/images/bg-white-frames-cert.png) no-repeat 0 0; }
body.final div.wrapper div.cert-info h1 { text-align: left; margin: 40px 0 0 225px; font-size: 22px; }
body.final div.wrapper div.cert-info p  { font-size: 18px; margin: 30px 40px 0 40px; }

body.final div.wrapper div.cert-info div.download   { width: 161px; height: 51px; margin: 10px 0 0 300px; background: url(/assets/images/btn-download.png) no-repeat 0 0; }
body.final div.wrapper div.cert-info div.download a { display: block; width: 100%; height: 100%; text-indent: -9999px; }

#chrissy-flash { margin:auto; width: 320px; text-align:center; }

.photo { display:block; width: 75px; height: 75px; overflow:hidden; float:left; margin:3px; padding:0; }
.stachename-inline { font-weight: bold; font-size: 120%; }