@CHARSET "UTF-8";

/* 
	LAYOUT
*/
#beauty-profiler {
	margin-top:15px;
}

/*
	HEADINGS
*/
#beauty-profiler h1 {
	margin-bottom:15px;
	padding-bottom:8px;
	font-size:18px;
	line-height:26px;
	font-weight:normal;
font-weight:300;
	font-family:"HelveticaNeue", "Helvetica Neue", "Century Gothic", "Helvetica", "Arial", sans-serif;
	text-transform:uppercase;
	letter-spacing:2px;
	word-spacing:-1px;
	text-align:center;
	color:#000;
	background:url('/images/general/h-border.gif') repeat-x left bottom;
}
#beauty-profiler hgroup {
	margin-bottom:23px;
	text-align:center;
}
#beauty-profiler hgroup,
#beauty-profiler h2,
#beauty-profiler h4 {
	display:block;
	float:none;
	text-transform:none;
	background:none;
}
#beauty-profiler h2 {
	font-size:30px;
	line-height:32px;
	font-weight:bold;
	font-family:"HelveticaNeue-Bold", "Helvetica Neue", "Century Gothic", "Helvetica", "Arial", sans-serif;
	letter-spacing:0;
	word-spacing:0;
}
#beauty-profiler h4 {
	margin-top:-6px;
	font-weight:300;
	font-family:"HelveticaNeue", "Helvetica Neue", "Century Gothic", "Helvetica", "Arial", sans-serif;
	text-transform:lowercase;
	color:#999;
}
#beauty-profiler {
	position:relative;
	overflow:hidden;
}
#beauty-profiler form {
	margin-top:30px;
	text-align:;
}
#beauty-profiler ol {
	position:relative;
	list-style:none;
}
#beauty-profiler ol li {
	float:left;
	margin-bottom:40px;
	width:960px;
}
#beauty-profiler fieldset.radio-group .group-hover,
#beauty-profiler fieldset.radio-group .group:hover {
	background:#e4e4e4;
}

beauty-profiler:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*
	PAGER
*/
ul#bp-pager {
	margin:0 auto;
	text-align:center;
}
ul#bp-pager li {
    display:inline-block;
    margin:0 0 0 23px;
    padding:0;
    width:26px;
    height:26px;
    font-size:19px;
    line-height:26px;
	font-family:"Times", "Palatino Linotype", "Times New Roman", "Baskerville", serif;
    text-align:center;
    color:#FFFFFF;
    background:url("/images/checkout/step.gif") no-repeat left top #000000;
}
ul#bp-pager li.selected {
	background-position:left bottom;
}
ul#bp-pager li.completed,
ul#bp-pager li.last-active {
	cursor:pointer;
}
ul#bp-pager li:first-child {
	margin-left:0px;
}

ul#bp-pager:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*
	RADIO & CHECKBOX REPLACEMENTS
*/
#skin-type span.radio-replacement,
#skin-concerns span.checkbox-replacement,
#hair-condition span.checkbox-replacement {
	display:block;
	clear:left;
	float:left;
	margin:0 8px 10px 0;
	width:10px;
	height:10px;
	border:1px solid #484848;
	cursor:pointer;
}
#skin-type span.radio-replacement span,
#skin-concerns span.checkbox-replacement span,
#hair-condition span.checkbox-replacement span {
	display:block;
	margin:1px;
	width:8px;
	height:8px;
	transition: background 0.3s;
	-moz-transition: background 0.3s; /* Firefox 4 */
	-webkit-transition: background 0.3s; /* Safari and Chrome */
	-o-transition: background 0.3s; /* Opera */
	background:#fff;
}
#skin-type span.radio-selected,
#skin-concerns span.checkbox-selected,
#hair-condition span.checkbox-selected {
	border-color:#c444c1;
}
#skin-type span.radio-selected span,
#skin-concerns span.checkbox-selected span,
#hair-condition span.checkbox-selected span {
	background:#c444c1;
}
#skin-type fieldset.radio-group label,
#skin-concerns fieldset.checkbox-group label,
#hair-condition span.checkbox-group label {
	transition: color 0.3s;
	-moz-transition: color 0.3s; /* Firefox 4 */
	-webkit-transition: color 0.3s; /* Safari and Chrome */
	-o-transition: color 0.3s; /* Opera */
}
#skin-concerns fieldset.checkbox-group label,
#hair-condition fieldset.checkbox-group label {
	float:left;
	margin:-2px;
	cursor:pointer;
}
#skin-type fieldset.radio-group label.radio-selected,
#skin-type fieldset.radio-group label:hover,
#skin-concerns fieldset.checkbox-group label.checkbox-selected,
#skin-concerns fieldset.checkbox-group label:hover,
#hair-condition fieldset.checkbox-group label.checkbox-selected,
#hair-condition fieldset.checkbox-group label:hover {
	color:#c444c1;
}

