/* form,ul,ol,dd,dl,h1,h2,h3,h4,h5 { margin: 0; padding: 0 } */
ul { list-style-type: none }
p { margin: 0; padding: 0px 0 10px 0 }
address { font-style: normal }
input { font-family: Arial, Verdana, sans-serif; font-size: 12px; color:#333 }
input:focus { border-color:#333 !important; background-color:#fff9eb !important }
.submit { vertical-align: top; padding-top: 2px }
.button { text-align: center; }
img { border:0; }
 .txtfield { width:100%; border: 1px solid #000000;; height:16px; padding:2px 1px 2px 3px; font-size:12px; }
.font10 { font-size:10px }
.font11 { font-size:11px }
.font12 { font-size:12px }
.font14 { font-size:14px }
.font16 { font-size:16px }
.margin5 { margin-top:5px; }




/* Global */
a { color: #000; text-decoration:none; }
a:hover { color: #ff3399 !important }
#fsq-wrap { width:660px; margin:0 auto; text-align:left; position:relative; float: left }
#fsq-wrap h1 {
	line-height: 1em
}
#fsq-wrap form#signup{
	margin-top: 0
}

#fsq-logo { border-bottom:4px solid #000 }
#fsq-footer { border-top:4px solid #000; margin-top:20px; padding-top:20px; text-align:center; }
#fsq-footer span { color:#000 }

/* landing page */
#fsq-main.fsq-lp { width:970px; margin:15px auto 5px auto; }

.fsq-lp  #fsq-main-left,.fsq-lp  #fsq-main-left-image { float:left; width:300px; height:460px; position:relative; }
.fsq-lp  #fsq-main-left-text { text-align:center; }
.fsq-lp  #fsq-main-left-arrow { position:relative; left:280px; top:-70px; z-index:999 }

.fsq-lp  #fsq-main-right { float:left; width:610px; height:450px; padding:20px 10px; margin-left:20px; border:2px solid #000; font-size:18px } 
.fsq-lp  #fsq-head { padding:0 0 5px 0; }
.fsq-lp  #fsq-main-right h1 { font-size:24px; font-weight:normal; padding-bottom:20px }
.fsq-lp  #fsq-main-right li { padding:0 0 10px 17px; background:url(/face-shape-quiz/images/fsq-page-lp-right-star.gif) 0 4px no-repeat; }
.fsq-lp  #fsq-main-right p { padding:5px 0 0 110px; margin:5px 20px 0 0px; line-height:22px; background:url(/face-shape-quiz/images/fsq-page-lp-burst.gif) 2px 0 no-repeat; height:100px; }
.fsq-lp  #fsq-main-right p strong { font-style:italic; }
.fsq-lp  #fsq-main-right .btn { width:440px; margin:10px auto; }

/* quiz page */
#fsq-main.fsq-quiz { width:900px; margin:20px auto; text-align:center;}
.fsq-quiz .swfdiv { padding:2px 0 2px 15px; margin-bottom:20px; border:2px solid #000; font-size:20px;float:left }
.fsq-quiz .info { background-color:#EEE; border:1px solid #CCC; padding:20px; margin-left:25px; text-align:center; height:250px; float:left; }
.fsq-quiz .detail { background-color:#FFF; border:1px solid #CCC; padding:20px; width:500px; margin:0 auto; }
.fsq-quiz #fsq-quiz-arrow { position:relative; top:-303px; left:530px; z-index:999; width:100px } 

/* Email collection form */
.fsq-form { }
.fsq-form a { text-decoration:underline; }

.fsq-form #fsq-head { }
#fsq-main.fsq-form { margin:0 auto; }

.fsq-form #fsq-main-left, .main-image { float:left; width:536px; padding:10px 20px 20px 20px; border:2px solid #000; font-size:16px; }
.fsq-form #fsq-main-left h1, .main-image h1 {font-size:20px; margin-bottom:10px; color:#ff3399; font-style:italic; }
.fsq-form #fsq-main-left ul, .main-image ul { }
.fsq-form #fsq-main-left li, .main-image li { margin-bottom:10px; }
.fsq-form #fsq-main-left li h4,.main-image h4, .fsq-form #fsq-main-left li h5 { margin-bottom:5px; font-weight:bold; font-size:16px; width:100%; }
.fsq-form #fsq-main-left li a:hover { color:#ff3399 !important; text-decoration:none !important; } 

/* Email collection form - External */

.external #q1 { background:url(/face-shape-quiz/images/fsq-page-email-num-1.gif) 0 0 no-repeat;}
.external #q1 .row { margin-bottom:2px; width:100%; }
.external #q1 div .input { float:left; width:300px; }
.external #q1 div .detail { margin-left:15px; float:left; font-size:10px; padding-top:3px; font-family:Arial, Helvetica, sans-serif }

.external #q2 { background:url(/face-shape-quiz/images/fsq-page-email-num-2.gif) 0 0 no-repeat;}
.external #q2 .row { margin-bottom:2px; width:100%; }
.external #q2 div .input {float:left; width:300px; }
.external #q2 div label { }
.external #q2 div .detail { margin-left:15px; float:left; font-size:10px; padding-top:3px; }

.external #q3 { background:url(/face-shape-quiz/images/fsq-page-email-num-3.gif) 0 0 no-repeat;}
.external #q3 .row { margin-bottom:2px; width:100%; }
.external #q3 div .input { float:left; width:150px; }
.external #q3 div label { float:left; width:140px; font-size:13px; padding-top:3px; display:block; }
.external #q3 div .detail { margin-left:15px; float:left; font-size:10px; padding-top:3px; font-family:Arial, Helvetica, sans-serif }

.external #q4 { background:url(/face-shape-quiz/images/fsq-page-email-num-4.gif) 0 0 no-repeat; }
.external #q4 .row { margin-bottom:2px; width:100%; }
.external #q4 div .input { float:left; width:25px; }
.external #q4 div label { font-size:13px; display:block; }

/* Email collection form - Anonymous */
.anonymous li, .external li	{padding-left:40px; margin-bottom: 20px }
#fsq-wrap label {margin-top: 0; padding-top:0; vertical-align: middle }
#fsq-wrap .anonymous li h4 {color: #333; font-weight: bold; font-style: normal}


.anonymous #q1 { background:url(/face-shape-quiz/images/fsq-page-email-num-1.gif) 0 0 no-repeat;margin-top:10px; padding-bottom: 10px}
.anonymous #q1 .row { margin-top:5px; width:100% }
.anonymous #q1 div .input { float:left; width:110px;}
.anonymous #q1 div .detail { float:left; margin-left:15px; float:left; font-size:10px; padding-top:3px; font-family:Arial, Helvetica, sans-serif }
.anonymous #q1 div .input label { padding-right: 12px; vertical-align: middle; cursor: pointer}
input[type='radio'],
input[type='checkbox']{ border: none}

.anonymous #q2 { background:url(/face-shape-quiz/images/fsq-page-email-num-2.gif) 0 0 no-repeat;}
.anonymous #q2 .row { margin-top:5px; width:100% }
.anonymous #q2 div .input {float:left; width:300px; }
.anonymous #q2 div label { }
.anonymous #q2 div .detail { margin-left:15px; float:left; font-size:10px; padding-top:3px; }

.anonymous #q3 { background:url(/face-shape-quiz/images/fsq-page-email-num-3.gif) 0 0 no-repeat;}
.anonymous #q3 .row { margin-top:5px; width:100% }
.anonymous #q3 div .input { float:left; width:300px; }
.anonymous #q3 div label { float:left; width:135px; font-size:13px; padding-top:3px; display:block; }
.anonymous #q3 div .detail { margin-left:15px; float:left; font-size:10px; padding-top:3px; font-family:Arial, Helvetica, sans-serif }

.anonymous #q4 { background:url(/face-shape-quiz/images/fsq-page-email-num-4.gif) 0 0 no-repeat;}
.anonymous #q4 .row { margin-top:5px; width:100% }
.anonymous #q4 div .input { float:left; width:150px; }
.anonymous #q4 div label { float:left; width:145px; font-size:13px; padding-top:2px; display:block; }
.anonymous #q4 div .detail { margin-left:15px; float:left; font-size:10px; padding-top:3px; font-family:Arial, Helvetica, sans-serif }

.anonymous #q5 { background:url(/face-shape-quiz/images/fsq-page-email-num-5.gif) 0 0 no-repeat; }
.anonymous #q5 .row { margin-top:5px; width:100% }
.anonymous #q5 div .input { float:left; width:25px; }
.anonymous #q5 div label { font-size:13px; display:block; margin-left: 26px;}

.fsq-form #fsq-main-right { float:left; padding-bottom:20px; width:321px; margin-left:20px; font-size:16px; font-family:Arial, Helvetica, sans-serif; background-color:#eeeeee; border:1px solid #CCC; position:relative; } 
.fsq-form #fsq-main-right h2 { font-size:16px; margin:0px 0 10px 10px; } 
.fsq-form #fsq-main-right p { background:url(/face-shape-quiz/images/fsq-page-email-right-star.gif) 0 0 no-repeat; padding:0 0 0 15px; margin:10px 0 0px 10px; } 
.fsq-form #fsq-arrow { left:530px;position:absolute;top:510px;width:160px;z-index:999; }

.btn input{ border: none}
.fsq-form .btn { margin:10px 0 0 38px;}

.fsq-form .error .anonymous #q1 h4, .fsq-form .error .anonymous #q5 h4, .fsq-form .error .external #q4 h4 { color:black !important; }
.fsq-form .error h4, .fsq-form .error #q3 div label, .fsq-form .error .anonymous #q4 div label, .fsq-form .error .anonymous #q5 div label a, .fsq-form .error .anonymous #q5 div label, .fsq-form .error .external #q4 div label, .fsq-form .error .external #q4 div label a, .fsq-form .error #q1 .input, .fsq-form .error #q2 div .label, .fsq-form .error #q3 div .label { color:red !important; }
.fsq-form .error #error-display { }
.fsq-form #error-display { padding:5px 30px; font-family:Arial, Helvetica, sans-serif; background-color:#fff9eb; border:1px solid red; margin-bottom:10px; color:red; font-weight:bold; }
.fsq-form #error-display h3 { font-size:12px; }
.fsq-form #error-display ul { margin-left:20px; }
.fsq-form #error-display li { list-style-type:circle; font-size:12px; color:#F00; margin-bottom:2px; padding-bottom:0 }
.fsq-form #error-display { }

/* results page */
.fsq-results { }

#fsq-main.fsq-results { width:975px; margin:0px auto; padding:15px 0; }

.fsq-results #fsq-main-left { width: 600px; float:left; font-size:20px; }
.fsq-results #fsq-main-left p { margin-bottom:15px; line-height:normal; }
.fsq-results #fsq-main-left h1 { font-size:20px; color:#ff3399; font-style:italic; }
.fsq-results #fsq-main-left h3 { font-size:20px; font-weight:bold; margin-bottom:5px; }
.fsq-results #fsq-main-left h2 { font-size:20px; font-weight:normal; margin-bottom:15px; }
.fsq-results #fsq-main-left a { text-decoration:underline; font-weight:bold; color:#ff3399; }
.fsq-results #fsq-main-left a:hover { text-decoration:none; }

.fsq-results #fsq-main-right { width: 340px; float:left; margin-left:30px; font-family:Arial, Helvetica, sans-serif; }
.fsq-results #fsq-main-right .box { background-color:#EEE; border:1px solid #CCC; padding:10px 20px; margin-bottom:10px; font-size:14px; text-align:center; }
.fsq-results #fsq-main-right .box li { padding:0 0 0 15px; background:url(/face-shape-quiz/images/fsq-page-email-right-star.gif) 0 0 no-repeat; margin-bottom:15px; text-align:left; }
.fsq-results #fsq-main-right .box .btn { text-align:center; }
.fsq-results #fsq-main-right .box h4 { margin:10px 0 20px 0; }

/* Clear Fix */
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }