/* REQUIRED BUTTON STYLES: */		
button { 
	position: relative;
	border: 0; 
	padding: 0;
	cursor: pointer;
	overflow: visible; /* removes extra side padding in IE */
}

button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

button span { 
	position: relative;
	display: block; 
	white-space: nowrap;	
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	/* Safari and Google Chrome only - fix margins */
	button span {
		margin: -1px -3px;
	}
}


/* ####################################### */
/* ########### PROFILING FORMS ########### */
/* ####################################### */



/* COLOUR SELECTION 
------------------------------------------------*/

p.current-select-block {
	color: #fff;
	overflow: hidden;	
}

p.current-select-block span.bib-colour-block {
	display: block;
	height:26px;
	width:26px;
	background-position: -1px -1px;
	float: left;
	margin: 0 1em 1em 0;	
	padding: 2px;
}

p.current-select-block span.current-selection-text {
	color: #DFC0E9;
}

ul.f-bespoke-colours-palette {
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
	overflow: hidden;
}

ul.f-bespoke-colours-palette li {
	float: left;
/* 	border:1px solid #666; */
	height:20px;
	margin: 0 1em 1em 0;
	width:20px;
	background-position: -1px -1px;
	cursor: pointer;
	padding: 2px;
}

ul.f-bespoke-colours-palette li:hover {
	filter: alpha(opacity=80); 
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); 
	-moz-opacity: 0.8; 
	opacity:0.8; 
	border-color: #444;
}

ul.f-bespoke-colours-palette label {
	position: absolute;
	left: -9999px;
}



/* BODY SHAPES
------------------------------------------------*/
.desc-block {
	height: 12.5em;
	border: 1px dashed #6B157D;
	padding: 20px;
	margin-bottom: 1em;
}

.desc-block #bicon-body {
	margin: 0;
}

ul.body-icons {
	margin: 0 0 1.5em 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	clear: both;
}

ul.body-icons li.body-icon-block {
	position: relative;
	float: left;
	border	: 1px solid #EEEEEE;
	margin: 0 17px 1em 0;
	text-align:center;
	padding: 0 3px 50px 3px;
}

ul.body-icons li.body-icon-block:hover {
	border-color: #ccc;
}

ul.body-icons li.body-icon-block label {
	display: block;
	width: 104px;
	height: 158px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

ul.body-icons li.body-icon-block label input,
ul.body-icons li.body-icon-block label span {
	position: absolute;
}

ul.body-icons li.body-icon-block label input {
	bottom: 10px;
	left: 0;
	width: 110px;
	border: 0;
	background: 0;
}

ul.body-icons li.body-icon-block label span {
	bottom: 25px;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
}


div.f-bespoke-bodyshape li {
	height: 170px;
}


/* FACE SHAPES
------------------------------------------------*/

/* mostly uses same css as Body Shapes above. Exceptions are below */

div.f-bespoke-faceshape div.desc-block {
	height: 6.5em;
	margin-bottom: 1em;
}

div.f-bespoke-faceshape ul.body-icons li.body-icon-block label {
	height: 124px;
}





/* FORM STAGES
------------------------------------------------*/

ol.sequence-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

ol.sequence-list li {
	float: left;
	clear: both;
	border-bottom: 1px dashed #dcdcdc;
	padding: 20px;
	color: #888;
}

ol.sequence-list li:hover {
	color: #444;
}

ol.sequence-list li.current {
	position:relative;
	right:-1px;
	background: #fff;
	padding: 1.6666666666666666666666666666667em 20px;
}	

ol.sequence-list li div.sequence-stage-inner {
	float:right;
	width:203px;
}

ol.sequence-list li p.title {
	margin: 0;
}

ol.sequence-list li.complete p.title {
	background: url(/r/i/icons/silk_set/tick.png) no-repeat 100% 50%;
}

ol.sequence-list li .stage-number {
	font-size: 1.4em;
	font-weight: bold;
	float: left;
	display: block;
	width: 30px;
}

ol.sequence-list li.current {
	color: #333;
}

ol.sequence-list li .result {
	margin-top: 1em;
	font-size: 0.9em;
}







/* ####################################### */
/* ########### GENERIC FORMS ############# */
/* ####################################### */




.fs-container {
/* 	background: #F9F9F9;
	border: 1px solid #d7d7d7;
	padding: 1em; */
	margin-bottom: 1.5em;
	position: relative;
}

.fs-container fieldset {
	padding-top: 50px;
}

.fs-container legend {
	font-size: 1.5em;
	margin-bottom: 1em;
	font-family: Georgia;
	position: absolute;
	top: 20px;
	left: 20px;
	color: #fff;
	font-weight: normal;
}

.f-block {
	padding: 1em 0;
}


/* LABEL AND INPUTS
------------------------------------------------*/

.f-txs label, .f-ema label, .f-area label, .f-ful label, .f-dtd label, .f-map label, .f-select label,
.f-block-set-label {
	padding: 0.7em 10px;
	width: 130px;
	text-align: right;
	font-weight: bold;

}

.f-txs input, .f-ema input, .f-dtd input, .f-area textarea, .f-dtd select, .f-select select, .f-map .m-input,
.f-bespoke-colours-palette li,
.current-select-block span.bib-colour-block,
#stylist-search .search-input {
	border: 4px solid #715178;
	background-color: #fff;
	padding: 0.5em 10px;
	font-family: sans-serif;
	font-size: 99%;
}


/* TEXT AREA
------------------------------------------------*/

.f-area label {
	display: block;
	float: none;
	text-align: left;
	padding-left: 0;
	width: auto;
}


.f-area textarea {
	height: 10em;
	width: 460px;
}

.f-area span {
	display: block;
	clear: left;
	padding: 1em 0;
}

.f-set-group label {
	padding: 0 0 10px 20px;
	width: 180px;
}

.f-set-group-subset-head {
	color: #fff;
	padding-bottom: 0.5em;
}

#specific_styling_advice .f-block-set-label {
	display: none;
}

div.f-bln input,
.f-select input,
.f-set input {
	border: 0;
	background: 0;
	float: left;
	margin-right: 15px;
}

div.f-bln label {
	width: auto;
}

div.f-radio label {
	width: auto;
	padding-left: 2em;
}
div.f-radio label span {
	margin-left : 1em;
}


div.f-bln input {
	margin-right: 10px;

}


.f-submit-unit {
	text-align: center;
}


.f-submit-unit button,
.f-pwd-submit button,
#stylist-search .search-submit {
	display: inline-block;
	padding:1px;
	text-decoration: none;
	background:#BC77D0;
	border: 1px solid #33153C;
	color: #fff;
	overflow: visible !important; /* remove padding from left/right */

}

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
	width: 0;
}

.f-submit-unit button span,
.f-pwd-submit button span,
#stylist-search .search-submit span {
	display:block;
	padding:0.5em 1.5em;
	background:#722E85;
}

.f-submit-unit button:hover span,
.f-submit-unit button:focus span,
.f-pwd-submit button:hover span,
.f-pwd-submit button:focus span,
#stylist-search .search-submit:hover span,
#stylist-search .search-submit:focus span {
	background: #9744B0;
}

.f-required {
	background: transparent url(/images/required.png) no-repeat scroll 95% 50%;
}

.f-ful {
	background-position: 95% 31%;
}


.f-set-group-subset {
	margin-bottom: 1.5em;
}


.f-set-group-subset label {
	padding: 0.5em 0;
}

div.f-note {
	background: #715178;
	color: #fff;
	border: 1px solid #000;
	margin : 0;
	font-size : 1.1em;
}

















/* ####################################### */
/* ########## =SPECIFIC FORMS ############ */
/* ####################################### */

/* LOGIN FORM
------------------------------------------------*/


.login-container .f-block,
.login-container .f-pwd-submit {
	padding: 0.5em 0;
}

.login-container .f-block label {
	float: left;
	width: 55px;
	padding:0.5em;
	padding-right: 10px;
	margin: 0;
}

.login-container .f-block input {
	border: 1px solid #67157B;
	float: left;
	width: 190px;
	padding:0.5em;
}

.login-container .f-pwd-submit {
	padding-left: 70px;
}

.login-container .f-pwd-submit input {
	background: #fff;
	padding: 0.2em 0.5em;
	border: 1px solid #999;
}


/* My Account Settings
------------------------------------------------*/

/* "Required" gif overides*/
/*
fieldset div.person_email_alert_frequency_7,
fieldset div.person_email_alert_frequency_14,
fieldset div.person_email_alert_frequency_30,
fieldset div.person_email_alert_frequency_9999.
fieldset div.person_email_alert_frequency_65535 
*/

fieldset#new_style_alerts div.f-radio {
	background: 0;
}

fieldset#new_style_alerts {
	background: transparent url(/images/required.gif) no-repeat scroll 95% 66%;
}



/* ####################################### */
/* ####### STYLIST DIRECTORY SIGNUP ###### */
/* ####################################### */

#personal_blurb .f-area textarea {
	width: 460px;
	height: 615px;
}

#personal_blurb .f-area {
	background-position: 100% 50px;
}

.stylist-profile-back a {
	background: url(/r/i/icons/silk_set_ie6/user.png) no-repeat 100% 50%;
	padding-right: 22px;
	display: inline-block;
	text-decoration: none;
}

/* SOCIAL NETWORKS
------------------------------------------------*/

#__fsc_add_your_social_networks label {
	margin-right: 0;
	padding-right: 5px;
}