/*
	CONTINUE BUTTON
*/
#beauty-profiler .continue,
#beauty-profiler .submit-input {
	display:block;
	clear:both;
	margin:25px auto 0;
	padding-top:0px;
	border:none;
	width:143px;
	height:21px;
	font-size:12px;
	line-height:21px;
	font-weight:bold;
	font-family:"HelveticaNeue-Bold", "Helvetica Neue", "Century Gothic", "Helvetica", "Arial", sans-serif;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:1px;
	color:#fff;
	background:#000;
}
#beauty-profiler .continue:hover,
#beauty-profiler .submit-input:hover {
	background:#c444c1;
}
#beauty-profiler .submit-input {
	margin-top:35px;
	padding-top:0px;
	height:21px;
}

	
/*
	STEP 1 - WHAT IS YOUR SKIN TYPE
*/
#beauty-profiler li#skin-type fieldset {
	padding-left:408px;
}

#beauty-profiler li#skin-type label {
	margin-top:-2px;
	cursor:pointer;
}

/*
	STEP 2 - WHAT IS CLOSEST TO YOUR SKIN TONE
*/
#skin-tone .group {
	clear:none;
	float:left;
	width:142px;
}
#skin-tone .group label {
	display:block;
	float:none;
	padding-top:11px;
	height:27px;
	text-align:center;
	cursor:pointer;
}
#skin-tone .group label.radio-selected {
	color:#fff;
	background:#c444c1;
}
#skin-tone fieldset {
	margin:-15px auto 0;
	width:852px;
}
#skin-tone .group span.radio-replacement{
	padding-top:15px;
}
#skin-tone .group span {
	display:block;
	width:143px;
	height:39px;
	cursor:pointer;
}
#skin-tone .group span#fair_skin-tone span {
	background:#f7ead7;
}
#skin-tone .group span#light_skin-tone span {
	background:#e1c5ae;
}
#skin-tone .group span#medium_skin-tone span {
	background:#d6a283;
}
#skin-tone .group span#olive_skin-tone span {
	background:#975d47;
}
#skin-tone .group span#deep_skin-tone span {
	background:#541e16;
}
#skin-tone .group span#dark_skin-tone span {
	background:#3f0c01;
}

/*
	STEP 3 - WHAT ARE YOUR SKIN CONERNS
*/
#skin-concerns fieldset:first-child {
	padding-left:262px;
}
#skin-concerns fieldset {
	float:left;
	clear:none;
	width:176px;
}

/*
	STEP 4 - WHAT IS YOUR EYE COLOUR
*/
#eye-colour .group {
	clear:none;
	float:left;
	width:142px;
}
#eye-colour .group label {
	display:block;
	float:none;
	padding-top:11px;
	height:27px;
	text-align:center;
	cursor:pointer;
}/* 
#eye-colour .group-hover,
#eye-colour .group:hover {
	background:#e4e4e4;
}*/ 
#eye-colour .group label.radio-selected {
	color:#fff;
	background:#c444c1;
}
#eye-colour fieldset {
	margin:0 auto;
	width:852px;
}
#eye-colour .group span.radio-replacement {
	display:block;
	padding-bottom:12px;
	width:143px;
	height:44px;
	cursor:pointer;
	background-image:url('/images/beauty-profiler/bp_eye-colour-sprite.png');
	background-repeat:no-repeat;
	background-position:left top;
	background-color:#fff;
}
#eye-colour span#blue_eye-colour {
	background-position:left top;
}
#eye-colour span#green_eye-colour {
	background-position:-143px top;
}
#eye-colour span#blue-grey_eye-colour {
	background-position:-286px top;
}
#eye-colour span#brown_eye-colour {
	background-position:-429px top;
}
#eye-colour span#deep-brown_eye-colour {
	background-position:-572px top;
}
#eye-colour span#hazel_eye-colour {
	background-position:-715px top;
}

/*
	STEP 5 - WHAT IS YOUR HAIR COLOUR
*/
#hair-colour .group {
	clear:none;
	float:left;
	width:142px;
}
#hair-colour .group label {
	display:block;
	float:none;
	padding-top:11px;
	height:27px;
	text-align:center;
	cursor:pointer;
} 
#hair-colour .group label.radio-selected {
	color:#fff;
	background:#c444c1;
}
#hair-colour fieldset {
	margin:-15px auto 0;
	width:852px;
}
#hair-colour .group span.radio-replacement {
	display:block;
	padding-top:15px;
}
#hair-colour .group span.radio-replacement span {
	display:block;
	height:94px;
	cursor:pointer;
	background-image:url('/images/beauty-profiler/bp_hair-colour-sprite.png');
	background-repeat:no-repeat;
	background-position:left top;
}
#hair-colour span#blonde_hair-colour span {
	background-position:left top;
}
#hair-colour span#brunette_hair-colour span {
	background-position:-142px top;
}
#hair-colour span#dark-brown_hair-colour span {
	background-position:-284px top;
}
#hair-colour span#black_hair-colour span {
	background-position:-426px top;
}
#hair-colour span#red_hair-colour span {
	background-position:-568px top;
}
#hair-colour span#grey_hair-colour span {
	background-position:-710px top;
}

/*
	STEP 6 - WHAT IS THE CONDITION OF YOUR HAIR
*/
#beauty-profiler li#hair-condition fieldset:first-child {
	padding-left:262px;
}
#beauty-profiler li#hair-condition fieldset {
	clear:none;
	float:left;
	width:176px;
}
#beauty-profiler li#hair-condition fieldset.checkbox-group-last {
	width:340px;
}

#beauty-profiler li#hair-condition label {
	margin-top:-2px;
	cursor:pointer;
}

/*
	STEP 7 - WHAT ARE YOUR FAVOURITE SCENTS
*/
#favourite-scents .group {
	clear:none;
	float:left;
	width:142px;
}
#favourite-scents .group:hover,
#favourite-scents .group-hover
#favourite-scents .group:hover label,
#favourite-scents .group:hover label span {
	background:#e4e4e4;
}
#favourite-scents .group label {
	display:block;
	float:none;
	padding-top:11px;
	height:64px;
	text-align:center;
	cursor:pointer;
}
#favourite-scents .group label span {
	display:block;
	padding:4px 12px 0;
	font-size:12px;
	line-height:14px;
	color:#999;
}
#favourite-scents .group label.radio-selected {
	color:#fff;
	background:#c444c1;
}
#favourite-scents fieldset {
	margin:-15px auto 0;
	width:710px;
}
#favourite-scents .group span.checkbox-replacement {
	display:block;
	padding-top:15px;
}
#favourite-scents .group span.checkbox-replacement span {
	display:block;
	width:143px;
	height:94px;
	cursor:pointer;
	background-image:url('/images/beauty-profiler/bp_favourite-scents-sprite.png');
	background-repeat:no-repeat;
	background-position:left top;
}
#favourite-scents span#floral_favourate-scents span {
	background-position:left top;
}
#favourite-scents span#sweet_favourate-scents span {
	background-position:-142px top;
}
#favourite-scents span#fresh_favourate-scents span {
	background-position:-284px top;
}
#favourite-scents span#woody_favourate-scents span {
	background-position:-426px top;
}
#favourite-scents span#oriental_favourate-scents span {
	background-position:-568px top;
}
#favourite-scents .group label.checkbox-selected,
#favourite-scents .group label.checkbox-selected span {
	color:#fff;
	background:#c444c1;
}

/*
	STEP 8 - WHICH CATEGORIES INTEREST YOU MOST
*/
#categories-interest .category-image {
	width:307px;
	height:143px;
	background-image:url('/images/beauty-profiler/bp_category-interest-sprite.jpg');
	background-repeat:no-repeat;
	background-position:left top;	
}
#categories-interest #skincare-image {
	background-position:left top;
}
#categories-interest #makeup-image {
	background-position:-322px top;
}
#categories-interest #fragrance-image {
	background-position:-648px top;
}
#categories-interest #body-image {
	background-position:-955px top;
}
#categories-interest #hair-image {
	background-position:-1277px top;
}
#categories-interest #nails-image {
	background-position:-1603px top;
}
#categories-interest h5 {
	position:absolute;
	top:153px;
	left:0px;
	width:309px;
	font-size:14px;
	line-height:20px;
	font-weight:normal;
	font-family:"HelveticaNeue", "Helvetica Neue", "Century Gothic", "Helvetica", "Arial", sans-serif;
	text-align:center;
	color:#484848;
}
#categories-interest fieldset.radio-group {
	position:relative;
	float:left;
	clear:none;
	margin-bottom:7px;
	margin-left:16px;
	width:309px;
}
#categories-interest fieldset.radio-group:first-child {
	margin-left:0px;	
}
#categories-interest fieldset.radio-group span.checkbox-replacement {
	position:relative;
	display:block;
	float:left;
	padding:35px 1px 25px 0;
	width:61px;
	cursor:pointer;
	z-index:200;
}
#categories-interest fieldset.radio-group span.checkbox-replacement-last {
	padding-right:0px;
}
#categories-interest fieldset.radio-group span.checkbox-replacement span {
	display:block;
	height:6px;
	transition: background 0.3s;
	-moz-transition: background 0.3s; /* Firefox 4 */
	-webkit-transition: background 0.3s; /* Safari and Chrome */
	-o-transition: background 0.3s; /* Opera */
	background:#dedede;
}
#categories-interest fieldset.radio-group span.checkbox-replacement.selected.dim-out span {
	background:#dedede;
}
#categories-interest fieldset.radio-group span.checkbox-replacement.selected.dim-out:hover span,
#categories-interest fieldset.radio-group span.checkbox-replacement.selected span,
#categories-interest fieldset.radio-group span.checkbox-replacement:hover span,
#categories-interest fieldset.radio-group span.checkbox-replacement.hover span {
	background:#c444c1;
}
#categories-interest .key {
	position:relative;
	top:-21px;
	font-size:12px;
	color:#484848;
	z-index:100;
}
#categories-interest .key-left {
	float:left;
}
#categories-interest .key-right {
	float:right;
}
li#categories-interest .continue {
	margin-top:20px;
}
li#categories-interest:after,
li#categories-interest .row:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*
	STEP 9 - WHICH OF THE FOLLOWING "NAIL LOOKS" APPEAL TO YOU
*/
#nail-looks fieldset {
	margin:-15px auto 0;
	width:568px;
}
#nail-looks .group {
	float:left;
	clear:none;
	width:142px;
}
#nail-looks .group span.checkbox-replacement {
	display:block;
	padding-top:15px;
}
#nail-looks .group span.checkbox-replacement span {
	display:block;
	height:94px;
	cursor:pointer;
	background-image:url('/images/beauty-profiler/bp_nail-look-sprite.png');
	background-repeat:no-repeat;
	background-position:left top;
}
#nail-looks span#nude_nail-look span {
	background-position:left top;
}
#nail-looks span#classic_nail-look span {
	background-position:-142px top;
}
#nail-looks span#colourful_nail-look span {
	background-position:-284px top;
}
#nail-looks span#arty_nail-look span {
	background-position:-426px top;
}
#nail-looks .group:hover,
#nail-looks .group-hover {
	background:#e4e4e4;
}
#nail-looks .group label {
	display:block;
	float:none;
	padding-top:11px;
	height:27px;
	text-align:center;
	cursor:pointer;
}
#nail-looks .group label.checkbox-selected {
	color:#fff;
	background:#c444c1;
}

/*
	STEP 10 - WHICH MAKE-UP LOOKS APPEAL TO YOU THE MOST
*/
#makeup-looks .group {
	clear:none;
	float:left;
	width:195px;
}
#makeup-looks .group:hover,
#makeup-looks .group-hover
#makeup-looks .group:hover label,
#makeup-looks .group:hover label span {
	background:#e4e4e4;
}
#makeup-looks .group label {
	display:block;
	float:none;
	padding-top:11px;
	height:66px;
	text-align:center;
	cursor:pointer;
}
#makeup-looks .group label span {
	display:block;
	padding:6px 12px 0;
	font-size:12px;
	line-height:14px;
	color:#999;
}
#makeup-looks .group label.radio-selected {
	color:#fff;
	background:#c444c1;
}
#makeup-looks fieldset {
	margin:0 auto;
	width:780px;
}
#makeup-looks .group span.checkbox-replacement {
	display:block;
}
#makeup-looks .group span.checkbox-replacement span {
	display:block;
	width:195px;
	height:192px;
	cursor:pointer;
	background-color:#fff;
	background-image:url('/images/beauty-profiler/bp_makeup-look.png');
	background-repeat:no-repeat;
	background-position:18px top;
}
#makeup-looks .group label.checkbox-selected,
#makeup-looks .group label.checkbox-selected span {
	color:#fff;
	background:#c444c1;
}
#makeup-looks .group span#bombshell_makeup-looks span {
    background-position:-179px 0px;
}
#makeup-looks .group span#creative_makeup-looks span {
    background-position:-377px 0px;
}
#makeup-looks .group span#natural_makeup-looks span {
    background-position:-586px 0px;
}

/*
	BEAUTY PROFILER - THANK YOU
*/
#beauty-profiler #thank-you {
	padding:158px 245px 0;
	text-align:center;
	background:url('/images/beauty-profiler/bp_thank-you-header.jpg') no-repeat 112px 5px;
}
#beauty-profiler #thank-you p {
	margin-bottom:28px;
}
#beauty-profiler .cta-set {
	margin-top:63px;
}

.clear_fix {
	clear:both;
}

#signup_beauty_profiler #beauty-profiler #beauty_profiler_nextstep,
#signup_beauty_profiler #beauty-profiler #beauty_profiler_finish {
	display:block;
	margin:40px auto 0px;
	width:144px;
	height:36px;
	font-size:0px;
	text-indent:-9999em;
	cursor:pointer;
	background:url('/images/site/signin_signup/bg_su_nextstep.png') no-repeat left top;
}
#signup_beauty_profiler #beauty-profiler #beauty_profiler_finish {
	background-image:url('/images/site/signin_signup/bg_su_finish.png');
}
.beauty_profiler_skiplink_h {
	position:fixed;
	top:690px;
	left:0px;
	width:100%;
	text-align:center;
}
.beauty_profiler_skiplink {
	font-size:12px;
	line-height:12px;
	text-decoration:none;
	color:#999;
}
